/* 실행 확인·결과 알림 — 디자인 가이드 §4.9 / §4.11.
 *
 * 화면마다 confirm/alert를 다시 만들지 않는다. 확인은 native <dialog> 한 벌,
 * 결과는 관련 표·패널 위의 단일 notice 자리 한 벌로 표현한다.
 */

/* A modal <dialog> is centered by the UA's `margin: auto`, and the web base
   template's global star reset (margin 0) erased it: measured on the live
   projects page the delete dialog opened at (0, 0), pinned to the top-left
   corner of a 1440x900 viewport.  The margin is restored on the dialog
   itself, so every page that loads this sheet centers it, reset or not. */
.action-dialog {
    width: min(92vw, 520px);
    max-height: min(80vh, 620px);
    padding: 0;
    margin: auto;
    border: 1px solid var(--pundit-border, #dce3ee);
    border-radius: 12px;
    color: var(--pundit-text, #172033);
    background: var(--pundit-surface, #fff);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.30);
}

.action-dialog[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.action-dialog::backdrop {
    background: rgba(15, 23, 42, 0.52);
}

.action-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 12px;
}

.action-dialog__title {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 800;
}

.action-dialog__close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: var(--pundit-muted, #69778d);
    background: transparent;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.action-dialog__body {
    min-height: 0;
    overflow-y: auto;
    padding: 8px 24px 24px;
    font-size: 14px;
    line-height: 1.6;
}

.action-dialog__message {
    margin: 0;
    white-space: pre-line;
}

.action-dialog__typed {
    margin-top: 16px;
}

.action-dialog__typed label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
}

.action-dialog__typed input {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    /* 2.1: 값을 넣는 칸은 컨트롤 테두리 (흰 배경 3.49:1) */
    border: 1px solid var(--pundit-border-control, #7e8a9f);
    border-radius: 6px;
    color: inherit;
    background: var(--pundit-surface, #fff);
    font: inherit;
}

/* 선택 입력 칸(§4.11 v2.58.0) — 받아 적기 칸과 같은 테두리 · 높이 계열의 여러 줄 칸.
   부르는 폼이 `data-action-confirm-note` 를 줄 때만 선다(고객 삭제의 「사유(선택)」). */
.action-dialog__note {
    margin-top: 16px;
}

.action-dialog__note[hidden],
.action-dialog__warning[hidden] {
    display: none;
}

.action-dialog__note label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
}

.action-dialog__note textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 64px;
    padding: 8px 10px;
    /* 2.1: 값을 넣는 칸은 컨트롤 테두리 (흰 배경 3.49:1) */
    border: 1px solid var(--pundit-border-control, #7e8a9f);
    border-radius: 6px;
    color: inherit;
    background: var(--pundit-surface, #fff);
    font: inherit;
    resize: vertical;
}

/* 미리 경고 — §4.9 주의 상자(`.pundit-alert--warning`) 그대로.  페이지 알림의 아래 여백(16px)
   대신 문장과의 간격만 둔다. */
.action-dialog .action-dialog__warning {
    margin: 16px 0 0;
}

.action-dialog__choices {
    margin: 16px 0 0;
    padding: 0;
    border: 0;
}

.action-dialog__choices legend {
    margin-bottom: 8px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
}

.action-dialog__choice-list {
    display: grid;
    gap: 8px;
}

.action-dialog__choice {
    min-height: 42px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    /* 2.1: 라디오를 감싼 label 자체가 클릭 영역이다 — 컨트롤 테두리 */
    border: 1px solid var(--pundit-border-control, #7e8a9f);
    border-radius: 8px;
    background: var(--pundit-surface, #fff);
    cursor: pointer;
}

.action-dialog__choice:focus-within {
    border-color: var(--pundit-primary, #2458c6);
    box-shadow: 0 0 0 3px rgba(36, 88, 198, 0.18);
}

.action-dialog__choice input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin: 2px 0 0;
    accent-color: var(--pundit-primary, #2458c6);
}

.action-dialog__choice-copy {
    display: grid;
    gap: 2px;
}

.action-dialog__choice-copy strong {
    font-size: 14px;
    line-height: 1.4;
}

.action-dialog__choice-copy span {
    color: var(--pundit-muted, #69778d);
    font-size: 12px;
    line-height: 1.5;
}

/* 줄마다 고르는 단추가 붙은 목록(pickAction -- FX 검토 「목록 보기」, 2026-10-01).  줄은 라디오 목록과 같은
   테두리·둥글기이고, 단추는 줄 오른쪽에 선다(§4.5 Secondary). */
.action-dialog__picks {
    margin: 16px 0 0;
}

.action-dialog__pick-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.action-dialog__pick {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--pundit-border-control, #7e8a9f);
    border-radius: 8px;
    background: var(--pundit-surface, #fff);
}

.action-dialog__pick .action-dialog__choice-copy {
    min-width: 0;
}

/* 단추 모양은 shared/buttons.css 의 .btn 그대로다 -- 여기서는 줄 안의 자리(줄지 않음)만 정한다. */
.action-dialog__pick > button {
    flex: 0 0 auto;
}

/* 고르기 목록에서는 확인 단추를 숨긴다 -- 단추의 display(inline-flex)가 [hidden] 을 이기지 않게 자리로 고른다. */
.action-dialog__picks[hidden],
.action-dialog__footer [hidden] {
    display: none;
}

.btn.is-action-pending {
    opacity: 0.65;
    pointer-events: none;
    cursor: wait;
}

.action-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--pundit-border, #dce3ee);
    background: var(--pundit-surface-soft, #f8fafc);
}

/* 정본 단추(.btn)는 이 초점 규칙에서 뺀다.  buttons.css 의 `.btn:focus-visible`
   (§6: --pundit-primary 3px 실선)과 특이도가 (0,2,0) 으로 같아, 뒤에 실린 이
   규칙이 이겨 대화상자 단추의 초점 링을 반투명 그림자로 바꿔 버린다.  :where()
   로 감싸 이 규칙의 특이도는 (0,2,0) 그대로 둔다 — 입력 칸·닫기 단추는 전과 같다. */
.action-dialog :where(:not(.btn)):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(36, 88, 198, 0.18);
}

.action-notice {
    display: none;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--pundit-border, #dce3ee);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.55;
}

.action-notice.is-visible {
    display: flex;
}

.action-notice__message {
    flex: 1;
    min-width: 0;
}

.action-notice__close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: -8px -8px -8px 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: inherit;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.action-notice--success {
    color: var(--pundit-success-strong, #087154);
    border-color: var(--pundit-success, #0f8a62);
    background: var(--pundit-success-bg, #f1fbf7);
}

.action-notice--warning {
    color: var(--pundit-warning-strong, #8a4a05);
    border-color: var(--pundit-warning, #c46a08);
    background: var(--pundit-warning-bg, #fff7e8);
}

/* §4.9 pundit-alert--danger 와 같은 모양(옅은 테두리 + 옅은 배경 + 기본
   글자색) — 자리·JS 동작·data-action-notice 속성은 그대로다. 긴 문구가
   전부 빨간 글이면 읽기 전에 겁부터 준다(forms_errors.css 의 같은 결정). */
.action-notice--error {
    color: var(--pundit-text, #172033);
    border-color: var(--pundit-danger-border, #efc2bf);
    background: var(--pundit-danger-bg, #fff1f0);
}

.action-notice--info {
    color: var(--pundit-primary-strong, #163f9f);
    border-color: var(--pundit-primary, #2458c6);
    background: var(--pundit-info-bg, #f1f6ff);
}

.action-notice:focus-visible {
    outline: none;
}

.action-notice__close:focus-visible {
    outline: 3px solid var(--pundit-primary, #2458c6);
    outline-offset: 2px;
}

@media (max-width: 650px) {
    .action-dialog__header,
    .action-dialog__body,
    .action-dialog__footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .action-dialog__footer {
        flex-direction: column;
    }

    .action-dialog__footer .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .action-dialog,
    .action-notice {
        scroll-behavior: auto;
    }
}

/* 대화상자 단추(「취소」「확인」「삭제」)의 모양은 shared/buttons.css 의 정본 .btn
   계열이 그린다(가이드 §4.5 공용 단추 한 벌).  여기에 있던
   `.action-dialog__footer .btn` · `.btn-primary` · `.btn-secondary` · `.btn-danger`
   와 그 :hover, `.action-dialog .btn:disabled`, `.action-dialog__footer .btn:disabled`,
   `.action-dialog__footer .btn:focus-visible` 는 FBAR 화면이 buttons.css 를 싣지
   않던 때의 대역이었다.  이제 이 시트를 싣는 화면은 모두 buttons.css 를 먼저
   싣는다(trades/base.html 과 FBAR 화면들 — test_action_feedback_contract 가 지킨다).
   대역은 모든 확인 단추를 정본과 다르게 그리고 있었다: 굵기 600(정본 700),
   패딩 0 18px(정본 10px 20px), 「삭제」 호버가 옅은 배경에 빨간 글자(정본은
   --pundit-danger-strong 채움에 흰 글자), 「취소」 호버 테두리가 진해지지 않음,
   회색 비활성 위에 opacity 0.55 를 한 번 더 얹음(§4.5「불투명도만 낮추지 않는다」).
   이 시트에 남은 .btn 규칙은 진행 중 표시(.btn.is-action-pending)와 좁은 화면의
   폭 100%(배치)뿐이다. */