/* 장례식장 모듈 공용 스타일. 여러 화면이 함께 쓰므로 .razor.css 로 묶지 않는다. */

.fn-subhead {
  margin: 1.5rem 0 0.75rem;
  font-size: var(--jsini-fs-lg);
  font-weight: 700;
}

/* ── 빈소현황 카드판 ────────────────────────────────────── */

.fn-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 1rem;
  align-items: stretch;
}

.fn-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1px solid var(--jsini-border);
  border-radius: 0.55rem;
  padding: 1rem;
  background: var(--jsini-surface-raised, var(--jsini-surface));
  box-shadow: 0 1px 2px rgb(20 35 55 / 7%);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fn-card:hover { border-color: var(--jsini-accent); box-shadow: 0 4px 14px rgb(20 35 55 / 11%); }

/* 색은 빠른 훑기를 돕고, 아이콘·문구가 상태를 함께 전달한다. */
.fn-card--in-use { border-top: 3px solid var(--jsini-accent); }
.fn-card--empty { border-top: 3px solid var(--jsini-border); }
.fn-card--device-alert { border-color: color-mix(in srgb, #d32f2f 45%, var(--jsini-border)); }

.fn-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.5rem;
}

.fn-card__room-wrap { display: grid; gap: 0.2rem; min-width: 0; }
.fn-card__room { font-size: var(--jsini-fs-lg); font-weight: 750; }
.fn-card__occupancy,
.fn-equipment-status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--jsini-fs-xs);
  font-weight: 600;
}
.fn-card__occupancy { color: var(--jsini-text-muted); }
.fn-card__badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
.fn-equipment-status {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.2rem 0.45rem;
  white-space: nowrap;
}
.fn-equipment-status--ok { color: #2e7d32; }
.fn-equipment-status--fault { color: #c62828; }
.fn-equipment-status__count { font-variant-numeric: tabular-nums; opacity: 0.8; }

.fn-card__body { display: flex; flex: 1; flex-direction: column; margin-top: 0.75rem; }

.fn-card__body--empty {
  color: var(--jsini-text-muted);
  font-size: var(--jsini-fs-md);
  gap: 0.55rem;
}

.fn-card__name { font-size: var(--jsini-fs-xl); font-weight: 700; }
.fn-card__person-info { min-width: 0; }

.fn-card__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2rem 0.75rem;
  margin: 0.5rem 0 0;
  font-size: var(--jsini-fs-sm);
}

.fn-card__facts dt { color: var(--jsini-text-muted); }
.fn-card__facts dd { margin: 0; }

.fn-status-summary { margin-bottom: 1rem; }
.fn-status-summary .jsini-stat__label { display: flex; align-items: center; gap: 0.35rem; }
.fn-stat--active { border-top: 3px solid #2e7d32; }
.fn-stat--empty { border-top: 3px solid var(--jsini-border); }
.fn-stat--online { border-top: 3px solid #2e7d32; }
.fn-stat--alert { border-top: 3px solid #c62828; }

.fn-board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1rem 0 0.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--jsini-border);
  border-radius: 0.45rem;
  background: var(--jsini-surface);
}
.fn-board-toolbar__result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; }
.fn-board-toolbar__result strong { font-size: var(--jsini-fs-lg); }
.fn-board-toolbar__hint { color: var(--jsini-text-muted); font-size: var(--jsini-fs-xs); }
.fn-board-toolbar .jsini-refresh-status { margin: 0; }
.fn-board-toolbar .jsini-refresh-status__error { display: inline-flex; align-items: center; gap: 0.25rem; }

.fn-board-empty {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding: 3rem 1rem;
  border: 1px dashed var(--jsini-border);
  border-radius: 0.55rem;
  color: var(--jsini-text-muted);
  text-align: center;
}
.fn-board-empty [class*='jsini-icon-'] { width: 1.75rem; height: 1.75rem; opacity: 0.65; }
.fn-board-empty strong { color: var(--jsini-text); }

/* ── 모바일 현황 ────────────────────────────────────────── */

.fn-mobile {
  display: grid;
  gap: 0.5rem;
}

.fn-mobile__card {
  border: 1px solid var(--jsini-border);
  padding: 0.75rem 0.9rem;
}

.fn-mobile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fn-mobile__room { font-weight: 700; }
.fn-mobile__name { margin-top: 0.4rem; font-size: var(--jsini-fs-xl); }

.fn-mobile__meta {
  margin-top: 0.2rem;
  font-size: var(--jsini-fs-sm);
  color: var(--jsini-text-muted);
}

/* ── 미리보기 ───────────────────────────────────────────── */

.fn-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}

.fn-preview__item {
  margin: 0;
  border: 1px solid var(--jsini-border);
}

.fn-preview__item img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}

/* 오프라인 자리를 그림과 같은 높이로 잡아 둔다. 안 잡으면 장비가 끊길 때마다 격자가 출렁인다. */
.fn-preview__offline {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--jsini-text-muted) 10%, transparent);
  color: var(--jsini-text-muted);
  font-size: var(--jsini-fs-md);
}

.fn-preview__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  font-size: var(--jsini-fs-md);
}

/* ── 환경설정 ───────────────────────────────────────────── */

.fn-settings { margin-bottom: 1.5rem; }

.fn-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--jsini-border);
}

.fn-setting__name { font-weight: 600; }

.fn-setting__desc {
  margin-top: 0.15rem;
  font-size: var(--jsini-fs-sm);
  color: var(--jsini-text-muted);
}

/* ── 도움말 ─────────────────────────────────────────────── */

.fn-faq { margin-bottom: 1.5rem; }

.fn-faq__item { border-bottom: 1px solid var(--jsini-border); }

.fn-faq__q {
  padding: 0.7rem 0;
  cursor: pointer;
  font-weight: 600;
}

.fn-faq__a {
  padding: 0 0 0.9rem;
  font-size: var(--jsini-fs-md);
  line-height: 1.7;
  color: var(--jsini-text-muted);
  white-space: pre-line;
}

.fn-qna { display: grid; gap: 0.5rem; }

/* 깊이는 CSS 변수로 받는다. 깊이마다 클래스를 만들면 몇 단계에서 바닥나므로 여덟 단계에서 들여쓰기를 멈춘다. */
.fn-qna__post {
  margin-left: calc(min(var(--depth), 8) * 1.25rem);
  border: 1px solid var(--jsini-border);
  border-left-width: 3px;
  padding: 0.7rem 0.9rem;
}

.fn-qna__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--jsini-fs-sm);
  color: var(--jsini-text-muted);
}

.fn-qna__title {
  font-size: var(--jsini-fs-lg);
  font-weight: 700;
  color: var(--jsini-text, inherit);
}

.fn-qna__body {
  margin-top: 0.5rem;
  font-size: var(--jsini-fs-md);
  line-height: 1.7;
  white-space: pre-line;
}

/* ── 첨부 파일 목록 ─────────────────────────────────────── */

.fn-files {
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
}

.fn-files__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0;
}

.fn-files__size {
  font-size: var(--jsini-fs-sm);
  color: var(--jsini-text-muted);
}

/* F.A.Q 관리 단추. 답변 아래 오른쪽에 조용히 둔다 — 읽으러 온 사람에게 먼저 보이면 안 된다. */
.fn-faq__tools {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 0 0.2rem 0.4rem;
}

/* Q&A 글의 단추 줄. 본문 아래 오른쪽에 조용히 둔다. */
.fn-qna__tools {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-top: 0.2rem;
}

/* 답글 창 맨 위의 「무엇에 답하는가」. 대상을 안 보이면 깊은 스레드에서 엉뚱한 글에 답글을 단다. */
.fn-qna__quote {
  margin-bottom: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: var(--jsini-surface);
  border-left: 3px solid var(--jsini-border);
  font-size: var(--jsini-fs-sm);
}

.fn-qna__quote-label {
  display: block;
  font-weight: 600;
  opacity: 0.6;
  font-size: var(--jsini-fs-xs);
}

/* ── 자료 미리보기 ── 목록에 그림을 함께 보여 준다. 이름만으로는 어느 영상인지 알 수 없다. */

.fn-thumb {
  display: block;
  width: 64px;
  height: 36px;
  object-fit: cover;
  border-radius: 0.2rem;
  background: var(--jsini-surface);
}

/* 미리보기가 아직 없을 때. 만들다 실패한 것과 방금 올린 것이 같아 보여 재처리 단추를 그 줄에 둔다. */
.fn-thumb--none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--jsini-fs-2xs);
  opacity: 0.5;
  border: 1px dashed var(--jsini-border);
}

/* ── 빈소 카드: 고인 줄 ── 사진이 없는 고인이 흔하므로 없는 것이 기본으로 보이게 빈자리를 남기지 않는다. */

.fn-card__person {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.fn-card__photo {
  flex: 0 0 auto;
  width: 48px;
  height: 60px;
  object-fit: cover;
  border-radius: 0.2rem;
  background: var(--jsini-surface);
}

.fn-card__sub {
  font-size: var(--jsini-fs-xs);
  opacity: 0.65;
}

.fn-card__sub > span { margin-left: 0.2rem; }

/* ── 기기 화면 표시 설정 ── 칸이 마흔 개가 넘어 한 줄에 하나씩 쌓으면 저장 단추가 화면 밖으로 밀리므로 격자로 접어 넣는다. */

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

.fn-devsec {
  margin-top: 0.9rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--jsini-border);
  border-radius: 0.3rem;
  background: var(--jsini-surface, #fff);
}

/* 안 쓰는 묶음은 옅게 둔다. 숨기지 않는 까닭은 유형을 잘못 넣은 장비를 고칠 길이 필요해서다. */
.fn-devsec.is-on {
  border-left: 3px solid #2e7d32;
}

.fn-devsec:not(.is-on) {
  opacity: 0.7;
}

.fn-devsec__head {
  margin: 0 0 0.5rem;
  font-size: var(--jsini-fs-md);
  font-weight: 700;
}

.fn-devsec__body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.5rem 0.9rem;
}

.fn-field {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.fn-field--wide {
  grid-column: 1 / -1;
}

.fn-field__label {
  font-size: var(--jsini-fs-2xs);
  letter-spacing: 0.03em;
  color: var(--jsini-text-muted);
}

.fn-field__input {
  min-width: 0;
}

/* 상·하·좌·우 네 칸. 한 줄에 넷을 넣어야 「여백」 하나로 읽힌다. */
.fn-quad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25rem;
}

/* 카드에서 고치러 가는 길. 배지처럼 보이면 상태로 읽히므로 링크로 둔다. */
.fn-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--jsini-border);
  font-size: var(--jsini-fs-xs);
}
.fn-card__links a { display: inline-flex; align-items: center; gap: 0.25rem; }
.fn-card__links a:focus-visible,
.fn-card button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--jsini-accent) 55%, transparent);
  outline-offset: 2px;
}
.fn-empty-state { display: flex; align-items: center; gap: 0.4rem; color: var(--jsini-text); }
.fn-card__cancel-note { display: flex; align-items: center; gap: 0.3rem; color: #b26a00; font-size: var(--jsini-fs-xs); font-weight: 600; }

@media (max-width: 900px) {
  .fn-board { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0.75rem; }
  .fn-board-toolbar { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 575px) {
  .fn-board { grid-template-columns: 1fr; }
  .fn-card { padding: 0.85rem; }
  .fn-card__head { gap: 0.5rem; }
  .fn-card__badges { max-width: 52%; }
  .fn-equipment-status { white-space: normal; text-align: right; }
  .fn-board-toolbar { padding: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fn-card { transition: none; }
}

/* 영정 사진 미리보기. 세로로 긴 사진이 많아 폭이 아니라 높이를 잡는다. */
.fn-memorial {
  display: block;
  max-height: 16rem;
  max-width: 100%;
  margin: 0 auto 0.75rem;
  border: 1px solid var(--jsini-border);
  border-radius: 0.35rem;
  object-fit: contain;
}

/* 자료실 첨부 목록 안의 「빼기」 단추 자리. */
.fn-upload {
  margin-bottom: 0.75rem;
}

/* ── 플레이어 내려받기 ── OS 별 카드 일곱 장. 카드 영역만 안에서 구른다. 쪽 전체가 구르면 조건줄이 밀려난다. */

.fn-pd {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  overflow-y: auto;
  padding-right: 0.25rem;
}

@media (width >= 768px) {
  .fn-pd { grid-template-columns: repeat(2, 1fr); }
}

@media (width >= 1280px) {
  .fn-pd { grid-template-columns: repeat(3, 1fr); }
}

.fn-pd__card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid var(--jsini-border);
  border-radius: 0.6rem;
  background: var(--jsini-surface);
}

.fn-pd__title { font-size: var(--jsini-fs-lg); font-weight: 600; }

.fn-pd__sub {
  margin-top: 0.15rem;
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-muted);
}

.fn-pd__reqs {
  margin: 0.9rem 0 0;
  padding-left: 1.1rem;
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-muted);
}

.fn-pd__reqs li { padding: 0.1rem 0; }

.fn-pd__steps {
  margin-top: 0.9rem;
  padding: 0.6rem;
  border-radius: 0.4rem;
  background: var(--jsini-theme-hover);
}

.fn-pd__steps-title {
  margin-bottom: 0.3rem;
  font-size: var(--jsini-fs-2xs);
  font-weight: 600;
  color: var(--jsini-text-muted);
}

/* 명령어가 길다. 줄바꿈을 막으면 카드가 가로로 늘어난다. */
.fn-pd__step {
  font-size: var(--jsini-fs-2xs);
  line-height: 1.6;
  word-break: break-all;
}

/* 카드 높이가 제각각이라 단추를 바닥에 붙인다 — 줄이 맞아야 눈이 쉬어 간다. */
.fn-pd__foot { margin-top: auto; padding-top: 1rem; }

.fn-pd__download {
  display: block;
  text-align: center;
  text-decoration: none;
}

.fn-pd__download--off { opacity: 0.55; cursor: default; }

.fn-pd__asset {
  margin-top: 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: var(--jsini-fs-2xs);
  color: var(--jsini-text-muted);
}

.fn-pd__note {
  flex-shrink: 0;
  padding-top: 0.9rem;
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-muted);
}

.fn-pd__tag { display: inline-flex; align-items: center; gap: 0.5rem; }

.fn-pd__link { text-decoration: none; }

/* 자료 재생 창. 창 폭에 맞추고 높이는 내용이 정한다. 세로 영상까지 한 크기로 잡으면 위아래가 검게 남는다. */
.fn-preview__player {
  display: block;
  width: 100%;
  max-height: 60vh;
  margin-bottom: 0.5rem;
  background: #000;
}

/* ── 영정사진 ── 3:4 세로. 빈소 화면과 같은 틀로 보여 주어 가로 사진은 저장 전에 알아챈다. */

.fn-portrait {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.fn-portrait__img,
.fn-portrait__none {
  flex-shrink: 0;
  width: 8rem;
  height: 10.6rem;
  border: 1px solid var(--jsini-border);
  border-radius: 0.35rem;
  object-fit: cover;
}

.fn-portrait__none {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--jsini-surface);
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-muted);
}

.fn-portrait__tools {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.fn-portrait__pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.8rem;
  border: 1px dashed var(--jsini-border);
  border-radius: 0.35rem;
  background: var(--jsini-surface);
  font-size: var(--jsini-fs-sm);
  cursor: pointer;
}

.fn-portrait__pick input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* 서식 편집기(Q&A · F.A.Q). 높이를 주지 않으면 한 줄로 접혀 나온다. */
.fn-editor {
  height: 18rem;
}

/* 미리보기 카드의 곁들이는 줄. 장비명·코드·유형·최근 접속이 한 줄씩 흐른다. */
.fn-preview__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  padding: 0.3rem 0.5rem 0.5rem;
  font-size: var(--jsini-fs-2xs);
  color: var(--jsini-text-muted);
}

/* ── 환경설정: 넓으면 상자들을 단으로 흘린다 (fn-env) ── 격자는 한 줄의 키를 나눠 써서 긴 상자 하나가 나머지를 빈칸으로 만든다. 단은 키를 스스로 맞춘다.
   상자는 break-inside: avoid 로 쪼개지 않는다. 단을 나누는 1300·1900 은 등록된 기기 표가 정한다(좁으면 빼기가 밀린다). container-type 은 쓰지 않는다 — 떠 있는 창의 기준이 바뀐다. */

@media (min-width: 1300px) {
  .fn-env {
    columns: 2;
    column-gap: 1.25rem;

        /* 아주 넓은 화면에서 단 하나가 700px 을 넘으면 설명이 길어져 왼쪽에 붙여 둔다. 가운데로 모으면 사이드바를 접을 때 글이 미끄러진다. */
    max-width: 1800px;
  }

    /* 단으로 흘릴 상자들. 알림 판의 덩어리 셋은 상자가 없어(display: contents) 이름으로 적는다. */
  .fn-env .fn-env__group,
  .fn-env .jsini-npanel__prefs,
  .fn-env .jsini-npanel__browser,
  .fn-env .jsini-npanel__devices {
    break-inside: avoid;
    margin: 0 0 1.25rem;
    padding: 0.1rem 1.1rem 0.9rem;
    border: 1px solid var(--jsini-border);
    border-radius: var(--jsini-radius-lg);
    background: var(--jsini-surface);
  }

    /* 상자 안 첫 제목의 위 여백은 줄인다. 묶음 사이를 가르던 여백이 이제는 테두리 몫이다. */
  .fn-env .fn-env__group > .jsini-subhead:first-child,
  .fn-env .jsini-npanel__prefs > .jsini-subhead:first-child,
  .fn-env .jsini-npanel__browser > .jsini-subhead:first-child,
  .fn-env .jsini-npanel__devices > .jsini-subhead:first-child {
    margin-top: 0.9rem;
  }

    /* 마지막 줄 밑줄은 걷는다. 테두리 바로 위에 선이 한 겹 더 깔려 끊긴 표처럼 보인다. */
  .fn-env .jsini-settings:last-child { margin-bottom: 0; }
  .fn-env .jsini-settings > .jsini-setting:last-child { border-bottom: 0; }

    /* 설정 줄의 컨트롤은 줄을 내려 아래에 둔다. 단이 좁으면 단추가 눌려 글자가 쪼개진다. 스위치만 오른쪽에 둔다(.jsini-setting:has(.dxbl-checkbox)). */
  .fn-env .jsini-setting:not(:has(> .dxbl-checkbox)) {
    display: block;
  }

  .fn-env .jsini-setting:not(:has(> .dxbl-checkbox)) .dxbl-btn,
  .fn-env .jsini-setting:not(:has(> .dxbl-checkbox)) .dxbl-editor {
    margin-top: 0.5rem;
  }

    /* 아래 띠 고르기 줄만 다시 감는다. 휴대폰용 nowrap 을 단 안의 좁은 폭에 그대로 두면 고르개가 눌려 글자가 남지 않는다. */
  .fn-env .fn-bnav__row {
    flex-wrap: wrap;
  }

    /* 홈 화면 고르개는 줄을 내린 뒤 단을 통째로 쓴다. 목록 이름이 길어 잘리면 무엇을 골랐는지 못 읽는다. */
  .fn-env .fn-home { width: 100%; }
}

@media (min-width: 1900px) {
  .fn-env { columns: 3; }
}

/* ── 환경설정: 휴대폰에서는 기기 표가 제 키로 선다 ── 표를 58vh 에 묶으면 쪽 안에 또 구르는 칸이 생긴다. 휴대폰에서는 상한을 풀어 구르는 것은 쪽 하나로 둔다. */

@media (max-width: 767px) {
  .fn-env .commgrd {
    --commgrd-max-height: none;
  }
}

/* ── 환경설정: 홈 화면 고르개 (fn-home) ── 목록 이름이 길어 설명을 밀어내므로 고르개가 먼저 줄게 한다(flex: 0 1). 바닥은 min-width 로 받친다. */

.fn-home {
  flex: 0 1 14rem;
  min-width: 8rem;
}

/* ── 환경설정: 휴대폰 아래 띠 고르기 (fn-bnav) ── 줄은 한 줄로 붙여 둔다. 감싸면 넘칠 때 줄이 먼저 내려가 줄이 하나 더 생긴다. 줄임 몫은 아래에서 나눈다. */

.fn-bnav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* 쓰지 않기로 둔 동안은 잠겼다는 것을 보이게 한다. 잠긴 판이 멀쩡하면 사람은 눌러 보고서야 안다. */
.fn-bnav--off {
  opacity: 0.55;
}

.fn-bnav__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
}

/* 아이콘 집안이 둘이라 크기를 양쪽 다 맞춰 둔다(app.css 의 띠 규칙과 같다). */
.fn-bnav__icon {
  --jsini-icon-size: 18px;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--jsini-text-muted);
}

/* 메뉴 고르개가 남는 폭을 다 먹는다. min-width 를 0 으로 두지 않으면 내용 폭이 버텨서 줄이 안 감긴다. */
.fn-bnav__menu {
  flex: 1 1 11rem;
  min-width: 0;
}

/* 좁아지면 이 칸이 먼저 준다. 이름은 짧아 반으로 줄어도 읽히지만 메뉴 고르개는 무엇을 골랐는지 보여 주는 칸이라 둘 다 줄이면 못 읽는다. min-width 로 바닥을 받친다. */
.fn-bnav__name {
  flex: 0 3 7rem;
  min-width: 3.25rem;
}

.fn-bnav__drop {
  flex: 0 0 auto;
}

/* 순서 바꾸기 단추 둘은 글자 없이 꺾쇠만 쓴다. 그림은 하나뿐이고 위를 보는 것은 뒤집어 쓴다(각도를 따로 두면 갈린다). */
.fn-bnav__move {
  flex: 0 0 auto;
}

.fn-bnav__move--up .jsini-icon-chevron-down {
  transform: rotate(180deg);
}

.fn-bnav__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

/* 「5 / 3~8칸」은 오른쪽 끝으로 민다. 단추 옆에 붙이면 「기본값으로」의 꼬리로 읽힌다. */
.fn-bnav__count {
  margin: 0;
  flex: 0 0 auto;
  margin-left: auto;
}

/* 바로 넣기 줄은 메뉴가 아닌 넷(홈 · 설정 · 메뉴 단추 · 프로필 아바타)의 단추다. 고르개는 메뉴 줄기로만 찾으므로 단추로 내놓는다. 넘치면 감긴다. */
.fn-bnav__quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

/* 바로 넣기 라벨은 위아래 여백을 뗀다. jsini-hint 가 문단 값을 들고 있다. */
.fn-bnav__quick > .jsini-hint {
  margin: 0;
  flex: 0 0 auto;
}