/* ============================================================
   FNA Smart HACCP — 공통 웹 컴포넌트 (components.css)
   tokens.css 를 먼저 불러야 한다. 모든 값은 --fna-* 변수만 쓴다.
   접두사: .fna-  ·  상태: .is-active / [aria-selected] / [data-status]
   큰글씨: 글꼴은 --fna-scale 배수, 패딩은 em 이라 함께 커진다.
   ============================================================ */

/* ── 기본 리셋(최소) ─────────────────────────────────────────── */
.fna-btn,.fna-input,.fna-select,.fna-textarea,.fna-tab{font-family:inherit;font-size:inherit}
.fna-btn,.fna-tab{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:where(.fna-btn,.fna-input,.fna-select,.fna-textarea,.fna-tab,.fna-checkbox input):focus-visible{
  outline:2px solid var(--fna-focus);outline-offset:2px}

/* ── 버튼 ────────────────────────────────────────────────────── */
.fna-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  min-height:var(--fna-size-control-md);padding:.55em 1.15em;
  border:1px solid transparent;border-radius:var(--fna-radius-sm);
  background:var(--fna-primary);color:var(--fna-primary-on);
  font-size:var(--fna-font-size-md);font-weight:var(--fna-font-weight-bold);line-height:1.2;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s,border-color .15s,box-shadow .15s}
.fna-btn:hover{background:var(--fna-primary-dark);text-decoration:none}
.fna-btn:disabled,.fna-btn[aria-disabled="true"]{opacity:.45;cursor:default;pointer-events:none}
.fna-btn--secondary,.fna-btn--ghost{background:var(--fna-surface-container);color:var(--fna-primary-on-container)}
.fna-btn--secondary:hover,.fna-btn--ghost:hover{background:var(--fna-surface-high)}
.fna-btn--outline{background:var(--fna-surface);color:var(--fna-text-secondary);border-color:var(--fna-border-strong)}
.fna-btn--outline:hover{background:var(--fna-surface-low);border-color:var(--fna-border-outline)}
.fna-btn--text{background:transparent;color:var(--fna-primary);padding-inline:.6em}
.fna-btn--text:hover{background:var(--fna-surface-container)}
.fna-btn--danger{background:var(--fna-error-container);color:var(--fna-error-on-container)}
.fna-btn--danger:hover{background:var(--fna-danger-container)}
.fna-btn--danger-solid{background:var(--fna-danger);color:var(--fna-text-inverse)}
.fna-btn--danger-solid:hover{background:var(--fna-danger-text)}
.fna-btn--success{background:var(--fna-success-text);color:var(--fna-text-inverse)}
.fna-btn--success:hover{background:var(--fna-success-on-container)}
.fna-btn--review{background:var(--fna-review);color:var(--fna-text-inverse)}
.fna-btn--review:hover{background:var(--fna-review-text)}
.fna-btn--sm{min-height:var(--fna-size-control-sm);padding:.35em .8em;font-size:var(--fna-font-size-sm);border-radius:var(--fna-radius-xs)}
.fna-btn--lg{min-height:var(--fna-size-control-lg);padding:.7em 1.4em;font-size:var(--fna-font-size-xl);font-weight:var(--fna-font-weight-extrabold);border-radius:var(--fna-radius-md)}
.fna-btn--block{display:flex;width:100%}
.fna-btn--icon{padding:.55em;aspect-ratio:1}
.fna-btn-group{display:inline-flex;gap:var(--fna-space-sm);flex-wrap:wrap;align-items:center}

/* ── 카드 ────────────────────────────────────────────────────── */
.fna-card{
  background:var(--fna-surface);border:1px solid var(--fna-border);border-radius:var(--fna-radius-lg);
  box-shadow:var(--fna-shadow-card);overflow:hidden;margin-bottom:var(--fna-space-lg)}
.fna-card--flat{box-shadow:none}
.fna-card--raised{box-shadow:var(--fna-shadow-raised)}
.fna-card__head{
  display:flex;align-items:center;gap:var(--fna-space-sm);flex-wrap:wrap;
  padding:var(--fna-space-md) var(--fna-space-lg);border-bottom:1px solid var(--fna-border)}
.fna-card__title{margin:0;font-size:var(--fna-font-size-lg);font-weight:var(--fna-font-weight-extrabold);color:var(--fna-text)}
.fna-card__sub{color:var(--fna-text-muted);font-size:var(--fna-font-size-sm);font-weight:var(--fna-font-weight-regular)}
.fna-card__body{padding:var(--fna-space-lg)}
.fna-card__foot{display:flex;justify-content:flex-end;gap:var(--fna-space-sm);padding:var(--fna-space-md) var(--fna-space-lg);border-top:1px solid var(--fna-border);background:var(--fna-surface-low)}
.fna-card__scroll{overflow-x:auto}
/* 요약 숫자 카드 */
.fna-stat{background:var(--fna-surface);border:1px solid var(--fna-border);border-radius:var(--fna-radius-lg);padding:var(--fna-space-lg) var(--fna-space-xl);box-shadow:var(--fna-shadow-card)}
.fna-stat__n{font-size:var(--fna-font-size-4xl);font-weight:var(--fna-font-weight-black);line-height:var(--fna-line-height-tight);letter-spacing:-.02em}
.fna-stat__t{font-size:var(--fna-font-size-sm);color:var(--fna-text-muted);font-weight:var(--fna-font-weight-bold);margin-top:2px}
.fna-stat--ok .fna-stat__n{color:var(--fna-success-text)}
.fna-stat--caution .fna-stat__n{color:var(--fna-warning-text)}
.fna-stat--alarm .fna-stat__n{color:var(--fna-danger-text)}
.fna-stat--nonconform .fna-stat__n{color:var(--fna-error-text)}
.fna-stat--info .fna-stat__n{color:var(--fna-primary)}

/* ── 입력 ────────────────────────────────────────────────────── */
.fna-input,.fna-select,.fna-textarea{
  display:block;width:100%;min-height:var(--fna-size-control-md);
  padding:.5em .85em;border:1px solid var(--fna-border);border-radius:var(--fna-radius-sm);
  background:var(--fna-surface);color:var(--fna-text);font-size:var(--fna-font-size-base);line-height:1.4;
  transition:border-color .15s,box-shadow .15s}
.fna-input::placeholder,.fna-textarea::placeholder{color:var(--fna-text-placeholder)}
.fna-input:hover,.fna-select:hover,.fna-textarea:hover{border-color:var(--fna-border-strong)}
.fna-input:focus,.fna-select:focus,.fna-textarea:focus{outline:2px solid var(--fna-focus);outline-offset:-1px;border-color:var(--fna-focus)}
.fna-input:disabled,.fna-select:disabled,.fna-textarea:disabled{background:var(--fna-surface-container);color:var(--fna-text-muted);cursor:not-allowed}
.fna-input[aria-invalid="true"],.fna-textarea[aria-invalid="true"],.fna-select[aria-invalid="true"]{border-color:var(--fna-error);outline-color:var(--fna-error)}
.fna-textarea{resize:vertical;min-height:calc(var(--fna-size-control-md) * 2)}
.fna-select{appearance:none;-webkit-appearance:none;padding-right:2.2em;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1.05em) 50%,calc(100% - .7em) 50%;background-size:.35em .35em;background-repeat:no-repeat}
.fna-input--sm,.fna-select--sm{min-height:var(--fna-size-control-sm);padding:.3em .6em;font-size:var(--fna-font-size-sm)}
.fna-input--lg,.fna-select--lg{min-height:var(--fna-size-control-lg);font-size:var(--fna-font-size-lg)}
.fna-field{display:flex;flex-direction:column;gap:var(--fna-space-xs);margin:0}
.fna-field__label{font-size:var(--fna-font-size-sm);font-weight:var(--fna-font-weight-bold);color:var(--fna-text-muted)}
.fna-field__label .req{color:var(--fna-error-text);margin-left:2px}
.fna-field__hint{font-size:var(--fna-font-size-sm);color:var(--fna-text-muted)}
.fna-field__error{font-size:var(--fna-font-size-sm);color:var(--fna-error-text);font-weight:var(--fna-font-weight-bold)}
.fna-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--fna-space-md);align-items:end}
.fna-checkbox{display:inline-flex;align-items:center;gap:var(--fna-space-sm);cursor:pointer;font-size:var(--fna-font-size-base)}
.fna-checkbox input{width:1.15em;height:1.15em;margin:0;accent-color:var(--fna-primary)}
.fna-seg{display:inline-flex;background:var(--fna-surface-container);border-radius:var(--fna-radius-sm);padding:3px;gap:2px}
.fna-seg>button,.fna-seg>label>span{display:block;padding:.4em 1em;border:0;border-radius:calc(var(--fna-radius-sm) - 2px);background:transparent;
  color:var(--fna-text-muted);font-size:var(--fna-font-size-md);font-weight:var(--fna-font-weight-bold);cursor:pointer}
.fna-seg>button.is-active,.fna-seg>label>input:checked+span{background:var(--fna-surface);color:var(--fna-primary);box-shadow:var(--fna-shadow-card)}
.fna-seg>label{position:relative;margin:0}.fna-seg>label>input{position:absolute;opacity:0;width:1px;height:1px}

/* ── 배지 · 상태 점 ──────────────────────────────────────────── */
.fna-badge{
  display:inline-flex;align-items:center;gap:.35em;padding:.2em .75em;border-radius:var(--fna-radius-pill);
  font-size:var(--fna-font-size-xs);font-weight:var(--fna-font-weight-bold);line-height:1.5;white-space:nowrap;
  background:var(--fna-neutral-container);color:var(--fna-neutral-on-container);border:1px solid transparent}
.fna-badge--ok,.fna-badge--success{background:var(--fna-success-container);color:var(--fna-success-on-container)}
.fna-badge--caution,.fna-badge--warning{background:var(--fna-warning-container);color:var(--fna-warning-on-container);border-left:4px solid var(--fna-warning);border-radius:var(--fna-radius-xs) var(--fna-radius-pill) var(--fna-radius-pill) var(--fna-radius-xs)}
.fna-badge--alarm,.fna-badge--danger{background:var(--fna-danger-container);color:var(--fna-danger-on-container)}
.fna-badge--nonconform,.fna-badge--error{background:var(--fna-error-container);color:var(--fna-error-on-container)}
.fna-badge--review{background:var(--fna-review-container);color:var(--fna-review-on-container)}
.fna-badge--info{background:var(--fna-info-container);color:var(--fna-info-on-container)}
.fna-badge--off,.fna-badge--neutral{background:var(--fna-neutral-container);color:var(--fna-neutral-on-container)}
.fna-badge--outline{background:transparent;border-color:currentColor}
.fna-badge--lg{font-size:var(--fna-font-size-sm);padding:.3em .9em}
.fna-badge .fna-dot{margin:0}
/* 상태 점 */
.fna-dot{display:inline-block;width:.6em;height:.6em;min-width:7px;min-height:7px;border-radius:50%;
  background:var(--fna-neutral);margin-right:.4em;vertical-align:middle;flex:none}
.fna-dot--ok{background:var(--fna-success)}
.fna-dot--caution{background:var(--fna-warning)}
.fna-dot--alarm{background:var(--fna-danger)}
.fna-dot--nonconform{background:var(--fna-error)}
.fna-dot--info{background:var(--fna-primary)}
.fna-dot--review{background:var(--fna-review)}
.fna-dot--off{background:var(--fna-neutral)}
.fna-dot--pulse{animation:fna-pulse 1.4s infinite}
@keyframes fna-pulse{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.fna-dot--pulse{animation:none}}

/* ── 결재 상태 배지 (6단계) ─────────────────────────────────── */
.fna-approval{display:inline-flex;align-items:center;gap:.35em;padding:.2em .75em;border-radius:var(--fna-radius-pill);
  font-size:var(--fna-font-size-xs);font-weight:var(--fna-font-weight-bold);line-height:1.5;white-space:nowrap;border:1px solid transparent}
.fna-approval::before{content:'';width:.55em;height:.55em;border-radius:50%;background:currentColor;opacity:.85}
.fna-approval[data-status="none"]{background:transparent;color:var(--fna-text-muted);border-color:var(--fna-border-strong)}
.fna-approval[data-status="none"]::before{background:transparent;border:1.5px solid currentColor;box-sizing:border-box}
.fna-approval[data-status="draft"]{background:var(--fna-neutral-container);color:var(--fna-neutral-on-container)}
.fna-approval[data-status="review_requested"]{background:var(--fna-warning-container);color:var(--fna-warning-on-container)}
.fna-approval[data-status="reviewed"]{background:var(--fna-review-container);color:var(--fna-review-on-container)}
.fna-approval[data-status="approved"]{background:var(--fna-success-container);color:var(--fna-success-on-container)}
.fna-approval[data-status="rejected"]{background:var(--fna-error-container);color:var(--fna-error-on-container)}
/* 결재 진행 단계 표시 */
.fna-flow{display:flex;align-items:center;margin:var(--fna-space-xs) 0 var(--fna-space-md)}
.fna-flow__step{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:var(--fna-font-size-sm);font-weight:var(--fna-font-weight-bold);color:var(--fna-text-muted)}
.fna-flow__dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--fna-border-strong);background:var(--fna-surface);display:grid;place-items:center;color:var(--fna-text-inverse);font-size:var(--fna-font-size-sm)}
.fna-flow__step.is-done{color:var(--fna-success-text)}
.fna-flow__step.is-done .fna-flow__dot{background:var(--fna-success-text);border-color:var(--fna-success-text)}
.fna-flow__step.is-current .fna-flow__dot{border-color:var(--fna-primary);box-shadow:0 0 0 3px var(--fna-primary-container)}
.fna-flow__step.is-rejected{color:var(--fna-error-text)}
.fna-flow__step.is-rejected .fna-flow__dot{background:var(--fna-error);border-color:var(--fna-error)}
.fna-flow__line{width:48px;height:2px;background:var(--fna-border-strong);margin:0 6px 18px}
.fna-flow__line.is-done{background:var(--fna-success-text)}

/* ── 탭 ──────────────────────────────────────────────────────── */
.fna-tabs{display:flex;gap:4px;border-bottom:1px solid var(--fna-border);margin-bottom:var(--fna-space-lg);overflow-x:auto;scrollbar-width:none}
.fna-tab{display:inline-flex;align-items:center;gap:.4em;padding:.7em 1em;margin-bottom:-1px;
  border:0;border-bottom:2px solid transparent;border-radius:var(--fna-radius-sm) var(--fna-radius-sm) 0 0;
  background:none;color:var(--fna-text-muted);font-size:var(--fna-font-size-md);font-weight:var(--fna-font-weight-bold);
  cursor:pointer;white-space:nowrap;text-decoration:none}
.fna-tab:hover{background:var(--fna-surface-container);color:var(--fna-primary);text-decoration:none}
.fna-tab.is-active,.fna-tab[aria-selected="true"]{color:var(--fna-primary);border-bottom-color:var(--fna-primary);background:none}
.fna-tab__count{font-size:var(--fna-font-size-xs);padding:0 .5em;border-radius:var(--fna-radius-pill);background:var(--fna-surface-container);color:var(--fna-text-muted)}
/* 알약형 탭(필터) */
.fna-tabs--pill{border:0;gap:var(--fna-space-sm);flex-wrap:wrap}
.fna-tabs--pill .fna-tab{border:0;border-radius:var(--fna-radius-pill);background:var(--fna-surface-container);padding:.4em 1em}
.fna-tabs--pill .fna-tab.is-active,.fna-tabs--pill .fna-tab[aria-selected="true"]{background:var(--fna-primary);color:var(--fna-primary-on)}
/* 하단 탭(모바일) */
.fna-bottom-nav{display:flex;justify-content:space-around;position:fixed;left:0;right:0;bottom:0;z-index:var(--fna-z-topbar);
  padding:6px 4px max(6px,env(safe-area-inset-bottom));background:var(--fna-surface);border-top:1px solid var(--fna-border)}
.fna-bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 10px;font-size:var(--fna-font-size-xs);color:var(--fna-text-muted);text-decoration:none;min-width:56px}
.fna-bottom-nav a.is-active{color:var(--fna-primary);font-weight:var(--fna-font-weight-extrabold)}

/* ── 표 ──────────────────────────────────────────────────────── */
.fna-table-wrap{overflow-x:auto}
.fna-table{width:100%;border-collapse:collapse;background:var(--fna-surface);font-size:var(--fna-font-size-md);text-align:left}
.fna-table th{font-size:var(--fna-font-size-sm);color:var(--fna-text-muted);font-weight:var(--fna-font-weight-bold);
  padding:.75em .9em;background:var(--fna-surface-low);border-bottom:2px solid var(--fna-border);white-space:nowrap}
.fna-table td{padding:.75em .9em;border-bottom:1px solid var(--fna-border);vertical-align:middle}
.fna-table tr:last-child td{border-bottom:0}
.fna-table tbody tr:hover td{background:var(--fna-surface-low)}
.fna-table tr.is-off td{color:var(--fna-text-muted);background:var(--fna-surface-low)}
.fna-table tr.is-bad td{background:var(--fna-error-container)}
.fna-table tr.is-caution td{background:var(--fna-warning-container)}
.fna-table tr.is-selected td{background:var(--fna-primary-container)}
.fna-table td.num,.fna-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.fna-table--compact th,.fna-table--compact td{padding:.45em .6em}
.fna-table--nowrap{white-space:nowrap}
.fna-table__empty{padding:var(--fna-space-xxxl) var(--fna-space-lg);text-align:center;color:var(--fna-text-muted)}

/* ── 모달 ────────────────────────────────────────────────────── */
.fna-modal{position:fixed;inset:0;z-index:var(--fna-z-modal);display:flex;align-items:center;justify-content:center;
  padding:var(--fna-space-lg);background:var(--fna-overlay);backdrop-filter:blur(2px)}
.fna-modal[hidden]{display:none}
.fna-modal__card{width:520px;max-width:100%;max-height:min(88vh,88dvh);overflow:auto;background:var(--fna-surface);color:var(--fna-text);
  border-radius:var(--fna-radius-lg);box-shadow:var(--fna-shadow-modal);display:flex;flex-direction:column}
.fna-modal__card--sm{width:380px}.fna-modal__card--lg{width:720px}
.fna-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--fna-space-md);padding:var(--fna-space-lg) var(--fna-space-xl) var(--fna-space-md)}
.fna-modal__title{margin:0;font-size:var(--fna-font-size-xl);font-weight:var(--fna-font-weight-extrabold)}
.fna-modal__body{padding:0 var(--fna-space-xl) var(--fna-space-lg);display:flex;flex-direction:column;gap:var(--fna-space-md);font-size:var(--fna-font-size-md)}
.fna-modal__foot{display:flex;justify-content:flex-end;gap:var(--fna-space-sm);padding:var(--fna-space-md) var(--fna-space-xl) var(--fna-space-lg);border-top:1px solid var(--fna-border)}
/* <dialog> 를 쓰는 경우 */
dialog.fna-dialog{border:1px solid var(--fna-border);border-radius:var(--fna-radius-lg);padding:var(--fna-space-xxl);width:420px;max-width:92vw;
  color:var(--fna-text);background:var(--fna-surface);box-shadow:var(--fna-shadow-modal)}
dialog.fna-dialog::backdrop{background:var(--fna-overlay)}

/* ── 큰글씨(시니어) 모달 — 전체화면 시트 ─────────────────────────
   은행 앱의 "쉬운 모드" 확인창처럼: 가운데 작은 창 대신 화면 전체(또는 하단 풀높이 시트).
   제목 24+, 본문 20+, 한 화면 한 질문, 하단 전체폭 주 버튼 64dp, 보조는 상단 "닫기" 또는 텍스트 링크,
   선택지는 라디오 대신 큰 카드 버튼, 입력은 한 필드씩, 자동 닫힘·흔들림 없음.
   사용: .fna-modal.fna-modal--large  또는  <html data-scale="large"> 아래의 모든 .fna-modal */
.fna-modal--large,:root[data-scale="large"] .fna-modal{padding:0;align-items:stretch;justify-content:stretch;backdrop-filter:none;background:var(--fna-surface)}
.fna-modal--large .fna-modal__card,:root[data-scale="large"] .fna-modal .fna-modal__card{width:100%;max-width:none;max-height:none;height:100%;border-radius:0;box-shadow:none;background:var(--fna-surface)}
.fna-modal--large .fna-modal__head,:root[data-scale="large"] .fna-modal .fna-modal__head{min-height:var(--fna-size-appbar-large-height);padding:var(--fna-space-md) var(--fna-size-modal-large-pad);border-bottom:1px solid var(--fna-border);align-items:center}
.fna-modal--large .fna-modal__title,:root[data-scale="large"] .fna-modal .fna-modal__title{font-size:calc(var(--fna-size-modal-large-title) * var(--fna-scale) / 1.25);line-height:1.3}
.fna-modal--large .fna-modal__close,:root[data-scale="large"] .fna-modal .fna-modal__close{font-size:var(--fna-font-size-lg);font-weight:var(--fna-font-weight-bold);color:var(--fna-primary);min-height:var(--fna-size-touch-min);padding:0 var(--fna-space-sm);background:none;border:0;cursor:pointer}
.fna-modal--large .fna-modal__body,:root[data-scale="large"] .fna-modal .fna-modal__body{flex:1;overflow:auto;padding:var(--fna-space-xl) var(--fna-size-modal-large-pad);gap:var(--fna-space-lg);font-size:calc(var(--fna-size-modal-large-body) * var(--fna-scale) / 1.25);line-height:1.5;color:var(--fna-text)}
.fna-modal--large .fna-modal__body p,:root[data-scale="large"] .fna-modal .fna-modal__body p{margin:0}
.fna-modal--large .fna-modal__foot,:root[data-scale="large"] .fna-modal .fna-modal__foot{flex-direction:column;gap:var(--fna-space-md);padding:var(--fna-space-lg) var(--fna-size-modal-large-pad) calc(var(--fna-space-lg) + env(safe-area-inset-bottom,0px));border-top:1px solid var(--fna-border);background:var(--fna-surface)}
.fna-modal--large .fna-modal__foot .fna-btn,:root[data-scale="large"] .fna-modal .fna-modal__foot .fna-btn{width:100%;min-height:var(--fna-size-modal-large-button);font-size:calc(var(--fna-size-modal-large-title) * var(--fna-scale) / 1.25);font-weight:var(--fna-font-weight-black);border-radius:var(--fna-radius-lg)}
.fna-modal--large .fna-modal__foot .fna-btn--text,:root[data-scale="large"] .fna-modal .fna-modal__foot .fna-btn--text{min-height:var(--fna-size-touch-senior);color:var(--fna-text-secondary);text-decoration:underline;text-underline-offset:4px;font-size:var(--fna-font-size-lg);font-weight:var(--fna-font-weight-bold)}
/* 취소/확인 대비: 위험 확인은 진한 빨강 + 흰 글자, 취소는 텍스트 링크 */
.fna-modal--large .fna-btn--danger-solid,:root[data-scale="large"] .fna-modal .fna-btn--danger-solid{background:var(--fna-danger-text);color:var(--fna-text-inverse)}
/* 선택지: 라디오 대신 큰 카드 버튼 */
.fna-choice{display:flex;flex-direction:column;gap:var(--fna-space-md)}
.fna-choice__item{display:flex;align-items:center;gap:var(--fna-space-md);min-height:var(--fna-size-modal-large-choice);padding:var(--fna-space-md) var(--fna-space-lg);border:2px solid var(--fna-border-strong);border-radius:var(--fna-radius-lg);background:var(--fna-surface);color:var(--fna-text);font-size:calc(var(--fna-size-modal-large-body) * var(--fna-scale) / 1.25);font-weight:var(--fna-font-weight-bold);text-align:left;cursor:pointer;width:100%}
.fna-choice__item:hover{border-color:var(--fna-primary)}
.fna-choice__item.is-selected,.fna-choice__item[aria-checked="true"]{border-color:var(--fna-primary);background:var(--fna-primary-container);color:var(--fna-primary-on-container);box-shadow:inset 0 0 0 1px var(--fna-primary)}
.fna-choice__item .mark{width:28px;height:28px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;flex:none;font-size:16px}
.fna-choice__item.is-selected .mark{background:var(--fna-primary);color:var(--fna-primary-on);border-color:var(--fna-primary)}
.fna-choice__item small{display:block;font-weight:var(--fna-font-weight-regular);font-size:.8em;color:var(--fna-text-muted)}
.fna-choice__item.is-selected small,.fna-choice__item[aria-checked="true"] small{color:var(--fna-primary-on-container)}
/* 단계별 한 필드 입력 */
.fna-step-field{display:flex;flex-direction:column;gap:var(--fna-space-sm)}
.fna-step-field .fna-field__label{font-size:calc(var(--fna-size-modal-large-body) * var(--fna-scale) / 1.25);color:var(--fna-text)}
.fna-step-field .fna-input{min-height:var(--fna-size-modal-large-button);font-size:calc(var(--fna-size-modal-large-title) * var(--fna-scale) / 1.25);border-width:2px}
.fna-step-field .fna-step-field__count{font-size:var(--fna-font-size-md);color:var(--fna-text-muted)}
@media (prefers-reduced-motion:no-preference){.fna-modal--large .fna-modal__card{animation:fna-sheet-up .22s ease-out}}
@keyframes fna-sheet-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}

/* ── 앱 헤더 · 우측 햄버거 드로어 ────────────────────────────────
   규격: 좌 = 뒤로가기 또는 로고만 · 중 = 제목 · 우 = 햄버거(전체 메뉴) 또는 주요 액션 1개.
   햄버거는 항상 우측 상단. 드로어는 우측에서 나온다. */
.fna-appbar{display:grid;grid-template-columns:var(--fna-size-appbar-touch) 1fr var(--fna-size-appbar-touch);align-items:center;min-height:var(--fna-size-appbar-height);padding:0 var(--fna-space-sm);background:var(--fna-primary);color:var(--fna-primary-on);gap:var(--fna-space-xs)}
.fna-appbar--surface{background:var(--fna-surface);color:var(--fna-text);border-bottom:1px solid var(--fna-border)}
.fna-appbar__left,.fna-appbar__right{display:flex;align-items:center;justify-content:center;min-height:var(--fna-size-appbar-touch);min-width:var(--fna-size-appbar-touch)}
.fna-appbar__right{justify-self:end}
.fna-appbar__title{text-align:center;font-size:var(--fna-font-size-xl);font-weight:var(--fna-font-weight-extrabold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fna-appbar__sub{display:block;font-size:var(--fna-font-size-xs);font-weight:var(--fna-font-weight-regular);opacity:.85}
.fna-appbar button,.fna-appbar a{background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:var(--fna-size-appbar-touch);min-height:var(--fna-size-appbar-touch);border-radius:var(--fna-radius-sm);padding:0}
.fna-appbar button:hover{background:var(--fna-primary-dark)}
.fna-appbar--surface button:hover{background:var(--fna-surface-container)}
.fna-appbar svg{width:var(--fna-size-appbar-icon);height:var(--fna-size-appbar-icon);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:root[data-scale="large"] .fna-appbar{min-height:var(--fna-size-appbar-large-height)}
/* 드로어: 우측에서 */
.fna-drawer{position:fixed;inset:0;z-index:var(--fna-z-modal);display:flex;justify-content:flex-end;background:var(--fna-overlay)}
.fna-drawer[hidden]{display:none}
.fna-drawer__panel{width:min(var(--fna-size-drawer-width),86vw);height:100%;background:var(--fna-surface);color:var(--fna-text);display:flex;flex-direction:column;box-shadow:var(--fna-shadow-modal);padding-top:env(safe-area-inset-top,0px)}
.fna-drawer__head{padding:var(--fna-space-lg);border-bottom:1px solid var(--fna-border);display:flex;flex-direction:column;gap:var(--fna-space-xs)}
.fna-drawer__tenant{font-size:var(--fna-font-size-xl);font-weight:var(--fna-font-weight-extrabold)}
.fna-drawer__facility{display:flex;align-items:center;justify-content:space-between;gap:var(--fna-space-sm);font-size:var(--fna-font-size-md);color:var(--fna-text-muted)}
.fna-drawer__list{flex:1;overflow:auto;padding:var(--fna-space-sm) 0}
.fna-drawer__item{display:flex;align-items:center;gap:var(--fna-space-md);padding:var(--fna-space-md) var(--fna-space-lg);min-height:var(--fna-size-touch-min);font-size:var(--fna-font-size-lg);font-weight:var(--fna-font-weight-bold);color:var(--fna-text);text-decoration:none;background:none;border:0;width:100%;text-align:left;cursor:pointer}
.fna-drawer__item:hover{background:var(--fna-surface-container)}
.fna-drawer__item.is-active{color:var(--fna-primary);background:var(--fna-primary-container)}
.fna-drawer__item svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fna-drawer__item .fna-badge{margin-left:auto}
.fna-drawer__section{padding:var(--fna-space-md) var(--fna-space-lg) var(--fna-space-xs);font-size:var(--fna-font-size-xs);font-weight:var(--fna-font-weight-bold);letter-spacing:.08em;color:var(--fna-text-muted);text-transform:uppercase}
.fna-drawer__foot{padding:var(--fna-space-md) var(--fna-space-lg) calc(var(--fna-space-lg) + env(safe-area-inset-bottom,0px));border-top:1px solid var(--fna-border);display:flex;flex-direction:column;gap:var(--fna-space-sm)}
.fna-drawer__item--danger{color:var(--fna-error-text)}
.fna-switch{display:inline-flex;align-items:center;gap:var(--fna-space-sm);margin-left:auto;font-size:var(--fna-font-size-sm);color:var(--fna-text-muted)}
.fna-switch i{width:40px;height:22px;border-radius:var(--fna-radius-pill);background:var(--fna-border-strong);position:relative;display:inline-block}
.fna-switch i::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--fna-surface);transition:left .15s}
.fna-switch.is-on i{background:var(--fna-primary)}.fna-switch.is-on i::after{left:21px}
:root[data-scale="large"] .fna-drawer__item{min-height:var(--fna-size-touch-senior);font-size:var(--fna-font-size-xl)}

/* ── 토스트 ──────────────────────────────────────────────────── */
.fna-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:var(--fna-z-toast);max-width:min(90vw,520px);
  padding:.85em 1.6em;border-radius:var(--fna-radius-md);background:var(--fna-toast-bg);color:var(--fna-toast-text);
  font-size:var(--fna-font-size-md);font-weight:var(--fna-font-weight-bold);box-shadow:var(--fna-shadow-toast);
  opacity:0;pointer-events:none;transition:opacity .25s;white-space:pre-line}
.fna-toast.is-show{opacity:1}
.fna-toast--success{background:var(--fna-toast-success-bg);color:var(--fna-toast-success-text)}
.fna-toast--error{background:var(--fna-toast-error-bg);color:var(--fna-toast-error-text)}
.fna-toast--info{background:var(--fna-toast-info-bg);color:var(--fna-toast-info-text)}

/* ── 알림 배너 ───────────────────────────────────────────────── */
.fna-banner{display:flex;align-items:center;justify-content:space-between;gap:var(--fna-space-md);padding:var(--fna-space-md) var(--fna-space-lg);
  border-radius:var(--fna-radius-md);border:1.5px solid var(--fna-border);background:var(--fna-surface-container);color:var(--fna-text);
  font-size:var(--fna-font-size-md);margin-bottom:var(--fna-space-lg)}
.fna-banner--alarm{background:var(--fna-danger-container);border-color:var(--fna-danger);color:var(--fna-danger-on-container)}
.fna-banner--nonconform{background:var(--fna-error-container);border-color:var(--fna-error);color:var(--fna-error-on-container)}
.fna-banner--caution{background:var(--fna-warning-container);border-color:var(--fna-warning);border-left-width:4px;color:var(--fna-warning-on-container)}
.fna-banner--ok{background:var(--fna-success-container);border-color:var(--fna-success);color:var(--fna-success-on-container)}
.fna-banner--info{background:var(--fna-info-container);border-color:var(--fna-primary);color:var(--fna-info-on-container)}

/* ── 유틸 ────────────────────────────────────────────────────── */
.fna-muted{color:var(--fna-text-muted);font-size:var(--fna-font-size-sm)}
.fna-row{display:flex;gap:var(--fna-space-sm);flex-wrap:wrap;align-items:center}
.fna-spacer{flex:1}
.fna-hidden{display:none!important}
.fna-mono{font-family:var(--fna-font-family-mono)}
.fna-touch{min-height:var(--fna-size-touch-min);min-width:var(--fna-size-touch-min)}
:root[data-scale="large"] .fna-btn,:root[data-scale="large"] .fna-input,:root[data-scale="large"] .fna-select{min-height:var(--fna-size-control-lg)}
:root[data-scale="large"] .fna-touch{min-height:var(--fna-size-touch-senior);min-width:var(--fna-size-touch-senior)}

/* ── 표 변형 (docs/dataviz.md §4) ───────────────────────────── */
.fna-table th{background:var(--fna-table-header)}
.fna-table tbody tr:hover td{background:var(--fna-table-hover)}
.fna-table--striped tbody tr:nth-child(even) td{background:var(--fna-table-stripe)}
.fna-table--striped tbody tr:hover td{background:var(--fna-table-hover)}
.fna-table tr.is-selected td,.fna-table--striped tr.is-selected td{background:var(--fna-table-selected)}
.fna-table tr.is-off td{color:var(--fna-text-muted);background:var(--fna-table-off)}
.fna-table tr.is-caution td{background:var(--fna-table-caution)}
.fna-table tr.is-caution td:first-child{box-shadow:inset 4px 0 0 var(--fna-warning)}
.fna-table tr.is-bad td,.fna-table tr.is-nonconform td{background:var(--fna-table-nonconform)}
.fna-table tr.is-nonconform td:first-child{box-shadow:inset 3px 0 0 var(--fna-error)}
.fna-table tr.is-nonconform td:first-child b{color:var(--fna-error-text)}
/* 정렬 가능한 헤더: <th aria-sort="none|ascending|descending"> */
.fna-table th[aria-sort]{cursor:pointer;user-select:none;white-space:nowrap}
.fna-table th[aria-sort]:hover{color:var(--fna-text)}
.fna-table th[aria-sort]::after{content:'';display:inline-block;width:.45em;height:.45em;margin-left:.45em;border-right:1.5px solid var(--fna-table-sort);border-bottom:1.5px solid var(--fna-table-sort);transform:rotate(45deg);vertical-align:.2em;opacity:.35}
.fna-table th[aria-sort="ascending"]::after{transform:rotate(-135deg);vertical-align:-.15em;border-color:var(--fna-table-sort-active);opacity:1}
.fna-table th[aria-sort="descending"]::after{border-color:var(--fna-table-sort-active);opacity:1}
/* 숫자·단위: <td class="num">-18.4<span class="unit">℃</span></td> */
.fna-table .unit{color:var(--fna-table-unit);font-size:.85em;margin-left:.1em;font-weight:var(--fna-font-weight-regular)}
/* 색 행 위의 보조 글자: muted 는 선택(primary.container)·부적합(error.container) 배경에서 4.2:1 — 행 톤의 on-container 계열로 올린다 */
.fna-table tr.is-selected .unit,.fna-table tr.is-selected .fna-table__sub{color:var(--fna-text-secondary)}
.fna-table tr.is-nonconform .unit,.fna-table tr.is-nonconform .fna-table__sub{color:var(--fna-error-on-container)}
.fna-table td.status,.fna-table td.approval{white-space:nowrap}
.fna-table__sub{display:block;color:var(--fna-text-muted);font-size:var(--fna-font-size-xs);margin-top:2px;font-weight:var(--fna-font-weight-regular)}
/* 고정 헤더(세로 스크롤) · 고정 첫 열(가로 스크롤, 폰) */
.fna-table-wrap--sticky{--fna-table-max-h:60vh;max-height:var(--fna-table-max-h);overflow:auto}
.fna-table-wrap--sticky thead th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 var(--fna-border)}
.fna-table-wrap--sticky-col th:first-child,.fna-table-wrap--sticky-col td:first-child{position:sticky;left:0;z-index:1;background:var(--fna-surface);box-shadow:1px 0 0 var(--fna-border)}
.fna-table-wrap--sticky-col thead th:first-child{z-index:3;background:var(--fna-table-header)}
.fna-table-wrap--sticky-col tr.is-nonconform td:first-child{background:var(--fna-table-nonconform)}
.fna-table-wrap--sticky-col tr.is-selected td:first-child{background:var(--fna-table-selected)}
.fna-table--dense th,.fna-table--dense td{padding:.4em .6em;font-size:var(--fna-font-size-sm)}
@media (max-width:599px){
  .fna-table th,.fna-table td{padding:.6em .65em}
  .fna-table--responsive{min-width:560px}          /* 폰: 열을 숨기지 않고 가로 스크롤 */
  .fna-table-wrap{-webkit-overflow-scrolling:touch}
}

/* ── 차트 크롬 (docs/dataviz.md §1~3) ───────────────────────── */
.fna-chart{position:relative;color:var(--fna-text-secondary);font-size:var(--fna-font-size-sm)}
.fna-chart svg{display:block;width:100%;height:auto;overflow:visible;font-family:inherit}
.fna-chart .grid line{stroke:var(--fna-chart-grid);stroke-width:1;shape-rendering:crispEdges}
.fna-chart .axis line,.fna-chart .axis path{stroke:var(--fna-chart-axis);stroke-width:1;fill:none;shape-rendering:crispEdges}
.fna-chart text.tick{fill:var(--fna-chart-tick);font-size:11px;font-variant-numeric:tabular-nums}
.fna-chart text.label{fill:var(--fna-chart-label);font-size:11px;font-weight:600}
.fna-chart text.value{fill:var(--fna-text);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.fna-chart text.on-fill{fill:var(--fna-text-inverse);font-size:11px;font-weight:700}
/* 계열 색: 요소에 .fna-series-N 을 주면 --fna-s 로 전달된다 */
.fna-series-1{--fna-s:var(--fna-chart-series-1)}.fna-series-2{--fna-s:var(--fna-chart-series-2)}.fna-series-3{--fna-s:var(--fna-chart-series-3)}.fna-series-4{--fna-s:var(--fna-chart-series-4)}
.fna-series-5{--fna-s:var(--fna-chart-series-5)}.fna-series-6{--fna-s:var(--fna-chart-series-6)}.fna-series-7{--fna-s:var(--fna-chart-series-7)}.fna-series-8{--fna-s:var(--fna-chart-series-8)}
.fna-series-ok{--fna-s:var(--fna-chart-status-ok)}.fna-series-caution{--fna-s:var(--fna-chart-status-caution)}.fna-series-alarm{--fna-s:var(--fna-chart-status-alarm)}
.fna-series-nonconform{--fna-s:var(--fna-chart-status-nonconform)}.fna-series-review{--fna-s:var(--fna-chart-status-review)}.fna-series-info{--fna-s:var(--fna-chart-status-info)}.fna-series-off{--fna-s:var(--fna-chart-status-off)}
.fna-series-muted{--fna-s:var(--fna-chart-muted)}
.fna-approval-none{--fna-s:var(--fna-chart-approval-none)}.fna-approval-draft{--fna-s:var(--fna-chart-approval-draft)}.fna-approval-review_requested{--fna-s:var(--fna-chart-approval-review-requested)}
.fna-approval-reviewed{--fna-s:var(--fna-chart-approval-reviewed)}.fna-approval-approved{--fna-s:var(--fna-chart-approval-approved)}.fna-approval-rejected{--fna-s:var(--fna-chart-approval-rejected)}
.fna-chart .line{fill:none;stroke:var(--fna-s);stroke-width:var(--fna-chart-line-width);stroke-linejoin:round;stroke-linecap:round}
.fna-chart .area{fill:var(--fna-s);opacity:var(--fna-chart-area-opacity)}
.fna-chart .fill,.fna-chart .bar{fill:var(--fna-s)}
.fna-chart .marker{fill:var(--fna-s);stroke:var(--fna-surface);stroke-width:2}
.fna-chart .bar:hover,.fna-chart .cell:hover,.fna-chart .slice:hover{filter:brightness(1.12)}
.fna-chart .hit{fill:transparent;pointer-events:all}
.fna-chart .band{fill:var(--fna-chart-band)}
.fna-chart .band-line{stroke:var(--fna-chart-band-line);stroke-width:1;stroke-dasharray:4 3}
.fna-chart .deviation{fill:var(--fna-chart-deviation)}
.fna-chart .crosshair{stroke:var(--fna-chart-crosshair);stroke-width:1;pointer-events:none}
.fna-chart .seq-100{--fna-s:var(--fna-chart-seq-100)}.fna-chart .seq-200{--fna-s:var(--fna-chart-seq-200)}.fna-chart .seq-300{--fna-s:var(--fna-chart-seq-300)}.fna-chart .seq-400{--fna-s:var(--fna-chart-seq-400)}
.fna-chart .seq-500{--fna-s:var(--fna-chart-seq-500)}.fna-chart .seq-600{--fna-s:var(--fna-chart-seq-600)}.fna-chart .seq-700{--fna-s:var(--fna-chart-seq-700)}
.fna-chart .div-neg-4{--fna-s:var(--fna-chart-div-neg-4)}.fna-chart .div-neg-3{--fna-s:var(--fna-chart-div-neg-3)}.fna-chart .div-neg-2{--fna-s:var(--fna-chart-div-neg-2)}.fna-chart .div-neg-1{--fna-s:var(--fna-chart-div-neg-1)}
.fna-chart .div-mid{--fna-s:var(--fna-chart-div-mid)}.fna-chart .div-pos-1{--fna-s:var(--fna-chart-div-pos-1)}.fna-chart .div-pos-2{--fna-s:var(--fna-chart-div-pos-2)}.fna-chart .div-pos-3{--fna-s:var(--fna-chart-div-pos-3)}.fna-chart .div-pos-4{--fna-s:var(--fna-chart-div-pos-4)}
/* 범례: 선 차트는 짧은 선, 막대·면은 사각 */
.fna-chart__legend{display:flex;flex-wrap:wrap;gap:var(--fna-space-xs) var(--fna-space-lg);margin-top:var(--fna-space-sm);color:var(--fna-chart-legend);font-size:var(--fna-font-size-sm)}
.fna-chart__legend span{display:inline-flex;align-items:center;gap:6px}
.fna-chart__legend i{display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--fna-s,currentColor)}
.fna-chart__legend i.rect{width:10px;height:10px;border-radius:2px}
.fna-chart__legend i.dot{width:8px;height:8px;border-radius:50%}
/* 툴팁: 값이 주인공, 계열명은 보조. 계열 키는 짧은 선 */
.fna-chart__tooltip{position:absolute;left:0;top:0;pointer-events:none;z-index:2;background:var(--fna-chart-tooltip-bg);color:var(--fna-chart-tooltip-text);padding:6px 10px;border-radius:var(--fna-radius-sm);font-size:var(--fna-font-size-sm);line-height:1.5;box-shadow:var(--fna-shadow-popover);white-space:nowrap;transform:translate(-50%,calc(-100% - 10px))}
.fna-chart__tooltip[hidden]{display:none}
.fna-chart__tooltip .t{opacity:.75;font-size:var(--fna-font-size-xs);margin-bottom:2px}
.fna-chart__tooltip .r{display:flex;align-items:center;gap:6px}
.fna-chart__tooltip .r i{display:inline-block;width:10px;height:2px;background:var(--fna-s)}
.fna-chart__tooltip .r b{font-weight:800;font-variant-numeric:tabular-nums}
.fna-chart__tooltip .r span{opacity:.8}
/* 빈 상태 · 로딩(이전 렌더 유지 + 흐리게) */
.fna-chart__empty{display:grid;place-items:center;gap:4px;min-height:160px;color:var(--fna-chart-empty);border:1px dashed var(--fna-border);border-radius:var(--fna-radius-md);text-align:center;font-size:var(--fna-font-size-md)}
.fna-chart.is-loading svg,.fna-chart.is-loading .fna-chart__legend{opacity:.4;transition:opacity .2s}
.fna-chart.is-loading::after{content:'갱신 중…';position:absolute;inset:auto 0 50% 0;text-align:center;font-size:var(--fna-font-size-sm);color:var(--fna-text-muted)}
/* 스파크라인 · 히트맵 */
.fna-sparkline{width:96px;height:28px;vertical-align:middle;overflow:visible}
.fna-sparkline .line{fill:none;stroke:var(--fna-chart-muted);stroke-width:1.5;stroke-linejoin:round}
.fna-sparkline .marker{fill:var(--fna-primary);stroke:var(--fna-surface);stroke-width:1.5}
.fna-heatmap{display:grid;gap:var(--fna-chart-gap)}
.fna-heatmap i{display:block;aspect-ratio:1;min-width:10px;border-radius:2px;background:var(--fna-s)}
.fna-heatmap i:hover{outline:2px solid var(--fna-text);outline-offset:-1px}
.fna-heatmap__scale{display:flex;align-items:center;gap:4px;margin-top:var(--fna-space-sm);font-size:var(--fna-font-size-xs);color:var(--fna-chart-tick)}
.fna-heatmap__scale i{width:18px;height:10px;border-radius:2px;display:inline-block;background:var(--fna-s)}
/* 크기: 폰 170 · 태블릿 220 · 데스크톱 260 */
.fna-chart{--fna-chart-h:260px}
.fna-chart svg[data-h]{height:var(--fna-chart-h)}
@media (max-width:599px){.fna-chart{--fna-chart-h:170px}.fna-chart text.tick{font-size:10px}.fna-chart__legend{gap:var(--fna-space-xs) var(--fna-space-md)}}
@media (min-width:600px) and (max-width:1023px){.fna-chart{--fna-chart-h:220px}}

/* ── 브랜드 모티프 "F-bar" — 심볼의 둥근 막대 3개 (로더·빈 상태·섹션 마커) ──
   비율은 tokens.json brand.motif: 길이 1 / .72 / .36, 두께 .2, 간격 .28, 막대 끝은 완전 둥글림 */
.fna-fbar{--fb:28px;display:inline-grid;gap:calc(var(--fb) * .28 * .5);width:var(--fb);vertical-align:middle;color:var(--fna-primary)}
.fna-fbar span{display:block;height:calc(var(--fb) * .2);border-radius:var(--fna-radius-pill);background:currentColor}
.fna-fbar span:nth-child(1){width:100%}.fna-fbar span:nth-child(2){width:72%}.fna-fbar span:nth-child(3){width:36%}
.fna-fbar--navy{color:var(--fna-brand-ink)}
.fna-fbar--lg{--fb:56px}.fna-fbar--xl{--fb:96px}
.fna-fbar--tile{padding:calc(var(--fb) * .22);background:var(--fna-brand-navy);color:#fff;border-radius:calc(var(--fb) * 1.44 * .045 + 2px);width:auto}
.fna-fbar--tile span{width:var(--fb)}.fna-fbar--tile span:nth-child(2){width:calc(var(--fb) * .72)}.fna-fbar--tile span:nth-child(3){width:calc(var(--fb) * .36)}
/* 로더: 막대가 아래에서 위로 차례로 켜진다 */
.fna-fbar--loading span{animation:fna-fbar 1.2s ease-in-out infinite;opacity:.35}
.fna-fbar--loading span:nth-child(3){animation-delay:0s}.fna-fbar--loading span:nth-child(2){animation-delay:.2s}.fna-fbar--loading span:nth-child(1){animation-delay:.4s}
@keyframes fna-fbar{0%,60%,100%{opacity:.35}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.fna-fbar--loading span{animation:none;opacity:1}}
/* 섹션 마커: 제목 앞 작은 F-bar */
.fna-section-title{display:flex;align-items:center;gap:var(--fna-space-sm);font-size:var(--fna-font-size-2xl);font-weight:var(--fna-font-weight-extrabold);margin:0 0 var(--fna-space-md)}
.fna-section-title .fna-fbar{--fb:16px}
/* 빈 상태(공통) */
.fna-empty{display:grid;place-items:center;gap:var(--fna-space-sm);padding:var(--fna-space-xxxl) var(--fna-space-lg);text-align:center;color:var(--fna-text-muted)}
.fna-empty .fna-fbar{color:var(--fna-border-strong);margin-bottom:var(--fna-space-sm)}
.fna-empty b{color:var(--fna-text);font-size:var(--fna-font-size-lg)}

/* ── 자동수집 / 수기 구분 배지 ───────────────────────────────── */
.fna-source-badge{display:inline-flex;align-items:center;gap:.35em;padding:.15em .6em;border-radius:var(--fna-radius-xs);font-size:var(--fna-font-size-xs);font-weight:var(--fna-font-weight-bold);border:1px solid var(--fna-border-strong);color:var(--fna-text-secondary);background:var(--fna-surface);white-space:nowrap}
.fna-source-badge::before{content:'';width:.7em;height:.7em;border-radius:2px;background:currentColor}
.fna-source-badge--sensor{color:var(--fna-primary);border-color:var(--fna-primary-inverse);background:var(--fna-primary-container)}
.fna-source-badge--sensor::before{border-radius:50%;box-shadow:0 0 0 2px var(--fna-primary-container),0 0 0 3px currentColor}
.fna-source-badge--manual{color:var(--fna-text-secondary);border-style:dashed}
.fna-source-badge--manual::before{border-radius:0;transform:rotate(45deg);width:.55em;height:.55em}
.fna-source-badge--corrected{color:var(--fna-review-text);border-color:var(--fna-review);background:var(--fna-review-container)}

/* ── 수정 이력(감사 추적) 타임라인 ─────────────────────────────── */
.fna-audit-trail{list-style:none;margin:0;padding:0 0 0 var(--fna-space-lg);border-left:2px solid var(--fna-border);font-size:var(--fna-font-size-md)}
.fna-audit-trail li{position:relative;display:grid;grid-template-columns:150px 1fr;gap:var(--fna-space-sm) var(--fna-space-md);padding:var(--fna-space-sm) 0 var(--fna-space-md)}
.fna-audit-trail li::before{content:'';position:absolute;left:calc(-1 * var(--fna-space-lg) - 6px);top:calc(var(--fna-space-sm) + 4px);width:10px;height:10px;border-radius:50%;background:var(--fna-surface);border:2px solid var(--fna-border-outline);box-sizing:border-box}
.fna-audit-trail li[data-kind="create"]::before{border-color:var(--fna-primary)}
.fna-audit-trail li[data-kind="edit"]::before{border-color:var(--fna-review);background:var(--fna-review)}
.fna-audit-trail li[data-kind="submit"]::before,.fna-audit-trail li[data-kind="review"]::before{border-color:var(--fna-warning)}
.fna-audit-trail li[data-kind="approve"]::before{border-color:var(--fna-success-text);background:var(--fna-success-text)}
.fna-audit-trail li[data-kind="reject"]::before{border-color:var(--fna-error);background:var(--fna-error)}
.fna-audit-trail li[data-kind="sensor"]::before{border-color:var(--fna-primary);background:var(--fna-primary)}
.fna-audit-trail time{color:var(--fna-text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:var(--fna-font-size-sm)}
.fna-audit-trail .who{display:block;color:var(--fna-text-muted);font-size:var(--fna-font-size-sm)}
.fna-audit-trail .what{font-weight:var(--fna-font-weight-bold)}
.fna-audit-trail .diff{display:grid;grid-template-columns:auto 1fr;gap:2px var(--fna-space-sm);margin-top:4px;padding:var(--fna-space-sm) var(--fna-space-md);background:var(--fna-surface-low);border-radius:var(--fna-radius-sm);font-size:var(--fna-font-size-sm);font-family:var(--fna-font-family-mono)}
.fna-audit-trail .diff del{color:var(--fna-error-text);text-decoration:line-through}
.fna-audit-trail .diff ins{color:var(--fna-success-text);text-decoration:none;font-weight:700}
.fna-audit-trail .reason{margin-top:4px;color:var(--fna-text-secondary)}
.fna-audit-trail .reason::before{content:'사유 · ';color:var(--fna-text-muted)}
.fna-audit-trail img.sign{height:28px;vertical-align:middle;border:1px solid var(--fna-border);border-radius:var(--fna-radius-xs);background:#fff;margin-left:6px}
@media (max-width:599px){.fna-audit-trail li{grid-template-columns:1fr}}

/* ── 세션 만료 배너 ──────────────────────────────────────────── */
.fna-banner--session{position:sticky;top:env(safe-area-inset-top,0px);z-index:var(--fna-z-topbar);background:var(--fna-warning-container);border-color:var(--fna-warning);border-left-width:4px;color:var(--fna-warning-on-container);border-radius:0;margin:0}
.fna-banner--session .fna-banner__time{font-variant-numeric:tabular-nums;font-weight:var(--fna-font-weight-black);font-size:var(--fna-font-size-lg)}
.fna-banner--session .fna-btn{background:var(--fna-warning-on-container);color:var(--fna-text-inverse)}
.fna-banner--session.is-expired{background:var(--fna-error-container);border-color:var(--fna-error);color:var(--fna-error-on-container)}

/* ── 권한 없음: 숨기지 않고 비활성 + 사유 ─────────────────────── */
.fna-btn[data-denied]{opacity:.5;cursor:not-allowed;position:relative}
.fna-btn[data-denied]:hover::after,.fna-btn[data-denied]:focus-visible::after{content:attr(data-denied);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);background:var(--fna-chart-tooltip-bg);color:var(--fna-chart-tooltip-text);font-size:var(--fna-font-size-xs);font-weight:var(--fna-font-weight-regular);padding:4px 8px;border-radius:var(--fna-radius-xs);white-space:nowrap;opacity:1}

/* ── 인쇄 양식(심사·감사 대응) — A4 세로, 머리글/바닥글, 결재선 서명란 ──
   종이 위 양식이라 항상 흰 바탕·검은 글자로 고정한다(테마 무관) */
.fna-print-sheet{--sheet-w:210mm;background:var(--fna-print-paper);color:var(--fna-print-ink);width:var(--sheet-w);max-width:100%;margin:0 auto;padding:16mm 14mm 18mm;box-sizing:border-box;font-size:11pt;line-height:1.5;border:1px solid var(--fna-border);box-shadow:var(--fna-shadow-card);position:relative;font-family:var(--fna-font-family);color-scheme:light}
.fna-print-sheet__head{display:grid;grid-template-columns:1fr auto;gap:4mm;align-items:end;border-bottom:2px solid var(--fna-print-navy);padding-bottom:3mm;margin-bottom:5mm;font-size:9pt}
.fna-print-sheet__head b{display:block;font-size:14pt;color:var(--fna-print-navy)}
.fna-print-sheet__meta{display:grid;grid-template-columns:auto auto;gap:1mm 4mm;text-align:right;color:var(--fna-print-secondary);margin:0}
.fna-print-sheet__meta dt{font-weight:700;color:var(--fna-print-muted)}.fna-print-sheet__meta dd{margin:0;font-variant-numeric:tabular-nums}
.fna-print-sheet__title{text-align:center;font-size:16pt;font-weight:800;margin:0 0 5mm;letter-spacing:.02em}
.fna-print-sheet table{width:100%;border-collapse:collapse;font-size:9.5pt;margin-bottom:4mm}
.fna-print-sheet th,.fna-print-sheet td{border:1px solid var(--fna-print-line);padding:1.6mm 2mm;vertical-align:middle}
.fna-print-sheet th{background:var(--fna-print-head-bg);font-weight:700;text-align:center}
.fna-print-sheet td.num{text-align:right;font-variant-numeric:tabular-nums}
.fna-print-sheet td.dev{background:var(--fna-print-dev);font-weight:700}
.fna-print-sheet td.dev::before{content:'▲ ';font-size:.8em}
.fna-print-sheet__signs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--fna-print-line);margin-top:6mm;width:60%;margin-left:auto}
.fna-print-sheet__signs>div{border-left:1px solid var(--fna-print-line);text-align:center;font-size:9pt}
.fna-print-sheet__signs>div:first-child{border-left:0}
.fna-print-sheet__signs .t{background:var(--fna-print-head-bg);padding:1.2mm;font-weight:700;border-bottom:1px solid var(--fna-print-line)}
.fna-print-sheet__signs .s{height:16mm;display:grid;place-items:center}
.fna-print-sheet__signs .s img{max-height:12mm;max-width:80%}
.fna-print-sheet__signs .n{padding:1mm;font-size:8.5pt;color:var(--fna-print-secondary);border-top:1px solid var(--fna-print-line-soft);font-variant-numeric:tabular-nums}
.fna-print-sheet__foot{position:absolute;left:14mm;right:14mm;bottom:8mm;display:flex;justify-content:space-between;font-size:8pt;color:var(--fna-print-muted);border-top:1px solid var(--fna-print-line-soft);padding-top:1.5mm}
.fna-print-sheet .fna-source-badge{font-size:8pt;padding:0 .4em;color:var(--fna-print-secondary);background:var(--fna-print-paper);border-color:var(--fna-print-line)}
.fna-print-sheet .fna-source-badge--sensor{color:var(--fna-print-accent);border-color:var(--fna-print-accent);background:var(--fna-print-paper)}
.fna-print-actions{display:flex;justify-content:flex-end;gap:var(--fna-space-sm);margin-bottom:var(--fna-space-md)}
@media (max-width:599px){.fna-print-sheet{padding:8mm 6mm 14mm;font-size:10pt}.fna-print-sheet__signs{width:100%}}

/* ── 인쇄 ────────────────────────────────────────────────────── */
@media print{
  .fna-toast,.fna-modal,.fna-bottom-nav,.fna-btn,.fna-print-actions,.fna-drawer,.fna-banner--session{display:none!important}
  .fna-card{box-shadow:none;break-inside:avoid;border-color:#bbb}
  .fna-chart__tooltip{display:none}
  .fna-print-sheet{box-shadow:none;border:0;width:auto;max-width:none;margin:0;padding:0;break-after:page;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .fna-print-sheet__foot{position:fixed}
}