/* 표준 베이스 컴포넌트 — tokens.css 기반. web/에 tokens.css와 함께 링크. */
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);font-size:var(--fs-base);line-height:var(--lh);color:var(--c-text);background:var(--c-bg)}
h1{font-size:var(--fs-2xl);font-weight:500;margin:0 0 var(--sp-3)}
h2{font-size:var(--fs-xl);font-weight:500;margin:0 0 var(--sp-3)}
h3{font-size:var(--fs-lg);font-weight:500;margin:0 0 var(--sp-2)}
a{color:var(--c-accent);text-decoration:none}

/* 버튼 */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);font:inherit;font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-4);border:1px solid var(--c-border-strong);border-radius:var(--r-sm);background:var(--c-surface);color:var(--c-text);cursor:pointer;transition:background .12s,border-color .12s}
.btn:hover{background:var(--c-surface-2);border-color:var(--c-text-3)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent)}
.btn.primary:hover{background:var(--c-accent-press);border-color:var(--c-accent-press)}
.btn.danger{background:var(--c-danger);border-color:var(--c-danger);color:#fff}
.btn.ghost{background:transparent;border-color:transparent;color:var(--c-text-2)}
.btn.ghost:hover{background:var(--c-surface-2)}
.btn.sm{padding:var(--sp-1) var(--sp-3);font-size:var(--fs-xs)}

/* 입력 */
.input,input[type=text],input[type=date],input[type=number],input[type=search],select,textarea{font:inherit;font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-3);border:1px solid var(--c-border-strong);border-radius:var(--r-sm);background:var(--c-surface);color:var(--c-text);width:100%}
.input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-weak)}
input:disabled,.input:disabled{background:var(--c-surface-2);color:var(--c-text-3)}
.field{display:flex;flex-direction:column;gap:var(--sp-1);margin-bottom:var(--sp-3)}
.field label{font-size:var(--fs-xs);color:var(--c-text-2)}

/* 카드·패널 */
.card,.panel{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:var(--sp-4);box-shadow:var(--sh-sm)}

/* 테이블(고밀도) */
table.data{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.data th,table.data td{text-align:left;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--c-border)}
table.data th{color:var(--c-text-2);font-weight:500;background:var(--c-surface-2);position:sticky;top:0}
table.data tbody tr:hover{background:var(--c-surface-2)}

/* 배지 */
.badge{display:inline-flex;align-items:center;font-size:var(--fs-xs);font-weight:500;padding:2px var(--sp-2);border-radius:var(--r-pill)}
.badge.success{background:var(--c-success-bg);color:var(--c-success)}
.badge.warn{background:var(--c-warn-bg);color:var(--c-warn)}
.badge.danger{background:var(--c-danger-bg);color:var(--c-danger)}
.badge.info{background:var(--c-info-bg);color:var(--c-info)}

/* 내비·탭 */
.nav{display:flex;flex-direction:column;gap:2px;padding:var(--sp-2)}
.nav-item{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);color:var(--c-text-2);cursor:pointer;font-size:var(--fs-sm)}
.nav-item:hover{background:var(--c-surface-2);color:var(--c-text)}
.nav-item.active{background:var(--c-accent-weak);color:var(--c-accent);font-weight:500}
.tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--c-border)}
.tab{padding:var(--sp-2) var(--sp-4);border:none;background:none;color:var(--c-text-2);cursor:pointer;font:inherit;font-size:var(--fs-sm);border-bottom:2px solid transparent}
.tab[aria-selected=true]{color:var(--c-accent);border-bottom-color:var(--c-accent)}

/* 메뉴 계층(1·2·3단) — 2·3단은 <details>로 접힘(JS 없음). 깊이는 .nav-kids 중첩으로 */
.nav-group{display:block}
.nav-group>summary{list-style:none;display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);color:var(--c-text-2);cursor:pointer;font-size:var(--fs-sm);user-select:none}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary:hover{background:var(--c-surface-2);color:var(--c-text)}
.nav-group>summary::after{content:"\203A";margin-left:auto;color:var(--c-text-3);transition:transform .15s;display:inline-block}
.nav-group[open]>summary::after{transform:rotate(90deg)}
.nav-kids{margin-left:calc(var(--nav-indent) + var(--sp-1));border-left:1px solid var(--c-border);padding-left:var(--sp-1)}
/* 브레드크럼 — 콘텐츠 상단에 현재 깊이 표시 */
.breadcrumb{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);color:var(--c-text-3);margin-bottom:var(--sp-4);flex-wrap:wrap}
.breadcrumb a{color:var(--c-text-3);text-decoration:none}
.breadcrumb a:hover{color:var(--c-text-2)}
.breadcrumb .sep{color:var(--c-border-strong)}
.breadcrumb .cur{color:var(--c-text-2)}

/* 우측 상세 패널(master-detail) — 목록 옆에 상세/편집 */
.detail-panel{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--c-surface-2);border-left:1px solid var(--c-border)}
.detail-panel>.body{flex:1;overflow:auto;padding:var(--sp-4)}
/* 하단 상태바 — 레코드 수·마지막 저장·접속 등 정보(커밋용 actionbar와 구분) */
.statusbar{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);background:var(--c-surface);border-top:1px solid var(--c-border);font-size:var(--fs-xs);color:var(--c-text-2)}
.statusbar .sep{color:var(--c-border-strong)}
/* 라이브 업데이트 알림 배너 — 새 배포(서버 재시작) 감지 시 상단에 표시 */
.update-banner{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:var(--sp-2);padding:8px var(--sp-4);background:var(--c-accent-weak);color:var(--c-accent);font-size:var(--fs-sm);border-bottom:1px solid var(--c-accent)}
.update-banner .btn{margin-left:auto}
.update-banner[hidden]{display:none}

/* 모달·상태 */
/* 앱 아이콘 — 헤더 1단의 한 글자 배지. 색만 앱이 정한다(파비콘과 같은 글자·같은 색). */
.app-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:6px;color:#fff;font-size:13px;font-weight:700;margin-right:6px;flex:none}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:50}
.modal{background:var(--c-surface);border-radius:var(--r-lg);box-shadow:var(--sh-md);max-width:520px;width:calc(100% - var(--sp-6));max-height:85vh;overflow:auto;padding:var(--sp-5)}
.state{padding:var(--sp-6);text-align:center;color:var(--c-text-3);font-size:var(--fs-sm)}
.notice{padding:var(--sp-3);border-radius:var(--r-sm);font-size:var(--fs-sm);background:var(--c-surface-2);color:var(--c-text-2)}
.notice.ok{background:var(--c-success-bg);color:var(--c-success)}
.notice.error{background:var(--c-danger-bg);color:var(--c-danger)}

/* 격상 컴포넌트 (LawEdit 느낌) */
.btn.strong{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary)}
.btn.strong:hover{background:var(--c-primary-press);border-color:var(--c-primary-press)}
.icon-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--c-border);border-radius:var(--r-sm);background:var(--c-surface);color:var(--c-text-3);cursor:pointer}
.icon-btn:hover{color:var(--c-text);border-color:var(--c-text-3)}
.badge.draft{background:var(--c-draft-bg);color:var(--c-draft)}
.badge.neutral{background:var(--c-surface-2);color:var(--c-text-2)}
.toolbar{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);background:var(--c-surface);border-bottom:1px solid var(--c-border)}
.actionbar{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);background:var(--c-surface);border-top:1px solid var(--c-border)}
.item-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:var(--sp-4);box-shadow:var(--sh-sm);margin-bottom:var(--sp-3)}
.item-card>.head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.field-num{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-2) 0}
.field-num>.num{color:var(--c-text-3);font-size:var(--fs-sm);flex-shrink:0}
.nav-item.sel,.nav-item.sel:hover{background:var(--c-sel-bg);color:var(--c-sel-tx)}

/* hidden 은 무엇보다 우선한다 (2026-08-19) */
/*   icons.js 가 아이콘 자리에 인라인 display 를 박고, .btn/.badge 같은 클래스도 display 를 정한다.
     일반 [hidden] 규칙이 없으면 **숨겨야 할 것이 보인다.** 지금까지는 .update-banner[hidden] 처럼
     컴포넌트마다 따로 막아 왔는데, 새로 만드는 자리를 매번 기억해야 해서 여기서 한 번에 막는다.
     프롬프트앱이 같은 이유로 index.html 에 이미 넣어 둔 것을 전 앱 표준으로 올렸다. */
[hidden]{display:none !important}