/* signature-inline.css — 폼 안 서명 슬롯 (자필기재 슬롯 `.hw-slot` 과 같은 시각 언어)
 *
 * ⚠ 명시도: 이 프로젝트는 프로젝트 CSS 가 테마(core.css)보다 **먼저** 로드된다.
 *   테마와 겹치는 속성은 명시도를 올려 두지 않으면 조용히 죽는다(7세션에 3회 발생).
 *   여기서는 신규 클래스(`.sig-*`)만 쓰므로 충돌 대상이 없다.
 *
 * ⚠ `handwriting.css` 와 클래스를 공유하지 않는다 — 한쪽을 손볼 때 다른 쪽이 조용히 바뀌는 사고를 막는다.
 *   대신 값(테두리·라운드·썸네일 높이·z-index)을 같게 맞춰 눈에는 같은 컴포넌트로 보이게 한다.
 */

/* ── 섹션 하단 서명 슬롯 ───────────────────────────────────────────────── */
.sig-slot {
    margin-top: 4px;
    padding: 12px 14px;
    border: 1px dashed #d9dee3;
    border-radius: 8px;
    background-color: rgba(105, 108, 255, 0.035);
}

.sig-slot-main {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 좁은 폭에서는 줄바꿈을 허용한다(D25 반응형 표준). 넓은 폭에서는 한 줄에 들어가도록
       구성요소 폭을 위/아래에서 조정해 뒀다 — 판매자 슬롯의 체크박스까지 포함해서. */
    flex-wrap: wrap;
    row-gap: 6px;
}

.sig-slot-label {
    font-weight: 600;
    color: #566a7f;
    margin-right: 2px;
}

/* 크기 확대 (사용자 지시 2026-07-29 "다른 서명 입력 애들도 똑같이 크기 키워줘")
   — 자필 [펜 입력] 버튼을 입력칸 높이(38.9px)로 키운 것과 **같은 크기**로 맞춘다.
   ⚠ 마크업이 `btn btn-sm` 이지만 여기 선택자가 (0,2,0) 이라 테마 `.btn-sm`(0,1,0)을
     특이도로 이긴다 — 로드 순서에 의존하지 않는다.
   ⚠ **높이·글자만 키우고 폭은 최소로 늘린다.** 판매자 슬롯은 같은 줄에 [라벨][서명 입력][썸네일 84px]
     [지우기][다음에도 이 서명 사용] 이 전부 들어가야 하고, 좌우 6:6 레이아웃에서 가용폭 498px 에
     기존 합이 411px 이었다(이 파일 썸네일 주석의 실측). 여유가 87px 뿐이라 폭을 키우면 줄이 깨진다.
     → 좌우 패딩은 0.75rem 까지만. 실측으로 한 줄 유지를 확인했다. */
.sig-slot .sig-open {
    white-space: nowrap;
    /* ⚠ 처음에 `calc(1.5em + 0.75rem + 2px)` 로 뒀더니 **35.0px** 이 나왔다 — 그 식의 `em` 은
       이 버튼의 글자(14px) 기준이라 입력칸(15px 기준·실측 38.9px)과 값이 달라진다.
       자필 [펜 입력] 버튼이 38.9px 이므로 같은 값으로 못박는다. */
    min-height: 2.43rem;                       /* 38.88px ≈ 입력칸·펜 입력 38.9px */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.875rem;                       /* 12px → 14px, 펜 입력 버튼과 동일 */
}

/* 썸네일 — `contain` 으로 전체가 보이게 한다(서식지 인쇄 결과는 자리마다 랜덤 변형되므로
   여기서 비율을 맞출 의미가 없다).
   ⚠ 폭을 168 → 84 로 줄였다: 판매자 슬롯은 같은 줄에 「다음에도 이 서명 사용」까지 들어가야 한다.
     좌우 6:6 레이아웃에서 폼 한 칸의 가용폭이 498px 이고 나머지 요소 합이 411px(실측) 이라
     썸네일은 ~87px 이하여야 한 줄에 들어간다. 96px 은 여유 3px 로 폰트 로딩 편차에 취약했다. */
.sig-slot .sig-thumb {
    display: inline-block;
    width: 84px;
    height: 40px;
    border: 1px solid #d9dee3;
    border-radius: 6px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}

.sig-slot .sig-remove {
    padding: 0;
    text-decoration: underline;
}

/* 판매자 전용: 다음에도 이 서명 사용 — 서명 슬롯과 **같은 줄**에 둔다(사용자 지시).
   `.form-check` 는 테마에서 좌측 패딩이 붙어 있어 flex 줄에서 라벨이 밀린다 → 여기서 정렬을 맞춘다. */
.sig-slot .sig-reuse {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 0;
    margin-bottom: 0;
    white-space: nowrap;
}

.sig-slot .sig-reuse .form-check-input {
    margin: 0;
    float: none;
}

/* ── 서식지 미리보기 위 서명 이미지 ──────────────────────────────────
 * 서버 `drawSignature` 는 `(x, y)` 를 **중심**으로 `font_size` 폭에 원본 종횡비로 그린다.
 * 여기서는 그 결정론적 부분만 재현한다 — 랜덤 회전·워프·흔들림은 재현하지 않는다(의도된 난수).
 * z-index 1 = `.overlay-text`·`.hw-preview` 와 같은 층.
 */
.sig-preview {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-repeat: no-repeat;
    /* 박스 자체가 원본 종횡비로 계산되므로 스트레치와 contain 이 같은 결과가 된다 */
    background-size: 100% 100%;
}

/* ── 서명 패드 모달 ────────────────────────────────────────────────────── */
.sig-overlay {
    position: fixed;
    inset: 0;
    /* 자필 모달(1095)과 같은 층. 서명 모달(1090)·FAB(1040)·드롭다운(1080) 위, 툴팁(1099) 아래.
       ⚠ body 직속이라 루트 스태킹 컨텍스트에 참여한다(같은 컨텍스트 안의 fixed 는 z-index 와
         무관하게 정적 형제 위에 그려진다 — 7세션 교훈). */
    z-index: 1095;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* 모달 표준(password-check-modal)과 같은 카드 톤. `.card` 클래스를 함께 쓰므로 배경·라운드·패딩은
   테마가 잡고, 여기서는 **오버레이 안에서의 폭과 스크롤만** 정한다.
   ⚠ 2026-07-30 구조 변경으로 `.sig-head`/`.sig-actions`/`.sig-actions-right` 규칙은 제거했다
     (마크업이 card-header/flex-fill 버튼으로 바뀌어 쓰이지 않는다). */
/* 자필기재 패드(.hw-modal)와 **같은 생김새**로 맞춘다 (사용자 지시 2026-07-30).
   ⚠ 크기·색·여백을 바꿀 때는 handwriting.css 의 대응 규칙도 같이 바꿀 것 — 두 패드가 갈라지면
     같은 성격의 모달이 화면마다 다르게 보인다. */
.sig-modal {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    padding: 16px 18px;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}

/* 제목 앞 펜 아이콘만 컬러 (자필 패드와 동일) */
.sig-modal .sig-head i { color: #696cff; font-size: 1.125rem; }

.sig-modal .sig-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #566a7f;
    margin-bottom: 4px;
}

.sig-modal .sig-hint {
    /* 제목 오른쪽에 붙는 **보조 문구**(사용자 지시 2026-07-30) — 블록이 아니라 인라인이다.
       한 줄에 같이 놓이므로 아래 여백을 주지 않는다. */
    font-size: 0.8125rem;
    font-weight: 400;
    color: #8592a3;
}

.sig-modal .sig-canvas {
    display: block;
    /* 표시 폭 = 자필 패드와 같은 480px (사용자 지시 2026-07-30 축소). 내부 해상도 960×540 은 그대로. */
    width: 480px;
    max-width: 100%;
    /* 종횡비 고정 — 실해상도(960×540)와 표시 비율이 어긋나면 그린 좌표가 밀린다.
       ⚠ 이 값과 signature-inline.js 의 `CANVAS_W/H`, base.html `#signatureCanvas` 는 **항상 같이** 바꾼다. */
    aspect-ratio: 16 / 9;
    height: auto;
    border: 1px solid #d9dee3;
    border-radius: 6px;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}

/* ── 서명 모달(base.html #signatureModal) — 자필기재 패드와 같은 생김새 ─────────────
 * 사용자 지시 2026-07-30 ("자필기재 모달창 디자인이 딱 서명에 좋아").
 * ⚠ .hw-modal 계열 규칙과 **쌍으로 유지**한다. 한쪽만 바꾸면 같은 성격의 모달이 갈린다.
 * ⚠ 새 색·새 그림자를 만들지 않았다 — 값은 자필 패드에서 그대로 가져왔다. */
.sig-modal-head { font-weight: 600; color: #566a7f; margin-bottom: 4px; }
.sig-modal-head i { color: #696cff; font-size: 1.125rem; }   /* 펜 아이콘만 컬러 */
.sig-modal-hint {
    /* 제목 오른쪽에 붙는 **보조 문구**(사용자 지시 2026-07-30) — 블록이 아니라 인라인이다.
       한 줄에 같이 놓이므로 아래 여백을 주지 않는다. */
    font-size: 0.8125rem;
    font-weight: 400;
    color: #8592a3;
}
.sig-modal-canvas {
    display: block;
    width: 480px;              /* 자필 패드와 같은 표시 폭. 내부 해상도 960×540 은 그대로다. */
    max-width: 100%;
    aspect-ratio: 16 / 9;      /* 실해상도와 표시 비율이 어긋나면 그린 좌표가 밀린다 */
    height: auto;
    border: 1px solid #d9dee3;
    border-radius: 6px;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}