/* ============================================================
   헬프데스크 모듈 전용 스타일.

   모듈 안에서만 쓰이므로 Blazor Common 으로 올리지 않는다.
   ============================================================ */

/* 표시 몇 개를 한 줄에 늘어놓는 자리(내가 무슨 자격으로 보는가 따위).
   `jsini-toolbar` 를 쓰지 않는 이유는 그것이 **조건줄**이라는 뜻이라서다 —
   조건이 아닌 것을 거기 담으면 조건이 어디 있는지가 흐려진다. */
.hd-stamps {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.hd-subhead {
  margin: 1rem 0 0.6rem;
  font-size: var(--jsini-fs-lg);
  font-weight: 700;
}

/* ── 입력 폼 (요청 등록 · 파서) ─────────────────────────── */

/*
   [칸 하나를 `minmax(0, 1fr)` 로 못박는 까닭 — 실제로 재어 보고 적는다]

   격자 줄의 기본 크기는 `auto` 이고, 그것의 아래끝은 **내용의 min-content** 다.
   폼에 `max-width` 를 걸어 두어도 줄은 그 한계를 모른 채 내용만큼 넓어지고,
   넘친 만큼이 그대로 본문 밖으로 삐져나간다(`overflow` 가 `visible` 이다).

   여기 `DxHtmlEditor` 가 들어오면서 그 일이 실제로 났다. 편집기의 도구줄
   (`dxbl-toolbar-adaptive`)은 **줄일 수 있는 것이지 줄어 있는 것이 아니다** —
   min-content 는 여전히 단추를 모두 펼친 폭이라, 800px 짜리 폼 안에서
   `.hd-field` 줄이 **1540px** 로 벌어졌다(1200px 창에서 잰 값). 제목 입력칸까지
   같은 줄에 앉아 있어 함께 늘어났고, 본문 영역이 가로로 굴렀다.

   `minmax(0, 1fr)` 은 그 아래끝을 0 으로 낮춘다. 그러면 편집기가 제 폭을 알게
   되고, 도구줄은 **스스로 접는다** — 좁아지면 단추가 「…」와 묶음 드롭다운으로
   들어간다. 고치고 다시 재니 900px·500px·360px 모두 넘치는 요소가 0 이었다.

   `.hd-field` 에도 같은 것을 적는 이유는 그것 역시 격자이기 때문이다. 바깥만
   묶으면 `.hd-field` 자신은 제자리를 지키지만 그 안의 편집기가 다시 벌어진다.
*/
.hd-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: 46rem;
  margin-bottom: 1.25rem;
}

.hd-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  min-width: 0;
}

.hd-field__label {
  font-size: var(--jsini-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--jsini-text-muted);
}

/* 곁들이는 단추 둘이 서는 줄 — 첨부(클립)와 AI 도우미(✨).

   **`align-items: flex-end` 다** (2026-10-11). 고른 파일 목록이 **단추 위로**
   자라므로(바로 아래 `.hd-tools .jsini-picker`) 아래에 맞춰야 단추들이 한 줄에
   선다.

   [전에는 `flex-start` 였고, 까닭이 지금과 같다]

   목록이 단추 **아래로** 자라던 동안에는 위에 맞춰야 단추가 안 움직였다 —
   가운데로 맞추면 파일을 고르는 순간 AI 단추가 목록 높이의 절반만큼 내려가,
   누르려던 자리가 손가락 밑에서 움직인다. 방향이 뒤집혔으니 맞추는 쪽도
   뒤집는다. **지금은 아예 안 움직인다** — 이 줄의 아래끝이 화면 아래에
   붙박여 있고(`.hd-form--wide` 의 세로 쌓기) 목록은 위로만 자란다. */
.hd-tools {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;

  /* **AI 판이 이 줄을 기준으로 선다.** 단추를 기준으로 두면 판의 왼쪽 끝이
     단추 자리(폼 왼쪽에서 46px)에서 시작해, 375px 화면에서 오른쪽으로
     6px 삐져나갔다(재어 본 값 — 판 오른끝 381, 화면 375). 줄을 기준으로
     하면 폼 왼쪽 끝에서 시작하므로 폭을 화면에 맞춰 잡을 수 있다. */
  position: relative;
}

/* ── AI 도우미 ───────────────────────────────────────────

   본문 칸 머리에 붙는 단추 하나와, 눌러서 여는 판.

   **DevExpress 드롭다운을 쓰지 않았다.** 펼친 판 안에 들어가는 것이
   「할 일 둘」일 때도 있고 「지어 놓은 제목 다섯 줄」일 때도 있어서,
   항목(`DxDropDownButtonItem`) 목록으로는 그릴 수 없는 모양이다.
   헤더의 `UserMenu` 가 같은 까닭으로 손으로 그려져 있다.
   ---------------------------------------------------------- */

/* 단추를 감싸는 통. **자리 기준을 여기 두지 않는다** — 펼친 판은 바깥
   줄(`.hd-tools`)을 기준으로 선다. 까닭은 그쪽 주석에 적었다. */
.hd-ai {
  display: inline-flex;
}

/* 곁단추 셋의 크기를 **한 곳에서** 정한다 — 첨부(클립)·AI(로봇)·지우기(휴지통).

   [크기가 저마다 달랐다]

   셋이 서로 다른 틀이었다. 첨부만 `DxButton` 이고 AI 는 평범한 `<button>` 에
   이모지(✨)였는데, 이모지는 글꼴이 그리는 **글자**라 아이콘(마스크 그림)과
   크기 기준이 아예 다르다. 지금은 셋 다 `DxButton` + 마스크 아이콘이고,
   여기서 같은 치수를 건다.

   `.jsini-picker__pick` 은 공용 부품이 제 치수를 들고 있어(2.25rem) 그 값에
   맞춘다 — 그쪽을 여기서 고치면 다른 화면의 첨부 단추가 함께 움직인다. */
.hd-tools .jsini-picker__pick,
.hd-tools .hd-tool-btn {
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding-inline: 0;
}

/* 펼쳐 둔 동안 눌린 티를 낸다. */
.hd-tools .hd-ai__btn.is-on {
  border-color: var(--jsini-primary);
  color: var(--jsini-primary);
}

/* 펼친 판. **흐름 위에 띄운다** — 자리를 차지하게 두면 열 때마다 편집기가
   아래로 밀려서, 제목 후보를 읽는 동안 쓰던 글이 화면 밖으로 나간다.

   **위로 연다**(`bottom: 100%`). 단추가 폼 끝자락으로 내려오면서 아래로
   열면 판이 화면 밖으로 나간다 — 제목 후보 다섯 줄이면 240px 가 넘는다.
   왼쪽에 맞추는 것(`left: 0`)도 같은 까닭이다. 단추가 줄 왼쪽에 서 있어서
   오른쪽에 맞추면 판이 화면 왼편으로 삐져나간다. */
.hd-ai__panel {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 0.35rem);
  left: 0;
  min-width: min(22rem, calc(100vw - 1rem));
  max-width: calc(100vw - 1rem);
  padding: 0.5rem;
  border: 1px solid var(--jsini-border);
  border-radius: var(--jsini-radius, 6px);
  background: var(--jsini-surface);
  box-shadow: 0 6px 20px rgb(0 0 0 / 15%);
}

.hd-ai__item,
.hd-ai__pick {
  display: block;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--jsini-text);
  font-size: var(--jsini-fs-sm);
  text-align: left;
  cursor: pointer;
}

.hd-ai__item:hover,
.hd-ai__pick:hover {
  background: var(--jsini-surface-2, rgb(0 0 0 / 5%));
}

.hd-ai__wait {
  margin: 0;
  padding: 0.6rem;
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-muted);
}

/* 이번 답을 만든 AI. **작게, 흐리게** — 고르는 값이 아니라 알려 주는 값이라
   후보보다 먼저 눈에 들면 안 된다. */
.hd-ai__model {
  margin: 0.35rem 0 0;
  padding: 0.35rem 0.6rem 0;
  border-top: 1px solid var(--jsini-border);
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-muted);
  text-align: right;
}

.hd-ai__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 후보 사이의 가는 선. **첫 줄 위에는 긋지 않는다**(`li + li`) — 판 머리에
   선이 하나 더 생기면 테두리가 두 겹으로 보인다.

   선이 설명 줄을 대신한다. 「하나를 고르는 자리」라는 것을 글로 적어 두었던
   것을 걷어내고(마크업 주석), 줄이 나뉘어 보이는 것으로 같은 말을 한다. */
.hd-ai__list li + li {
  border-top: 1px solid var(--jsini-border);
}

/* 제목 후보는 **접어서 다 보여 준다.** 한 줄로 잘라 「…」로 끝내면 뒤쪽이
   다른 두 후보를 구별할 수 없다 — 고르는 자리에서 그건 고를 수 없는 것이다. */
.hd-ai__pick {
  white-space: normal;
  word-break: break-word;
}

.hd-ai__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--jsini-border);
}

/* 글자 없는 단추(다시 짓기). 네모로 세워 옆의 글자 단추와 높이를 맞춘다. */
.hd-ai__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--jsini-text-muted);
  cursor: pointer;
}

.hd-ai__icon-btn:hover {
  background: var(--jsini-surface-2, rgb(0 0 0 / 5%));
  color: var(--jsini-text);
}

.hd-ai__plain {
  padding: 0.25rem 0.5rem;
  border: 0;
  background: transparent;
  color: var(--jsini-text-muted);
  font-size: var(--jsini-fs-xs);
  cursor: pointer;
}

.hd-ai__plain:hover {
  color: var(--jsini-text);
  text-decoration: underline;
}

/* [폼이 **화면 높이에 맞는다** — 넓은 화면에서도 (2026-10-11)]

   본문이 길어지면 — 캡처가 몇 장 붙으면 금방 그렇게 된다 — 「등록」이 화면
   밖으로 밀려나, 다 쓰고 나서 끝까지 다시 굴려 내려가야 눌렀다.

   [한동안 휴대폰에서만 그랬다 (2026-10-07 → 2026-10-11)]

   넓은 화면은 격자 그대로였고 편집기 높이가 `min-height: 20rem` 한 줄로
   **고정**이었다. 재어 보면 1920×1080 에서 편집기가 320px 이고 「등록」 줄
   아래로 **463px 이 빈 채**였다(1440×900 에서 283px). 화면이 클수록 쓰는
   칸은 그대로인데 빈자리만 늘어나는 모양이다 — 이 화면의 알맹이가 증상
   캡처를 붙이는 그 칸인데.

   그래서 폭을 가리지 않는다. 아래 규칙은 **휴대폰에서 쓰던 그대로**다 —
   미디어 쿼리 한 겹만 벗겼다. 폭에 따라 갈리는 것은 이제 이름표(「제목」·
   「내용」)가 보이느냐뿐이고, 그것은 이 파일 아래쪽이 정한다.

   **재어 본 값은 전부 버리는 Blazor 앱 한 장에서 나왔다**(셸과 같은 마크업 ·
   DevExpress 26.1.4 · playwright 로 몰았다). 모형이라 절댓값은 실물과 몇십
   픽셀 다를 수 있다 — 여기 적는 것은 **고치기 전후의 차이**다.

   **떠다니게 하지 않는다.** 처음에는 `sticky` 로 띄웠는데, 그러면 단추가
   글 위에 겹쳐 지나가고 그 아래 글이 가려진다. 지금은 폼 자체를 화면
   높이에 맞추고 **가운데(본문 편집기)만 늘였다 줄였다** 한다. 그러면 단추는
   떠 있는 것이 아니라 **원래 그 자리가 화면 아래**가 된다.

   쌓는 차례는 제목(제 높이) · 본문(남는 만큼) · 곁단추 줄(제 높이) ·
   등록(제 높이)이다. 가운데만 `flex: 1` 이고 나머지는 제 높이를 지킨다.

   `min-height` 가 요점이다. flex 칸의 기본 최소 높이는 **내용만큼**이라,
   0 으로 내리지 않으면 편집기가 글을 담은 만큼 커지면서 폼을 밀어 늘인다 —
   화면에 맞추려던 것이 도로 화면 밖으로 나간다. 그래서 폼과 편집기에는
   0 을 적고(편집기 안에서 다시 격자가 한 겹 선다), **본문 칸 하나만**
   0 이 아니라 아래끝을 갖는다 — 까닭은 그 칸 주석에 있다. */
.hd-form.hd-form--wide {
  display: flex;
  flex-direction: column;

  /* 본문 통의 안쪽 높이를 그대로 쓴다. 통이 구르지 않으므로 폼이 화면을
     넘지 않고, 넘치는 글은 편집기 **안에서** 구른다. */
  height: 100%;
  min-height: 0;
}

.hd-form.hd-form--wide > .hd-content-field {
  flex: 1 1 auto;

  /* [아래끝을 **칸에** 박는다 — 편집기가 아니라 (2026-10-11)]

     여기는 본디 `min-height: 0` 이었다(flex 칸의 기본 최소 높이가 내용만큼이라
     그대로 두면 편집기가 글을 담은 만큼 커지면서 폼을 밀어 늘인다). 그런데
     0 으로 풀어 두면 위아래 칸이 자랄 때 **이 칸이 끝까지 눌린다** — 1366×600
     창에 첨부 다섯을 고르니 편집기가 **2px** 이었다(재어 본 값 — 1280×720
     에서 77px). 첨부를 고르고 나서 증상을 적으려는데 글칸이 없는 셈이다.

     **아래끝을 편집기에 걸어서는 안 된다.** 그러면 칸은 그대로 눌리고
     편집기만 칸 밖으로 비어져 나와 **단추 줄 위에 겹쳐 그려진다**(재어
     보니 33px 겹쳤다). 칸이 먼저 버텨야 그 안이 산다.

     자리가 12rem 까지도 모자라면 폼이 통 밖으로 넘고 **본문 통이 구른다**
     (`.jsini-shell__content` 가 `overflow: auto`). 「등록」이 한 번 아래로
     내려가는 편이 글칸이 없는 것보다 낫다. */
  min-height: 12rem;

  /* [격자를 flex 로 바꾼다 — 안 그러면 **빈 줄 셋**이 자리를 먹는다]

     칸은 본래 격자다(`.hd-field`). 늘어나는 칸이 되고 나서 그 격자가
     **남는 자리를 줄마다 고르게 나눠 주기** 시작했는데, 그 줄에는 우리가
     넣은 것만 있는 것이 아니다 — DevExpress 가 `<dxbl-resource-script>`
     를 셋 꽂아 두고, 그것들이 `display: block` 이라 각각 한 줄을 차지한다.
     재어 보니 그 셋이 **99px 씩 297px**을 먹어 제목과 본문 사이가 306px
     벌어져 있었다.

     flex 로 바꾸면 그 빈 것들은 제 높이(0)만 차지하고, 남는 자리는
     아래에서 지목한 편집기 하나만 가져간다. DevExpress 가 꽂은 것을
     우리가 감추지 않는 것이 요점이다 — 그쪽 사정은 그쪽에 맡긴다. */
  display: flex;
  flex-direction: column;
}

/* 격자였을 때 `minmax(0, 1fr)` 이 하던 일을 여기서 한다. 없으면 편집기
   도구줄의 min-content 가 칸을 가로로 밀어 넓힌다(파일 위쪽 `.hd-form`
   주석의 그 일이 그대로 난다). */
.hd-form.hd-form--wide > .hd-content-field > * {
  min-width: 0;
}

.hd-form.hd-form--wide > .hd-content-field > .hd-content-editor {
  flex: 1 1 auto;
}

/* 편집기가 그 칸을 채운다. 아래 「요청 본문 편집기」 칸의
   `min-height: 20rem` 은 여기서 걷어야 한다 — 20rem 이 남는 자리보다 크면
   그만큼 삐져나간다. 아래끝은 **칸이** 지킨다(위). */
.hd-form.hd-form--wide .hd-content-editor {
  height: 100%;
  min-height: 0;
}

/* 제목·곁단추·등록은 제 높이를 지킨다. 안 적으면 flex 가 이것들까지
   줄여서, 자리가 모자랄 때 단추가 납작해진다. */
.hd-form.hd-form--wide > .hd-title-field,
.hd-form.hd-form--wide > .hd-tools,
.hd-form.hd-form--wide > .hd-submit,
.hd-form.hd-form--wide > .hd-new-actions {
  flex: 0 0 auto;
}

.hd-new-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

/* [고른 파일 목록은 **단추 위로** 자란다 (2026-10-11)]

   `.jsini-picker` 는 격자라 클립 단추 아래에 목록을 깐다(app.css). 폼이
   화면 높이에 맞기 전에는 그래도 됐는데 — 줄 아래가 그냥 빈자리였다 —
   지금은 이 줄의 **아래끝이 화면 아래**라, 목록이 아래로 자라면
   「등록」이 목록 높이만큼 위로 들려 올라간다. 재어 보니 첨부 다섯에
   216px 이었다. **단추를 아래에 두자고 고친 화면에서 단추가 다시 뜬 셈**이다.

   세로 차례를 뒤집는다(`column-reverse`). DOM 은 그대로 두고 — 클립 단추가
   `ExternalSelectButtonCssSelector` 로 부품과 묶여 있어 자리를 옮길 수 없다 —
   그리는 차례만 뒤집으면 클립이 맨 아래에 남아 AI·지우기·등록과 한 줄에
   서고, 목록은 그 위로 쌓인다. 편집기가 그만큼 줄어드는 것은 같다.

   격자의 `justify-items: start` 가 하던 일(단추가 칸 너비를 다 먹지 않게)은
   `align-items` 가 맡는다. */
.hd-new-actions .jsini-picker {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}

/* [고른 첨부 목록이 **편집기에서 자리를 빼앗는다** (2026-10-11)]

   곁단추 줄은 제 높이를 지키는 칸이라(위 `.hd-form--wide` 의 세로 쌓기),
   그 안에서 파일 목록이 자라는 만큼 고스란히 편집기가 줄어든다. 재어 보면 줄 하나가 53.5px 이고
   다섯 줄이면 목록만 **290px** 이다 — 1920×1080 에서도 편집기가 767px →
   437px 로 내려앉고, 낮은 창에서는 위에 적은 2px 까지 간다.
   (잘라 둔 지금은 다섯 장을 골라도 551px 이다.)

   목록에 아래끝을 준다. **세 줄에서 살짝 모자라게** 잘라 두면(11rem)
   넘는 것은 목록 안에서 구르고, 반쯤 걸친 세 번째 줄이 「더 있다」를
   말한다. 다 보이는 것보다 그 편이 낫다 — 첨부는 고르고 나서 **확인하는**
   자리지 읽는 자리가 아니고, 최대 다섯이라 끝까지 구르는 것도 한 번이다.

   **이 화면의 줄에만 건다.** 같은 고르개가 공지·자료실·메일에도 서는데
   그쪽 폼은 화면 높이에 묶여 있지 않아 빼앗을 자리가 없다. */
.hd-new-actions .dxbl-upload-file-list-view {
  max-height: 11rem;
  overflow-y: auto;
}

/* 폼 끝의 「등록」 줄.

   [휴대폰에서도 **한 줄이다** — 왼쪽 곁단추, 오른쪽 등록 (2026-10-11)]

   한동안 좁은 화면에서는 이 단추가 줄을 통째로 썼다(`flex: 1 1 100%`).
   그러면 폼 끝이 **두 층**이 된다 — 곁단추 셋이 한 줄, 등록이 그 아래 한 줄.
   휴대폰에서는 폼을 화면 높이에 맞추고 가운데만 늘였다 줄였다 하므로
   (위 `.hd-form--wide` 의 세로 쌓기) 그 한 층은 **본문 편집기에서 그대로
   덜어 간 높이**다. 캡처를 붙여 가며 적는 칸이 그만큼 좁아진다.

   「빠른 지시」(`/projmng/ai/ask`)의 단추 줄과 같은 모양으로 맞춘다 —
   곁들이는 것들이 왼쪽, **누를 것 하나가 오른쪽 끝**이다(`pm-ask__bar`).
   이 줄에 서는 것은 아이콘 셋(2.25rem)과 「등록」 한 단어뿐이라 390px
   에서도 자리가 남는다.

   폭을 다 쓰지 않는 대신 **단추를 키운다.** 짚을 자리를 글자폭에만 맡기면
   흔들리는 자리에서 겨누기 어렵다 — 높이와 좌우 여백을 빠른 지시의
   `pm-ask__go` 와 같은 값으로 둔다. 치수는 `DxButton` 의 뿌리인 `.dxbl-btn`
   에 건다. 바깥 `div` 에 걸면 그 안에서 단추는 제 글자폭 그대로다.

   **줄바꿈을 막아 둔다**(`nowrap`). 첨부를 고르면 파일 이름이 왼쪽에서
   자라는데, 그대로 두면 이름이 긴 파일 하나에 등록이 도로 아랫줄로 내려간다 —
   왼쪽이 줄고(`min-width: 0`) 단추는 제 크기를 지킨다(`flex: 0 0 auto`). */
@media (width <= 767px) {
  .hd-new-actions {
    flex-wrap: nowrap;
  }

  .hd-tools {
    min-width: 0;
  }

  .hd-submit {
    flex: 0 0 auto;
  }

  .hd-submit .dxbl-btn {
    min-height: 2.75rem;
    padding-inline: 1.25rem;
    font-weight: 600;
  }
}

/* 제목 칸을 시원하게 연다.

   DevExpress 기본 입력칸은 글자 위아래로 9px 이다. 제목은 이 폼에서
   **본문 다음으로 큰 칸**인데 그 높이로는 아래 편집기 옆에서 눌려 보이고,
   휴대폰에서는 손가락으로 짚는 자리이기도 하다.

   안쪽 `<input>` 에 건다. 바깥 칸에 걸면 테두리만 커지고 글자는 제자리라
   위아래가 비어 보인다. */
.hd-title-field .dxbl-text-edit-input {
  padding-block: 0.75rem;
}

/* 폼의 폭.

   [데스크탑에서는 본문 폭을 그대로 쓴다]

   아래 「문의 접수 폼」 칸에서 같은 이름에 `max-width: 800px` 를 걸어 두었고,
   뒤에 오는 그쪽이 이겨서 **이 폼도 800px 에 묶여 있었다.** 요청 등록의
   알맹이는 증상 캡처가 들어가는 본문 편집기인데, 1920px 짜리 화면에서도 그
   편집기가 800px 안에 들어앉아 캡처가 실제보다 작게 접혀 보였다.

   그래서 넓은 화면에서는 묶음을 푼다. 좁은 화면은 어차피 화면이 800px 보다
   좁아 묶음이 하는 일이 없으므로 그대로 둔다.

   **제목 칸이 같이 늘어난다.** 그 칸은 한 줄이라 끝까지 늘려 봐야 득이 없지만,
   요청 제목은 짧지 않고(장비 이름 · 증상 · 날짜가 함께 들어온다) 아래 편집기와
   왼쪽 끝이 맞아 있어야 폼이 한 덩이로 보인다. 둘을 갈라 제목만 묶으면 폼
   가운데에 턱이 생긴다. */
/* [바깥 상자를 걷었다 (2026-10-07)]

   아래 「문의 접수 폼」 칸이 같은 이름에 테두리 한 겹과 안쪽 여백을 걸어
   두어서, 요청 등록 폼이 네모 상자 안에 들어앉아 있었다. 그 상자가 하는 일이
   없다 — 셸 본문에 이 폼 하나뿐이라 **무엇과 무엇을 가르는 선이 아니고**,
   셸 여백이 3px 로 내려온 지금은 선 한 겹과 여백 두 겹이 그 자리를 도로
   먹는다.

   **이름을 둘 겹쳐 적는다**(`.hd-form.hd-form--wide`). 그 칸이 이 파일에서
   **뒤에 있어서**, 셈이 같으면 그쪽이 이긴다 — 한 겹으로 적으면 이 규칙이
   조용히 묻힌다(1280px 에서 재어 보니 폼이 그대로 800px 이었다). */
.hd-form.hd-form--wide {
  padding: 0;
  border: 0;
  margin: 0;
}

@media (width >= 768px) {
  .hd-form.hd-form--wide {
    max-width: none;
  }
}

/* [휴대폰에서는 「제목」·「내용」 이름표를 걷는다]

   칸마다 이름표 한 줄이 더 붙으면 390px 짜리 화면에서 본문 편집기가 그만큼
   아래로 밀린다. 같은 말이 칸 안에 흐린 글자(`NullText`)로 들어가 있으므로
   두 번 말하는 셈이기도 하다.

   **「요청자」와 「첨부」는 남긴다.** 그 둘은 안 고르면 그만인 칸이라 칸 안이
   비어 있을 때가 보통이고, 「첨부」는 그 안이 단추라 흐린 글자를 넣을 자리가
   아예 없다 — 이름표를 걷으면 무엇을 고르는 단추인지가 사라진다. */
@media (width <= 767px) {
  .hd-title-field > .hd-field__label,
  .hd-content-field > .hd-field__label {
    display: none;
  }

  /* [이름표를 감춘 자리에 **틈이 두 겹** 남아 있었다]

     칸 하나는 격자이고 그 안을 `gap: 0.35rem` 으로 벌려 둔다 — 이름표와
     입력칸 사이를 띄우려고 둔 값이다. 이름표를 `display: none` 으로 감추면
     격자 칸 자체가 없어지므로 그 틈도 같이 사라져야 맞는데, 폼이 칸들
     사이를 또 `gap: 1rem` 으로 벌리고 있어서 제목과 본문 사이가 결국
     한 뼘이 됐다.

     칸 **안쪽** 틈을 0 으로 내린다. 감춘 이름표 말고는 벌릴 것이 없다 —
     칸 사이를 벌리는 일은 폼의 `gap` 이 한다. */
  .hd-title-field,
  .hd-content-field {
    gap: 0;
  }

  /* 칸 사이도 좁힌다. 1rem 은 이름표가 있던 시절의 값이다. */
  .hd-form.hd-form--wide {
    gap: 0.5rem;
  }
}

/* ── 요청 상세 ──────────────────────────────────────────── */

/* 요청 한 건의 머릿값들(고객사·사람 둘·날짜 셋).

   [격자 여덟 칸을 한 줄짜리 띠로 눕혔다 (2026-09-28)]

   바로 앞에는 `dt` 를 위·`dd` 를 아래로 쌓은 덩이를 네 칸 격자에 늘어놓았다.
   세로로 열 줄 쌓였던 것보다는 나았지만 **덩이 하나가 두 줄**이라 판 자체가
   여전히 124px 이었고(1440px 에서 잰 값), 칸마다 줄 높이가 두 벌이라
   판이 화면에서 큰 덩어리로 보였다.

   지금은 값 하나가 **`이름 값` 한 줄**이고(`.hd-fact` 가 제 안에서 가로
   flex), 그 줄들을 흘려 넣는다. 여섯 칸이 넓은 화면에서 **한 줄**로 끝난다.

   격자가 아니라 `flex-wrap` 인 까닭 — 값의 길이가 칸마다 크게 다르다
   (`-` 한 글자부터 「주식회사 …」까지). 격자는 제일 긴 칸에 맞춰 나머지를
   모두 넓히지만, 흘려 넣으면 **각 칸이 제 폭만** 먹고 남는 자리에 다음
   칸이 붙는다. 좁아지면 스스로 줄을 내린다 — 휴대폰용 규칙이 따로 없다.

   `dt` 를 `nowrap` 으로 못박는 것은 이름이 두 글자(「접수일」)뿐이라
   접히면 값보다 이름이 높아져 줄 높이가 들쭉날쭉해지기 때문이다.
   ---------------------------------------------------------- */

.hd-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 1.15rem;
  margin: 0 0 0.6rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--jsini-border);
  font-size: var(--jsini-fs-sm);
}

/* 이름과 값이 **한 덩이로** 접힌다 — 묶지 않으면 좁은 화면에서
   「접수일」과 그 날짜가 서로 다른 줄로 갈린다. */
.hd-fact {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
}

.hd-facts dt {
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-muted);
  white-space: nowrap;
}

.hd-facts dd {
  margin: 0;

  /* 「이순열(quristyle)」 처럼 띄어쓰기가 없는 덩이가 들어온다.
     끊을 자리를 안 주면 좁은 칸에서 그대로 넘친다. */
  overflow-wrap: anywhere;
}

/* 본문. 줄바꿈을 살린다 — 폼에서 여러 줄로 쓴 글이라
   한 줄로 뭉개면 재현 방법을 읽을 수 없다. */
.hd-content {
  padding: 0.7rem 0.9rem;
  background: color-mix(in srgb, var(--jsini-text-muted) 8%, transparent);
  font-size: var(--jsini-fs-md);
  line-height: 1.7;
  white-space: pre-line;
}

/* 「수정」·「접수」·「완료」.

   [본문 아래에 있던 것을 머리 오른쪽으로 올렸다 (2026-09-28)]

   전에는 본문 다음에 제 줄로 서 있어서, 판 하나가 통째로 세로를 먹는
   데다 **본문이 길면 단추가 화면 밖으로 밀려났다** — 맡을지 말지를
   정하려고 글을 끝까지 굴려 내려야 했다. 지금은 제목과 같은 줄
   오른쪽 끝에 붙어 늘 첫 화면에 있다(`margin-left: auto`).

   휴대폰에서는 머리 자체가 접히므로 단추 줄이 스스로 아래로 내려간다 —
   좁은 폭을 위한 규칙을 따로 두지 않는다. */
.hd-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.hd-actions a {
  text-decoration: none;
  padding: 0.2rem 0.7rem;
}

/* ── 현황 타일 ───────────────────────────────────────────

   상태 여섯을 한 줄에 늘어놓는다. 좁아지면 접히도록 `auto-fit` 을 쓴다 —
   고정 칸수로 두면 태블릿에서 타일이 잘린다.
   ---------------------------------------------------------- */

.hd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.6rem;
}

/* ── 구역 제목 ───────────────────────────────────────────

   한 화면에 표가 둘 이상일 때 그 사이를 가른다.
   ---------------------------------------------------------- */

.hd-section {
  margin: 1.4rem 0 0.5rem;
  font-size: var(--jsini-fs-lg);
  font-weight: 600;
}

/* ── 덧붙이는 말 ─────────────────────────────────────────

   배지 옆에 붙는 짧은 설명. 배지와 같은 크기·색이면 둘 다 상태로 읽힌다.
   ---------------------------------------------------------- */

.hd-note {
  margin-left: 0.4rem;
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-muted);
}

/* ── 차트 (D3 — 옛 화면에 echarts 가 있던 곳에만) ────────────

   대시보드·보고서의 차트 묶음. 타일과 같은 이유로 `auto-fit` 이다 —
   데스크톱에서는 나란히, 모바일에서는 아래로 접힌다.
   `min-width: 0` 이 없으면 차트 캔버스가 그리드 칸을 밀어 넓혀서
   좁은 화면에서 가로 스크롤이 생긴다.
   ---------------------------------------------------------- */

.hd-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin: 0.75rem 0;
}

.hd-chart {
  min-width: 0;
  border: 1px solid var(--jsini-border);
  padding: 0.75rem 1rem 0.5rem;
}

.hd-chart__title {
  margin: 0 0 0.5rem;
  font-size: var(--jsini-fs-lg);
  font-weight: 600;
}

/* 가로축이 열두 칸(월별)·서른 칸(일별)인 차트. `auto-fit` 이 둘로 갈라 놓으면
   축 라벨이 겹쳐 읽히지 않으므로 한 줄을 통째로 쓴다. */
.hd-chart--wide {
  grid-column: 1 / -1;
}

/* 차트 자리에 그릴 것이 없을 때. 판을 비워 두면 「망가졌나」로 읽힌다. */
.hd-chart__empty {
  margin: 0;
  padding: 2rem 0;
  text-align: center;
  color: var(--jsini-text-muted);
}

/* ── 눌리는 타일 ─────────────────────────────────────────

   「한눈에 보기」의 타일은 눌러서 그 목록(`/helpdesk/request/manage`)을 연다.

   누를 자리를 타일 전체로 만들려고 **링크 한 장을 타일 위에 깔았다**
   (`hd-stat__hit`). 그래서 타일 자신이 자리의 기준(`relative`)이 되어야 한다 —
   안 그러면 링크가 화면 전체로 늘어나 **아무 데나 눌러도 그 목록이 열린다.**

   초점 테두리는 `:focus-within` 으로 타일에 그린다. 깔아 둔 링크는 속이
   비어 있어서 거기에 테두리를 그리면 아무것도 안 보인다.
   ---------------------------------------------------------- */

.hd-stat--link {
  position: relative;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.hd-stat--link:hover {
  border-color: var(--jsini-accent);
  background-color: color-mix(in srgb, var(--jsini-accent) 8%, var(--jsini-surface));
}

.hd-stat--link:focus-within {
  outline: 2px solid var(--jsini-accent);
  outline-offset: 1px;
}

.hd-stat__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 깔아 둔 링크는 속이 비어 있다. 초점 테두리는 타일이 그리므로(위) 여기서는
   지운다 — 둘 다 그리면 테두리가 두 겹으로 겹친다. */
.hd-stat__hit:focus,
.hd-stat__hit:focus-visible {
  outline: none;
}

/* ── 타일의 곁말 ─────────────────────────────────────────

   큰 숫자 아래 한 줄. 「지난달 23건 ▲ 12%」 · 「표본 145건」처럼 **그 수를
   어떻게 읽어야 하는지**를 적는 자리다. 같은 크기로 두면 값이 둘로 보인다.
   ---------------------------------------------------------- */

.hd-stat__note {
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-muted);
  line-height: 1.3;
}

/* ── 고객사별 · 담당자별 카드 ────────────────────────────

   전에는 표였다. 칸이 열넷(고객사) · 열둘(담당자)이라 넓은 모니터에서도
   가로로 밀렸고, **한 줄을 끝까지 읽어야** 「이 회사가 어떤가」가 잡혔다.
   줄마다 고르게 굵은 숫자가 열넷이면 눈이 붙잡을 곳이 없다.

   카드는 그 열넷을 세 층으로 나눈다.

     머리    이름과 **그 칸의 대푯값** 하나(고객사=전체 건수 ·
             담당자=완료 건수). 먼저 읽히는 것은 이것 하나다.
     띠      상태 분해를 폭으로 그린다. 「대기가 반이다」가 숫자를
             읽기 전에 보인다. 색은 이 화면 도넛의 상태 팔레트 그대로다 —
             같은 뜻에 같은 색이어야 차트와 카드가 같은 말을 한다.
     지표    나머지는 이름·값 쌍으로 두 칸에 접는다. 굵기를 낮춰
             대푯값과 다투지 않게 한다.

   칸 너비는 `auto-fill` 에 320px 다. `auto-fit` 이면 카드가 한 장일 때
   그 한 장이 화면을 가로질러 늘어나 「깨진 것」으로 보인다 —
   `auto-fill` 은 빈 칸을 남겨 두어 카드 폭이 늘 같다.
   ---------------------------------------------------------- */

.hd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.75rem;
}

.hd-my-comments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  grid-auto-rows: 14rem;
  gap: 0.5rem;
}

.hd-my-comment {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
}

.hd-my-comment__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  flex: 0 0 auto;
}

.hd-my-comment__request {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  font-weight: 600;
  color: var(--jsini-text);
  text-decoration: none;
}

.hd-my-comment__head .jsini-badge {
  flex: 0 0 auto;
}

.hd-my-comment__request:hover {
  text-decoration: underline;
}

.hd-my-comment__content {
  flex: 1 1 auto;
  overflow: auto;
  min-width: 0;
  min-height: 0;
  overflow-wrap: anywhere;
  padding-top: 0.5rem;
  border-top: 1px solid var(--jsini-border, #e0e0e0);
  /* `scrollbar-width: thin` 을 걷었다 — 크로미움에서는 이 한 줄이 app.css 의
     3px(`::-webkit-scrollbar`) 를 이 칸에서만 무시하게 만들어, 혼자 굵은
     기본 막대가 섰다. 얇게 하는 일은 app.css 가 한다. */
}

.hd-my-comment__content.hd-content img {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  max-width: 100%;
  object-fit: cover;
  vertical-align: middle;
  margin: 0.125rem 0.25rem 0.125rem 0;
  border: 1px solid var(--jsini-border);
  border-radius: 4px;
  background: var(--jsini-surface);
}

.hd-my-comment__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--jsini-border, #e0e0e0);
  font-size: var(--jsini-fs-sm);
  color: var(--jsini-text-muted);
  flex: 0 0 auto;
}

/* `jsini-card` 와 겹쳐 쓴다 — 테두리·바탕·그림자는 테마(app.css · tabler.css)가
   그리고, 여기서는 격자 칸으로서의 몸가짐만 고친다.
   아래 여백을 지우는 것은 `jsini-card` 의 1rem 이 격자 안에서는
   칸 사이 간격에 겹쳐 아랫줄만 벌어져 보이기 때문이다. */
.hd-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  margin-bottom: 0;
}

/* 이름은 왼쪽, 대푯값은 오른쪽 끝. 이름이 길면 이름만 줄고
   숫자는 제자리를 지킨다(`flex-shrink: 0`). */
.hd-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

/* 담당자 얼굴 자리. 사진 주소를 화면에 들이지 않고 **이름 첫 글자**를
   쓴다 — 헬프데스크 사진은 아직 포털에서 꺼내 볼 길이 없어서,
   `img` 로 걸면 깨진 그림 아이콘이 카드마다 선다. */
.hd-card__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--jsini-border, #e0e0e0);
  font-size: var(--jsini-fs-sm);
  font-weight: 700;
  line-height: 1;
}

.hd-card__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: var(--jsini-fs-lg);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 대푯값 — 카드에서 가장 굵은 한 곳. 「42건」의 「건」은 한 단 작게
   두어 숫자가 먼저 읽히게 한다. */
.hd-card__lead {
  flex: 0 0 auto;
  font-size: var(--jsini-fs-2xl);
  font-weight: 700;
  line-height: 1.1;
}

.hd-card__lead small {
  margin-left: 0.15rem;
  font-size: var(--jsini-fs-xs);
  font-weight: 500;
  color: var(--jsini-text-muted);
}

/* 상태 분해 띠. 조각 폭은 화면이 인라인 `width` 로 준다(비율이 자료다).
   `overflow: hidden` 이 있어야 조각이 둥근 모서리 밖으로 안 삐져나온다. */
.hd-bar {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 0.5rem;
  border-radius: 0.25rem;
  background: var(--jsini-border, #e0e0e0);
}

.hd-bar__seg {
  height: 100%;
}

/* 띠 아래 범례. 0 건인 상태는 화면에서 빼므로 여기 안 선다 —
   도넛에서 0 조각을 빼는 것과 같은 까닭이다. */
.hd-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-muted);
}

.hd-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.hd-legend__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.hd-legend__count {
  font-weight: 600;
  color: var(--jsini-text);
}

/* 나머지 지표. 두 칸으로 접고 이름은 흐리게, 값만 굵게 둔다.
   `minmax(0, 1fr)` 이라야 긴 값(「2026-09-27」)이 칸을 밀지 않는다. */
.hd-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem 0.75rem;
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--jsini-border, #e0e0e0);
  font-size: var(--jsini-fs-sm);
}

.hd-card__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
}

.hd-card__fact dt {
  flex: 0 0 auto;
  color: var(--jsini-text-muted);
  font-weight: 400;
}

.hd-card__fact dd {
  margin: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 카드가 한 장도 없을 때. 구역을 통째로 비우면 「안 불러왔나」로 읽힌다. */
.hd-cards__empty {
  margin: 0;
  padding: 1.5rem 0;
  text-align: center;
  color: var(--jsini-text-muted);
}

/* ── 문의 접수 폼 ────────────────────────────────────────

   한 줄에 한 칸씩 쌓는 세로 폼. 이 모듈에서 여기 하나뿐이라
   Blazor Common 으로 올리지 않는다.

   폭을 묶는 것은 입력칸이 `width: 100%` 이기 때문이다 — 안 묶으면
   와이드 모니터에서 제목 한 줄짜리 칸이 화면 끝까지 늘어난다.
   ---------------------------------------------------------- */

.hd-form {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--jsini-border);
}

.hd-form__title {
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.hd-form__field { margin-bottom: 1rem; }

.hd-form__field:last-of-type { margin-bottom: 1.5rem; }

.hd-form__label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

/* 보내기·비우기. 폼 끝이라 오른쪽으로 몬다. */
.hd-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* 나란한 두 표(상태별·유형별). 좁으면 위아래로 쌓인다. */
.hd-two {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (width >= 1024px) {
  .hd-two { grid-template-columns: 1fr 1fr; }

  /* ── 나란한 자료 판이 본문 높이를 채운다 ──────────────

     공통 규칙(app.css)은 `.commcont` 가 셸 본문의 **직속 자식**일 때만 높이를
     채운다. 나란히 앉히면 판 둘이 `.hd-two` 안에 들어 있어 그 규칙이 안
     걸리는데, 표의 높이 제한을 푸는 쪽은 그대로 걸려서 넣기만 하면 표가
     자료만큼 늘어나고 쪽이 통째로 구른다. 같은 일을 여기서 한 번 더 적는다
     (admin.css 의 `.ad-split` 과 같은 모양). */
  .jsini-shell__content:has(> .hd-two) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .jsini-shell__content > .hd-two {
    flex: 1;
    min-height: 0;

    /* 줄 높이를 내용이 정하지 않게 한다. 격자 줄의 기본은 `auto` 라서
       높이를 정해 줘도 줄이 자료만큼 늘어나 그대로 넘친다. */
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }

  /* 격자 자식은 `min-height: auto` 라 내용보다 작아지지 않는다. */
  .hd-two > .commcont {
    min-height: 0;
  }

  .hd-two > .commcont > .commcont__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
}

/* 위아래로 쌓인 자료 판 사이를 벌리는 공통 규칙은 나란히 앉힐 때 오른쪽
   판만 내려앉게 한다. 여기서 사이를 벌리는 일은 격자의 `gap` 이 한다. */
.hd-two > .commcont + .commcont {
  margin-top: 0;
}

/* ── 요청 본문 편집기 ────────────────────────────────────

   공지·메일과 같은 부품(`DxHtmlEditor`)이라 생김새는 그쪽이 그린다.
   여기서 정하는 것은 **높이** 하나다 — 기본값이 세 줄쯤이라 증상을 쓰다 보면
   칸 안에서 스크롤이 생기고, 그러면 방금 붙여넣은 그림이 화면 밖으로 밀린다.
   ---------------------------------------------------------- */

.hd-content-editor {
  min-height: 20rem;
}

/* ── 도구줄 글씨 ───────────────────────────────────────────

   [DevExpress 의 크기 단은 **셋**인데 포털의 사다리는 **여섯**이다]

   테마 서랍의 글자 크기는 가장작게 · 아주작게 · 작게 · 조금작게 · 보통 ·
   크게 여섯이고(`--jsini-fs-base`), 그중 앞의 넷이 DevExpress **Small 하나로
   접힌다**(`ThemeSize.Steps`). 그런데 도구줄 글씨는 그 단 값에 묶여 있어서
   (테마 CSS 의 `.dxbl-toolbar.dxbl-sm { --dxbl-toolbar-font-size: .75rem }`)
   **네 단계에서 도구줄만 제자리에 서 있었다** —

       가장작게 10/12 · 아주작게 11/12 · 작게 12/12 · 조금작게 13/12
       (본문 글씨 / 도구줄 글씨, px)

   사이드바 메뉴가 같은 까닭으로 같은 일을 한다(`app.css` 의
   `--dxbl-treeview-font-size`). 여기서도 도구줄이 **읽는 변수**를 우리 값으로
   덮는다 — 그 값을 정하는 테마 규칙이 클래스 둘(`.dxbl-toolbar.dxbl-sm`)이라
   셋으로 적어야 이긴다.

   [굵기도 함께 돌려 놓는다]

   `app.css` 의 `.jsini-shell__content .dxbl-btn:not(.dxbl-btn-link)` 가 본문
   안의 모든 DevExpress 단추를 **600** 으로 올린다. 폼의 「등록」 같은 단추에는
   맞는 값이지만 도구줄의 묶음 이름표(「글자」·「문단」)까지 그 무게로 서면
   같은 줄의 다른 글씨보다 진해 보인다. 저쪽 규칙이 클래스 둘 + `:not()`
   하나라 여기도 셋으로 적고, 모듈 CSS 가 `app.css` 보다 뒤에 실려 이긴다.
   ---------------------------------------------------------- */

.hd-form .hd-content-editor .dxbl-toolbar {
  --dxbl-toolbar-font-size: var(--jsini-fs-base);
}

/* 도구줄 안의 고르개 둘(「글꼴」·「크기」)과 단추 글씨도 같은 값을 읽는다.
   바로 위 규칙은 도구줄 **제 글씨**만 정하고, 그 안에 선 부품들은 저마다
   제 변수를 본다 — 안 맞춰 주면 가장작게에서 본문 10px 옆에 고르개만
   12px 로 남는다(재어서 고친 자리다). */
.hd-form .hd-content-editor .dxbl-text-edit {
  --dxbl-text-edit-font-size: var(--jsini-fs-base);
}

.hd-form .hd-content-editor .dxbl-btn {
  --dxbl-btn-font-size: var(--jsini-fs-base);
  font-weight: 400;
}

/* [도구줄의 「글꼴」·「크기」 두 칸만 CSS 로 덮는다]

   도구줄 이름표는 `HtmlEditorKorean` 이 C# 에서 갈아 끼우는데, **이 둘만
   거기에 손이 닿지 않는다.** 콤보 안에 비쳐 보이는 글자는 `Text` 도
   `Tooltip` 도 아니라 DevExpress 가 제 리소스에서 꺼내 `placeholder` 로
   박는 값이고(`HtmlEditor_Toolbar_FontNameNullText` · `…FontSizeNullText`),
   바깥에 내준 API 에 그것을 적을 자리가 없다. 그래서 도구줄에서 **눈에 제일
   잘 띄는 영어**가 그 둘이었다 — 나머지가 다 한국어가 되고 나니 더 그랬다.

   덮는 길은 둘이다. 영어를 투명하게 만들고(`::placeholder`), 칸 위에 우리
   글자를 한 겹 얹는다(`::after`). 콤보가 이미 `position: relative` 이고
   비었을 때 `field-text=""` 를 들고 있어서, **고쳐 그려도 다시 맞는다** —
   JS 로 한 번 적어 두는 방식은 도구줄이 접혔다 펴질 때마다 날아간다.

   초점이 들어오면 치운다(`:not(:focus-within)`). 글자를 치는 동안에는
   `field-text` 가 아직 비어 있어서, 안 치우면 친 글자와 겹쳐 보인다. */
.hd-content-editor .dxbl-toolbar-combobox > input::placeholder {
  color: transparent;
}

.hd-content-editor .dxbl-toolbar-combobox[custom-placeholder="Font"][field-text=""]:not(:focus-within)::after,
.hd-content-editor .dxbl-toolbar-combobox[custom-placeholder="Size"][field-text=""]:not(:focus-within)::after {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--jsini-text-muted);
  pointer-events: none;
}

.hd-content-editor .dxbl-toolbar-combobox[custom-placeholder="Font"][field-text=""]:not(:focus-within)::after {
  content: "글꼴";
}

.hd-content-editor .dxbl-toolbar-combobox[custom-placeholder="Size"][field-text=""]:not(:focus-within)::after {
  content: "크기";
}

/* 편집기 안의 그림. 원본이 화면 캡처라 칸보다 넓은 것이 보통이고,
   묶어 두지 않으면 편집기가 통째로 가로로 늘어난다. */
.hd-content-editor img {
  max-width: 100%;
  height: auto;
}

/* 그림이 지나가는 칸. **사람에게 보일 일이 없다** — `request-editor.js` 가
   여기에 파일을 밀어 넣거나(붙여넣기·끌어놓기) 이것을 열어 준다(도구줄의
   「그림」 단추).

   `display: none` 으로 두지 않는다. 그 상태의 파일 칸은 **사파리에서 열리지
   않는 일이 있다** — 우리가 `click()` 으로 여는 길이 생겼으므로 그 자리가
   곧 휴대폰에서 사진을 못 고르는 자리가 된다. 자리는 차지하지 않으면서
   화면에서만 치운다. */
.hd-paste-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}

/* ── 요청 본문 (상세·수정에서 보는 쪽) ───────────────────

   본문이 HTML 이라 그림·표가 들어 있다. 칸보다 넓은 것을 묶어 두지 않으면
   본문이 쪽을 가로로 밀어낸다.
   ---------------------------------------------------------- */

.hd-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.5rem 0;
}

.hd-content table {
  border-collapse: collapse;
  max-width: 100%;
}

.hd-content td,
.hd-content th {
  border: 1px solid var(--jsini-border);
  padding: 0.25rem 0.5rem;
}

/* 편집기가 내놓는 것은 `<p>` 로 갈린 글이다. 그 사이를 기본 여백으로 두면
   줄 사이가 지나치게 벌어져 재현 절차가 한눈에 안 들어온다. */
.hd-content p {
  margin: 0 0 0.5rem;
}

.hd-content p:last-child {
  margin-bottom: 0;
}

/* ── 요청 상세 머리 ──────────────────────────────────────

   이 화면은 **탭으로 따로 선다**(`RequestDetail.razor` 머리말). 그래서 사이드바
   에서 고른 흔적도, 브레드크럼도 없다 — 메뉴에 없는 주소라 레이아웃이 줄기를
   찾지 못한다. 알림을 누르고 들어온 사람에게는 이 화면이 **첫 화면**이므로
   돌아갈 자리를 화면이 직접 둔다.
   ---------------------------------------------------------- */

/* 한 줄에 넷이 앉는다 — 돌아갈 자리 · 제목 · 상태 배지 · 단추 줄.

   상태를 머릿값 판에서 여기로 꺼낸 것은, 그것이 **값이 아니라 이 글이
   지금 어떤 것인가**여서다. 제목 옆에 붙어 있으면 「대기」인지 「완료」인지를
   글자를 읽기 전에 알고, 바로 옆 단추(접수·완료)와 짝이 맞는다.

   **제목은 늘어나지 않고 줄어들기만 한다**(`flex: 0 1 auto`). 늘게 두면
   제목이 남는 자리를 전부 먹어서 **상태 배지가 제목에서 떨어져 나가
   단추 옆에 가 붙는다** — 그러면 배지를 여기 올린 까닭이 없어진다.
   오른쪽으로 미는 일은 단추 줄의 `margin-left: auto` 가 한다.

   긴 제목이 들어오면 제목만 줄어들어 스스로 접히고(`min-width: 0` +
   `overflow-wrap`), 배지와 단추는 제 폭을 지킨다. */
.hd-detail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.6rem;
}

.hd-detail__back {
  font-size: var(--jsini-fs-md);
  color: var(--jsini-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.hd-detail__back:hover {
  color: var(--jsini-text);
  text-decoration: underline;
}

.hd-detail__title {
  margin: 0;
  font-size: var(--jsini-fs-lg);
  font-weight: 700;

  /* 제목이 길면 줄이 접히는 대신 머리 전체가 가로로 늘어난다. */
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── 댓글 나무 ───────────────────────────────────────────

   `CommentThread` 가 자기를 다시 부르며 그린다. 여기서 정하는 것은
   **한 층 들여쓰는 폭**과 층을 눈으로 가르는 세로줄이다.

   깊이에 제한이 없으므로(자료가 정한다) 폭을 크게 잡으면 몇 층 안 가
   본문이 한 글자 폭이 된다. 휴대폰에서는 더 좁힌다.
   ---------------------------------------------------------- */

.hd-cmts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.hd-cmt {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--jsini-border);
  min-width: 0;
}

.hd-cmt__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

.hd-cmt__who {
  font-weight: 600;
  font-size: var(--jsini-fs-md);
}

.hd-cmt__when,
.hd-cmt__count {
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-muted);
}

/* 앞의 것과 붙어 보이지 않게 한 칸 민다. */
.hd-cmt__count { margin-left: auto; }

.hd-cmt__body {
  font-size: var(--jsini-fs-md);
  line-height: 1.7;
  min-width: 0;
}

/* 지워진 댓글. 자리와 딸린 답글은 남기고 내용만 가린다 —
   줄째로 빼면 그 아래 답글이 부모를 잃는다. */
.hd-cmt__body--gone {
  color: var(--jsini-text-muted);
  font-style: italic;
}

.hd-cmt__acts {
  margin-top: 0.2rem;
}

.hd-cmt__write {
  margin-top: 0.5rem;
}

/* 한 층 들어간 답글들. 세로줄이 어느 말에 붙은 답인지를 보여 준다. */
.hd-cmt__kids {
  margin-top: 0.75rem;
  margin-left: 1.25rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--jsini-border);
  min-width: 0;
}

@media (width <= 767px) {
  /* 360px 짜리 화면에서 네 층만 들어가도 본문이 사라진다. */
  .hd-cmt__kids {
    margin-left: 0.35rem;
    padding-left: 0.5rem;
  }
}

/* ── 댓글 쓰는 칸 ────────────────────────────────────────

   요청 본문과 같은 부품(`DxHtmlEditor`)이라 생김새는 그쪽이 그린다.
   여기서 정하는 것은 **높이**와 **격자 안에서 안 벌어지게 묶는 것**이다 —
   까닭은 이 파일 위쪽 `.hd-form` 주석에 적어 두었다(도구줄의 min-content 가
   단추를 모두 펼친 폭이라, 안 묶으면 편집기가 칸을 밀어 넓힌다).
   ---------------------------------------------------------- */

.hd-cmt-write {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  min-width: 0;
}

.hd-cmt-root {
  margin-top: 1rem;
}

/* 뿌리 댓글 칸은 상세 화면의 **맨 마지막**이라, 휴대폰에서 끝까지 내리면
   그 오른쪽 아래 모서리가 떠다니는 단추(✎) 자리에 선다 — 거기가 바로
   「남기기」를 얹어 둔 자리다. 한 칸 올려 비킨다.

   값과 까닭은 요청 처리의 「더보기」 띠와 같다(아래 `.hd-manage-more--phone`). */
@media (max-width: 767px) {
  .hd-cmt-root {
    margin-bottom: 4.25rem;
  }
}

/* 「남기기」를 칸 안에 얹으려고 기준점을 세운다. */
.hd-cmt-write {
  position: relative;
}

.hd-cmt-editor {
  /* 요청 본문(20rem)보다 낮다. 댓글은 대개 몇 줄이고, 높게 잡으면
     답글 칸이 열릴 때마다 아래 글이 한 화면씩 밀린다. */
  min-height: 9rem;

  /* **세로로 쌓는다.** 도구줄을 접었을 때 그 높이를 글칸이 가져가게 하려면
     글칸이 남는 높이를 받는 쪽이어야 한다(바로 아래). 안 세우면 접은 만큼
     칸 전체가 낮아져서, 짚을 때마다 아래 글이 들썩인다. */
  display: flex;
  flex-direction: column;
}

/* 글칸(DevExpress 의 바깥 상자)이 남는 높이를 다 받는다. */
.hd-cmt-editor > .dxbl-widget-container {
  flex: 1 1 auto;
  min-height: 0;
}

/* ── 도구줄은 **쓰는 동안만** 선다 (2026-10-06) ──────────────

   상세 화면에는 댓글 칸이 여럿 뜬다 — 뿌리 하나에 답글까지. 그 전부가
   서식 단추 줄을 이고 있는데, 글을 읽는 동안에는 하나도 안 누르는 줄이다.
   휴대폰에서는 그 한 줄이 글 쓰는 칸만큼 높다.

   접는 것은 `display: none` 이다. 높이만 0 으로 눌러 두면(`height: 0`)
   그 안의 단추들이 **보이지 않는 채로 눌리는 자리**에 남는다.

   펴는 조건은 화면이 클래스로 알려 준다(`--writing`). `:focus-within` 으로
   하지 않는 까닭은 글꼴·정렬 단추가 띄우는 목록이 **문서 끝에 따로 그려져**
   포커스가 칸 밖으로 나가기 때문이다 — 고르려고 누른 순간 줄이 접힌다.
   ---------------------------------------------------------- */
.hd-cmt-editor > .dxbl-ribbon__root {
  display: none;
}

.hd-cmt-write--writing .hd-cmt-editor > .dxbl-ribbon__root {
  display: block;
}

/* ── 「남기기」는 칸 **안** 오른쪽 아래에 얹는다 (2026-10-06) ──

   줄로 세워 두면 칸마다 단추 한 줄이 더 붙는다. 답글을 두어 개만 열어도
   그 줄들이 쌓여 정작 읽어야 할 댓글이 화면 밖으로 밀린다.

   얹어 두면 칸 높이가 곧 전부다. 글이 단추 밑으로 기어들지 않게 글칸
   아래에 단추 높이만큼 여백을 둔다. */
.hd-cmt-write__run {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 2;

  /* 줄로 설 때 쓰던 아래 여백을 걷는다 — 얹은 자리에서는 칸 밖으로 민다. */
  margin-bottom: 0;
}

.hd-cmt-write__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.hd-cmt-write__footer .hd-cmt-write__run {
  position: static;
  margin-left: auto;
  flex-shrink: 0;
}

.hd-cmt-write__tools {
  min-width: 0;
}

.hd-cmt-write__tools .jsini-picker {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}

.hd-cmt-write__tools .dxbl-upload-file-list-view {
  max-height: 8rem;
  overflow-y: auto;
}

/* 단추가 가릴 만큼만 비워 둔다. DevExpress 글칸의 기본 여백 위에 더한다. */
.hd-cmt-editor .ql-editor {
  padding-bottom: 0.75rem;
}

/* 올리는 중이라는 말도 얹는다 — 줄로 세우면 그동안만 칸이 한 줄 높아져
   아래 글이 들썩인다. 단추와 반대쪽(왼쪽)이라 겹치지 않는다. */
.hd-cmt-write__busy {
  position: absolute;
  left: 0.6rem;
  bottom: 0.9rem;
  z-index: 2;
}

.hd-cmt-editor img {
  max-width: 100%;
  height: auto;
}

/* ── 댓글 첨부파일 목록 ── */
.hd-cmt__files,
.hd-my-comment__files {
  list-style: none;
  margin: 0.35rem 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.hd-my-comment__files {
  flex: 0 0 auto;
}

.hd-cmt__file,
.hd-my-comment__file {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--jsini-border);
  border-radius: var(--jsini-radius, 4px);
  background: var(--jsini-surface, #f8f9fa);
  color: var(--jsini-text);
  font-size: var(--jsini-fs-sm, 0.85rem);
  text-decoration: none;
  max-width: 100%;
}

.hd-cmt__file:hover,
.hd-my-comment__file:hover {
  background: var(--jsini-hover, #e9ecef);
  text-decoration: underline;
}

.hd-cmt__file-name,
.hd-my-comment__file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}

.hd-cmt__file-size,
.hd-my-comment__file-size {
  color: var(--jsini-text-muted);
  font-size: var(--jsini-fs-xs, 0.75rem);
  flex-shrink: 0;
}

/* ── 요청 처리 표의 「그림」 칸 ──────────────────────────

   요청 한 건을 대신하는 그림 한 장(`RequestThumb`). 파일 서버가 주는 것은
   150×150 이라 여기서 다시 줄여 건다.

   **높이를 줄 높이 안에서 잡는다.** 그림의 제 높이를 그대로 두면 줄이
   그림만큼 키가 커져서, 그림이 있는 줄과 없는 줄이 들쭉날쭉해진다 —
   스물다섯 줄짜리 표에서 그것이 제일 먼저 눈에 띈다.

   `object-fit: cover` 라 가로로 긴 사진도 가운데를 잘라 네모로 선다.
   맞춰 줄이면(`contain`) 줄마다 그림 폭이 달라져 칸이 흔들린다.
   ---------------------------------------------------------- */

.hd-row-thumb {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--jsini-border);
  vertical-align: middle;
  background: var(--jsini-surface);

  /* 눌러서 크게 볼 수 있다는 표시. 줄 전체도 눌리는 자리라(상세로 간다)
     여기만 손가락이 아니라 **돋보기**여야 다른 일이 난다는 것이 보인다. */
  cursor: zoom-in;
}

/* ── 요청 처리 표 — 줄 하나가 80px 다 (`.hd-manage-grid`) ─────

   그림이 2rem 짜리 우표만 해서 **무엇이 찍힌 그림인지 알아볼 수가
   없었다.** 줄 높이를 못 박고 「그림」 칸이 그 높이를 통째로 쓴다.

   **높이를 줄(`td`)에 준다.** 그림에만 주면 그림이 있는 줄과 없는 줄이
   들쭉날쭉해진다 — 스물다섯 줄짜리 표에서 그것이 제일 먼저 눈에 띈다.

   그 높이가 두 줄을 내주므로 제목 칸이 제목 위에 상태·요청자·접수·경과를
   얹는다(아래 `.hd-req-*`).

   클래스는 화면이 `CommGrd CssClass=` 로 건다 — 그 값은 `DxGrid` 뿌리로
   흘러가므로 `.commgrd` 가 아니라 **표 자신**에 붙는다.
   ---------------------------------------------------------- */

.hd-manage-grid .dxbl-grid-table > tbody > tr > td {
  height: 80px;
}

/* 「그림」 칸만 여백을 걷는다. DevExpress 가 `.dxbl-grid …> td` 자릿수로
   여백을 그려서 우리 선택자로는 못 이긴다 — `:has()` 로 자릿수를 올려도
   테마가 그 값을 다시 잡는 자리가 있어 `!important` 로 못 박는다. */
.hd-manage-grid .dxbl-grid-table > tbody > tr > td:has(> .hd-row-thumb) {
  padding: 0 !important;
}

/* **비율은 그대로 두고 가운데를 잘라** 칸을 채운다(`object-fit: cover` 는
   위 기본 규칙에서 온다). 맞춰 줄이면(`contain`) 줄마다 그림 폭이 달라져
   칸이 흔들린다. 칸 폭이 80px 라 결과는 정사각이다. */
.hd-manage-grid .hd-row-thumb {
  display: block;
  width: 100%;
  height: 80px;
  border: 0;
  border-right: 1px solid var(--jsini-border);
  border-radius: 0;
}

/* ── 제목 칸 — 얹은 한 줄 + 제목 ──────────────────────────── */

.hd-req-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
  min-width: 0;
  text-align: left;
}

.hd-req-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
  font-size: var(--jsini-fs-xs);
  line-height: 1.2;
  color: var(--jsini-text-muted);
}

.hd-req-meta__dot {
  opacity: 0.5;
}

/* 표가 `TextWrapEnabled="false"` 라 칸이 `nowrap` 이다. 제목만 풀어 두 줄까지
   받고 그 뒤는 … 로 자른다 — 안 자르면 긴 제목 하나가 줄 높이를 밀어 올려
   80px 못이 풀린다. */
.hd-req-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  max-width: 100%;
  font-weight: 600;
  line-height: 1.35;
  color: var(--jsini-text);
}

/* ── 요청 처리 — 휴대폰의 카드 목록 (`RequestCards`) ──────────

   휴대폰에서는 표를 쓰지 않는다. **칸 머리줄이 없고 안에서 구르지 않는
   목록**이 필요한데 그 둘은 DevExpress 표를 비틀어 얻는 모습이 아니다 —
   까닭은 `RequestRowList` 머리말에 적어 두었다. 여기 있는 것은 그 목록의
   생김새뿐이다.

   줄은 `그림 | 글` 두 칸이고 그림이 없는 줄도 **같은 자리를 비워 둔다** —
   안 비우면 글이 줄마다 다른 자리에서 시작해 목록이 들쭉날쭉해진다.
   표(`.hd-manage-grid`)처럼 줄 높이를 못 박지 않는다. 긴 제목이 두 줄로
   가도 그만큼 늘어나면 되고, 쪽이 구르므로 아래가 밀릴 뿐이다.
   ---------------------------------------------------------- */

.hd-req-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 줄은 **테두리와 띠만** 들고, 안의 상자(`__row`)가 글을 깐다. 갈라 둔 것은
   밀기 때문이다 — 움직이는 것은 글 쪽이고 띠는 줄에 붙어 제자리에 있어야
   한다(아래 「밀어서 접수 · 삭제」). */
.hd-req-list__item {
  position: relative;
  border-top: 1px solid var(--jsini-border);

  /* 민 글이 줄 밖으로 삐져나가 **쪽을 옆으로 굴리게** 하지 않는다. */
  overflow: hidden;
}

/* 판이 이미 테두리를 두르고 있어 첫 줄 위의 선은 두 겹이 된다. */
.hd-req-list__item:first-child {
  border-top: 0;
}

.hd-req-list__row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  cursor: pointer;

  /* 누를 때 안드로이드 크롬이 칠하는 파란 네모를 걷는다. 줄 전체가 누르는
     자리라 그 네모가 카드만 하게 번쩍인다. */
  -webkit-tap-highlight-color: transparent;
}

.hd-req-list__row:active {
  background: var(--jsini-surface);
}

/* 56px 이다 — 표의 80px 보다 작다. 휴대폰에서는 글이 쓸 폭이 더 아쉽고,
   한 줄에 얹는 값이 다섯이라(회사·요청자·접수·경과·담당) 그만큼이 제목을
   밀어낸다. 눌러서 크게 보는 길은 그대로 있다. */
.hd-req-list__thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid var(--jsini-border);
  border-radius: var(--jsini-radius-sm);
  background: var(--jsini-surface);

  /* 줄 전체도 눌리는 자리라(상세로 간다) 여기만 손가락이 아니라 **돋보기**
     여야 다른 일이 난다는 것이 보인다. */
  cursor: zoom-in;
}

/* 그림이 없는 줄의 빈자리. 테두리를 두르지 않는다 — 빈 네모가 줄마다 서면
   그것이 「못 받은 그림」으로 읽힌다. 자리만 지킨다. */
.hd-req-list__thumb--none {
  border-color: transparent;
  background: transparent;
  cursor: default;
}

.hd-req-list__empty {
  margin: 0;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--jsini-text-muted);
}

/* ── 「대기」는 **밀어서** 접수하고 지운다 ──────────────────────

     오른쪽으로 민다   접수 — 왼쪽 가장자리에서 초록 띠가 열린다
     왼쪽으로 민다     삭제 — 오른쪽 가장자리에서 빨간 띠가 열린다

   움직이는 값을 **전부 인라인 사용자 지정 속성으로** 받는다. 클래스로 받지
   않는 까닭은 목록이 「더보기」·조회·상태 갱신으로 다시 그려지기 때문이다 —
   Blazor 가 줄의 `class` 를 제 손으로 쥐고 있어서, 손짓 중에 그 갱신이 한 번
   끼면 **JS 가 붙인 클래스가 소리 없이 지워지고 줄이 밀린 자리에 굳는다.**
   `style` 은 Blazor 가 아예 그리지 않으므로(줄에 `style` 속성이 없다) 그
   자리는 건드리지 않는다. 대는 쪽은 `js/request-swipe.js`.

     --hd-swipe        밀린 거리. **부호가 있다** — 양수가 오른쪽(접수)
     --hd-swipe-ms     전환 시간. 끄는 동안은 0
     --hd-swipe-ready  문턱을 넘었나(0/1)

   **띠를 줄 밑에 깔고 글로 덮는 흔한 방법을 쓰지 않았다.** 그러려면 글 쪽에
   불투명한 바탕을 깔아야 하는데, 이 목록의 바탕은 테마가 정하는 값이라
   스물둘 중 어긋나는 쪽이 반드시 나온다. 띠가 **민 만큼만** 넓어지면 덮을
   일이 없다 — 글이 비켜 준 자리에 띠가 그만큼 서는 것이다.
   ---------------------------------------------------------- */

.hd-req-list__item[data-swipe] {
  --hd-swipe: 0px;
  --hd-swipe-ms: 0ms;
  --hd-swipe-ready: 0;
}

/* `touch-action: pan-y` 가 이 기능의 핵심 한 줄이다. 세로 끌기는 브라우저가
   제 스크롤로 가져가고 **가로 끌기만 우리에게 온다** — 이 목록은 쪽이 통째로
   구르는 자리라(`.hd-manage-cont--phone`) 세로를 막으면 목록을 못 넘긴다.

   **띠 위에 놓인다**(`z-index`) — 띠가 절대 자리라 그대로 두면 문서에서 뒤인
   띠가 글을 덮어 제목이 색에 가린다. */
.hd-req-list__item[data-swipe] > .hd-req-list__row {
  position: relative;
  z-index: 2;
  touch-action: pan-y;
  transform: translateX(var(--hd-swipe));
  transition: transform var(--hd-swipe-ms) ease;
}

/* 띠 자체. 가만히 있을 때 **폭이 0** 이라 화면에 한 픽셀도 없다.

   **안쪽 여백을 주지 않는다.** 주면 폭이 0 이어도 상자가 그만큼은 남아
   (`width` 는 여백 아래로 못 내려간다 — `border-box` 로 해도 마찬가지다)
   밀 수 있는 줄마다 가장자리에 **색 실오라기**가 늘 서 있다. 글자를 안으로
   들이는 일은 안의 ✓ · ✕ 가 제 바깥 여백으로 한다.

   `max()` 로 한쪽 부호만 받는다 — 오른쪽으로 민 거리는 접수 띠만 쓰고
   왼쪽은 삭제 띠만 쓴다. 한 변수로 둘을 그리니 **두 띠가 함께 열리는 일이
   없다**(JS 도 방향을 한 번 가리면 바꾸지 않는다). */
.hd-req-swipe {
  position: absolute;
  inset-block: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
  color: #fff;
  font-size: var(--jsini-fs-2xs);
  white-space: nowrap;
  pointer-events: none;
  transition: width var(--hd-swipe-ms) ease;
}

/* 접수는 초록이다 — 공통 배지의 「완료·진행」 쪽 초록 그대로다. 이 화면만의
   색을 새로 만들면 같은 뜻이 자리마다 다른 초록이 된다. */
.hd-req-swipe--accept {
  left: 0;
  justify-content: flex-start;
  width: max(0px, var(--hd-swipe));
  background: #2e7d32;
}

/* 삭제는 빨강이고 **글자가 오른쪽 끝에 붙는다** — 손가락이 가는 쪽에서
   읽혀야 한다. */
.hd-req-swipe--remove {
  right: 0;
  justify-content: flex-end;
  width: max(0px, calc(-1 * var(--hd-swipe)));
  background: #d32f2f;
}

/* 문턱을 넘으면 표가 커지고 글자가 또렷해진다. **손을 떼기 전에**
   「놓으면 처리된다」를 알려 주는 것이 이 둘의 일이다 — 넘기 전에 놓으면
   줄은 제자리로 돌아간다. */
.hd-req-swipe__mark {
  flex: 0 0 auto;
  margin: 0 0.6rem;
  font-size: var(--jsini-fs-sm);
  line-height: 1;
  transform: scale(calc(0.7 + (0.3 * var(--hd-swipe-ready))));
  transition: transform 120ms ease;
}

.hd-req-swipe__text {
  opacity: calc(0.45 + (0.55 * var(--hd-swipe-ready)));
  transition: opacity 120ms ease;
}

/* 움직임을 줄여 달라고 한 사람에게는 **결과만** 준다. 띠는 열리지 않고 줄도
   따라 움직이지 않는다 — 처리됐다는 것은 줄이 목록에서 빠지거나(삭제) 상태
   딱지가 「진행」으로 바뀌는 것(접수)으로 이미 말한다. */
@media (prefers-reduced-motion: reduce) {
  .hd-req-list__item[data-swipe] > .hd-req-list__row,
  .hd-req-swipe,
  .hd-req-swipe__mark,
  .hd-req-swipe__text {
    transition: none;
  }
}

/* ── 그 목록이 실린 판은 **쪽이 구른다** ─────────────────────

   셸 본문은 자료 판(`CommCont`)을 품으면 남은 높이를 그 판에 다 주고
   넘치는 것을 잘라 낸다(`app.css` 의 `.jsini-shell__content:has(> .commcont)`).
   표에는 맞는 규칙이다 — 표가 제 안에서 구르니까. 그런데 카드 목록은
   **줄이 전부 깔린다.** 그대로 두면 스물다섯 줄 중 화면에 든 몇 줄만
   보이고 나머지와 「더보기」가 통째로 잘린다(오류는 안 난다).

   그래서 이 판에서만 되돌린다 — 본문이 구르고 판은 제 키만큼 선다.
   화면이 휴대폰일 때만 이 클래스를 붙이므로(`RequestManage`) 폭 조건을
   따로 걸지 않는다. 자릿수가 `app.css` 쪽과 같고 **helpdesk.css 가 뒤에
   실리므로**(`JSiniHead`) 이긴다.
   ---------------------------------------------------------- */

.jsini-shell__content:has(> .hd-manage-cont--phone) {
  overflow: auto;
}

.jsini-shell__content:has(> .hd-manage-cont--phone) > .hd-manage-cont--phone {
  flex: 0 0 auto;
}

.jsini-shell__content:has(> .hd-manage-cont--phone) > .hd-manage-cont--phone > .commcont__body {
  display: block;
}

/* ── 요청 처리 — 목록 아래의 「더보기 · 더 읽기」 줄 ────────

   휴대폰에서는 페이저 대신, 데스크톱에서는 페이저 **곁에** 단추 하나가 선다
   (`RequestManage` 머리말).

   데스크톱에서는 표가 남은 높이를 다 먹고 제 안에서 구르므로
   (`app.css` 의 `.commcont__body > .commgrd`) 이 줄이 **늘 화면 아래쪽 같은
   자리**에 남는다 — 다음 묶음을 받으려고 목록 끝까지 내려갈 일이 없다.

   휴대폰에서는 반대로 **목록 맨 끝**이다(바로 위 절). 거기가 맞는 자리다 —
   「더보기」는 다 보고 나서 누르는 단추이고, 화면 아래에 붙박아 두면
   아직 볼 것이 남았는데도 손가락 밑에서 계속 어른거린다.
   ---------------------------------------------------------- */

.hd-manage-more {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.4rem;
}

/* 데스크톱에만 선다. 페이저가 쪽을 말하므로 여기는 **몇 건 중 몇 건을
   받아 두었는지**만 적는다 — 그 수가 곧 「더 읽기」를 누를 까닭이다. */
.hd-manage-more__note {
  margin-right: auto;
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-muted);
}

/* 휴대폰에서는 단추를 띠 끝까지 늘린다. 가운데 작게 놓으면 한 손으로 쥔
   휴대폰에서 엄지가 닿는 자리를 눈으로 찾아야 한다.

   좌우 여백은 **이 띠가 스스로 갖는다.** 좁은 화면에서는 판 안쪽 여백이
   걷혀 있어(tabler.css 의 `.commcont__body`) 안 주면 단추가 판 가장자리에
   붙는다. 값은 카드 줄(`.hd-req-list__item`)과 같은 1rem 이라 단추의 양 끝이
   위 목록의 글과 세로줄을 맞춘다. */
.hd-manage-more--phone {
  padding: 0.6rem 1rem 0;
}

.hd-manage-more--phone .hd-manage-more__go {
  width: 100%;
}

/* ── 떠다니는 단추를 피해 **한 칸 올라선다** (2026-10-06) ─────

   이 띠는 자료 판(`CommCont`)의 맨 아래에 붙고, 그 판은 본문 높이를 꽉
   채운다 — 줄이 셋이든 서른이든 **띠는 늘 화면 바닥에 선다.** 그런데 거기가
   떠다니는 단추(☰ · ✎)가 떠 있는 자리라, 폭을 끝까지 쓴 이 단추의 양 끝이
   그 동그라미 둘에 덮였다. 가운데는 눌리지만 글자가 가려 읽히지 않는다.

   폭을 줄여 비켜서는 쪽은 안 골랐다 — 단추가 어느 귀퉁이에 설지는 사람이
   환경설정에서 고르는 값이라(왼쪽/오른쪽 · 위/아래), 옆을 비워 두면 위쪽을
   고른 사람에게는 **그냥 좁아진 단추**다. 위로 올라서는 것은 아래 귀퉁이를
   고른 경우에만 겹치던 것을 푸는 일이라 손해가 한쪽뿐이다.

   3.75rem 은 단추 하나(3rem)에 그 단추가 바닥에서 띄운 만큼(0.75rem)을
   더한 값이다 — 위의 `.jsini-shell__fab` 와 같은 수다. 거기에 숨 쉴 틈을
   조금 더 둔다. */
@media (max-width: 767px) {
  .hd-manage-more--phone {
    margin-bottom: 4.25rem;
  }
}

/* ── 다 깔고 나면 **꺼진 채로 남는다** (2026-10-06) ──────────

   끝이라는 말을 하려고 남겨 두는 단추다(화면의 그 머리말). 그런데
   DevExpress 의 꺼진 단추는 **켜진 것보다 더 요란하다** — 어두운 테마에서
   밝은 회색 띠로 칠해져 목록 아래에서 제일 먼저 눈에 든다. 끝났다는
   조용한 말이 목록보다 세게 나오는 꼴이다.

   그래서 바탕을 걷고 **점선 테두리**만 남긴다. 점선은 「여기가 끝이라
   더 이어지지 않는다」를 테두리 모양 하나로 말한다 — 눌리지 않는다는
   것도 함께 보인다.

   `!important` 는 테마가 `--dxbl-btn-*` 로 칠한 바탕을 덮는 값이다.
   글자는 캡션 쪽 `opacity: 0.5` 가 한 번 더 흐리게 만들어 어두운 바탕에서
   읽히지 않으므로 거기서 되돌린다. */
.hd-manage-more--phone .hd-manage-more__go:disabled {
  background: transparent !important;
  border: 1px dashed var(--jsini-border) !important;
  color: var(--jsini-text-muted) !important;
  box-shadow: none !important;
}

.hd-manage-more--phone .hd-manage-more__go:disabled .dxbl-btn-caption {
  opacity: 1;
}

/* ── 눌리는 카드 ───────────────────────────────────────── */

.hd-card--link {
  position: relative;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.hd-card--link:hover {
  border-color: var(--jsini-accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.hd-card--link:focus-within {
  outline: 2px solid var(--jsini-accent);
  outline-offset: 1px;
}

.hd-card__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hd-card__hit:focus,
.hd-card__hit:focus-visible {
  outline: none;
}

/* ── 끌어서 나누는 좌우 분할 (`hd-vsplit`) ─────────────────

   프로시저 결과가 쓴다 — 왼쪽이 목록, 오른쪽이 실행 결과다.
   **폭을 사람이 정한다.** 격자로 못 박아 두었더니(25%) 프로시저 이름이
   긴 쪽과 결과 칸이 많은 쪽이 서로 다른 폭을 바랐다.

   셸의 사이드바와 **같은 부품**이다(`DxSplitter`). 그래서 치수와 규칙도
   그쪽에서 정한 것을 그대로 따른다 — 자세한 이유는 app.css 의
   `.jsini-shell__split` 머리말에 있고, 포털관리의 `ad-vsplit`(admin.css)이
   같은 일을 한다. 모듈끼리는 서로의 CSS 를 참조하지 않으므로(모듈마다 제
   `wwwroot/*.css` 를 싣는다) 여기에 한 벌을 둔다.

   [높이를 부모가 정해야 한다]

   `DxSplitter` 는 자기 높이를 부모에게서 받는다. 안 주면 판이 통째로
   안 보인다 — **오류가 안 나는 고장**이다.

   [판 자신이 카드다]

   판 안에 `CommCont` 를 넣으므로 테두리·바탕·그림자는 그쪽이 그린다
   (app.css 의 `.commcont`). 여기서 덧그리면 선이 두 줄로 겹친다 —
   `ad-vsplit__pane` 이 제 카드를 그리는 것과 갈라지는 지점이다.
   ---------------------------------------------------------- */

@media (width >= 992px) {
  .jsini-shell__content:has(> .hd-vsplit) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .jsini-shell__content > .hd-vsplit {
    flex: 1;
    min-height: 0;
  }
}

/* 판 안쪽 여백을 걷어낸다. 규칙과 다투지 않고 **그 규칙이 읽는 변수**를
   덮는다 — 셸에서와 같은 방법이고, 크기 모드마다 값이 달라 자릿수를
   넘겨야 세 모드에서 모두 걸린다. */
.jsini-shell .hd-vsplit.dxbl-splitter {
  --dxbl-splitter-pane-padding-x: 0;
  --dxbl-splitter-pane-padding-y: 0;
}

.hd-vsplit > .dxbl-splitter-pane > .dxbl-splitter-pane-content {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 판 하나(=`CommCont`). **자기 안에서 구른다** — 판 밖으로 넘기면 셸 본문이
   `overflow: hidden` 이라 잘린다. */
.hd-vsplit__pane {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* 구분선에 내용이 닿지 않게 띄운다. 붙어 있으면 어느 쪽 글자인지 눈이 헷갈린다. */
.hd-vsplit__pane--left { margin-right: 0.375rem; }
.hd-vsplit__pane--right { margin-left: 0.375rem; }

/* 머리줄은 제자리에 두고 **안의 것만 구른다.** 통째로 구르면 「프로시저
   52개」와 「실행」 단추가 함께 올라가 버린다. */
.hd-vsplit__pane > .commcont__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 구분선. **끌 수 있다는 것은 해 보기 전에는 보이지 않는다** — 마우스를
   올리면 강조색을 옅게 깔아 알린다(셸 구분선과 같은 뜻이다). */
.hd-vsplit > .dxbl-splitter-separator {
  background: var(--jsini-border);
}

.hd-vsplit > .dxbl-splitter-separator:hover {
  background: color-mix(in srgb, var(--jsini-accent) 55%, transparent);
}

/* 좁은 화면에서는 위아래로 쌓는다.

   **판을 지우지 않고 상자만 없앤다**(`display: contents`). 마크업을 화면
   크기로 갈아 끼우면 경계를 넘을 때마다 고른 프로시저와 실행 결과가 통째로
   다시 만들어진다 — 셸이 같은 이유로 같은 방법을 쓴다.

   DevExpress 가 판에 인라인으로 넣는 폭·좌표는 상자가 없어지면 아무 일도
   하지 않는다. 구분선은 감춘다 — 끌 자리가 없다. */
@media (width < 992px) {
  .hd-vsplit,
  .hd-vsplit > .dxbl-splitter-pane,
  .hd-vsplit > .dxbl-splitter-pane > .dxbl-splitter-pane-content {
    display: contents;
  }

  .hd-vsplit > .dxbl-splitter-separator { display: none; }

  /* 쪽이 구르는 자리라 판이 스스로 높이를 묶으면 안 된다. */
  .hd-vsplit__pane {
    display: block;
    overflow: visible;
    margin: 0 0 1rem;
  }

  .hd-vsplit__pane > .commcont__body {
    display: block;
  }
}

/* ── 프로시저 목록 ───────────────────────────────────────

   거르개는 **거르는 것 바로 위**에 붙박이로 서고, 목록만 구르고, 인자 칸과
   「실행」은 판 아래에 붙박이로 남는다. 판 전체가 구르면 프로시저를 고르자마자
   단추가 화면 밖으로 밀려난다 — 고르는 것과 돌리는 것이 잇따르는 동작이라
   그 둘이 한 화면에 있어야 한다.
   ---------------------------------------------------------- */

.hd-procfilter {
  flex: 0 0 auto;
  width: 100%;
  margin-bottom: 0.5rem;
}

.hd-proclist {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;

  /* 좁은 화면에서는 판이 높이를 안 받으므로(위 미디어 질의 밖) 여기서
     막아 둔다. 안 막으면 프로시저 수십 개가 쪽을 통째로 늘린다. */
  max-height: 22rem;
  overflow-y: auto;
}

@media (width >= 992px) {
  .hd-proclist {
    flex: 1;
    min-height: 6rem;
    max-height: none;
  }
}

.hd-proclist__empty {
  margin: 0.4rem 0;
  font-size: var(--jsini-fs-sm);
  color: var(--jsini-text-muted);
}

/* 줄 하나. `<button>` 이라야 키보드로 닿는다 — 그 대신 단추의 기본 생김새를
   전부 걷어내야 한다. */
.hd-proc {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;

  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-radius: var(--jsini-radius-sm, 0.25rem);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hd-proc:hover {
  background: var(--jsini-surface);
}

.hd-proc:focus-visible {
  outline: 2px solid var(--jsini-accent);
  outline-offset: -2px;
}

/* 고른 줄은 **면으로** 칠한다. 테두리를 두르면 그 줄만 키가 커져 목록이
   들썩인다(테마 서랍의 고른 항목과 같은 규칙). */
.hd-proc.is-on {
  background: color-mix(in srgb, var(--jsini-accent) 14%, transparent);
}

.hd-proc__name {
  font-weight: 600;
  white-space: nowrap;
}

/* 설명은 곁말이라 줄을 늘리지 않는다. 이름이 길면 설명부터 줄어든다. */
.hd-proc__desc {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-muted);
}

/* ── 인자 칸 ─────────────────────────────────────────────

   목록 바로 아래, 판 맨 밑에 붙는다.

   [한 줄에 셋을 앉힌다 — 이름 · 칸 · 형]

   세로로 쌓았더니 인자 하나가 **세 줄**(이름 / 칸 / `varchar(100)`)을 먹었다.
   인자가 둘뿐인 프로시저에서도 여섯 줄이고, 그만큼이 바로 위 목록에서
   빠진다 — 이 판에서 길이를 다투는 것은 목록이다.

   이름과 형은 **글자만큼만** 차지하고 남는 폭은 칸이 다 가진다. 판이 좁아
   모자라면 둘 다 … 로 줄고 칸은 끝까지 남는다 — 사람이 값을 넣는 자리가
   먼저 사라지면 안 된다.
   ---------------------------------------------------------- */

.hd-params {
  flex: 0 0 auto;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--jsini-border);
}

.hd-params__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.hd-params__title {
  font-size: var(--jsini-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--jsini-text-muted);
}

.hd-params__fields {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content);
  align-items: center;
  gap: 0.4rem 0.45rem;
  min-width: 0;
}

/* 줄 자신은 상자를 만들지 않는다 — 칸 셋이 바로 위 격자의 칸이 되어야
   줄마다 같은 세로줄에 선다. `<label>` 의 「눌러서 칸에 들어가기」는
   상자가 없어져도 그대로다. */
.hd-param {
  display: contents;
}

/* DevExpress 편집기는 제 내용만큼만 넓다. 격자 칸을 다 쓰게 한다 —
   안 그러면 판을 아무리 넓혀도 값 넣는 칸만 좁은 채로 남는다. */
.hd-params__fields .dxbl-text-edit {
  width: 100%;
  min-width: 0;
}

.hd-param__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

/* 설명·형·길이. **값을 막는 데 쓰지 않는다** — 화면이 형을 따지지 않는
   까닭은 화면 머리말에 있다. */
.hd-param__hint {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-muted);
}

/* ── 요청 처리의 「기간」 칸 (`.hd-period` · 2026-10-06) ───────

   기준(접수·완료) 라디오와 날짜 둘을 **한 덩어리로 세운다.** 조회 판의
   칸 셋(「기간 기준」·「기간」·「~」)이던 것을 하나로 묶은 자리다 — 까닭은
   화면(`RequestManage.razor`)의 그 칸 머리말에 적어 두었다.

   테두리 한 줄이 하는 일이 전부다. 이 셋은 **서로를 바꾼다** — 기준을
   옮기면 같은 날짜가 다른 칸을 재고, 날짜를 비우면 기준이 하는 일이
   없어진다. 흩어 놓으면 그 관계가 화면에 하나도 안 적힌다.

   바탕은 판보다 한 톤 짙다(`--jsini-surface`). 조회 판 자신이 흰 카드라
   (app.css 「흰 카드다」) 테두리만으로는 다른 칸들 사이에서 눈에 안 띈다.
   ---------------------------------------------------------- */

.hd-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--jsini-border);
  border-radius: var(--jsini-radius-sm);
  background: var(--jsini-surface);
  min-width: 0;
}

/* 라디오 묶음은 **제 폭만** 쓴다. 자라게 두면 날짜 쪽에서 가져간 폭이
   항목 둘 사이의 빈 자리로 가서, 「접수」와 「완료」가 멀리 떨어져 한
   묶음으로 안 보인다.

   항목 사이 간격은 DevExpress 가 항목마다 주는 여백이 맡는다
   (`.dxbl-radio-group` 은 `flex-flow: row wrap` 이고 `gap` 이 없다) —
   그 안쪽 이름을 겨누지 않는다. 테마를 올릴 때 조용히 어긋나는 자리다. */
.hd-period__basis {
  flex: 0 0 auto;
}

/* 날짜 둘과 「~」. **한 겹 더 묶는 까닭**은 좁아질 때다 — 이 묶음이
   없으면 라디오·시작·물결표·끝 넷이 제각기 흘러 담겨 「~」만 줄 끝에
   남는 모습이 나온다. */
.hd-period__range {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* 195px 이다. 재어 본 값 — 지우개(✕) 48 · 달력 29 · 글상자 좌우 여백 24 를
   빼고 나면 글자가 앉을 자리가 남아야 하는데 「2026-09-28」이 73px 이다.
   170 으로 두면 67px 만 남아 「2026-09…」로 잘린다.

   **인라인(`Style=`)이 아니라 여기 적는다.** 인라인은 좁은 화면 규칙보다
   세서, 거기 두면 휴대폰에서 폭을 되돌릴 때마다 `!important` 가 붙는다. */
.hd-period__date {
  flex: 0 0 auto;
  width: 195px;
}

.hd-period__tilde {
  flex: 0 0 auto;
  color: var(--jsini-text-muted);
}

/* ── 넓은 화면 — 이 칸은 **줄 전체를 쓴다** ────────────────────

   조건이 여섯을 넘는 판은 격자로 선다(app.css 「조건이 많은 판은 격자로
   선다」). 기둥 하나가 17rem(272px)인데 이 칸은 라디오 + 날짜 195 + 물결표 +
   날짜 195 라 그 안에 못 들어간다 — 기둥에 욱여넣으면 날짜가 「2026-09…」로
   잘린다.

   그래서 줄을 통째로 쓴다(`1 / -1`). 기둥 수가 몇이든 따라가므로
   창을 좁혀 기둥이 하나가 되어도 그대로 맞는다.

   **선택자를 app.css 의 그 규칙과 똑같이 베껴 쓰고 끝에 한 칸을 더 얹는다**
   (`:last-child` → `.hd-period:last-child`). 거기 `max-width: 14rem` 이
   걸려 있어서 자릿수가 모자라면 묶음이 224px 에서 잘리고 **날짜 하나와
   물결표가 테두리 밖으로 밀려난다** — 실제로 한 번 그렇게 그려졌다.
   베껴 쓴 덕에 저쪽이 조건(`:nth-child(6)`)을 바꾸면 이쪽도 같이 꺼진다.
   ---------------------------------------------------------- */
@media (min-width: 768px) {
  .commsch:not(.commsch--stacked) .commsch__fields:has(> .commsch__item:nth-child(6)) > .commsch__item:has(> .hd-period) {
    grid-column: 1 / -1;
  }

  /* 기둥에 맞춰 14rem 에서 멈추게 한 그 규칙이 이 묶음에도 걸린다.
     묶음은 **제 내용만큼** 넓어야 한다 — 줄을 통째로 쓰게 두면 오른쪽에
     빈 테두리가 길게 남아 띠가 아니라 빈 상자로 보인다. */
  .commsch:not(.commsch--stacked) .commsch__fields:has(> .commsch__item:nth-child(6)) .commsch__item > .hd-period:last-child {
    flex: 0 1 auto;
    max-width: none;
  }
}

/* ── 휴대폰 (≤767px) ─────────────────────────────────────────

   조회 판의 칸은 좁은 화면에서 한 줄에 하나씩 쌓이고, 입력칸 폭이
   `min(100%, 18rem)` 로 잘린다(app.css). 18rem(288px)에는 날짜 둘이
   못 들어간다 — 하나가 195px 다.

   그래서 이 묶음만 폭 제한을 풀고(100%), 안에서 **날짜를 세로로 세운다.**
   물결표는 둘 사이에 가운데로 남긴다 — 빼 버리면 위아래 날짜가 각각
   무엇인지 알 길이 없고(라벨이 「기간」 하나뿐이다), 옆으로 돌리면
   손가락 폭이 안 나온다.

   `!important` 는 app.css 가 거기에 달아 둔 것을 되돌리는 값이다.
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .commsch__item:has(> .hd-period) > .hd-period {
    width: 100% !important;
    max-width: none;
  }

  .hd-period__range {
    flex-direction: column;
    align-items: stretch;
    flex-basis: 100%;
    gap: 0.25rem;
  }

  .hd-period__date {
    width: 100%;
  }

  /* 날짜 사이에 가운데로 선다. 손가락이 닿을 자리가 아니라 **읽는
     표시**라 높이를 줄여 둔다 — 한 줄을 다 쓰면 칸 둘이 멀어져
     묶어 놓은 모습이 다시 풀린다. */
  .hd-period__tilde {
    align-self: center;
    line-height: 1;
    font-size: var(--jsini-fs-xs);
  }
}

@keyframes hd-cmt-blink {
  0% { background-color: transparent; }
  50% { background-color: color-mix(in srgb, var(--jsini-accent) 20%, transparent); }
  100% { background-color: transparent; }
}
.hd-cmt--highlight {
  animation: hd-cmt-blink 1s ease-in-out 3;
}