/* ===================================================================
   standalone.css — **레이아웃을 쓰지 않는 단독 화면** (세 앱 공용 한 벌)
   -------------------------------------------------------------------
   대상: `error/404` · `error/4xx` · `error/500` · `setup/preparing`
   🕘 예전에는 비로그인 화면(로그인·비번재설정·비번변경·약관 팝업)의 **삽화**도 여기서 정했다 —
      2026-09-01 에 그 삽화를 **세 앱 19곳에서 통째로 걷어냈다**(아래 2절).

   🔑 **왜 별도 파일인가** — 이 화면들은 `defaultLayout`·`fullWidthLayout` 을 쓰지 않아
      사이드바·헤더가 없다(로그인 이전에도 떠야 하므로 의도된 것이다).
      그래서 `design-system.css` 의 `.ds` 스코프 규칙이 거의 걸리지 않고,
      「화면 하나짜리」 규격이 필요하다. 🔥 **그 규격을 `design-system.css` 로 옮기지 말 것** —
      거기는 앱 셸 안의 카드·표·격자를 정하는 곳이고, 여기 규칙은 그 바깥이다.

   🔥 **px 로 크기를 박지 말 것.** root font-size 3단계(normal/large/xlarge)가 rem 으로 동작한다.
      여백은 `--ds-sp-1..6` 척도에서만 고른다(design-system.css 0-4 절).
      색은 역할 토큰(`--ds-*`)만 쓰고 **hex·var() 폴백을 쓰지 않는다**(0 절).

   ⚠️ 이 파일이 실리려면 그 화면이 **`design-system.css` 를 먼저 실어야** 한다
      (토큰이 거기 `:root` 에 있다). `fragments/head :: standaloneHead` 가 그 순서를 지킨다.
   =================================================================== */

/* -------------------------------------------------------------------
   1) 화면 골격 — **세로 가운데 + 가로 가운데 + 읽는 폭 상한**

   🔬 2026-08-27 전수점검 실측:
      · E39(서비스 개시) · E40(설치) · A-E27(비로그인 약관) — 1440·1920 에서 본문이
        **왼쪽 절반**에만 있고 오른쪽이 텅 빈다.
      · P-E4(준비중) — 1440·1920 에서 내용이 화면 위쪽에만 붙고 아래가 크게 빈다.
   🔑 두 결함은 **같은 뿌리**다 — 단독 화면에 「가운데」와 「상한 폭」이 없었다.
   ------------------------------------------------------------------- */
.ds-standalone {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 남는 높이를 전부 갖고 그 안에서 세로·가로 가운데. */
.ds-standalone-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--ds-sp-6) var(--ds-sp-4);
}

/* 🔑 상한은 **rem** 이다 — 글자 크기 3단계를 따라 함께 넓어져야 한 줄의 글자 수가 유지된다.
   ⚠️ px 로 박으면 xlarge 에서 줄이 짧아져 문단이 세로로 길어진다. */
.ds-standalone-body {
    width: 100%;
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
}

/* 🔤 **단독 화면의 제목은 고정 크기다** (2026-09-18 · 랜드사 1회차 A8-21 · 정본 P59)
   🔬 오류 화면 제목이 `fs-4x` 였는데 Metronic 은 1200px 미만에서 `fs-2x`·`fs-3x`·`fs-4x` 를
      **`calc(…rem + …vw)`** 로 정의한다 — 360 30.2px · 768 49.7 · 992 57.1 · 1200↑ 64px 로 창 폭을 따라 변했다.
      「선례」였던 준비중 화면의 `fs-2x` 도 같은 식이라 **같이 흔들리고 있었다.**
   🔑 그래서 크기는 유틸리티가 아니라 이 클래스가 정한다(rem — 글자 크기 3단계만 따른다).
   🔥 `fs-2x`·`fs-4x` 를 제목에 다시 달지 말 것(아이콘은 대상이 아니다 — screen-tokens 「fs 금지」 절). */
.ds-standalone-title {
    font-size: 2rem;
    line-height: 1.25;
}

/* -------------------------------------------------------------------
   2)🪦 **삽화(`.ds-standalone-art`)를 없앴다** (2026-09-01 사장님 지시 · 화면검증 항목 1)

   > *"저 이미지를 삭제하자 불필요해"* — 예외를 여쭈니 *"다 지 워."*

   🎯 세 앱 **19곳**에서 `<img class="ds-standalone-art">` 를 지웠다(랜드사 6 · 여행사 6 · 관리자 7 —
      `error/404`·`error/4xx`·`error/500`·`sign/signin`·`sign/resetPwd`·`sign/changePwd`
      + 관리자 `term/termDetail`). 여기 있던 규칙 셋(기본 · 좁은 화면 · 낮은 창)도 함께 지웠다 —
      **닿을 요소가 하나도 남지 않았다.**
   🔥 **되살리지 말 것.** 내가 *"오류 화면 3종은 거의 빈 흰 판이 되는데 그대로 둘까요"* 라고 여쭌 데 대한
      답이 「다 지워」였다 → **「지운 뒤 허전하다」는 되살릴 근거가 아니다.**
      🕘 이 자리에 있던 *"지우지는 않는다(그러면 화면이 텅 빈 흰 판이 된다)"* 는 그 결정으로 대체됐다.
   🔥 특히 **`bgi-attachment-fixed` 배경 방식으로 되돌리지 말 것** — 2026-08-27 에 결함 둘 때문에
      이미 걷어낸 방식이다: ① `background-attachment: fixed` 는 **뷰포트** 기준이라 삽화가 화면 하단에
      **고정된 채 잘렸고**(375·430 · X-E6) ② 비로그인 화면에서 그 자리의 「개인정보처리방침」·
      「이용약관」 링크와 **겹쳐 글자가 안 읽혔다**(D-E31).
   📌 이미지 파일 `assets/media/illustrations/development-hd.png` 는 **남겨 둔다** —
      `static/assets/html_example/` 의 메트로닉 견본 16개가 그 파일을 참조한다(지우면 그쪽이 깨진다).
   ------------------------------------------------------------------- */

/* -------------------------------------------------------------------
   3) 언어 전환 줄 — 단독 화면에도 **오른쪽 위**에 둔다 (P-E3)

   🔬 실측(2026-08-27): `/preparing` 에는 언어 전환기가 **0개**였다. 다른 비로그인 화면
      (로그인·약관)에는 「English ▾」가 있는데 이 화면만 없어, **처음 오는 사람이 언어를
      바꿀 방법이 아예 없었다.**

   🔴 **드롭다운(`.ds-auth-lang`)을 쓰지 않는다 — 그 화면에는 JS 가 없다.**
      🔑 Metronic 의 `data-kt-menu` 는 `scripts.bundle.js` 가, 언어 전환 요청은 `common.js` 가
         맡는다. `/preparing` 은 **스크립트를 한 줄도 싣지 않으므로**(설정이 끝나기 전에 뜨는
         화면이라 그것이 맞다) 드롭다운을 놓으면 **눌러도 아무 일도 안 일어난다.**
      ✅ 그래서 **평범한 링크 줄**이다 — `?lang=` 파라미터를 서버의 `LocaleChangeInterceptor`
         가 그대로 받는다(JS 없이 동작한다).
      🔥 여기에 드롭다운을 다시 넣지 말 것. 넣으려면 **스크립트 번들을 함께** 실어야 한다.
   ------------------------------------------------------------------- */
.ds-standalone-lang {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--ds-sp-2);
    padding: var(--ds-sp-3) var(--ds-sp-4);
}

.ds-standalone-lang > a {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-sp-1);
    padding: var(--ds-sp-1) var(--ds-sp-3);
    border-radius: 999px;
    color: var(--ds-text-label);
    text-decoration: none;
}

.ds-standalone-lang > a.is-current {
    background: var(--ds-fill);
    color: var(--ds-text-strong);
}

.ds-standalone-lang img {
    width: 1.25em;
    height: 1.25em;
    border-radius: .2em;
}

/* 🖐 손가락이 닿는 칸의 바닥값은 **px** 다(screen-tokens 「손가락으로 누르는 칸」 절).
   좁은 화면의 root 는 12px 이라 rem 으로 적으면 44px 이 33px 이 된다. */
@media (max-width: 767.98px) {
    .ds-standalone-lang > a { min-height: 44px; }
}