/* 공통 부품 모양. 값은 모두 tokens.css 의 변수만 쓴다 (색·크기 숫자를 여기 직접 쓰지 않는다. 0, 1px 선 굵기, 비율 정도만 예외). */
/* Tailwind v4 와 같은 층 순서를 먼저 선언하고 부품은 components 층에 둔다
   → Tailwind 기본(base)보다는 우선, 화면에서 덧붙인 Tailwind 클래스(utilities, 예: pr-11)보다는 나중 순위 */
@layer theme, base, components, utilities;
@layer components {

html { font-size: var(--sn-root-size); }                 /* 기준값 하나: 브라우저 글자 크기 설정을 따라가고 rem 값 전체가 함께 바뀜 */
body.sn-body {
  font-family: var(--sn-font); font-size: var(--sn-text); line-height: var(--sn-leading);
  background: var(--sn-bg);
  color: var(--sn-ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;              /* 숫자 폭을 같게 (금액 정렬) */
}
::selection { background: var(--sn-accent-soft); }

/* ── 카드 · 안내 ── */
.sn-card { background: var(--sn-surface); border: 1px solid var(--sn-line); border-radius: var(--sn-radius-card); box-shadow: var(--sn-shadow-card); }
.sn-note-warn { background: var(--sn-warn-soft); border: 1px solid var(--sn-warn-line); color: var(--sn-warn-ink); border-radius: var(--sn-radius-ctl); }
.sn-note-danger { background: var(--sn-danger-soft); border: 1px solid var(--sn-danger-line); color: var(--sn-danger); border-radius: var(--sn-radius-ctl); }
.sn-badge-warn { background: var(--sn-warn-ink); color: var(--sn-warn-soft); border-radius: var(--sn-radius-ctl); }

/* ── 버튼 ── */
.sn-btn, .sn-btn-primary, .sn-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--sn-space) * 1.5);
  border-radius: var(--sn-radius-ctl); border: 1px solid transparent;
  padding: calc(var(--sn-space) * 1.5) calc(var(--sn-space) * 3.5);
  font-size: var(--sn-text); line-height: 1.4; white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s;
}
.sn-btn { background: var(--sn-surface); border-color: var(--sn-line-strong); color: var(--sn-ink); }
.sn-btn:hover:not(:disabled) { background: var(--sn-subtle); }
.sn-btn-primary { background: var(--sn-accent); color: var(--sn-on-accent); font-weight: 600; }
.sn-btn-primary:hover:not(:disabled) { background: var(--sn-accent-hover); }
.sn-btn-ghost { background: transparent; color: var(--sn-ink-2); padding: calc(var(--sn-space) * 1) calc(var(--sn-space) * 2); }
.sn-btn-ghost:hover:not(:disabled) { background: var(--sn-hover); color: var(--sn-ink); }
.sn-btn-sm { padding: calc(var(--sn-space) * 0.75) calc(var(--sn-space) * 2.5); }   /* 작은 버튼: 여백만 작게, 글자는 기본 크기 */
.sn-btn-danger { color: var(--sn-danger); }                  /* 삭제 같은 되돌릴 수 없는 동작 (.sn-btn 과 함께) */
.sn-btn-danger:hover:not(:disabled) { background: var(--sn-danger-soft); border-color: var(--sn-danger-line); }
.sn-btn-danger-fill { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--sn-radius-ctl); border: 1px solid transparent;
  padding: calc(var(--sn-space) * 1.5) calc(var(--sn-space) * 3.5); font-size: var(--sn-text); line-height: 1.4; white-space: nowrap;
  background: var(--sn-danger); color: var(--sn-on-accent); font-weight: 600; }   /* 확인 창의 위험 동작 버튼 */
.sn-btn-danger-fill:hover:not(:disabled) { background: var(--sn-danger-hover); }
.sn-btn:disabled, .sn-btn-primary:disabled, .sn-btn-ghost:disabled, .sn-btn-danger-fill:disabled { opacity: .45; cursor: default; }
.sn-btn:focus-visible, .sn-btn-primary:focus-visible, .sn-btn-ghost:focus-visible, .sn-btn-danger-fill:focus-visible { outline: none; box-shadow: 0 0 0 var(--sn-focus-ring) var(--sn-focus); }
.sn-icon { width: var(--sn-icon); height: var(--sn-icon); flex: none; }
.sn-link { color: var(--sn-accent); }
.sn-link:hover { text-decoration: underline; }

/* ── 입력칸 ── */
.sn-input {
  background: var(--sn-surface); color: var(--sn-ink);
  border: 1px solid var(--sn-line-strong); border-radius: var(--sn-radius-ctl);
  padding: calc(var(--sn-space) * 1.5) calc(var(--sn-space) * 3); font-size: var(--sn-text); line-height: 1.4;
  transition: border-color .12s, box-shadow .12s;
}
/* 비밀번호 칸: 브라우저(Edge 등)가 넣는 기본 보기·지우기 아이콘을 숨긴다 (password_input 부품의 눈 아이콘만 남기려고) */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }
.sn-input::placeholder { color: var(--sn-ink-3); }
.sn-input:focus { outline: none; border-color: var(--sn-accent); box-shadow: 0 0 0 var(--sn-focus-ring) var(--sn-focus); }
.sn-input:disabled { background: var(--sn-subtle); color: var(--sn-ink-3); }
.sn-label { color: var(--sn-ink-2); font-size: var(--sn-text); }
.sn-field { display: flex; flex-direction: column; gap: var(--sn-space); }      /* 라벨(위) + 입력칸(아래) 한 묶음 */
.sn-req::after { content: " *"; color: var(--sn-danger); }                        /* 필수 항목 라벨 */

/* 몇 개 중 하나 고르기 (라디오 단추를 붙은 버튼 모양으로): <div class="sn-seg"><label><input type="radio" class="sr-only">글자</label>... */
.sn-seg { display: inline-flex; background: var(--sn-subtle); border: 1px solid var(--sn-line); border-radius: var(--sn-radius-ctl); padding: 2px; gap: 2px; }
.sn-seg > label { display: inline-flex; align-items: center; padding: calc(var(--sn-space) * 1) calc(var(--sn-space) * 3); border-radius: var(--sn-radius-ctl);
  font-size: var(--sn-text); color: var(--sn-ink-2); cursor: pointer; white-space: nowrap; }
.sn-seg > label:hover { color: var(--sn-ink); }
.sn-seg > label:has(input:checked) { background: var(--sn-surface); color: var(--sn-ink); font-weight: 600; box-shadow: var(--sn-shadow-seg); }
.sn-seg > label:has(input:focus-visible) { box-shadow: 0 0 0 var(--sn-focus-ring) var(--sn-focus); }
.sn-code { background: var(--sn-subtle); color: var(--sn-ink-2); border-radius: var(--sn-radius-ctl); font-family: var(--sn-font-mono); font-size: var(--sn-text); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--sn-accent); }

/* ── 목록 상자 (코드 선택) ── */
.sn-listbox { background: var(--sn-surface); border: 1px solid var(--sn-line); border-radius: var(--sn-radius-ctl); box-shadow: var(--sn-shadow-pop); }
.sn-option { color: var(--sn-ink); }
.sn-option.is-active { background: var(--sn-accent); color: var(--sn-on-accent); }

/* ── 창 (메시지 창·재로그인) ── */
.sn-scrim { background: var(--sn-scrim); }
.sn-cover { background: var(--sn-bg); }                       /* 재로그인 창 뒤: 화면을 완전히 가림 */
.sn-dialog { background: var(--sn-surface); border-radius: var(--sn-radius-card); box-shadow: var(--sn-shadow-pop); }
.sn-popover { background: var(--sn-surface); border: 1px solid var(--sn-line); border-radius: var(--sn-radius-card); box-shadow: var(--sn-shadow-pop); }
.sn-toast { background: var(--sn-toast-bg); color: var(--sn-toast-ink); border-radius: var(--sn-radius-ctl); box-shadow: var(--sn-shadow-pop);
  padding: calc(var(--sn-space) * 2.5) calc(var(--sn-space) * 4); font-size: var(--sn-text); }

/* ── 화면 안 공통 (기획서 2.11) ── */
.sn-chip { display: inline-flex; align-items: center; gap: var(--sn-space); background: var(--sn-subtle); color: var(--sn-ink-2);
  border-radius: var(--sn-radius-pill); padding: 0 calc(var(--sn-space) * 2.5); font-size: var(--sn-text-sm); line-height: 1.7; white-space: nowrap; }
.sn-chip-accent { background: var(--sn-accent-soft); color: var(--sn-accent); }
/* 빈 목록·로딩·빈 화면 안내: 영역 가운데 흐린 글자 */
.sn-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--sn-space) * 2);
  color: var(--sn-ink-3); text-align: center; padding: calc(var(--sn-space) * 6); }
.sn-spinner { width: var(--sn-icon); height: var(--sn-icon); border-radius: 9999px; border: 2px solid var(--sn-line-strong); border-top-color: var(--sn-accent);
  animation: sn-spin .8s linear infinite; }
@keyframes sn-spin { to { transform: rotate(360deg); } }

/* ── 이미지 올리기 칸 (components/image_upload.html) ── */
.sn-image-tile { background: var(--sn-subtle); border: 1px solid var(--sn-line); border-radius: var(--sn-radius-ctl); }
.sn-image-drop { background: var(--sn-subtle); border: 2px dashed var(--sn-line-strong); border-radius: var(--sn-radius-ctl); color: var(--sn-ink-2);
  transition: background-color .12s, border-color .12s, color .12s; }
.sn-image-drop:hover:not(:disabled), .sn-image-drop.is-dragging { background: var(--sn-accent-soft); border-color: var(--sn-accent); color: var(--sn-accent); }
.sn-image-drop:focus-visible { outline: none; box-shadow: 0 0 0 var(--sn-focus-ring) var(--sn-focus); }

/* ── 이미지 편집 창 (components/image_editor.html) ── */
.sn-tool.is-on { background: var(--sn-accent-soft); border-color: var(--sn-accent); color: var(--sn-accent); }
.sn-swatch { width: calc(var(--sn-space) * 6); height: calc(var(--sn-space) * 6); border-radius: var(--sn-radius-pill); background: var(--swatch);
  border: 2px solid var(--sn-surface); box-shadow: 0 0 0 1px var(--sn-line-strong); cursor: pointer; }
.sn-swatch.is-on { box-shadow: 0 0 0 2px var(--sn-accent); }
.sn-swatch:has(input:focus-visible) { box-shadow: 0 0 0 var(--sn-focus-ring) var(--sn-focus); }

/* ── 왼쪽 메뉴 ── */
.sn-side { background: var(--sn-side-bg); color: var(--sn-side-ink); border-right: 1px solid var(--sn-side-line); width: var(--sn-sidebar-w); }
.sn-side-head { height: var(--sn-topbar-h); border-bottom: 1px solid var(--sn-side-line); }   /* 탭 줄과 같은 높이 */
.sn-side-line { border-color: var(--sn-side-line); }
.sn-side-muted { color: var(--sn-side-muted); }
.sn-side .sn-btn { background: transparent; border-color: var(--sn-side-line); color: var(--sn-side-ink); }
.sn-side .sn-btn:hover { background: var(--sn-side-hover); }
.sn-nav-item { position: relative; display: block; width: 100%; text-align: left; border-radius: var(--sn-radius-ctl); color: var(--sn-side-ink); }
.sn-nav-item:hover { background: var(--sn-side-hover); }
.sn-nav-item.is-active { background: var(--sn-nav-active-bg); color: var(--sn-nav-active-ink); font-weight: 600; }
/* 트리가 아닌 단독 메뉴: 글씨만 굵게 (다른 장식 없음) */
.sn-nav-item.sn-nav-solo { font-weight: 700; }
/* 트리 펼침 표시: 작은 네모 안의 + (접힘) / - (펼침). +/- 기호는 길이 0.5rem 그대로, 네모만 작게. 눌리는 영역은 줄 전체(.sn-nav-item 단추) */
.sn-fold-box { position: relative; flex: none; width: 0.875rem; height: 0.875rem; border: 1px solid currentColor; border-radius: var(--sn-radius-box); color: var(--sn-side-muted); }
.sn-fold-box::before { content: ""; position: absolute; left: 0.125rem; right: 0.125rem; top: calc(50% - 0.5px); height: 1px; background: currentColor; }
.sn-fold-box.is-closed::after { content: ""; position: absolute; top: 0.125rem; bottom: 0.125rem; left: calc(50% - 0.5px); width: 1px; background: currentColor; }
.sn-nav-item:hover .sn-fold-box { color: var(--sn-side-ink); }
.sn-nav-item.is-active::before {
  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px;
  border-radius: var(--sn-radius-ctl); background: var(--sn-nav-indicator);
}

/* ── 탭 줄 (맨 위 한 줄: 메뉴 숨기기 / 탭 / 도움말 / 초기화 / 로그인 표시). 따로 된 제목 줄은 없고 선택 탭이 제목 역할 ── */
.sn-topbar { background: var(--sn-tabbar-bg); border-bottom: 1px solid var(--sn-line); height: var(--sn-topbar-h); }
.sn-topbar-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 calc(var(--sn-space) * 3); color: var(--sn-ink-2); }
.sn-topbar-btn:hover { background: var(--sn-hover); color: var(--sn-ink); }
.sn-topbar-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sn-focus); }
.sn-topbar-btn:disabled { background: none; color: var(--sn-ink-3); cursor: default; }
.sn-tabstrip { gap: var(--sn-tab-gap); height: 100%; scrollbar-width: none; }   /* 스크롤 막대는 숨김 (마우스 휠·터치로 옆으로 밀기) */
.sn-tabstrip::-webkit-scrollbar { display: none; }
.sn-tab { height: 100%; color: var(--sn-tab-ink); border-radius: var(--sn-tab-radius); border-bottom: 2px solid transparent; }
.sn-tab:hover { background: var(--sn-hover); }
.sn-tab.is-active { background: var(--sn-tab-active-bg); color: var(--sn-tab-active-ink); border-bottom-color: var(--sn-tab-indicator);
  box-shadow: inset 1px 0 var(--sn-line), inset -1px 0 var(--sn-line); font-weight: 600; }
.sn-tab:focus-within { outline: none; }
.sn-tab button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sn-focus); border-radius: var(--sn-radius-ctl); }
.sn-tab-close { color: var(--sn-ink-3); border-radius: var(--sn-radius-ctl); }
.sn-tab-close:hover { background: var(--sn-hover); color: var(--sn-ink); }
.sn-dot-badge { position: absolute; right: -1px; bottom: 0; box-shadow: 0 0 0 2px var(--sn-tabbar-bg); }
/* 휴대폰: [현재 화면 ▾] 버튼을 누르면 나오는 열린 화면 목록 */
.sn-tab-switch { color: var(--sn-ink); }
.sn-tab-switch-item:hover { background: var(--sn-hover); }
.sn-tab-switch-parent { color: var(--sn-ink-3); }
.sn-tab-switch-item.is-active { background: var(--sn-nav-active-bg); color: var(--sn-nav-active-ink); font-weight: 600; }
.sn-tab-switch-item.is-active .sn-tab-switch-parent,
.sn-tab-switch-item.is-active .sn-tab-close { color: inherit; opacity: .8; font-weight: 400; }
.sn-dirty { color: var(--sn-dirty); }
.sn-dot { display: inline-block; width: var(--sn-dot); height: var(--sn-dot); border-radius: 9999px; }
.sn-dot.ok { background: var(--sn-ok); }
.sn-dot.wait { background: var(--sn-dirty); }
.sn-dot.bad { background: var(--sn-danger); }
.sn-banner-warn { background: var(--sn-warn-soft); border-bottom: 1px solid var(--sn-warn-line); color: var(--sn-warn-ink); }
.sn-banner-danger { background: var(--sn-danger-soft); border-bottom: 1px solid var(--sn-danger-line); color: var(--sn-danger); }

}

/* 오류가 난 입력칸 (전표 입력 저장 검증 등): 묶음에 .sn-invalid */
.sn-invalid .sn-input, .sn-input[aria-invalid="true"] { border-color: var(--sn-danger); box-shadow: 0 0 0 1px var(--sn-danger); }
.sn-invalid .sn-label { color: var(--sn-danger); }

/* ── 선택 목록 (code_combo, 기획서 2.11 "선택 목록") ── */
.sn-combo-list { min-width: 100%; width: max-content; max-width: min(32rem, calc(100vw - 2rem)); }
.sn-opt-code { color: var(--sn-ink-3); }
.sn-option.is-active .sn-opt-code { color: inherit; }
.sn-combo-bad { border-color: var(--sn-danger); box-shadow: 0 0 0 var(--sn-focus-ring) var(--sn-danger-line); }
@media (pointer: coarse) { .sn-combo-opt { min-height: 2.75rem; } }                 /* 터치 화면은 줄 높이만 키움 */
.sn-sheet { max-height: 100%; border-radius: var(--sn-radius-card) var(--sn-radius-card) 0 0; }
.sn-combo-row { min-height: max(48px, 3rem); border-top: 1px solid var(--sn-line); }          /* 시트 줄 48px 이상 */
.sn-combo-row[aria-selected="true"] { background: var(--sn-accent-soft); }