/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../../Volumes/data/data/work-project/sscs/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../../../../Volumes/data/data/work-project/sscs/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Pretendard — «자체 호스팅». 🔴 CDN 을 런타임에 부르지 않는다 (2026-09-01).
   `sscs-admin-sv` 는 폐쇄망이라 그 요청이 영영 안 온다 — 거기서는 폴백으로 보였다.
   생성기: tools/fonts/build-pretendard.py · 자산: public/fonts/pretendard/ (92조각·2.82MB)
   ⚠ 여기에 «인라인하지 않는다» — 이 파일은 페이지마다 복제돼 구워진다(실측 113벌).
     48KB 를 넣으면 5.4MB 가 된다. 정적 파일 한 번 받는 편이 훨씬 싸다. */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Pretendard Variable, "Malgun Gothic", -apple-system, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.inp { width: 100%; border: 1px solid #d4dae3; border-radius: 7px; padding: 9px 11px; font-size: 12.5px; color: #1c2733; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
.inp:focus { border-color: #2a5db0; box-shadow: 0 0 0 3px rgba(42, 93, 176, .12); }
/* 읽기 전용 입력 — 「고칠 수 없다」를 색으로 먼저 말한다(종결 차수·본사 상속 필드).
     readonly 는 disabled 와 달리 값이 폼에 그대로 실려 가므로 시각 구분이 없으면 편집 가능해 보인다. */
.inp[readonly] { background: #f5f7fa; color: #57606a; cursor: not-allowed; }
textarea.inp { resize: vertical; min-height: 120px; line-height: 1.6; }
/*
   * ★ [2026-08-24 · 사용자 신고 「모바일 문서카드 상세보기에서 캘린더 오브젝트만 가로길이가 안 맞는다」
   *   「캘린더는 캘린더 아이콘이랑 같이 보이게 해줘」]
   *
   * ## 왜 «날짜 칸만» 어긋나나
   * `input[type=date]` 는 **폼 컨트롤이라 브라우저가 고유 폭을 갖는다**(내부 세그먼트 yyyy/mm/dd 를
   * 담을 만큼). iOS Safari 는 그 고유 폭 아래로 **안 줄어든다** — `width:100%` 를 줘도 칸이
   * 부모를 넘고, 옆 칸(작성자)까지 밀린다. 같은 자리의 `type=text` 는 멀쩡하니 「캘린더만」으로 보인다.
   * ⇒ `-webkit-appearance:none` 으로 그 고유 배치를 걷고 `min-width:0` 으로 줄어들 수 있게 한다.
   *
   * ## 아이콘은 «우리가» 그린다
   * iOS 는 닫힌 날짜 칸에 **아무 표시도 안 그린다**(글자뿐) — 날짜 칸인 줄 모른다.
   * Chrome 은 자기 아이콘을 그린다. 그대로 두면 **두 OS 가 서로 다른 화면**이 된다.
   * ⇒ 배경으로 달력 아이콘을 깔고, Chrome 의 기본 아이콘은 **투명하게만** 만든다
   *   (`display:none` 이면 그 자리를 눌러 달력을 여는 길이 막힌다 — 투명은 «보이지만 않을 뿐» 눌린다).
   *
   * ⚠ **iOS 실기기로는 확인 못 했다**(이 환경엔 WebKit 이 없다 · 헤드리스 Chrome 은 Blink 라
   *   애초에 안 넘쳤다). 위 처방은 그 결함의 표준 대응이다 — 실기기에서 확인해 달라.
   * ⚠ `.inp` 에만 건다. 표 «칸 안»의 날짜 입력은 폭이 좁아 오른쪽 여백 32px 을 감당 못 한다.
   */
input[type="date"].inp, input[type="datetime-local"].inp {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    min-width: 0;
    max-width: 100%;
    padding-right: 32px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a94a2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 16px 16px;
  }
/* 시각 입력도 «폭»만 같이 고친다 — 아이콘은 달력이 아니라 안 붙인다. */
input[type="time"].inp { -webkit-appearance: none; -moz-appearance: none; appearance: none; min-width: 0; max-width: 100%; }
/*
   * ★ [2026-08-24 · 사용자 신고 「모바일에서 인풋 포커싱시 화면이 확대된다」]
   *
   * ## 왜 확대되나
   * **iOS Safari 는 글자가 16px «미만»인 입력에 포커스가 가면 화면을 자동으로 확대한다**
   * (읽을 수 있게 해 주려는 동작이다). 우리 `.inp` 는 **12.5px** · 표 칸은 **12px** 이라 늘 걸린다.
   * 확대된 뒤에는 스스로 안 돌아와, 사용자가 손으로 축소해야 한다 — 그게 「화면이 확대돼」다.
   *
   * ## 왜 «16px» 인가 — viewport 로 막지 «않는다»
   * `maximum-scale=1` / `user-scalable=no` 를 넣으면 확대가 막히지만 **핀치 줌도 함께 죽는다.**
   *   · 접근성 위반이다(글씨를 키워 보는 사용자가 못 키운다).
   *   · 그리고 **바로 이 앱이 핀치 줌을 쓴다** — 문서 미리보기는 A4 를 폰 폭에 넣어
   *     「맞춤」이 기본이라(사용자 결정) **핀치로 확대해 읽는 길**이 있어야 한다.
   * ⇒ 막는 대신 **원인을 없앤다**: 손가락으로 쓰는 기기에서만 입력 글자를 16px 로 올린다.
   *
   * ⚠ `pointer: coarse` 로 좁힌다 — 마우스 쓰는 화면은 종전 그대로(12.5px)다.
   * ⚠ 표 «칸» 입력도 함께 올린다. 안 올리면 거기서 또 확대된다.
   *   표는 `overflow-x-auto` 안에 있어(SchemaForm) 넓어져도 가로로 스크롤될 뿐 밀려나지 않는다.
   * ⚠ 체크박스·라디오는 뺀다(글자가 없다).
   */
@media (pointer: coarse) {
    /*
     * 🔴 [실측이 잡았다] 처음엔 `select` · `textarea` 만 적었는데 **12.5px 로 남았다** —
     *   `.inp`(클래스 · 특이도 0,1,0)가 태그 선택자(0,0,1)를 이긴다.
     *   `input` 쪽만 우연히 이겼다(`:not([type=…])` 셋이 특이도를 0,3,1 로 올려 준다).
     *   ⇒ **클래스를 함께 적어** 특이도를 맞춘다. 안 그랬으면 셀렉트·여러줄 칸에서 계속 확대됐다.
     */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select, select.inp,
    textarea, textarea.inp {
      font-size: 16px;
    }
  }
/* Chrome 기본 아이콘 — 자리는 남기고 «보이지만» 않게(누르면 여전히 달력이 열린다). */
input[type="date"].inp::-webkit-calendar-picker-indicator,
  input[type="datetime-local"].inp::-webkit-calendar-picker-indicator { opacity: 0; }
/*
   * ★ [2026-09-06 · 3차 · 사용자 신고] 「일자 입력 항목에 «포커스인이 되면» 포맷이
   *   2026-09-30 이런 형식으로 변경되는데??」
   *
   * ## 🔴 그 증상은 «우리가 만든» 것이다 — 2차 고침의 대가였다
   * 2차(같은 날)는 「겹쳐 보인다」를 고치려고 **포커스가 들어오면 네이티브 글자를 되살렸다.**
   * 그런데 클릭이 곧 포커스라(`refocusControl`) **달력을 여는 내내 네이티브 꼴로 보인다** —
   * 그 꼴은 브라우저·OS locale 이 정해 `2026-09-30` · `2026. 09. 30.` · `09/30/2026` 로 갈린다.
   *
   * ## 고침 — 포커스 «안에서도» 우리 글자. 겹침은 «강조를 죽여» 막는다
   * 겹쳐 보이던 진짜 원인은 글자가 아니라 **브라우저가 자기 색으로 그리는 세그먼트 강조**다.
   * 글자와 강조를 «둘 다» 죽이면 포커스 안팎이 한 꼴이고 겹칠 것이 없다.
   * ```
   * 실측(헤드리스 Chrome · scale 3 · value=2026-09-30)
   *   지금(2차)  포커스 안  「2026. 09. 30.」 + 연도칸 파란 강조   ← 사용자가 신고한 그림
   *   이 규칙    포커스 안  「2026.09.30.」  강조 없음            포커스 밖과 «같다»
   * ```
   * ⚠ `:focus-visible` 로 「키보드로 들어왔을 때만」 되살리는 갈래는 **버렸다** — 실측에서
   *   **마우스 클릭에도 `:focus-visible`=true** 였다(크롬은 키보드 입력을 받는 칸을 늘 그렇게 본다).
   *   가르지 못하는 술어로 갈래를 만들면 「가른다고 믿는 죽은 코드」가 된다.
   *
   * ⚠ **못 재는 것 — 숨기지 않는다**
   *   · 키보드로 Tab 해 들어와 «세그먼트를 부분 입력»하는 동안은 아무 글자도 안 보인다.
   *     (값이 완성돼야 우리 글자가 바뀐다.) 키보드 경로의 정본은 **시트**다 —
   *     Enter·Space·↑·↓ 로 열리고, 그 안 타이핑 칸은 `YYYY.MM.DD` 로 보인다.
   *   · Firefox 는 `::-webkit-…` 를 모른다(그쪽은 첫 줄 `color` 만 듣는다). **실기기 미확인.**
   *
   * ⚠ `[data-date-face]` 가 붙은 칸에만 건다 — 그 속성은 `DateFace` 가 «값이 있을 때만» 붙인다.
   *   빈 칸에는 안 걸려 기본 안내(yyyy-mm-dd)가 그대로 보인다(그게 「날짜 칸」임을 알린다).
   */
[data-date-face] input[type="date"],
  [data-date-face] input[type="datetime-local"] { color: transparent; }
[data-date-face] input[type="date"]::-webkit-datetime-edit,
  [data-date-face] input[type="datetime-local"]::-webkit-datetime-edit { color: transparent; }
[data-date-face] input::-webkit-datetime-edit-year-field,
  [data-date-face] input::-webkit-datetime-edit-month-field,
  [data-date-face] input::-webkit-datetime-edit-day-field,
  [data-date-face] input::-webkit-datetime-edit-hour-field,
  [data-date-face] input::-webkit-datetime-edit-minute-field,
  [data-date-face] input::-webkit-datetime-edit-ampm-field,
  [data-date-face] input::-webkit-datetime-edit-text {
    color: transparent !important;
    background-color: transparent !important;
  }
.upload { display: flex; align-items: center; gap: 11px; border: 1.5px dashed #c2cbd8; border-radius: 9px; padding: 14px; background: #fafbfc; cursor: pointer; transition: background .15s, border-color .15s; }
.upload:hover { background: #eef3fb; border-color: #2a5db0; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.\!fixed {
  position: fixed !important;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-x-4 {
  left: 1rem;
  right: 1rem;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-1 {
  bottom: -0.25rem;
}
.-left-\[22px\] {
  left: -22px;
}
.-right-1 {
  right: -0.25rem;
}
.-top-1 {
  top: -0.25rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-1 {
  bottom: 0.25rem;
}
.bottom-1\.5 {
  bottom: 0.375rem;
}
.bottom-2 {
  bottom: 0.5rem;
}
.bottom-20 {
  bottom: 5rem;
}
.bottom-3 {
  bottom: 0.75rem;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-6 {
  bottom: 1.5rem;
}
.left-0 {
  left: 0px;
}
.left-1 {
  left: 0.25rem;
}
.left-1\.5 {
  left: 0.375rem;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-3\.5 {
  left: 0.875rem;
}
.left-\[21px\] {
  left: 21px;
}
.left-\[3px\] {
  left: 3px;
}
.left-\[9px\] {
  left: 9px;
}
.right-0 {
  right: 0px;
}
.right-0\.5 {
  right: 0.125rem;
}
.right-1 {
  right: 0.25rem;
}
.right-1\.5 {
  right: 0.375rem;
}
.right-2 {
  right: 0.5rem;
}
.right-2\.5 {
  right: 0.625rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-\[5px\] {
  right: 5px;
}
.right-\[9px\] {
  right: 9px;
}
.top-0 {
  top: 0px;
}
.top-0\.5 {
  top: 0.125rem;
}
.top-1 {
  top: 0.25rem;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-14 {
  top: 3.5rem;
}
.top-2 {
  top: 0.5rem;
}
.top-2\.5 {
  top: 0.625rem;
}
.top-\[2px\] {
  top: 2px;
}
.top-\[3px\] {
  top: 3px;
}
.top-\[5px\] {
  top: 5px;
}
.top-\[max\(env\(safe-area-inset-top\)\2c 12px\)\] {
  top: max(env(safe-area-inset-top), 12px);
}
.top-full {
  top: 100%;
}
.top-px {
  top: 1px;
}
.left-2\.5 {
  left: 0.625rem;
}
.isolate {
  isolation: isolate;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[10000\] {
  z-index: 10000;
}
.z-\[10001\] {
  z-index: 10001;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[2\] {
  z-index: 2;
}
.z-\[3\] {
  z-index: 3;
}
.z-\[45\] {
  z-index: 45;
}
.z-\[4\] {
  z-index: 4;
}
.z-\[5\] {
  z-index: 5;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[61\] {
  z-index: 61;
}
.z-\[70\] {
  z-index: 70;
}
.z-\[80\] {
  z-index: 80;
}
.z-\[81\] {
  z-index: 81;
}
.z-\[9000\] {
  z-index: 9000;
}
.z-\[90\] {
  z-index: 90;
}
.z-\[95\] {
  z-index: 95;
}
.z-\[9999\] {
  z-index: 9999;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.m-0 {
  margin: 0px;
}
.m-1 {
  margin: 0.25rem;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.mx-3\.5 {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.-mb-px {
  margin-bottom: -1px;
}
.-ml-1 {
  margin-left: -0.25rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.-mt-1\.5 {
  margin-top: -0.375rem;
}
.-mt-\[22px\] {
  margin-top: -22px;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-3\.5 {
  margin-bottom: 0.875rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-7 {
  margin-bottom: 1.75rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-\[11px\] {
  margin-bottom: 11px;
}
.mb-\[14px\] {
  margin-bottom: 14px;
}
.mb-\[18px\] {
  margin-bottom: 18px;
}
.mb-\[3px\] {
  margin-bottom: 3px;
}
.mb-\[5px\] {
  margin-bottom: 5px;
}
.mb-\[7px\] {
  margin-bottom: 7px;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-0\.5 {
  margin-right: 0.125rem;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-auto {
  margin-right: auto;
}
.mt-0 {
  margin-top: 0px;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-3\.5 {
  margin-top: 0.875rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.mt-\[14px\] {
  margin-top: 14px;
}
.mt-\[18px\] {
  margin-top: 18px;
}
.mt-\[1px\] {
  margin-top: 1px;
}
.mt-\[2px\] {
  margin-top: 2px;
}
.mt-\[3px\] {
  margin-top: 3px;
}
.mt-\[7px\] {
  margin-top: 7px;
}
.mt-\[9px\] {
  margin-top: 9px;
}
.mt-auto {
  margin-top: auto;
}
.mt-px {
  margin-top: 1px;
}
.box-content {
  box-sizing: content-box;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.\!hidden {
  display: none !important;
}
.hidden {
  display: none;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}
.aspect-\[297\/210\] {
  aspect-ratio: 297/210;
}
.aspect-\[8\/5\] {
  aspect-ratio: 8/5;
}
.aspect-\[97\/68\] {
  aspect-ratio: 97/68;
}
.aspect-\[W\/H\] {
  aspect-ratio: W/H;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[100dvh\] {
  height: 100dvh;
}
.h-\[104px\] {
  height: 104px;
}
.h-\[10px\] {
  height: 10px;
}
.h-\[112px\] {
  height: 112px;
}
.h-\[118px\] {
  height: 118px;
}
.h-\[11px\] {
  height: 11px;
}
.h-\[132px\] {
  height: 132px;
}
.h-\[13px\] {
  height: 13px;
}
.h-\[14px\] {
  height: 14px;
}
.h-\[150px\] {
  height: 150px;
}
.h-\[15px\] {
  height: 15px;
}
.h-\[168px\] {
  height: 168px;
}
.h-\[16px\] {
  height: 16px;
}
.h-\[17px\] {
  height: 17px;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[19px\] {
  height: 19px;
}
.h-\[2\.5px\] {
  height: 2.5px;
}
.h-\[200px\] {
  height: 200px;
}
.h-\[20px\] {
  height: 20px;
}
.h-\[210px\] {
  height: 210px;
}
.h-\[21px\] {
  height: 21px;
}
.h-\[220px\] {
  height: 220px;
}
.h-\[22px\] {
  height: 22px;
}
.h-\[232px\] {
  height: 232px;
}
.h-\[24px\] {
  height: 24px;
}
.h-\[26px\] {
  height: 26px;
}
.h-\[28px\] {
  height: 28px;
}
.h-\[2px\] {
  height: 2px;
}
.h-\[30px\] {
  height: 30px;
}
.h-\[320px\] {
  height: 320px;
}
.h-\[34px\] {
  height: 34px;
}
.h-\[36px\] {
  height: 36px;
}
.h-\[38px\] {
  height: 38px;
}
.h-\[3px\] {
  height: 3px;
}
.h-\[420px\] {
  height: 420px;
}
.h-\[44px\] {
  height: 44px;
}
.h-\[46px\] {
  height: 46px;
}
.h-\[4px\] {
  height: 4px;
}
.h-\[50px\] {
  height: 50px;
}
.h-\[52px\] {
  height: 52px;
}
.h-\[54px\] {
  height: 54px;
}
.h-\[58px\] {
  height: 58px;
}
.h-\[5px\] {
  height: 5px;
}
.h-\[60px\] {
  height: 60px;
}
.h-\[62px\] {
  height: 62px;
}
.h-\[64px\] {
  height: 64px;
}
.h-\[68px\] {
  height: 68px;
}
.h-\[72px\] {
  height: 72px;
}
.h-\[7px\] {
  height: 7px;
}
.h-\[84px\] {
  height: 84px;
}
.h-\[8px\] {
  height: 8px;
}
.h-\[90px\] {
  height: 90px;
}
.h-\[min\(92vh\2c 880px\)\] {
  height: min(92vh, 880px);
}
.h-\[min\(92vh\2c \2026\)\] {
  height: min(92vh, …);
}
.h-auto {
  height: auto;
}
.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-0 {
  max-height: 0px;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-\[1600px\] {
  max-height: 1600px;
}
.max-h-\[164px\] {
  max-height: 164px;
}
.max-h-\[168px\] {
  max-height: 168px;
}
.max-h-\[190px\] {
  max-height: 190px;
}
.max-h-\[196px\] {
  max-height: 196px;
}
.max-h-\[220px\] {
  max-height: 220px;
}
.max-h-\[240px\] {
  max-height: 240px;
}
.max-h-\[260px\] {
  max-height: 260px;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[320px\] {
  max-height: 320px;
}
.max-h-\[560px\] {
  max-height: 560px;
}
.max-h-\[60px\] {
  max-height: 60px;
}
.max-h-\[62vh\] {
  max-height: 62vh;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[72dvh\] {
  max-height: 72dvh;
}
.max-h-\[76px\] {
  max-height: 76px;
}
.max-h-\[80vh\] {
  max-height: 80vh;
}
.max-h-\[82vh\] {
  max-height: 82vh;
}
.max-h-\[85dvh\] {
  max-height: 85dvh;
}
.max-h-\[86dvh\] {
  max-height: 86dvh;
}
.max-h-\[86vh\] {
  max-height: 86vh;
}
.max-h-\[88dvh\] {
  max-height: 88dvh;
}
.max-h-\[88vh\] {
  max-height: 88vh;
}
.max-h-\[92dvh\] {
  max-height: 92dvh;
}
.max-h-\[92vh\] {
  max-height: 92vh;
}
.max-h-\[calc\(100dvh-32px\)\] {
  max-height: calc(100dvh - 32px);
}
.max-h-full {
  max-height: 100%;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-\[100dvh\] {
  min-height: 100dvh;
}
.min-h-\[116px\] {
  min-height: 116px;
}
.min-h-\[124px\] {
  min-height: 124px;
}
.min-h-\[12px\] {
  min-height: 12px;
}
.min-h-\[132px\] {
  min-height: 132px;
}
.min-h-\[150px\] {
  min-height: 150px;
}
.min-h-\[186px\] {
  min-height: 186px;
}
.min-h-\[220px\] {
  min-height: 220px;
}
.min-h-\[300px\] {
  min-height: 300px;
}
.min-h-\[32px\] {
  min-height: 32px;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[45vh\] {
  min-height: 45vh;
}
.min-h-\[48px\] {
  min-height: 48px;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-\[92px\] {
  min-height: 92px;
}
.min-h-\[96px\] {
  min-height: 96px;
}
.min-h-full {
  min-height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.\!w-\[110px\] {
  width: 110px !important;
}
.\!w-\[132px\] {
  width: 132px !important;
}
.\!w-\[136px\] {
  width: 136px !important;
}
.w-0 {
  width: 0px;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/2 {
  width: 50%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[104px\] {
  width: 104px;
}
.w-\[108px\] {
  width: 108px;
}
.w-\[110px\] {
  width: 110px;
}
.w-\[112px\] {
  width: 112px;
}
.w-\[116px\] {
  width: 116px;
}
.w-\[118px\] {
  width: 118px;
}
.w-\[124px\] {
  width: 124px;
}
.w-\[12px\] {
  width: 12px;
}
.w-\[132px\] {
  width: 132px;
}
.w-\[13px\] {
  width: 13px;
}
.w-\[140px\] {
  width: 140px;
}
.w-\[14px\] {
  width: 14px;
}
.w-\[150px\] {
  width: 150px;
}
.w-\[15px\] {
  width: 15px;
}
.w-\[160px\] {
  width: 160px;
}
.w-\[168px\] {
  width: 168px;
}
.w-\[16px\] {
  width: 16px;
}
.w-\[17px\] {
  width: 17px;
}
.w-\[180px\] {
  width: 180px;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[190px\] {
  width: 190px;
}
.w-\[19px\] {
  width: 19px;
}
.w-\[20px\] {
  width: 20px;
}
.w-\[220px\] {
  width: 220px;
}
.w-\[22px\] {
  width: 22px;
}
.w-\[232px\] {
  width: 232px;
}
.w-\[24px\] {
  width: 24px;
}
.w-\[26px\] {
  width: 26px;
}
.w-\[272px\] {
  width: 272px;
}
.w-\[280px\] {
  width: 280px;
}
.w-\[28px\] {
  width: 28px;
}
.w-\[300px\] {
  width: 300px;
}
.w-\[30px\] {
  width: 30px;
}
.w-\[320px\] {
  width: 320px;
}
.w-\[34px\] {
  width: 34px;
}
.w-\[36\%\] {
  width: 36%;
}
.w-\[38px\] {
  width: 38px;
}
.w-\[3px\] {
  width: 3px;
}
.w-\[40px\] {
  width: 40px;
}
.w-\[42px\] {
  width: 42px;
}
.w-\[44px\] {
  width: 44px;
}
.w-\[46px\] {
  width: 46px;
}
.w-\[4px\] {
  width: 4px;
}
.w-\[510px\] {
  width: 510px;
}
.w-\[52px\] {
  width: 52px;
}
.w-\[54px\] {
  width: 54px;
}
.w-\[56\%\] {
  width: 56%;
}
.w-\[58px\] {
  width: 58px;
}
.w-\[5px\] {
  width: 5px;
}
.w-\[60px\] {
  width: 60px;
}
.w-\[62px\] {
  width: 62px;
}
.w-\[64\%\] {
  width: 64%;
}
.w-\[64px\] {
  width: 64px;
}
.w-\[68px\] {
  width: 68px;
}
.w-\[70px\] {
  width: 70px;
}
.w-\[72px\] {
  width: 72px;
}
.w-\[74\%\] {
  width: 74%;
}
.w-\[74px\] {
  width: 74px;
}
.w-\[78px\] {
  width: 78px;
}
.w-\[7px\] {
  width: 7px;
}
.w-\[80px\] {
  width: 80px;
}
.w-\[86\%\] {
  width: 86%;
}
.w-\[86px\] {
  width: 86px;
}
.w-\[88\%\] {
  width: 88%;
}
.w-\[90px\] {
  width: 90px;
}
.w-\[92px\] {
  width: 92px;
}
.w-\[98px\] {
  width: 98px;
}
.w-\[calc\(100\%-0\.5rem\)\] {
  width: calc(100% - 0.5rem);
}
.w-\[calc\(100\%-8px\)\] {
  width: calc(100% - 8px);
}
.w-\[min\(880px\2c 92vw\)\] {
  width: min(880px, 92vw);
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[112px\] {
  min-width: 112px;
}
.min-w-\[128px\] {
  min-width: 128px;
}
.min-w-\[14px\] {
  min-width: 14px;
}
.min-w-\[17px\] {
  min-width: 17px;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.min-w-\[190px\] {
  min-width: 190px;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.min-w-\[220px\] {
  min-width: 220px;
}
.min-w-\[240px\] {
  min-width: 240px;
}
.min-w-\[24px\] {
  min-width: 24px;
}
.min-w-\[260px\] {
  min-width: 260px;
}
.min-w-\[26px\] {
  min-width: 26px;
}
.min-w-\[44px\] {
  min-width: 44px;
}
.min-w-\[46px\] {
  min-width: 46px;
}
.min-w-\[520px\] {
  min-width: 520px;
}
.min-w-\[600px\] {
  min-width: 600px;
}
.min-w-\[640px\] {
  min-width: 640px;
}
.min-w-\[74px\] {
  min-width: 74px;
}
.min-w-\[78px\] {
  min-width: 78px;
}
.min-w-\[820px\] {
  min-width: 820px;
}
.min-w-\[880px\] {
  min-width: 880px;
}
.min-w-\[9\.5rem\] {
  min-width: 9.5rem;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-\[1040px\] {
  max-width: 1040px;
}
.max-w-\[1100px\] {
  max-width: 1100px;
}
.max-w-\[110px\] {
  max-width: 110px;
}
.max-w-\[1123px\] {
  max-width: 1123px;
}
.max-w-\[1180px\] {
  max-width: 1180px;
}
.max-w-\[1240px\] {
  max-width: 1240px;
}
.max-w-\[124px\] {
  max-width: 124px;
}
.max-w-\[1360px\] {
  max-width: 1360px;
}
.max-w-\[160px\] {
  max-width: 160px;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-\[210px\] {
  max-width: 210px;
}
.max-w-\[280px\] {
  max-width: 280px;
}
.max-w-\[360px\] {
  max-width: 360px;
}
.max-w-\[380px\] {
  max-width: 380px;
}
.max-w-\[400px\] {
  max-width: 400px;
}
.max-w-\[410px\] {
  max-width: 410px;
}
.max-w-\[420px\] {
  max-width: 420px;
}
.max-w-\[430px\] {
  max-width: 430px;
}
.max-w-\[440px\] {
  max-width: 440px;
}
.max-w-\[46\%\] {
  max-width: 46%;
}
.max-w-\[460px\] {
  max-width: 460px;
}
.max-w-\[480px\] {
  max-width: 480px;
}
.max-w-\[500px\] {
  max-width: 500px;
}
.max-w-\[520px\] {
  max-width: 520px;
}
.max-w-\[54\%\] {
  max-width: 54%;
}
.max-w-\[560px\] {
  max-width: 560px;
}
.max-w-\[60\%\] {
  max-width: 60%;
}
.max-w-\[640px\] {
  max-width: 640px;
}
.max-w-\[680px\] {
  max-width: 680px;
}
.max-w-\[720px\] {
  max-width: 720px;
}
.max-w-\[760px\] {
  max-width: 760px;
}
.max-w-\[794px\] {
  max-width: 794px;
}
.max-w-\[84\%\] {
  max-width: 84%;
}
.max-w-\[860px\] {
  max-width: 860px;
}
.max-w-\[900px\] {
  max-width: 900px;
}
.max-w-\[90px\] {
  max-width: 90px;
}
.max-w-\[980px\] {
  max-width: 980px;
}
.max-w-\[calc\(100\%-32px\)\] {
  max-width: calc(100% - 32px);
}
.max-w-\[calc\(100vw-2rem\)\] {
  max-width: calc(100vw - 2rem);
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-\[0_0_34\%\] {
  flex: 0 0 34%;
}
.flex-\[1\.3\] {
  flex: 1.3;
}
.flex-\[1\.4\] {
  flex: 1.4;
}
.flex-\[2\] {
  flex: 2;
}
.flex-none {
  flex: none;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-\[200px\] {
  flex-basis: 200px;
}
.basis-full {
  flex-basis: 100%;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-full {
  --tw-translate-y: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[1px\] {
  --tw-translate-y: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[-90deg\] {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-grab {
  cursor: grab;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-wait {
  cursor: wait;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.scroll-mt-4 {
  scroll-margin-top: 1rem;
}
.list-decimal {
  list-style-type: decimal;
}
.list-none {
  list-style-type: none;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-\[1\.2fr_1fr_1\.2fr_1fr_auto_auto\] {
  grid-template-columns: 1.2fr 1fr 1.2fr 1fr auto auto;
}
.grid-cols-\[1\.3fr_1fr\] {
  grid-template-columns: 1.3fr 1fr;
}
.grid-cols-\[196px_1fr\] {
  grid-template-columns: 196px 1fr;
}
.grid-cols-\[1fr_1fr\] {
  grid-template-columns: 1fr 1fr;
}
.grid-cols-\[24px_1fr_112px\] {
  grid-template-columns: 24px 1fr 112px;
}
.grid-cols-\[76px_1fr\] {
  grid-template-columns: 76px 1fr;
}
.grid-cols-\[76px_minmax\(0\2c 1fr\)\] {
  grid-template-columns: 76px minmax(0,1fr);
}
.grid-cols-\[auto_1fr\] {
  grid-template-columns: auto 1fr;
}
.grid-cols-\[auto_minmax\(0\2c 1fr\)_auto\] {
  grid-template-columns: auto minmax(0,1fr) auto;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.content-center {
  align-content: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-\[14px\] {
  gap: 14px;
}
.gap-\[18px\] {
  gap: 18px;
}
.gap-\[1px\] {
  gap: 1px;
}
.gap-\[2px\] {
  gap: 2px;
}
.gap-\[3px\] {
  gap: 3px;
}
.gap-\[5px\] {
  gap: 5px;
}
.gap-\[7px\] {
  gap: 7px;
}
.gap-\[9px\] {
  gap: 9px;
}
.gap-px {
  gap: 1px;
}
.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-x-2\.5 {
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-3\.5 {
  -moz-column-gap: 0.875rem;
       column-gap: 0.875rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.gap-x-\[18px\] {
  -moz-column-gap: 18px;
       column-gap: 18px;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-1\.5 {
  row-gap: 0.375rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-2\.5 {
  row-gap: 0.625rem;
}
.gap-y-\[18px\] {
  row-gap: 18px;
}
.gap-x-1 {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-\[11px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(11px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(11px * var(--tw-space-y-reverse));
}
.space-y-\[15px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(15px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(15px * var(--tw-space-y-reverse));
}
.space-y-\[17px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(17px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(17px * var(--tw-space-y-reverse));
}
.space-y-\[18px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(18px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(18px * var(--tw-space-y-reverse));
}
.space-y-px > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1px * var(--tw-space-y-reverse));
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-\[\#eef1f6\] > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(238 241 246 / var(--tw-divide-opacity, 1));
}
.divide-\[\#efeafc\] > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(239 234 252 / var(--tw-divide-opacity, 1));
}
.divide-\[\#f0f2f5\] > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(240 242 245 / var(--tw-divide-opacity, 1));
}
.divide-\[\#f2e6d0\] > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(242 230 208 / var(--tw-divide-opacity, 1));
}
.divide-line > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(208 215 222 / var(--tw-divide-opacity, 1));
}
.divide-rule > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(238 240 243 / var(--tw-divide-opacity, 1));
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.self-stretch {
  align-self: stretch;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overscroll-contain {
  overscroll-behavior: contain;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis {
  text-overflow: ellipsis;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.break-keep {
  word-break: keep-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[10px\] {
  border-radius: 10px;
}
.rounded-\[11px\] {
  border-radius: 11px;
}
.rounded-\[12px\] {
  border-radius: 12px;
}
.rounded-\[13px\] {
  border-radius: 13px;
}
.rounded-\[14px\] {
  border-radius: 14px;
}
.rounded-\[18px\] {
  border-radius: 18px;
}
.rounded-\[20px\] {
  border-radius: 20px;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[3px\] {
  border-radius: 3px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[5px\] {
  border-radius: 5px;
}
.rounded-\[6px\] {
  border-radius: 6px;
}
.rounded-\[7px\] {
  border-radius: 7px;
}
.rounded-\[8px\] {
  border-radius: 8px;
}
.rounded-\[9px\] {
  border-radius: 9px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-b-\[9px\] {
  border-bottom-right-radius: 9px;
  border-bottom-left-radius: 9px;
}
.rounded-b-lg {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.rounded-b-none {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.rounded-b-xl {
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}
.rounded-l-\[4px\] {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.rounded-l-\[7px\] {
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}
.rounded-r-\[10px\] {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.rounded-r-\[4px\] {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.rounded-r-\[6px\] {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.rounded-r-\[7px\] {
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}
.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.rounded-t-\[12px\] {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.rounded-t-\[14px\] {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.rounded-t-\[16px\] {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.rounded-t-\[20px\] {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.rounded-t-\[8px\] {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.rounded-t-\[9px\] {
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}
.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.rounded-t-xl {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
.rounded-bl {
  border-bottom-left-radius: 0.25rem;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-4 {
  border-width: 4px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-\[1\.8px\] {
  border-width: 1.8px;
}
.border-\[3\.5px\] {
  border-width: 3.5px;
}
.border-x {
  border-left-width: 1px;
  border-right-width: 1px;
}
.border-x-2 {
  border-left-width: 2px;
  border-right-width: 2px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-0 {
  border-bottom-width: 0px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-l-\[3px\] {
  border-left-width: 3px;
}
.border-l-\[4px\] {
  border-left-width: 4px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-dashed {
  border-style: dashed;
}
.border-\[\#0a7d6e\] {
  --tw-border-opacity: 1;
  border-color: rgb(10 125 110 / var(--tw-border-opacity, 1));
}
.border-\[\#0e7490\] {
  --tw-border-opacity: 1;
  border-color: rgb(14 116 144 / var(--tw-border-opacity, 1));
}
.border-\[\#1c3c6e\] {
  --tw-border-opacity: 1;
  border-color: rgb(28 60 110 / var(--tw-border-opacity, 1));
}
.border-\[\#1c6f4a\] {
  --tw-border-opacity: 1;
  border-color: rgb(28 111 74 / var(--tw-border-opacity, 1));
}
.border-\[\#2a5db0\] {
  --tw-border-opacity: 1;
  border-color: rgb(42 93 176 / var(--tw-border-opacity, 1));
}
.border-\[\#2f7d5a\] {
  --tw-border-opacity: 1;
  border-color: rgb(47 125 90 / var(--tw-border-opacity, 1));
}
.border-\[\#425062\] {
  --tw-border-opacity: 1;
  border-color: rgb(66 80 98 / var(--tw-border-opacity, 1));
}
.border-\[\#7c3aed\] {
  --tw-border-opacity: 1;
  border-color: rgb(124 58 237 / var(--tw-border-opacity, 1));
}
.border-\[\#C62828\] {
  --tw-border-opacity: 1;
  border-color: rgb(198 40 40 / var(--tw-border-opacity, 1));
}
.border-\[\#a8d5b9\] {
  --tw-border-opacity: 1;
  border-color: rgb(168 213 185 / var(--tw-border-opacity, 1));
}
.border-\[\#b45309\] {
  --tw-border-opacity: 1;
  border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
}
.border-\[\#b6c8e6\] {
  --tw-border-opacity: 1;
  border-color: rgb(182 200 230 / var(--tw-border-opacity, 1));
}
.border-\[\#b7791f\] {
  --tw-border-opacity: 1;
  border-color: rgb(183 121 31 / var(--tw-border-opacity, 1));
}
.border-\[\#b9d8c6\] {
  --tw-border-opacity: 1;
  border-color: rgb(185 216 198 / var(--tw-border-opacity, 1));
}
.border-\[\#bcc6d4\] {
  --tw-border-opacity: 1;
  border-color: rgb(188 198 212 / var(--tw-border-opacity, 1));
}
.border-\[\#bcd1ec\] {
  --tw-border-opacity: 1;
  border-color: rgb(188 209 236 / var(--tw-border-opacity, 1));
}
.border-\[\#bfdcc6\] {
  --tw-border-opacity: 1;
  border-color: rgb(191 220 198 / var(--tw-border-opacity, 1));
}
.border-\[\#bfe0cb\] {
  --tw-border-opacity: 1;
  border-color: rgb(191 224 203 / var(--tw-border-opacity, 1));
}
.border-\[\#bfe3cc\] {
  --tw-border-opacity: 1;
  border-color: rgb(191 227 204 / var(--tw-border-opacity, 1));
}
.border-\[\#bfe3cd\] {
  --tw-border-opacity: 1;
  border-color: rgb(191 227 205 / var(--tw-border-opacity, 1));
}
.border-\[\#c3ccd8\] {
  --tw-border-opacity: 1;
  border-color: rgb(195 204 216 / var(--tw-border-opacity, 1));
}
.border-\[\#c3cede\] {
  --tw-border-opacity: 1;
  border-color: rgb(195 206 222 / var(--tw-border-opacity, 1));
}
.border-\[\#c3d0e6\] {
  --tw-border-opacity: 1;
  border-color: rgb(195 208 230 / var(--tw-border-opacity, 1));
}
.border-\[\#c3d2e6\] {
  --tw-border-opacity: 1;
  border-color: rgb(195 210 230 / var(--tw-border-opacity, 1));
}
.border-\[\#c4ccd8\] {
  --tw-border-opacity: 1;
  border-color: rgb(196 204 216 / var(--tw-border-opacity, 1));
}
.border-\[\#c6dcf5\] {
  --tw-border-opacity: 1;
  border-color: rgb(198 220 245 / var(--tw-border-opacity, 1));
}
.border-\[\#c7d0dc\] {
  --tw-border-opacity: 1;
  border-color: rgb(199 208 220 / var(--tw-border-opacity, 1));
}
.border-\[\#c7d8ef\] {
  --tw-border-opacity: 1;
  border-color: rgb(199 216 239 / var(--tw-border-opacity, 1));
}
.border-\[\#c8892a\] {
  --tw-border-opacity: 1;
  border-color: rgb(200 137 42 / var(--tw-border-opacity, 1));
}
.border-\[\#c8e6d2\] {
  --tw-border-opacity: 1;
  border-color: rgb(200 230 210 / var(--tw-border-opacity, 1));
}
.border-\[\#c9d3e0\] {
  --tw-border-opacity: 1;
  border-color: rgb(201 211 224 / var(--tw-border-opacity, 1));
}
.border-\[\#c9d4e2\] {
  --tw-border-opacity: 1;
  border-color: rgb(201 212 226 / var(--tw-border-opacity, 1));
}
.border-\[\#c9d5e6\] {
  --tw-border-opacity: 1;
  border-color: rgb(201 213 230 / var(--tw-border-opacity, 1));
}
.border-\[\#cbd6e5\] {
  --tw-border-opacity: 1;
  border-color: rgb(203 214 229 / var(--tw-border-opacity, 1));
}
.border-\[\#ccd4df\] {
  --tw-border-opacity: 1;
  border-color: rgb(204 212 223 / var(--tw-border-opacity, 1));
}
.border-\[\#cdd5e0\] {
  --tw-border-opacity: 1;
  border-color: rgb(205 213 224 / var(--tw-border-opacity, 1));
}
.border-\[\#cddcf0\] {
  --tw-border-opacity: 1;
  border-color: rgb(205 220 240 / var(--tw-border-opacity, 1));
}
.border-\[\#cdddf2\] {
  --tw-border-opacity: 1;
  border-color: rgb(205 221 242 / var(--tw-border-opacity, 1));
}
.border-\[\#cfd6e0\] {
  --tw-border-opacity: 1;
  border-color: rgb(207 214 224 / var(--tw-border-opacity, 1));
}
.border-\[\#cfd9e8\] {
  --tw-border-opacity: 1;
  border-color: rgb(207 217 232 / var(--tw-border-opacity, 1));
}
.border-\[\#cfdcee\] {
  --tw-border-opacity: 1;
  border-color: rgb(207 220 238 / var(--tw-border-opacity, 1));
}
.border-\[\#cfdcef\] {
  --tw-border-opacity: 1;
  border-color: rgb(207 220 239 / var(--tw-border-opacity, 1));
}
.border-\[\#cfe0d6\] {
  --tw-border-opacity: 1;
  border-color: rgb(207 224 214 / var(--tw-border-opacity, 1));
}
.border-\[\#cfe0f7\] {
  --tw-border-opacity: 1;
  border-color: rgb(207 224 247 / var(--tw-border-opacity, 1));
}
.border-\[\#cfe6da\] {
  --tw-border-opacity: 1;
  border-color: rgb(207 230 218 / var(--tw-border-opacity, 1));
}
.border-\[\#cfe8db\] {
  --tw-border-opacity: 1;
  border-color: rgb(207 232 219 / var(--tw-border-opacity, 1));
}
.border-\[\#d0d7de\] {
  --tw-border-opacity: 1;
  border-color: rgb(208 215 222 / var(--tw-border-opacity, 1));
}
.border-\[\#d0d7e2\] {
  --tw-border-opacity: 1;
  border-color: rgb(208 215 226 / var(--tw-border-opacity, 1));
}
.border-\[\#d3def0\] {
  --tw-border-opacity: 1;
  border-color: rgb(211 222 240 / var(--tw-border-opacity, 1));
}
.border-\[\#d3e0f4\] {
  --tw-border-opacity: 1;
  border-color: rgb(211 224 244 / var(--tw-border-opacity, 1));
}
.border-\[\#d5deea\] {
  --tw-border-opacity: 1;
  border-color: rgb(213 222 234 / var(--tw-border-opacity, 1));
}
.border-\[\#d5e2f5\] {
  --tw-border-opacity: 1;
  border-color: rgb(213 226 245 / var(--tw-border-opacity, 1));
}
.border-\[\#d68a3a\] {
  --tw-border-opacity: 1;
  border-color: rgb(214 138 58 / var(--tw-border-opacity, 1));
}
.border-\[\#d6dde7\] {
  --tw-border-opacity: 1;
  border-color: rgb(214 221 231 / var(--tw-border-opacity, 1));
}
.border-\[\#d6e2f6\] {
  --tw-border-opacity: 1;
  border-color: rgb(214 226 246 / var(--tw-border-opacity, 1));
}
.border-\[\#d7c9a8\] {
  --tw-border-opacity: 1;
  border-color: rgb(215 201 168 / var(--tw-border-opacity, 1));
}
.border-\[\#d9a441\] {
  --tw-border-opacity: 1;
  border-color: rgb(217 164 65 / var(--tw-border-opacity, 1));
}
.border-\[\#d9cdf0\] {
  --tw-border-opacity: 1;
  border-color: rgb(217 205 240 / var(--tw-border-opacity, 1));
}
.border-\[\#d9cef2\] {
  --tw-border-opacity: 1;
  border-color: rgb(217 206 242 / var(--tw-border-opacity, 1));
}
.border-\[\#dbe3ee\] {
  --tw-border-opacity: 1;
  border-color: rgb(219 227 238 / var(--tw-border-opacity, 1));
}
.border-\[\#dbe4f0\] {
  --tw-border-opacity: 1;
  border-color: rgb(219 228 240 / var(--tw-border-opacity, 1));
}
.border-\[\#dbe4f2\] {
  --tw-border-opacity: 1;
  border-color: rgb(219 228 242 / var(--tw-border-opacity, 1));
}
.border-\[\#dbe6f5\] {
  --tw-border-opacity: 1;
  border-color: rgb(219 230 245 / var(--tw-border-opacity, 1));
}
.border-\[\#dbe7f7\] {
  --tw-border-opacity: 1;
  border-color: rgb(219 231 247 / var(--tw-border-opacity, 1));
}
.border-\[\#dbe9e0\] {
  --tw-border-opacity: 1;
  border-color: rgb(219 233 224 / var(--tw-border-opacity, 1));
}
.border-\[\#dcebe0\] {
  --tw-border-opacity: 1;
  border-color: rgb(220 235 224 / var(--tw-border-opacity, 1));
}
.border-\[\#ddd0f7\] {
  --tw-border-opacity: 1;
  border-color: rgb(221 208 247 / var(--tw-border-opacity, 1));
}
.border-\[\#ddd3f3\] {
  --tw-border-opacity: 1;
  border-color: rgb(221 211 243 / var(--tw-border-opacity, 1));
}
.border-\[\#dde4ec\] {
  --tw-border-opacity: 1;
  border-color: rgb(221 228 236 / var(--tw-border-opacity, 1));
}
.border-\[\#dfe3e9\] {
  --tw-border-opacity: 1;
  border-color: rgb(223 227 233 / var(--tw-border-opacity, 1));
}
.border-\[\#dfe4ea\] {
  --tw-border-opacity: 1;
  border-color: rgb(223 228 234 / var(--tw-border-opacity, 1));
}
.border-\[\#e0a03c\] {
  --tw-border-opacity: 1;
  border-color: rgb(224 160 60 / var(--tw-border-opacity, 1));
}
.border-\[\#e0a13c\] {
  --tw-border-opacity: 1;
  border-color: rgb(224 161 60 / var(--tw-border-opacity, 1));
}
.border-\[\#e0b463\] {
  --tw-border-opacity: 1;
  border-color: rgb(224 180 99 / var(--tw-border-opacity, 1));
}
.border-\[\#e0b8af\] {
  --tw-border-opacity: 1;
  border-color: rgb(224 184 175 / var(--tw-border-opacity, 1));
}
.border-\[\#e0c4bc\] {
  --tw-border-opacity: 1;
  border-color: rgb(224 196 188 / var(--tw-border-opacity, 1));
}
.border-\[\#e0c69a\] {
  --tw-border-opacity: 1;
  border-color: rgb(224 198 154 / var(--tw-border-opacity, 1));
}
.border-\[\#e0c9c9\] {
  --tw-border-opacity: 1;
  border-color: rgb(224 201 201 / var(--tw-border-opacity, 1));
}
.border-\[\#e0cfa8\] {
  --tw-border-opacity: 1;
  border-color: rgb(224 207 168 / var(--tw-border-opacity, 1));
}
.border-\[\#e0d4f5\] {
  --tw-border-opacity: 1;
  border-color: rgb(224 212 245 / var(--tw-border-opacity, 1));
}
.border-\[\#e0d6f5\] {
  --tw-border-opacity: 1;
  border-color: rgb(224 214 245 / var(--tw-border-opacity, 1));
}
.border-\[\#e0d7f6\] {
  --tw-border-opacity: 1;
  border-color: rgb(224 215 246 / var(--tw-border-opacity, 1));
}
.border-\[\#e0e4ea\] {
  --tw-border-opacity: 1;
  border-color: rgb(224 228 234 / var(--tw-border-opacity, 1));
}
.border-\[\#e0e6ef\] {
  --tw-border-opacity: 1;
  border-color: rgb(224 230 239 / var(--tw-border-opacity, 1));
}
.border-\[\#e2e7ef\] {
  --tw-border-opacity: 1;
  border-color: rgb(226 231 239 / var(--tw-border-opacity, 1));
}
.border-\[\#e3c9c3\] {
  --tw-border-opacity: 1;
  border-color: rgb(227 201 195 / var(--tw-border-opacity, 1));
}
.border-\[\#e3cbbf\] {
  --tw-border-opacity: 1;
  border-color: rgb(227 203 191 / var(--tw-border-opacity, 1));
}
.border-\[\#e3e7ed\] {
  --tw-border-opacity: 1;
  border-color: rgb(227 231 237 / var(--tw-border-opacity, 1));
}
.border-\[\#e3e8ef\] {
  --tw-border-opacity: 1;
  border-color: rgb(227 232 239 / var(--tw-border-opacity, 1));
}
.border-\[\#e4d8bf\] {
  --tw-border-opacity: 1;
  border-color: rgb(228 216 191 / var(--tw-border-opacity, 1));
}
.border-\[\#e4e8ee\] {
  --tw-border-opacity: 1;
  border-color: rgb(228 232 238 / var(--tw-border-opacity, 1));
}
.border-\[\#e5b4b4\] {
  --tw-border-opacity: 1;
  border-color: rgb(229 180 180 / var(--tw-border-opacity, 1));
}
.border-\[\#e5c9c9\] {
  --tw-border-opacity: 1;
  border-color: rgb(229 201 201 / var(--tw-border-opacity, 1));
}
.border-\[\#e6a9a3\] {
  --tw-border-opacity: 1;
  border-color: rgb(230 169 163 / var(--tw-border-opacity, 1));
}
.border-\[\#e6c068\] {
  --tw-border-opacity: 1;
  border-color: rgb(230 192 104 / var(--tw-border-opacity, 1));
}
.border-\[\#e6c99a\] {
  --tw-border-opacity: 1;
  border-color: rgb(230 201 154 / var(--tw-border-opacity, 1));
}
.border-\[\#e6cabf\] {
  --tw-border-opacity: 1;
  border-color: rgb(230 202 191 / var(--tw-border-opacity, 1));
}
.border-\[\#e6d18f\] {
  --tw-border-opacity: 1;
  border-color: rgb(230 209 143 / var(--tw-border-opacity, 1));
}
.border-\[\#e6dcdc\] {
  --tw-border-opacity: 1;
  border-color: rgb(230 220 220 / var(--tw-border-opacity, 1));
}
.border-\[\#e6dcf7\] {
  --tw-border-opacity: 1;
  border-color: rgb(230 220 247 / var(--tw-border-opacity, 1));
}
.border-\[\#e6eaf0\] {
  --tw-border-opacity: 1;
  border-color: rgb(230 234 240 / var(--tw-border-opacity, 1));
}
.border-\[\#e6ebf1\] {
  --tw-border-opacity: 1;
  border-color: rgb(230 235 241 / var(--tw-border-opacity, 1));
}
.border-\[\#e6ecf4\] {
  --tw-border-opacity: 1;
  border-color: rgb(230 236 244 / var(--tw-border-opacity, 1));
}
.border-\[\#e6ecf5\] {
  --tw-border-opacity: 1;
  border-color: rgb(230 236 245 / var(--tw-border-opacity, 1));
}
.border-\[\#e7dffb\] {
  --tw-border-opacity: 1;
  border-color: rgb(231 223 251 / var(--tw-border-opacity, 1));
}
.border-\[\#e8b7ae\] {
  --tw-border-opacity: 1;
  border-color: rgb(232 183 174 / var(--tw-border-opacity, 1));
}
.border-\[\#e8bfa0\] {
  --tw-border-opacity: 1;
  border-color: rgb(232 191 160 / var(--tw-border-opacity, 1));
}
.border-\[\#e8d3ae\] {
  --tw-border-opacity: 1;
  border-color: rgb(232 211 174 / var(--tw-border-opacity, 1));
}
.border-\[\#e8ebef\] {
  --tw-border-opacity: 1;
  border-color: rgb(232 235 239 / var(--tw-border-opacity, 1));
}
.border-\[\#e9c4be\] {
  --tw-border-opacity: 1;
  border-color: rgb(233 196 190 / var(--tw-border-opacity, 1));
}
.border-\[\#e9edf3\] {
  --tw-border-opacity: 1;
  border-color: rgb(233 237 243 / var(--tw-border-opacity, 1));
}
.border-\[\#eadfc8\] {
  --tw-border-opacity: 1;
  border-color: rgb(234 223 200 / var(--tw-border-opacity, 1));
}
.border-\[\#eccfa0\] {
  --tw-border-opacity: 1;
  border-color: rgb(236 207 160 / var(--tw-border-opacity, 1));
}
.border-\[\#ecd6cf\] {
  --tw-border-opacity: 1;
  border-color: rgb(236 214 207 / var(--tw-border-opacity, 1));
}
.border-\[\#ecd8bd\] {
  --tw-border-opacity: 1;
  border-color: rgb(236 216 189 / var(--tw-border-opacity, 1));
}
.border-\[\#ede8fb\] {
  --tw-border-opacity: 1;
  border-color: rgb(237 232 251 / var(--tw-border-opacity, 1));
}
.border-\[\#edf0f5\] {
  --tw-border-opacity: 1;
  border-color: rgb(237 240 245 / var(--tw-border-opacity, 1));
}
.border-\[\#eef0f4\] {
  --tw-border-opacity: 1;
  border-color: rgb(238 240 244 / var(--tw-border-opacity, 1));
}
.border-\[\#eef1f5\] {
  --tw-border-opacity: 1;
  border-color: rgb(238 241 245 / var(--tw-border-opacity, 1));
}
.border-\[\#eef1f6\] {
  --tw-border-opacity: 1;
  border-color: rgb(238 241 246 / var(--tw-border-opacity, 1));
}
.border-\[\#eef2f7\] {
  --tw-border-opacity: 1;
  border-color: rgb(238 242 247 / var(--tw-border-opacity, 1));
}
.border-\[\#efeafc\] {
  --tw-border-opacity: 1;
  border-color: rgb(239 234 252 / var(--tw-border-opacity, 1));
}
.border-\[\#f0b4b4\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 180 180 / var(--tw-border-opacity, 1));
}
.border-\[\#f0c0b8\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 192 184 / var(--tw-border-opacity, 1));
}
.border-\[\#f0c4c0\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 196 192 / var(--tw-border-opacity, 1));
}
.border-\[\#f0c4c4\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 196 196 / var(--tw-border-opacity, 1));
}
.border-\[\#f0c8c4\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 200 196 / var(--tw-border-opacity, 1));
}
.border-\[\#f0c8c5\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 200 197 / var(--tw-border-opacity, 1));
}
.border-\[\#f0c9c2\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 201 194 / var(--tw-border-opacity, 1));
}
.border-\[\#f0c9c9\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 201 201 / var(--tw-border-opacity, 1));
}
.border-\[\#f0cdca\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 205 202 / var(--tw-border-opacity, 1));
}
.border-\[\#f0d9a8\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 217 168 / var(--tw-border-opacity, 1));
}
.border-\[\#f0d9b8\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 217 184 / var(--tw-border-opacity, 1));
}
.border-\[\#f0d9c6\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 217 198 / var(--tw-border-opacity, 1));
}
.border-\[\#f0dcbb\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 220 187 / var(--tw-border-opacity, 1));
}
.border-\[\#f0dcbd\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 220 189 / var(--tw-border-opacity, 1));
}
.border-\[\#f0dcc0\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 220 192 / var(--tw-border-opacity, 1));
}
.border-\[\#f0dcd8\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 220 216 / var(--tw-border-opacity, 1));
}
.border-\[\#f0dfd7\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 223 215 / var(--tw-border-opacity, 1));
}
.border-\[\#f0e2c8\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 226 200 / var(--tw-border-opacity, 1));
}
.border-\[\#f0e3c4\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 227 196 / var(--tw-border-opacity, 1));
}
.border-\[\#f0e4c8\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 228 200 / var(--tw-border-opacity, 1));
}
.border-\[\#f0f2f5\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 242 245 / var(--tw-border-opacity, 1));
}
.border-\[\#f1cfca\] {
  --tw-border-opacity: 1;
  border-color: rgb(241 207 202 / var(--tw-border-opacity, 1));
}
.border-\[\#f1d4d4\] {
  --tw-border-opacity: 1;
  border-color: rgb(241 212 212 / var(--tw-border-opacity, 1));
}
.border-\[\#f1f3f5\] {
  --tw-border-opacity: 1;
  border-color: rgb(241 243 245 / var(--tw-border-opacity, 1));
}
.border-\[\#f1f4f8\] {
  --tw-border-opacity: 1;
  border-color: rgb(241 244 248 / var(--tw-border-opacity, 1));
}
.border-\[\#f2dcc0\] {
  --tw-border-opacity: 1;
  border-color: rgb(242 220 192 / var(--tw-border-opacity, 1));
}
.border-\[\#f2e4cb\] {
  --tw-border-opacity: 1;
  border-color: rgb(242 228 203 / var(--tw-border-opacity, 1));
}
.border-\[\#f3c9c9\] {
  --tw-border-opacity: 1;
  border-color: rgb(243 201 201 / var(--tw-border-opacity, 1));
}
.border-\[\#f3cfcc\] {
  --tw-border-opacity: 1;
  border-color: rgb(243 207 204 / var(--tw-border-opacity, 1));
}
.border-\[\#f3d4d4\] {
  --tw-border-opacity: 1;
  border-color: rgb(243 212 212 / var(--tw-border-opacity, 1));
}
.border-\[\#f3d9b0\] {
  --tw-border-opacity: 1;
  border-color: rgb(243 217 176 / var(--tw-border-opacity, 1));
}
.border-\[\#f3d9b5\] {
  --tw-border-opacity: 1;
  border-color: rgb(243 217 181 / var(--tw-border-opacity, 1));
}
.border-\[\#f3d9d4\] {
  --tw-border-opacity: 1;
  border-color: rgb(243 217 212 / var(--tw-border-opacity, 1));
}
.border-\[\#f59e0b\] {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}
.border-\[\#fbe9e0\] {
  --tw-border-opacity: 1;
  border-color: rgb(251 233 224 / var(--tw-border-opacity, 1));
}
.border-\[\#ffe2b8\] {
  --tw-border-opacity: 1;
  border-color: rgb(255 226 184 / var(--tw-border-opacity, 1));
}
.border-black\/15 {
  border-color: rgb(0 0 0 / 0.15);
}
.border-body {
  --tw-border-opacity: 1;
  border-color: rgb(28 39 51 / var(--tw-border-opacity, 1));
}
.border-chk {
  --tw-border-opacity: 1;
  border-color: rgb(31 122 77 / var(--tw-border-opacity, 1));
}
.border-chk\/30 {
  border-color: rgb(31 122 77 / 0.3);
}
.border-current {
  border-color: currentColor;
}
.border-emg {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.border-emg\/30 {
  border-color: rgb(220 38 38 / 0.3);
}
.border-emg\/40 {
  border-color: rgb(220 38 38 / 0.4);
}
.border-hq {
  --tw-border-opacity: 1;
  border-color: rgb(42 93 176 / var(--tw-border-opacity, 1));
}
.border-hq\/25 {
  border-color: rgb(42 93 176 / 0.25);
}
.border-hq\/30 {
  border-color: rgb(42 93 176 / 0.3);
}
.border-line {
  --tw-border-opacity: 1;
  border-color: rgb(208 215 222 / var(--tw-border-opacity, 1));
}
.border-line\/60 {
  border-color: rgb(208 215 222 / 0.6);
}
.border-line\/70 {
  border-color: rgb(208 215 222 / 0.7);
}
.border-navy {
  --tw-border-opacity: 1;
  border-color: rgb(28 60 110 / var(--tw-border-opacity, 1));
}
.border-rule {
  --tw-border-opacity: 1;
  border-color: rgb(238 240 243 / var(--tw-border-opacity, 1));
}
.border-site {
  --tw-border-opacity: 1;
  border-color: rgb(176 74 42 / var(--tw-border-opacity, 1));
}
.border-site\/30 {
  border-color: rgb(176 74 42 / 0.3);
}
.border-transparent {
  border-color: transparent;
}
.border-warn {
  --tw-border-opacity: 1;
  border-color: rgb(192 57 43 / var(--tw-border-opacity, 1));
}
.border-warn\/30 {
  border-color: rgb(192 57 43 / 0.3);
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/35 {
  border-color: rgb(255 255 255 / 0.35);
}
.border-white\/40 {
  border-color: rgb(255 255 255 / 0.4);
}
.border-\[\#c7d2fe\] {
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}
.border-\[\#bbf7d0\] {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-l-\[\#b7791f\] {
  --tw-border-opacity: 1;
  border-left-color: rgb(183 121 31 / var(--tw-border-opacity, 1));
}
.border-l-hq {
  --tw-border-opacity: 1;
  border-left-color: rgb(42 93 176 / var(--tw-border-opacity, 1));
}
.border-l-site {
  --tw-border-opacity: 1;
  border-left-color: rgb(176 74 42 / var(--tw-border-opacity, 1));
}
.border-l-white\/40 {
  border-left-color: rgb(255 255 255 / 0.4);
}
.border-t-emg {
  --tw-border-opacity: 1;
  border-top-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.bg-\[\#0a7d6e\] {
  --tw-bg-opacity: 1;
  background-color: rgb(10 125 110 / var(--tw-bg-opacity, 1));
}
.bg-\[\#157a36\] {
  --tw-bg-opacity: 1;
  background-color: rgb(21 122 54 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1c3c6e\] {
  --tw-bg-opacity: 1;
  background-color: rgb(28 60 110 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1c6f4a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(28 111 74 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1f7a4d\] {
  --tw-bg-opacity: 1;
  background-color: rgb(31 122 77 / var(--tw-bg-opacity, 1));
}
.bg-\[\#22518f\] {
  --tw-bg-opacity: 1;
  background-color: rgb(34 81 143 / var(--tw-bg-opacity, 1));
}
.bg-\[\#2a5db0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(42 93 176 / var(--tw-bg-opacity, 1));
}
.bg-\[\#2c3440\] {
  --tw-bg-opacity: 1;
  background-color: rgb(44 52 64 / var(--tw-bg-opacity, 1));
}
.bg-\[\#2f7d5a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(47 125 90 / var(--tw-bg-opacity, 1));
}
.bg-\[\#425062\] {
  --tw-bg-opacity: 1;
  background-color: rgb(66 80 98 / var(--tw-bg-opacity, 1));
}
.bg-\[\#4CAF50\]\/20 {
  background-color: rgb(76 175 80 / 0.2);
}
.bg-\[\#5b3aa6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(91 58 166 / var(--tw-bg-opacity, 1));
}
.bg-\[\#6b7480\] {
  --tw-bg-opacity: 1;
  background-color: rgb(107 116 128 / var(--tw-bg-opacity, 1));
}
.bg-\[\#7c3aed\] {
  --tw-bg-opacity: 1;
  background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
}
.bg-\[\#8a94a2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(138 148 162 / var(--tw-bg-opacity, 1));
}
.bg-\[\#94500a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(148 80 10 / var(--tw-bg-opacity, 1));
}
.bg-\[\#9aa4b2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(154 164 178 / var(--tw-bg-opacity, 1));
}
.bg-\[\#C62828\] {
  --tw-bg-opacity: 1;
  background-color: rgb(198 40 40 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FB8C00\]\/25 {
  background-color: rgb(251 140 0 / 0.25);
}
.bg-\[\#FFC107\]\/25 {
  background-color: rgb(255 193 7 / 0.25);
}
.bg-\[\#a5201a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(165 32 26 / var(--tw-bg-opacity, 1));
}
.bg-\[\#b04a2a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(176 74 42 / var(--tw-bg-opacity, 1));
}
.bg-\[\#b45309\] {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}
.bg-\[\#b4761c\] {
  --tw-bg-opacity: 1;
  background-color: rgb(180 118 28 / var(--tw-bg-opacity, 1));
}
.bg-\[\#b7791f\] {
  --tw-bg-opacity: 1;
  background-color: rgb(183 121 31 / var(--tw-bg-opacity, 1));
}
.bg-\[\#c3c9d2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(195 201 210 / var(--tw-bg-opacity, 1));
}
.bg-\[\#c3ccd8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(195 204 216 / var(--tw-bg-opacity, 1));
}
.bg-\[\#c4ccd8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(196 204 216 / var(--tw-bg-opacity, 1));
}
.bg-\[\#c7d0dc\] {
  --tw-bg-opacity: 1;
  background-color: rgb(199 208 220 / var(--tw-bg-opacity, 1));
}
.bg-\[\#c8892a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(200 137 42 / var(--tw-bg-opacity, 1));
}
.bg-\[\#cbd2dc\] {
  --tw-bg-opacity: 1;
  background-color: rgb(203 210 220 / var(--tw-bg-opacity, 1));
}
.bg-\[\#cfd6e0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(207 214 224 / var(--tw-bg-opacity, 1));
}
.bg-\[\#d7dce3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(215 220 227 / var(--tw-bg-opacity, 1));
}
.bg-\[\#d7dee8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(215 222 232 / var(--tw-bg-opacity, 1));
}
.bg-\[\#d98324\] {
  --tw-bg-opacity: 1;
  background-color: rgb(217 131 36 / var(--tw-bg-opacity, 1));
}
.bg-\[\#d98a2e\] {
  --tw-bg-opacity: 1;
  background-color: rgb(217 138 46 / var(--tw-bg-opacity, 1));
}
.bg-\[\#dbe8fb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(219 232 251 / var(--tw-bg-opacity, 1));
}
.bg-\[\#dc2626\] {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-\[\#dcefe4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(220 239 228 / var(--tw-bg-opacity, 1));
}
.bg-\[\#dde3ea\] {
  --tw-bg-opacity: 1;
  background-color: rgb(221 227 234 / var(--tw-bg-opacity, 1));
}
.bg-\[\#dde7f5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(221 231 245 / var(--tw-bg-opacity, 1));
}
.bg-\[\#dff2ee\] {
  --tw-bg-opacity: 1;
  background-color: rgb(223 242 238 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e0a06a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(224 160 106 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e0a13c\] {
  --tw-bg-opacity: 1;
  background-color: rgb(224 161 60 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e0f2f4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 244 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e2e8f2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 242 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e3e8ef\] {
  --tw-bg-opacity: 1;
  background-color: rgb(227 232 239 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e4e8ee\] {
  --tw-bg-opacity: 1;
  background-color: rgb(228 232 238 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e4f6ea\] {
  --tw-bg-opacity: 1;
  background-color: rgb(228 246 234 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e5edf9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(229 237 249 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e6ebf1\] {
  --tw-bg-opacity: 1;
  background-color: rgb(230 235 241 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e6f0fb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(230 240 251 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e8eef8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(232 238 248 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e8eefb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(232 238 251 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e8f0fb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(232 240 251 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e9edf3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(233 237 243 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e9eff7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(233 239 247 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e9f2ea\] {
  --tw-bg-opacity: 1;
  background-color: rgb(233 242 234 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eae3f7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(234 227 247 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eaf2ff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(234 242 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eaf5ee\] {
  --tw-bg-opacity: 1;
  background-color: rgb(234 245 238 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eaf5ef\] {
  --tw-bg-opacity: 1;
  background-color: rgb(234 245 239 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eaf6ee\] {
  --tw-bg-opacity: 1;
  background-color: rgb(234 246 238 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eaf6ef\] {
  --tw-bg-opacity: 1;
  background-color: rgb(234 246 239 / var(--tw-bg-opacity, 1));
}
.bg-\[\#ede8fb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(237 232 251 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eef0f2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 240 242 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eef0f4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 240 244 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eef1f4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 241 244 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eef1f5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 241 245 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eef1f6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 241 246 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eef2f7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 247 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eef2ff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eef6ff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 246 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#eef7f0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 247 240 / var(--tw-bg-opacity, 1));
}
.bg-\[\#efeafc\] {
  --tw-bg-opacity: 1;
  background-color: rgb(239 234 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f0f2f5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 242 245 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f0f3f7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 243 247 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f0f3f8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 243 248 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f0f9f3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 243 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f1f3f5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(241 243 245 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f1f4f8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(241 244 248 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f1f6fd\] {
  --tw-bg-opacity: 1;
  background-color: rgb(241 246 253 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f1f8f4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(241 248 244 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f2f4f7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 247 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f2f4f8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 248 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f2f5f9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(242 245 249 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f2f5fa\] {
  --tw-bg-opacity: 1;
  background-color: rgb(242 245 250 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f2f6fc\] {
  --tw-bg-opacity: 1;
  background-color: rgb(242 246 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f2f7ff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(242 247 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f2f9f5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(242 249 245 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f3d9b0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 217 176 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f3ead9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 234 217 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f3ede4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 237 228 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f3eefc\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 238 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f3eefe\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 238 254 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f3f0fb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 240 251 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f3faf5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 250 245 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f3faf6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 250 246 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f3fbf6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 251 246 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f4f0fc\] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 240 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f4f0fd\] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 240 253 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f4f5f7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 245 247 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f4f6f9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 246 249 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f4f7fb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 247 251 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f4f7fc\] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 247 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f59e0b\] {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f6e0bb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(246 224 187 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f6ecec\] {
  --tw-bg-opacity: 1;
  background-color: rgb(246 236 236 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f6f8fb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(246 248 251 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f6f9fe\] {
  --tw-bg-opacity: 1;
  background-color: rgb(246 249 254 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f6faff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(246 250 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f6fbf7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(246 251 247 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f7d4d2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 212 210 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f7e0c4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 224 196 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f7e2dd\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 226 221 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f7f3fd\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 243 253 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f7f4fe\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 244 254 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f7fbf8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 251 248 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f8fafc\] {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f8fafd\] {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 253 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f9fbfd\] {
  --tw-bg-opacity: 1;
  background-color: rgb(249 251 253 / var(--tw-bg-opacity, 1));
}
.bg-\[\#faf8ff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fafbfc\] {
  --tw-bg-opacity: 1;
  background-color: rgb(250 251 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fafbfd\] {
  --tw-bg-opacity: 1;
  background-color: rgb(250 251 253 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fbe4e4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(251 228 228 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fbe9e0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(251 233 224 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fbeae5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(251 234 229 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fbeee9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(251 238 233 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fbf1ec\] {
  --tw-bg-opacity: 1;
  background-color: rgb(251 241 236 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fbfcfe\] {
  --tw-bg-opacity: 1;
  background-color: rgb(251 252 254 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fcfdff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(252 253 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdecea\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 236 234 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdeceb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 236 235 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdecec\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 236 236 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdeee4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 238 228 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdeeee\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 238 238 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf0d8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 240 216 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf1e2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 241 226 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf1e3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 241 227 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf1ec\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 241 236 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf2f2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 242 242 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf3d5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 243 213 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf3e4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 243 228 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf3f2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 243 242 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf3f3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 243 243 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf4f2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 244 242 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf4f3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 244 243 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf6e3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 246 227 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf6e8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 246 232 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf6e9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 246 233 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf6ec\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 246 236 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf6f4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 246 244 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf6f5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 246 245 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf8ee\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 248 238 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf8ef\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 248 239 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdf8f0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 248 240 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fdfbf7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 251 247 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fee2e2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fef1e0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 241 224 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fef3c7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fef3e2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 226 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fef6e7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 246 231 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fef7f2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 247 242 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fefbf1\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 251 241 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fff1ea\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 234 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fff4e5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 244 229 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fff5f5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 245 245 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fff6e9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 246 233 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fff6f6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 246 246 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fff7e8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 232 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fff7ed\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fff8ec\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 236 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fff8ef\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 239 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fff8f3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 243 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fffaf0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 240 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fffaf2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 242 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fffaf7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 247 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fffaf9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 249 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fffafa\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 250 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fffbeb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fffdf6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 253 246 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fffdf7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 253 247 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fffdf8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 253 248 / var(--tw-bg-opacity, 1));
}
.bg-\[rgba\(12\2c 16\2c 22\2c \.55\)\] {
  background-color: rgba(12,16,22,.55);
}
.bg-\[rgba\(16\2c 32\2c 56\2c \.42\)\] {
  background-color: rgba(16,32,56,.42);
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-50\/50 {
  background-color: rgb(255 251 235 / 0.5);
}
.bg-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(245 247 250 / var(--tw-bg-opacity, 1));
}
.bg-bg\/90 {
  background-color: rgb(245 247 250 / 0.9);
}
.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/35 {
  background-color: rgb(0 0 0 / 0.35);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/45 {
  background-color: rgb(0 0 0 / 0.45);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/55 {
  background-color: rgb(0 0 0 / 0.55);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-black\/\[\.16\] {
  background-color: rgb(0 0 0 / .16);
}
.bg-body {
  --tw-bg-opacity: 1;
  background-color: rgb(28 39 51 / var(--tw-bg-opacity, 1));
}
.bg-body\/80 {
  background-color: rgb(28 39 51 / 0.8);
}
.bg-chk {
  --tw-bg-opacity: 1;
  background-color: rgb(31 122 77 / var(--tw-bg-opacity, 1));
}
.bg-chk\/10 {
  background-color: rgb(31 122 77 / 0.1);
}
.bg-chk\/5 {
  background-color: rgb(31 122 77 / 0.05);
}
.bg-current {
  background-color: currentColor;
}
.bg-emg {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-emg\/10 {
  background-color: rgb(220 38 38 / 0.1);
}
.bg-emg\/\[\.06\] {
  background-color: rgb(220 38 38 / .06);
}
.bg-emg\/\[\.08\] {
  background-color: rgb(220 38 38 / .08);
}
.bg-emgbg {
  --tw-bg-opacity: 1;
  background-color: rgb(253 232 232 / var(--tw-bg-opacity, 1));
}
.bg-hint {
  --tw-bg-opacity: 1;
  background-color: rgb(70 80 95 / var(--tw-bg-opacity, 1));
}
.bg-hq {
  --tw-bg-opacity: 1;
  background-color: rgb(42 93 176 / var(--tw-bg-opacity, 1));
}
.bg-hq\/10 {
  background-color: rgb(42 93 176 / 0.1);
}
.bg-hqbg {
  --tw-bg-opacity: 1;
  background-color: rgb(238 243 251 / var(--tw-bg-opacity, 1));
}
.bg-line {
  --tw-bg-opacity: 1;
  background-color: rgb(208 215 222 / var(--tw-bg-opacity, 1));
}
.bg-navy {
  --tw-bg-opacity: 1;
  background-color: rgb(28 60 110 / var(--tw-bg-opacity, 1));
}
.bg-navy\/10 {
  background-color: rgb(28 60 110 / 0.1);
}
.bg-rule {
  --tw-bg-opacity: 1;
  background-color: rgb(238 240 243 / var(--tw-bg-opacity, 1));
}
.bg-site {
  --tw-bg-opacity: 1;
  background-color: rgb(176 74 42 / var(--tw-bg-opacity, 1));
}
.bg-site\/10 {
  background-color: rgb(176 74 42 / 0.1);
}
.bg-site\/\[\.06\] {
  background-color: rgb(176 74 42 / .06);
}
.bg-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 252 / var(--tw-bg-opacity, 1));
}
.bg-surface\/95 {
  background-color: rgb(247 249 252 / 0.95);
}
.bg-transparent {
  background-color: transparent;
}
.bg-warn {
  --tw-bg-opacity: 1;
  background-color: rgb(192 57 43 / var(--tw-bg-opacity, 1));
}
.bg-warn\/\[\.08\] {
  background-color: rgb(192 57 43 / .08);
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}
.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/25 {
  background-color: rgb(255 255 255 / 0.25);
}
.bg-white\/30 {
  background-color: rgb(255 255 255 / 0.3);
}
.bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
.bg-white\/85 {
  background-color: rgb(255 255 255 / 0.85);
}
.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}
.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}
.bg-white\/\[\.14\] {
  background-color: rgb(255 255 255 / .14);
}
.bg-white\/\[\.18\] {
  background-color: rgb(255 255 255 / .18);
}
.bg-\[\#eef3f9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 243 249 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f7f9fc\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fff8e6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 230 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f0fdf4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-\[linear-gradient\(180deg\2c rgba\(255\2c 255\2c 255\2c \.14\)\2c rgba\(255\2c 255\2c 255\2c \.40\)_46\%\2c rgba\(255\2c 255\2c 255\2c \.60\)\)\] {
  background-image: linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.40) 46%,rgba(255,255,255,.60));
}
.bg-\[linear-gradient\(180deg\2c rgba\(255\2c 255\2c 255\2c \.36\)\2c rgba\(255\2c 255\2c 255\2c \.62\)_46\%\2c rgba\(255\2c 255\2c 255\2c \.74\)\)\] {
  background-image: linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.62) 46%,rgba(255,255,255,.74));
}
.bg-\[repeating-linear-gradient\(135deg\2c transparent\2c transparent_6px\2c rgba\(87\2c 96\2c 106\2c \.045\)_6px\2c rgba\(87\2c 96\2c 106\2c \.045\)_12px\)\] {
  background-image: repeating-linear-gradient(135deg,transparent,transparent 6px,rgba(87,96,106,.045) 6px,rgba(87,96,106,.045) 12px);
}
.bg-\[repeating-linear-gradient\(90deg\2c \#d0d7de_0_3px\2c transparent_3px_7px\)\] {
  background-image: repeating-linear-gradient(90deg,#d0d7de 0 3px,transparent 3px 7px);
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-black\/35 {
  --tw-gradient-from: rgb(0 0 0 / 0.35) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/75 {
  --tw-gradient-from: rgb(0 0 0 / 0.75) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-hq {
  --tw-gradient-from: #2a5db0 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(42 93 176 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-hqbg {
  --tw-gradient-from: #eef3fb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(238 243 251 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-navy {
  --tw-gradient-from: #1c3c6e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(28 60 110 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-black\/35 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.35) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#2a5db0\] {
  --tw-gradient-to: #2a5db0 var(--tw-gradient-to-position);
}
.to-black\/15 {
  --tw-gradient-to: rgb(0 0 0 / 0.15) var(--tw-gradient-to-position);
}
.to-navy {
  --tw-gradient-to: #1c3c6e var(--tw-gradient-to-position);
}
.to-surface {
  --tw-gradient-to: #f7f9fc var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.fill-\[\#8496ae\] {
  fill: #8496ae;
}
.fill-\[\#8c1d17\] {
  fill: #8c1d17;
}
.fill-\[\#cfe0f7\] {
  fill: #cfe0f7;
}
.fill-\[\#dbe8fb\] {
  fill: #dbe8fb;
}
.fill-\[\#e9eff7\] {
  fill: #e9eff7;
}
.stroke-\[\#cbd6e5\] {
  stroke: #cbd6e5;
}
.stroke-hq {
  stroke: #2a5db0;
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-3\.5 {
  padding: 0.875rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[11px\] {
  padding: 11px;
}
.p-\[14px\] {
  padding: 14px;
}
.p-\[15px\] {
  padding: 15px;
}
.p-\[16px\] {
  padding: 16px;
}
.p-\[18px\] {
  padding: 18px;
}
.p-\[2px\] {
  padding: 2px;
}
.p-\[7px\] {
  padding: 7px;
}
.p-\[3px\] {
  padding: 3px;
}
.\!py-1\.5 {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-\[10px\] {
  padding-left: 10px;
  padding-right: 10px;
}
.px-\[11px\] {
  padding-left: 11px;
  padding-right: 11px;
}
.px-\[15px\] {
  padding-left: 15px;
  padding-right: 15px;
}
.px-\[18px\] {
  padding-left: 18px;
  padding-right: 18px;
}
.px-\[32px\] {
  padding-left: 32px;
  padding-right: 32px;
}
.px-\[40px\] {
  padding-left: 40px;
  padding-right: 40px;
}
.px-\[48px\] {
  padding-left: 48px;
  padding-right: 48px;
}
.px-\[5px\] {
  padding-left: 5px;
  padding-right: 5px;
}
.px-\[6px\] {
  padding-left: 6px;
  padding-right: 6px;
}
.px-\[7px\] {
  padding-left: 7px;
  padding-right: 7px;
}
.px-\[8px\] {
  padding-left: 8px;
  padding-right: 8px;
}
.px-\[9px\] {
  padding-left: 9px;
  padding-right: 9px;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-11 {
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-9 {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}
.py-\[1\.5px\] {
  padding-top: 1.5px;
  padding-bottom: 1.5px;
}
.py-\[10px\] {
  padding-top: 10px;
  padding-bottom: 10px;
}
.py-\[11px\] {
  padding-top: 11px;
  padding-bottom: 11px;
}
.py-\[12px\] {
  padding-top: 12px;
  padding-bottom: 12px;
}
.py-\[18px\] {
  padding-top: 18px;
  padding-bottom: 18px;
}
.py-\[1px\] {
  padding-top: 1px;
  padding-bottom: 1px;
}
.py-\[2\.5px\] {
  padding-top: 2.5px;
  padding-bottom: 2.5px;
}
.py-\[22px\] {
  padding-top: 22px;
  padding-bottom: 22px;
}
.py-\[2px\] {
  padding-top: 2px;
  padding-bottom: 2px;
}
.py-\[32px\] {
  padding-top: 32px;
  padding-bottom: 32px;
}
.py-\[3px\] {
  padding-top: 3px;
  padding-bottom: 3px;
}
.py-\[40px\] {
  padding-top: 40px;
  padding-bottom: 40px;
}
.py-\[44px\] {
  padding-top: 44px;
  padding-bottom: 44px;
}
.py-\[46px\] {
  padding-top: 46px;
  padding-bottom: 46px;
}
.py-\[4px\] {
  padding-top: 4px;
  padding-bottom: 4px;
}
.py-\[5px\] {
  padding-top: 5px;
  padding-bottom: 5px;
}
.py-\[6px\] {
  padding-top: 6px;
  padding-bottom: 6px;
}
.py-\[7px\] {
  padding-top: 7px;
  padding-bottom: 7px;
}
.py-\[8px\] {
  padding-top: 8px;
  padding-bottom: 8px;
}
.py-\[9px\] {
  padding-top: 9px;
  padding-bottom: 9px;
}
.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}
.pb-0\.5 {
  padding-bottom: 0.125rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-2\.5 {
  padding-bottom: 0.625rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-3\.5 {
  padding-bottom: 0.875rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-7 {
  padding-bottom: 1.75rem;
}
.pb-\[15px\] {
  padding-bottom: 15px;
}
.pb-\[4px\] {
  padding-bottom: 4px;
}
.pb-\[70px\] {
  padding-bottom: 70px;
}
.pb-\[9px\] {
  padding-bottom: 9px;
}
.pb-\[env\(safe-area-inset-bottom\)\] {
  padding-bottom: env(safe-area-inset-bottom);
}
.pb-\[max\(env\(safe-area-inset-bottom\)\2c 14px\)\] {
  padding-bottom: max(env(safe-area-inset-bottom), 14px);
}
.pb-\[max\(env\(safe-area-inset-bottom\)\2c 16px\)\] {
  padding-bottom: max(env(safe-area-inset-bottom), 16px);
}
.pl-0\.5 {
  padding-left: 0.125rem;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-1\.5 {
  padding-left: 0.375rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-12 {
  padding-left: 3rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-3\.5 {
  padding-left: 0.875rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-7 {
  padding-left: 1.75rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pl-\[18px\] {
  padding-left: 18px;
}
.pl-\[30px\] {
  padding-left: 30px;
}
.pl-\[34px\] {
  padding-left: 34px;
}
.pl-\[36px\] {
  padding-left: 36px;
}
.pl-\[38px\] {
  padding-left: 38px;
}
.pr-0\.5 {
  padding-right: 0.125rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-1\.5 {
  padding-right: 0.375rem;
}
.pr-11 {
  padding-right: 2.75rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-3\.5 {
  padding-right: 0.875rem;
}
.pr-6 {
  padding-right: 1.5rem;
}
.pr-9 {
  padding-right: 2.25rem;
}
.pr-\[14px\] {
  padding-right: 14px;
}
.pt-0 {
  padding-top: 0px;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-3\.5 {
  padding-top: 0.875rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-\[13px\] {
  padding-top: 13px;
}
.pt-\[3px\] {
  padding-top: 3px;
}
.pt-\[9px\] {
  padding-top: 9px;
}
.pt-\[calc\(var\(--wx-band\)\+10px\)\] {
  padding-top: calc(var(--wx-band) + 10px);
}
.pt-\[max\(env\(safe-area-inset-top\)\2c 16px\)\] {
  padding-top: max(env(safe-area-inset-top), 16px);
}
.pt-px {
  padding-top: 1px;
}
.pl-8 {
  padding-left: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-baseline {
  vertical-align: baseline;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: Pretendard Variable, "Malgun Gothic", -apple-system, sans-serif;
}
.\!text-\[12px\] {
  font-size: 12px !important;
}
.text-\[10\.3px\] {
  font-size: 10.3px;
}
.text-\[10\.5px\] {
  font-size: 10.5px;
}
.text-\[10\.8px\] {
  font-size: 10.8px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11\.5px\] {
  font-size: 11.5px;
}
.text-\[11\.8px\] {
  font-size: 11.8px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12\.2px\] {
  font-size: 12.2px;
}
.text-\[12\.3px\] {
  font-size: 12.3px;
}
.text-\[12\.5px\] {
  font-size: 12.5px;
}
.text-\[12\.8px\] {
  font-size: 12.8px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13\.5px\] {
  font-size: 13.5px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14\.5px\] {
  font-size: 14.5px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[15\.5px\] {
  font-size: 15.5px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[16\.5px\] {
  font-size: 16.5px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-\[18px\] {
  font-size: 18px;
}
.text-\[19px\] {
  font-size: 19px;
}
.text-\[20px\] {
  font-size: 20px;
}
.text-\[22px\] {
  font-size: 22px;
}
.text-\[23px\] {
  font-size: 23px;
}
.text-\[24px\] {
  font-size: 24px;
}
.text-\[26px\] {
  font-size: 26px;
}
.text-\[28px\] {
  font-size: 28px;
}
.text-\[34px\] {
  font-size: 34px;
}
.text-\[42px\] {
  font-size: 42px;
}
.text-\[7\.5px\] {
  font-size: 7.5px;
}
.text-\[7\.6px\] {
  font-size: 7.6px;
}
.text-\[7px\] {
  font-size: 7px;
}
.text-\[8\.5px\] {
  font-size: 8.5px;
}
.text-\[8px\] {
  font-size: 8px;
}
.text-\[9\.2px\] {
  font-size: 9.2px;
}
.text-\[9\.5px\] {
  font-size: 9.5px;
}
.text-\[9\.6px\] {
  font-size: 9.6px;
}
.text-\[9\.8px\] {
  font-size: 9.8px;
}
.text-\[9px\] {
  font-size: 9px;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.not-italic {
  font-style: normal;
}
.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[1\.25\] {
  line-height: 1.25;
}
.leading-\[1\.3\] {
  line-height: 1.3;
}
.leading-\[1\.45\] {
  line-height: 1.45;
}
.leading-\[1\.4\] {
  line-height: 1.4;
}
.leading-\[1\.55\] {
  line-height: 1.55;
}
.leading-\[1\.5\] {
  line-height: 1.5;
}
.leading-\[10px\] {
  line-height: 10px;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[-\.01em\] {
  letter-spacing: -.01em;
}
.tracking-\[-\.1px\] {
  letter-spacing: -.1px;
}
.tracking-\[-\.3px\] {
  letter-spacing: -.3px;
}
.tracking-\[-\.4px\] {
  letter-spacing: -.4px;
}
.tracking-\[-0\.015em\] {
  letter-spacing: -0.015em;
}
.tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}
.tracking-\[\.04em\] {
  letter-spacing: .04em;
}
.tracking-\[\.14em\] {
  letter-spacing: .14em;
}
.tracking-\[\.28em\] {
  letter-spacing: .28em;
}
.tracking-\[\.5px\] {
  letter-spacing: .5px;
}
.tracking-\[0\.02em\] {
  letter-spacing: 0.02em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.4em\] {
  letter-spacing: 0.4em;
}
.tracking-\[1px\] {
  letter-spacing: 1px;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.text-\[\#0a7d6e\] {
  --tw-text-opacity: 1;
  color: rgb(10 125 110 / var(--tw-text-opacity, 1));
}
.text-\[\#0e7490\] {
  --tw-text-opacity: 1;
  color: rgb(14 116 144 / var(--tw-text-opacity, 1));
}
.text-\[\#12202f\] {
  --tw-text-opacity: 1;
  color: rgb(18 32 47 / var(--tw-text-opacity, 1));
}
.text-\[\#125536\] {
  --tw-text-opacity: 1;
  color: rgb(18 85 54 / var(--tw-text-opacity, 1));
}
.text-\[\#12603b\] {
  --tw-text-opacity: 1;
  color: rgb(18 96 59 / var(--tw-text-opacity, 1));
}
.text-\[\#141c26\] {
  --tw-text-opacity: 1;
  color: rgb(20 28 38 / var(--tw-text-opacity, 1));
}
.text-\[\#14351f\] {
  --tw-text-opacity: 1;
  color: rgb(20 53 31 / var(--tw-text-opacity, 1));
}
.text-\[\#14563a\] {
  --tw-text-opacity: 1;
  color: rgb(20 86 58 / var(--tw-text-opacity, 1));
}
.text-\[\#14663c\] {
  --tw-text-opacity: 1;
  color: rgb(20 102 60 / var(--tw-text-opacity, 1));
}
.text-\[\#146c33\] {
  --tw-text-opacity: 1;
  color: rgb(20 108 51 / var(--tw-text-opacity, 1));
}
.text-\[\#157a36\] {
  --tw-text-opacity: 1;
  color: rgb(21 122 54 / var(--tw-text-opacity, 1));
}
.text-\[\#1a3a6b\] {
  --tw-text-opacity: 1;
  color: rgb(26 58 107 / var(--tw-text-opacity, 1));
}
.text-\[\#1a7f4b\] {
  --tw-text-opacity: 1;
  color: rgb(26 127 75 / var(--tw-text-opacity, 1));
}
.text-\[\#1c3c6e\] {
  --tw-text-opacity: 1;
  color: rgb(28 60 110 / var(--tw-text-opacity, 1));
}
.text-\[\#1c5b38\] {
  --tw-text-opacity: 1;
  color: rgb(28 91 56 / var(--tw-text-opacity, 1));
}
.text-\[\#1f2937\] {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-\[\#1f4278\] {
  --tw-text-opacity: 1;
  color: rgb(31 66 120 / var(--tw-text-opacity, 1));
}
.text-\[\#1f4a33\] {
  --tw-text-opacity: 1;
  color: rgb(31 74 51 / var(--tw-text-opacity, 1));
}
.text-\[\#1f4d8c\] {
  --tw-text-opacity: 1;
  color: rgb(31 77 140 / var(--tw-text-opacity, 1));
}
.text-\[\#1f4e9c\] {
  --tw-text-opacity: 1;
  color: rgb(31 78 156 / var(--tw-text-opacity, 1));
}
.text-\[\#1f5e15\] {
  --tw-text-opacity: 1;
  color: rgb(31 94 21 / var(--tw-text-opacity, 1));
}
.text-\[\#1f6b40\] {
  --tw-text-opacity: 1;
  color: rgb(31 107 64 / var(--tw-text-opacity, 1));
}
.text-\[\#22518f\] {
  --tw-text-opacity: 1;
  color: rgb(34 81 143 / var(--tw-text-opacity, 1));
}
.text-\[\#234a86\] {
  --tw-text-opacity: 1;
  color: rgb(35 74 134 / var(--tw-text-opacity, 1));
}
.text-\[\#26303c\] {
  --tw-text-opacity: 1;
  color: rgb(38 48 60 / var(--tw-text-opacity, 1));
}
.text-\[\#2a3340\] {
  --tw-text-opacity: 1;
  color: rgb(42 51 64 / var(--tw-text-opacity, 1));
}
.text-\[\#2a3a4f\] {
  --tw-text-opacity: 1;
  color: rgb(42 58 79 / var(--tw-text-opacity, 1));
}
.text-\[\#2a4a7a\] {
  --tw-text-opacity: 1;
  color: rgb(42 74 122 / var(--tw-text-opacity, 1));
}
.text-\[\#2a5db0\] {
  --tw-text-opacity: 1;
  color: rgb(42 93 176 / var(--tw-text-opacity, 1));
}
.text-\[\#2b333d\] {
  --tw-text-opacity: 1;
  color: rgb(43 51 61 / var(--tw-text-opacity, 1));
}
.text-\[\#2c6b45\] {
  --tw-text-opacity: 1;
  color: rgb(44 107 69 / var(--tw-text-opacity, 1));
}
.text-\[\#2f5fae\] {
  --tw-text-opacity: 1;
  color: rgb(47 95 174 / var(--tw-text-opacity, 1));
}
.text-\[\#2f6b4a\] {
  --tw-text-opacity: 1;
  color: rgb(47 107 74 / var(--tw-text-opacity, 1));
}
.text-\[\#33404f\] {
  --tw-text-opacity: 1;
  color: rgb(51 64 79 / var(--tw-text-opacity, 1));
}
.text-\[\#33465c\] {
  --tw-text-opacity: 1;
  color: rgb(51 70 92 / var(--tw-text-opacity, 1));
}
.text-\[\#374151\] {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-\[\#3a2a5c\] {
  --tw-text-opacity: 1;
  color: rgb(58 42 92 / var(--tw-text-opacity, 1));
}
.text-\[\#3c2477\] {
  --tw-text-opacity: 1;
  color: rgb(60 36 119 / var(--tw-text-opacity, 1));
}
.text-\[\#3c7fd4\] {
  --tw-text-opacity: 1;
  color: rgb(60 127 212 / var(--tw-text-opacity, 1));
}
.text-\[\#425062\] {
  --tw-text-opacity: 1;
  color: rgb(66 80 98 / var(--tw-text-opacity, 1));
}
.text-\[\#4338ca\] {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-\[\#4a2c8f\] {
  --tw-text-opacity: 1;
  color: rgb(74 44 143 / var(--tw-text-opacity, 1));
}
.text-\[\#4a3570\] {
  --tw-text-opacity: 1;
  color: rgb(74 53 112 / var(--tw-text-opacity, 1));
}
.text-\[\#4a3714\] {
  --tw-text-opacity: 1;
  color: rgb(74 55 20 / var(--tw-text-opacity, 1));
}
.text-\[\#4a3a72\] {
  --tw-text-opacity: 1;
  color: rgb(74 58 114 / var(--tw-text-opacity, 1));
}
.text-\[\#4a7a5e\] {
  --tw-text-opacity: 1;
  color: rgb(74 122 94 / var(--tw-text-opacity, 1));
}
.text-\[\#4b2f8c\] {
  --tw-text-opacity: 1;
  color: rgb(75 47 140 / var(--tw-text-opacity, 1));
}
.text-\[\#4b5563\] {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-\[\#566071\] {
  --tw-text-opacity: 1;
  color: rgb(86 96 113 / var(--tw-text-opacity, 1));
}
.text-\[\#57606a\] {
  --tw-text-opacity: 1;
  color: rgb(87 96 106 / var(--tw-text-opacity, 1));
}
.text-\[\#5a4340\] {
  --tw-text-opacity: 1;
  color: rgb(90 67 64 / var(--tw-text-opacity, 1));
}
.text-\[\#5a6675\] {
  --tw-text-opacity: 1;
  color: rgb(90 102 117 / var(--tw-text-opacity, 1));
}
.text-\[\#5b2bb8\] {
  --tw-text-opacity: 1;
  color: rgb(91 43 184 / var(--tw-text-opacity, 1));
}
.text-\[\#5b3aa6\] {
  --tw-text-opacity: 1;
  color: rgb(91 58 166 / var(--tw-text-opacity, 1));
}
.text-\[\#5b6473\] {
  --tw-text-opacity: 1;
  color: rgb(91 100 115 / var(--tw-text-opacity, 1));
}
.text-\[\#5b6b84\] {
  --tw-text-opacity: 1;
  color: rgb(91 107 132 / var(--tw-text-opacity, 1));
}
.text-\[\#5b7cab\] {
  --tw-text-opacity: 1;
  color: rgb(91 124 171 / var(--tw-text-opacity, 1));
}
.text-\[\#5c2a2a\] {
  --tw-text-opacity: 1;
  color: rgb(92 42 42 / var(--tw-text-opacity, 1));
}
.text-\[\#5c6a7d\] {
  --tw-text-opacity: 1;
  color: rgb(92 106 125 / var(--tw-text-opacity, 1));
}
.text-\[\#6b3fd0\] {
  --tw-text-opacity: 1;
  color: rgb(107 63 208 / var(--tw-text-opacity, 1));
}
.text-\[\#6b4f21\] {
  --tw-text-opacity: 1;
  color: rgb(107 79 33 / var(--tw-text-opacity, 1));
}
.text-\[\#6b5a3a\] {
  --tw-text-opacity: 1;
  color: rgb(107 90 58 / var(--tw-text-opacity, 1));
}
.text-\[\#6b5a8a\] {
  --tw-text-opacity: 1;
  color: rgb(107 90 138 / var(--tw-text-opacity, 1));
}
.text-\[\#6b7480\] {
  --tw-text-opacity: 1;
  color: rgb(107 116 128 / var(--tw-text-opacity, 1));
}
.text-\[\#6b7583\] {
  --tw-text-opacity: 1;
  color: rgb(107 117 131 / var(--tw-text-opacity, 1));
}
.text-\[\#6b7684\] {
  --tw-text-opacity: 1;
  color: rgb(107 118 132 / var(--tw-text-opacity, 1));
}
.text-\[\#6d2b21\] {
  --tw-text-opacity: 1;
  color: rgb(109 43 33 / var(--tw-text-opacity, 1));
}
.text-\[\#7a2e2e\] {
  --tw-text-opacity: 1;
  color: rgb(122 46 46 / var(--tw-text-opacity, 1));
}
.text-\[\#7a4a08\] {
  --tw-text-opacity: 1;
  color: rgb(122 74 8 / var(--tw-text-opacity, 1));
}
.text-\[\#7a4a3d\] {
  --tw-text-opacity: 1;
  color: rgb(122 74 61 / var(--tw-text-opacity, 1));
}
.text-\[\#7a4e0c\] {
  --tw-text-opacity: 1;
  color: rgb(122 78 12 / var(--tw-text-opacity, 1));
}
.text-\[\#7a5312\] {
  --tw-text-opacity: 1;
  color: rgb(122 83 18 / var(--tw-text-opacity, 1));
}
.text-\[\#7a5a1e\] {
  --tw-text-opacity: 1;
  color: rgb(122 90 30 / var(--tw-text-opacity, 1));
}
.text-\[\#7a5bd0\] {
  --tw-text-opacity: 1;
  color: rgb(122 91 208 / var(--tw-text-opacity, 1));
}
.text-\[\#7a5c05\] {
  --tw-text-opacity: 1;
  color: rgb(122 92 5 / var(--tw-text-opacity, 1));
}
.text-\[\#7a5cc4\] {
  --tw-text-opacity: 1;
  color: rgb(122 92 196 / var(--tw-text-opacity, 1));
}
.text-\[\#7a6244\] {
  --tw-text-opacity: 1;
  color: rgb(122 98 68 / var(--tw-text-opacity, 1));
}
.text-\[\#7b8694\] {
  --tw-text-opacity: 1;
  color: rgb(123 134 148 / var(--tw-text-opacity, 1));
}
.text-\[\#7ba0d8\] {
  --tw-text-opacity: 1;
  color: rgb(123 160 216 / var(--tw-text-opacity, 1));
}
.text-\[\#7c3aed\] {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}
.text-\[\#7d8ca0\] {
  --tw-text-opacity: 1;
  color: rgb(125 140 160 / var(--tw-text-opacity, 1));
}
.text-\[\#7d9bc9\] {
  --tw-text-opacity: 1;
  color: rgb(125 155 201 / var(--tw-text-opacity, 1));
}
.text-\[\#8a2318\] {
  --tw-text-opacity: 1;
  color: rgb(138 35 24 / var(--tw-text-opacity, 1));
}
.text-\[\#8a2b22\] {
  --tw-text-opacity: 1;
  color: rgb(138 43 34 / var(--tw-text-opacity, 1));
}
.text-\[\#8a2f28\] {
  --tw-text-opacity: 1;
  color: rgb(138 47 40 / var(--tw-text-opacity, 1));
}
.text-\[\#8a3227\] {
  --tw-text-opacity: 1;
  color: rgb(138 50 39 / var(--tw-text-opacity, 1));
}
.text-\[\#8a3520\] {
  --tw-text-opacity: 1;
  color: rgb(138 53 32 / var(--tw-text-opacity, 1));
}
.text-\[\#8a3a1f\] {
  --tw-text-opacity: 1;
  color: rgb(138 58 31 / var(--tw-text-opacity, 1));
}
.text-\[\#8a3a3a\] {
  --tw-text-opacity: 1;
  color: rgb(138 58 58 / var(--tw-text-opacity, 1));
}
.text-\[\#8a4033\] {
  --tw-text-opacity: 1;
  color: rgb(138 64 51 / var(--tw-text-opacity, 1));
}
.text-\[\#8a4b06\] {
  --tw-text-opacity: 1;
  color: rgb(138 75 6 / var(--tw-text-opacity, 1));
}
.text-\[\#8a4b12\] {
  --tw-text-opacity: 1;
  color: rgb(138 75 18 / var(--tw-text-opacity, 1));
}
.text-\[\#8a5a06\] {
  --tw-text-opacity: 1;
  color: rgb(138 90 6 / var(--tw-text-opacity, 1));
}
.text-\[\#8a5a08\] {
  --tw-text-opacity: 1;
  color: rgb(138 90 8 / var(--tw-text-opacity, 1));
}
.text-\[\#8a5a10\] {
  --tw-text-opacity: 1;
  color: rgb(138 90 16 / var(--tw-text-opacity, 1));
}
.text-\[\#8a5a12\] {
  --tw-text-opacity: 1;
  color: rgb(138 90 18 / var(--tw-text-opacity, 1));
}
.text-\[\#8a5a2b\] {
  --tw-text-opacity: 1;
  color: rgb(138 90 43 / var(--tw-text-opacity, 1));
}
.text-\[\#8a6410\] {
  --tw-text-opacity: 1;
  color: rgb(138 100 16 / var(--tw-text-opacity, 1));
}
.text-\[\#8a6a06\] {
  --tw-text-opacity: 1;
  color: rgb(138 106 6 / var(--tw-text-opacity, 1));
}
.text-\[\#8a6a2a\] {
  --tw-text-opacity: 1;
  color: rgb(138 106 42 / var(--tw-text-opacity, 1));
}
.text-\[\#8a6a3b\] {
  --tw-text-opacity: 1;
  color: rgb(138 106 59 / var(--tw-text-opacity, 1));
}
.text-\[\#8a6d3b\] {
  --tw-text-opacity: 1;
  color: rgb(138 109 59 / var(--tw-text-opacity, 1));
}
.text-\[\#8a7355\] {
  --tw-text-opacity: 1;
  color: rgb(138 115 85 / var(--tw-text-opacity, 1));
}
.text-\[\#8a939e\] {
  --tw-text-opacity: 1;
  color: rgb(138 147 158 / var(--tw-text-opacity, 1));
}
.text-\[\#8a94a1\] {
  --tw-text-opacity: 1;
  color: rgb(138 148 161 / var(--tw-text-opacity, 1));
}
.text-\[\#8a94a2\] {
  --tw-text-opacity: 1;
  color: rgb(138 148 162 / var(--tw-text-opacity, 1));
}
.text-\[\#8a94a3\] {
  --tw-text-opacity: 1;
  color: rgb(138 148 163 / var(--tw-text-opacity, 1));
}
.text-\[\#8b95a3\] {
  --tw-text-opacity: 1;
  color: rgb(139 149 163 / var(--tw-text-opacity, 1));
}
.text-\[\#8c1d17\] {
  --tw-text-opacity: 1;
  color: rgb(140 29 23 / var(--tw-text-opacity, 1));
}
.text-\[\#8c231b\] {
  --tw-text-opacity: 1;
  color: rgb(140 35 27 / var(--tw-text-opacity, 1));
}
.text-\[\#8c2f22\] {
  --tw-text-opacity: 1;
  color: rgb(140 47 34 / var(--tw-text-opacity, 1));
}
.text-\[\#8c3535\] {
  --tw-text-opacity: 1;
  color: rgb(140 53 53 / var(--tw-text-opacity, 1));
}
.text-\[\#8d97a5\] {
  --tw-text-opacity: 1;
  color: rgb(141 151 165 / var(--tw-text-opacity, 1));
}
.text-\[\#8e1a10\] {
  --tw-text-opacity: 1;
  color: rgb(142 26 16 / var(--tw-text-opacity, 1));
}
.text-\[\#8e2f1c\] {
  --tw-text-opacity: 1;
  color: rgb(142 47 28 / var(--tw-text-opacity, 1));
}
.text-\[\#8ea3c4\] {
  --tw-text-opacity: 1;
  color: rgb(142 163 196 / var(--tw-text-opacity, 1));
}
.text-\[\#8f4e08\] {
  --tw-text-opacity: 1;
  color: rgb(143 78 8 / var(--tw-text-opacity, 1));
}
.text-\[\#92400e\] {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-\[\#94500a\] {
  --tw-text-opacity: 1;
  color: rgb(148 80 10 / var(--tw-text-opacity, 1));
}
.text-\[\#946012\] {
  --tw-text-opacity: 1;
  color: rgb(148 96 18 / var(--tw-text-opacity, 1));
}
.text-\[\#94a3b8\] {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-\[\#96591a\] {
  --tw-text-opacity: 1;
  color: rgb(150 89 26 / var(--tw-text-opacity, 1));
}
.text-\[\#96a2b0\] {
  --tw-text-opacity: 1;
  color: rgb(150 162 176 / var(--tw-text-opacity, 1));
}
.text-\[\#98a2b0\] {
  --tw-text-opacity: 1;
  color: rgb(152 162 176 / var(--tw-text-opacity, 1));
}
.text-\[\#9a3d22\] {
  --tw-text-opacity: 1;
  color: rgb(154 61 34 / var(--tw-text-opacity, 1));
}
.text-\[\#9a6a12\] {
  --tw-text-opacity: 1;
  color: rgb(154 106 18 / var(--tw-text-opacity, 1));
}
.text-\[\#9a7a70\] {
  --tw-text-opacity: 1;
  color: rgb(154 122 112 / var(--tw-text-opacity, 1));
}
.text-\[\#9aa4b2\] {
  --tw-text-opacity: 1;
  color: rgb(154 164 178 / var(--tw-text-opacity, 1));
}
.text-\[\#9fb0c9\] {
  --tw-text-opacity: 1;
  color: rgb(159 176 201 / var(--tw-text-opacity, 1));
}
.text-\[\#a02020\] {
  --tw-text-opacity: 1;
  color: rgb(160 32 32 / var(--tw-text-opacity, 1));
}
.text-\[\#a04a4a\] {
  --tw-text-opacity: 1;
  color: rgb(160 74 74 / var(--tw-text-opacity, 1));
}
.text-\[\#a3acb9\] {
  --tw-text-opacity: 1;
  color: rgb(163 172 185 / var(--tw-text-opacity, 1));
}
.text-\[\#a3adba\] {
  --tw-text-opacity: 1;
  color: rgb(163 173 186 / var(--tw-text-opacity, 1));
}
.text-\[\#a4514f\] {
  --tw-text-opacity: 1;
  color: rgb(164 81 79 / var(--tw-text-opacity, 1));
}
.text-\[\#a5201a\] {
  --tw-text-opacity: 1;
  color: rgb(165 32 26 / var(--tw-text-opacity, 1));
}
.text-\[\#a5231f\] {
  --tw-text-opacity: 1;
  color: rgb(165 35 31 / var(--tw-text-opacity, 1));
}
.text-\[\#a58141\] {
  --tw-text-opacity: 1;
  color: rgb(165 129 65 / var(--tw-text-opacity, 1));
}
.text-\[\#a82c22\] {
  --tw-text-opacity: 1;
  color: rgb(168 44 34 / var(--tw-text-opacity, 1));
}
.text-\[\#a8501c\] {
  --tw-text-opacity: 1;
  color: rgb(168 80 28 / var(--tw-text-opacity, 1));
}
.text-\[\#aab2bd\] {
  --tw-text-opacity: 1;
  color: rgb(170 178 189 / var(--tw-text-opacity, 1));
}
.text-\[\#aeb6c0\] {
  --tw-text-opacity: 1;
  color: rgb(174 182 192 / var(--tw-text-opacity, 1));
}
.text-\[\#b0342a\] {
  --tw-text-opacity: 1;
  color: rgb(176 52 42 / var(--tw-text-opacity, 1));
}
.text-\[\#b04a2a\] {
  --tw-text-opacity: 1;
  color: rgb(176 74 42 / var(--tw-text-opacity, 1));
}
.text-\[\#b3261e\] {
  --tw-text-opacity: 1;
  color: rgb(179 38 30 / var(--tw-text-opacity, 1));
}
.text-\[\#b3bbc6\] {
  --tw-text-opacity: 1;
  color: rgb(179 187 198 / var(--tw-text-opacity, 1));
}
.text-\[\#b3bcc7\] {
  --tw-text-opacity: 1;
  color: rgb(179 188 199 / var(--tw-text-opacity, 1));
}
.text-\[\#b3bcc9\] {
  --tw-text-opacity: 1;
  color: rgb(179 188 201 / var(--tw-text-opacity, 1));
}
.text-\[\#b45309\] {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-\[\#b5620d\] {
  --tw-text-opacity: 1;
  color: rgb(181 98 13 / var(--tw-text-opacity, 1));
}
.text-\[\#b6bfca\] {
  --tw-text-opacity: 1;
  color: rgb(182 191 202 / var(--tw-text-opacity, 1));
}
.text-\[\#b7791f\] {
  --tw-text-opacity: 1;
  color: rgb(183 121 31 / var(--tw-text-opacity, 1));
}
.text-\[\#b78a48\] {
  --tw-text-opacity: 1;
  color: rgb(183 138 72 / var(--tw-text-opacity, 1));
}
.text-\[\#b91c1c\] {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-\[\#c2a06a\] {
  --tw-text-opacity: 1;
  color: rgb(194 160 106 / var(--tw-text-opacity, 1));
}
.text-\[\#c2cbd6\] {
  --tw-text-opacity: 1;
  color: rgb(194 203 214 / var(--tw-text-opacity, 1));
}
.text-\[\#c3cad4\] {
  --tw-text-opacity: 1;
  color: rgb(195 202 212 / var(--tw-text-opacity, 1));
}
.text-\[\#c3cbd6\] {
  --tw-text-opacity: 1;
  color: rgb(195 203 214 / var(--tw-text-opacity, 1));
}
.text-\[\#c4ccd8\] {
  --tw-text-opacity: 1;
  color: rgb(196 204 216 / var(--tw-text-opacity, 1));
}
.text-\[\#c8ced6\] {
  --tw-text-opacity: 1;
  color: rgb(200 206 214 / var(--tw-text-opacity, 1));
}
.text-\[\#c9d1da\] {
  --tw-text-opacity: 1;
  color: rgb(201 209 218 / var(--tw-text-opacity, 1));
}
.text-\[\#ffe2e2\] {
  --tw-text-opacity: 1;
  color: rgb(255 226 226 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-body {
  --tw-text-opacity: 1;
  color: rgb(28 39 51 / var(--tw-text-opacity, 1));
}
.text-caution {
  --tw-text-opacity: 1;
  color: rgb(194 98 11 / var(--tw-text-opacity, 1));
}
.text-chk {
  --tw-text-opacity: 1;
  color: rgb(31 122 77 / var(--tw-text-opacity, 1));
}
.text-current {
  color: currentColor;
}
.text-emg {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-emg\/80 {
  color: rgb(220 38 38 / 0.8);
}
.text-hint {
  --tw-text-opacity: 1;
  color: rgb(70 80 95 / var(--tw-text-opacity, 1));
}
.text-hq {
  --tw-text-opacity: 1;
  color: rgb(42 93 176 / var(--tw-text-opacity, 1));
}
.text-ink {
  --tw-text-opacity: 1;
  color: rgb(34 34 34 / var(--tw-text-opacity, 1));
}
.text-muted {
  --tw-text-opacity: 1;
  color: rgb(87 96 106 / var(--tw-text-opacity, 1));
}
.text-navy {
  --tw-text-opacity: 1;
  color: rgb(28 60 110 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-site {
  --tw-text-opacity: 1;
  color: rgb(176 74 42 / var(--tw-text-opacity, 1));
}
.text-sub {
  --tw-text-opacity: 1;
  color: rgb(58 67 79 / var(--tw-text-opacity, 1));
}
.text-transparent {
  color: transparent;
}
.text-warn {
  --tw-text-opacity: 1;
  color: rgb(192 57 43 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}
.text-white\/55 {
  color: rgb(255 255 255 / 0.55);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-white\/65 {
  color: rgb(255 255 255 / 0.65);
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
.text-white\/95 {
  color: rgb(255 255 255 / 0.95);
}
.text-\[\#5b7290\] {
  --tw-text-opacity: 1;
  color: rgb(91 114 144 / var(--tw-text-opacity, 1));
}
.text-\[\#3730a3\] {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}
.text-\[\#15803d\] {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.decoration-\[\#c9d2dd\] {
  text-decoration-color: #c9d2dd;
}
.decoration-dotted {
  text-decoration-style: dotted;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-\[3px\] {
  text-underline-offset: 3px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.accent-\[\#0a7d6e\] {
  accent-color: #0a7d6e;
}
.accent-\[\#2a5db0\] {
  accent-color: #2a5db0;
}
.accent-\[\#b45309\] {
  accent-color: #b45309;
}
.accent-\[\#dc2626\] {
  accent-color: #dc2626;
}
.accent-\[var\(--hq\2c \#2563eb\)\] {
  accent-color: var(--hq,#2563eb);
}
.accent-hq {
  accent-color: #2a5db0;
}
.accent-navy {
  accent-color: #1c3c6e;
}
.accent-site {
  accent-color: #b04a2a;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-35 {
  opacity: 0.35;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-45 {
  opacity: 0.45;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-55 {
  opacity: 0.55;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-85 {
  opacity: 0.85;
}
.opacity-90 {
  opacity: 0.9;
}
.opacity-95 {
  opacity: 0.95;
}
.opacity-\[\.13\] {
  opacity: .13;
}
.opacity-\[\.42\] {
  opacity: .42;
}
.opacity-\[\.72\] {
  opacity: .72;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_-10px_30px_-14px_rgba\(16\2c 24\2c 40\2c \.45\)\] {
  --tw-shadow: 0 -10px 30px -14px rgba(16,24,40,.45);
  --tw-shadow-colored: 0 -10px 30px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_-12px_40px_-12px_rgba\(0\2c 0\2c 0\2c \.4\)\] {
  --tw-shadow: 0 -12px 40px -12px rgba(0,0,0,.4);
  --tw-shadow-colored: 0 -12px 40px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_-8px_26px_-14px_rgba\(16\2c 24\2c 40\2c \.4\)\] {
  --tw-shadow: 0 -8px 26px -14px rgba(16,24,40,.4);
  --tw-shadow-colored: 0 -8px 26px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_-8px_28px_rgba\(20\2c 44\2c 80\2c \.22\)\] {
  --tw-shadow: 0 -8px 28px rgba(20,44,80,.22);
  --tw-shadow-colored: 0 -8px 28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_-8px_40px_-12px_rgba\(0\2c 0\2c 0\2c \.45\)\] {
  --tw-shadow: 0 -8px 40px -12px rgba(0,0,0,.45);
  --tw-shadow-colored: 0 -8px 40px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_\#cfe0f7\] {
  --tw-shadow: 0 0 0 1px #cfe0f7;
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_2px_\#dbe7f8\] {
  --tw-shadow: 0 0 0 2px #dbe7f8;
  --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_2px_rgba\(0\2c 0\2c 0\2c \.06\)\] {
  --tw-shadow: 0 0 0 2px rgba(0,0,0,.06);
  --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_3px_rgba\(220\2c 38\2c 38\2c \.26\)\2c 0_14px_34px_-10px_rgba\(220\2c 38\2c 38\2c \.55\)\] {
  --tw-shadow: 0 0 0 3px rgba(220,38,38,.26),0 14px 34px -10px rgba(220,38,38,.55);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color), 0 14px 34px -10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_3px_rgba\(255\2c 255\2c 255\2c \.9\)\] {
  --tw-shadow: 0 0 0 3px rgba(255,255,255,.9);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_3px_rgba\(42\2c 93\2c 176\2c \.25\)\] {
  --tw-shadow: 0 0 0 3px rgba(42,93,176,.25);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_10px_28px_-8px_rgba\(16\2c 24\2c 40\2c \.28\)\] {
  --tw-shadow: 0 10px 28px -8px rgba(16,24,40,.28);
  --tw-shadow-colored: 0 10px 28px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_10px_28px_rgba\(20\2c 44\2c 80\2c \.18\)\] {
  --tw-shadow: 0 10px 28px rgba(20,44,80,.18);
  --tw-shadow-colored: 0 10px 28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_10px_28px_rgba\(28\2c 60\2c 110\2c \.16\)\] {
  --tw-shadow: 0 10px 28px rgba(28,60,110,.16);
  --tw-shadow-colored: 0 10px 28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_10px_30px_rgba\(28\2c 60\2c 110\2c \.08\)\] {
  --tw-shadow: 0 10px 30px rgba(28,60,110,.08);
  --tw-shadow-colored: 0 10px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_12px_30px_rgba\(142\2c 26\2c 16\2c \.42\)\] {
  --tw-shadow: 0 12px 30px rgba(142,26,16,.42);
  --tw-shadow-colored: 0 12px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_12px_32px_-8px_rgba\(16\2c 24\2c 40\2c \.28\)\] {
  --tw-shadow: 0 12px 32px -8px rgba(16,24,40,.28);
  --tw-shadow-colored: 0 12px 32px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_14px_36px_-14px_rgba\(16\2c 24\2c 40\2c \.45\)\] {
  --tw-shadow: 0 14px 36px -14px rgba(16,24,40,.45);
  --tw-shadow-colored: 0 14px 36px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_18px_50px_-12px_rgba\(0\2c 0\2c 0\2c \.4\)\] {
  --tw-shadow: 0 18px 50px -12px rgba(0,0,0,.4);
  --tw-shadow-colored: 0 18px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_2px_rgba\(16\2c 24\2c 40\2c \.05\)\] {
  --tw-shadow: 0 1px 2px rgba(16,24,40,.05);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_3px_rgba\(0\2c 0\2c 0\2c \.04\)\] {
  --tw-shadow: 0 1px 3px rgba(0,0,0,.04);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_3px_rgba\(16\2c 24\2c 36\2c \.14\)\] {
  --tw-shadow: 0 1px 3px rgba(16,24,36,.14);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_3px_rgba\(16\2c 24\2c 40\2c \.04\)\] {
  --tw-shadow: 0 1px 3px rgba(16,24,40,.04);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_3px_rgba\(16\2c 24\2c 40\2c \.05\)\] {
  --tw-shadow: 0 1px 3px rgba(16,24,40,.05);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_60px_-15px_rgba\(16\2c 24\2c 40\2c \.4\)\] {
  --tw-shadow: 0 24px 60px -15px rgba(16,24,40,.4);
  --tw-shadow-colored: 0 24px 60px -15px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_60px_-18px_rgba\(0\2c 0\2c 0\2c \.5\)\] {
  --tw-shadow: 0 24px 60px -18px rgba(0,0,0,.5);
  --tw-shadow-colored: 0 24px 60px -18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_60px_-20px_rgba\(16\2c 24\2c 40\2c \.45\)\] {
  --tw-shadow: 0 24px 60px -20px rgba(16,24,40,.45);
  --tw-shadow-colored: 0 24px 60px -20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_60px_rgba\(0\2c 0\2c 0\2c \.35\)\] {
  --tw-shadow: 0 24px 60px rgba(0,0,0,.35);
  --tw-shadow-colored: 0 24px 60px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_64px_rgba\(16\2c 32\2c 56\2c \.28\)\] {
  --tw-shadow: 0 24px 64px rgba(16,32,56,.28);
  --tw-shadow-colored: 0 24px 64px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_2px_10px_-6px_rgba\(16\2c 24\2c 40\2c 0\.12\)\] {
  --tw-shadow: 0 2px 10px -6px rgba(16,24,40,0.12);
  --tw-shadow-colored: 0 2px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_2px_16px_rgba\(24\2c 34\2c 49\2c 0\.12\)\] {
  --tw-shadow: 0 2px 16px rgba(24,34,49,0.12);
  --tw-shadow-colored: 0 2px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_2px_8px_-2px_rgba\(42\2c 93\2c 176\2c \.55\)\] {
  --tw-shadow: 0 2px 8px -2px rgba(42,93,176,.55);
  --tw-shadow-colored: 0 2px 8px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_12px_-4px_rgba\(42\2c 93\2c 176\2c \.55\)\] {
  --tw-shadow: 0 4px 12px -4px rgba(42,93,176,.55);
  --tw-shadow-colored: 0 4px 12px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_6px_16px_-6px_rgba\(124\2c 58\2c 237\2c \.55\)\] {
  --tw-shadow: 0 6px 16px -6px rgba(124,58,237,.55);
  --tw-shadow-colored: 0 6px 16px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_6px_16px_-6px_rgba\(176\2c 74\2c 42\2c \.55\)\] {
  --tw-shadow: 0 6px 16px -6px rgba(176,74,42,.55);
  --tw-shadow-colored: 0 6px 16px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_6px_16px_-6px_rgba\(192\2c 57\2c 43\2c \.55\)\] {
  --tw-shadow: 0 6px 16px -6px rgba(192,57,43,.55);
  --tw-shadow-colored: 0 6px 16px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_6px_16px_-6px_rgba\(192\2c 57\2c 57\2c \.6\)\] {
  --tw-shadow: 0 6px 16px -6px rgba(192,57,57,.6);
  --tw-shadow-colored: 0 6px 16px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_6px_16px_-6px_rgba\(21\2c 122\2c 54\2c \.55\)\] {
  --tw-shadow: 0 6px 16px -6px rgba(21,122,54,.55);
  --tw-shadow-colored: 0 6px 16px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_6px_16px_-6px_rgba\(31\2c 122\2c 77\2c \.55\)\] {
  --tw-shadow: 0 6px 16px -6px rgba(31,122,77,.55);
  --tw-shadow-colored: 0 6px 16px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_6px_16px_-6px_rgba\(31\2c 122\2c 77\2c \.6\)\] {
  --tw-shadow: 0 6px 16px -6px rgba(31,122,77,.6);
  --tw-shadow-colored: 0 6px 16px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_6px_16px_-6px_rgba\(42\2c 93\2c 176\2c \.55\)\] {
  --tw-shadow: 0 6px 16px -6px rgba(42,93,176,.55);
  --tw-shadow-colored: 0 6px 16px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_6px_16px_-6px_rgba\(42\2c 93\2c 176\2c \.6\)\] {
  --tw-shadow: 0 6px 16px -6px rgba(42,93,176,.6);
  --tw-shadow-colored: 0 6px 16px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_7px_20px_rgba\(28\2c 60\2c 110\2c \.15\)\] {
  --tw-shadow: 0 7px 20px rgba(28,60,110,.15);
  --tw-shadow-colored: 0 7px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_24px_rgba\(0\2c 0\2c 0\2c \.28\)\] {
  --tw-shadow: 0 8px 24px rgba(0,0,0,.28);
  --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_30px_-12px_rgba\(16\2c 24\2c 40\2c \.2\)\] {
  --tw-shadow: 0 8px 30px -12px rgba(16,24,40,.2);
  --tw-shadow-colored: 0 8px 30px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[8px_0_24px_-8px_rgba\(15\2c 23\2c 42\2c \.35\)\] {
  --tw-shadow: 8px 0 24px -8px rgba(15,23,42,.35);
  --tw-shadow-colored: 8px 0 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_-2px_0_\#2a5db0\] {
  --tw-shadow: inset 0 -2px 0 #2a5db0;
  --tw-shadow-colored: inset 0 -2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_3px_0_0_\#2a5db0\] {
  --tw-shadow: inset 3px 0 0 #2a5db0;
  --tw-shadow-colored: inset 3px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_3px_0_0_0_var\(--tw-shadow-color\)\] {
  --tw-shadow: inset 3px 0 0 0 var(--tw-shadow-color);
  --tw-shadow-colored: inset 3px 0 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_4px_0_0_0_var\(--tw-shadow-color\)\] {
  --tw-shadow: inset 4px 0 0 0 var(--tw-shadow-color);
  --tw-shadow-colored: inset 4px 0 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_2px_rgba\(16\2c 24\2c 40\2c \.08\)\] {
  --tw-shadow: 0 1px 2px rgba(16,24,40,.08);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-hq {
  --tw-shadow-color: #2a5db0;
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.outline-2 {
  outline-width: 2px;
}
.outline-\[2\.5px\] {
  outline-width: 2.5px;
}
.outline-offset-1 {
  outline-offset: 1px;
}
.outline-\[\#0a7d6e\] {
  outline-color: #0a7d6e;
}
.outline-navy {
  outline-color: #1c3c6e;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
  --tw-ring-inset: inset;
}
.ring-\[\#2a5db0\]\/15 {
  --tw-ring-color: rgb(42 93 176 / 0.15);
}
.ring-\[\#2f5fae\]\/20 {
  --tw-ring-color: rgb(47 95 174 / 0.2);
}
.ring-\[\#c3d5f0\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(195 213 240 / var(--tw-ring-opacity, 1));
}
.ring-\[\#cfe0f7\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(207 224 247 / var(--tw-ring-opacity, 1));
}
.ring-\[\#d0d7e2\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(208 215 226 / var(--tw-ring-opacity, 1));
}
.ring-\[\#d3e0f3\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(211 224 243 / var(--tw-ring-opacity, 1));
}
.ring-\[\#dbe2ec\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(219 226 236 / var(--tw-ring-opacity, 1));
}
.ring-\[\#dbe6f5\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(219 230 245 / var(--tw-ring-opacity, 1));
}
.ring-\[\#dde4ec\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(221 228 236 / var(--tw-ring-opacity, 1));
}
.ring-\[\#eef1f4\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(238 241 244 / var(--tw-ring-opacity, 1));
}
.ring-\[\#f0dcb4\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(240 220 180 / var(--tw-ring-opacity, 1));
}
.ring-\[\#f0dcb8\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(240 220 184 / var(--tw-ring-opacity, 1));
}
.ring-amber-300\/70 {
  --tw-ring-color: rgb(252 211 77 / 0.7);
}
.ring-black\/5 {
  --tw-ring-color: rgb(0 0 0 / 0.05);
}
.ring-emg {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity, 1));
}
.ring-hq {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(42 93 176 / var(--tw-ring-opacity, 1));
}
.ring-line {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(208 215 222 / var(--tw-ring-opacity, 1));
}
.ring-white\/20 {
  --tw-ring-color: rgb(255 255 255 / 0.2);
}
.ring-white\/25 {
  --tw-ring-color: rgb(255 255 255 / 0.25);
}
.ring-white\/30 {
  --tw-ring-color: rgb(255 255 255 / 0.3);
}
.ring-white\/35 {
  --tw-ring-color: rgb(255 255 255 / 0.35);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-\[2px\] {
  --tw-backdrop-blur: blur(2px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[filter\] {
  transition-property: filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[max-height\2c opacity\] {
  transition-property: max-height,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-\[360ms\] {
  transition-duration: 360ms;
}
.ease-\[cubic-bezier\(\.16\2c \.72\2c \.36\2c 1\)\] {
  transition-timing-function: cubic-bezier(.16,.72,.36,1);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\[text-shadow\:0_1px_4px_rgba\(0\2c 0\2c 0\2c \.55\)\] {
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}

/* ── 시안(docs/design/auth/*.html) <style> 이식 — 화면시안 그대로 구현 ── */
body {
  font-family: 'Pretendard Variable', 'Malgun Gothic', '맑은 고딕', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #f5f7fa;
}
.thin::-webkit-scrollbar { width: 9px; }
.thin::-webkit-scrollbar-thumb { background: #d3d9e3; border-radius: 5px; }
.thin-sm::-webkit-scrollbar { width: 7px; }
.thin-sm::-webkit-scrollbar-thumb { background: #d3d9e3; border-radius: 4px; }
.photo {
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255, 255, 255, .25), transparent 50%),
    linear-gradient(135deg, #7d8aa0 0%, #5a6b82 40%, #46506b 100%);
}
/* 현장 상세 배너 — 좌측 네이비 오버레이 그라데이션 (site-detail.html) */
.banner {
  background:
    linear-gradient(90deg, rgba(28, 60, 110, .86) 0%, rgba(28, 60, 110, .45) 55%, rgba(28, 60, 110, .15) 100%),
    radial-gradient(120% 140% at 18% 0%, rgba(255, 255, 255, .18), transparent 50%),
    linear-gradient(135deg, #7d8aa0 0%, #5a6b82 45%, #46506b 100%);
}
/* 위험성평가 표 — 빈도/강도 척도 셀렉트(중앙정렬·화살표 제거) */
select.lv { -webkit-appearance: none; -moz-appearance: none; appearance: none; text-align: center; }

/* 전역 셀렉트 — 기본 브라우저 룩 제거 + 커스텀 화살표(디자인 토큰 정합).
   .lv(위험성평가 척도, 중앙정렬·아이콘 없음)는 예외. background-color 는 각 select 의
   Tailwind 유틸(bg-white 등)이 그대로 유지되고, 여기선 background-image(화살표)만 얹는다. */
select:not(.lv) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2357606a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 15px 15px;
  padding-right: 1.9rem;
  cursor: pointer;
}
select:not(.lv)::-ms-expand { display: none; }

/* 회사 기본정보·문서 상세입력 — 입력 필드·업로드존·토스트 (company-info/hq-doc-detail.html <style> 이식) */
/* @layer components: 유틸리티(pl-[34px] 등)가 이 규칙보다 우선하도록(아이콘 입력 좌패딩 보존). */
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/*
 * 잠긴 단추를 눌렀을 때 «데려간 자리»를 잠깐 밝힌다 (2026-09-04 · 사용자 결정).
 * 🔴 «스스로 꺼진다» — 자바스크립트가 `LOCK_FLASH_MS` 뒤 class 를 뗀다(lock-goto.ts).
 *   영영 남으면 그게 새 결함이다. 그래서 애니메이션은 `forwards` 가 «아니다».
 * ♿ 움직임을 줄이라는 설정이면 «깜빡이지 않고» 색만 잠깐 둔다.
 */
.lock-flash { animation: lockFlash 1.6s ease-out; border-radius: 10px; }
@keyframes lockFlash {
  0%   { background-color: rgba(246, 201, 106, 0.45); box-shadow: 0 0 0 4px rgba(246, 201, 106, 0.35); }
  70%  { background-color: rgba(246, 201, 106, 0.22); box-shadow: 0 0 0 4px rgba(246, 201, 106, 0.16); }
  100% { background-color: transparent; box-shadow: 0 0 0 0 rgba(246, 201, 106, 0); }
}
/*
 * 🔴 위험성평가표 «만드는 중» — 쪽이 하나씩 완성되는 모습. (2026-09-10 사용자 지시)
 *   한 쪽에 45~108초라 «아무 일도 안 일어나는 화면»이 길다. 그동안 무엇이 되고 있는지 보인다.
 * ⚠ 반짝임은 «자리»를 알려 주는 것이지 장식이 아니다 — 다 되면 그림으로 바뀐다.
 */
@keyframes raGenShimmer { 0% { background-position: -140% 0; } 100% { background-position: 240% 0; } }
.ra-gen-wait {
  background-image: linear-gradient(100deg, transparent 18%, rgba(255,255,255,.8) 46%, transparent 72%);
  background-size: 220% 100%;
  animation: raGenShimmer 1.5s linear infinite;
}
/* 🔴 [2026-09-11 사용자 확정 · 시안 C 「흐림 → 선명」] 다 된 쪽은 «흐리게» 떠서 1.2초에 또렷해진다 — 「서서히 완성되는」 느낌. */
@keyframes raGenIn { from { opacity: .6; filter: blur(8px); transform: scale(.98); } 60% { opacity: 1; } to { opacity: 1; filter: blur(0); transform: none; } }
.ra-gen-in { animation: raGenIn 1.2s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .lock-flash { animation: none; background-color: rgba(246, 201, 106, 0.28); }
  /* 🔴 반짝임은 «끄되» 자리는 남긴다 — 기능(무엇이 되고 있나)을 안 잃는다. */
  .ra-gen-wait { animation: none; background-image: none; }
  .ra-gen-in { animation: none; }
  /* 🔴 모션을 줄이라는 설정에서는 «움직이지 않는다» — 글자는 그대로 바뀐다(기능은 안 잃는다). */
  .ra-mode-next, .ra-mode-prev { animation: none; }
  .ra-mode-arrow, .ra-rail { transition: none; }
}

/* 화면 권한 매트릭스 — 분리 테두리 테이블 (permission-matrix.html) */
.mtx { border-collapse: separate; border-spacing: 0; width: 100%; }
.mtx th, .mtx td { border-bottom: 1px solid #eef0f3; }

/* 회원가입 — 역할 선택 카드(라디오 체크 시 강조) (signup/signup-invite.html) */
.role-card { transition: border-color .12s, background .12s, box-shadow .12s; }
.role-card:has(input:checked) { border-color: #2a5db0; background: #eef3fb; box-shadow: 0 0 0 3px rgba(42, 93, 176, .14); }
.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-thumb { background: #d3d9e3; border-radius: 5px; }

/* ── 애니메이션 (적당한 모션) ── */
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* 목록 줄이 «자리를 찾아 내려앉는» 움직임 — 「정렬」이 주제인 화면이라 모션도 그 이야기를 한다.
   ⚠ 위에서 내려온다(riseIn 은 아래에서 올라온다) — 정렬 결과가 «위에서부터 확정»되는 느낌.
   ⚠ 340ms 로 짧게. 표는 읽는 것이지 감상하는 것이 아니다. 지연은 호출부가 인라인으로 준다. */
@keyframes settleIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
/* 「보기 ⇄ 작성」 전환 — 낱말이 «옆에서 밀려 들어온다». (2026-09-09 사용자 지시)
   ⚠ 두 단추를 걷고 «화살표 하나»로 바꿨다 — 무엇으로 바뀌는지는 «움직임»이 말한다.
   ⚠ 방향이 뜻이다: 보기→작성은 오른쪽에서, 작성→보기는 왼쪽에서 들어온다(되돌아가는 느낌).
   ⚠ 180ms — 누른 뒤 «바로» 읽혀야 한다. 길면 단추가 굼떠 보인다. */
@keyframes modeSlideNext { from { opacity: 0; transform: translateX(9px); } to { opacity: 1; transform: none; } }
@keyframes modeSlidePrev { from { opacity: 0; transform: translateX(-9px); } to { opacity: 1; transform: none; } }
.ra-mode-next { animation: modeSlideNext .18s ease-out both; }
.ra-mode-prev { animation: modeSlidePrev .18s ease-out both; }
.ra-mode-arrow { transition: transform .18s ease-out; }
/* 보조 절 «레일» — 화살표로 여닫을 때 폭이 «미끄러진다». (2026-09-09 사용자 지시)
   ⚠ 큰 화면에서만 레일이다 — 좁은 화면에선 위아래로 쌓이므로 폭을 안 건드린다. */
@media (min-width: 1024px) {
  .ra-rail { transition: width .24s ease-out; }
}

/* 셀렉트 드롭다운 등장 — 짧고 절제된 팝(네이티브 팝업의 즉각성을 해치지 않는 선). */
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
/* 닫힘 — 아래로 미끄러져 사라진다(모바일 하단 시트 모양의 모달). */
@keyframes sheetOutDown { from { opacity: 1; transform: none; } to { opacity: .6; transform: translateY(100%); } }
@keyframes fadeOutScale { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.98); } }
@keyframes backdropOut { from { opacity: 1; } to { opacity: 0; } }
/* 열림 — 데스크톱 전용. 모바일 올라오기는 «이미 있던» sheetUp(311행)을 그대로 쓴다.
   🔴 [2026-08-27] 나는 `sheetInUp` 을 «새로» 만들었다가 지웠다 — 311행에 같은 것이
     처음부터 있었는데 «찾아보지 않고» 지었다. 같은 움직임이 두 벌이면 언젠가 한쪽만
     고쳐 갈라진다(오늘 온종일 지적해 온 그 형태를 내가 만들 뻔했다). */
@keyframes fadeInScale { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@keyframes emgPulse { 0%, 100% { box-shadow: 0 6px 16px -8px rgba(220, 38, 38, .40); } 50% { box-shadow: 0 12px 30px -6px rgba(220, 38, 38, .80); } }
@keyframes bellPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes softBlink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes gradShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes alarmPulse { 0%, 100% { box-shadow: 0 8px 20px -6px rgba(220, 38, 38, .6); } 50% { box-shadow: 0 18px 46px -4px rgba(220, 38, 38, 1); } }
.card-lift { transition: transform .24s ease, box-shadow .24s ease; }
.btn-docs .chev-ic { transition: transform .2s ease; }
.btn-docs:hover .chev-ic { transform: translateX(4px); }

/* 현장 담당자 모바일 폰 프레임 (field-*.html <style> 이식) */
.app { box-shadow: 0 0 0 1px #e3e7ed, 0 12px 32px -20px rgba(16, 24, 40, .20); }
.tile:active { transform: scale(.97); }

/* 로그인 — 브랜드 패널(청사진 그리드) · 폼 필드 · 기본 버튼 (login.html <style> 이식) */
.brand-grad { background: radial-gradient(120% 90% at 85% 10%, rgba(81, 135, 222, .32), transparent 55%), linear-gradient(150deg, #1c3c6e 0%, #234a86 48%, #2a5db0 100%); }
/* 운영자 콘솔 브랜드 패널 (admin-login.html) — 사용자 사이트와 의도적 구분(더 짙은 네이비) */
.ops-grad { background: radial-gradient(120% 90% at 85% 8%, rgba(81, 135, 222, .22), transparent 55%), linear-gradient(160deg, #0f2547 0%, #173258 46%, #1c3c6e 100%); }
/* 운영자 콘솔 감사로그 monospace (admin-audit.html .mono) */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, "Cascadia Code", monospace; }
/* AI 추출 필드 shimmer (admin-doc-manage/doc-ai .ai-glow) */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.ai-glow { background: linear-gradient(100deg, #ede8fb 30%, #f6f2ff 50%, #ede8fb 70%); background-size: 800px 100%; animation: shimmer 2.2s linear infinite; }
.blueprint { background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 26px 26px; }
.field { transition: border-color .15s, box-shadow .15s, background .15s; }
.field:focus { outline: none; border-color: #2a5db0; box-shadow: 0 0 0 3px rgba(42, 93, 176, .16); background: #fff; }
.btn-primary { transition: background .15s, box-shadow .15s, transform .05s; }
.btn-primary:hover { background: #244f97; box-shadow: 0 6px 18px rgba(28, 60, 110, .28); }
.btn-primary:active { transform: translateY(1px); }

/* 로고 원형 스캐너 링 */
/* ── 로고 마크 — 원형 링을 «걷어냈다» (2026-08-28 사용자 확정) ─────────────────
 * ⚠ 종전 `.logo-ring` 은 남색 원판 + 회전하는 conic 하이라이트(`logoSweep`)였다.
 *   새 로고가 «방패 + 워드마크» 락업이라 원형 링 안에서 글자가 뭉갰고, 링을 빼자
 *   ①로고의 배경 ②멈추면 드러나는 «비대칭 호»가 문제가 되어 링 자체를 걷었다.
 * ★ **크기 상자는 그대로 둔다**(`h-9`·`h-[44px]`·`h-[104px]` …). 이미지가 그 안에서
 *   **87%** 를 차지해 「살짝 줄임」을 한 줄로 낸다 — 실측: 46px 상자 → 로고 40px.
 * ★ **`vertical-align: middle` 이 «자리»를 맞춘다** (2026-08-28 사용자 지시 「위치 어울리게」).
 *   ⚠ 없으면 `inline-block` 이 부모의 «글자 기준선»에 앉아, 아래 내려긋기(descender) 만큼
 *     로고가 위로 뜬다. `AppShell` 처럼 마크를 `<a>` 로 감싼 자리에서 실측 **3.5px** 어긋났다
 *     (로고 중심 24 vs 옆 글자 중심 27.5). 이 한 줄로 **−0.01px** 가 된다.
 *   ⚠ 마크가 이미 flex 자식인 자리(로그인·가입 등 15곳)는 원래 맞았고, flex 자식에서는
 *     `vertical-align` 이 무시되므로 이 줄이 그쪽을 흔들지 않는다 — 실측으로 확인했다.
 * ⚠ 움직임은 «없다». 2026-08-28 에 「떠오름」을 넣었다가 사용자 지시로 걷었다.
 *   그때 쓰던 `::after` 그림자도 함께 지웠다 — 정지 상태에서는 «떠 있는» 근거가 없어
 *   로고 밑의 얼룩으로 읽힌다(실측 화면에서 그렇게 보였다). */
.logo-mark { position: relative; display: inline-block; line-height: 0; vertical-align: middle; }
.logo-mark > img { position: absolute; inset: 0; margin: auto; width: 87%; height: 87%; -o-object-fit: contain; object-fit: contain; }

@media (prefers-reduced-motion: no-preference) {
  /* ⚠ `both` 가 아니라 `backwards` 다 — 이유가 있다 (2026-08-27).
     `both` 는 애니메이션이 «끝난 뒤에도» 마지막 프레임 값을 붙들어 둔다. 그런데 `to` 가
     `transform: none` 이어도 «애니메이션이 적용된» 상태라 computed 값은 `matrix(1,0,0,1,0,0)`
     — «none 이 아니다». transform 이 붙은 요소는
       ① position:fixed 자손의 «기준»이 되고        → 오버레이가 줄 안에 갇혔다(2026-08-26)
       ② 새 쌓임 맥락을 만들고                      → 머리글·메뉴가 어긋났다
       ③ 네이티브 <select> 팝업의 자리를 틀어지게 한다 → 옵션이 «한참 위»에 뜨고 닫혔다(2026-08-27)
     세 번 다 같은 뿌리였다. `backwards` 는 «시작 전»에만 값을 붙들고 끝난 뒤엔 놓는다.
     ⚠ 바꿔도 «보이는 모습»은 같다: 세 keyframes 의 to 가 전부 `opacity:1; transform:none` 이고
       그건 요소의 자연 상태와 같다(실측 — 그래서 붙들 이유가 애초에 없었다). */
  .anim-rise { animation: riseIn .55s cubic-bezier(.22, .61, .36, 1) backwards; }
  /* 목록 줄 — 정렬 결과가 «위에서부터 확정»되는 느낌. 지연은 호출부가 인라인으로 준다. */
  .anim-settle { animation: settleIn .34s cubic-bezier(.22, 1, .36, 1) backwards; }
  .anim-pop { animation: popIn .12s cubic-bezier(.22, .61, .36, 1) backwards; }

  /* ── 닫힘 애니메이션 — 「모바일에서 모달이 «위에서 아래로» 사라지게」 (2026-08-27 지시) ──
     ⚠ 여기는 `forwards` 다. 위 규칙(`backwards`)과 «반대»인 것이 맞다 — 이유가 반대라서다.
       위 규칙은 «들어오는» 애니메이션이 «끝난 뒤에도 살아 있는» 요소가 transform 을 붙들어
       ①fixed 자손의 기준 ②쌓임 맥락 ③네이티브 팝업 앵커를 어긋내는 것을 막는 것이다.
       나가는 애니메이션은 «끝나는 즉시 언마운트»돼 붙들 대상이 없다. 오히려 `forwards` 가
       없으면 마지막 프레임에 «원위치로 튕겼다가» 사라져 깜빡인다.
     ⚠ 애니메이션은 «패널»에만 건다. `fixed inset-0` 덮개에 transform 을 주면 닫히는 그
       0.24초 «동안» 자손 fixed 의 기준이 바뀐다 — 나중에 누가 모달 안에 fixed 를 두면
       그 창에서만 어긋나는 «간헐 결함»이 된다. 덮개는 opacity 만 쓴다. */
  .sheet-out { animation: sheetOutDown .24s cubic-bezier(.4, 0, 1, 1) forwards; }
  /* 데스크톱은 «중앙» 모달이라 아래로 미끄러지면 어색하다 — 짧게 사그라든다.
     ⚠ 이건 «덤»이 아니라 필수다: 닫힘을 애니메이션으로 만든 순간 요소가 그 시간만큼
       살아 있으므로, 데스크톱에 아무 애니메이션도 없으면 «멈춘 채 남았다가 툭» 사라진다. */
  @media (min-width: 640px) {
    .sheet-out { animation: fadeOutScale .16s cubic-bezier(.4, 0, 1, 1) forwards; }
  }
  .sheet-out-bd { animation: backdropOut .24s linear forwards; }

  /* ── 열림 — 「여닫이 둘 다」 (2026-08-27 지시) ──────────────────────────
     🔴 여기는 `backwards` 다. 바로 위 닫힘(`forwards`)과 «반대»인 것이 맞다.
       닫힘은 끝나면 «언마운트»돼 붙들 대상이 없지만, 열림은 «끝난 뒤에도 살아 있다».
       `both`·`forwards` 를 쓰면 끝난 뒤에도 `transform: matrix(1,0,0,1,0,0)` 을 붙들어
       ①position:fixed 자손의 «기준»이 되고 ②새 쌓임 맥락을 만든다 — 이 파일 191행이
       적어 둔 그 사고 그대로다(세 번 밟았다).
     ⚠ 그 사고가 여기서 특히 비싼 이유: 이 모달 «안»에서 하단 시트가 열린다.
       모달이 transform 을 붙들면 그 시트가 «화면»이 아니라 «모달» 기준이 된다 —
       240ms 창이 아니라 «영구적»으로 어긋난다. 그래서 실측으로 확인한다(아래 검사 참고).
     ⚠ 시간은 닫힘보다 «조금 길다» — 들어올 때 여유 있고 나갈 때 빠른 것이 자연스럽다. */
  /* 모바일 올라오기는 시트 셋과 «같은 값»이다 — 311·314행의 sheetUp .26s 를 그대로 쓴다.
     네 물건(모달·셀렉트·날짜·시각)이 같은 리듬으로 움직여야 한 화면에서 따로 놀지 않는다. */
  .sheet-in { animation: sheetUp .26s cubic-bezier(.22, .61, .36, 1) backwards; }
  /* 데스크톱은 «중앙» 모달이라 아래에서 올라오면 어색하다 — 이 갈래는 모달에만 있다
     (시트 셋은 모바일 전용이라 데스크톱 갈래가 «필요 없다»). */
  @media (min-width: 640px) {
    .sheet-in { animation: fadeInScale .18s cubic-bezier(.22, .61, .36, 1) backwards; }
  }
  .sheet-in-bd { animation: sheetFade .2s ease-out backwards; }
  /* ⚠ box-shadow 를 애니메이션하면 «배너 전체 면적»이 매 프레임 리페인트된다
       (실측 2026-07-29 · /dashboard 85,624px²/프레임). 07-29 대책 C 와 같은 기법으로
       그림자를 두 겹 깔고 **opacity 만 교차**시킨다 — 합성만 하므로 페인트 0. */
  .anim-rise-emg { position: relative; animation: riseIn .55s cubic-bezier(.22, .61, .36, 1) both;
    box-shadow: 0 6px 16px -8px rgba(220, 38, 38, .40); }
  .anim-rise-emg::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; opacity: 0; box-shadow: 0 12px 30px -6px rgba(220, 38, 38, .80);
    animation: emgGlowO 2.8s ease-in-out 1s infinite; }
  @keyframes emgGlowO { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
  .emg-alarm { animation: alarmPulse 1s ease-in-out infinite !important; }
  .anim-bell { display: inline-flex; transform-origin: center; animation: bellPulse 2.2s ease-in-out infinite; }
  .anim-attn { animation: softBlink 1.5s ease-in-out infinite; }
  .photo-anim { background-size: 180% 180%; animation: gradShift 16s ease-in-out infinite; }
  .card-lift:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -18px rgba(28, 60, 110, .42); }
}

/* ── 회원가입·회사가입 탑배너 (signup-05 / company-05 확정 시안) ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bannerSheen { 0% { transform: translateX(-140%) skewX(-16deg); } 55%, 100% { transform: translateX(320%) skewX(-16deg); } }
@keyframes gridDrift { from { background-position: 0 0, 0 0; } to { background-position: 26px 26px, 26px 26px; } }
@keyframes stepPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, .28); } }
@keyframes secPop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
/* 배너 광택 스윕 — reduced-motion 기본은 숨김 */
.b-sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 36%; pointer-events: none; z-index: 2; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent); opacity: 0; transform: translateX(-140%) skewX(-16deg); }
/* 폼 그룹 순차 등장 — reduced-motion 기본은 정적 노출 */
.rv-stagger > * { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .b-sheen { opacity: 1; animation: bannerSheen 7s ease-in-out 1.2s infinite; }
  .b-grid { animation: gridDrift 9s linear infinite; }
  .step-on { animation: stepPulse 2.2s ease-in-out infinite; }
  .sec-ic { animation: secPop .5s cubic-bezier(.22, .61, .36, 1) both; }
  .rv-stagger > * { opacity: 0; animation: fadeUp .55s cubic-bezier(.22, .61, .36, 1) both; }
  .rv-stagger > *:nth-child(1) { animation-delay: .20s; }
  .rv-stagger > *:nth-child(2) { animation-delay: .27s; }
  .rv-stagger > *:nth-child(3) { animation-delay: .34s; }
  .rv-stagger > *:nth-child(4) { animation-delay: .41s; }
  .rv-stagger > *:nth-child(5) { animation-delay: .48s; }
  .rv-stagger > *:nth-child(6) { animation-delay: .55s; }
  .rv-stagger > *:nth-child(7) { animation-delay: .62s; }
  .rv-stagger > *:nth-child(8) { animation-delay: .69s; }
  .rv-stagger > *:nth-child(9) { animation-delay: .76s; }
}

/* ── 로그인 우측 현장 대시보드 프리뷰 (login-10 확정 시안) ── */
.blueprint-ink { background-image: linear-gradient(rgba(28, 60, 110, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 60, 110, .05) 1px, transparent 1px); background-size: 24px 24px; }
@keyframes lpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes lpLive { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.78); } }
@keyframes lpRing { 0% { transform: scale(.6); opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes lpAlertRing { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); } }
.lp-reveal { opacity: 1; }
.lp-livedot { position: relative; display: inline-block; }
.lp-livedot::after { content: ""; position: absolute; inset: -2px; border-radius: 9999px; background: #4ade80; z-index: -1; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .lp-reveal { opacity: 0; animation: fadeUp .6s cubic-bezier(.22, .61, .36, 1) both; animation-delay: var(--d, 0s); }
  .lp-phone { opacity: 0; animation: fadeUp .65s cubic-bezier(.22, .61, .36, 1) .18s both, lpFloat 7s ease-in-out 1.3s infinite; }
  .lp-livedot { animation: lpLive 1.5s ease-in-out infinite; }
  .lp-livedot::after { animation: lpRing 1.8s ease-out infinite; }
  .lp-blink { animation: softBlink 1.4s ease-in-out infinite; }
  .lp-bell { display: inline-flex; transform-origin: top center; animation: bellPulse 2.6s ease-in-out infinite; }
  .lp-ring { animation: lpAlertRing 2.2s ease-out .8s infinite; }
}

/* ── 모바일 셀렉트 하단 시트(MobileSelectSheet) — 키보드처럼 올라오는 옵션 선택 ── */
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
/*
 * ★ [2026-09-16 · 사용자 지시] 서명 수단 «손잡이»가 잠긴 사람에게 스스로 까딱인다.
 *   「인증번호를 5회 이상 틀려 잠겼을 때 애니메이션이 동작하게」 — 그 자리다.
 * ⚠ **세 번만** 한다(2.7초). 무한 반복은 소음이고, 소음이 되면 다음 경고를 안 읽는다.
 * ⚠ 올라오기(sheetUp)와 밝힘(lockFlash)은 «이미 있는 것»을 그대로 쓴다 — 새 키프레임은 이것 하나다.
 */
@keyframes handleNudge {
  0%, 100% { transform: none; }
  22% { transform: translateY(-7px); }
  44% { transform: translateY(0); }
  66% { transform: translateY(-4px); }
  88% { transform: translateY(0); }
}
@keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  /* 🔴 [2026-08-27] `both` → `backwards`. 191행 규칙의 «선재 위반»이었다 —
     `both` 는 끝난 뒤에도 `transform: matrix(1,0,0,1,0,0)` 을 붙들어 ①fixed 자손의 기준이
     되고 ②새 쌓임 맥락을 만든다. 이 저장소가 그 뿌리로 «세 번» 깨졌다.
     ⚠ 지금 당장의 결함은 못 찾았다(패널 안에 fixed 자손이 없다) — 그래서 더 위험하다.
       시트 패널 «안»에 누가 fixed 를 두는 날 걸리고, 그때는 원인을 못 찾는다.
     ⚠ 보이는 모습은 같다: `sheetUp` 의 to 가 `transform: none` 이라 붙들 값이
       요소의 자연 상태와 같다(191행이 같은 근거로 세 클래스를 이미 바꿨다). */
  .sheet-panel { animation: sheetUp .26s cubic-bezier(.22, .61, .36, 1) backwards; }
  /* 서명 수단 손잡이 — 잠겼을 때 세 번 까딱(2.7초). 움직임 최소화면 아래 블록이 끈다. */
  .sign-handle-nudge { animation: handleNudge .9s ease-in-out 3; }
  .sheet-backdrop { animation: sheetFade .2s ease-out backwards; }
}

/* [hqdoc-04] 정규 서식 미리보기 — 서버가 만든 서식 보존 마크업의 문서풍 렌더.
   v2: 글꼴·굵게·밑줄·크기·색·정렬·들여쓰기·제목·문장앞기호(목록)를 모두 살린다.
   재현하지 않는 것: 칸 병합·페이지 나눔·이미지·정확한 줄간격. */
.doc-preview { color: #26303c; font-size: 13px; line-height: 1.8; }

/* ── 지면 틀 — 「미리보기가 문서와 똑같이 보여야 해」(사용자 지시 2026-08-13) ──────────────
   서버가 문서의 실제 판형·여백(pt)을 인라인 style 로 준다(`preview.ts` PageGeom).
   여기서는 «종이처럼» 보이게만 한다 — 치수는 문서가 정하고 화면은 배경·그림자만 얹는다.
   ⚠ 폭이 고정(A4=595pt≈793px)이라 좁은 화면에서는 가로 스크롤이 생긴다. 줄여 그리면
     글자 크기가 문서와 달라져 「똑같이」가 깨지므로, 축소 대신 스크롤을 택한다. */
/* 🔴 [2026-08-24 · 실측] `justify-content: center` 는 **자식이 넘치면 왼쪽을 잘라 먹는다** —
     넘친 만큼을 좌우로 «반씩» 밀어내는데, 왼쪽 음수 영역은 **스크롤로 닿을 수 없다.**
     실측(헤드리스 Chrome · site:16 · 100% 배율): 폰 360px 에서 **왼쪽 237px**(A4 794px 의 30%) ·
     아이폰 390px 에서 222px 이 «영영 안 보였다». 오른쪽은 멀쩡해서 눈치채기 어렵다.
     ⇒ `safe center` — 들어가면 가운데, 넘치면 왼쪽 정렬로 «안전하게» 떨어진다.
     ⚠ 앞줄의 `center` 를 남겨 둔다: `safe` 를 모르는 브라우저는 뒷줄을 버리고 앞줄을 쓴다.
     ⚠ 이 결함은 «원래 있던» 것이다. 기본이 「맞춤」이라 넘칠 일이 없어 안 드러났을 뿐이다. */
.doc-preview .pgw { display: flex; justify-content: center; justify-content: safe center; overflow-x: auto; background: #eef1f5; padding: 16px; border-radius: 8px; }
/* 쪽 묶음 — 여러 장을 위아래로 쌓는다. 배율(transform)은 «장»이 아니라 이 묶음에 건다
   (장마다 걸면 장 사이 간격이 배율을 안 따라와 어긋난다). */
.doc-preview .pgs { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.doc-preview .pg { flex: 0 0 auto; box-sizing: border-box; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.06); position: relative; }
/* 쪽 안의 흐름. `overflow:hidden` 은 주지 않는다 — 넘치면 «넘쳤다는 사실»이 보여야 한다
   (감춰 버리면 쪽나누기가 잘못돼도 아무도 모른다). */
.doc-preview .pgc { height: 100%; }
/* 문서가 명시한 쪽나눔 표시 — 자리만 차지하지 않게 완전히 접는다(쪽나누기가 소비한다). */
.doc-preview .pgbrk { display: none; }
/* 쪽 번호 — **문서에 없는 글자**라 종이 밖(왼쪽)에 띄우고 인쇄에서는 지운다. */
.doc-preview .pg[data-pgno]::before {
  content: attr(data-pgno); position: absolute; top: 0; left: -46px;
  font-size: 11px; color: #8a94a2; letter-spacing: .02em; white-space: nowrap;
}
/* 레이아웃 상자(1행1칸 표를 푼 것) — 표가 아니라 «흐름»이라 쪽을 넘어 이어질 수 있다.
   칸이었을 때의 안쪽 여백을 그대로 준다(안 주면 글이 테두리에 붙는다). */
.doc-preview .box { box-sizing: border-box; padding: 5px 7px; margin: 10px 0 14px; max-width: 100%; }
/* 지면 안에서는 표 기본 100% 폭을 쓰지 않는다 — 문서가 준 너비가 있으면 그것이 옳다. */
/*
 * ★ [2026-08-15] **지면 안에서는 블록 «사이» 여백도 우리가 만들지 않는다** (`margin: 0`).
 *   문서의 세로 간격은 **문서 자신의 빈 문단**이 만든다(그것은 그대로 그린다). 거기에 표 위아래
 *   10/14px, 문단 아래 7px 을 «더하면» 그만큼 지면이 모자라 **내용이 다음 쪽으로 밀린다.**
 *
 *   실측(site:1 · 배포된 모달 · 지면 785.2pt):
 *     여백 있음  블록합 730.2pt + 결재란 75.5pt 필요 → 넘침 → **2쪽**(문서는 1쪽)
 *     여백 없음  블록합 747.8pt(결재란 포함) → **1쪽**, 37pt 여유
 *
 * ⚠ 지면 «밖»(`.pg` 없는 흐름 렌더)에서는 종전 여백을 그대로 둔다 — 거기서는 문서 판형이 없어
 *   블록이 서로 붙으면 읽기 어렵다. 그래서 규칙을 `.pg` 안으로만 좁혔다.
 * ⚠ `TemplatePreview.tsx` PRINT_CSS 에도 **같은 두 줄**이 있어야 한다(화면과 종이가 갈리지 않게).
 */
.doc-preview .pg table { width: auto; margin: 0; }
.doc-preview .pg p { margin-bottom: 0; }
/*
 * ★ [2026-08-30] **`.box` 도 «표»다** — 그런데 위 `.pg table` 규칙에서 빠져 있었다.
 *   `.box` 는 「1행1칸 표를 푼 것」이라 `<table>` 이 아니게 되는 순간 여백 0 규칙 밖으로 나갔고,
 *   `.doc-preview .box` 의 `margin: 10px 0 14px` 가 지면 안에서도 그대로 걸렸다.
 *
 *   사용자 신고: 「site-11-1 문서 상단여백이 템플릿과 안맞아」 — 본문 전체가 «1행1칸 표»라
 *   문서가 통째로 내려간 것이다.
 *
 *   실측(site-11-1 · 헤드리스 크롬 · .doc-preview 로 감싸고 잼):
 *     서식      pagePr margin top 8220 HWPUNIT = 82.20pt
 *     고치기 전  상자 테두리 89.70pt  (= 82.20 + margin-top 10px)   → **+7.50pt**
 *     고친 뒤    상자 테두리 82.20pt  = 서식과 «정확히» 일치(오차 0.00)
 *     쪽 수      27종 전/후 «움직인 서식 0종»(상자를 쓰는 서식은 2-3·11-1·11-2·11-3 넷뿐)
 *
 * ⚠ 「첫 상자만」이 아니라 «전부»다 — `.pg table`·`.pg p` 와 같은 이유다.
 *   지면 안의 세로 간격은 **문서 자신의 빈 문단**이 만든다. 우리가 더하면 그만큼 밀린다.
 * ⚠ 지면 «밖»(판형 없는 흐름 렌더)에서는 종전 여백을 그대로 둔다 — 거기선 블록이 붙으면 읽기 어렵다.
 *
 * 🔴 **남은 차 3.84pt 는 여기서 안 고친다** — 이유가 있다.
 *   글자 자리는 아직 서식보다 +3.84pt 낮다(87.45 vs 83.61).
 *   그 안쪽은 `padding-top 5px(3.75pt)` + 인라인 `border-top 2px(1.5pt)` 이고,
 *   서식이 말하는 값은 `cellMargin top 141 HWPUNIT = 1.41pt` 다.
 *   그런데 **cellMargin 은 서식마다 다르다**(실측: (141,141,510,510) 23회 · (141,141,141,141) 12회 ·
 *   (0,0,0,0) 3회 · (283,141,283,283) … · **한 서식 «안»에서도 값이 갈리는 것이 10종**).
 *   ⇒ 여기에 한 값을 박으면 그 순간 다른 서식이 틀어진다. 옳은 자리는 **렌더러가 그 칸의
 *     cellMargin 을 인라인 padding 으로 내보내는 것**이다(테두리·너비를 이미 그렇게 내보낸다).
 *     그건 api 소유라 이 레인에서 안 만진다.
 *   ⚠ [2026-08-30 · 2차에서 «정정»] 아래 「가로 7px 은 맞다」는 **절반만 참이었다.**
 *     510 HWPUNIT(5.10pt=6.8px)이 가장 흔한 값인 것은 맞지만, 그건 **서식이 정하는 값**이지
 *     우리가 CSS 에 박을 값이 아니다. 12곳은 141(1.41pt)이고 한 서식 «안»에서도 갈린다.
 *     ⇒ 아래 2차에서 가로도 걷었다. 값을 싣는 것은 렌더러의 몫이다.
 */

/*
 * ★ [2026-08-30 · 2차] **가로 여백도 걷는다** — 세로와 «같은 형태»의 일이다.
 *
 *   실측(site-11-1 · 내 트리에서 구운 CSS):
 *     서식      pagePr margin left 4252 = 42.52pt · cellMargin left 141 = 1.41pt
 *               ⇒ 테두리 42.52pt · «글»은 43.93pt 가 옳다
 *     걷기 전   테두리 왼 42.49(맞다) · 첫 글 왼 49.24            → **+5.31pt**
 *               조각: border-left 2px(1.50) + padding-left 7px(5.25) = 6.75 vs 서식 1.41
 *     걷은 뒤   42.49 + 1.50 = 43.99                              → **+0.06pt** (테두리 두께 차뿐)
 *     쪽 수      27종 «움직인 서식 0종» — 맥 글꼴·리눅스 흉내(웹폰트) 두 판 모두
 *
 * 🔴 **여기에 서식 값을 «박지 마라».** 1.88px 도 5.10pt 도 안 된다 —
 *   cellMargin 은 서식마다 다르고 한 서식 «안»에서도 갈린다(10종). 값을 싣는 것은
 *   렌더러가 그 칸의 cellMargin 을 **인라인 padding** 으로 내보내는 일이다(api 소유).
 *   여기서 하는 것은 **«우리가 만든 몫»을 걷는 것까지**다.
 *
 * ★ **네 방향을 다 걷는다.** 세로 3.75pt 와 가로 5.25pt 는 «같은 한 줄»이 만든 값이라
 *   가로만 걷으면 세로가 남고 그것을 다시 한 축으로 잡아야 한다. 실측이 둘 다 0종이라
 *   위험이 같은데 축 하나로 끝난다 — 축이 적을수록 무엇이 무엇을 바꿨는지 갈리기 쉽다.
 *     세로  글 top 87.45 → 83.70   (서식 83.61 · +0.09pt)
 *     가로  글 left 49.24 → 43.99  (서식 43.93 · +0.06pt)
 *   남는 것은 양쪽 다 «테두리 두께 차»뿐이다.
 * ⚠ 지면 «밖»(판형 없는 흐름 렌더)은 종전 그대로다 — 거기선 글이 테두리에 붙으면 읽기 어렵다.
 * ⚠ api 인라인이 붙기 «전» 구간에는 글이 테두리에서 0.06pt 자리에 선다. 지금(+5.31)보다
 *   서식에 가깝지만 그 구간 동안은 «서식보다도 붙어» 보인다 — 그 구간을 길게 두지 마라.
 */
.doc-preview .pg .box { margin: 0; padding: 0; }
/* 지면 안에서는 **빈 줄도 문서의 일부**다(표지 여백). 밖에서는 종전대로 접는다. */
.doc-preview .pg p:empty { display: block; height: 1.7em; margin: 0; }
/*
 * ★ [2026-08-15] 다만 **표 «칸 안»에서는 접는다.**
 *   위 규칙은 본문 빈 줄(표지 여백)을 살리려는 것이라 옳지만, 칸 안에서는 빈 문단마다 1.7em(=20.4px)이
 *   더해져 **칸 높이를 밀어 올린다.** 칸 높이는 서식이 인라인 `height:{n}pt` 로 이미 정해 두는데,
 *   내용이 넘치면 그 값이 «최소»가 되어 행이 늘어난다 — 미리보기가 문서보다 길어지는 형태다.
 *
 *   실측(site:1 결재란 · 배포된 앱 안에서 잼 · 칸 = 「빈 문단 + 글 문단」):
 *     접기 전  칸 41.9pt · 표 83.8pt      접은 뒤  칸 **34.02pt** · 표 **68.04pt** = 문서(34.02/68.0) 정확 일치
 *   한글도 그 칸을 «고정 높이 안에 한 줄»로 그린다(원본 `Preview/PrvImage.png` 확인).
 *
 * ⚠ 이 규칙이 **더 구체적**이어야 위 `.pg p:empty` 를 이긴다(0,4,1 > 0,3,1). 선택자를 줄이지 말 것.
 * ⚠⚠ [2026-08-17 정정 — 이 자리에 «낡은 근거»가 있었다]
 *   종전 주석: 「`TemplatePreview.tsx` PRINT_CSS 에는 `.pg p:empty` 자체가 없어 이 규칙도 두지 않는다」.
 *   **둘 다 사실이 아니게 됐다.** ① 그 CSS 는 P0 에서 `features/doc-preview/print-document.ts` 로
 *   옮겨졌고 ② 2026-08-15 에 `.pg p:empty{display:block}` 이 **인쇄 쪽에도 생겼다.**
 *   그런데 짝 규칙인 이 줄은 안 따라가서, **인쇄에서만 표 칸이 부풀었다** —
 *   실측(19종 · 화면 ↔ 인쇄 산출물의 같은 칸): **1,986칸 중 943칸**의 높이가 달랐다(hq-6 5px→25px).
 *   → 2026-08-17 에 `print-document.ts` 의 `pagedPrintCss` 에 **짝을 맞춰 넣었다**(잔차 ±1px 5칸).
 *   **이제 두 벌은 «같다» — 일부러 다른 곳이 아니다.** 근거는 그쪽 `MISS_PEMPTY_NOTE`.
 */
.doc-preview .pg td p:empty, .doc-preview .pg th p:empty { display: none; }
/* 인쇄·뷰어에서는 종이 위에 또 종이를 그리지 않는다. */
@media print {
  .doc-preview .pgw { background: none; padding: 0; }
  .doc-preview .pgs { gap: 0; }
  .doc-preview .pg { box-shadow: none; }
  .doc-preview .pg[data-pgno]::before { content: none; }
}
/*
 * 🔴 [2026-09-13 사용자 신고 「낱말이 쪼개진다」] `break-word` 는 한글을 «음절»에서 끊는다
 *   — 「설치」가 「설」/「치」로 갈렸다. 한글은 낱말 사이(빈칸)에서 끊어야 읽힌다.
 *   keep-all      낱말을 안 쪼갠다(한글 규약)
 *   overflow-wrap 그래도 «한 낱말이 칸보다 길면» 그때만 쪼갠다 — 넘침을 막는 안전장치다
 *   ⚠ 둘을 «함께» 쓴다. keep-all 만 쓰면 긴 영문·URL 이 칸을 넘어 종이 밖으로 나간다.
 */
.doc-preview p { margin: 0 0 7px; word-break: keep-all; overflow-wrap: break-word; }
.doc-preview p:empty { display: none; }

/* 제목 — 문서의 개요 수준을 그대로. */
.doc-preview h1, .doc-preview h2, .doc-preview h3,
.doc-preview h4, .doc-preview h5, .doc-preview h6 {
  margin: 16px 0 8px; font-weight: 800; color: #1c2733; line-height: 1.5; word-break: break-word;
}
.doc-preview h1 { font-size: 18px; }
.doc-preview h2 { font-size: 16px; }
.doc-preview h3 { font-size: 15px; }
.doc-preview h4, .doc-preview h5, .doc-preview h6 { font-size: 14px; }

/* 목록 — 문장 앞 기호(번호·글머리표)를 왼쪽에 걸어 본문과 정렬한다(행잉 인덴트). */
.doc-preview .li { position: relative; padding-left: 20px; margin-bottom: 5px; }
.doc-preview .mk { position: absolute; left: 0; top: 0; font-weight: 700; color: #46505f; }

/* 표 */
/* table-layout:auto — 병합(colspan/rowspan)이 들어가면 fixed 는 열 폭이 밀린다. */
.doc-preview table { width: 100%; border-collapse: collapse; margin: 10px 0 16px; font-size: 12px; table-layout: auto; }
.doc-preview th, .doc-preview td {
  border: 1px solid #d0d7de; padding: 6px 8px; vertical-align: top;
  line-height: 1.6; word-break: keep-all; overflow-wrap: break-word;
}
/*
 * ★ [2026-08-15] **칸 «안»의 문단에는 아래 여백을 주지 않는다.**
 *   `.doc-preview p { margin: 0 0 7px }` 는 본문 문단 간격이라 맞지만, 표 칸에서는
 *   **우리가 지어낸 여백**이 칸 높이에 그대로 더해져 문서보다 행이 커진다.
 *   칸 높이는 서식이 이미 정해 인라인 `height:{n}pt` 로 나가는데, 그 안에 든 내용이 넘치면
 *   `height` 가 최소값이 되어 행이 늘어난다 — 그래서 「미리보기가 문서보다 길다」가 된다.
 *
 *   실측(site:1 · 배포된 앱 안에서 잼):
 *     표1 행  문서 26.93pt → 미리보기 31.0pt   (한 줄 19.2px + **여백 7px** + 안쪽여백 12 + 테두리 2)
 *     표2 행  문서 34.02pt → 미리보기 47.1pt
 *   여백을 걷으면 내용이 19.2+14=33.2px 라 서식이 준 높이 안에 들어가고 행이 그 값 그대로 선다.
 *
 * ⚠ 줄 간격(line-height)은 **문서에서 읽는다**(`preview.ts` 가 `hh:lineSpacing` PERCENT 를
 *   인라인으로 낸다) — 지어낸 값이 아니므로 건드리지 않는다.
 * ⚠ `TemplatePreview.tsx` 의 PRINT_CSS 에 **같은 규칙 두 벌**이 있다. 한쪽만 고치면 화면과 종이가 갈린다.
 */
.doc-preview th p, .doc-preview td p { margin-bottom: 0; }
/*
 * ★ [2026-08-15] `th` 전용 시각 규칙(배경 #f2f5f9 · 굵게 · 좌측정렬)을 **걷어냈다.**
 *   서식 미리보기의 배경·정렬은 **문서가 이미 갖고 있다**(`preview.ts` 가 borderFill 을 인라인
 *   style 로 내보낸다). 여기서 기본값을 칠하면 **문서에 없는 회색 띠**가 생겨 미리보기가 문서와
 *   달라진다 — 실제로 site:1 의 「건설업체명 | 값 | 공사명 | 값」 행과 결재란 첫 줄이 그랬다.
 *   ⚠ 뿌리는 `preview.ts` 가 「첫 행 = 헤더」로 «추측»해 `th` 를 내보내던 것이고 그쪽을 고쳤다
 *     (이제 전부 `td`). 이 규칙을 되살리면 그 추측이 없어도 회색이 돌아온다.
 *   ⚠ 이 파일과 `TemplatePreview.tsx` 의 PRINT_CSS 는 **같은 규칙 두 벌**이다(색까지 서로 달랐다 —
 *     #f2f5f9 vs #eee). 한쪽만 고치지 말 것.
 */

/* 런 서식 */
.doc-preview b { font-weight: 700; }
.doc-preview u { text-decoration: underline; text-underline-offset: 2px; }
.doc-preview s { text-decoration: line-through; opacity: .7; }

/* [hqdoc-06] 항목의 **입력 상태 3색** — 미리보기의 핵심 신호다. 셋은 반드시 서로 달라야 한다.
     · .v      (입력됨)      초록 — 사용자가 채운 값
     · .v.ex   (예시 그대로) 주황 — 서식에 예시로 박혀 있던 원문. 안 고치면 이대로 문서에 나간다.
     · .miss   (빈칸)        빨강 점선 — 값도 예시도 없어 항목 라벨이 대신 박힌 자리
   ⚠️ 종전엔 .v.d(예시)와 .miss(빈칸)가 **같은 주황**(#fef3e2/#92400e)이라 문서에서 구분이 안 됐다.
      예시는 `○○주식회사`처럼 그럴듯한 문장으로 찍혀 빈칸보다 놓치기 쉬우므로, 색을 갈라 둘 다 세운다. */
.doc-preview .v { background: #e4f6ea; color: #14663c; padding: 0 3px; border-radius: 3px; }
.doc-preview .v.ex {
  background: #fdf0dc; color: #92400e; font-weight: 700;
  box-shadow: inset 0 -2px 0 #e0a44e;
}
.doc-preview .miss {
  background: #fdeaea; color: #a12020; font-weight: 700; padding: 0 5px; border-radius: 3px;
  border: 1px dashed #dd9a9a; font-size: 11px; white-space: nowrap;
}

/* [hqdoc-05] 값 매핑 — "이 값이 어느 항목인가"를 문서 안에서 바로 읽게 한다.
   서버가 치환 자리마다 실어 보낸 data-label 을 채워진 값 옆에 칩으로 건다(.map 일 때만).
   .miss 는 이미 라벨 자체가 본문이라 칩을 붙이지 않는다(중복).
   ⚠️ [data-label] 로 한정 — 매트릭스 표 셀은 data-label 이 없다(모든 셀에 칩이 붙으면 표가 뭉갠다).
      한정하지 않으면 content:attr() 이 빈 문자열이 되어 **셀마다 색 조각**만 남는다. */
.doc-preview .v, .doc-preview .miss { scroll-margin-block: 90px; }
.doc-preview.map .v[data-label]::after {
  content: attr(data-label);
  margin-left: 4px; padding: 0 3px; border-radius: 2px;
  background: #14663c; color: #fff;
  font-size: 9px; font-weight: 800; white-space: nowrap; vertical-align: 1px;
}
.doc-preview.map .v.ex[data-label]::after { background: #92400e; content: '✎ ' attr(data-label); }

/* [2026-07-15] 완성 문서 뷰(대표 감독 등 읽기전용) — 편집용 필드 신호를 **전부** 무력화한다.
   작성 미리보기는 채워진 값(초록 .v)·예시(주황 .v.ex)·빈칸(빨강 .miss)을 색으로 구분해 "확인·수정"을 돕지만,
   비치 문서를 확인하는 화면은 **완성된 문서 그대로**여야 한다 — 색 강조도 라벨 칩도 없이 인쇄물과 동일하게 보인다.
   (인쇄 창의 PRINT_CSS 와 같은 규칙 — 화면 뷰어에도 동일 적용.) */
/* ★★ [2026-08-17 · 사용자 신고 「같은 문서가 화면마다 쪽 수가 다르다」]
   **색만 지운다 — 기하(padding·border)는 그대로 둔다.**

   종전 `border: 0; padding: 0;` 은 색이 아니라 **자리**를 바꿨다. `.v` 는 `padding: 0 3px`,
   `.miss` 는 `padding: 0 5px` + `border: 1px dashed` 라, 지우면 줄의 폭·높이가 달라진다.
   그런데 `clean` 은 **문서함에만** 붙고 문서카드 미리보기 모달에는 안 붙는다 →
   **같은 문서가 두 화면에서 다르게 흐르고, 다르게 흐르니 다르게 나뉜다.**

   실측(hq:8 안전보건관리규정 · 지면 794×1123 · `.pgc` 643×971 · 글꼴 13px/20.8px 로 «양쪽 동일»):
   ```
     문서함(clean 있음)  46쪽      모달(clean 없음)  45쪽
     처음 갈리는 자리 17쪽 — 문서함은 머리 표만 남기고(78px) 모달은 한 줄 더 얹었다(118px)
   ```
   조상 체인에서 다른 것은 `clean` 하나뿐이었다.

   ⚠ **쪽나눔은 «보이기 설정»에 흔들리면 안 된다.** 어느 화면에서 열든 같은 종이가 나와야 한다
     — 그래야 「화면에서 본 그 쪽」을 인쇄한다는 이 시스템의 약속이 선다.
   ⚠ 그래서 투명하게 만들 뿐 **없애지 않는다**: `border-color: transparent` 는 1px 자리를 지키고,
     `padding` 은 배경이 없으면 어차피 안 보인다. 화면에 «보이는 것»은 종전과 같다(색·칩 제거). */
.doc-preview.clean .v, .doc-preview.clean .v.ex, .doc-preview.clean .miss {
  background: none; color: inherit; box-shadow: none; border-color: transparent;
}
.doc-preview.clean .v[data-label]::after, .doc-preview.clean .v.ex[data-label]::after { content: none; }

/* 확인 필요 자리만 남기고 본문을 흐리게 — 41자리짜리 서식(취업규칙)에서 눈으로 훑는 대신 색으로 찾는다.
   opacity 대신 color 를 쓴다: 부모 opacity 는 자식이 되돌릴 수 없어 칩까지 같이 흐려진다. */
.doc-preview.dim { color: #c8ced6; }
.doc-preview.dim th, .doc-preview.dim td { border-color: #e8ecf1; }
.doc-preview.dim .mk { color: #ccd2da; }
.doc-preview.dim .v { background: #f1f4f7; color: #aab3bd; box-shadow: none; }
.doc-preview.dim .v.ex { background: #fdf0dc; color: #92400e; box-shadow: inset 0 -2px 0 #e0a44e; }
.doc-preview.dim .miss { background: #fdeaea; color: #a12020; border-color: #dd9a9a; }

/* 매핑 패널·이동 버튼이 지목한 자리 — 문서 안에서 튀어나오게. */
.doc-preview .v.hot, .doc-preview .miss.hot {
  outline: 2px solid #2a5db0; outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(42, 93, 176, .16);
}
/* 「다음 확인 필요」로 착지한 자리 — hover 강조(.hot)와 달리 잠깐 맥동해 눈이 따라오게 한다. */
.doc-preview .v.seek, .doc-preview .miss.seek {
  outline: 2px solid #a12020; outline-offset: 1px;
  animation: seekPulse 1.1s ease-out 2;
}
.doc-preview .v.ex.seek { outline-color: #b8700f; }
@keyframes seekPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(161, 32, 32, 0); }
  35% { box-shadow: 0 0 0 5px rgba(161, 32, 32, .22); }
}
@media (prefers-reduced-motion: reduce) {
  .doc-preview .v.seek, .doc-preview .miss.seek { animation: none; }
}

/* ══ 홈 대시보드 「현장 리스크 레이더」 (features/dashboard/KoreaRadar.tsx) ══════════
   지도는 인라인 SVG — 외부 타일·이미지 없음. 색은 tailwind.config 토큰과 동일 계열. */
/* (레이더 스윕 회전 키프레임은 제거됨 — SMIL <animateTransform> 으로 대체. KoreaRadar.tsx 참조) */
@keyframes krPing  { 0% { transform: scale(.5); opacity: .65; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes krBlipIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  55%  { opacity: 1; transform: translate(-50%, -50%) scale(1.14); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* 도별 면 — 그 도의 미비 합계로 칠한다. 현장 없는 도끼리도 옅은 톤차로 구분된다.
   등장은 «투명도만» (발열 · 2026-07-30 · 아래 krFade 주석 참조). */
.kr-prov { stroke: none; animation: krFade .5s ease-out both; }
.kr-prov.p-none { fill: #e9eff7; }
.kr-prov.p-none:nth-of-type(even) { fill: #e2eaf4; }
.kr-prov.p-good { fill: #dff0e6; }
.kr-prov.p-warn { fill: #fbeed8; }
.kr-prov.p-crit { fill: #f8dedd; }
/* 도 경계 — 해안선보다 얇고 옅게(경계가 해안선보다 튀면 안 된다). */
.kr-pborder { fill: none; stroke: #a6b6cc; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
  animation: popIn .5s cubic-bezier(.22, .61, .36, 1) both; }
/* 해안선 — dashoffset 기본 0(= 완전히 그려진 상태). 드로잉은 컴포넌트가 WAAPI 로 얹는다. */
.kr-coast { fill: none; stroke: #7e97ba; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.kr-plabels text { fill: #6f7f93; font-size: 10px; font-weight: 800; text-anchor: middle;
  paint-order: stroke; stroke: #fff; stroke-width: 2.6; stroke-linejoin: round; }
.kr-plabels { opacity: 0; animation: popIn .6s 1.5s forwards; }
.kr-cities circle { fill: #a8b4c4; }
.kr-cities text { fill: #8d99a9; font-size: 9px; font-weight: 700; }
.kr-cities { opacity: 0; animation: popIn .6s 1.9s forwards; }
/* 회전 스윕은 CSS 가 아니라 **SMIL(<animateTransform>)** 로 돈다 — KoreaRadar.tsx 참조.
   iOS(WebKit) 에서 CSS transform 경로가 회전 중심 해석 때문에 반복 실패했다.
   SMIL 은 중심을 좌표로 직접 주므로(`0 400 400`) 해석의 여지가 없다.
   「동작 줄이기」는 CSS 로 끌 수 없어 컴포넌트가 JS 로 판정해 엘리먼트를 렌더하지 않는다. */
.kr-ringlbl { position: absolute; transform: translate(-50%, -50%); font-size: 9.5px; font-weight: 800;
  color: #9aa4b2; background: rgba(255, 255, 255, .9); padding: 0 4px; border-radius: 4px; }
/* 본사 = 링 중심 십자표(라벨 없음 — 인근 현장 블립에 가리므로 범례로 설명). */
.kr-hq { position: absolute; transform: translate(-50%, -50%); z-index: 2; width: 22px; height: 22px; }
.kr-hq::before, .kr-hq::after { content: ''; position: absolute; background: #1c3c6e; opacity: .85; }
.kr-hq::before { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.kr-hq::after  { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.kr-blip { position: absolute; transform: translate(-50%, -50%); border-radius: 9999px; z-index: 4;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; cursor: pointer;
  animation: krBlipIn .6s cubic-bezier(.22, .61, .36, 1) both; transition: filter .25s ease; }
/* 누르면 그 현장이 있는 곳으로 확대된다(KoreaRadar `nextZoomOf`).
   ⚠ 더 확대할 수 없는 블립에는 `cursor: pointer` 를 «떼야» 한다 —
     커서가 「누를 수 있다」고 약속하고 아무 일도 안 하면 고장으로 읽힌다.
     (종전에는 핸들러가 아예 없는데도 모든 블립에 pointer 가 걸려 있었다.) */
.kr-blip.kr-blip-static { cursor: default; }
.kr-blip[role="button"]:hover { filter: brightness(1.06); }
.kr-blip[role="button"]:focus-visible { outline: 2px solid #1c3c6e; outline-offset: 3px; }
/* 파문·점등은 **기본 정지**이고 .kr-motion 이 붙었을 때만 돈다.
   미디어쿼리로 끄면 사용자가 되돌릴 방법이 없다 — 실제로 아이폰의 「동작 줄이기」 때문에
   화면이 고장난 것처럼 보였다. 컴포넌트가 OS 설정 + 사용자 선택을 합쳐 이 클래스를 붙인다. */
.kr-ping { position: absolute; inset: 0; border-radius: 9999px; border: 2px solid currentColor; }
.kr-motion .kr-ping { animation: krPing 2.1s ease-out infinite; }
/* 스윕 통과 점등 — 스윕과 같은 5.2s 주기. 위상은 컴포넌트가 방위각으로 계산한 음수 delay 가 잡는다.
   키프레임 피크를 0% 에 두는 것이 핵심(88% 에 두면 delay = −T 와 어긋나 한 바퀴 뒤에 번쩍인다).
   숫자가 든 블립 본체에 filter 를 걸면 글자가 번지므로 테두리 링만 켠다. */
.kr-lit { position: absolute; inset: -5px; border-radius: 9999px; border: 2px solid currentColor;
  opacity: 0; pointer-events: none; }
.kr-motion .kr-lit { animation: krBlipLit 5.2s linear infinite; }
@keyframes krBlipLit {
  0%   { opacity: .92; }
  5%   { opacity: .60; }
  12%  { opacity: .16; }
  20%, 100% { opacity: 0; }
}
/* 라벨은 블립 바깥 「지정 방향」에 딱 붙인다 — 수도권처럼 밀집해도 서로 비껴간다. */
.kr-tag { position: absolute; font-size: 10px; font-weight: 800; color: #1c2733;
  background: rgba(255, 255, 255, .94); border: 1px solid #d0d7de; border-radius: 6px;
  padding: 1px 6px; white-space: nowrap; pointer-events: none; }
.kr-tag-right { left: 100%; margin-left: 6px; top: 50%; transform: translateY(-50%); }

/* ══════════════════════════════════════════════════════════════════════════
   비상 모드 — 레이더 (설계: docs/design/mockup-ceo-emergency-radar-20260728.html
                        실화면 시안: mockup-ceo-dashboard-emergency-20260728.html)

   현장소장이 «비상 버튼»으로 보고하면(report_channel='sos') 레이더가 이 모드로 간다.

   ★ 원칙 — 낮추는 것은 «다른 현장»뿐이다
     지도·격자·거리 링에는 아무것도 걸지 않는다. 지형이 흐려지면 대표가
     「어디쯤인가」를 잃는다. 블러도 쓰지 않는다 — 디밍(opacity)만 쓴다.
   ★ 색 — 짙은 적색 #8e1a10. 형광 적색으로 올리면 카드의 「위험」 알약(#dc2626)과 겨룬다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 다른 현장 — 흐리게. ⚠ !important 가 필수다:
   .kr-blip 의 등장 애니메이션 krBlipIn 이 `fill: both` 라, 끝난 뒤 100% 키프레임의
   opacity:1 이 «애니메이션 오리진»으로 일반 선언을 이긴다(시안에서 실제로 안 먹었다). */
/* 비상 대응 중 — **지도만** 흐리게(사용자 지시 2026-07-31).
   현장 카드는 손대지 않는다(종전 `.eg-card-dim` 은 제거 — 대표가 다른 현장 상태를 계속 읽어야 한다).
   ⚠ 블러는 이 SVG 하나에만 건다. 스윕·블립을 함께 감싸면 매 프레임 재래스터화가 일어난다(발열). */
.kr-map.kr-eg-blur { filter: blur(3px) saturate(.6); transition: filter .55s ease; }
@media (prefers-reduced-motion: reduce) { .kr-map.kr-eg-blur { transition: none; } }

.kr-eg-dim { opacity: .22 !important; }
.kr-eg-dim .kr-tag { opacity: .25 !important; }

/* 비상 블립 — 유일하게 선명하고, 유일하게 이 색이다. */
.kr-blip.kr-eg { border: 2.5px solid #fff; z-index: 20; font-size: 19px; font-weight: 900; opacity: 1 !important; }
.kr-motion .kr-blip.kr-eg { animation: krEgPulse 1.8s ease-in-out infinite !important; }
@keyframes krEgPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.06); }
}

/* 파문 — 원본 시안 ripple(r 14→52 · #c0392b · 1.8s)을 HTML 좌표계로 옮긴 것. 2겹 시차 .6s:
   한 겹이면 「점이 커졌다」로 보이고, 두 겹이어야 «퍼진다»로 읽힌다. */
.kr-blip.kr-eg .kr-ping { border-color: #c0392b; border-width: 2.5px; opacity: 0; }
.kr-blip.kr-eg::after {
  content: ''; position: absolute; inset: 0; border-radius: 9999px;
  border: 2.5px solid #c0392b; opacity: 0; pointer-events: none;
}
.kr-motion .kr-blip.kr-eg .kr-ping { animation: krEgRipple 1.8s ease-out infinite; }
.kr-motion .kr-blip.kr-eg::after   { animation: krEgRipple 1.8s ease-out .6s infinite; }
@keyframes krEgRipple { 0% { transform: scale(1); opacity: .55 } 100% { transform: scale(3.7); opacity: 0 } }

/* 조준 링 — 「시스템이 이 지점을 물고 있다」. 모션을 꺼도 링 자체는 남는다. */
.kr-blip.kr-eg::before {
  content: ''; position: absolute; inset: -13px; border-radius: 9999px;
  border: 2px dashed rgba(192, 57, 43, .72); pointer-events: none;
}
.kr-motion .kr-blip.kr-eg::before { animation: krEgSpin 3.6s linear infinite; }
@keyframes krEgSpin { to { transform: rotate(360deg) } }

/* 라벨 — 항상 펼친다. 글자는 안 움직인다(움직이는 글자는 강조가 아니라 방해다). */
.kr-blip.kr-eg .kr-tag {
  display: block; opacity: 1 !important; background: #8e1a10; color: #fff; border-color: #8e1a10;
  font-size: 11px; font-weight: 900; padding: 3px 8px; box-shadow: 0 6px 16px rgba(142, 26, 16, .42);
}

/* 스코프 테두리 — 원본 시안 .radarbox 값 그대로. 여기까지만 바꾼다. */
.kr-eg-scope { border-color: #e8b7ae !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, .10); }

/* ── 화면 밖·탭 비활성 정지 (발열 대책 B · 2026-07-29) ──────────────────────
   ★ «끄는» 게 아니라 «세우는» 것이다. animation-play-state 는 위상을 보존하므로
     돌아오면 멈춘 자리에서 이어서 돈다 — 비가 오다 멈췄다가 그 자리에서 다시 떨어진다.
     (요소를 언마운트했다 재장착하면 전부 0 위상에서 일제히 재시작해 「리셋」 티가 난다.)
   ⚠ animation-play-state 는 «상속되지 않는다» — 자손까지 명시해야 파티클·파문이 선다.
   ⚠ SMIL(스윕)은 이 속성으로 안 선다. KoreaRadar 가 pauseAnimations() 로 함께 세운다. */
/* ⚠⚠ 「전부(`*`) 세우기」로 짰다가 **지도가 통째로 사라지는 회귀**를 냈다(2026-07-29, 즉시 수정).
     `.kr-prov`·`.kr-pborder`(popIn both)·`.kr-plabels`·`.kr-cities`(opacity:0 → popIn forwards) 는
     **1회성 등장** 애니메이션이라, 시작 전에 세우면 0% 키프레임(opacity 0)에 얼어붙는다.
     탭이 백그라운드인 채로 열면 도 면·경계·라벨이 영영 안 그려진 것처럼 보인다.
   → **무한 반복만** 골라 세운다. 다행히 이 코드베이스의 무한 애니는 전부
     `.kr-motion`/`.wx-motion` 아래 특정 클래스에만 붙어 있어 열거가 가능하다.
     새 무한 애니를 추가하면 **여기에도 추가**해야 한다(안 하면 조용히 안 멈춘다). */
.kr-paused .kr-ping,
.kr-paused .kr-lit,
.kr-paused .kr-blip.kr-eg,
.kr-paused .kr-blip.kr-eg::before,
.kr-paused .kr-blip.kr-eg::after,
/* 날씨 파티클은 전부 이 세 컨테이너 안에서 생성된다(weatherParticles) */
.wx-paused .wx-far *, .wx-paused .wx-refl *, .wx-paused .wx-band *,
.wx-paused .wx-aura::after,
/* 비상 카드 — riseIn(등장)은 .eg-card 에 있으므로 «건드리지 않는다» */
.wx-paused .eg-card-slot::after,
.wx-paused .eg-badge,
.wx-paused .eg-el::before {
  animation-play-state: paused !important;
}

/* ── 비상 배너 · 비상 현장 카드 ─────────────────────────────────────────────
   레이더와 같은 언어(짙은 적색 #8e1a10 / #7f1710→#b8332a)를 쓴다.

   모션 게이트는 `prefers-reduced-motion: no-preference` 로 건다 — 레이더처럼
   사용자가 되돌릴 버튼이 없는 자리라, OS 설정을 그대로 따르는 편이 안전하다.
   ⚠ 그래도 **색·크기는 모션과 무관하게 남는다** — 정지 상태에서도 구분이 되어야 한다.
   ⚠ 읽어야 할 글자(현장명·사고유형·경과 숫자)는 움직이지 않는다. 점·배경만 움직인다. */
.eg-card {
  border: 1px solid #8e1a10; color: #fff;
  background: linear-gradient(160deg, #7f1710 0%, #b8332a 100%);
  box-shadow: 0 14px 34px rgba(142, 26, 16, .42);
  /* riseIn 을 직접 나열한다 — `.anim-rise` 와 같은 특정도라 뒤에 온 쪽이 통째로 이겨,
     둘을 함께 쓰면 등장 모션이 조용히 사라진다. */
  animation: riseIn .55s cubic-bezier(.22, .61, .36, 1) both;
}
/* ★ 글로우 링 — box-shadow 보간을 «미리 그린 링 + opacity» 로 바꿨다(2026-07-29 · 발열 대책 C).
   원본 50% 프레임의 추가분은 `0 0 0 6px`(블러 0 · spread 6) = **선명한 6px 링**이라
   border 6px 와 픽셀 단위로 같다 — 시각 결과 동일, 프레임당 페인트는 0.
   ⚠ .eg-card 는 overflow-hidden 버튼이라 ::after 가 잘린다. **래퍼**(.eg-card-slot)에 건다. */
.eg-card-slot { position: relative; }
.eg-card-slot::after {
  content: ''; position: absolute; inset: -6px; border-radius: 16px;
  border: 6px solid rgba(192, 57, 43, .18); opacity: 0; pointer-events: none;
}
/* ★ 경과 배지 — 배경색 보간 → 흰색 레이어 opacity. 흰 단색 위 알파 보간이라 **수학적으로 동일**하다. */
.eg-card .eg-el, .eg-banner .eg-el { background: none; position: relative; isolation: isolate; }
.eg-card .eg-el::before, .eg-banner .eg-el::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: #fff; opacity: .18;
}
/* 비상 중 «다른» 현장 카드 — 지우지 않고 낮춘다. 0.6s 로 «천천히» —
   순간적으로 흐려지면 화면이 고장난 것처럼 보인다. */
.eg-card-dim { opacity: .55; filter: saturate(.55); transition: opacity .6s ease, filter .6s ease; }

@media (prefers-reduced-motion: no-preference) {
  .eg-card-slot::after { animation: egEdgeGlowO 1.6s ease-in-out .55s infinite; }
  .eg-card .eg-badge { animation: egSiren 1.3s ease-in-out infinite; }
  .eg-card .eg-el::before, .eg-banner .eg-el::before { animation: egElO 1.6s ease-in-out infinite; }
  .eg-banner .eg-dot { animation: egSiren 1.1s ease-in-out infinite; }
}
@keyframes egEdgeGlowO { 0%, 100% { opacity: 0 } 50% { opacity: 1 } }
@keyframes egSiren { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .45; transform: scale(.86) } }
@keyframes egElO { 0%, 100% { opacity: .18 } 50% { opacity: .38 } }

.kr-tag-left  { right: 100%; margin-right: 6px; top: 50%; transform: translateY(-50%); }
.kr-tag-below { top: 100%; margin-top: 5px; left: 50%; transform: translateX(-50%); }
.kr-tag-above { bottom: 100%; margin-bottom: 5px; left: 50%; transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) {
  /* 스윕·파문·점등은 CSS 로 끄지 않는다 — 컴포넌트가 OS 설정과 사용자 선택을 합쳐
     .kr-motion 클래스 / SMIL 엘리먼트 렌더 여부로 제어한다(사용자가 되돌릴 수 있어야 한다).
     여기서는 되돌릴 필요가 없는 1회성 진입 모션만 끈다. */
  .kr-plabels, .kr-cities { opacity: 1; animation: none; }
}
/* 좁은 화면 — 스코프가 줄면 알약이 서로 겹쳐 뭉개진다.
   ★ 종전에는 알약을 **통째로 숨겼다**(현장명은 아래 현장 카드 목록이 책임진다는 판단).
     2026-07-30 사용자 지시로 **현장명만 남긴다** — 「시·군 · 현장명 위험도」에서 이름만 남기면
     폭이 1/2~1/3 이라 좁은 스코프에서도 겹치지 않는다(내용 판정은 KoreaRadar 의 `narrow`).
     위험도는 **블립 색**이, 미비 건수는 **블립 안의 숫자**가 이미 말하므로 잃는 정보가 없다.
   ⚠ 비상 알약은 아래 `.kr-blip.kr-eg .kr-tag` 가 따로 살린다 — 유형·경과는 대응 정보다. */
@media (max-width: 640px) {
  /* 폭을 클램프하지 않는다 — 현장 약칭은 41~54px 로 짧고(실측), 넘칠 일이 없다.
     ⚠ 여기서 한 번 헛발질했다: 알약 폭이 15~19px 로 재져서 `overflow: hidden` 탓이라 단정하고
       규칙을 넣었다 뺐는데, 진짜 원인은 **탭이 백그라운드라 등장 애니가 0% 키프레임
       (scale .35)에 얼어 있던 것**이었다(43px × 0.35 ≈ 15px). CSS 문제가 아니었다.
       → 알약 크기를 잴 때는 탭이 **foreground** 이고 `.kr-blip` 의 transform 이
         `matrix(1,0,0,1,…)` 인지 먼저 확인할 것. */
  .kr-tag { font-size: 9.5px; padding: 1px 4px; border-radius: 5px; }
  .kr-tag-right { margin-left: 4px; }
  .kr-tag-left { margin-right: 4px; }
  .kr-blip { font-size: 10px; }
  .kr-cities { display: none; }
  .kr-plabels text { font-size: 9px; stroke-width: 2.2; }
}
/* 겹쳐서 밀려난 블립의 실제 위치 표시 — 앵커 점 + 연결선(옮겨 그렸음을 숨기지 않는다). */
.kr-anchors line { stroke-width: 1.2; stroke-dasharray: 2 2; opacity: .75; }

/* ── [2026-07-29] 권역 확대 ────────────────────────────────────────────────
   viewBox 를 좁히면 **선 굵기와 글자 크기가 같이 확대된다** — 해안선이 굵어지고
   도 라벨이 커져 「지금 화면」이 아니게 된다. 두 가지로 되돌린다:
     · 선  = `vector-effect: non-scaling-stroke`(굵기를 화면 픽셀로 고정)
     · 글자 = 확대 배율(`--kr-z`)만큼 나눠 원래 크기로
   전국에서는 `--kr-z: 1` 이라 **계산 결과가 종전과 동일**하다(무변경). */
.kr-map .kr-coast, .kr-map .kr-pborder, .kr-map .kr-prov-focus,
.kr-map .kr-sido-edge, .kr-map .kr-sgg-line, .kr-map .kr-sgg-focus { vector-effect: non-scaling-stroke; }
.kr-map .kr-plabels text { font-size: calc(10px * var(--kr-z, 1)); stroke-width: calc(2.6px * var(--kr-z, 1)); }
.kr-map .kr-cities text { font-size: calc(9px * var(--kr-z, 1)); }

/* [B] 권역 클릭 — 2026-07-29 에는 `.kr-prov` 위에 «투명 히트 영역 한 겹»을 얹었다.
   2026-07-30 에 그 방식을 버렸다: 실경계로 바꾸니 같은 기하가 3벌(면·경계선·히트)이 되어
   전국 뷰 정점이 21,168 까지 갔다(실측). 지금은 **면 자체가 클릭 대상**이다 —
   아래 §`.kr-clickable` 참조. (`.kr-prov-hit`·`.kr-prov-focus` 는 제거했다.) */

/* 확대 중 다른 권역 블립 — **지우지 않고 낮춘다**. 어디에 있었는지는 남아야 한다.
   ★ `!important` 가 필수다. `.kr-blip` 의 등장 애니메이션 `krBlipIn` 이 `fill: both` 라,
     끝난 뒤 100% 키프레임의 `opacity: 1` 이 «애니메이션 오리진» 값으로 일반 선언을 이긴다.
     위 §370 이 `.kr-eg-dim` 에서 겪고 주석까지 남긴 함정인데 이 선언이 그대로 밟았다 —
     2026-07-29 배포분에서 «디밍이 전혀 안 걸리고 있었다»(격리 측정: 없으면 1, 있으면 .18).
     주석은 다음 선언까지 따라오지 않는다. */
.kr-blip.kr-zdim { opacity: .18 !important; filter: saturate(.5); }
.kr-blip.kr-zdim .kr-tag { opacity: .25 !important; }
.kr-anchors circle { opacity: .9; }

/* ── 레이더 배경 하늘의 «부드러운 전환» (useSkyFade · 2026-08-29 지시) ─────────
   종전에는 조건이 거짓이 되는 순간 겹이 언마운트돼 **한 프레임에** 사라졌다(「뚝뚝 끊긴다」).
   이제 겹을 남겨 두고 투명도로 오간다.
   ⚠ 들어올 때보다 «나갈 때»를 길게 둔다 — 나타남은 빠르고 사라짐은 여유 있는 편이 자연스럽다.
   ⚠ 지속시간을 인라인 style 로 주지 «않는다» — 그러면 아래 「동작 줄이기」가 못 이긴다.
     CSS 변수로 두고 미디어쿼리가 통째로 끄게 한다. */
.sky-fade { transition: opacity var(--sky-in, 420ms) cubic-bezier(.22,.61,.36,1); }
.sky-fade[data-out="1"] { transition: opacity var(--sky-out, 620ms) cubic-bezier(.4,0,.6,1); }
@media (prefers-reduced-motion: reduce) { .sky-fade { transition: none; } }

/* ── 현장카드 롤오버 → 그 현장의 블립 (KoreaRadar `hoverSiteId`) ────────────────
   목적은 「예쁘게」가 아니라 **찾을 수 있게**다 — 카드에 손을 올린 순간
   레이더 위 수십 개 점 가운데 «어느 것인지»가 즉시 보여야 한다.

   ★ 효과를 부모 `.kr-blip` 에 걸지 않고 «자식 한 겹»(.kr-hovmark)으로 얹는다.
     부모는 세 겹으로 잠겨 있다 — ①등장 애니메이션 `krBlipIn` 이 `fill: both` 라
     transform·opacity 를 「애니메이션 오리진」으로 잠그고(위 §.kr-zdim 주석의 그 함정)
     ②`boxShadow` 는 컴포넌트가 인라인으로 준다 ③`background` 도 인라인이다.
     자식 겹은 그 셋 중 무엇과도 다투지 않는다(`.kr-ping`·`.kr-lit` 이 쓰는 방식). */
.kr-hovmark { position: absolute; inset: -10px; border-radius: 9999px;
  border: 2.5px solid currentColor; background: rgba(255, 255, 255, .16);
  /* 흰 테를 한 겹 더 깔아 **어두운 지도 위에서도** 윤곽이 죽지 않게 한다. */
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 0 18px -2px currentColor;
  pointer-events: none; }
.kr-motion .kr-hovmark { animation: krHovMark 1.5s ease-in-out infinite; }
@keyframes krHovMark {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.16); opacity: .62; }
}
/* 강조 대상은 «위»로 올린다. z-index 는 krBlipIn 이 건드리지 않으므로 일반 선언으로 이긴다
   (비상 블립 `.kr-eg` 가 20 이라 그보다 높은 21). */
.kr-blip.kr-blip-hov { z-index: 21; filter: brightness(1.1) saturate(1.06); }
/* 낮춰 둔 블립이라도 «롤오버한 그 현장»이면 되살린다 — 안 되살리면 찾으라는 목적 자체가 깨진다.
   ⚠ 이 두 줄은 `.kr-eg-dim`·`.kr-zdim` **뒤에** 있어야 한다. 같은 특이도(0,2,0)라
     순서로 갈린다. 위로 옮기면 조용히 안 먹는다. */
.kr-blip.kr-blip-hov { opacity: 1 !important; }
.kr-blip.kr-blip-hov .kr-tag { opacity: 1 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   [2026-07-30] 실제 행정경계 + 시·군·구 3단계 확대
   설계: docs/design/map-city-zoom-20260730.md
   데이터: 국토지리정보원 「행정경계(시군구)」(CC BY) — 시도 17 · 기초자치단체 229

   원칙 — **현장이 있는 시·군·구만 「구분」된다.** 나머지는 「배경」이다.
          전부 칠하고 전부 이름을 달면 시·군을 나눈 의미가 없다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 전국 뷰의 시도 외곽선 — 해안선과 도 경계를 겸한다.
   시도 폴리곤이 그 시도 시·군·구의 «합집합»이라 외곽이 곧 해안선이다.
   별도 해안선 레이어를 두면 정밀도가 갈려 확대에서 어긋난다(18× 에서 실제로 폴리곤을 가로질렀다).
   ⚠ 그래서 종전 `.kr-coast`(1.7px)/`.kr-pborder`(1.1px) 의 «굵기 위계»는 없어졌다. */
.kr-sido-edge { fill: none; stroke: #8ea4c2; stroke-width: 1.35; stroke-linejoin: round; stroke-linecap: round; }

/* ★ 등장 연출을 «투명도만»으로 (발열 · 2026-07-30).
   popIn 은 opacity + transform:scale 을 함께 보간한다. SVG <path> 의 transform 은 합성되지 않아
   프레임마다 그 경로를 다시 래스터한다 — 전국 17면(6,939점)·확대 최대 44면에 걸리면 등장
   0.5초 동안 지도 전체가 매 프레임 재래스터된다. 투명도만 바꾸면 합성기가 처리한다.
   (0.5초짜리 스케일 팝은 지도에서 거의 보이지 않아 잃는 것이 없다.) */
@keyframes krFade { from { opacity: 0 } to { opacity: 1 } }

/* 시·군·구 면 */
.kr-sgg { stroke: none; animation: krFade .42s ease-out both; }
/* 현장 없는 시·군·구 — 시안 Q1 에서 고른 안(B: 면 균일 + 경계선만)이 기본.
   다른 안도 남겨 둔다(KoreaRadar 의 GHOST_MODE 상수 하나로 바뀐다). */
.kr-sgg.g-tint  { fill: #e7edf6; }
.kr-sgg.g-tint:nth-of-type(even) { fill: #e1e9f4; }
.kr-sgg.g-line  { fill: #eaf0f8; }
.kr-sgg.g-merge { fill: #e6ecf5; }
/* 현장 있는 시·군·구 — 그 시의 미비 합계로 칠한다(전국 뷰의 시도 색 규약과 동일). */
.kr-sgg.s-good { fill: #d7ecdf; }
.kr-sgg.s-warn { fill: #fae5c7; }
.kr-sgg.s-crit { fill: #f7d4d2; }
/* 경계선 — 현장 없는 시·군끼리는 «있는 듯 없는 듯», 현장 시는 «또렷하게». */
.kr-sgg-line { fill: none; stroke: #bcc9dc; stroke-width: .8; stroke-linejoin: round; }
.kr-sgg-line.g-merge { stroke: none; }
.kr-sgg-line.on { stroke: #2a5db0; stroke-width: 1.8; }
/* 3단계(시·군·구 하나) 확대 시 초점 표시.
   ⚠ 점선을 쓰지 않는다 — non-scaling-stroke 와 함께 쓰면 dash 길이가 배율만큼 늘어나
     18× 에서 통째로 «실선»으로 보인다(실측). 굵기로만 구분한다. */
.kr-sgg-focus { fill: none; stroke: #1c3c6e; stroke-width: 2.8; stroke-linejoin: round; }

/* ★ 클릭 대상은 «면 자체»다 — 투명 히트 영역을 따로 얹지 않는다.
   얹으면 같은 기하가 3벌(면·경계선·히트)이 되어 전국 뷰 정점이 21,168 까지 갔다(실측).
   hover 는 «색을 덮지 않고» 파란 테두리로 알린다 — 면 색이 위험도라서 덮으면 정보가 사라진다.
   (레벨 1 의 「현장 있는 시·군·구」와 같은 파란 테두리 언어를 쓴다.) */
.kr-map .kr-clickable { cursor: pointer; stroke: transparent; stroke-width: 0;
  vector-effect: non-scaling-stroke; transition: stroke .12s ease; }
.kr-map .kr-clickable:hover { stroke: #2a5db0; stroke-width: 2; }
/* 시·군·구 이름 — 현장 있는 시는 진하게. 확대 배율만큼 나눠 화면 크기를 고정한다. */
.kr-sgglbl { opacity: 0; animation: popIn .5s .34s forwards; }
.kr-sgglbl text { font-size: calc(9px * var(--kr-z, 1)); font-weight: 700; text-anchor: middle; fill: #8895a8;
  paint-order: stroke; stroke: #fff; stroke-width: calc(2.4px * var(--kr-z, 1)); stroke-linejoin: round; }
.kr-sgglbl text.on { fill: #17416f; font-weight: 900; font-size: calc(10.5px * var(--kr-z, 1)); }

/* ═══════════════════════════════════════════════════════════════════════════
   현장 카드 날씨 연출 + 위험도 오라 (시안 확정 2026-07-25)
   시안 = 상단 밴드(44px) + 하단 반사 + 전면 톤 · 바깥 위험도 = 오라 글로우

   ## 레이어 규율 (어기면 겹침이 터진다)
     0 하늘 / 1 원경·반사·톤 / 2 스크림 / 3 근경(밴드 안) / 4 정보 / 5 카드안 위험도바
     바깥 오라는 카드가 아니라 .wx-slot 래퍼에 붙는다 — 카드는 날씨를 자르려고
     overflow:hidden 이라 카드에 걸면 그 자리에서 잘린다.

   ## 모션
     .wx-motion 이 붙었을 때만 돈다(미디어쿼리로 끄면 사용자가 되돌릴 수 없다 —
     아이폰 「동작 줄이기」에서 화면이 고장난 것처럼 보였던 전례가 있다).
     완화 모드는 .wx-gentle 로 느리고 옅게.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 바깥 오라 래퍼 ── */
/* [2026-07-31] `display:flex` — 카드가 슬롯을 **가로로** 채우게 한다(세로는 내용만큼).
     ## 두 번 고쳤다 — 기록해 둔다
     ① 처음엔 그리드 항목(.wx-slot)이 행 높이만큼 늘어나는데 카드는 제 내용만큼만 커서,
        경고 스트립이 붙은 카드와 안 붙은 카드가 한 줄에 섞이면 짧은 카드 아래 빈 구역이 남고
        **오라만 그 자리를 감쌌다**(실측 카드 180px / 슬롯 284px = 93px).
     ② 그래서 카드를 늘리고 요약줄을 바닥에 붙였더니(mt-auto) 이번엔 **카드 안이 텅 비었다**
        (실측 내용 122px / 카드 266px = 중간 공백 약 130px). 사용자 지적 그대로다.
     → 결론: **늘리지 않는다.** 그리드에 `items-start` 를 걸어 카드가 제 내용만큼만 차지하고,
        경고가 있는 카드는 «높이»가 아니라 **테두리·바탕색으로 강조**한다(아래 .wx-alert). */
.wx-slot { position: relative; display: flex; padding: 6px; }
.wx-slot > .wx-aura { position: absolute; inset: 6px; border-radius: 12px; pointer-events: none; z-index: 0; }
.wx-slot > .card-lift, .wx-slot > button { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }
/* 정지 상태의 기본 그림자 — 모션이 꺼져도 등급이 색으로 남는다.
   [2026-08-03·사용자 지시] **번짐 축소** — blur·spread 를 절반 안팎으로 줄인다.
     danger  7px/1  → 4px/0
     caution 6px/1  → 3px/0
     low     5px/0  → 3px/0
   색(등급 구분)은 건드리지 않는다 — 줄이라고 한 것은 «번짐»이지 «색»이 아니다.
   spread 를 0 으로 내린 이유: 1px 은 카드 테두리 바로 바깥에 «두 번째 선»처럼 보여
   3열 그리드에서 카드 경계가 두꺼워 보이는 주범이었다. */
.wx-r-danger  > .wx-aura { box-shadow: 0 0 4px 0 rgba(220, 38, 38, .30); }
.wx-r-caution > .wx-aura { box-shadow: 0 0 3px 0 rgba(217, 131, 36, .22); }
.wx-r-low     > .wx-aura { box-shadow: 0 0 3px 0 rgba(31, 122, 77, .16); }
/* ★ 맥동을 «최대 글로우 레이어의 opacity» 로 바꿨다(2026-07-29 · 발열 대책 C).
   종전엔 box-shadow 의 blur(6→22px)·spread(1→7px) 자체를 보간해, 매 프레임 가우시안
   블러를 CPU 로 다시 래스터했다 — 날씨와 무관하게 **모든 현장 카드에서 상시**. 발열의 바닥값이었다.
   지금은 최대 글로우를 ::after 에 한 번만 그려 두고 opacity 만 왕복한다(컴포지터).
   ⚠ 원본은 그림자 «경계가 자라는» 느낌인데 opacity 만으로는 크기가 고정이라 인상이 다르다
     → scale(.982→1) 을 함께 걸어 «퍼져 나가는» 느낌을 되살린다(여전히 합성 전용).
   정지 상태의 기본 글로우(위 .wx-r-* > .wx-aura)는 그대로 둔다 — 모션이 꺼져도 등급색이 남는다. */
.wx-slot > .wx-aura::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none;
}
/* [2026-08-03·사용자 지시] 맥동 글로우도 같은 비율로 축소 — 22/7 → 11/2 · 15/4 → 8/1 · 10/2 → 6/1.
   ⚠ 이 값은 «최대» 글로우다. 실제로 보이는 세기는 opacity 0→1 왕복이라, 여기를 줄이면
     맥동의 진폭도 함께 줄어든다(멎는 것은 아니다 — 등급별 속도차는 그대로). */
/* [2026-08-12·사용자 지시] **위험 등급만** 맥동 크기를 줄인다.
   퍼짐 11/2 → 9/1(spread 절반) · 부풀기 .982→1 을 .990→1 로(진폭 1.8% → 1.0%).
   ⚠ 색·불투명도(.55)·주기(1.6s)는 그대로 — 「위험=빠르고 강하게」라는 등급 서열은 유지한다.
   ⚠ 주의(8/1)보다는 여전히 커야 한다. 9/1 이 그 하한이다 — 더 줄이면 위험이 주의보다 작아진다. */
.wx-r-danger  > .wx-aura::after { box-shadow: 0 0 9px 1px rgba(220, 38, 38, .55); --wx-aura-s: .990; }
.wx-r-caution > .wx-aura::after { box-shadow: 0 0 8px 1px rgba(217, 131, 36, .42); }
.wx-r-low     > .wx-aura::after { box-shadow: 0 0 6px 1px rgba(31, 122, 77, .26); }
/* 위험=빠르고 강하게 · 주의=느리고 약하게 · 낮음=아주 느리고 옅게 */
.wx-motion .wx-r-danger  > .wx-aura::after { animation: wxAuraO 1.6s cubic-bezier(.42,0,.58,1) infinite; }
.wx-motion .wx-r-caution > .wx-aura::after { animation: wxAuraO 3.4s cubic-bezier(.42,0,.58,1) infinite; }
.wx-motion .wx-r-low     > .wx-aura::after { animation: wxAuraO 6.5s cubic-bezier(.42,0,.58,1) infinite; }
/* 부풀기 시작 배율을 변수로 뺐다 — 등급마다 «맥동 크기»를 따로 줄일 수 있게(2026-08-12).
   기본 .982 는 종전 그대로라 주의·낮음은 한 픽셀도 안 바뀐다. */
@keyframes wxAuraO { 0%, 100% { opacity: 0; transform: scale(var(--wx-aura-s, .982)); }
                     50%      { opacity: 1; transform: scale(1); } }
/* 완화 모드 — 맥동 폭을 줄이고 주기를 늘린다(끄지는 않는다) */
.wx-gentle .wx-r-danger  > .wx-aura::after { animation-duration: 3.4s; }
.wx-gentle .wx-r-caution > .wx-aura::after { animation-duration: 6s; }
.wx-gentle .wx-r-low     > .wx-aura::after { animation: none; }

/* ── 카드 레이어 ── */
.wx-card { position: relative; overflow: hidden; isolation: isolate;
  /* [2026-08-04·사용자 지시] 상단 날씨 연출 영역 축소 — 44 → 32px.
     본문 상단 패딩이 `calc(var(--wx-band) + 10px)` 라 이 값 하나로 카드 전체가 12px 짧아진다.
     ⚠ 아래 `.wx-refl`(반사) 높이도 함께 줄인다 — 밴드보다 반사가 두꺼우면 뒤집힌 그림이
       본문 글자 위로 올라와 대비를 깎는다. */
  --wx-band: 32px;
  /* 원경 낙하 거리 — 종전 `top: 114%`(카드 높이 기준)를 대체한다.
     [2026-07-31] 200px → **330px**. 날씨 경고 스트립(home-09b)이 붙으면서 카드가 커졌다
     (실측 266~272px · 근거 없는 값이 아니라 혼재 상태 재현 측정치). 200px 그대로면
     위 주석이 예고한 대로 **눈·비가 바닥에 닿기 전에 사라진다**.
     330 / 272 ≈ 121% 로 원설계(114%)에 가깝게 되돌린다.
     ⚠ 카드가 330px 보다 커지면 같은 증상이 재발한다 — 그때 이 값을 다시 올려라. */
  --wx-fall: 330px; }
.wx-sky, .wx-far, .wx-scrim, .wx-near, .wx-tint, .wx-refl { pointer-events: none; }
.wx-sky   { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.wx-far   { position: absolute; inset: 0; z-index: 1; overflow: hidden; filter: blur(1.1px); opacity: .5; }
.wx-tint  { position: absolute; inset: 0; z-index: 1; opacity: .1; }
/* 하단 반사 — 밴드 아래에 유리처럼 뒤집혀 비친다 */
.wx-refl  { position: absolute; left: 0; right: 0; top: var(--wx-band); height: 20px; z-index: 1;
  transform: scaleY(-1); opacity: .32; filter: blur(1.4px); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000);
          mask-image: linear-gradient(180deg, transparent, #000); }
/* 스크림 — 본문 구간을 흰색으로 눌러 글자 대비를 보장한다(.86 이상 구간에만 글자를 놓는다) */
.wx-scrim { position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 40%,
    rgba(255,255,255,.72) 52%, rgba(255,255,255,.96) 72%, #fff 100%); }
.wx-band  { position: absolute; left: 0; right: 0; top: 0; height: var(--wx-band); overflow: hidden;
  z-index: 3; box-shadow: inset 0 -1px 0 rgba(255,255,255,.45); }
.wx-bandline { position: absolute; left: 0; right: 0; top: var(--wx-band); height: 1px; z-index: 3;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)); }

/* 오늘 기상 배지 — [2026-08-04·A안] 본문 날씨 줄을 대체한다. 밴드 «위»에 얹어 본문 세로를 안 먹는다.
   ⚠ z-index 는 밴드(3)·본문(4)보다 위여야 파티클에 안 묻힌다.
   ⚠ 흰 반투명 바탕은 필수 — 밴드가 맑음(밝음)일 때도 어둠(비)일 때도 글자가 읽혀야 한다. */
.wx-badge { position: absolute; top: 7px; right: 7px; z-index: 5;
  display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 999px;
  background: rgba(255,255,255,.92); box-shadow: 0 1px 3px rgba(16,32,64,.16);
  font-size: 10px; font-weight: 800; color: #2f4d70; line-height: 1; pointer-events: none; }
.wx-badge svg { color: #3d5b7e; }
.wx-badge b { font-weight: 800; font-variant-numeric: tabular-nums; }
/* 경고 점 — 「무슨 경고인지」는 title 에만 있다(A안이 버린 것). 여기선 «있다»만 말한다. */
.wx-badge-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.wx-body  { position: relative; z-index: 4; }

/* ── 날씨 경고 카드 강조 ── [2026-07-31·사용자 지시]
   「주의·작업중지 판정이 있는 현장 카드를 강조해 달라」.
   ⚠ 바깥 오라(.wx-r-*)는 **현장 위험도** 축이라 색이 겹치면 두 축이 섞여 읽힌다.

   [2026-08-02·사용자 지시] 「날씨 부분이 위험도랑 구분되게」 — 종전의 «안쪽 링»으로는
   부족했다. 링 색이 judgementBadge 이고 그 팔레트가 **위험도 3색과 같은 값**이라
   (stop #dc2626 = 위험 #dc2626 · caution #c2620b ≈ 주의 #d98324), 결국
   「붉게 테두리 쳐진 카드」가 위험한 현장인지 비 오는 현장인지 알 수 없었다.
   → 카드 전체를 색으로 두르는 것을 **그만둔다.** 강조는 중립 그림자 + 기상 축이
     소유한 두 자리(밴드 밑줄 · 날씨 패널 왼쪽 모서리)에만 색으로 준다. */
/* [2026-08-03] 경고 카드의 중립 그림자도 함께 줄인다(12px → 7px · 오프셋 3 → 2). */
.wx-alert { box-shadow: 0 2px 7px -4px rgba(16, 24, 40, .34); }
/* 밴드 밑줄 — 날씨 그림 바로 아래라 «이 색은 날씨 것»이 자리로 드러난다(카드 테두리가 아니다). */
.wx-alert .wx-bandline { height: 2px; background: var(--wx-alert); opacity: .9; }

/* ── 날씨 존 — [2026-08-03·사용자 승인 A안] **제거** ────────────────────────────────
   여기 있던 것: `.wx-zone`(찬색 패널 · 기상 축의 지반) · `.wx-zone-alert`(경고 시 좌측 3px 색띠 +
   옅은 판정색 바탕) · `.wx-chip`(윤곽선 심각도 칩) · color-mix 미지원 폴백.

   대표이사 홈(`/home`)의 현장 카드가 「컬러 스트립 박스 제거 · 아이콘 + 텍스트만」으로 바뀌면서
   **전 앱을 통틀어 소비처가 0이 됐다**(실측: `.wx-zone|.wx-chip` 참조 tsx 0건 · `.wx-chipscrim` 은
   이름만 비슷한 별개 규칙이라 `/dashboard` 에서 계속 쓴다 — 아래 `.wx-photo` 절 참조).

   ⚠ 이 규칙들이 지탱하던 것은 2026-08-02 의 「축을 형태로 가른다」였다 —
     위험도=채운 알약 / 기상=찬색 패널 안 윤곽선 칩. 되살릴 일이 생기면 그 맥락째 되살려야 한다.
   ⚠ `--wx-alert` 변수와 `.wx-alert`(카드 그림자 · 밴드 밑줄)는 **남아 있다** — 날씨 연출은 유지다. */

/* 하늘 바탕 */
.wxk-clear .wx-sky { background: linear-gradient(168deg, #8fc4f5 0%, #bcdeff 34%, #e8f3ff 70%, #fffaf0 100%); }
.wxk-cloud .wx-sky { background: linear-gradient(168deg, #9fb2c9 0%, #c4d2e2 40%, #e0e9f2 74%, #f2f6fa 100%); }
.wxk-rain  .wx-sky { background: linear-gradient(168deg, #4c6076 0%, #6d8299 38%, #93a7bd 72%, #b2c2d4 100%); }
.wxk-heat  .wx-sky { background: linear-gradient(168deg, #ffab5e 0%, #ffbe7d 34%, #ffcfa4 70%, #ffe6d2 100%); }
.wxk-snow  .wx-sky { background: linear-gradient(168deg, #8ba1bd 0%, #b6c8dd 38%, #dae7f3 72%, #f0f6fc 100%); }
.wxk-wind  .wx-sky { background: linear-gradient(168deg, #8ea2ba 0%, #b3c3d5 38%, #d3dfea 72%, #eaf0f6 100%); }
.wxk-rain  .wx-tint { background: #2f5fae; } .wxk-snow  .wx-tint { background: #7fa0c8; }
.wxk-heat  .wx-tint { background: #ef4444; } .wxk-clear .wx-tint { background: #ffc44a; }
.wxk-cloud .wx-tint { background: #8fa3bd; } .wxk-wind  .wx-tint { background: #6b86a8; }

/* 태양 — 코로나 3겹은 주기를 어긋내야 기계적으로 안 보인다 */
.wx-sunwrap { position: absolute; right: 12%; top: 10%; width: 26px; height: 26px; will-change: transform; }
.wx-suncore { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fffdf2 0%, #fff3c4 32%, #ffd166 62%, #ffab3d 100%); }
.wx-corona { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,214,120,.55) 0%, rgba(255,196,74,.18) 45%, rgba(255,196,74,0) 72%); }
.wx-corona.c1 { width: 230%; height: 230%; }
.wx-corona.c2 { width: 340%; height: 340%; opacity: .62; }
.wx-corona.c3 { width: 480%; height: 480%; opacity: .34; }
.wx-motion .wx-corona.c1 { animation: wxCorona 3.8s cubic-bezier(.42,0,.58,1) infinite; }
.wx-motion .wx-corona.c2 { animation: wxCorona 5.6s cubic-bezier(.42,0,.58,1) infinite -1.2s; }
.wx-motion .wx-corona.c3 { animation: wxCorona 7.9s cubic-bezier(.42,0,.58,1) infinite -3.4s; }
@keyframes wxCorona { 0%, 100% { transform: translate(-50%,-50%) scale(.94); opacity: .42; }
                      50%      { transform: translate(-50%,-50%) scale(1.1); opacity: .86; } }
.wx-raywrap { position: absolute; inset: 0; will-change: transform; }
.wx-raywrap i { position: absolute; left: 50%; top: 50%; width: 2px; margin-left: -1px; border-radius: 2px;
  transform-origin: 50% 0; background: linear-gradient(180deg, rgba(255,214,120,.92), rgba(255,214,120,0)); }
.wx-motion .wx-raywrap { animation: wxSpin 22s linear infinite; }
.wx-motion .wx-raywrap.rw2 { animation: wxSpinR 34s linear infinite; }
@keyframes wxSpin  { to { transform: rotate(1turn); } }
@keyframes wxSpinR { to { transform: rotate(-1turn); } }
.wx-godray { position: absolute; transform-origin: 100% 0; filter: blur(3px); mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(255,240,190,.5), rgba(255,240,190,0)); }
.wx-motion .wx-godray { animation: wxGod 9s cubic-bezier(.42,0,.58,1) infinite; }
@keyframes wxGod { 0%, 100% { opacity: .22; transform: rotate(var(--a, 18deg)) scaleY(.9); }
                   50%      { opacity: .6;  transform: rotate(calc(var(--a, 18deg) + 4deg)) scaleY(1.05); } }
.wx-flare { position: absolute; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,244,205,.75), rgba(255,226,150,.28) 42%, rgba(255,226,150,0) 72%); }
.wx-motion .wx-flare { animation: wxFlare 6.4s cubic-bezier(.42,0,.58,1) infinite; }
@keyframes wxFlare { 0%, 100% { opacity: .24; transform: scale(.86); } 50% { opacity: .64; transform: scale(1.14); } }

/* 구름 — 블롭 6개 합성 적운 + 밑면 그림자 */
.wx-cloud-o { position: absolute; left: 0; will-change: transform; }
.wx-cloud-o i { position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff 0%, #fff 58%, rgba(255,255,255,.82) 100%); }
.wx-cloud-o i.sh { background: radial-gradient(circle at 50% 40%, rgba(154,172,196,.55), rgba(154,172,196,0) 70%); }
.wx-motion .wx-cloud-o { animation: wxDrift linear infinite; }
@keyframes wxDrift { from { transform: translate3d(-90px,0,0); } to { transform: translate3d(400px,0,0); } }
.wx-motion .wx-cloud-o i:not(.sh) { animation: wxBlob cubic-bezier(.42,0,.58,1) infinite alternate; }
@keyframes wxBlob { from { transform: scale(1); } to { transform: scale(1.07); } }

/* 비 — 3층 깊이 + 가속 낙하 + 타원 물튀김 + 커튼 */
.wx-drop { position: absolute; top: -16px; border-radius: 2px; will-change: transform;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(226,240,255,.35) 40%, rgba(240,248,255,.98)); }
.wx-motion .wx-drop { animation: wxRain cubic-bezier(.35,.05,.75,.55) infinite; }
@keyframes wxRain { from { transform: translate3d(0,-18px,0) rotate(var(--ang,11deg)); }
                    to   { transform: translate3d(var(--dx,-22px), var(--fall,160px), 0) rotate(var(--ang,11deg)); } }
.wx-ring { position: absolute; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; opacity: 0;
  will-change: transform, opacity; }
.wx-motion .wx-ring { animation: wxRing cubic-bezier(.16,.72,.36,1) infinite; }
@keyframes wxRing { 0% { transform: scale(.15,.5); opacity: 0; } 18% { opacity: .95; }
                    100% { transform: scale(1.9,1.05); opacity: 0; } }
/* ★ 커튼 — background-position 보간을 «요소 이동」으로 바꿨다(2026-07-29 · 발열 대책 D).
   종전엔 카드 «전체 면적»의 repeating-gradient 를 매 프레임 다시 그렸다(비 카드당 3겹).
   타일의 세로 주기가 200px 이고 애니메이션이 정확히 200px 이동 = **딱 한 주기**라,
   요소를 위로 200px 늘려 깔고 transform 으로 200px 내리면 **픽셀 단위로 같은 그림**이 흐른다.
   부모(.wx-far/.wx-band/.wx-refl)가 전부 overflow:hidden 이라 늘린 부분은 잘린다.
   ⚠ 각도(101deg)는 배경에 있고 이동은 수직이라, 이동 축을 바꾸면 무늬 흐름 방향이 달라진다. */
.wx-curtain { position: absolute; left: 0; right: 0; top: -200px; height: calc(100% + 200px);
  opacity: .3; will-change: transform;
  background: repeating-linear-gradient(101deg, rgba(255,255,255,.12) 0 1px, transparent 1px 7px);
  background-size: auto 200px; }
.wx-motion .wx-curtain { animation: wxCurtain .9s linear infinite; }
@keyframes wxCurtain { to { transform: translate3d(0, 200px, 0); } }

/* 눈 — 크기·속도 상관 + 개별 흔들림 + 회전 + 6방 결정 + 쌓임 */
/* ★ 낙하를 top → translate 로 옮겼다(2026-07-29 · 발열 대책 D).
   종전 `top: -10px → 114%` 는 **매 프레임 레이아웃**을 유발했다(송이 41개 × 카드 수).
   `translate` 는 개별 속성이라 `wxSway` 의 `transform` 과 **독립으로 합성**된다
   (합성 순서: translate → rotate → scale → transform. 결과 위치는 종전과 동일).
   ⚠ 여기서 `114%` 를 그대로 옮기면 안 된다 — `top:%` 는 «부모» 높이 기준이지만
     `translate:%` 는 «자기 자신» 기준이라, 3~9px 짜리 송이가 10px 만 떨어지고 만다.
     그래서 호출부(WeatherScene)가 `--fallY` 를 **px 로** 주입한다.
     근경은 `calc(var(--wx-band) * 1.15)` 로 밴드 높이에 «정확히» 비례하고(종전 114% 와 같다),
     원경은 카드가 쥔 `--wx-fall`(200px)을 쓴다. 넘치는 만큼은 overflow:hidden 으로 잘린다.
     ⚠ 부족하면 송이가 «중간에서 사라진다» — 카드가 --wx-fall 보다 커지면 그 값을 올려라. */
.wx-flake { position: absolute; top: 0; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle, #fff 0%, #fff 58%, rgba(255,255,255,.35) 100%); }
.wx-motion .wx-flake { animation: wxSnow linear infinite, wxSway cubic-bezier(.42,0,.58,1) infinite alternate; }
@keyframes wxSnow { from { translate: 0 -10px; } to { translate: 0 var(--fallY, 220px); } }
@keyframes wxSway { from { transform: translateX(calc(var(--amp,7px) * -1)) rotate(0); }
                    to   { transform: translateX(var(--amp,7px)) rotate(var(--rot,180deg)); } }
.wx-flake.xl { background: none; }
.wx-flake.xl b, .wx-flake.xl b::before, .wx-flake.xl b::after { position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1.6px; margin-left: -.8px; border-radius: 2px; background: rgba(255,255,255,.95); content: ''; }
.wx-flake.xl b::before { transform: rotate(60deg); }
.wx-flake.xl b::after  { transform: rotate(-60deg); }
.wx-snowpile { position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.85));
  -webkit-mask-image: radial-gradient(60% 120% at 20% 100%, #000 40%, transparent 70%),
    radial-gradient(70% 130% at 62% 100%, #000 40%, transparent 70%),
    radial-gradient(50% 110% at 90% 100%, #000 40%, transparent 70%);
  mask-image: radial-gradient(60% 120% at 20% 100%, #000 40%, transparent 70%),
    radial-gradient(70% 130% at 62% 100%, #000 40%, transparent 70%),
    radial-gradient(50% 110% at 90% 100%, #000 40%, transparent 70%); }

/* 폭염 */
.wx-heatveil { position: absolute; inset: 0;
  background: radial-gradient(120% 76% at 74% -8%, rgba(255,92,44,.4), transparent 62%); }
.wx-motion .wx-heatveil { animation: wxHeat 3.9s cubic-bezier(.42,0,.58,1) infinite; }
@keyframes wxHeat { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.wx-shimmer { position: absolute; height: 4px; border-radius: 4px; filter: blur(1.4px); will-change: transform;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent); }
.wx-motion .wx-shimmer { animation: wxShim cubic-bezier(.42,0,.58,1) infinite; }
@keyframes wxShim { 0% { transform: translateY(0) scaleX(.5) skewX(0); opacity: 0; }
  30% { opacity: .8; } 60% { transform: translateY(-14px) scaleX(1) skewX(6deg); }
  100% { transform: translateY(-30px) scaleX(1.25) skewX(-4deg); opacity: 0; } }

/* 강풍 — 곡선 궤적 + 돌풍 버스트 + 텀블링 */
.wx-gust { position: absolute; height: 2px; border-radius: 2px; will-change: transform, opacity;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 45%, rgba(255,255,255,.5) 70%, transparent); }
.wx-motion .wx-gust { animation: wxGust cubic-bezier(.16,.72,.36,1) infinite; }
@keyframes wxGust { 0% { transform: translate3d(-130px,0,0) scaleX(.5); opacity: 0; } 14% { opacity: .95; }
  50% { transform: translate3d(200px,-5px,0) scaleX(1.15); } 86% { opacity: .7; }
  100% { transform: translate3d(400px,3px,0) scaleX(.6); opacity: 0; } }
.wx-debris { position: absolute; border-radius: 2px; background: rgba(96,116,142,.85); will-change: transform; }
.wx-motion .wx-debris { animation: wxTumble cubic-bezier(.16,.72,.36,1) infinite; }
@keyframes wxTumble { 0% { transform: translate3d(-30px,0,0) rotate(0); opacity: 0; } 12% { opacity: 1; }
  40% { transform: translate3d(152px,-14px,0) rotate(280deg); }
  72% { transform: translate3d(288px,2px,0) rotate(520deg); }
  100% { transform: translate3d(400px,-9px,0) rotate(760deg); opacity: 0; } }

/* 좁은 화면 — 밴드를 조금 낮춰 카드 높이를 아낀다 */
@media (max-width: 640px) { .wx-card { --wx-band: 38px; --wx-fall: 190px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   날씨 라인 아이콘 (WeatherIcon.tsx) — 파트별 자기 동작
   `.wxi-motion` 이 붙은 조상 아래에서만 돈다. 꺼지면 **정지된 아이콘**으로 남아
   무슨 날씨인지는 계속 읽힌다(연출이 꺼져도 정보는 안 사라진다).
   ═══════════════════════════════════════════════════════════════════════════ */
.wxi { display: block; flex: none; }
.wxi .wxi-s { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wxi .wxi-soft { opacity: .58; }

/* 해 — 광선 회전 + 코어 호흡 */
.wxi-motion .wxi .wxi-rays { animation: wxiSpin 14s linear infinite; }
@keyframes wxiSpin { to { transform: rotate(1turn); } }
.wxi-motion .wxi .wxi-core { animation: wxiPulse 3.4s cubic-bezier(.42,0,.58,1) infinite; }
@keyframes wxiPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* 구름 — 앞뒤가 반대로 부유해 깊이가 생긴다 */
.wxi-motion .wxi .wxi-cl  { animation: wxiDrift 4.6s cubic-bezier(.42,0,.58,1) infinite; }
.wxi-motion .wxi .wxi-cl2 { animation: wxiDrift 6.4s cubic-bezier(.42,0,.58,1) infinite reverse; }
@keyframes wxiDrift { 0%, 100% { transform: translateX(-.9px); } 50% { transform: translateX(.9px); } }
/* ⚠ 구름은 transform 이 붙은 <g>(translate+scale)라 애니메이션이 그 값을 덮어쓴다.
   그래서 부유는 **래퍼 <g> 가 아니라 자신**에게 걸되, 원래 transform 은 속성으로 두고
   CSS transform 은 그 위에 합성된다(SVG2 규칙). 사파리 구버전에서 어긋나면
   translate 를 CSS 변수로 옮기는 것이 다음 수순. */

/* 비 — 빗방울 시차 낙하 */
.wxi-motion .wxi .wxi-dp  { animation: wxiDrop 1.15s linear infinite; }
.wxi-motion .wxi .wxi-dp2 { animation-delay: -.38s; }
.wxi-motion .wxi .wxi-dp3 { animation-delay: -.76s; }
@keyframes wxiDrop { 0% { transform: translateY(-2px); opacity: 0; } 25% { opacity: 1; }
  100% { transform: translateY(5.5px); opacity: 0; } }

/* 눈 — 결정이 회전하며 낙하 */
.wxi-motion .wxi .wxi-fk  { animation: wxiFlake 2.4s linear infinite; transform-box: fill-box; transform-origin: center; }
.wxi-motion .wxi .wxi-fk2 { animation-delay: -.8s; }
.wxi-motion .wxi .wxi-fk3 { animation-delay: -1.6s; }
@keyframes wxiFlake { 0% { transform: translateY(-2px) rotate(0); opacity: 0; } 22% { opacity: 1; }
  100% { transform: translateY(5px) rotate(180deg); opacity: 0; } }

/* 강풍 — 갈퀴가 좌우로 통과 */
.wxi-motion .wxi .wxi-gu  { animation: wxiGust 2.1s cubic-bezier(.42,0,.58,1) infinite; }
.wxi-motion .wxi .wxi-gu2 { animation-delay: -.5s; }
.wxi-motion .wxi .wxi-gu3 { animation-delay: -1s; }
@keyframes wxiGust { 0% { transform: translateX(-3px); opacity: .35; } 45% { opacity: 1; }
  100% { transform: translateX(3px); opacity: .35; } }

/* 폭염 — 열파 상승 */
.wxi-motion .wxi .wxi-hw  { animation: wxiHeat 2.6s cubic-bezier(.42,0,.58,1) infinite; }
.wxi-motion .wxi .wxi-hw2 { animation-delay: -.9s; }
@keyframes wxiHeat { 0% { transform: translateY(1.6px); opacity: .35; } 50% { opacity: 1; }
  100% { transform: translateY(-1.6px); opacity: .35; } }

/* ═══════════════════════════════════════════════════════════════════════════
   현장 카드 «사진 위» 날씨 오버레이 — 시안 ② 균일 베일 (확정 2026-07-29)
   대상: /dashboard 현장 카드의 전경 사진 배너.

   ★ 이 변형의 핵심은 **`.wx-sky` 를 끄는 것**이다.
     홈 카드는 하늘 그라데이션이 «배경»이지만, 여기서는 **전경 사진이 하늘**이다.
     끄지 않으면 불투명 그라데이션이 사진을 통째로 덮는다(시안 v1 에서 실제로 그랬다).
     반사(.wx-refl)·밴드선(.wx-bandline)도 하늘이 있어야 성립하므로 함께 끈다.

   ★ 그리고 남는 문제가 **대비**다. 비·눈은 흰색이라 밝은 하늘이 크게 잡힌 사진 위에서
     거의 안 보인다. 그래서 날씨색 베일을 12% 얹어 파티클이 읽히게 한다(시안 ② 확정).
     베일은 **정적 레이어 1장**이다 — 애니메이션하지 않는다(발열 대책: 페인트 애니 0).
   ═══════════════════════════════════════════════════════════════════════════ */
.wx-photo { position: relative; overflow: hidden; isolation: isolate; }
.wx-photo .wx-sky, .wx-photo .wx-refl, .wx-photo .wx-bandline { display: none; }
/* ⚠ `.wx-far` 의 `blur(1.1px)` 는 **자식(파티클)이 transform 으로 움직이면 매 프레임 다시 계산**된다
   — 실측 2026-07-29 · /dashboard 배너 3장 = 148,680px²/프레임.
   홈 카드는 «하늘 그라데이션» 위라 블러가 원근을 만들지만, 여기는 **사진**이 이미 원근을 갖는다.
   블러를 빼고 opacity 만으로 원경을 표현한다 — 눈에 띄는 차이 없이 필터 패스가 사라진다. */
.wx-photo .wx-far  { z-index: 1; opacity: .42; filter: none; }
/* 개별 원경 빗줄기에 인라인으로 붙는 blur 도 같은 이유로 끈다(WeatherScene 이 style 로 준다). */
.wx-photo .wx-far .wx-drop { filter: none !important; }
/* 근경은 배너 «전체» 를 쓴다 — 상단 44px 밴드가 아니라 사진 전면에 내린다. */
.wx-photo .wx-band { top: 0; bottom: 0; height: auto; z-index: 3; box-shadow: none; }
.wx-photo .wx-scrim { display: none; }
/* 균일 베일 — 날씨색 12%. 사진 톤이 살짝 물들지만 그 대가로 파티클이 읽힌다. */
.wx-photo .wx-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .12; }
.wx-photo.wxk-rain  .wx-veil { background: #1e3a5f; }
.wx-photo.wxk-snow  .wx-veil { background: #5d7ea8; }
.wx-photo.wxk-clear .wx-veil { background: #ff9a3c; }
.wx-photo.wxk-cloud .wx-veil { background: #46596f; }
.wx-photo.wxk-heat  .wx-veil { background: #ff6b2c; }
.wx-photo.wxk-wind  .wx-veil { background: #3f5871; }
/* 하단 정보(현장 전경 칩·날씨 칩) 가독성 — 사진을 어둡게 «하는» 것이 목적이 아니라 글자만 살린다. */
.wx-photo .wx-chipscrim { position: absolute; inset: auto 0 0 0; height: 52px; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.44)); }
/* ⚠ 사진 위 오버레이에서는 `.wx-body` 를 «쓰지 않는다».
   globals.css 위쪽의 `.wx-body { position: relative }`(홈 카드 본문용)가
   Tailwind 의 `absolute` 와 특이도가 같은데 **소스 순서에서 뒤라 이긴다** —
   그래서 좌상단에 놓으려던 날씨 칩이 배너 «가운데»로 밀렸다(실측 2026-07-29).
   칩들은 각자 relative/absolute + z-10 을 직접 갖는다. */

/* ═══════════ 날씨 상태 바 (시안 A — 바 전체가 날씨 씬) ═══════════ */
.wxbar { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0;
  border: 1px solid rgba(255,255,255,.28); border-radius: 12px; padding: 8px 11px;
  overflow: hidden; isolation: isolate; }
.wxbar > .wxb-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* 좌→우 어두운 베일 — 글자가 시작하는 왼쪽을 더 눌러 대비를 만든다. */
.wxbar > .wxb-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.38), rgba(0,0,0,.14)); }
.wxbar > *:not(.wxb-fx):not(.wxb-veil) { position: relative; z-index: 2; }
.wxb-sky { position: absolute; inset: 0; }
.wxb-rain  .wxb-sky { background: linear-gradient(100deg, #5b7188, #7f96ae 55%, #a8bacd); }
.wxb-snow  .wxb-sky { background: linear-gradient(100deg, #8ea3bd, #b3c6da 55%, #dbe7f2); }
.wxb-wind  .wxb-sky { background: linear-gradient(100deg, #8ea3ba, #adc0d3 55%, #d5e0ea); }
.wxb-heat  .wxb-sky { background: linear-gradient(100deg, #ef8f4a, #ffb277 55%, #ffd0a4); }
.wxb-cloud .wxb-sky { background: linear-gradient(100deg, #93a6bc, #b6c6d8 55%, #dbe4ee); }
.wxb-clear .wxb-sky { background: linear-gradient(100deg, #5ba7e8, #8ec9f5 55%, #cfe8ff); }
/* 바 안 파티클 — 바는 40px 남짓이라 DOM 이 저렴하다(비 14개). */
.wxb-drop { position: absolute; top: -40%; width: 1.5px; border-radius: 2px; will-change: transform;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.95)); }
.wxi-motion .wxb-drop { animation: wxbFall cubic-bezier(.35,.05,.75,.55) infinite; }
@keyframes wxbFall { from { transform: translate3d(0,-16px,0) rotate(14deg); }
                     to   { transform: translate3d(-14px,64px,0) rotate(14deg); } }
.wxb-flake { position: absolute; top: -30%; border-radius: 50%; background: #fff; will-change: transform; }
.wxi-motion .wxb-flake { animation: wxbSnow linear infinite, wxbSway cubic-bezier(.42,0,.58,1) infinite alternate; }
@keyframes wxbSnow { from { transform: translateY(-10px); } to { transform: translateY(60px); } }
@keyframes wxbSway { from { margin-left: -5px; } to { margin-left: 5px; } }
.wxb-gust { position: absolute; height: 2px; border-radius: 2px; will-change: transform;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); }
.wxi-motion .wxb-gust { animation: wxbBlow cubic-bezier(.16,.72,.36,1) infinite; }
@keyframes wxbBlow { 0% { transform: translate3d(-120px,0,0) scaleX(.5); opacity: 0; }
  15% { opacity: 1; } 100% { transform: translate3d(760px,0,0) scaleX(1); opacity: 0; } }
/* 바 안 구름 — 종전엔 **알약 하나**라 「구름」으로 안 읽혔다.
   밑동(본체) + 봉우리 2개(::before/::after)로 적운 실루엣을 만들고, 흐림을 살짝 줘 가장자리를 눕힌다.
   가로 이동과 상하 흔들림을 **분리**해 두 애니메이션으로 겹치면 기계적인 직선 이동이 사라진다. */
.wxb-cloudb { position: absolute; border-radius: 999px; background: rgba(255,255,255,.82);
  will-change: transform; filter: blur(.4px); }
.wxb-cloudb::before, .wxb-cloudb::after { content: ""; position: absolute; border-radius: 50%;
  background: inherit; }
/* 큰 봉우리(왼쪽 가운데) · 작은 봉우리(오른쪽) — 아래는 평평, 위로 부푼다. */
.wxb-cloudb::before { width: 54%; height: 168%; left: 12%; bottom: 28%; }
.wxb-cloudb::after  { width: 38%; height: 122%; right: 14%; bottom: 26%; }
.wxi-motion .wxb-cloudb { animation: wxbDrift linear infinite, wxbCloudBob cubic-bezier(.42,0,.58,1) infinite alternate; }
@keyframes wxbDrift { from { transform: translateX(-110px); } to { transform: translateX(820px); } }
/* 상하 흔들림은 margin 으로 준다 — transform 은 이미 가로 이동이 쓰고 있다(둘을 합치면 서로 덮어쓴다). */
@keyframes wxbCloudBob { from { margin-top: -2px; } to { margin-top: 2px; } }
.wxb-shim { position: absolute; height: 3px; border-radius: 3px; filter: blur(1.2px); will-change: transform;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); }
.wxi-motion .wxb-shim { animation: wxbRise cubic-bezier(.42,0,.58,1) infinite; }
@keyframes wxbRise { 0% { transform: translateY(6px) scaleX(.5); opacity: 0; } 35% { opacity: .85; }
  100% { transform: translateY(-14px) scaleX(1.2); opacity: 0; } }
.wxb-sun { position: absolute; border-radius: 50%;
  background: radial-gradient(circle, #fffbe6 0%, #ffd873 55%, rgba(255,179,64,0) 74%); }
.wxi-motion .wxb-sun { animation: wxbBreath 4.4s cubic-bezier(.42,0,.58,1) infinite; }
@keyframes wxbBreath { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.13); opacity: 1; } }
.wxb-heatg { position: absolute; inset: 0;
  background: radial-gradient(60% 160% at 82% 50%, rgba(255,86,40,.42), transparent 70%); }
.wxi-motion .wxb-heatg { animation: wxbHeatG 3.6s cubic-bezier(.42,0,.58,1) infinite; }
@keyframes wxbHeatG { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

/* ═══════════════════════════════════════════════════════════════════════════
   현장소장 홈 — 일자 카드 달력 (확정 시안 7)
   설계 SSOT: docs/design/som-today-calendar-spec-20260726.md §6-D
   구현:      apps/web/src/features/field/WorkCalendar.tsx

   Tailwind 로 못 쓰는 것만 여기에 둔다:
     ① 밀도별 카드 높이(런타임 클래스 스위치) ② 밀림 폭포 곡선 ③ 오늘 칸 호흡 링
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ① 밀도 — 「카드가 작다/크다」의 정답은 화면 크기마다 다르다. 고정하지 않고 사용자에게 넘긴다. ── */
.fd-cal .fd-dc { min-height: 104px; }
.fd-cal .fd-dc-num { font-size: 15px; }
.fd-cal-tall  .fd-dc { min-height: 132px; }
.fd-cal-mid   .fd-dc { min-height: 104px; }
.fd-cal-tight .fd-dc { min-height: 74px; }
.fd-cal-tight .fd-dc-num { font-size: 12.5px; }
/* 촘촘에서는 상태 줄도 함께 줄인다 — 카드만 줄이면 글자가 넘친다. */
.fd-cal-tight .fd-dc .flex-1 > span { font-size: 8.6px; padding: 1.5px 4px; }

/* ── ② 밀림 폭포 — 놓친 날에서 오늘로 흐르는 곡선.
      카드(z-10) 뒤(z-0)라 **여백에서만** 보인다. 좌표는 렌더 후 실측(ResizeObserver). ── */
.fd-casc path { fill: none; stroke: #c0392b; stroke-width: 1.4; opacity: .34; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .fd-casc path { stroke-dasharray: 5 8; animation: fdFlow 2.6s linear infinite; }
}
@keyframes fdFlow { to { stroke-dashoffset: -26; } }

/* ── ③ 오늘 칸 — 외곽 확산 링. 「동작 줄이기」 기기에서는 정지된 테두리만 남는다. ── */
@media (prefers-reduced-motion: no-preference) {
  .fd-dc-today::after {
    content: ""; position: absolute; inset: -2px; border-radius: 11px;
    border: 1.5px solid #1c3c6e; pointer-events: none;
    animation: fdTodayPulse 2.8s cubic-bezier(.16,.72,.36,1) infinite;
  }
}
@keyframes fdTodayPulse {
  0%   { opacity: .7; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.045); }
  100% { opacity: 0; }
}

/* ── 대표이사 지시 — 히어로에서 점프해 왔을 때 한 번 번쩍인다(어디로 왔는지 알려준다). ── */
@media (prefers-reduced-motion: no-preference) {
  .fd-flash { animation: fdFlash 1s cubic-bezier(.16,.72,.36,1); }
}
@keyframes fdFlash {
  0%   { box-shadow: 0 0 0 0 rgba(42, 93, 176, .55); }
  100% { box-shadow: 0 0 0 12px rgba(42, 93, 176, 0); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   자료실 마크다운 본문 (.md) — MarkdownView 가 그리는 HTML 의 스타일.
   ⚠ 클래스명은 packages/web-kit/src/markdown.ts 가 찍는 것과 1:1 이다. 한쪽만 바꾸면 갈라진다.
   Tailwind @apply 를 쓰지 않는다 — 이 HTML 은 문자열로 만들어져 JIT 가 스캔하지 못한다.
   ══════════════════════════════════════════════════════════════════════════════ */
.md { font-size: 13.5px; line-height: 1.9; color: #2a3340; word-break: break-word; }
.md > :first-child { margin-top: 0; }
.md p { margin: 0 0 13px; }
.md a { color: #2a5db0; font-weight: 700; text-decoration: none; }
.md a:hover { text-decoration: underline; }

/* 소제목 — 좌측 바로 위계를 만든다(같은 크기 글자만으로는 스캔이 안 된다). */
.md .md-h1, .md .md-h2, .md .md-h3 {
  font-weight: 800; color: #1c3c6e; margin: 22px 0 9px;
  padding-left: 10px; border-left: 3px solid #2a5db0; scroll-margin-top: 76px;
}
.md .md-h1 { font-size: 16px; }
.md .md-h2 { font-size: 14.5px; }
.md .md-h3 { font-size: 13.5px; }
.md .md-h4, .md .md-h5, .md .md-h6 {
  font-size: 13px; font-weight: 800; color: #2a3340; margin: 16px 0 6px; scroll-margin-top: 76px;
}

.md .md-ul, .md .md-ol { margin: 0 0 13px; padding-left: 0; list-style: none; }
.md .md-ol { counter-reset: mdol; }
.md .md-ul li, .md .md-ol li { position: relative; padding-left: 17px; margin-bottom: 3px; }
.md .md-ul li::before {
  content: ""; position: absolute; left: 3px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: #b7c2d0;
}
.md .md-ol li { counter-increment: mdol; padding-left: 22px; }
.md .md-ol li::before {
  content: counter(mdol) "."; position: absolute; left: 0; top: 0;
  font-weight: 800; color: #2a5db0; font-size: 12.5px;
}

.md .md-quote {
  margin: 0 0 14px; padding: 10px 13px; border-left: 3px solid #b45309;
  background: #fef3e2; border-radius: 0 8px 8px 0; color: #6b4308; font-weight: 600;
}
.md .md-hr { border: 0; border-top: 1px solid #e6ebf1; margin: 18px 0; }

.md code {
  background: #eef1f6; border: 1px solid #e6ebf1; border-radius: 5px;
  padding: 1px 5px; font-size: 12px; color: #2a3340;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.md .md-pre {
  background: #f7f9fc; border: 1px solid #e6ebf1; border-radius: 9px;
  padding: 11px 13px; margin: 0 0 14px; overflow-x: auto;
}
.md .md-pre code { background: none; border: 0; padding: 0; font-size: 12px; line-height: 1.65; }
.md .md-mermaid-err { border-color: #f0dcbb; background: #fef3e2; }

/* 표 — 좁은 화면에서 페이지 전체가 가로로 밀리지 않게 표만 스크롤한다. */
.md .md-tablewrap { overflow-x: auto; margin: 0 0 14px; }
.md .md-table { border-collapse: collapse; min-width: 100%; font-size: 12.5px; }
.md .md-table th, .md .md-table td {
  border: 1px solid #e6ebf1; padding: 7px 10px; text-align: left; vertical-align: top;
}
.md .md-table th { background: #f7f9fc; font-weight: 800; color: #57606a; white-space: nowrap; }

.md .md-img {
  display: block; max-width: 100%; height: auto; margin: 4px 0 14px;
  border: 1px solid #e6ebf1; border-radius: 9px; background: #fff;
}
.md .md-mermaid { margin: 0 0 16px; text-align: center; }
.md .md-mermaid svg { max-width: 100%; height: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   로딩 표시 — [2026-08-04] 「불러오는 중…」 텍스트 38곳 대체.
   시안 SSOT: docs/design/mockup-loading-20260804.html (권장 조합 표)

   ⚠ 로딩 애니는 **계속 돈다** — 이 파일에서 페인트 비용에 가장 민감한 자리다.
     그래서 전부 transform/opacity 만 건드린다(합성 전용·페인트 0).
     07-29 실측(85,624px²/프레임)에서 얻은 규칙을 그대로 따른다.
   ⚠ 애니메이션은 반드시 `prefers-reduced-motion: no-preference` 안에 둔다.
     「동작 줄이기」를 켠 기기에서도 **로딩 중이라는 사실은 남아야** 하므로,
     정지 상태의 모양(reduce 블록)을 따로 준다.
     (07-25 교훈: 아이폰에서 애니가 멈춘 원인이 OS 설정이었고 4번 헛짚었다)
   ══════════════════════════════════════════════════════════════════════════ */

/* ① 링 — 셸 «안쪽» 대기 */
.ld-ring {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid #dde5ee; border-top-color: #2a5db0;
}
.ld-ring.ld-sm { width: 22px; height: 22px; border-width: 2.5px; }

/* ② 점 세 개 — 좁은 자리(썸네일·모달·인라인) */
.ld-dots { display: inline-flex; gap: 6px; vertical-align: middle; }
.ld-dots i { width: 7px; height: 7px; border-radius: 50%; background: #2a5db0; display: block; opacity: .28; }

/* ③ 상단 바 — 이미 내용이 떠 있는 상태의 «갱신». 화면을 비우지 않는다. */
.ld-top { position: relative; height: 3px; overflow: hidden; background: #e3e9f0; border-radius: 999px; }
.ld-top > span {
  position: absolute; inset: 0; border-radius: 999px; background: #2a5db0;
  transform: translateX(-100%) scaleX(.42); transform-origin: left center;
}

/* ④ 스켈레톤 — 올 내용의 «모양»을 미리 그려 도착 때 레이아웃이 안 튀게 한다.
   ⚠ background-position 을 움직이면 행 전체가 매 프레임 리페인트된다.
     그래서 광택은 «별도 오버레이»를 transform 으로 지나가게 한다(합성만). */
.ld-sk { position: relative; overflow: hidden; }
.ld-skb { display: block; height: 9px; border-radius: 5px; background: #e6ebf1; }
.ld-sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 32%, rgba(255,255,255,.85) 50%, transparent 68%);
  transform: translateX(-100%);
}

/* ⑤ 로고 호흡 — 앱을 «처음 여는» 한 번(AuthGate)에만. */
.ld-mark { display: inline-flex; align-items: center; gap: 9px; }

/* ⑦ 결정적 진행 링 — 분모를 «아는» 화면에서만.
   ⚠ stroke-dashoffset 은 합성만으로 끝나지 않는다(작은 면적 리페인트). 남용 금지. */
.ld-pr svg { transform: rotate(-90deg); }

@media (prefers-reduced-motion: no-preference) {
  .ld-ring { animation: ldSpin .9s linear infinite; }
  .ld-dots i { animation: ldWave 1.15s ease-in-out infinite; }
  .ld-dots i:nth-child(2) { animation-delay: .14s; }
  .ld-dots i:nth-child(3) { animation-delay: .28s; }
  .ld-top > span { animation: ldIndeter 1.5s cubic-bezier(.45,.05,.35,1) infinite; }
  .ld-sheen { animation: ldSheen 1.5s ease-in-out infinite; }
  .ld-mark { animation: ldBreathe 1.9s ease-in-out infinite; }
}
/* 「동작 줄이기」 — 멈춰 있어도 «대기 중»으로 읽히는 모양을 남긴다. */
@media (prefers-reduced-motion: reduce) {
  .ld-dots i { opacity: .6; }
  .ld-top > span { transform: translateX(0) scaleX(.4); }
}

@keyframes ldSpin { to { transform: rotate(360deg); } }
@keyframes ldWave {
  0%, 72%, 100% { transform: translateY(0); opacity: .28; }
  30% { transform: translateY(-6px); opacity: 1; }
}
@keyframes ldIndeter {
  0%   { transform: translateX(-100%) scaleX(.42); }
  55%  { transform: translateX(105%) scaleX(.72); }
  100% { transform: translateX(240%) scaleX(.42); }
}
@keyframes ldSheen { to { transform: translateX(100%); } }
@keyframes ldBreathe {
  0%, 100% { transform: scale(1); opacity: .92; }
  50%      { transform: scale(1.06); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   로그인 우측 프리뷰 — 현장 비상신고 → 대표이사 화면 (`features/login/LoginPreview`)
   확정 시안: docs/design/mockup-login-final-20260804.html

   ★ 15초 한 바퀴. 비상 전환은 **층으로 나눈다**(63→69 배너 · 65→72 지도 · 66→74 카드접힘
     · 71→78 비상카드). 한꺼번에 움직이면 매 프레임 패널 전체가 리플로우돼 «지지직»으로 보인다.
   ★ 종전 `.lp-*` 프리뷰는 회원가입·초대 화면이 계속 쓴다 — 지우지 말 것.
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * ⚠⚠ `min-width: 0` 이 **이 화면이 안 잘리는 이유**다. 지우지 마라.
 *   이 패널은 격자(`lg:grid-cols-[400px_1fr]`, lg 미만 1단)의 «자식»이다. CSS 격자 트랙의
 *   기본 최소값은 `auto` = **min-content** 라, 안에 든 «줄지 않는» 것들이 트랙을 통째로 넓힌다:
 *       .lgp-ph 252px 고정  +  .lgp-rd `aspect-ratio:1; height:100%` → 가로 ≈650px 요구
 *       → 트랙 ≈944px → 카드가 뷰포트보다 넓어지고 **오른쪽이 잘린다**(실기 스샷 2026-08-06).
 *   `min-width: 0` 을 주면 트랙이 min-content 아래로 줄 수 있고, `overflow:hidden` 이
 *   패널 «안에서» 곱게 잘라낸다 — 카드는 언제나 화면 폭을 지킨다.
 *   ⚠ 좁은 화면뿐 아니라 **1360px 미만 노트북**에서도 같은 이유로 넘쳤다(400+944=1344).
 */
.lgp { position: relative; overflow: hidden; min-width: 0; padding: 16px 18px; height: 704px;
  background: linear-gradient(150deg, #12305c 0%, #1c3c6e 46%, #24508f 100%); }

/**
 * ★ [2026-08-06 · 사용자 신고] **로그인 화면 우측이 잘린다**(갤럭시 Z 폴드 커버 등 좁은 화면).
 *
 *   원인: 이 패널은 «가로로 줄지 않는» 요소를 품고 있는데 `.lgp` 가 `overflow:hidden` 이라
 *   넘치는 대신 **잘린다**.
 *     .lgp-ph  폰 목업 **252px 고정**
 *     .lgp-rd  레이더 `height:100%; width:auto; aspect-ratio:1; flex:0 0 auto`
 *              → 패널 높이(704px)만큼 **가로 ≈650px 를 요구**한다
 *   최소 필요 폭 ≈ 36(패딩) + 252 + 6 + 650 ≈ **944px**. 폴드 커버는 344~360px 다.
 *
 *   레이아웃은 `lg:grid-cols-[400px_1fr]` 로 **1024px 이상에서만 2단**이다. 그 미만에서는
 *   이 패널이 폼 아래에 통째로 쌓이는데, 반응형 규칙이 **하나도 없어** 잘린 채로 보였다.
 *
 *   → lg 미만에서는 «폰 목업만» 가운데 세운다. 연결선·대표화면(레이더 포함)은 감춘다.
 *     장식이고 `aria-hidden` 이라 정보 손실이 없다. 폰 252 + 패딩 28 = 280px < 344px.
 * ⚠ 1024px 이상은 **한 줄도 바뀌지 않는다** — 데스크톱 시안 보존.
 */
@media (max-width: 1023.98px) {
  .lgp { height: auto; padding: 18px 14px 22px; }
  .lgp-row { justify-content: center; }
  .lgp-relay, .lgp-ceo { display: none; }
}
.lgp-grid-bg { position: absolute; inset: 0; opacity: .34; background-size: 26px 26px;
  background-image: linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px); }
.lgp-sheen { position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 78% 8%, rgba(255,255,255,.16), transparent 60%); }
.lgp-stage { position: relative; height: 100%; display: flex; flex-direction: column; }
.lgp-cap { display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
  color: rgba(255,255,255,.78); font-size: 10.6px; font-weight: 800; letter-spacing: .12em; }
.lgp-cap i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; }
.lgp-mock { margin-left: auto; letter-spacing: 0; font-size: 9.6px; font-weight: 800;
  color: rgba(255,255,255,.55); background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 2px 8px; }
.lgp-row { flex: 1; min-height: 0; display: flex; align-items: center; gap: 6px; }

/* ── 폰 ── */
.lgp-ph-wrap { flex: 0 0 auto; }
.lgp-ph { position: relative; width: 252px; height: 456px; border: 6px solid #0f172a;
  border-radius: 30px; overflow: hidden; background: #f5f7fa;
  box-shadow: 0 26px 54px -18px rgba(0,0,0,.72); }
.lgp-notch { position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 96px; height: 17px; border-radius: 0 0 12px 12px; background: #0f172a; z-index: 20; }
.lgp-s1, .lgp-s2 { position: absolute; inset: 0; overflow: hidden; }
.lgp-fs { height: 100%; background: #f5f7fa; font-size: 10px; padding-top: 17px; }
.lgp-bar { display: flex; align-items: center; gap: 6px; background: #fff;
  border-bottom: 1px solid #e6eaf0; padding: 6px 8px; }
.lgp-menu { color: #46505f; display: flex; }
.lgp-t { min-width: 0; line-height: 1.2; }
.lgp-t b { display: block; font-size: 10.5px; font-weight: 900; color: #1c3c6e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgp-t span { font-size: 8px; font-weight: 700; color: #57606a; }
.lgp-sos { margin-left: auto; display: flex; align-items: center; gap: 3px; background: #dc2626;
  color: #fff; border-radius: 999px; padding: 3px 8px; font-size: 9px; font-weight: 900; }
.lgp-sos.lgp-on { background: #8e1a10; }
.lgp-sosi { display: flex; }
.lgp-av { width: 19px; height: 19px; flex: 0 0 19px; border-radius: 50%; background: #b04a2a;
  color: #fff; font-size: 8.5px; font-weight: 900; display: grid; place-items: center; }
.lgp-wx { display: flex; align-items: center; gap: 5px; margin: 6px; padding: 5px 8px;
  border-radius: 9px; color: #5a3410; background: linear-gradient(100deg, #f6b775, #f2a25c); }
.lgp-wxi { display: flex; color: #7a4a15; }
.lgp-wx b { font-size: 10px; font-weight: 900; }
.lgp-wxb { background: #fff; border-radius: 999px; padding: 1px 6px; font-size: 8px;
  font-weight: 900; color: #8a5314; }
.lgp-wxs { font-size: 7.6px; font-weight: 700; opacity: .9; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.lgp-hd { margin: 0 6px; padding: 8px 10px; border-radius: 10px 10px 0 0; background: #1c3c6e; color: #fff; }
.lgp-hd b { font-size: 13px; font-weight: 900; letter-spacing: -.3px; }
.lgp-hd > span { font-size: 8px; font-weight: 700; opacity: .8; margin-left: 5px; }
.lgp-chips { display: flex; gap: 5px; margin-top: 6px; justify-content: flex-end; }
.lgp-chips span { background: rgba(255,255,255,.14); border-radius: 999px; padding: 2px 8px;
  font-size: 8.4px; font-weight: 800; }
.lgp-chips b { font-size: 10px; font-weight: 900; margin-left: 2px; }
.lgp-sec { margin: 0 6px; background: #fff; border-left: 3px solid #1c3c6e;
  border-bottom: 1px solid #eef1f5; padding: 6px 9px 7px; }
/* ⚠ 이름을 KPI 박스(.lgp-k)와 겹치게 두지 마라 — 겹치면 KPI 가 이 flex 를 받아
     「3 개소」가 「3 개 / 소」로 쪼개진다(실제로 그랬다). */
.lgp-sk { display: flex; align-items: center; gap: 4px; font-size: 8.4px; font-weight: 800; color: #57606a; }
.lgp-sk i { width: 6px; height: 6px; border-radius: 2px; display: block; }
.lgp-ar { margin-left: auto; color: #9aa4b2; }
.lgp-big { font-size: 13px; font-weight: 900; letter-spacing: -.3px; margin-top: 1px; color: #dc2626; }
.lgp-sub { font-size: 8px; font-weight: 700; color: #46505f; }
.lgp-act { margin-top: 5px; display: inline-flex; align-items: center; gap: 4px; background: #1c3c6e;
  color: #fff; border-radius: 6px; padding: 3px 8px; font-size: 8.6px; font-weight: 900; }

/* ── 사고 신고 화면 ── */
.lgp-warn { display: flex; gap: 6px; margin: 6px; padding: 6px 8px; border-radius: 9px;
  background: #fdeeec; border: 1px solid #f6cfc9; font-size: 8.2px; line-height: 1.45; color: #7a2318; }
.lgp-wi { color: #dc2626; display: flex; flex: 0 0 auto; }
.lgp-warn b { font-weight: 900; color: #8e1a10; }
.lgp-site { margin: 0 6px 6px; padding: 5px 9px; border-radius: 8px; background: #eaf1fb; }
.lgp-site span { display: block; font-size: 7.4px; font-weight: 800; color: #57606a; }
.lgp-site b { font-size: 10px; font-weight: 900; color: #2a5db0; }
.lgp-lbl { margin: 0 6px 3px; font-size: 8.4px; font-weight: 900; color: #1c2733; }
.lgp-lbl em { font-style: normal; color: #dc2626; }
.lgp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 6px 7px; }
.lgp-grid.lgp-two { grid-template-columns: repeat(2, 1fr); }
.lgp-chip { border: 1px solid #d0d7de; background: #fff; border-radius: 7px; padding: 4px 0;
  text-align: center; font-size: 8.6px; font-weight: 800; color: #46505f; }
.lgp-chip.lgp-on { border-color: #2a5db0; background: #eaf1fb; color: #1c3c6e; border-width: 1.6px; }
.lgp-ta { position: relative; margin: 0 6px 7px; min-height: 52px; border: 1px solid #d0d7de;
  background: #fff; border-radius: 8px; padding: 6px 8px; font-size: 8.4px; line-height: 1.5; color: #1c2733; }
.lgp-type { display: inline; clip-path: inset(0 100% 0 0); }
.lgp-caret { position: absolute; width: 1px; height: 9px; background: #2a5db0; opacity: 0; }
.lgp-btn { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0 6px;
  height: 28px; border-radius: 8px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 900; }
.lgp-bi { display: flex; }

/* ── 신호 경로 ── */
.lgp-relay { position: relative; flex: 0 0 78px; align-self: stretch;
  display: flex; align-items: center; justify-content: center; }
.lgp-rt { position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 6px, transparent 6px 12px); }
.lgp-rp { position: absolute; top: 50%; left: 6px; width: 22px; height: 5px; margin-top: -2.5px;
  border-radius: 3px; opacity: 0;
  background: linear-gradient(90deg, rgba(255,107,94,0), #ff6b5e 62%, #ffd9d4);
  box-shadow: 0 0 14px 4px rgba(255,107,94,.7); }
.lgp-rlb { position: absolute; top: calc(50% + 10px); font-size: 8.6px; font-weight: 800;
  color: rgba(255,255,255,.72); white-space: nowrap; opacity: 0; }

/* ── 대표이사 화면 ── */
.lgp-ceo { flex: 1 1 auto; min-width: 0; height: 100%; }
.lgp-ce { background: #f5f7fa; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.22); box-shadow: 0 22px 46px -20px rgba(0,0,0,.62);
  display: flex; flex-direction: column; height: 100%; }
.lgp-ce-bar { display: flex; align-items: center; gap: 8px; background: #fff;
  border-bottom: 1px solid #e6eaf0; padding: 7px 10px; }
.lgp-ce-mark { width: 22px; height: 22px; border-radius: 50%; background: #1c3c6e; color: #fff;
  font-size: 10px; font-weight: 900; display: grid; place-items: center; }
.lgp-ce-t b { display: block; font-size: 11px; font-weight: 900; color: #1c3c6e; line-height: 1.2; }
.lgp-ce-t span { font-size: 8.4px; font-weight: 700; color: #57606a; }
.lgp-ce-eb { margin-left: auto; display: flex; align-items: center; gap: 3px; background: #dc2626;
  color: #fff; border-radius: 999px; padding: 3px 9px; font-size: 9px; font-weight: 900; }
/* ★ 높이를 못 박는다 — 안 그러면 비상 카드가 열릴 때 패널이 «자라며» 레이더 대신
     프리뷰 전체를 밀어낸다(실측 704→739). 양보하는 쪽은 언제나 레이더다. */
.lgp-ce-body { flex: 1; min-height: 0; overflow: hidden; padding: 9px;
  display: flex; flex-direction: column; gap: 8px; }

/* ★ 치환 축 — KPI 4칸 ↔ 비상 배너. 배너(≈99px)가 KPI(52px)보다 크므로 자리도 같이 늘린다.
     안 늘리면 남는 만큼 그대로 아래 레이더를 덮는다(시안에서 38px 덮었다). */
.lgp-swap { position: relative; flex: 0 0 auto; height: 52px; }
.lgp-kpi, .lgp-banner { position: absolute; left: 0; right: 0; top: 0; }
.lgp-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lgp-k { background: #fff; border: 1px solid #e6eaf0; border-radius: 9px; padding: 6px 8px; }
.lgp-k span { display: block; font-size: 8px; font-weight: 800; color: #57606a; }
.lgp-k b { font-size: 16px; font-weight: 900; letter-spacing: -.6px; }
.lgp-k i { font-style: normal; font-size: 8px; font-weight: 800; color: #57606a; margin-left: 2px; }

.lgp-rad { flex: 1; min-height: 0; background: #fff; border: 1px solid #e6eaf0; border-radius: 10px;
  padding: 7px; display: flex; flex-direction: column; gap: 5px; }
.lgp-rh { display: flex; align-items: baseline; gap: 6px; padding: 0 1px 4px;
  font-size: 10px; font-weight: 900; color: #1c3c6e; }
.lgp-rh span { font-size: 8.4px; font-weight: 700; color: #8892a0; }
.lgp-scope { position: relative; flex: 1; min-height: 60px; display: flex; align-items: center; gap: 14px; }
.lgp-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-right: 2px; }
.lgp-sh { font-size: 10.4px; font-weight: 800; color: #57606a; }
.lgp-sh b { color: #1c3c6e; font-size: 12px; }
.lgp-lgi { display: flex; align-items: center; gap: 6px; font-size: 9.6px; font-weight: 800; color: #46505f; }
.lgp-lgi i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; display: block; }
.lgp-sn { margin-top: 3px; padding-top: 5px; border-top: 1px solid #eef1f5;
  display: flex; flex-direction: column; gap: 2px; }
.lgp-sn span { font-size: 8.8px; font-weight: 600; color: #8892a0; }
.lgp-sn b { font-weight: 800; color: #57606a; }
.lgp-src { margin-top: auto; font-size: 7.8px; color: #a8b0ba; line-height: 1.4; }

/* ── 레이더 ── */
.lgp-rd { position: relative; height: 100%; width: auto; aspect-ratio: 1; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden; background: #eef4fb; border: 1px solid #cfd8e4;
  box-shadow: inset 0 0 26px 4px rgba(8,14,26,.10); }
.lgp-rd-map, .lgp-rd-swp { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lgp-rd-g line { stroke: #dde6f2; stroke-width: .8; vector-effect: non-scaling-stroke; }
.lgp-rd-cx line { stroke: #ccd8e8; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lgp-rd-rings circle { stroke: #c3d0e2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lgp-rd-sido path { fill: #e6edf6; stroke: #a8bcd8; stroke-width: 1; }
.lgp-rd-hq { position: absolute; width: 7px; height: 7px; z-index: 4;
  transform: translate(-50%, -50%) rotate(45deg); background: #1c3c6e; border: 1.4px solid #fff; }
/* ⚠ 레이더가 작아지면(비상 시 ≈180px) 거리링 라벨이 블립과 붙는다 — 그때는 감춘다.
     라벨이 없어도 링 자체가 남고, 옆 범례가 「본사 기준 100·200·300km」를 말한다. */
.lgp-rd-rl { position: absolute; transform: translate(-50%, -50%); z-index: 3;
  font-size: 6.6px; font-weight: 800; color: #6b7a90;
  background: rgba(238,244,251,.82); border-radius: 3px; padding: 0 2px; }
/* ★ 블립은 SVG 가 아니라 HTML 오버레이(%) — 레이더가 커지든 작아지든 화면상 크기가 같다. */
.lgp-bl { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; z-index: 5; }
.lgp-bl i { position: absolute; width: 17px; height: 17px; border-radius: 50%;
  background: var(--c); opacity: .20; }
.lgp-bl u { position: relative; width: 17px; height: 17px; border-radius: 50%; background: var(--c);
  color: #fff; font-size: 8.4px; font-weight: 900; text-decoration: none;
  display: grid; place-items: center; border: 1.5px solid #fff; box-shadow: 0 5px 12px -6px var(--c); }
.lgp-sosbl { z-index: 7; }
.lgp-bl .lgp-egc { position: absolute; background: #8e1a10; border-color: #fff; opacity: 0;
  box-shadow: 0 6px 14px -5px #8e1a10; }
.lgp-bl .lgp-ping { background: #8e1a10; opacity: 0; }
.lgp-tag { position: absolute; left: auto; top: 14px; transform: translateX(-50%); opacity: 0;
  white-space: nowrap; background: #fff; border: 1px solid #e6ebf1; border-radius: 999px;
  padding: 1px 6px; font-size: 7.4px; font-weight: 800; color: #8e1a10;
  box-shadow: 0 2px 6px rgba(8,14,26,.16); }

/* ── 현장 카드 (제품 `.wx-*` 껍데기 · 본문은 목업) ── */
/* 카드 «배치» 두 벌을 겹쳐 둔다 — A(3장) 위에 B(2장, 이미 정렬된 상태)를 덮고 교차 페이드.
   한 장을 접어 옆을 끌어당기면 폭이 매 프레임 바뀌어 카드가 미끄러진다. */
.lgp-cards { position: relative; flex: 0 0 auto; }
.lgp-cards-a { display: flex; gap: 8px; align-items: flex-start; }
.lgp-cards-b { position: absolute; inset: 0; display: flex; gap: 8px; align-items: flex-start; opacity: 0; }
/* zoom 이 걸린 요소라 flex-basis 는 «확대 전» 값이다(246×.75 = 184.5 · 본체 234 = 제품 1:1). */
.lgp-hold { flex: 0 0 246px; min-width: 0; zoom: .75; }
.lgp-hold .wx-slot { display: block; }
.lgp-wxcard { position: relative; display: flex; flex-direction: column;
  border: 1px solid #d0d7de; border-radius: 10px; background: #fff; overflow: hidden; min-height: 186px; }
.lgp-wxbody { display: flex; flex: 1; flex-direction: column;
  padding: calc(var(--wx-band) + 10px) 12px 12px; }
.lgp-wxnm { font-size: 12px; font-weight: 800; color: #1c2733;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgp-wxrow { margin-top: 6px; display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; }
.lgp-wxrisk { flex: none; border-radius: 999px; padding: 2px 8px; font-size: 11px;
  font-weight: 800; color: #fff; }
.lgp-wxkm { flex: none; border-radius: 999px; background: rgba(255,255,255,.9); padding: 2px 8px;
  font-size: 11px; font-weight: 700; color: #2f5fae; box-shadow: 0 0 0 1px rgba(47,95,174,.2); }
.lgp-wxdoc { margin-left: auto; flex: none; font-size: 11px; font-weight: 800; color: #8f4e08; }
.lgp-wxopen { margin-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: -.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgp-wxopen b { font-size: 11px; font-variant-numeric: tabular-nums; }
.lgp-wxtag { margin-right: 6px; border-radius: 3px; padding: 1px 4px; font-size: 9px;
  font-weight: 800; background: #f3ede4; color: #8a5a2b; }
.lgp-wxsep { margin: 0 4px; color: #c9d1da; }
.lgp-wxunj { margin-left: 6px; font-size: 9px; font-weight: 700; color: #9aa4b2; }
.lgp-wxhaz { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.lgp-wxhaz li { display: flex; align-items: center; gap: 6px; }
.lgp-wxdot { width: 5px; height: 5px; flex: none; border-radius: 50%; }
.lgp-wxht { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 10.5px; font-weight: 700; color: #2b333d; }
.lgp-wxhd { flex: none; font-size: 9.5px; font-weight: 800; color: #8a5a2b;
  font-variant-numeric: tabular-nums; }

/* ★ 카드 뒤 «반짝임»은 최소화한다 — 프리뷰에선 정보가 아니라 지지직으로 읽힌다.
     그림자는 남기고 «맥동»만 끈다(box-shadow 맥동은 매 프레임 큰 블러를 다시 그린다). */
.lgp-cards .wx-shimmer, .lgp-cards .wx-flare, .lgp-cards .wx-heatveil { display: none; }
.lgp-cards .wx-godray { opacity: .14 !important; animation: none !important; }
.lgp-cards .wx-corona, .lgp-cards .wx-raywrap { animation: none !important; }
.lgp-cards .wx-corona { opacity: .38; }
.lgp-cards .wx-aura, .lgp-cards .wx-aura::after { animation: none !important; }
.lgp-cards .wx-aura::after { opacity: .34 !important; }

/* ── 비상 카드 (제품 `.eg-card` 규약 · 붉은 «번짐»은 뺀다) ── */
.lgp-egcard { flex: 0 0 auto; height: 0; overflow: hidden; opacity: 0; }

/* ── 비상 카드 (제품 `.eg-card` 규약 · 붉은 «번짐»은 뺀다) ──────────────────────
   ⚠ 제품 원본은 바깥 5px 적색 헤일로 + 34px 블러 적색 그림자를 쓴다 — 작게 줄이면
     경계가 뭉개져 «번져» 보인다. 적색은 «면»으로만 쓰고 그림자는 중립 회색으로 얕게. */
.lgp-egc-box { position: relative; color: #fff; border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px; overflow: hidden;
  background: linear-gradient(160deg, #7f1710 0%, #a82c24 100%);
  box-shadow: 0 3px 10px -4px rgba(12,6,6,.45); }
.lgp-egc-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 11px 0; }
.lgp-egc-h b { font-size: 12.4px; font-weight: 900; letter-spacing: -.3px; }
.lgp-egc-badge { background: #fff; color: #8e1a10; border-radius: 999px; padding: 1px 8px;
  font-size: 9.6px; font-weight: 900; }
.lgp-egc-el { margin-left: auto; position: relative; isolation: isolate; border-radius: 999px;
  padding: 1px 9px; font-size: 10.4px; font-weight: 900; font-variant-numeric: tabular-nums; }
.lgp-egc-el::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: #fff; opacity: .2; }
.lgp-egc-b { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 11px 9px; }
.lgp-egc-chip { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.14);
  border-radius: 7px; padding: 2px 8px; font-size: 9.8px; font-weight: 700; }
.lgp-egc-chip b { font-size: 10.8px; font-weight: 900; }
.lgp-egc-chip.lgp-loc { border-color: transparent; background: rgba(0,0,0,.16); }

/* ── 비상 배너 (제품 `.eg-banner` 규약) ── */
.lgp-eg { border-radius: 11px; overflow: hidden; color: #fff; opacity: 0;
  background: linear-gradient(135deg, #8e1a10 0%, #c0392b 100%);
  box-shadow: 0 5px 16px -7px rgba(12,6,6,.5); }
.lgp-eg-h { display: flex; align-items: center; gap: 6px; padding: 7px 10px 0; }
.lgp-eg-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #fff; }
.lgp-eg-h b { font-size: 11.6px; font-weight: 900; letter-spacing: -.3px; }
.lgp-eg-el { margin-left: auto; background: rgba(255,255,255,.2); border-radius: 999px;
  padding: 1px 8px; font-size: 9.6px; font-weight: 900; font-variant-numeric: tabular-nums; }
.lgp-eg-b { padding: 3px 10px 0; font-size: 9.4px; line-height: 1.55; opacity: .95; }
.lgp-eg-a { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px 10px 9px; }
.lgp-eg-p { background: #fff; color: #8e1a10; border-radius: 7px; padding: 3px 8px;
  font-size: 9.2px; font-weight: 900; }
.lgp-eg-g { border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.15); color: #fff;
  border-radius: 7px; padding: 3px 8px; font-size: 9.2px; font-weight: 900; }
/* 경과 숫자 — 앞 숫자가 다 사라진 뒤 다음이 들어오면 «빈 칸»이 보인다. 페이드를 물린다. */
.lgp-min, .lgp-min2 { position: relative; display: inline-block; width: .62em; text-align: center; }
.lgp-min span, .lgp-min2 span { position: absolute; left: 0; right: 0; top: 0; opacity: 0; }
.lgp-min .lgp-g0, .lgp-min2 .lgp-g0 { position: static; opacity: 1; }

@media (max-width: 1023px) { .lgp { display: none; } }

/* ── 애니메이션 (15초). 구간: 평상20 · 누름28 · 화면전환33 · 작성51 · 전송57 · 도착64
     비상 전환은 층으로: 배너63→69 · 지도65→72 · 카드접힘66→74 · 비상카드71→78 · 유지93 ── */
@media (prefers-reduced-motion: no-preference) {
  .lgp-cap i        { animation: lgpDot 2.6s cubic-bezier(.4,0,.2,1) infinite; }
  .lgp-ph-wrap      { animation: lgpFloat 9s cubic-bezier(.4,0,.2,1) infinite; }
  .lgp-s1           { animation: lgpS1 15s cubic-bezier(.4,0,.2,1) infinite; }
  .lgp-s2           { animation: lgpS2 15s cubic-bezier(.4,0,.2,1) infinite; }
  .lgp-sos          { animation: lgpSos 15s cubic-bezier(.4,0,.2,1) infinite; }
  .lgp-sosi         { animation: lgpBell 3.4s cubic-bezier(.4,0,.2,1) infinite; }
  .lgp-chip.lgp-sev { animation: lgpSev 15s cubic-bezier(.4,0,.2,1) infinite; }
  .lgp-type         { animation: lgpType 15s cubic-bezier(.25,.55,.35,1) infinite; }
  .lgp-caret        { animation: lgpCaret 1.05s steps(1,end) infinite, lgpCaretGo 15s steps(1,end) infinite; }
  .lgp-btn          { animation: lgpSend 15s cubic-bezier(.4,0,.2,1) infinite; }
  .lgp-rp           { animation: lgpPulse 15s cubic-bezier(.16,1,.3,1) infinite; }
  .lgp-rlb          { animation: lgpRlb 15s cubic-bezier(.16,1,.3,1) infinite; }
  .lgp-swap         { animation: lgpSwapH 15s cubic-bezier(.4,0,.2,1) infinite; }
  .lgp-kpi          { animation: lgpKpi 15s cubic-bezier(.4,0,.2,1) infinite; }
  .lgp-eg           { animation: lgpBanner 15s cubic-bezier(.34,1.4,.64,1) infinite; }
  .lgp-eg-dot       { animation: lgpDot 1.5s cubic-bezier(.4,0,.2,1) infinite; }
  .lgp-rd-map       { animation: lgpBlur 15s cubic-bezier(.4,0,.2,1) infinite; }
  .lgp-bl .lgp-egc,
  .lgp-tag          { animation: lgpOn 15s cubic-bezier(.16,1,.3,1) infinite; }
  .lgp-sosbl .lgp-ping { animation: lgpPing 15s cubic-bezier(.16,1,.3,1) infinite; }
  .lgp-bl:not(.lgp-sosbl) { animation: lgpDim 15s cubic-bezier(.4,0,.2,1) infinite; }
  .lgp-rd-rl        { animation: lgpRl 15s cubic-bezier(.4,0,.2,1) infinite; }
  .lgp-cards-a      { animation: lgpFaceOut 15s cubic-bezier(.4,0,.2,1) infinite; }
  .lgp-cards-b      { animation: lgpFaceIn 15s cubic-bezier(.4,0,.2,1) infinite; }
  .lgp-egcard       { animation: lgpEgCard 15s cubic-bezier(.34,1.4,.64,1) infinite; }
  .lgp-min .lgp-g0, .lgp-min2 .lgp-g0 { animation: lgpN0 15s cubic-bezier(.4,0,.2,1) infinite; }
  .lgp-min .lgp-g1, .lgp-min2 .lgp-g1 { animation: lgpN1 15s cubic-bezier(.4,0,.2,1) infinite; }
  .lgp-min .lgp-g2, .lgp-min2 .lgp-g2 { animation: lgpN2 15s cubic-bezier(.4,0,.2,1) infinite; }
}
@keyframes lgpDot   { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .28; transform: scale(.8); } }
@keyframes lgpFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes lgpS1 { 0%,20% { opacity: 1; transform: none; }
  33%,93% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes lgpS2 { 0%,20% { opacity: 0; transform: translateY(8px); }
  33%,93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(8px); } }
@keyframes lgpSos { 0%,18%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); transform: scale(1); }
  22% { box-shadow: 0 0 0 3px rgba(220,38,38,.55); transform: scale(1.10); }
  25% { box-shadow: 0 0 0 9px rgba(220,38,38,.22); transform: scale(1.04); }
  28% { box-shadow: 0 0 0 15px rgba(220,38,38,0); transform: scale(1); } }
@keyframes lgpBell { 0%,86%,100% { transform: rotate(0); } 90% { transform: rotate(-14deg); } 94% { transform: rotate(12deg); } }
@keyframes lgpSev { 0%,42% { border-color: #d0d7de; background: #fff; color: #46505f; }
  45%,100% { border-color: #8e1a10; background: #fdeeec; color: #8e1a10; } }
@keyframes lgpType { 0%,33% { clip-path: inset(0 100% 0 0); } 51%,100% { clip-path: inset(0 0 0 0); } }
@keyframes lgpCaret { 0%,49% { opacity: 1; } 50%,100% { opacity: .15; } }
@keyframes lgpCaretGo { 0%,33% { opacity: 0; } 34%,57% { opacity: 1; } 58%,100% { opacity: 0; } }
@keyframes lgpSend { 0%,51% { background: #dc2626; transform: scale(1); }
  54% { background: #8e1a10; transform: scale(.955); }
  57% { background: #8e1a10; transform: scale(1.015); }
  59%,100% { background: #8e1a10; transform: scale(1); } }
@keyframes lgpPulse { 0%,57% { opacity: 0; left: 6px; transform: scaleX(.5); }
  59% { opacity: 1; left: 6px; transform: scaleX(1); }
  64% { opacity: 1; left: calc(100% - 28px); transform: scaleX(1); }
  67%,100% { opacity: 0; left: calc(100% - 28px); transform: scaleX(.6); } }
@keyframes lgpRlb { 0%,57% { opacity: 0; transform: translateY(4px); }
  64%,93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(4px); } }
@keyframes lgpSwapH { 0%,63% { height: 52px; } 69%,93% { height: 104px; } 100% { height: 52px; } }
@keyframes lgpKpi { 0%,63% { opacity: 1; transform: none; }
  69%,93% { opacity: 0; transform: translateY(-6px) scale(.985); } 100% { opacity: 1; transform: none; } }
@keyframes lgpBanner { 0%,63% { opacity: 0; transform: translateY(-14px) scale(.97); }
  69%,93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px) scale(.985); } }
@keyframes lgpBlur { 0%,65% { filter: blur(0px) saturate(1); }
  72%,93% { filter: blur(2.4px) saturate(.6); } 100% { filter: blur(0px) saturate(1); } }
@keyframes lgpOn { 0%,64% { opacity: 0; } 68%,93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lgpPing { 0%,64% { opacity: 0; transform: scale(1); } 68% { opacity: .55; transform: scale(1); }
  77% { opacity: 0; transform: scale(3.4); } 78% { opacity: .4; transform: scale(1); }
  87%,93% { opacity: 0; transform: scale(3.4); } 100% { opacity: 0; transform: scale(1); } }
@keyframes lgpDim { 0%,64% { opacity: 1; } 68%,93% { opacity: .26; } 100% { opacity: 1; } }
/* 비상 때 레이더가 ≈180px 로 줄면 거리링 라벨이 블립과 붙는다 — 그 구간엔 감춘다. */
@keyframes lgpRl { 0%,68% { opacity: 1; } 74%,93% { opacity: 0; } 100% { opacity: 1; } }
/* 카드 배치 교차 페이드 — 두 벌의 구간을 «물린다».
   어긋나면 한순간 둘 다 옅어져 카드 줄이 통째로 빈 것처럼 보인다. */
@keyframes lgpFaceOut { 0%,66% { opacity: 1; } 73%,93% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lgpFaceIn  { 0%,66% { opacity: 0; } 73%,93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lgpEgCard { 0%,71% { height: 0; opacity: 0; margin-bottom: 0; transform: translateY(-6px); }
  78%,93% { height: 76px; opacity: 1; margin-bottom: 8px; transform: none; }
  100% { height: 0; opacity: 0; margin-bottom: 0; transform: translateY(-6px); } }
@keyframes lgpN0 { 0%,74% { opacity: 1; } 77%,100% { opacity: 0; } }
@keyframes lgpN1 { 0%,74% { opacity: 0; } 77%,83% { opacity: 1; } 86%,100% { opacity: 0; } }
@keyframes lgpN2 { 0%,83% { opacity: 0; } 86%,93% { opacity: 1; } 100% { opacity: 0; } }

/* 움직임을 줄이는 사용자 — 끄고 «결과 상태»를 보여준다(꺼도 무슨 제품인지 전달돼야 한다). */
@media (prefers-reduced-motion: reduce) {
  .lgp-s1 { opacity: 0; } .lgp-s2 { opacity: 1; }
  .lgp-type { clip-path: none; }
  .lgp-kpi { opacity: 0; } .lgp-swap { height: 104px; } .lgp-eg { opacity: 1; }
  .lgp-rd-map { filter: blur(2.4px) saturate(.6); }
  .lgp-bl .lgp-egc, .lgp-tag { opacity: 1; }
  .lgp-bl:not(.lgp-sosbl) { opacity: .26; }
  .lgp-cards-a { opacity: 0; } .lgp-cards-b { opacity: 1; } .lgp-rd-rl { opacity: 0; }
  .lgp-egcard { height: 76px; opacity: 1; margin-bottom: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   지도 위 기상 연출 (`features/map/WeatherOverlay.tsx`)
   ══════════════════════════════════════════════════════════════════════════
   배경지도(VWorld 타일) 위에 «지금 이 현장의 날씨»를 얹는다. 날씨 바가 글자로 말하는 것을
   지도가 한 번 더 그림으로 말한다 — **연출은 근거를 대체하지 않는다**(판정·조문은 바에 남는다).

   ## 규율 — 앞서 발열로 데인 자리를 그대로 지킨다
   ① **합성만 한다** — transform/opacity 만 애니메이션한다. 이 저장소는 SVG transform 을
      매 프레임 재래스터해 발열을 낸 전례가 있다(§krFade 주석).
   ② **입자 수를 묶는다** — 비 34 · 눈 22 · 돌풍 8 · 구름그림자 5 상한. 지도 타일이 이미 무겁다.
   ③ **난수를 쓰지 않는다** — 인덱스 기반 결정론적 분포(제품 `barParticles` 와 같은 규약).
   ④ **모션 스위치를 존중한다** — `.mapwx-on` 이 붙었을 때만 돈다.
      미디어쿼리로만 끄면 사용자가 되돌릴 수 없다(아이폰 「동작 줄이기」에서 화면이 고장난 것처럼
      보였던 전례). 켜고 끄는 판정은 화면(`/field`)이 이미 쓰는 `sscs.radar.motion` 하나다.
   ⚠ 지도 조작(드래그·줌)을 막지 않는다 — 오버레이는 `pointer-events:none` 이다.
   ══════════════════════════════════════════════════════════════════════════ */
.mapwx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mapwx i { position: absolute; display: block; }
.mapwx .mapwx-tint { position: absolute; inset: 0; transition: background .7s ease; }

@keyframes mapwxFall  { from { transform: translate3d(0,0,0); }
                        to   { transform: translate3d(var(--dx,0), var(--dy,400px), 0); } }
@keyframes mapwxSway  { from { transform: translate3d(-9px,0,0); } to { transform: translate3d(9px,0,0); } }
@keyframes mapwxCross { from { transform: translate3d(0,0,0); } to { transform: translate3d(var(--tx,600px),0,0); } }
@keyframes mapwxShim  { 0%,100% { transform: scaleY(1);   opacity: .45; }
                        50%     { transform: scaleY(1.5); opacity: .82; } }
/* [2026-08-21] .30~.55 -> .52~.85 — 종전엔 「빛이 있나?」 싶을 만큼 옅었다. */
@keyframes mapwxSun   { 0%,100% { opacity: .52; transform: scale(1); }
                        50%     { opacity: .85; transform: scale(1.07); } }

/* 빗줄기 — 감싸는 칸이 «떨어지고» 안쪽이 «기운다».
   ⚠ 한 요소에 inline rotate 를 주고 wxFall 로 transform 을 애니메이션하면
     애니메이션이 inline transform 을 통째로 덮어 기울기가 사라진다(수직으로 떨어졌다). */
/* [2026-08-21] 굵기(width)는 이제 «컴포넌트»가 준다 — 여기 2px 고정이 가장 안 보이던 원인이었다.
   그림자를 키워 «밝은 지도» 위에서도 뜨게 한다. */
.mapwx-drop { display: block; border-radius: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1) 38%, rgba(120,175,225,1));
  box-shadow: 0 0 5px rgba(20,45,85,.6); }
.mapwx-swayx { display: block; }
/* [2026-08-21] 눈은 «흰 지도» 위에서 사라지기 쉽다 — 흰 광채만으론 안 보여 «파란 테»를 더한다. */
.mapwx-flake { border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px rgba(255,255,255,1), 0 0 0 1px rgba(120,160,205,.55); }
/* [2026-08-21] 두께(height)는 «컴포넌트»가 준다. 흰 줄만으론 밝은 지도에서 안 보여 «그림자»를 더한다. */
.mapwx-gust  { border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,1) 45%, rgba(214,232,250,1), transparent);
  box-shadow: 0 0 6px rgba(90,125,170,.5); }
/* 구름 — 지도 위에서 가장 잘 읽히는 연출은 «구름 그림자»다. 하늘이 아니라 땅을 그린다. */
/* [2026-08-21] .20 -> .30 — 「구름이 지나간다」가 읽혀야 한다. */
.mapwx-shadow { border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(38,58,88,.30), rgba(38,58,88,0) 70%); }
/* [2026-08-21] .55 -> .78 */
.mapwx-shim { border-radius: 50%; transform-origin: 50% 100%;
  background: linear-gradient(180deg, rgba(255,190,120,0), rgba(255,163,72,.78)); }
/* [2026-08-21] 맑음은 «해 하나»뿐이다.
   ⚠ 크기·투명도를 올려도 안 보였다 — 실측: 128px·70% 노출·opacity .84 인데 «옅은 노랑을 옅은 지도 위»에
     얹은 것이라 **대비가 없었다**. 문제는 세기가 아니라 색이었다.
   ⇒ 심을 «진한 호박색»으로 내려 가장자리가 생기게 한다(크림색 지도와 갈린다). */
.mapwx-sun  { border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,92,1) 14%, rgba(255,186,64,.72) 42%, rgba(255,176,50,0) 74%); }

/* ★ 모션의 «유일한» 스위치. 없으면 입자는 그 자리에 정지해 있다 —
   느리게 돌리지 않는다: rAF/애니메이션을 느리게 하는 건 CPU 는 계속 쓰면서 효과만 죽이는 조합이다. */
.mapwx-on .mapwx-fall  { animation: mapwxFall  linear infinite; }
.mapwx-on .mapwx-swayx { animation: mapwxSway  ease-in-out infinite alternate; }
.mapwx-on .mapwx-gust,
.mapwx-on .mapwx-shadow { animation: mapwxCross linear infinite; }
.mapwx-on .mapwx-shim  { animation: mapwxShim  ease-in-out infinite; }
.mapwx-on .mapwx-sun   { animation: mapwxSun   ease-in-out infinite; }

/* ── 오류 화면(400·403·404·500·503) ──────────────────────────────────────────
   컴포넌트: src/components/ErrorScreen.tsx (그 파일 머리말에 설계 근거)
   ⚠ 애니메이션 «클래스»는 아래 `prefers-reduced-motion: no-preference` 블록 «안»에만 둔다.
     이 파일 §115 의 기존 규약과 같다 — 동작 줄이기를 켠 기기에서는 정지화면이 되어야 한다. */
.err-wrap { display: grid; place-items: center; padding: 40px 20px; }
.err-full { min-height: 100dvh; }
.err-card { width: 100%; max-width: 468px; text-align: center; }
.err-art-box { display: grid; place-items: center; margin-bottom: 6px; }
.err-art { width: 100%; max-width: 300px; height: auto; overflow: visible; }

/* 선화 공통 — 색은 톤(err-emg/site/hq)이 정한다 */
.err-art { --ec: var(--tone, #2a5db0); }
.err-emg   { --tone: #dc2626; }
.err-site  { --tone: #b04a2a; }
.err-hq    { --tone: #2a5db0; }
/* ⚠ 포괄 규칙과 개별 규칙의 **특이도를 맞춘다.** 종전엔 포괄이 `.err-art [class^="err-"]`(0-2-0),
     개별이 `.err-paper`(0-1-0)라 포괄의 `fill:none` 이 모든 채움을 이겼다 — 안전모·도면·배지가
     통째로 윤곽만 남았다(2026-08-13 실측에서 발견). 개별에도 `.err-art ` 를 붙여 동률로 만들고,
     뒤에 오는 개별이 이기게 한다. */
.err-art [class^="err-"] { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.err-art .err-paper      { fill: #ffffff; stroke: #d0d7de; stroke-width: 2; }
.err-art .err-ground     { stroke: #c8d2df; stroke-width: 2.5; }
.err-art .err-post       { stroke: #8e9bab; stroke-width: 2.5; }
.err-art .err-line-2     { stroke: #d7dee7; stroke-width: 2.5; }
.err-art .err-accent     { stroke: var(--ec); stroke-width: 2.5; }
.err-art .err-accent-fill{ fill: var(--ec); stroke: none; opacity: .9; }
.err-art .err-emg        { stroke: #dc2626; stroke-width: 2.5; }
.err-art .err-emg-fill   { fill: #dc2626; stroke: none; }
.err-art .err-site-fill  { fill: #b04a2a; stroke: none; opacity: .92; }
.err-art .err-cone-band  { stroke: #ffffff; stroke-width: 4; }
.err-art .err-lamp       { fill: var(--ec); stroke: none; }
.err-art .err-hat        { fill: #f3c623; stroke: #b8952a; stroke-width: 2; }
.err-art .err-hat-brim   { stroke: #b8952a; stroke-width: 2.5; }
.err-art .err-hat-ridge  { stroke: #b8952a; stroke-width: 2; }
.err-art .err-boom-bar   { fill: #ffffff; stroke: var(--ec); stroke-width: 2.5; }
.err-art .err-boom-stripe{ stroke: var(--ec); stroke-width: 3; opacity: .55; }
.err-art .err-badge      { fill: var(--ec); stroke: none; }
.err-art .err-badge-t    { fill: #ffffff; stroke: none; font: 800 17px/1 system-ui, sans-serif; }
.err-art .err-beam       { fill: var(--ec); stroke: none; opacity: .16; }
.err-art .err-ray        { stroke: #dc2626; stroke-width: 2.5; opacity: .55; }
.err-art .err-scan       { fill: var(--ec); stroke: none; opacity: 0; }
.err-art .err-beacon-base{ stroke: #8e9bab; stroke-width: 3; }
.err-art .err-sign-t     { fill: #b04a2a; stroke: none; font: 800 15px/1 -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif; letter-spacing: .5px; }

.err-code  { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: #8e9bab; }
.err-title { margin: 6px 0 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: #1c3c6e; text-wrap: balance; }
.err-desc  { margin: 9px auto 0; max-width: 40ch; font-size: 13.5px; line-height: 1.65; color: #57606a; }
.err-trace { margin: 12px 0 0; font-size: 11.5px; color: #8e9bab; }
.err-trace span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #57606a; }
.err-actions { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.err-btn { display: inline-flex; align-items: center; border-radius: 10px; border: 1px solid #d0d7de;
  background: #fff; padding: 10px 16px; font-size: 13px; font-weight: 800; color: #46505f; text-decoration: none; }
.err-btn:hover { background: #f2f4f8; }
.err-btn-primary { background: #1c3c6e; border-color: #1c3c6e; color: #fff; }
.err-btn-primary:hover { background: #2a5db0; }
.err-btn:focus-visible { outline: 2px solid #2a5db0; outline-offset: 2px; }

@keyframes errScan   { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: .18; } 88% { opacity: .18; } 100% { transform: translateX(116px); opacity: 0; } }
@keyframes errDim    { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-7px); } }
@keyframes errBoom   { from { transform: rotate(-62deg); } to { transform: rotate(0deg); } }
@keyframes errHat    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes errSweep  { 0%, 100% { transform: rotate(-15deg); } 50% { transform: rotate(15deg); } }
@keyframes errSway   { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.1deg); } }
@keyframes errBeacon { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.07); } }
@keyframes errSwing  { 0%, 100% { transform: rotate(-2.6deg); } 50% { transform: rotate(2.6deg); } }
@keyframes errBand   { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

@media (prefers-reduced-motion: no-preference) {
  /* 1회 연출 — 「무슨 일이 일어났는지」를 보여주고 멈춘다 */
  .err-boom  { transform-origin: 58px 66px; animation: errBoom .72s cubic-bezier(.34, 1.3, .5, 1) both .1s; }
  .err-scan  { animation: errScan 2.6s ease-in-out .2s 2 both; }

  /* 무한 반복 — «상태»를 뜻하는 것만(찾는 중 · 지금 이상 · 점검 중) */
  .err-scan-head { transform-origin: 62px 76px; animation: errSweep 3.2s ease-in-out infinite; }
  .err-sway      { transform-origin: 100px 120px; animation: errSway 3.6s ease-in-out infinite; }
  .err-beacon    { transform-origin: 100px 38px; animation: errBeacon 1.15s ease-in-out infinite; }
  .err-swing     { transform-origin: 102px 28px; animation: errSwing 3.4s ease-in-out infinite; }
  .err-dim       { animation: errDim 2.4s ease-in-out infinite; }
  .err-helmet    { animation: errHat 2.8s ease-in-out infinite; }
  .err-cone-band { animation: errBand 2s ease-in-out infinite; }
  .err-cone-b .err-cone-band { animation-delay: .5s; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   비상 현장 카드 — 「비상 신고(SOS)」가 «열려 있는» 동안만 켜진다 (시안 확정 2026-08-25)
   ------------------------------------------------------------------------------
   켜고 끄는 근거는 서버다: GET /api/v1/incidents/emergency-active
     (report_channel='sos' AND status_code='open') — 상황 종료로 바뀌면 응답에서 빠져
     카드가 «스스로» 노멀로 돌아온다. 여기에 「끄는 규칙」을 따로 두지 않는다.

   ⚠ 움직이는 것은 **전부 사진 안 오버레이**에 있다. 카드 뿌리에는 등장 연출 `anim-rise` 가
     이미 걸려 있어 `animation` 을 덧대면 앞의 것이 통째로 덮인다(그리고 카드를 확대하면
     격자에서 옆 카드를 침범한다).
   ⚠ 애니메이션 스위치는 `.emg-motion` 하나 — 날씨의 `.wxi-motion` 과 같은 정책이다.
     스위치가 꺼져도 **벨은 남는다**(멈출 뿐 사라지지 않는다).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 사진 위 붉은 막 — 사진이 어떤 색이든 「여기가 비상」이 먼저 읽히게 한다 ── */
.emg-tint { position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: rgba(220, 38, 38, .30); opacity: .5; }
.emg-motion.emg-tint { animation: emgTint 1.4s ease-in-out infinite; }
@keyframes emgTint { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ── 벨 — 사진 «한가운데». 상단 비상 버튼과 같은 아이콘(Icon name="bell") ── */
.emg-bell-wrap { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center;
  pointer-events: none; }
.emg-bell { position: relative; z-index: 2; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 36% 30%, #f4706d, #dc2626 60%, #9e1c17);
  box-shadow: 0 6px 16px -4px rgba(220, 38, 38, .9), 0 0 0 2.5px rgba(255, 255, 255, .95); }
.emg-motion .emg-bell { animation: emgThump 1.1s ease-in-out infinite; }
@keyframes emgThump {
  0%, 100% { transform: scale(1);
             box-shadow: 0 6px 16px -4px rgba(220, 38, 38, .9), 0 0 0 2.5px rgba(255, 255, 255, .95); }
  50%      { transform: scale(1.11);
             box-shadow: 0 12px 28px -4px rgba(220, 38, 38, 1), 0 0 0 4.5px rgba(255, 255, 255, 1); }
}
/* 벨은 «위에 매달려» 흔들린다 — 회전 기준을 종의 머리에 둔다. */
.emg-bell > svg { display: block; transform-origin: 50% 18%; }
.emg-motion .emg-bell > svg { animation: emgSwing .58s ease-in-out infinite; }
@keyframes emgSwing { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
/* 멈춘 상태(모션 끄기·stale)에서도 «울리는 중»으로 읽히게 살짝 기울여 둔다. */
.emg-bell-wrap:not(.emg-motion) .emg-bell > svg { transform: rotate(-9deg); }

/* ── 울림 — 소리처럼 퍼지는 파문 두 겹. `.emg-motion` 일 때만 그린다 ── */
.emg-wave { position: absolute; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .55); }
/* ⚠ 파문의 움직임도 «스위치 안»에 둔다. 파문 요소 자체는 live 일 때만 그려지므로 여기 없어도
   동작은 같지만, 그러면 「움직이는 규칙은 전부 .emg-motion 안」이라는 불변식이 «말»로만 참이 되고
   검사가 그것을 못 지킨다. 실제로 2026-08-25 에 그 구멍으로 검사가 «거짓 초록»을 냈다. */
.emg-motion .emg-wave { animation: emgWave 1.3s ease-out infinite; }
.emg-motion .emg-wave-2 { animation-delay: .45s; }
@keyframes emgWave { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }

/* 한 현장에서 2건 이상 — 벨 옆에 건수. 「비상 1건」은 굳이 숫자를 안 쓴다. */
.emg-bell-n { position: absolute; z-index: 3; transform: translate(26px, -18px);
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; background: #fff; color: #a5201a;
  font-size: 11px; font-weight: 800; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }

/* ── 날씨 상태 바를 «사진 위»에 얹을 때 (.wxbar 는 기본이 흐름 배치라 여기서만 띄운다) ── */
.wxbar-onphoto { position: absolute; inset: 6px 6px auto 6px; z-index: 10;
  gap: 6px; padding: 5px 8px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px; }
/*
 * ★ [2026-08-25 사용자 지시] 바를 «살짝 투명»하게 — 뒤 현장 사진이 비쳐야 한다.
 *   ⚠ 하늘만 옅게 하면 «밝은 사진»에서 흰 글자가 묻힌다(실측: 불투명 4.03 → 0.5 에서 2.71).
 *     그래서 대비를 «하늘»이 아니라 «베일»이 지게 옮겼다 — 베일은 평평한 검정이라
 *     어둡게는 해도 사진의 결은 그대로 통과시킨다(투과를 안 죽인다).
 *   ⚠ `/field` 의 바는 홀로 서 있어 뒤에 사진이 없다 — 그래서 **`.wxbar` 본판은 안 건드린다.**
 *
 *   하늘 0.6 / 베일 .60→.46 을 고른 근거(브라우저 실측 · 밝은·어두운 사진 두 벌 대조):
 *     하늘/베일   투과Δ   밝은사진 대비   어두운사진 대비
 *       1.0/.38     0.1        4.03           4.04     ← 종전. 사진이 «전혀» 안 비친다
 *       0.6/.60    30.2        5.11           8.13     ← 채택. 「살짝」 + 대비 여유
 *       0.4/.60    45.3        4.57           9.15     ← 더 비치지만 4.5 에 여유가 없다
 *       0.5/.38    55.3        2.98           6.49     ← 베일을 안 올리면 이렇게 묻힌다
 *   재는 법: scratchpad/measure-wxbar.py (같은 바를 밝은/어두운 사진 위에 올려 픽셀을 대조).
 */
.wxbar-onphoto .wxb-sky { opacity: .6; }
.wxbar-onphoto > .wxb-veil { background: linear-gradient(90deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .46)); }

/* ── TBM 「조회중」 점 세 개 (2026-09-12 사용자 지시 · 시안 1) ──────────────────
 * 금일 작업내용을 친 뒤 위험요인이 뜨기까지 ≈530ms(디바운스 500 ＋ 서버 31~36 실측).
 * 그 동안 화면이 «가만히» 있어 기다리는 줄 몰랐다.
 * ⚠ 자리를 «안 늘린다» — 점은 4px 이고 머리줄 오른쪽 빈 칸에 든다(레이아웃 이동 0).
 *   그것이 시안 다섯 중 이것을 고른 까닭이다(막대 +11px · 뼈대 +96px 은 짧은 대기에 출렁인다).
 */
@keyframes tbmDots { 0%, 80%, 100% { opacity: .22 } 40% { opacity: 1 } }
.tbm-dots i { display: inline-block; width: 4px; height: 4px; border-radius: 50%;
              background: currentColor; margin-left: 3px; animation: tbmDots 1.25s infinite; }
.tbm-dots i:nth-child(2) { animation-delay: .18s }
.tbm-dots i:nth-child(3) { animation-delay: .36s }

/* 🔴 점은 «안 깜빡이되» 자리는 남긴다 — 무엇이 되고 있나(기능)를 안 잃는다.
 *   이 저장소의 관례다(globals.css 의 다른 reduce 블록들과 같은 판단). */
@media (prefers-reduced-motion: reduce) {
  .tbm-dots i { animation: none; opacity: .55; }
}
.marker\:text-muted *::marker {
  color: rgb(87 96 106 );
}
.marker\:text-muted::marker {
  color: rgb(87 96 106 );
}
.file\:mr-2::file-selector-button {
  margin-right: 0.5rem;
}
.file\:mr-3::file-selector-button {
  margin-right: 0.75rem;
}
.file\:rounded-\[6px\]::file-selector-button {
  border-radius: 6px;
}
.file\:rounded-lg::file-selector-button {
  border-radius: 0.5rem;
}
.file\:border::file-selector-button {
  border-width: 1px;
}
.file\:border-0::file-selector-button {
  border-width: 0px;
}
.file\:border-line::file-selector-button {
  --tw-border-opacity: 1;
  border-color: rgb(208 215 222 / var(--tw-border-opacity, 1));
}
.file\:bg-hq::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: rgb(42 93 176 / var(--tw-bg-opacity, 1));
}
.file\:bg-surface::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 252 / var(--tw-bg-opacity, 1));
}
.file\:px-2::file-selector-button {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.file\:px-3::file-selector-button {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.file\:py-1::file-selector-button {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.file\:py-1\.5::file-selector-button {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.file\:text-\[11px\]::file-selector-button {
  font-size: 11px;
}
.file\:text-\[12\.5px\]::file-selector-button {
  font-size: 12.5px;
}
.file\:font-bold::file-selector-button {
  font-weight: 700;
}
.file\:font-semibold::file-selector-button {
  font-weight: 600;
}
.file\:text-hq::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(42 93 176 / var(--tw-text-opacity, 1));
}
.file\:text-white::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.placeholder\:font-medium::-moz-placeholder {
  font-weight: 500;
}
.placeholder\:font-medium::placeholder {
  font-weight: 500;
}
.placeholder\:font-normal::-moz-placeholder {
  font-weight: 400;
}
.placeholder\:font-normal::placeholder {
  font-weight: 400;
}
.placeholder\:text-\[\#9aa4b2\]::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(154 164 178 / var(--tw-text-opacity, 1));
}
.placeholder\:text-\[\#9aa4b2\]::placeholder {
  --tw-text-opacity: 1;
  color: rgb(154 164 178 / var(--tw-text-opacity, 1));
}
.placeholder\:text-\[\#aab2bd\]::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(170 178 189 / var(--tw-text-opacity, 1));
}
.placeholder\:text-\[\#aab2bd\]::placeholder {
  --tw-text-opacity: 1;
  color: rgb(170 178 189 / var(--tw-text-opacity, 1));
}
.placeholder\:text-\[\#c3cbd6\]::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(195 203 214 / var(--tw-text-opacity, 1));
}
.placeholder\:text-\[\#c3cbd6\]::placeholder {
  --tw-text-opacity: 1;
  color: rgb(195 203 214 / var(--tw-text-opacity, 1));
}
.placeholder\:text-muted::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(87 96 106 / var(--tw-text-opacity, 1));
}
.placeholder\:text-muted::placeholder {
  --tw-text-opacity: 1;
  color: rgb(87 96 106 / var(--tw-text-opacity, 1));
}
.first\:mt-0:first-child {
  margin-top: 0px;
}
.first\:border-t-0:first-child {
  border-top-width: 0px;
}
.last\:mb-0:last-child {
  margin-bottom: 0px;
}
.last\:border-0:last-child {
  border-width: 0px;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.odd\:bg-white:nth-child(odd) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.even\:bg-bg\/40:nth-child(even) {
  background-color: rgb(245 247 250 / 0.4);
}
.hover\:-translate-y-px:hover {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-\[\#0a7d6e\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(10 125 110 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#9db8dd\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(157 184 221 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#b9c4d1\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(185 196 209 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#cfe0f7\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(207 224 247 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#e0b8af\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(224 184 175 / var(--tw-border-opacity, 1));
}
.hover\:border-black\/30:hover {
  border-color: rgb(0 0 0 / 0.3);
}
.hover\:border-chk:hover {
  --tw-border-opacity: 1;
  border-color: rgb(31 122 77 / var(--tw-border-opacity, 1));
}
.hover\:border-emg:hover {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.hover\:border-hq:hover {
  --tw-border-opacity: 1;
  border-color: rgb(42 93 176 / var(--tw-border-opacity, 1));
}
.hover\:border-line:hover {
  --tw-border-opacity: 1;
  border-color: rgb(208 215 222 / var(--tw-border-opacity, 1));
}
.hover\:border-l-hq:hover {
  --tw-border-opacity: 1;
  border-left-color: rgb(42 93 176 / var(--tw-border-opacity, 1));
}
.hover\:bg-\[\#0f5f2a\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(15 95 42 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#14663c\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(20 102 60 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#186a41\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(24 106 65 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#244f97\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(36 79 151 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#963c20\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(150 60 32 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#9a3d22\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(154 61 34 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#a5301f\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(165 48 31 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#b91c1c\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#c01f1f\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(192 31 31 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#dde7f5\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(221 231 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#e2ebf9\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(226 235 249 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#e3e8ef\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(227 232 239 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#e4f6ea\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(228 246 234 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#e6eefa\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(230 238 250 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#e8ecf2\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(232 236 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#e8edf4\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(232 237 244 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#e8f0fb\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(232 240 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#e9edf3\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(233 237 243 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#e9eef6\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(233 238 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#eaf5ef\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(234 245 239 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#eef1f6\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(238 241 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#eefaf1\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(238 250 241 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f0f2f5\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 242 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f0f3f8\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 243 248 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f0f4fa\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 244 250 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f0f9f3\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 243 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f1f6fd\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 246 253 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f2f4f7\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 247 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f2f4f8\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 248 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f2f5f9\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(242 245 249 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f2f5fa\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(242 245 250 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f2f6fb\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(242 246 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f2f6fc\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(242 246 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f4f6f9\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 246 249 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f6f8fb\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(246 248 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f6f9fe\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(246 249 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f7f9fc\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f8fafc\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#f8fafd\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 253 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#faecd4\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 236 212 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#faf1de\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 241 222 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#faf8ff\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 248 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fafbfc\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 251 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fafbfd\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 251 253 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fbd5d5\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(251 213 213 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fbeae5\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(251 234 229 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fbfcfe\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(251 252 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fdeceb\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 236 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fdecec\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 236 236 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fdf1ec\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 241 236 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fdf3e0\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 243 224 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fdf4f2\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 244 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fdf6e9\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 246 233 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fdf6ee\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 246 238 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fee2e2\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fef0e6\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 240 230 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fef3da\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 218 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fef3dc\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 220 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fef3e2\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 226 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#fff5f5\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 245 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-bg:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 247 250 / var(--tw-bg-opacity, 1));
}
.hover\:bg-black\/5:hover {
  background-color: rgb(0 0 0 / 0.05);
}
.hover\:bg-black\/75:hover {
  background-color: rgb(0 0 0 / 0.75);
}
.hover\:bg-black\/80:hover {
  background-color: rgb(0 0 0 / 0.8);
}
.hover\:bg-black\/\[0\.03\]:hover {
  background-color: rgb(0 0 0 / 0.03);
}
.hover\:bg-emg\/10:hover {
  background-color: rgb(220 38 38 / 0.1);
}
.hover\:bg-emgbg:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 232 232 / var(--tw-bg-opacity, 1));
}
.hover\:bg-hq\/10:hover {
  background-color: rgb(42 93 176 / 0.1);
}
.hover\:bg-hq\/5:hover {
  background-color: rgb(42 93 176 / 0.05);
}
.hover\:bg-hqbg:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(238 243 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-navy:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(28 60 110 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rule:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(238 240 243 / var(--tw-bg-opacity, 1));
}
.hover\:bg-site\/90:hover {
  background-color: rgb(176 74 42 / 0.9);
}
.hover\:bg-site\/\[\.12\]:hover {
  background-color: rgb(176 74 42 / .12);
}
.hover\:bg-surface:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/15:hover {
  background-color: rgb(255 255 255 / 0.15);
}
.hover\:bg-white\/25:hover {
  background-color: rgb(255 255 255 / 0.25);
}
.hover\:bg-white\/60:hover {
  background-color: rgb(255 255 255 / 0.6);
}
.hover\:text-chk:hover {
  --tw-text-opacity: 1;
  color: rgb(31 122 77 / var(--tw-text-opacity, 1));
}
.hover\:text-emg:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.hover\:text-hint:hover {
  --tw-text-opacity: 1;
  color: rgb(70 80 95 / var(--tw-text-opacity, 1));
}
.hover\:text-hq:hover {
  --tw-text-opacity: 1;
  color: rgb(42 93 176 / var(--tw-text-opacity, 1));
}
.hover\:text-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(34 34 34 / var(--tw-text-opacity, 1));
}
.hover\:text-muted:hover {
  --tw-text-opacity: 1;
  color: rgb(87 96 106 / var(--tw-text-opacity, 1));
}
.hover\:text-navy:hover {
  --tw-text-opacity: 1;
  color: rgb(28 60 110 / var(--tw-text-opacity, 1));
}
.hover\:text-sub:hover {
  --tw-text-opacity: 1;
  color: rgb(58 67 79 / var(--tw-text-opacity, 1));
}
.hover\:text-warn:hover {
  --tw-text-opacity: 1;
  color: rgb(192 57 43 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:opacity-90:hover {
  opacity: 0.9;
}
.hover\:shadow-\[0_12px_34px_rgba\(28\2c 60\2c 110\2c \.16\)\]:hover {
  --tw-shadow: 0 12px 34px rgba(28,60,110,.16);
  --tw-shadow-colored: 0 12px 34px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_8px_22px_-14px_rgba\(28\2c 60\2c 110\2c \.5\)\]:hover {
  --tw-shadow: 0 8px 22px -14px rgba(28,60,110,.5);
  --tw-shadow-colored: 0 8px 22px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:brightness-105:hover {
  --tw-brightness: brightness(1.05);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.hover\:brightness-110:hover {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.hover\:brightness-95:hover {
  --tw-brightness: brightness(.95);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.hover\:brightness-\[\.97\]:hover {
  --tw-brightness: brightness(.97);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.focus\:border-\[\#b04a2a\]:focus {
  --tw-border-opacity: 1;
  border-color: rgb(176 74 42 / var(--tw-border-opacity, 1));
}
.focus\:border-hq:focus {
  --tw-border-opacity: 1;
  border-color: rgb(42 93 176 / var(--tw-border-opacity, 1));
}
.focus\:border-navy:focus {
  --tw-border-opacity: 1;
  border-color: rgb(28 60 110 / var(--tw-border-opacity, 1));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-hq:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(42 93 176 / var(--tw-ring-opacity, 1));
}
.focus\:ring-hq\/15:focus {
  --tw-ring-color: rgb(42 93 176 / 0.15);
}
.focus\:ring-hq\/20:focus {
  --tw-ring-color: rgb(42 93 176 / 0.2);
}
.focus\:ring-hq\/25:focus {
  --tw-ring-color: rgb(42 93 176 / 0.25);
}
.focus\:ring-hq\/30:focus {
  --tw-ring-color: rgb(42 93 176 / 0.3);
}
.focus\:ring-hq\/40:focus {
  --tw-ring-color: rgb(42 93 176 / 0.4);
}
.focus-visible\:outline:focus-visible {
  outline-style: solid;
}
.focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}
.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}
.focus-visible\:outline-\[\#2a5db0\]:focus-visible {
  outline-color: #2a5db0;
}
.focus-visible\:outline-hq:focus-visible {
  outline-color: #2a5db0;
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-hq\/40:focus-visible {
  --tw-ring-color: rgb(42 93 176 / 0.4);
}
.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[\.97\]:active {
  --tw-scale-x: .97;
  --tw-scale-y: .97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[\.98\]:active {
  --tw-scale-x: .98;
  --tw-scale-y: .98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[\.995\]:active {
  --tw-scale-x: .995;
  --tw-scale-y: .995;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[\.997\]:active {
  --tw-scale-x: .997;
  --tw-scale-y: .997;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[\.99\]:active {
  --tw-scale-x: .99;
  --tw-scale-y: .99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[0\.97\]:active {
  --tw-scale-x: 0.97;
  --tw-scale-y: 0.97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:cursor-grabbing:active {
  cursor: grabbing;
}
.active\:bg-hqbg:active {
  --tw-bg-opacity: 1;
  background-color: rgb(238 243 251 / var(--tw-bg-opacity, 1));
}
.active\:bg-surface:active {
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 252 / var(--tw-bg-opacity, 1));
}
.hover\:enabled\:border-hq:enabled:hover {
  --tw-border-opacity: 1;
  border-color: rgb(42 93 176 / var(--tw-border-opacity, 1));
}
.hover\:enabled\:bg-\[\#f2f4f8\]:enabled:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 248 / var(--tw-bg-opacity, 1));
}
.hover\:enabled\:brightness-110:enabled:hover {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.disabled\:cursor-default:disabled {
  cursor: default;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:bg-\[\#f4f6f9\]:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(244 246 249 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-\[\#f6f7f9\]:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(246 247 249 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-\[\#f6f8fb\]:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(246 248 251 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-bg:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(245 247 250 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-surface:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 252 / var(--tw-bg-opacity, 1));
}
.disabled\:pr-8:disabled {
  padding-right: 2rem;
}
.disabled\:text-\[\#aab2bd\]:disabled {
  --tw-text-opacity: 1;
  color: rgb(170 178 189 / var(--tw-text-opacity, 1));
}
.disabled\:text-muted:disabled {
  --tw-text-opacity: 1;
  color: rgb(87 96 106 / var(--tw-text-opacity, 1));
}
.disabled\:text-muted\/60:disabled {
  color: rgb(87 96 106 / 0.6);
}
.disabled\:text-sub:disabled {
  --tw-text-opacity: 1;
  color: rgb(58 67 79 / var(--tw-text-opacity, 1));
}
.disabled\:opacity-100:disabled {
  opacity: 1;
}
.disabled\:opacity-25:disabled {
  opacity: 0.25;
}
.disabled\:opacity-30:disabled {
  opacity: 0.3;
}
.disabled\:opacity-35:disabled {
  opacity: 0.35;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-45:disabled {
  opacity: 0.45;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:opacity-55:disabled {
  opacity: 0.55;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
.disabled\:\[background-image\:none\]:disabled {
  background-image: none;
}
.disabled\:hover\:border-\[\#e9edf3\]:hover:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(233 237 243 / var(--tw-border-opacity, 1));
}
.disabled\:hover\:bg-white:hover:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.group[open] .group-open\:hidden {
  display: none;
}
.group:hover .group-hover\:bg-hq {
  --tw-bg-opacity: 1;
  background-color: rgb(42 93 176 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:text-hq {
  --tw-text-opacity: 1;
  color: rgb(42 93 176 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:ring-hq\/40 {
  --tw-ring-color: rgb(42 93 176 / 0.4);
}
.group:focus-visible .group-focus-visible\:opacity-100 {
  opacity: 1;
}
@media (min-width: 480px) {

  .min-\[480px\]\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .min-\[480px\]\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 640px) {

  .sm\:order-last {
    order: 9999;
  }

  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:ml-0 {
    margin-left: 0px;
  }

  .sm\:ml-\[22px\] {
    margin-left: 22px;
  }

  .sm\:line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-\[44px\] {
    height: 44px;
  }

  .sm\:h-\[46px\] {
    height: 46px;
  }

  .sm\:max-h-\[86vh\] {
    max-height: 86vh;
  }

  .sm\:min-h-\[188px\] {
    min-height: 188px;
  }

  .sm\:w-\[44px\] {
    width: 44px;
  }

  .sm\:w-\[46px\] {
    width: 46px;
  }

  .sm\:w-\[520px\] {
    width: 520px;
  }

  .sm\:w-\[64px\] {
    width: 64px;
  }

  .sm\:w-\[calc\(100\%-22px\)\] {
    width: calc(100% - 22px);
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:w-\[calc\(50\%-6px\)\] {
    width: calc(50% - 6px);
  }

  .sm\:max-w-\[320px\] {
    max-width: 320px;
  }

  .sm\:max-w-\[400px\] {
    max-width: 400px;
  }

  .sm\:max-w-\[520px\] {
    max-width: 520px;
  }

  .sm\:flex-1 {
    flex: 1 1 0%;
  }

  .sm\:flex-none {
    flex: none;
  }

  .sm\:basis-auto {
    flex-basis: auto;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[1\.1fr_1fr_1fr\] {
    grid-template-columns: 1.1fr 1fr 1fr;
  }

  .sm\:grid-cols-\[1fr_1fr_auto\] {
    grid-template-columns: 1fr 1fr auto;
  }

  .sm\:grid-cols-\[auto_minmax\(0\2c 1fr\)\] {
    grid-template-columns: auto minmax(0,1fr);
  }

  .sm\:grid-cols-\[minmax\(0\2c 1\.6fr\)_186px_minmax\(0\2c 1\.3fr\)_auto\] {
    grid-template-columns: minmax(0,1.6fr) 186px minmax(0,1.3fr) auto;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:flex-wrap {
    flex-wrap: wrap;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:rounded-2xl {
    border-radius: 1rem;
  }

  .sm\:rounded-\[14px\] {
    border-radius: 14px;
  }

  .sm\:border-b-0 {
    border-bottom-width: 0px;
  }

  .sm\:border-r {
    border-right-width: 1px;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:p-9 {
    padding: 2.25rem;
  }

  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-9 {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }

  .sm\:pr-3\.5 {
    padding-right: 0.875rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-\[16px\] {
    font-size: 16px;
  }

  .sm\:text-\[22px\] {
    font-size: 22px;
  }

  .sm\:text-\[30px\] {
    font-size: 30px;
  }

  .sm\:last\:border-r-0:last-child {
    border-right-width: 0px;
  }
}
@media (min-width: 768px) {

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:contents {
    display: contents;
  }

  .md\:max-w-\[760px\] {
    max-width: 760px;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:items-start {
    align-items: flex-start;
  }

  .md\:gap-\[22px\] {
    gap: 22px;
  }

  .md\:gap-x-2\.5 {
    -moz-column-gap: 0.625rem;
         column-gap: 0.625rem;
  }

  .md\:gap-x-3\.5 {
    -moz-column-gap: 0.875rem;
         column-gap: 0.875rem;
  }
}
@media (min-width: 1024px) {

  .lg\:static {
    position: static;
  }

  .lg\:relative {
    position: relative;
  }

  .lg\:sticky {
    position: sticky;
  }

  .lg\:bottom-0 {
    bottom: 0px;
  }

  .lg\:bottom-auto {
    bottom: auto;
  }

  .lg\:top-0 {
    top: 0px;
  }

  .lg\:top-1\/2 {
    top: 50%;
  }

  .lg\:top-2 {
    top: 0.5rem;
  }

  .lg\:z-0 {
    z-index: 0;
  }

  .lg\:z-10 {
    z-index: 10;
  }

  .lg\:z-auto {
    z-index: auto;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-start-1 {
    grid-column-start: 1;
  }

  .lg\:col-start-2 {
    grid-column-start: 2;
  }

  .lg\:row-span-3 {
    grid-row: span 3 / span 3;
  }

  .lg\:row-start-1 {
    grid-row-start: 1;
  }

  .lg\:row-start-2 {
    grid-row-start: 2;
  }

  .lg\:row-start-3 {
    grid-row-start: 3;
  }

  .lg\:mb-2 {
    margin-bottom: 0.5rem;
  }

  .lg\:mb-3 {
    margin-bottom: 0.75rem;
  }

  .lg\:ml-auto {
    margin-left: auto;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:inline-flex {
    display: inline-flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:contents {
    display: contents;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:aspect-auto {
    aspect-ratio: auto;
  }

  .lg\:h-6 {
    height: 1.5rem;
  }

  .lg\:h-\[30px\] {
    height: 30px;
  }

  .lg\:h-\[44px\] {
    height: 44px;
  }

  .lg\:h-full {
    height: 100%;
  }

  .lg\:max-h-\[calc\(100dvh-100px\)\] {
    max-height: calc(100dvh - 100px);
  }

  .lg\:min-h-0 {
    min-height: 0px;
  }

  .lg\:min-h-\[168px\] {
    min-height: 168px;
  }

  .lg\:min-h-\[320px\] {
    min-height: 320px;
  }

  .lg\:w-6 {
    width: 1.5rem;
  }

  .lg\:w-\[236px\] {
    width: 236px;
  }

  .lg\:w-\[30px\] {
    width: 30px;
  }

  .lg\:w-\[320px\] {
    width: 320px;
  }

  .lg\:w-\[4\.6em\] {
    width: 4.6em;
  }

  .lg\:w-\[420px\] {
    width: 420px;
  }

  .lg\:w-\[46px\] {
    width: 46px;
  }

  .lg\:w-auto {
    width: auto;
  }

  .lg\:min-w-0 {
    min-width: 0px;
  }

  .lg\:max-w-none {
    max-width: none;
  }

  .lg\:flex-1 {
    flex: 1 1 0%;
  }

  .lg\:flex-none {
    flex: none;
  }

  .lg\:-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.05fr_1fr\] {
    grid-template-columns: 1.05fr 1fr;
  }

  .lg\:grid-cols-\[1\.3fr_1fr\] {
    grid-template-columns: 1.3fr 1fr;
  }

  .lg\:grid-cols-\[1\.6fr_1fr\] {
    grid-template-columns: 1.6fr 1fr;
  }

  .lg\:grid-cols-\[1fr_1fr_2fr\] {
    grid-template-columns: 1fr 1fr 2fr;
  }

  .lg\:grid-cols-\[1fr_300px\] {
    grid-template-columns: 1fr 300px;
  }

  .lg\:grid-cols-\[300px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 300px minmax(0,1fr);
  }

  .lg\:grid-cols-\[360px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 360px minmax(0,1fr);
  }

  .lg\:grid-cols-\[400px_1fr\] {
    grid-template-columns: 400px 1fr;
  }

  .lg\:grid-cols-\[7fr_3fr\] {
    grid-template-columns: 7fr 3fr;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
    grid-template-columns: minmax(0,1fr) auto;
  }

  .lg\:grid-cols-\[minmax\(0\2c 2fr\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: minmax(0,2fr) minmax(0,1fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 7fr\)_minmax\(0\2c 3fr\)\] {
    grid-template-columns: minmax(0,7fr) minmax(0,3fr);
  }

  .lg\:grid-cols-\[clamp\(360px\2c calc\(100\%_-_794px\)\2c 560px\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: clamp(360px, calc(100% - 794px), 560px) minmax(0,1fr);
  }

  .lg\:grid-cols-\[minmax\(240px\2c 300px\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: minmax(240px,300px) minmax(0,1fr);
  }

  .lg\:grid-rows-\[auto_auto_1fr\] {
    grid-template-rows: auto auto 1fr;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:flex-wrap {
    flex-wrap: wrap;
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:items-baseline {
    align-items: baseline;
  }

  .lg\:items-stretch {
    align-items: stretch;
  }

  .lg\:gap-1\.5 {
    gap: 0.375rem;
  }

  .lg\:gap-2 {
    gap: 0.5rem;
  }

  .lg\:gap-3 {
    gap: 0.75rem;
  }

  .lg\:gap-3\.5 {
    gap: 0.875rem;
  }

  .lg\:gap-4 {
    gap: 1rem;
  }

  .lg\:gap-5 {
    gap: 1.25rem;
  }

  .lg\:gap-\[18px\] {
    gap: 18px;
  }

  .lg\:gap-x-2 {
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
  }

  .lg\:gap-y-0\.5 {
    row-gap: 0.125rem;
  }

  .lg\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .lg\:overflow-hidden {
    overflow: hidden;
  }

  .lg\:overflow-y-auto {
    overflow-y: auto;
  }

  .lg\:overflow-x-clip {
    overflow-x: clip;
  }

  .lg\:overscroll-contain {
    overscroll-behavior: contain;
  }

  .lg\:whitespace-nowrap {
    white-space: nowrap;
  }

  .lg\:rounded-\[9px\] {
    border-radius: 9px;
  }

  .lg\:rounded-xl {
    border-radius: 0.75rem;
  }

  .lg\:border {
    border-width: 1px;
  }

  .lg\:border-0 {
    border-width: 0px;
  }

  .lg\:border-r {
    border-right-width: 1px;
  }

  .lg\:border-line {
    --tw-border-opacity: 1;
    border-color: rgb(208 215 222 / var(--tw-border-opacity, 1));
  }

  .lg\:bg-bg {
    --tw-bg-opacity: 1;
    background-color: rgb(245 247 250 / var(--tw-bg-opacity, 1));
  }

  .lg\:bg-surface {
    --tw-bg-opacity: 1;
    background-color: rgb(247 249 252 / var(--tw-bg-opacity, 1));
  }

  .lg\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .lg\:p-8 {
    padding: 2rem;
  }

  .lg\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .lg\:px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }

  .lg\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .lg\:px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  .lg\:px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .lg\:py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
  }

  .lg\:py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .lg\:py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  .lg\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .lg\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .lg\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .lg\:pb-1 {
    padding-bottom: 0.25rem;
  }

  .lg\:pr-1 {
    padding-right: 0.25rem;
  }

  .lg\:pt-2 {
    padding-top: 0.5rem;
  }

  .lg\:text-\[10px\] {
    font-size: 10px;
  }

  .lg\:text-\[11\.5px\] {
    font-size: 11.5px;
  }

  .lg\:text-\[12\.5px\] {
    font-size: 12.5px;
  }

  .lg\:text-\[12px\] {
    font-size: 12px;
  }

  .lg\:text-\[14px\] {
    font-size: 14px;
  }

  .lg\:leading-tight {
    line-height: 1.25;
  }

  .lg\:shadow-none {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}
@media (min-width: 1280px) {

  .xl\:relative {
    position: relative;
  }

  .xl\:right-auto {
    right: auto;
  }

  .xl\:top-auto {
    top: auto;
  }

  .xl\:order-1 {
    order: 1;
  }

  .xl\:order-10 {
    order: 10;
  }

  .xl\:order-11 {
    order: 11;
  }

  .xl\:order-2 {
    order: 2;
  }

  .xl\:order-3 {
    order: 3;
  }

  .xl\:order-4 {
    order: 4;
  }

  .xl\:order-5 {
    order: 5;
  }

  .xl\:order-6 {
    order: 6;
  }

  .xl\:order-7 {
    order: 7;
  }

  .xl\:order-8 {
    order: 8;
  }

  .xl\:order-9 {
    order: 9;
  }

  .xl\:ml-auto {
    margin-left: auto;
  }

  .xl\:mt-0 {
    margin-top: 0px;
  }

  .xl\:inline-block {
    display: inline-block;
  }

  .xl\:inline {
    display: inline;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:contents {
    display: contents;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:w-\[104px\] {
    width: 104px;
  }

  .xl\:w-\[108px\] {
    width: 108px;
  }

  .xl\:w-\[116px\] {
    width: 116px;
  }

  .xl\:w-\[54px\] {
    width: 54px;
  }

  .xl\:w-\[64px\] {
    width: 64px;
  }

  .xl\:w-\[68px\] {
    width: 68px;
  }

  .xl\:w-\[86px\] {
    width: 86px;
  }

  .xl\:w-auto {
    width: auto;
  }

  .xl\:min-w-\[118px\] {
    min-width: 118px;
  }

  .xl\:max-w-\[1240px\] {
    max-width: 1240px;
  }

  .xl\:flex-1 {
    flex: 1 1 0%;
  }

  .xl\:flex-none {
    flex: none;
  }

  .xl\:shrink-0 {
    flex-shrink: 0;
  }

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-\[1\.05fr_1\.25fr\] {
    grid-template-columns: 1.05fr 1.25fr;
  }

  .xl\:grid-cols-\[1\.5fr_1fr\] {
    grid-template-columns: 1.5fr 1fr;
  }

  .xl\:grid-cols-\[1fr_336px\] {
    grid-template-columns: 1fr 336px;
  }

  .xl\:gap-0 {
    gap: 0px;
  }

  .xl\:gap-x-2 {
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
  }

  .xl\:rounded-\[8px\] {
    border-radius: 8px;
  }

  .xl\:border {
    border-width: 1px;
  }

  .xl\:border-line {
    --tw-border-opacity: 1;
    border-color: rgb(208 215 222 / var(--tw-border-opacity, 1));
  }

  .xl\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .xl\:px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }

  .xl\:py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .xl\:pl-0 {
    padding-left: 0px;
  }

  .xl\:pr-0 {
    padding-right: 0px;
  }

  .xl\:text-\[11\.5px\] {
    font-size: 11.5px;
  }

  .xl\:font-bold {
    font-weight: 700;
  }

  .xl\:text-hint {
    --tw-text-opacity: 1;
    color: rgb(70 80 95 / var(--tw-text-opacity, 1));
  }
}
@media (min-width: 1536px) {

  .\32xl\:mb-0 {
    margin-bottom: 0px;
  }

  .\32xl\:mt-0 {
    margin-top: 0px;
  }

  .\32xl\:block {
    display: block;
  }

  .\32xl\:flex {
    display: flex;
  }

  .\32xl\:grid {
    display: grid;
  }

  .\32xl\:hidden {
    display: none;
  }

  .\32xl\:w-\[350px\] {
    width: 350px;
  }

  .\32xl\:w-\[380px\] {
    width: 380px;
  }

  .\32xl\:min-w-0 {
    min-width: 0px;
  }

  .\32xl\:max-w-\[1440px\] {
    max-width: 1440px;
  }

  .\32xl\:flex-1 {
    flex: 1 1 0%;
  }

  .\32xl\:flex-none {
    flex: none;
  }

  .\32xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .\32xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .\32xl\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 1\.5fr\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,1.5fr);
  }

  .\32xl\:grid-cols-\[minmax\(0\2c 2\.5fr\)_186px_minmax\(0\2c 1\.25fr\)_auto\] {
    grid-template-columns: minmax(0,2.5fr) 186px minmax(0,1.25fr) auto;
  }

  .\32xl\:flex-col {
    flex-direction: column;
  }

  .\32xl\:items-center {
    align-items: center;
  }

  .\32xl\:items-stretch {
    align-items: stretch;
  }

  .\32xl\:justify-center {
    justify-content: center;
  }

  .\32xl\:gap-2 {
    gap: 0.5rem;
  }

  .\32xl\:gap-3 {
    gap: 0.75rem;
  }

  .\32xl\:gap-x-2 {
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
  }

  .\32xl\:gap-y-0\.5 {
    row-gap: 0.125rem;
  }

  .\32xl\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .\32xl\:text-\[14px\] {
    font-size: 14px;
  }
}
@media (min-width: 1900px) {

  .min-\[1900px\]\:flex {
    display: flex;
  }

  .min-\[1900px\]\:flex-row {
    flex-direction: row;
  }

  .min-\[1900px\]\:items-start {
    align-items: flex-start;
  }
}
@media (min-width: 1024px) {

  .lg\:\[\&\>\*\:last-child\]\:mb-0>*:last-child {
    margin-bottom: 0px;
  }

  .lg\:\[\&\>\*\]\:mb-0>* {
    margin-bottom: 0px;
  }

  .lg\:\[\&\>\*\]\:mb-3>* {
    margin-bottom: 0.75rem;
  }
}
@media (min-width: 1536px) {

  .\32xl\:\[\&\>\*\]\:mb-0>* {
    margin-bottom: 0px;
  }
}
@media (min-width: 1024px) {

  .lg\:\[\&\>div\>div\]\:mb-0>div>div {
    margin-bottom: 0px;
  }

  .lg\:\[\&\>div\]\:mb-0>div {
    margin-bottom: 0px;
  }

  .lg\:\[\&\>div\]\:px-3\.5>div {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  .lg\:\[\&\>div\]\:py-3>div {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}
@media (min-width: 1536px) {

  .\32xl\:\[\&\>div\]\:mb-0>div {
    margin-bottom: 0px;
  }

  .\32xl\:\[\&\>div\]\:h-full>div {
    height: 100%;
  }
}
.\[\&\>section\]\:min-w-0>section {
  min-width: 0px;
}
.\[\&_\.pgw\]\:px-0 .pgw {
  padding-left: 0px;
  padding-right: 0px;
}
@media (min-width: 1024px) {

  .lg\:\[\&_\.rounded-xl\]\:border-0 .rounded-xl {
    border-width: 0px;
  }

  .lg\:\[\&_\.rounded-xl\]\:bg-surface .rounded-xl {
    --tw-bg-opacity: 1;
    background-color: rgb(247 249 252 / var(--tw-bg-opacity, 1));
  }
}
.\[\&_label\]\:break-keep label {
  word-break: keep-all;
}
.\[\&_span\]\:break-keep span {
  word-break: keep-all;
}
@media(hover:hover) {

  .\[\@media\(hover\:hover\)\]\:hover\:bg-\[\#e3ebf6\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(227 235 246 / var(--tw-bg-opacity, 1));
  }

  .\[\@media\(hover\:hover\)\]\:hover\:bg-\[\#f2f4f7\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(242 244 247 / var(--tw-bg-opacity, 1));
  }

  .\[\@media\(hover\:hover\)\]\:hover\:bg-\[\#f2f5f9\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(242 245 249 / var(--tw-bg-opacity, 1));
  }

  .\[\@media\(hover\:hover\)\]\:hover\:bg-hqbg:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(238 243 251 / var(--tw-bg-opacity, 1));
  }
}
@media(pointer:coarse) {

  .\[\@media\(pointer\:coarse\)\]\:inline {
    display: inline;
  }

  .\[\@media\(pointer\:coarse\)\]\:inline-flex {
    display: inline-flex;
  }

  .\[\@media\(pointer\:coarse\)\]\:hidden {
    display: none;
  }

  .\[\@media\(pointer\:coarse\)\]\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .\[\@media\(pointer\:coarse\)\]\:text-hq {
    --tw-text-opacity: 1;
    color: rgb(42 93 176 / var(--tw-text-opacity, 1));
  }
}