/*
 * 고객사(静銀総合サービス) 사이트 테마.
 *
 * styles.css 는 손대지 않는다 (한컴 디자인 시스템 원본). 그 파일은 화면 성격을
 * `data-admin-ui="si"` / `data-taker-ui="toss"` 같은 **프리셋 속성**으로 갈아끼우게
 * 돼 있고, 프리셋이 `.hax` 보다 명시도가 높아 토큰을 덮는다.
 * 그래서 우리도 같은 방식으로 `data-ui="sgs"` 프리셋을 하나 더 만든다 —
 * `.hax` 에 토큰을 쓰면 si/toss 프리셋에 져서 모서리·배경이 안 바뀐다.
 *
 * 값은 전부 www.shizugin-sgs.jp 실측이다 (2026-08-10, 회사개요·문의 페이지
 * getComputedStyle):
 *   #1A3357  네이비   헤더/제목 띠, 기본 버튼(送信する), 표 항목명, 구분선
 *   #7D001A  크림슨   푸터 띠, 링크
 *   #FFF017  노랑     헤더 CTA 와 제목 띠의 글자 — 이 둘에만 쓴다
 *   #E5ECF5  옅은 청  본문 배경 (섹션이 흰색과 번갈아 깔린다)
 *   #231815  먹색     본문 글자, 16px / 28px
 * 모서리는 전부 0 이고 그림자를 쓰지 않는다.
 */
.hax[data-ui="sgs"] {
  --sgs-navy: #1A3357;
  --sgs-navy-dark: #142944;
  --sgs-crimson: #7D001A;
  --sgs-crimson-dark: #5C0013;
  --sgs-yellow: #FFF017;
  --sgs-pale: #E5ECF5;
  --sgs-ink: #231815;
  /* 사이트의 표 구분선은 옅은 회색이 아니라 네이비 실선이다 */
  --sgs-rule: #1A3357;
  /* 본문 폭. 사이트는 콘텐츠 1080px, 헤더/푸터 1320px 를 쓴다 */
  --sgs-wrap: 1080px;
  --sgs-wrap-wide: 1320px;

  /* 기본 동작(버튼·포커스 링·스테퍼)은 네이비를 따른다 — 사이트의 送信する 와 같다.
     크림슨은 링크와 푸터 띠에만 쓰므로 --accent 로 올리지 않는다. */
  --accent: #1A3357;
  --accent-hover: #142944;
  --accent-soft: rgba(26, 51, 87, 0.08);
  --accent-fg: #FFFFFF;
  --brand-orange: #1A3357;
  --brand-orange-600: #142944;
  --brand-orange-100: #E5ECF5;
  --brand-black: #1A3357;

  --bg: #E5ECF5;
  --canvas: #E5ECF5;
  --surface: #FFFFFF;
  --surface-2: #F2F5FA;
  --surface-3: #E5ECF5;
  --border: #C9D4E4;
  --border-strong: #9FB0C8;
  --border-subtle: #DCE4EF;
  --text: #231815;
  --text-2: #3D3338;
  --text-3: #6B6469;
  --text-4: #8E8A8C;

  /* 각진 모서리가 이 사이트의 성격이다. 예외는 원형(아이콘·단계 번호)뿐이고
     그건 `50%` 라 여기 영향을 받지 않는다.
     모바일 바닥 시트의 둥근 윗모서리도 없앴다 — 아래 `.modal-box` 참조. */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  background: var(--bg);
}

/*
 * 영문 표제용. 사이트의 섹션 머리(`Company Profile`)가 Barlow **200** 62px 이고,
 * 그 가는 영문 한 줄이 이 사이트의 인상을 거의 혼자 만든다. 웹폰트를 못 받으면
 * 굵은 기본 산세리프로 떨어져 분위기가 통째로 달라진다 — HTML 의 Google Fonts
 * <link> 가 빠지면 안 되는 이유다.
 */
.hax[data-ui="sgs"] { --font-eng: 'Barlow', sans-serif; }

/*
 * 본문 폰트는 화면 언어를 따라간다 (data-lang 은 i18n.js 가 붙인다).
 * 일본어 스택으로 한글을 그리면 폴백이 섞여 자형이 들쭉날쭉해진다.
 * 기본값은 일본어 — 데모 대상이 일본 고객사다.
 */
.hax,
.hax[data-lang="ja"] {
  --font-sans: 'Noto Sans JP', 'Hiragino Sans', 'ヒラギノ角ゴシック',
               'Yu Gothic', '游ゴシック', Meiryo, 'メイリオ', sans-serif;
  --font-display: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
}
.hax[data-lang="ko"] {
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --font-display: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', sans-serif;
}
.hax[data-lang="en"] {
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── 언어 선택기 ── */
.hax .lang-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    height: 28px;
    padding: 0 24px 0 10px;
    cursor: pointer;
    /* 화살표는 배경 이미지로 — 브라우저 기본 화살표가 다크 헤더에서 안 보인다 */
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 13px) 12px, calc(100% - 9px) 12px;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
}
.hax .lang-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 발급현황 상단 바는 어두워서 배경/글자를 뒤집는다 */
.hax .gnb .lang-select {
    background-color: rgba(255, 255, 255, .10);
    border-color: transparent;
    color: rgba(255, 255, 255, .82);
}
.hax .gnb .lang-select option { color: var(--text); background: var(--surface); }

/*
 * 버튼 모양의 <a> 는 밑줄을 긋지 않는다.
 * styles.css 는 버튼을 <button> 으로 가정해 text-decoration 을 끄지 않는다.
 * 발급현황의 PDF 버튼과 작성 완료 화면의 PDF 내려받기가 여기에 해당한다.
 */
.hax a.btn { text-decoration: none; }

/* 상단 메뉴의 탭도 링크(<a>)라 같은 이유로 밑줄이 생긴다 */
.hax a.gnb-item { text-decoration: none; }

/*
 * hidden 속성이 display 선언을 항상 이기게 한다.
 *
 * #signView 는 인라인 style 로 display:flex 라서 hidden 을 붙여도 계속 보였다.
 * 오류 화면으로 전환해도 서식이 그대로 남아 사용자가 잠긴 서식과 오류 안내를
 * 동시에 보는 상태가 됐다 (2026-08-07 실물 확인).
 */
[hidden] { display: none !important; }

/* ── 참여자 행 (드래그로 순서 변경) ── */
.hax .role-row {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: grab;
    /* 드롭 표시선을 border 로 그리면 행 높이가 흔들린다. 안쪽 그림자로 그린다. */
    transition: background .12s ease-out, box-shadow .12s ease-out, opacity .12s ease-out;
}
.hax .role-row:active { cursor: grabbing; }
.hax .role-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.hax .role-row.dragging { opacity: .4; }
.hax .role-row.drop-before { box-shadow: inset 0 2px 0 0 var(--accent); }
.hax .role-row.drop-after  { box-shadow: inset 0 -2px 0 0 var(--accent); }

/* 손잡이 — "끌 수 있다"는 표시. 실제 드래그는 행 전체가 받는다. */
.hax .role-grip {
    color: var(--text-4);
    font-size: 13px;
    line-height: 1;
    letter-spacing: -1px;
    user-select: none;
    flex-shrink: 0;
}
.hax .role-row:hover .role-grip { color: var(--text-3); }

/* 체크박스와 라벨은 끌지 않고 누를 수 있어야 한다 */
.hax .role-row input[type="checkbox"],
.hax .role-row label { cursor: pointer; }

/* ── 목록 그룹 머리 (서식별) ── */
.hax .group-row > td {
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 9px 16px;
}
.hax .group-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-2);
}
.hax .group-count {
    margin-left: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-4);
}

/* 진행 스테퍼 — 역할 3열을 1열로 압축 (styles.css 에 없는 유일한 신규 컴포넌트) */
.hax .steps { display: inline-flex; align-items: center; }
.hax .step {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
    color: var(--text-4);
}
.hax .step .dot {
    width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
    border: 1.5px solid var(--border-strong); background: var(--surface);
    display: inline-flex; align-items: center; justify-content: center;
}
.hax .step.done { color: var(--success); }
.hax .step.done .dot { background: var(--success); border-color: var(--success); color: #fff; }
.hax .step.current { color: var(--accent); }
.hax .step.current .dot { border-color: var(--accent); border-width: 4px; }
.hax .step-sep { width: 16px; height: 1px; background: var(--border-strong); margin: 0 6px; flex-shrink: 0; }

/* 스켈레톤 — 로딩 중 레이아웃이 튀지 않게 */
@keyframes pocShimmer { 0%,100% { opacity: .45 } 50% { opacity: .85 } }
.hax .sk {
    display: block; height: 11px; border-radius: 2px;
    background: var(--surface-3); animation: pocShimmer 1.4s ease-in-out infinite;
}

/* 빈 상태 */
.hax .empty-wrap {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 56px 24px 60px; gap: 6px;
}
.hax .empty-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}

/* 관리자 화면은 desktop-first — 좁으면 표를 가로 스크롤한다
   (ds/patterns-admin-shell.html 반응 규칙: 최소 1280px, 이하 가로 스크롤 허용) */
@media (min-width: 721px) and (max-width: 1279px) {
    .hax .card { overflow-x: auto; }
    .hax table.tbl { min-width: 1000px; }
}

/* ── 720px 이하: 표를 카드 목록으로 접는다 ──
   표가 1000px 을 요구하므로 가로 스크롤로는 못 쓴다. 실제로 폰에서 열었을 때
   「リンクをコピー」 버튼이 화면 밖으로 밀려 보이지 않았다 (2026-08-09 확인).
   조작 칸을 맨 앞으로 옮겼으므로 접힌 카드에서도 버튼이 맨 위에 온다. */
@media (max-width: 720px) {
    .hax table.tbl { min-width: 0; width: 100%; }
    .hax table.tbl thead { display: none; }
    .hax table.tbl tbody,
    .hax table.tbl tr,
    .hax table.tbl td { display: block; width: auto; }

    .hax table.tbl tr {
        border-bottom: 8px solid var(--bg);
        padding: 14px 16px 16px;
        background: var(--surface);
    }
    .hax table.tbl tr:last-child { border-bottom: 0; }

    .hax table.tbl td {
        border: 0;
        padding: 6px 0;
        display: flex;
        align-items: baseline;
        gap: 12px;
        min-height: 0;
    }
    /* 숨긴 thead 대신 각 줄 앞에 항목명을 붙인다 (data-label 은 app.js 가 넣는다) */
    .hax table.tbl td::before {
        content: attr(data-label);
        flex: 0 0 4.5em;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--text-4);
    }

    /* 件名은 카드 제목처럼 크게, 항목명 없이 */
    .hax table.tbl td.cell-title { padding-top: 2px; font-size: 15px; }
    .hax table.tbl td.cell-title::before { content: none; }

    /* 조작 버튼은 폭을 꽉 채워 누르기 쉽게 */
    .hax table.tbl td.cell-action { padding: 0 0 10px; }
    .hax table.tbl td.cell-action::before { content: none; }
    .hax table.tbl td.cell-action .btn { width: 100%; height: 44px; }

    /* 그룹 머리는 카드가 아니라 구분선처럼 한 줄로 둔다 */
    .hax table.tbl tr.group-row { padding: 0; border-bottom: 0; background: transparent; }
    .hax table.tbl tr.group-row > td { display: block; padding: 10px 16px; }
    .hax table.tbl tr.group-row > td::before { content: none; }

    /* 스테퍼가 길면 줄바꿈한다 — 가로 스크롤을 없앤 이유가 그것이다 */
    .hax .steps { flex-wrap: wrap; row-gap: 4px; }

    /* 터치 타겟 44px 하한.
       카드 레이아웃이 켜지는 지점(720px)과 같이 둔다. 예전에는 640px 에 있어서
       641~720px 구간에서 작은 버튼이 44px 미만으로 남았다. */
    .hax .btn-sm { height: 44px; }

    /* 상단 바에 탭이 둘로 늘면 배지까지 넣을 폭이 없다 — 언어 선택이 화면 밖으로 밀렸다 */
    .hax .gnb .badge { display: none; }

    /* 고용인 카드에서는 성명을 제목처럼 크게 — 표에서는 2열이지만 카드에서는 머리다 */
    .hax table.tbl tr.row-click td:nth-child(2) { font-size: 15px; padding-top: 2px; }

}

/* ── 상단 단계 스테퍼 (작성 화면 전용, 발급현황 것보다 크다) ── */
.hax .sign-steps {
    display: flex; align-items: center; justify-content: center;
    padding: 4px 24px 18px; flex-wrap: wrap; row-gap: 8px;
}
.hax .sstep { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-4); }
.hax .sstep .n {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--border-strong); background: var(--surface);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}
.hax .sstep.done { color: var(--success); }
.hax .sstep.done .n { background: var(--success); border-color: var(--success); color: #fff; }
.hax .sstep.current { color: var(--text); }
.hax .sstep.current .n { border-color: var(--accent); background: var(--accent); color: #fff; }
.hax .sbar { width: 40px; height: 2px; background: var(--border-strong); margin: 0 10px; border-radius: 2px; }
.hax .sbar.filled { background: var(--success); }

/* ── 뷰어 컨테이너 ──
   70vh 고정이 아니라 남는 높이를 차지한다. 작은 화면에서 고정 CTA 가 가려지지 않게.

   position:relative 가 필요하다 — 벤더 뷰어는 메뉴 바를 `position:absolute; top:0`
   으로 얹는다. 여기가 static 이면 그 기준이 뷰포트가 되어 상단 헤더(제목·역할 배지)를
   덮어버린다. 실제로 덮고 있었다 (2026-08-07 브라우저 확인). */
.hax #viewerArea {
    position: relative;
    flex: 1 1 auto; min-height: 280px;
    margin: 0 24px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-2); overflow: auto;
}

.hax .cta-fix { padding: 18px 24px 22px; background: var(--canvas); border-top: 1px solid var(--border-subtle); }
.hax .center-wrap { padding: 40px 24px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hax .big-icon {
    width: 60px; height: 60px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.hax .linkbox {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface-2); border-radius: 12px; padding: 12px 14px;
    width: 100%; max-width: 460px;
}
.hax .linkbox code {
    flex: 1; min-width: 0; font-size: 12px; font-family: var(--font-mono);
    color: var(--text-2); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; text-align: left;
}

/* ── 모바일 (375px 기준) ──
   벤더 뷰어는 setDefaultRatio('PageWidth') 로 폭에 맞춰 그린다.
   우리가 책임지는 것은 셸(헤더·스테퍼·CTA)의 반응형과 터치 타겟뿐이다. */
@media (max-width: 640px) {
    .hax #viewerArea { margin: 0 12px; border-radius: 8px; }
    .hax .center-wrap { padding: 28px 16px 24px; }
    .hax .sbar { width: 20px; margin: 0 6px; }
    .hax .sstep { font-size: 12px; }
    .hax .linkbox { flex-direction: column; align-items: stretch; }
    .hax .linkbox code { white-space: normal; word-break: break-all; text-align: center; }

    /* 실기기에서 뷰어에 200px 남짓만 돌아갔다 (2026-08-10, 참여자 화면 캡처).
       뷰어를 억지로 키우면(예: `min-height: 50vh`) 이번엔 제출 버튼이 화면 밖으로
       밀린다 — 375×667 에서 실제로 그랬다. 그래서 **셸을 깎아** 남는 세로를 뷰어에
       넘긴다. 터치 타겟(48px)은 그대로 둔다. */
    .hax .sign-steps { padding: 2px 16px 6px; }
    .hax #gateNotice { padding: 0 16px 6px; }
    .hax #gateNotice > .toast { padding: 7px 10px; font-size: 12px; }
    .hax .cta-fix { padding: 8px 16px 10px; }
    .hax[data-ui="sgs"] .cta-fix #submitBtn { height: 48px; }
    .hax #viewerArea { min-height: 240px; }
}

/* ── 고용인 마스터 ── */

/* 행 전체가 상세를 여는 버튼이다. 눌리는 것이라는 신호를 커서와 포커스 링으로 준다. */
.hax table.tbl tr.row-click { cursor: pointer; }
.hax table.tbl tr.row-click:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* 모달 — 720px 이하에서는 아래에서 올라오는 시트가 된다 (위 미디어 쿼리) */
.hax .modal-back {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(10, 10, 11, .45);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.hax .modal-box {
    background: var(--surface);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
    width: 100%; max-width: 520px;
    max-height: 84vh;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.hax .modal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.hax .modal-search { padding: 12px 18px 0; flex-shrink: 0; }
.hax .modal-body { padding: 18px; overflow-y: auto; }
.hax .modal-foot {
    padding: 14px 18px; border-top: 1px solid var(--border); flex-shrink: 0;
}
/* 모달을 열면 뒤 목록이 같이 스크롤되지 않게 한다 */
body.modal-open { overflow: hidden; }

.hax .emp-name { font-size: 19px; font-weight: 700; line-height: 1.3; }
.hax .emp-section { margin-top: 20px; }
.hax .emp-section-title {
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
    color: var(--text-4); text-transform: uppercase;
    padding-bottom: 6px; margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
/* 항목명과 값을 2열로 — 값이 길면 줄바꿈되고 항목명 열은 유지된다 */
.hax .emp-dl {
    display: grid; grid-template-columns: 6.5em 1fr;
    column-gap: 14px; row-gap: 7px; margin: 0;
}
.hax .emp-dl dt { font-size: 12px; color: var(--text-4); font-weight: 600; }
.hax .emp-dl dd { margin: 0; font-size: 14px; color: var(--text); line-height: 1.5; }

/* 선택기 목록 — 행 하나가 곧 선택 버튼 */
.hax .emp-picklist { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; }
.hax .emp-pick,
.hax .emp-chip {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    width: 100%; text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm, 10px);
    background: var(--surface); color: inherit; font-family: inherit;
    cursor: pointer;
}
.hax .emp-pick:hover,
.hax .emp-chip:hover { background: var(--surface-2); border-color: var(--border-strong); }
.hax .emp-pick:focus-visible,
.hax .emp-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hax .emp-pick-name { font-size: 14px; font-weight: 600; }
.hax .emp-pick-meta { font-size: 12px; color: var(--text-4); }

/* 생성 화면의 선택 칸 */
.hax .emp-choice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hax .emp-choice .emp-chip { flex: 1 1 220px; width: auto; }

/* ── 720px 이하: 고용인 화면 ──
   위쪽 카드 접기 블록이 아니라 **여기** 있는 이유 — CSS 는 같은 명시도면 나중 규칙이
   이긴다. 아래의 기본 모달 규칙이 파일 뒤에 있어서, 미디어 쿼리를 위에 두면
   시트 전환이 통째로 덮인다 (실제로 그랬다 — 폰에서 모달이 가운데 떴다). */
@media (max-width: 720px) {
    /* 가운데 카드로 두면 폰에서 목록을 스크롤할 세로 공간이 남지 않는다 */
    .hax .modal-back { align-items: flex-end; padding: 0; }
    .hax .modal-box {
        max-width: none; width: 100%;
        max-height: 88vh;
        border-radius: 18px 18px 0 0;
    }
    .hax .emp-dl { grid-template-columns: 1fr; row-gap: 2px; }
    .hax .emp-dl dt { padding-top: 8px; }

    /* 날짜 2칸은 한 줄에 안 들어간다 */
    .hax .cond-range .input { flex: 1 1 100%; }
    .hax .cond-range > .t-muted { display: none; }
    .hax .day-chip { min-height: 44px; }

    /* 선택 칸은 세로로 쌓는다 — 칩 + 버튼 2개가 한 줄에 안 들어간다 */
    .hax .emp-choice { flex-direction: column; align-items: stretch; }
    /* flex 축이 세로로 바뀌므로 flex-basis 를 풀지 않으면 칩이 세로로 늘어난다 */
    .hax .emp-choice .emp-chip { flex: 0 0 auto; }
    .hax .emp-choice .btn { width: 100%; height: 44px; }
    .hax .emp-pick { min-height: 56px; }
}

/* 표 안에서 링크처럼 보이는 버튼 — 발급현황의 고용인 이름 */
.hax .linklike {
    background: none; border: 0; padding: 0;
    font: inherit; font-weight: 600;
    color: var(--accent); cursor: pointer;
    text-align: left;
}
.hax .linklike:hover { text-decoration: underline; }
.hax .linklike:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 고용조건 위젯 ── */
.hax .cond-range { align-items: center; flex-wrap: wrap; }
.hax .cond-range .input { flex: 0 1 190px; }

/* 요일 — 체크박스는 숨기고 라벨을 칩으로 만든다. 포커스 링은 라벨이 대신 받는다. */
.hax .cond-days { flex-wrap: wrap; gap: 6px; }
.hax .day-check {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}
.hax .day-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 36px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm, 10px);
    background: var(--surface); color: var(--text-3);
    font-size: 13px; font-weight: 600; cursor: pointer;
    user-select: none;
}
.hax .day-chip:hover { border-color: var(--border-strong); }
.hax .day-check:checked + .day-chip {
    background: var(--accent); border-color: var(--accent); color: var(--accent-fg);
}
.hax .day-check:focus-visible + .day-chip { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════
   고객사 사이트 껍데기 (data-ui="sgs")

   www.shizugin-sgs.jp 의 하위 페이지 구조를 그대로 따른다:
     네이비 헤더 → 네이비 제목 띠(노랑 글자) → 옅은 청색 본문 → 크림슨 푸터
   섹션 머리는 Barlow 200 의 가는 영문 + 그 아래 굵은 일본어 두 줄이다.

   이 블록이 파일 맨 끝에 있어도 되는 이유 — 위쪽 720px 블록이 덮는 것은
   `.modal-*` / `.emp-*` 이고 여기는 `.sgs-*` 와 프리셋 스코프(`[data-ui]`)라
   겹치지 않는다. 겹치는 것은 아래 자체 미디어 쿼리에서 다시 적어 둔다.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 컨테이너 ── */
.hax .sgs-wrap {
    width: 100%;
    max-width: var(--sgs-wrap);
    margin: 0 auto;
    padding: 0 40px;
}
/* 발급현황 표는 1000px 를 요구한다. 본문 폭(1080-80=1000)에 딱 걸쳐서 조금만
   좁아져도 가로 스크롤이 생기므로, 목록이 있는 두 화면은 본문 전체를 헤더
   폭(1320)으로 쓴다. 목록만 넓히면 생성 패널과 왼쪽 끝이 어긋난다. */
.hax .sgs-wrap.-wide { max-width: var(--sgs-wrap-wide); }

/* ── 헤더 ── */
.hax .sgs-head {
    background: var(--sgs-navy);
    color: #fff;
    flex-shrink: 0;
}
.hax .sgs-head-in {
    width: 100%;
    max-width: var(--sgs-wrap-wide);
    margin: 0 auto;
    padding: 16px 40px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}
/* 로고와 내비게이션 아래를 가로지르는 흰 실선 — 사이트 헤더의 특징이다.
   실선은 헤더 안쪽 폭에 맞춰야 하므로 별도 요소가 긋는다. */
.hax .sgs-head-in > * { padding-bottom: 12px; }
.hax .sgs-head-rule {
    max-width: var(--sgs-wrap-wide);
    margin: 0 auto;
    padding: 0 40px;
}
.hax .sgs-head-rule::after {
    content: "";
    display: block;
    height: 1px;
    background: rgba(255, 255, 255, .38);
}

.hax .sgs-logo { display: flex; align-items: center; flex-shrink: 0; }
.hax .sgs-logo img { display: block; width: 300px; height: auto; }

.hax .sgs-nav { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hax .sgs-nav-top { display: flex; align-items: center; gap: 12px; }
.hax .sgs-nav-links { display: flex; align-items: center; }

/* 작은 텍스트 링크. 사이트가 앞에 홑화살괄호를 붙인다 */
.hax .sgs-minilink {
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}
.hax .sgs-minilink::before { content: "\203A"; margin-right: 6px; }
.hax .sgs-minilink:hover { text-decoration: underline; }

/* 노랑 CTA — 사이트에서 헤더에만 쓰는 색이다. 본문에는 쓰지 않는다. */
.hax .sgs-cta {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 150px; height: 34px; padding: 0 12px;
    background: var(--sgs-yellow);
    color: var(--sgs-crimson);
    font-size: 13.5px; font-weight: 700;
    text-decoration: none; white-space: nowrap;
}
.hax .sgs-cta:hover { background: #FFF674; }

.hax .sgs-item {
    color: #fff;
    font-size: 17px;
    letter-spacing: .05em;
    text-decoration: none;
    padding: 8px 0;
    margin-left: 30px;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
.hax .sgs-item:hover { border-bottom-color: rgba(255, 255, 255, .5); }
/* 지금 보는 화면 표시. 사이트에는 없지만 업무 화면에는 필요하다 */
.hax .sgs-item.active { font-weight: 700; border-bottom-color: var(--sgs-yellow); }

/* 언어 선택기는 네이비 위에 얹히므로 배경/글자를 뒤집는다 */
.hax .sgs-head .lang-select {
    background-color: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
    height: 34px;
    border-radius: 0;
}
.hax .sgs-head .lang-select option { color: var(--text); background: #fff; }

/* 역할 배지는 작성 화면에서 네이비 띠 위에 얹힌다. badge-accent 의 기본값은
   네이비 위 네이비라 글자가 사라진다. */
.hax .sgs-head .badge {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .42);
    color: #fff;
}

/* ── 제목 띠 ── */
.hax .sgs-hero {
    background: var(--sgs-navy);
    padding: 40px 0 38px;
    text-align: center;
    flex-shrink: 0;
}
.hax .sgs-hero h1 {
    margin: 0;
    color: var(--sgs-yellow);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: .04em;
}
.hax .sgs-hero .-sub {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
}

/* ── 본문 ── */
.hax .sgs-body {
    flex: 1 1 auto;
    background: var(--sgs-pale);
    padding: 48px 0 64px;
}

/* ── 섹션 머리 (가는 영문 + 굵은 일본어) ──
   영문은 장식이라 언어를 따라가지 않는다. 사이트도 일본어 페이지에
   `Company Profile` 을 그대로 둔다. HTML 에 박아두고 data-i18n 을 걸지 않는다. */
.hax .sgs-sechead { margin: 0 0 28px; }
.hax .sgs-sechead .-eng {
    display: block;
    font-family: var(--font-eng);
    font-weight: 200;
    font-size: 56px;
    line-height: 1;
    color: var(--sgs-navy);
    margin: 0 0 4px;
}
.hax .sgs-sechead .-jp {
    display: block;
    font-size: 25px;
    font-weight: 700;
    color: #3D3338;
    margin: 0;
}

/* ── 푸터 ──
   사이트 푸터는 사이트맵 3열까지 있지만 업무 화면에서는 소음이다.
   회사 표기와 연락처만 남긴다. */
.hax .sgs-foot {
    background: var(--sgs-crimson);
    color: #fff;
    padding: 28px 0;
    flex-shrink: 0;
}
.hax .sgs-foot-in {
    max-width: var(--sgs-wrap-wide);
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.hax .sgs-foot img { display: block; width: 240px; height: auto; margin-bottom: 12px; }
.hax .sgs-foot .-address { font-size: 13px; line-height: 1.8; color: rgba(255, 255, 255, .9); }
.hax .sgs-foot .-copyright { font-size: 12px; color: rgba(255, 255, 255, .68); }

/* ═══ 사이트 어휘로 맞추는 기존 컴포넌트 ═══ */

/* 카드 — 각지고 그림자 없는 흰 판. 옅은 청색 본문 위에서 사이트의
   흰 섹션과 같은 역할을 한다. */
.hax[data-ui="sgs"] .card,
.hax[data-ui="sgs"] .card-flat {
    border-radius: 0;
    box-shadow: none;
    border-color: var(--border);
}

/* 표 — 항목명은 네이비 굵은 글씨에 자간을 벌리고, 구분선은 네이비 실선이다.
   행 구분선만 옅게 쓴다. 사이트는 10행짜리 회사개요 표라 100% 네이비여도
   괜찮지만 발급 목록은 행이 계속 늘어나 줄무늬처럼 보인다. */
.hax[data-ui="sgs"] table.tbl { font-size: 14px; }
.hax[data-ui="sgs"] .tbl th {
    background: transparent;
    color: var(--sgs-navy);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    padding: 14px 16px;
    border-top: 0;
    border-bottom: 1px solid var(--sgs-rule);
    text-transform: none;
}
.hax[data-ui="sgs"] .tbl td {
    font-size: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(26, 51, 87, .22);
}

/* 버튼 — 각지고 굵고 자간이 넓다. 사이트의 送信する 가 네이비 사각형이다. */
.hax[data-ui="sgs"] .btn {
    height: 42px; padding: 0 22px;
    font-size: 14px; font-weight: 700;
    letter-spacing: .04em;
    border-radius: 0;
}
.hax[data-ui="sgs"] .btn-lg { height: 56px; padding: 0 32px; font-size: 16px; }
.hax[data-ui="sgs"] .btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.hax[data-ui="sgs"] .btn-primary { background: var(--sgs-navy); color: #fff; }
.hax[data-ui="sgs"] .btn-primary:hover { background: var(--sgs-navy-dark); }
/* btn-accent 는 styles.css 에서 toss 프리셋 안에만 있다. 그 프리셋을 뗐으므로
   여기서 다시 정의하지 않으면 작성 화면의 送信する 가 흰 버튼이 된다. */
.hax[data-ui="sgs"] .btn-accent { background: var(--sgs-navy); color: #fff; }
.hax[data-ui="sgs"] .btn-accent:hover { background: var(--sgs-navy-dark); }
.hax[data-ui="sgs"] .btn-secondary {
    background: #fff; color: var(--sgs-navy); border-color: var(--sgs-navy);
}
.hax[data-ui="sgs"] .btn-secondary:hover { background: var(--sgs-pale); }

/* 입력 — 각지고 크다. 서식을 채우는 화면이라 손가락으로 눌리는 크기를 지킨다. */
.hax[data-ui="sgs"] .input {
    height: 44px; font-size: 15px;
    border-radius: 0;
    border-color: var(--border-strong);
    background: #fff;
}
.hax[data-ui="sgs"] .input:focus {
    border-color: var(--sgs-navy);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.hax[data-ui="sgs"] textarea.input { height: auto; }
/* 항목명은 사이트의 표 항목명과 같은 어휘 — 네이비 굵은 글씨에 자간 */
.hax[data-ui="sgs"] .label {
    font-size: 14px; font-weight: 700;
    color: var(--sgs-navy);
    letter-spacing: .06em;
}
/* 포커스 링도 네이비로. 두지 않으면 브라우저 기본 파랑이 나와서
   모달을 열 때마다 닫기 버튼에 파란 테두리가 뜬다. */
.hax[data-ui="sgs"] .btn:focus-visible {
    outline: 2px solid var(--sgs-navy);
    outline-offset: 1px;
}
.hax[data-ui="sgs"] .badge { border-radius: 0; height: 24px; font-size: 12px; padding: 0 8px; }
.hax[data-ui="sgs"] .stat { border-radius: 0; }
.hax[data-ui="sgs"] .day-chip { border-radius: 0; }
/* 모바일 바닥 시트의 둥근 윗모서리(`18px 18px 0 0`)까지 없앤다.
   프리셋 선택자가 위쪽 720px 블록의 `.hax .modal-box` 보다 명시도가 높아 어차피
   이긴다 — 남겨두려면 아래 720px 블록에서 다시 적어야 한다. 사이트가 어디에도
   둥근 모서리를 쓰지 않아 시트만 둥글면 그 화면만 다른 제품처럼 보인다.
   올라오는 동작(`align-items: flex-end`, `88vh`)은 그대로다. */
.hax[data-ui="sgs"] .modal-box { border-radius: 0; }
.hax[data-ui="sgs"] .linkbox { border-radius: 0; }
.hax[data-ui="sgs"] #viewerArea { border-radius: 0; }
/* 링크는 크림슨. 사이트가 본문 링크에 쓰는 색이다 (버튼은 네이비). */
.hax[data-ui="sgs"] .linklike { color: var(--sgs-crimson); }

/* ── 작성 화면(/sign) ──
   여기는 제목 띠도 푸터도 없다. 뷰어와 고정 CTA 가 세로를 다 써야 한다. */

/* 본문은 사이트와 같은 폭으로 가둔다. 서식이 화면 끝까지 닿으면 사이트가 아니라
   뷰어 자체를 띄운 것처럼 보인다. 안내 띠와 CTA 띠는 배경만 끝까지 깔고
   안쪽 내용만 같은 폭으로 맞춘다 — 사이트의 섹션 띠와 같은 방식이다. */
/* 안내 띠·제출 버튼의 좌우 끝을 뷰어 줄에 맞춘다. 목록이 옆에 붙으면서 줄이
   본문 폭보다 넓어졌으므로 본문 폭에 맞추면 세 덩어리의 왼쪽 끝이 서로 어긋난다. */
.hax[data-ui="sgs"] #gateNotice > .toast,
.hax[data-ui="sgs"] .cta-fix > * {
    max-width: calc(var(--sgs-wrap) + 252px);
    margin-left: auto;
    margin-right: auto;
}
/* .btn 은 inline-flex 라 auto 마진이 가운데로 밀지 못한다. 폭만 1080 로 잘리고
   왼쪽에 붙어서 위의 뷰어와 왼쪽 끝이 어긋났다 (2026-08-10 확인). */
.hax[data-ui="sgs"] .cta-fix > .btn { display: flex; }
/* `width: 100% - 48px` + `margin: 0 auto` 로 두 가지를 한 줄에 담는다 —
   넓으면 1080px 로 가운데, 좁으면 좌우 24px 여백. 기본 규칙의 `margin: 0 24px`
   를 프리셋이 덮으므로 그 여백을 여기서 다시 만들어야 한다. */
.hax[data-ui="sgs"] #viewerArea {
    width: calc(100% - 48px);
    max-width: var(--sgs-wrap);
    margin: 0 auto;
}
@media (max-width: 640px) {
    .hax[data-ui="sgs"] #viewerArea { width: calc(100% - 24px); }
}

.hax .sgs-head.-compact .sgs-head-in { padding: 10px 20px; align-items: center; }
.hax .sgs-head.-compact .sgs-head-in > * { padding-bottom: 0; }
.hax .sgs-head.-compact .sgs-logo img { width: 210px; }
.hax .sgs-head.-compact .sgs-nav { flex-direction: row; align-items: center; gap: 10px; }
.hax .sgs-head.-compact .sgs-doc { font-size: 14px; font-weight: 700; color: #fff; }

/* ── 좁은 화면 ── */
@media (max-width: 900px) {
    .hax .sgs-wrap, .hax .sgs-wrap.-wide { padding: 0 20px; }
    .hax .sgs-head-in, .hax .sgs-head-rule, .hax .sgs-foot-in { padding-left: 20px; padding-right: 20px; }
    .hax .sgs-sechead .-eng { font-size: 40px; }
    .hax .sgs-sechead .-jp { font-size: 20px; }
}

@media (max-width: 720px) {
    /* 로고 + 2단 내비가 한 줄에 안 들어간다. 세로로 쌓고 로고를 줄인다. */
    .hax .sgs-head-in { flex-direction: column; align-items: stretch; gap: 12px; }
    .hax .sgs-logo img { width: 240px; }
    .hax .sgs-nav { align-items: stretch; }
    .hax .sgs-nav-top { justify-content: flex-start; flex-wrap: wrap; }
    .hax .sgs-cta { flex: 1 1 auto; min-width: 0; }
    .hax .sgs-nav-links { flex-wrap: wrap; }
    .hax .sgs-item { margin: 0 24px 0 0; font-size: 16px; }

    .hax .sgs-hero { padding: 26px 0 24px; }
    .hax .sgs-hero h1 { font-size: 22px; }
    .hax .sgs-body { padding: 28px 0 40px; }

    .hax .sgs-foot-in { flex-direction: column; align-items: flex-start; }
    .hax .sgs-foot img { width: 200px; }

    /* 접힌 카드에서 항목명이 네이비 굵은 글씨면 값보다 튄다. 위쪽 720px 블록의
       `td::before` 규칙과 짝이다. */
    .hax[data-ui="sgs"] table.tbl td {
        padding: 6px 0;
        border-bottom: 0;
    }
    .hax[data-ui="sgs"] table.tbl tr { border-bottom: 8px solid var(--bg); }

    /* 터치 타겟 44px — 위 블록의 같은 규칙이 프리셋 선택자에 지므로 다시 적는다 */
    .hax[data-ui="sgs"] .btn-sm { height: 44px; }
}

/* ── 미입력 필수 항목 목록 (작성 화면) ──
   뷰어 오른쪽에 붙여 남은 항목을 계속 보여준다. 벤더의 필수 검사는 제출을 누른
   뒤에야 알려주기 때문에, 긴 서식에서는 그때부터 칸을 찾아 스크롤하게 된다. */
/*
 * 목록은 뷰어 **옆의 여백**에 놓는다. 뷰어를 좁히지 않는 것이 조건이다 —
 * 뷰어는 PageWidth 로 그려서 폭이 줄면 서식 글자까지 같이 작아진다.
 *
 * 그래서 줄 전체를 본문 폭 + 목록 폭만큼 넓히고, 뷰어에는 본문 폭(1080px) 상한을
 * 그대로 남긴다. 줄이 그만큼 넓지 못하면 아래 미디어 쿼리가 목록을 뷰어 밑으로 내린다.
 */
.hax .sign-main {
    display: flex;
    align-items: stretch;
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
    width: calc(100% - 48px);
    max-width: calc(var(--sgs-wrap) + 252px);   /* 목록 236 + 간격 16 */
    margin: 0 auto;
}
.hax[data-ui="sgs"] .sign-main #viewerArea {
    width: auto;
    max-width: var(--sgs-wrap);
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.hax .req-panel {
    flex: 0 0 236px;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: auto;
}
/* 버튼이지만 폰에서만 실제로 접고 편다 — 그래서 버튼 꼴을 지운다 */
.hax .req-head {
    display: flex; align-items: center; gap: 8px;
    width: 100%; flex: 0 0 auto;
    padding: 12px 14px;
    border: 0; border-bottom: 1px solid var(--sgs-rule);
    background: none; text-align: left; font-family: inherit;
    color: var(--sgs-navy);
    font-size: 13px; font-weight: 700; letter-spacing: .06em;
}
.hax .req-count {
    margin-left: auto;
    min-width: 22px; height: 22px; padding: 0 7px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sgs-navy); color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.hax .req-count:empty { display: none; }

.hax .req-list { display: flex; flex-direction: column; }
/* 항목 하나가 곧 이동 버튼이다 — 눌러서 그 칸으로 간다. 채운 뒤에도 남겨서
   고치러 돌아갈 수 있게 하고, 목록이 밀려 잘못 누르는 일을 막는다. */
.hax .req-item {
    display: flex; align-items: center; gap: 8px;
    text-align: left;
    padding: 11px 14px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    font: inherit;
    font-size: 13.5px;
    color: var(--text);
    cursor: pointer;
    position: relative;
}
.hax .req-item::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 14px;
    margin-top: -7px;
    background: var(--sgs-crimson);
}
.hax .req-label { flex: 1 1 auto; min-width: 0; }
.hax .req-mark {
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    color: var(--success);
}
/* 입력을 마친 항목 — 지우지 않고 표시만 바꾼다 */
.hax .req-item.done { color: var(--text-4); }
.hax .req-item.done::before { background: var(--success); }
.hax .req-item:hover { background: var(--sgs-pale); }
.hax .req-item:focus-visible { outline: 2px solid var(--sgs-navy); outline-offset: -2px; }
.hax .req-done {
    padding: 14px;
    font-size: 13px;
    color: var(--text-3);
    line-height: 1.6;
}

/* 목록을 뷰어 아래로 내리는 지점. 내려오면 목록이 세로를 먹어 뷰어가 그만큼 낮아진다.
   900px = 뷰어 최소 600 + 목록 236 + 간격 16 + 좌우 여백 48.

   원래 1380 이었다 — 뷰어에 본문 폭 1080 을 그대로 남기려고 잡은 값이다. 그 대가가
   너무 컸다: 1280×800 에서 목록이 아래로 내려와 **뷰어 세로가 368px** 밖에 안 남아
   서식 1742px 중 18% 만 보였다. 옆에 두면 980×570 이라 폭은 20% 줄지만 세로가 55%
   늘고 보이는 양이 34% 가 된다 (2026-08-10 실측). **서식은 세로로 길어서 폭보다
   높이가 이득이다** — 그래서 옆에 둘 수 있는 한 옆에 둔다. */
@media (max-width: 900px) {
    .hax .sign-main { flex-direction: column; gap: 10px; }
    .hax[data-ui="sgs"] .sign-main #viewerArea { max-width: none; width: auto; }
    /* 목록이 뷰어 아래로 내려오는 구간에서는 이것이 세로를 가장 많이 먹는다
       (900px 화면에서 33vh = 297px). 항목 넷이면 24vh 로도 다 보인다. */
    .hax .req-panel { flex: 0 0 auto; max-height: 24vh; }
    .hax .sign-main { width: calc(100% - 24px); }
    .hax .req-item { min-height: 44px; }
}
/* 폰용 마무리. 여기 있는 것들은 위(또는 `sgs` 프리셋)에 같은 선택자가 있어서
   **뒤에** 와야 이긴다 — 같은 명시도면 나중 규칙이 이긴다. 실제로 헤더 규칙을
   모바일 블록에 뒀다가 프리셋의 `padding: 10px 20px` 에 져서 안 먹었다. */
@media (max-width: 640px) {
    /*
     * 폰에서는 목록을 접어 둔다 — 세로는 뷰어가 먼저다. 머리(개수 포함)만 남기고
     * 눌러서 편다. 셸을 다 깎아도 뷰어에 287px 밖에 안 갔고 그중 목록이 107px 였다.
     */
    .hax .req-panel { max-height: 46px; overflow: hidden; cursor: pointer; }
    /* 펴도 제출 버튼이 화면에 남는 만큼만 (뷰어 최소 240 + 나머지 셸 기준) */
    .hax .req-panel.-open { max-height: 22vh; overflow: auto; }
    /* 접힘/펴짐 모두 머리는 붙어 있는다. `z-index` 가 없으면 밑의 항목이 머리 위로
       올라와 글자가 겹친다 — `.req-item` 이 `position: relative` 라서 뒤 형제가
       이긴다 (2026-08-10 실기기 확인). */
    .hax .req-head { position: sticky; top: 0; z-index: 1; background: var(--surface); }
    /* 작성 화면 헤더. 로고 210px 은 폰에서 두 줄을 만든다 */
    .hax .sgs-head.-compact .sgs-head-in { padding: 6px 14px; }
    .hax .sgs-head.-compact .sgs-logo img { width: 150px; }
}

/* ── 작성 화면의 세로는 뷰어가 가져간다 ──
   서식 한 장이 1526px 인데 뷰어에 620px 밖에 없어 40% 만 보였다 (2026-08-10,
   1440×900 실측). 폭을 넓히는 대신 세로를 넓힌다 — 뷰어는 `PageWidth` 로 그려서
   폭을 늘리면 글자만 커지고 한 화면에 보이는 양은 오히려 줄어든다.

   그래서 셸(스테퍼·안내 띠·제출 띠)의 여백만 깎는다. 세 덩어리 다 한 줄짜리
   내용이라 여백이 대부분이었다. 모바일은 손대지 않는다 — 거기서는 좁은 폭이
   문제이고 여백이 이미 작다. */
@media (min-width: 641px) {
    .hax .sign-steps { padding: 2px 24px 8px; }
    .hax #gateNotice { padding-bottom: 8px; }
    .hax #gateNotice > .toast { padding: 8px 14px; }
    .hax .cta-fix { padding: 10px 24px 12px; }
    /* 터치 타겟은 지킨다 — 48px 은 44px 권고보다 크다 */
    .hax[data-ui="sgs"] .cta-fix #submitBtn { height: 48px; }
}

/* ── 벤더 뷰어 도구모음 — 좁은 화면 ──
   벤더는 도구모음 버튼을 `position:absolute; left:NNNpx` 로 못박아 둔다
   (`eform.css`). 스마트폰용 값도 배율 콤보가 `left:350 + width:130` = 480px 을
   요구해서 375px 화면에서는 오른쪽이 잘린다 (2026-08-10 실측 — 콤보의 `PageWidth`
   글자가 화면 밖으로 나갔다).

   좌표를 하나씩 다시 찍지 않고 줄 전체를 flex 로 바꿔 흐름에 맡긴다. DOM 순서가
   이미 화면 순서라서 그것만으로 정렬이 맞고, 버튼이 늘거나 벤더가 좌표를 고쳐도
   따라온다. 개별 버튼 클래스가 아니라 **공통 클래스**에 건다 — 비활성 상태는
   `_dis_` 라는 다른 클래스가 되므로 개별로 걸면 조용히 빗나간다.

   클래스 접두사 `m_` 는 화면 폭이 아니라 UA(`is_smartphone`)가 정한다. 그래서 두
   접두사를 같이 적는다 — 좁은 데스크톱 창도 같은 이유로 잘린다.

   조건에 `(pointer: coarse)` 를 같이 둔 이유 — 폰을 **가로로 돌리면** 폭이 640 을 넘어
   규칙이 풀리고, 그러면 벤더의 못박힌 좌표(콤보 `left:350`)가 되살아나 도구모음이 다시
   깨진다. 터치 기기는 폭과 무관하게 이 배치를 쓴다. */
@media (max-width: 640px), (pointer: coarse) {
    /* 기본·형광펜·메모 세 줄이 같은 클래스를 쓴다 — 한 규칙이 셋을 다 편다.
       형광펜 줄도 펜 170 … 안내 450 으로 똑같이 잘려 있었다.

       flex 는 줄 자체가 아니라 그 안의 `<nobr>` 에 건다. 버튼과 페이지 입력 표가
       모두 그 안에 들어 있어서(벤더 `mRe_makeTableNobrTag`), 줄에 걸면 자식이
       `<nobr>` 하나뿐이라 아무 일도 일어나지 않는다 — 절대 위치만 풀려서 페이지
       입력 표(`display:table`)가 줄을 끊고 버튼이 3줄로 겹친다 (2026-08-10 실측). */
    .hax #viewerArea .m_eform_menu_table_td_div,
    .hax #viewerArea .eform_menu_table_td_div {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .hax #viewerArea .m_eform_menu_table_td_div > nobr,
    .hax #viewerArea .eform_menu_table_td_div > nobr {
        display: flex;
        align-items: center;
        gap: 2px;
        padding: 0 4px;
        height: 100%;
    }
    .hax #viewerArea .m_eform_menu_button,
    .hax #viewerArea .eform_menu_button,
    .hax #viewerArea .m_eform_input_table,
    .hax #viewerArea .eform_input_table,
    .hax #viewerArea .m_eform_menu_zoom_combo,
    .hax #viewerArea .eform_menu_zoom_combo {
        position: static;
        flex: 0 0 auto;
    }
    /* 줄 높이와 버튼을 같이 줄인다. 본문 영역의 `top` 이 도구모음 높이와 **별도
       고정값**이라 둘을 같은 값으로 바꿔야 한다 — 하나만 바꾸면 틈이 벌어지거나
       도구모음이 서식을 덮는다. 32px 은 터치 타겟 권고(44)보다 작지만 벤더 버튼이고
       줄 자체가 스크롤되므로 오조작 여지는 낮다. */
    .hax #viewerArea .m_eform_menu_div,
    .hax #viewerArea .eform_menu_div { height: 42px; }
    .hax #viewerArea .m_eform_paint_div,
    .hax #viewerArea .eform_paint_div { top: 42px; }
    .hax #viewerArea .m_eform_menu_table_td_div,
    .hax #viewerArea .eform_menu_table_td_div { height: 42px; }
    .hax #viewerArea .m_eform_menu_button,
    .hax #viewerArea .eform_menu_button { width: 32px; height: 32px; }
    /* 콤보는 폭만 줄인다. 글자를 16px 밑으로 내리면 iOS Safari 가 포커스할 때
       화면을 통째로 확대한다. */
    .hax #viewerArea .m_eform_menu_zoom_combo,
    .hax #viewerArea .eform_menu_zoom_combo {
        width: 104px;
        height: 30px;
        font-size: 16px;
    }
    /* 페이지 번호 칸. 데스크톱 값(55+55)이면 표가 120px 을 먹어 줄이 넘친다.
       스마트폰용 값(40)과 같은 자리이므로 두 접두사에 같이 준다.

       높이도 같이 준다 — 스마트폰 값이 `height: 100%` 라서 표가 40px 로 남고
       버튼(32)·콤보(30)보다 **혼자 커 보였다** (2026-08-10 확인). 글자는 16px 밑으로
       내리지 않는다: 이 칸은 입력 필드라 iOS Safari 가 포커스할 때 화면을 확대한다. */
    .hax #viewerArea .m_eform_input_table,
    .hax #viewerArea .eform_input_table {
        height: 32px;
        /* 표라서 셀 간격이 높이에 얹힌다 — 이걸 두면 30 을 줘도 36 이 된다 */
        border-spacing: 0;
    }
    .hax #viewerArea .m_eform_menu_pageCount_input,
    .hax #viewerArea .eform_menu_pageCount_input,
    .hax #viewerArea .m_eform_menu_pageCount_span,
    .hax #viewerArea .eform_menu_pageCount_span {
        width: 40px;
        height: 28px;
        line-height: 28px;
        font-size: 16px;
    }
    /* 줄이 자기 칸보다 커지면 스크롤이 아니라 잘림이 된다 — 표 폭을 고정해
       칸을 100% 로 묶어야 위의 `overflow-x` 가 실제로 걸린다.

       테두리·셀 간격도 지운다. 도구모음을 담은 것이 `<table>` 이라 벤더의
       `border: 1px` + 기본 `border-spacing: 2px` 가 높이에 얹혀 **줄 42 인데 표가
       50 이 된다** — 그 8px 이 도구모음 아래로 삐져나와 서식 위에 얹혔다
       (2026-08-10 실측, 개발자도구로 `table.report_menu_table 404×50` 확인). */
    .hax #viewerArea .report_menu_table {
        table-layout: fixed;
        border: 0;
        border-spacing: 0;
    }
    /* 브라우저 기본 `td { padding: 1px }` 도 위아래로 2px 을 더한다 */
    .hax #viewerArea .report_menu_table_td { padding: 0; }
    /* 첫/끝 페이지는 접는다. 앞/뒤 버튼과 페이지 번호 입력이 있고 스와이프·스크롤
       페이징도 켜져 있다. 1페이지 서식에서는 애초에 비활성이다. */
    .hax #viewerArea [id^="re_first"],
    .hax #viewerArea [id^="re_last"] { display: none; }
    /*
     * 메모는 접는다. 스마트폰 클래스에서 `left:560px` 이라 지금까지 화면 밖에 있어
     * 아무도 쓰지 못했고(즉 접어도 잃는 것이 없다), 375px 에서 줄을 맞추려면
     * 자리가 없다. 형광펜은 남긴다 — 서명 흐름에서 실제로 쓰고 좌표 보정도 해뒀다.
     */
    .hax #viewerArea [id^="re_memo"] { display: none; }
    /* 형광펜 줄의 「필수 항목 자동 안내」도 접는다 — 옆의 `#reqPanel` 이 같은 일을
       하고(누르면 그 칸으로 이동한다) 이 줄은 버튼이 여덟이라 자리가 없다. */
    .hax #viewerArea [id^="re_doodleNecessaryRectAll"] { display: none; }
    /*
     * 형광펜 줄의 페이지 이동도 접는다. 스마트폰 클래스는 버튼이 40px 이라
     * 8개 + 페이지 표시(75px)가 415px 을 먹고 **저장·닫기가 오른쪽으로 밀려난다**
     * (2026-08-10 실측, 375px). 닫기가 밀리면 형광펜 모드에서 나올 방법이 없다.
     * 위쪽 줄에 페이지 이동이 그대로 있고 지금 두 서식은 1페이지다.
     *
     * 페이지 표시는 클래스 이름이 위쪽 줄과 아예 다르다(`*_doodle_pageinfo_table`).
     * 접지 않고 남길 때는 위의 `position: static` 목록에도 같이 넣어야 한다 —
     * 빠뜨리면 이것만 절대 위치로 남아 펜·팔레트 위에 얹힌다 (2026-08-10 실측).
     */
    .hax #viewerArea [id^="re_doodleprev"],
    .hax #viewerArea [id^="re_doodlenext"],
    .hax #viewerArea .m_eform_doodle_pageinfo_table,
    .hax #viewerArea .eform_doodle_pageinfo_table { display: none; }
}

/* ── 서명 패드의 벤더 버튼 ──
   라벨이 한국어가 박힌 PNG 배경(`clipsoft_btu_*.png`)이라 문자열 덮어쓰기로는
   잡히지 않는다. 배경을 여기서 지우고 글자는 sign.js 가 넣는다 — 순서가 중요하다.
   JS 로 지우면 그 한 틱 동안 한국어가 보인다. */
.hax .eform_multiSign_close_button,
.hax .eform_multiSign_save_button,
.hax .eform_multiSign_next_button,
.hax .eform_multiSign_frameReset_button {
    background-image: none !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 0;
    border: 0;
    cursor: pointer;
}
.hax .eform_multiSign_close_button { color: #fff; }
.hax .eform_multiSign_save_button {
    background-color: var(--sgs-navy) !important;
    color: #fff;
}
.hax .eform_multiSign_next_button {
    background-color: var(--sgs-crimson) !important;
    color: #fff;
}
.hax .eform_multiSign_frameReset_button {
    background-color: #fff !important;
    color: var(--sgs-navy);
    border: 1px solid var(--sgs-navy);
}

/* 폰에서는 서명 패드 버튼이 화면 폭을 거의 다 먹는다 — 벤더 값이 닫기 115 + 저장 135 +
   다음 135 = 385px 이다 (390px 화면에서 서로 붙어 버린다). 좌표가 `position:absolute`
   로 못박혀 있어 값을 하나씩 다시 준다.

   머리 높이(60)는 **아래 세 곳의 `top: 60px` 과 같은 값**이라 같이 바꿔야 한다 —
   `frame_Layout_slide` · `frame` · `frame_body`. 하나만 바꾸면 서명 칸이 어긋난다.

   도구모음과 같은 이유로 `(pointer: coarse)` 를 같이 둔다 — 가로로 돌리면 폭이 640 을
   넘어 규칙이 풀린다. */
@media (max-width: 640px), (pointer: coarse) {
    .hax .eform_multiSign_header { height: 44px; }
    .hax .eform_multiSign_header_Label {
        left: 80px; right: 182px; top: 8px; height: 28px; font-size: 13px;
    }
    .hax .eform_multiSign_close_button { width: 76px; height: 44px; }
    .hax .eform_multiSign_save_button {
        top: 7px; right: 94px; width: 84px; height: 30px;
    }
    .hax .eform_multiSign_next_button {
        top: 7px; right: 6px; width: 84px; height: 30px;
    }
    .hax .eform_multiSign_frame_Layout_slide,
    .hax .eform_multiSign_frame { top: 44px; }
    .hax .eform_multiSign_frame_Label {
        left: 8px; right: 104px; top: 6px; height: 30px; font-size: 14px;
    }
    .hax .eform_multiSign_frameReset_button {
        top: 6px; right: 6px; width: 88px; height: 30px;
    }
    .hax .eform_multiSign_frame_body { top: 44px; }
    .hax .eform_multiSign_close_button,
    .hax .eform_multiSign_save_button,
    .hax .eform_multiSign_next_button,
    .hax .eform_multiSign_frameReset_button { font-size: 12px; }
}