/*
 * shared/ui/kit.js 가 만드는 요소의 스타일.
 *
 * 왜 따로 있나 (2026-08-20 `[CD-03]`):
 *   이 규칙들은 원래 `customer.css` 안에 있었다. 그런데 `kit.js` 는 `shared/ui/` 에 있는
 *   **공용 모듈**이라 어느 페이지에서나 불린다. 그 결과 `customer.css` 를 안 무는 페이지
 *   (`planner.html` · `hub.html` · `index.html` · `tripview.html`)에서는
 *   **에러 없이 조용히 깨졌다.**
 *
 *   실제로 사고가 났다 — `planner/customerPage/voucherPanel.js:42` 기록:
 *   확인 대화상자가 `position: fixed` 를 못 받아 페이지 맨 아래로 흘러갔고,
 *   [삭제] 를 눌러도 아무 일도 안 일어나 보였다. 업로드 뒤 모달도 안 보여
 *   그 `await` 가 안 풀렸고 목록 갱신까지 멈췄다.
 *   그래서 그 파일은 스타일을 전부 인라인으로 다시 썼다(627줄이 된 이유).
 *
 *   그리고 이것이 `travel/planner` 가 `alert()` 를 79곳에서 쓰는 진짜 이유다 —
 *   게을러서가 아니라 **`toast()` 가 안 떴기 때문**이다.
 *
 * 규칙: 이 파일은 **7개 페이지가 전부 문다.** 그래서 여기 들어가는 것은 둘뿐이다.
 *       ① `kit.js` 가 만드는 클래스 (토스트·대화상자·입력칸)
 *       ② **사내 화면 공통 껍데기** — 아래 두 번째 절 (2026-08-20 `[G-03]`)
 *       한 화면에서만 쓰는 것은 그 화면의 CSS 파일에 둔다.
 *
 * 토큰: `--c-*` 는 `customer-tokens.css` 가 정의한다. 그 파일도 함께 물어야 한다.
 *       (`planner` · `tripview` 는 자체 CSS 에서 `--c-*` 를 정의하지도 쓰지도 않아
 *        충돌이 없다 — 2026-08-20 확인)
 */

/* ── 버튼 ─────────────────────────────────────────────────────────── */

.cm-btn {
    appearance: none;
    border: 1px solid var(--c-line-strong);
    background: var(--c-surface);
    color: var(--c-text);
    font: inherit;
    font-size: var(--c-size-sm);
    padding: 7px 13px;
    border-radius: var(--c-radius-sm);
    cursor: pointer;
    transition: background var(--c-ease), border-color var(--c-ease);
}

.cm-btn:hover {
    background: var(--c-surface-muted);
}

.cm-btn:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 1px;
}

.cm-btn--primary {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
    font-weight: 600;
}

.cm-btn--primary:hover {
    background: var(--c-accent-text);
}

.cm-btn--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--c-text-soft);
}

.cm-btn--danger {
    color: var(--c-danger);
    border-color: var(--c-line-strong);
}

.cm-btn--danger:hover {
    background: var(--c-danger-soft);
    border-color: var(--c-danger);
}

/* ── 입력 ─────────────────────────────────────────────────────────── */
/* `.cm-textarea` 는 kit.js 가 만들지 않지만 같은 규칙 묶음이라 함께 둔다. */

.cm-input,
.cm-select,
.cm-textarea {
    width: 100%;
    font: inherit;
    font-size: var(--c-size-sm);
    padding: 7px 11px;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--c-radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    transition: border-color var(--c-ease), box-shadow var(--c-ease);
}

.cm-input:focus,
.cm-select:focus,
.cm-textarea:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.cm-textarea {
    min-height: 76px;
    resize: vertical;
}

.cm-select {
    width: auto;
    min-width: 118px;
    cursor: pointer;
}

/* 저장 상태 표시. 값이 사라지는 게 최악이라 실패는 눈에 띄게 둔다. */
.cm-input--saved,
.cm-select--saved,
.cm-textarea--saved {
    border-color: var(--c-ok);
}

.cm-input--error,
.cm-select--error,
.cm-textarea--error {
    border-color: var(--c-danger);
    background: var(--c-danger-soft);
}

/* ── 필드(라벨 + 입력) ────────────────────────────────────────────── */

.cm-field {
    margin-bottom: var(--c-gap-3);
}

.cm-field-label {
    display: block;
    font-size: var(--c-size-xs);
    color: var(--c-text-soft);
    margin-bottom: var(--c-gap-1);
    font-weight: 500;
}

.cm-field-row {
    display: flex;
    gap: var(--c-gap-2);
}

.cm-field-row > * {
    flex: 1;
    min-width: 0;
}

/* ── 토스트 ───────────────────────────────────────────────────────── */
/* alert() 를 쓰지 않는다 — 작업이 멈춘다. */

.cm-toasts {
    position: fixed;
    bottom: var(--c-gap-5);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--c-gap-2);
    z-index: 10900;
    pointer-events: none;
}

.cm-toast {
    background: var(--c-text);
    color: #fff;
    padding: 9px 16px;
    border-radius: var(--c-radius-pill);
    font-size: var(--c-size-sm);
    box-shadow: var(--c-shadow);
    animation: cm-toast-in var(--c-ease);
}

.cm-toast--error {
    background: var(--c-danger);
}

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

/* ── 가운데 확인창 (confirmDialog) ────────────────────────────────── */
/* 표 안처럼 인라인 확인을 끼울 자리가 없을 때. */

.cm-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10810;
    width: min(420px, calc(100vw - 32px));
    padding: var(--c-gap-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    box-shadow: var(--c-shadow);
}

/*
 * ⚠️ `white-space: pre-line` — 문구의 줄바꿈을 살린다.
 *
 * `textContent` 로 넣기 때문에 `
` 이 그냥 공백이 된다. `confirm()` 에서 옮겨 온
 * 문구들은 여러 줄로 쓰여 있어서(「…지울까요?
정산에서도 사라집니다」) 이게 없으면
 * 한 줄로 붙어 읽기 어려워진다 (2026-08-20 `[B-04]` 2단계).
 */
.cm-dialog-text {
    margin: 0 0 var(--c-gap-2);
    font-size: var(--c-size-md);
    font-weight: 600;
    color: var(--c-text);
    white-space: pre-line;
}

.cm-dialog-detail {
    margin: 0 0 var(--c-gap-4);
    font-size: var(--c-size-sm);
    color: var(--c-text-soft);
    white-space: pre-line;
}

/* ── 인라인 확인 (confirmInline) ──────────────────────────────────── */
/* confirm() 대신. 무엇을 지우는지 보이는 자리에서 묻는다. */

.cm-confirm {
    background: var(--c-danger-soft);
    border: 1px solid var(--c-danger);
    border-radius: var(--c-radius-sm);
    padding: var(--c-gap-3);
    margin-bottom: var(--c-gap-3);
    font-size: var(--c-size-sm);
}

.cm-confirm-guide {
    display: block;
    margin-top: var(--c-gap-3);
    margin-bottom: var(--c-gap-1);
    font-size: var(--c-size-xs);
    color: var(--c-text-soft);
}

.cm-confirm .cm-input {
    background: var(--c-surface);
}

.cm-confirm-actions {
    display: flex;
    gap: var(--c-gap-2);
    margin-top: var(--c-gap-3);
}

/* 이름을 아직 안 쳤을 때. 눌러도 안 되는 게 보여야 한다. */
.cm-confirm .cm-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── 배경 덮개 ────────────────────────────────────────────────────── */
/*
 * 겹침 층(z-index) 지도 — **kit 이 만드는 것은 언제나 맨 위다.**
 *
 *    40 / 50   `.cm-panel-backdrop` / `.cm-panel`  (고객관리·장소관리 상세 패널)
 *  1000~3300   플래너 껍데기·모달·PDF 진행창 (`planner-*.css`)
 *      10000   바우처 패널의 인라인 오버레이 (`customerPage/voucherPanel.js`)
 *  10800~      **kit** — 확인창 덮개 · 확인창 · 토스트
 *
 * ⚠️ 이 순서를 깨뜨리면 **확인창이 모달 뒤에 깔린다.** 2026-08-24 에 실제로 그랬다 —
 * 「고객에게 확정」 모달(`planner-modal-backdrop`, 2000) 안에서 `confirmDialog` 를
 * 불렀는데 확인창이 50 이라 뒤로 숨었다. 모달을 닫아야 확정을 누를 수 있었고,
 * 모달을 닫으면 확정할 화면이 사라졌다. 토스트(90)도 같은 이유로 덮개 밑에 깔려
 * 「확정하지 못했습니다」가 흐리게 보였다.
 *
 * `.cm-panel-backdrop` 자체는 **올리면 안 된다** — 짝인 `.cm-panel` 이 50 이라
 * 상세 패널이 제 덮개 뒤로 들어간다. 그래서 확인창은 전용 덮개를 덧붙여 쓴다.
 */

.cm-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--c-ease);
    z-index: 40;
}

.cm-panel-backdrop[data-open='true'] {
    opacity: 1;
    pointer-events: auto;
}

/*
 * 확인창(`confirmDialog`)의 덮개. `.cm-panel-backdrop` 에 덧붙여 층만 올린다.
 *
 * ⚠️ **고객관리 상세 패널(`.cm-panel`, 50)도 이 덮개 아래로 들어간다.** 2026-08-24
 * 실측: 확인창이 뜬 동안 패널 위 좌표의 맨 위 요소가 이 덮개다. 그래서 패널이
 * 살짝 어두워지고, 답하기 전에는 패널 안을 누를 수 없다.
 *
 * **일부러 그대로 둔다.** 전에는 덮개가 40 이라 패널(50) 밑에 깔렸고, 그래서 확인창이
 * 떠 있는데도 뒤 패널의 값을 계속 바꿀 수 있었다 — 「이 상태로 바꿀까요?」를 묻는
 * 중에 그 상태를 또 바꾸는 것이라 물어보는 의미가 없었다. 되돌려야 하면 `.cm-panel`
 * 을 10805(덮개와 확인창 사이)로 올리면 예전 모습이 그대로 돌아온다.
 */
.cm-dialog-backdrop {
    z-index: 10800;
}


/* ═══════════════════════════════════════════════════════════════════════
 * 공통 리셋 — `box-sizing` 하나뿐이다 (2026-08-20 `[G-09]`)
 *
 * `style.css` · `customer.css` · `tripview.css` 가 각자 `*` 리셋을 갖고 있었는데
 * **셋이 서로 달랐다.** 공통은 이 한 줄뿐이고, 7페이지가 이미 전부 받고 있었다.
 * 그래서 여기로 올려도 **어느 화면에서도 값이 안 바뀐다.**
 *
 * ⚠️ `margin: 0; padding: 0` 은 여기 넣지 말 것. 그건 `style.css`(로그인·허브·플래너)
 *    만의 것이고, 여기 넣으면 고객관리·tripview 의 **모든 요소**가 새로 받는다 —
 *    리팩토링이 아니라 동작 변경이다.
 * ═══════════════════════════════════════════════════════════════════════ */

* {
    box-sizing: border-box;
}