/* handwriting.css — 자필기재 화면 입력 (D27)
 *
 * ⚠ `.overlay-text`(미리보기 값)·좌표 텍스트에는 **일절 관여하지 않는다.**
 *   자필 미리보기는 전용 클래스 `.hw-preview` 를 쓴다 — 텍스트 오버레이의 스타일 체계를
 *   건드리면 미리보기==PDF 불변식에 영향이 갈 수 있다.
 *
 * ⚠ 명시도: 이 프로젝트는 프로젝트 CSS 가 테마(core.css)보다 **먼저** 로드된다.
 *   테마와 겹치는 속성(색·패딩 등)은 명시도를 올려 두지 않으면 조용히 죽는다(7세션에 3회 발생).
 *   여기서는 신규 클래스만 쓰므로 충돌 대상이 없다.
 */

/* ── 인풋 옆 입력 슬롯 ─────────────────────────────────────────────── */
.hw-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.hw-slot .hw-open {
    white-space: nowrap;
}

/* 입력한 자필 썸네일 — 실제 박스 비율이 아주 납작할 수 있어 고정 높이 + contain 으로 보여준다
   (여기서는 "무엇을 썼는지" 확인이 목적이고, 인쇄 결과는 서식지 미리보기에서 본다). */
.hw-slot .hw-thumb {
    display: inline-block;
    width: 132px;
    height: 34px;
    border: 1px solid #d9dee3;
    border-radius: 6px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}

/* 지우기 — [펜 입력]과 같은 버튼 템플릿 (사용자 지시 2026-07-29).
   예전 `padding:0; text-decoration:underline` 은 `btn-link` 를 링크처럼 보이게 하던 것이라 제거했다.
   ⚠ 되살리지 말 것: 링크처럼 보이면 「누르면 삭제」라는 파괴적 동작이 눌러도 되는 것으로 읽힌다. */
.hw-slot .hw-remove {
    white-space: nowrap;
}

/* 펜 입력이 없을 때 뜨는 안내 (2026-07-28 사용자 지시 "펜입력을 받지않는경우는 서식지에 직접 기입이라고 써놔").
   ⚠ 처음에 배지(황토 배경+테두리)로 만들었다가 사용자 지시로 **회색 글씨로만** 되돌렸다
     ("자필기재부분 인풋값은 그냥 회색처리로 받으면 되지"). 색을 새로 만들지 않는다. */
/* ⚠ `white-space: nowrap` 을 쓰면 안 된다 (2026-07-28 사용자 스크린샷).
     병기(한국어 동시 출력) ON 이면 문구가 `서식지에 직접 기입 / Viết trực tiếp lên bản in` 로 두 배가
     되는데, 유효기간 년/월처럼 **좁은 열 두 개가 나란히** 있는 자리에서 칸 밖으로 삐져나가
     옆 칸 안내와 **글자가 겹쳐 찍혔다**. 줄바꿈을 허용하면 아래로 흐른다. */
.hw-slot .hw-note {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 0.8125rem;
    color: #697a8d;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
/* 아이콘은 줄바꿈에 딸려가지 않게 고정 */
.hw-slot .hw-note > i { flex: 0 0 auto; margin-top: 1px; }

/* 자필기재 입력칸 — 값은 받지만(나중에 내보낼 데이터) **글자로는 인쇄되지 않는** 칸.
   예전 `disabled` 회색과 **같은 모습**을 유지한다(사용자 지시). 회색은 common.css 의
   `#dataForm input:disabled` 와 같은 값 — 판매자 눈에는 달라진 게 없고, 값만 들어간다.
   ⚠ 프로젝트 CSS 가 core.css 보다 먼저 로드된다 → 테마의 `.form-control` 과 겹치는 속성은
     `input.form-control.hw-field` 로 명시도를 올려야 죽지 않는다(7세션에 3회 겪은 함정). */
input.form-control.hw-field,
select.form-select.hw-field,
textarea.form-control.hw-field {
    background-color: #eceef1;
    color: #4b5563;
    opacity: 1;
}
input.form-control.hw-field::placeholder,
textarea.form-control.hw-field::placeholder {
    color: #5b6b7c;
    opacity: 1;   /* Firefox 는 기본 opacity 를 낮춘다 */
}
/* 유효기간 년/월처럼 2~4자리짜리 좁은 칸 — 기본 크기로는 `자필기재` 가 `자필기ㅈ` 로 잘린다.
   플레이스홀더 **글자만** 줄여 통째로 보이게 한다(입력값 글자 크기는 그대로).
   ⚠ 병기(한국어 동시 출력) ON 이면 `자필기재 / Viết tay` 로 두 배가 돼 그래도 넘친다 →
     그 경우까지 담으려고 더 줄이면 못 읽는다. 좁은 칸은 한국어분만 보이는 것을 정상으로 본다
     (바로 아래 슬롯 안내가 두 언어로 같은 말을 한다). */
input.form-control.hw-field.hw-tiny::placeholder {
    font-size: 0.68rem;
    letter-spacing: -0.03em;
}
/* 글자만 줄여서는 부족하다 — 실측: 유효기간 년/월 칸의 **쓸 수 있는 폭이 26px** 인데
   `자필기재` 는 10.88px 글자로도 40px 이 필요하다(테마 기본 좌우 여백이 14px 씩 먹는다).
   그 칸에 한해 좌우 여백을 줄여 자리를 만든다. 입력값(`29`)은 왼쪽에 조금 더 붙어 보인다. */
input.form-control.hw-field.hw-tiny {
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
}

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

.hw-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;
}

/* 제목 앞 펜 아이콘만 **컬러**로 (사용자 지시 2026-07-30 "흑백 펜표시만 컬러로").
   글자는 그대로 회색 톤을 유지해 제목이 아이콘보다 튀지 않게 한다. */
.hw-modal .hw-head i { color: #696cff; font-size: 1.125rem; }

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

/* (2026-07-30) `.hw-hint` 규칙 제거 — 안내문 자체를 없앴다(사용자 지시). */

.hw-modal .hw-canvas-wrap {
    /* 아주 납작한 박스(최대 49:1)도 뷰포트를 넘지 않게 */
    max-width: 100%;
    overflow-x: auto;
}

.hw-modal .hw-canvas {
    display: block;
    border: 1px solid #d9dee3;
    border-radius: 6px;
    background: #fff;
    touch-action: none;
    /* 태블릿 펜 입력 중 화면이 스크롤·확대되지 않게 */
    cursor: crosshair;
    max-width: 100%;
    /* 16:9 고정 (사용자 지시 2026-07-29 "크기조절할때도 자필기재랑 사인은 비율은 고정되게끔").
       JS 가 width/height 를 인라인으로 주지만, `max-width:100%` 로 폭이 줄어들 때 높이가 따라오지
       않으면 비율이 깨져 pos() 의 좌표 환산이 밀린다 → aspect-ratio 로 못박고 height 는 자동. */
    aspect-ratio: 16 / 9;
    height: auto;
}

.hw-modal .hw-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.hw-modal .hw-actions-right {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* ── 서식지 미리보기 위 자필 이미지 ──────────────────────────────────
 * ⚠ `background-size: 100% 100%`(스트레치) — 서버 `drawHandwritingInBox` 가 박스에 스트레치로
 *   그리므로 `contain` 을 쓰면 미리보기와 PDF 가 어긋난다.
 * z-index 1 = `.overlay-text` 와 같은 층(6세션에 오버레이를 10→1 로 낮춘 규칙을 따른다).
 */
.hw-preview {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* ────────────────────────────────────────────────────────────────
 * 좁은 칸 = 입력 오른쪽에 [펜 입력] (사용자 지시 2026-07-29
 *   "유효기간 년도랑 펜입력 1줄로하고 오른쪽 여백에 월 넣고 펜입력 넣으면 될거같은데"
 *    → "유효기간 년도 오른쪽에 펜입력 버튼을 넣어달란소리에")
 *
 * 대상은 `hw-tiny`(apply-script 가 maxlength ≤ 4 인 자필 칸에 붙인다 — 유효기간 년/월 등)이고,
 * 표식(`hw-inline-host`/`hw-slot-inline`)은 handwriting.js 의 attach() 가 남긴다.
 *
 * 실측 배경(joytel, 1440px, 조치 전): 유효기간 행의 **오른쪽 절반이 비어 있었다**
 *   — 행에 `col-md-6` 하나뿐(264.5px)이고 그 안에서 년/월이 각각 132.3px 를 나눠 썼다.
 *   그 폭에서는 입력그룹(106.3px) 옆에 버튼이 못 들어가 슬롯이 아래로 내려가고, 안내문까지
 *   줄바꿈돼 칸 하나가 **134.6px 높이**가 됐다.
 *   → 서식지 8종의 그 컬럼을 `col-md-6` → `col-md-12` 로 넓혀(빈 오른쪽 절반을 쓴다)
 *     년/월이 각각 약 264px 를 갖게 하고, 여기서 [입력][단위][펜 입력]을 한 줄로 붙인다.
 *
 * ⚠ 안내문(`.hw-note`)은 이 배치에서만 숨긴다. 한 줄에 넣을 폭이 없고, 같은 내용이
 *   [펜 입력] 버튼과 입력칸 placeholder(`자필기재`)의 title 로 남는다.
 * ⚠ **≥768px(PC)에서만** 적용한다 — 사용자 지시가 "PC 화면에서" 였고, 좁은 화면에서는
 *   한 줄에 넣을 폭이 없어 예전처럼 아래로 내려가는 것이 맞다.
 * ──────────────────────────────────────────────────────────────── */
/* ★배치 = 2열 격자★ (사용자 지시 2026-07-29
 *   "펜 입력 버튼을 … 자필기재랑 같은 라인으로 하고 / 펜입력한 내용은 자필기재 아래에 뜨게하고
 *    오른쪽에 지우기 버튼으로 하면될거같은데")
 *
 *      [ 유효기간 라벨              ]   ← 1행: 전체 폭
 *      [ 입력칸(자필기재) ][ 펜 입력 ]   ← 2행
 *      [ 펜 입력 결과     ][ 지우기  ]   ← 3행 (입력이 있을 때만 보인다)
 *
 * ⚠ 핵심은 슬롯에 `display: contents` 를 주는 것이다. 슬롯(.hw-slot)은 버튼·썸네일·지우기를
 *   **한 덩어리로 감싼 컨테이너**라, 그대로 두면 격자 칸 하나만 차지해 세 요소가 그 안에서
 *   짜부라진다 — 사용자 신고 「디자인이 깨지네」의 원인이다(썸네일 고정 132px 이 약 115px 칸에서 넘쳤다).
 *   contents 로 상자를 없애면 **자식들이 직접 격자 칸을 차지**해 위 그림대로 놓인다.
 * ⚠ 슬롯의 박스를 재는 코드는 없다(handwriting.js 는 querySelector·제거에만 쓴다) — 실측 확인.
 *   그래서 `display: contents` 로 상자를 없애도 기능에 영향이 없다.
 * ⚠ 자동 배치에 의존하므로 **DOM 순서가 곧 배치**다: 입력그룹 → 펜입력 → 썸네일 → 지우기.
 *   attach() 가 그 순서로 만든다. 순서를 바꾸면 이 격자도 함께 손봐야 한다.
 * ⚠ **≥768px(PC)에서만** 적용한다 — 좁은 화면은 예전처럼 세로로 흐르는 것이 맞다. */
@media (min-width: 768px) {
    .hw-inline-host {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 8px;
        row-gap: 6px;
        align-items: center;
    }

    .hw-inline-host > .form-label {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .hw-inline-host > .input-group {
        width: auto;
        min-width: 0;
    }

    /* 슬롯 상자를 없애 자식들이 격자 칸을 직접 차지하게 한다 */
    .hw-inline-host > .hw-slot-inline {
        display: contents;
    }

    /* [펜 입력] — 입력칸과 같은 줄, 같은 폭·높이 */
    .hw-inline-host > .hw-slot-inline .hw-open {
        width: 100%;
        min-height: 2.43rem;      /* 입력칸(38.9px)과 같은 높이 */
    }

    /* 펜 입력 결과 — 자필기재 **아래**(1열). 칸 폭에 맞춘다(고정 132px 은 넘친다). */
    .hw-inline-host > .hw-slot-inline .hw-thumb {
        width: 100%;
        height: 38px;
        margin: 0;
    }

    /* [지우기] — 썸네일 **오른쪽**(2열). [펜 입력] 과 같은 폭·높이로 세로로 나란히 정렬된다. */
    .hw-inline-host > .hw-slot-inline .hw-remove {
        width: 100%;
        min-height: 2.43rem;
    }

    /* 안내문은 이 배치에서 숨긴다 — 격자 칸을 차지하면 위 배치가 밀린다.
       같은 내용이 [펜 입력] 버튼과 입력칸 placeholder(`자필기재`)의 title 로 남는다. */
    .hw-inline-host > .hw-slot-inline .hw-note {
        display: none !important;
    }
}