/*! Hyun UI 2.3.2 — 스타일 · 이 파일은 src/에서 빌드됩니다. 직접 고치지 말고 src를 고친 뒤 node src/build.js */
/* ===== 토큰 (src/tokens.json) ===== */
@font-face { font-family: "Pretendard Variable"; src: url("fonts/PretendardVariable.woff2") format("woff2"); font-weight: 45 920; font-style: normal; font-display: swap; }
:root, [data-theme="light"] {
  --bg: #f7fafd;
  --bg-subtle: #ffffff;
  --bg-muted: #eaf2fb;
  --line: #dde6f0;
  --line-strong: #7d8ea5;
  --fg: #0f2340;
  --fg-muted: #4f6178;
  --primary: #0d74ce;
  --on-primary: #ffffff;
  --accent: #0d74ce;
  --accent-soft: #e1f0fe;
  --on-accent: #ffffff;
  --success: #218358;
  --success-soft: #e6f6eb;
  --warning: #ab6400;
  --warning-soft: #fff7c2;
  --danger: #ce2c31;
  --danger-soft: #feebec;
  --on-danger: #ffffff;
  --focus: var(--accent);
  --link: var(--accent);
  --sky: #0090ff;
  --sky-soft: #e1f6fd;
  --sky-ink: #0e758d;
  --teal: #12a594;
  --teal-soft: #e0f8f3;
  --teal-ink: #007a69;
  --violet: #6e56cf;
  --violet-soft: #f4f0fe;
  --violet-ink: #6550b9;
  --pink: #d6409f;
  --pink-soft: #fee9f5;
  --pink-ink: #c2298a;
  --orange: #f76b15;
  --orange-soft: #ffefd6;
  --orange-ink: #b84600;
  --on-color: #ffffff;
  --shadow-sm: 0 1px 2px rgba(15, 35, 64, 0.05), 0 1px 1px rgba(15, 35, 64, 0.03);
  --shadow-md: 0 12px 32px -8px rgba(13, 116, 206, 0.14), 0 2px 6px rgba(15, 35, 64, 0.05);
}
[data-theme="dark"] {
  --bg: #0b1220;
  --bg-subtle: #111a2b;
  --bg-muted: #18233a;
  --line: #24324a;
  --line-strong: #5f7391;
  --fg: #eaf2fb;
  --fg-muted: #a6b4c8;
  --primary: #4ea8ff;
  --on-primary: #0b1220;
  --accent: #70b8ff;
  --accent-soft: #0d2847;
  --on-accent: #0b1220;
  --success: #3dd68c;
  --success-soft: #132d21;
  --warning: #ffca16;
  --warning-soft: #302008;
  --danger: #ff9592;
  --danger-soft: #3b1219;
  --on-danger: #0b1220;
  --sky: #4ea8ff;
  --sky-soft: #112840;
  --sky-ink: #4ccce6;
  --teal: #0bd8b6;
  --teal-soft: #0d2d2a;
  --teal-ink: #0bd8b6;
  --violet: #baa7ff;
  --violet-soft: #291f43;
  --violet-ink: #baa7ff;
  --pink: #ff8dcc;
  --pink-soft: #37172f;
  --pink-ink: #ff8dcc;
  --orange: #ff801f;
  --orange-soft: #331e0b;
  --orange-ink: #ff801f;
  --on-color: #0b1220;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220;
    --bg-subtle: #111a2b;
    --bg-muted: #18233a;
    --line: #24324a;
    --line-strong: #5f7391;
    --fg: #eaf2fb;
    --fg-muted: #a6b4c8;
    --primary: #4ea8ff;
    --on-primary: #0b1220;
    --accent: #70b8ff;
    --accent-soft: #0d2847;
    --on-accent: #0b1220;
    --success: #3dd68c;
    --success-soft: #132d21;
    --warning: #ffca16;
    --warning-soft: #302008;
    --danger: #ff9592;
    --danger-soft: #3b1219;
    --on-danger: #0b1220;
    --sky: #4ea8ff;
    --sky-soft: #112840;
    --sky-ink: #4ccce6;
    --teal: #0bd8b6;
    --teal-soft: #0d2d2a;
    --teal-ink: #0bd8b6;
    --violet: #baa7ff;
    --violet-soft: #291f43;
    --violet-ink: #baa7ff;
    --pink: #ff8dcc;
    --pink-soft: #37172f;
    --pink-ink: #ff8dcc;
    --orange: #ff801f;
    --orange-soft: #331e0b;
    --orange-ink: #ff801f;
    --on-color: #0b1220;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 9999px;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
  --font-display: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
  --font-mono: "Cascadia Mono", "D2Coding", Consolas, ui-monospace, "SF Mono", monospace;
}
.display { font-family: var(--font-display); font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.03em; }
.title { font-family: var(--font-display); font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; }
.heading { font-family: var(--font-sans); font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
.body-lg { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.small { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }

/* ===== 00-base.css ===== */
/* 기본: 본문, 버튼, 배지, 입력, 체크박스, 스위치, 탭, 카드, 알림 */
body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 20px; background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; }
.sh-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.sh-stack { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); max-width: 420px; }

/* focus: 2px page-coloured gap, then a solid 2px focus ring */
.sh-focus:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }

/* Button */
.sh-btn { letter-spacing: -.005em; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font: inherit; font-weight: 500; white-space: nowrap; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: background-color .15s, border-color .15s, opacity .15s; }
.sh-btn-md { height: 40px; padding: 0 20px; font-size: 14px; }
.sh-btn-sm { height: 34px; padding: 0 var(--space-3); font-size: 13px; }
.sh-btn-primary { background: var(--primary); color: var(--on-primary); }
.sh-btn-primary:hover { opacity: .88; }
.sh-btn-secondary { background: var(--bg-subtle); color: var(--fg); border-color: var(--line); box-shadow: var(--shadow-sm); }
.sh-btn-secondary:hover { background: var(--bg-muted); }
.sh-btn-ghost { background: transparent; color: var(--fg); }
.sh-btn-ghost:hover { background: var(--bg-muted); }
.sh-btn-danger { background: var(--danger); color: var(--on-danger); }
.sh-btn-danger:hover { opacity: .88; }
.sh-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Badge */
.sh-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: var(--radius-full); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .01em; color: var(--fg); background: var(--bg-muted); }
.sh-badge-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--fg-muted); flex: none; }
.sh-badge-accent { background: var(--accent-soft); } .sh-badge-accent .sh-badge-dot { background: var(--accent); }
.sh-badge-success { background: var(--success-soft); } .sh-badge-success .sh-badge-dot { background: var(--success); }
.sh-badge-warning { background: var(--warning-soft); } .sh-badge-warning .sh-badge-dot { background: var(--warning); }
.sh-badge-danger { background: var(--danger-soft); } .sh-badge-danger .sh-badge-dot { background: var(--danger); }

/* Field + Input */
.sh-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.sh-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fg); }
.sh-input { height: 40px; padding: 0 var(--space-3); font: inherit; font-size: 14px; color: var(--fg); background: var(--bg-subtle); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-sizing: border-box; width: 100%; }
.sh-input::placeholder { color: var(--fg-muted); }
.sh-input:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.sh-input[aria-invalid="true"] { border-color: var(--danger); }
.sh-hint { font-size: 13px; line-height: 18px; color: var(--fg-muted); }
.sh-hint-error { color: var(--danger); }

/* Checkbox */
.sh-check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; cursor: pointer; }
.sh-check input { appearance: none; -webkit-appearance: none; margin: 0; width: 16px; height: 16px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--bg-subtle); display: grid; place-content: center; cursor: pointer; }
.sh-check input::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--on-primary); border-bottom: 2px solid var(--on-primary); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.sh-check input:checked { background: var(--primary); border-color: var(--primary); }
.sh-check input:checked::after { opacity: 1; }
.sh-check input:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }

/* Switch */
.sh-switch { display: inline-flex; align-items: center; gap: var(--space-3); font-size: 14px; cursor: pointer; background: none; border: 0; padding: 0; color: var(--fg); font-family: inherit; }
.sh-switch-track { position: relative; width: 36px; height: 20px; border-radius: var(--radius-full); background: var(--bg-muted); border: 1px solid var(--line-strong); box-sizing: border-box; transition: background-color .15s; }
.sh-switch-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--fg-muted); transition: transform .15s, background-color .15s; }
.sh-switch[aria-checked="true"] .sh-switch-track { background: var(--primary); border-color: var(--primary); }
.sh-switch[aria-checked="true"] .sh-switch-thumb { transform: translateX(16px); background: var(--on-primary); }
.sh-switch:focus-visible { outline: none; }
.sh-switch:focus-visible .sh-switch-track { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }

/* Tabs */
.sh-tabs { display: flex; flex-direction: column; gap: var(--space-3); }
.sh-tablist { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; background: var(--bg-muted); border-radius: var(--radius-md); }
.sh-tab { height: 32px; padding: 0 var(--space-3); font: inherit; font-size: 14px; font-weight: 500; color: var(--fg-muted); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.sh-tab[aria-selected="true"] { background: var(--bg-subtle); color: var(--fg); box-shadow: var(--shadow-sm); }
.sh-tabpanel { font-size: 14px; color: var(--fg-muted); }

/* Card */
.sh-card { background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 28px; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.sh-card-head { display: flex; flex-direction: column; gap: var(--space-1); }
.sh-card-title { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -.02em; }
.sh-card-desc { margin: 0; font-size: 14px; color: var(--fg-muted); }
.sh-card-foot { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* Alert */
.sh-alert { display: grid; grid-template-columns: 16px 1fr; gap: var(--space-1) var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-muted); color: var(--fg); }
.sh-alert svg { grid-row: span 2; margin-top: 2px; }
.sh-alert-title { font-weight: 500; font-size: 14px; line-height: 20px; }
.sh-alert-body { font-size: 14px; line-height: 20px; color: var(--fg); }
.sh-alert-info { background: var(--accent-soft); } .sh-alert-info svg { color: var(--accent); }
.sh-alert-success { background: var(--success-soft); } .sh-alert-success svg { color: var(--success); }
.sh-alert-warning { background: var(--warning-soft); } .sh-alert-warning svg { color: var(--warning); }
.sh-alert-danger { background: var(--danger-soft); } .sh-alert-danger svg { color: var(--danger); }

@media (prefers-reduced-motion: reduce) { .sh-btn, .sh-switch-track, .sh-switch-thumb { transition: none; } }

/* 공용 글자 도우미 */
.muted { color: var(--fg-muted); }
.eyebrow { font-size: 11px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
code { font-family: var(--font-mono); font-size: .92em; }

/* ---------- 2.2: 말줄임 · 줄 수 제한 (잘리면 툴팁으로 전체 글자) ---------- */
.sh-ell { display: block; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sh-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 2); overflow: hidden; }
.sh-btn:has(> .sh-ell) { min-width: 0; max-width: 100%; }
.sh-btn > .sh-i { flex: none; }

/* ---------- 2.2: 아이콘 배지 — 상태마다 다른 모양의 아이콘을 점 대신 넣는다 ---------- */
.sh-badge { max-width: 100%; min-width: 0; white-space: nowrap; flex-shrink: 0; overflow: hidden; } /* 높이가 고정이라 줄을 바꾸면 밖으로 넘친다 */
.sh-badge > .sh-i { width: 12px; height: 12px; flex: none; stroke-width: 2; color: var(--fg-muted); }
.sh-badge-accent > .sh-i { color: var(--accent); }
.sh-badge-success > .sh-i { color: var(--success); }
.sh-badge-warning > .sh-i { color: var(--warning); }
.sh-badge-danger > .sh-i { color: var(--danger); }
.sh-badge-sky > .sh-i { color: var(--sky-ink); } .sh-badge-teal > .sh-i { color: var(--teal-ink); } .sh-badge-violet > .sh-i { color: var(--violet-ink); } .sh-badge-orange > .sh-i { color: var(--orange-ink); } .sh-badge-pink > .sh-i { color: var(--pink-ink); }

/* ===== 10-components.css ===== */

/* ---------- 범주색 ---------- */
.sh-badge-sky { background: var(--sky-soft); } .sh-badge-sky .sh-badge-dot { background: var(--sky); }
.sh-badge-teal { background: var(--teal-soft); } .sh-badge-teal .sh-badge-dot { background: var(--teal); }
.sh-badge-violet { background: var(--violet-soft); } .sh-badge-violet .sh-badge-dot { background: var(--violet); }
.sh-badge-pink { background: var(--pink-soft); } .sh-badge-pink .sh-badge-dot { background: var(--pink); }
.sh-badge-orange { background: var(--orange-soft); } .sh-badge-orange .sh-badge-dot { background: var(--orange); }
.sh-c-sky { --c: var(--sky); --cs: var(--sky-soft); } .sh-c-teal { --c: var(--teal); --cs: var(--teal-soft); }
.sh-c-violet { --c: var(--violet); --cs: var(--violet-soft); } .sh-c-pink { --c: var(--pink); --cs: var(--pink-soft); }
.sh-c-orange { --c: var(--orange); --cs: var(--orange-soft); } .sh-c-blue { --c: var(--accent); --cs: var(--accent-soft); }

/* Avatar */
.sh-avatar { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--cs, var(--accent-soft)); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--c, var(--accent)); display: inline-grid; place-items: center; font-size: 13px; font-weight: 600; flex: none; }
.sh-avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.sh-avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.sh-avatars { display: inline-flex; }
.sh-avatars .sh-avatar { outline: 2px solid var(--bg-subtle); margin-left: -8px; } .sh-avatars .sh-avatar:first-child { margin-left: 0; }

/* Tag */
.sh-tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: var(--radius-md); background: var(--cs, var(--accent-soft)); color: var(--fg); font-size: 13px; font-weight: 500; }
.sh-tag::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--accent)); }
.sh-tag-x { width: 20px; height: 20px; display: grid; place-items: center; border: 0; background: transparent; color: var(--fg-muted); border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: 14px; line-height: 1; }
.sh-tag-x:hover { background: var(--bg-subtle); color: var(--fg); }

/* Select, Textarea */
.sh-select { appearance: none; -webkit-appearance: none; height: 40px; padding: 0 36px 0 var(--space-3); font: inherit; font-size: 14px; color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--radius-md); width: 100%; cursor: pointer;
  background-color: var(--bg-subtle); background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%), linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px; background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px; }
.sh-select:focus-visible, .sh-textarea:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.sh-textarea { min-height: 96px; padding: 10px var(--space-3); font: inherit; font-size: 14px; line-height: 20px; color: var(--fg); background: var(--bg-subtle); border: 1px solid var(--line-strong); border-radius: var(--radius-md); resize: vertical; width: 100%; box-sizing: border-box; }
.sh-textarea::placeholder { color: var(--fg-muted); }

/* Radio */
.sh-radio { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; cursor: pointer; }
.sh-radio input { appearance: none; -webkit-appearance: none; margin: 0; width: 16px; height: 16px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg-subtle); cursor: pointer; display: grid; place-content: center; }
.sh-radio input::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--on-primary); transform: scale(0); transition: transform .12s; }
.sh-radio input:checked { background: var(--primary); border-color: var(--primary); }
.sh-radio input:checked::after { transform: scale(1); }
.sh-radio input:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }

/* Choice cards */
.sh-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3); }
.sh-choice label { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-subtle); cursor: pointer; }
.sh-choice input { position: absolute; opacity: 0; pointer-events: none; }
.sh-choice label.is-checked { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--accent-soft); }
.sh-choice label:focus-within { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }

/* Progress */
.sh-progress { display: flex; flex-direction: column; gap: 6px; }
.sh-progress-row { display: flex; justify-content: space-between; font-size: 13px; }
.sh-progress-track { height: 8px; border-radius: var(--radius-full); background: var(--bg-muted); overflow: hidden; }
.sh-progress-bar { height: 100%; border-radius: inherit; background: var(--c, var(--primary)); }
.sh-stacked { display: flex; height: 10px; border-radius: var(--radius-full); overflow: hidden; gap: 2px; }
.sh-stacked > span { background: var(--c); }
.sh-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--fg-muted); }
.sh-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sh-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }

/* Stat */
.sh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.sh-stat { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-subtle); min-width: 0; }
.sh-stat-icon { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--cs, var(--accent-soft)); color: var(--c, var(--accent)); display: grid; place-items: center; }
.sh-stat-label { font-size: 13px; color: var(--fg-muted); }
.sh-stat-value { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 36px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sh-stat-delta { font-size: 12px; font-weight: 500; color: var(--fg-muted); }

/* Table */
.sh-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.sh-table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.sh-table th { text-align: left; font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--fg-muted); padding: 12px 16px; background: var(--bg-muted); border-bottom: 1px solid var(--line); }
.sh-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sh-table tr:last-child td { border-bottom: 0; }
.sh-table tbody tr:hover { background: var(--bg); }
.sh-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sh-cell-user { display: inline-flex; align-items: center; gap: 10px; }

/* Breadcrumb, Pagination */
.sh-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-muted); list-style: none; margin: 0; padding: 0; }
.sh-crumb li + li::before { content: "/"; margin-right: 8px; color: var(--line-strong); }
.sh-crumb a { color: var(--fg-muted); text-decoration: none; } .sh-crumb a:hover { color: var(--link); }
.sh-crumb [aria-current] { color: var(--fg); font-weight: 500; }
.sh-pages { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sh-page { min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid transparent; background: transparent; border-radius: var(--radius-md); font: inherit; font-size: 14px; color: var(--fg); cursor: pointer; font-variant-numeric: tabular-nums; }
.sh-page:hover { background: var(--bg-muted); }
.sh-page[aria-current="page"] { background: var(--primary); color: var(--on-primary); }
.sh-page:disabled { opacity: .4; cursor: not-allowed; }

/* Tooltip */
.sh-tip { position: relative; display: inline-flex; }
.sh-tip-body { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; padding: 6px 10px; border-radius: var(--radius-md); background: var(--fg); color: var(--bg); font-size: 12px; line-height: 16px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 10; }
.sh-tip:hover .sh-tip-body, .sh-tip:focus-within .sh-tip-body { opacity: 1; transform: translate(-50%, 0); }

/* Dropdown menu */
.sh-menu-wrap { position: relative; display: inline-block; }
.sh-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; padding: 6px; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); z-index: 20; display: flex; flex-direction: column; }
.sh-menu button { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border: 0; background: transparent; border-radius: var(--radius-md); font: inherit; font-size: 14px; color: var(--fg); text-align: left; cursor: pointer; }
.sh-menu button:hover, .sh-menu button:focus-visible { background: var(--bg-muted); outline: none; }
.sh-menu .sh-menu-danger { color: var(--danger); }
.sh-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.sh-kbd { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); }

/* Dialog */
.sh-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-subtle); color: var(--fg); box-shadow: var(--shadow-md); }
.sh-dialog::backdrop { background: rgba(15, 35, 64, .35); backdrop-filter: blur(2px); }
.sh-dialog-body { padding: 28px; display: flex; flex-direction: column; gap: var(--space-3); }
.sh-dialog-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 32px; letter-spacing: -.02em; }
.sh-dialog-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: 16px 28px; border-top: 1px solid var(--line); background: var(--bg); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* Toast */
.sh-toasts { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.sh-toast { display: flex; align-items: center; gap: 12px; min-width: 260px; max-width: calc(100vw - 32px); padding: 14px 16px; background: var(--fg); color: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); font-size: 14px; animation: sh-in .2s ease-out; }
.sh-toast i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--sky)); flex: none; }
@keyframes sh-in { from { opacity: 0; transform: translateY(8px); } }

/* Accordion */
.sh-acc { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-subtle); overflow: hidden; }
.sh-acc details + details { border-top: 1px solid var(--line); }
.sh-acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; font-weight: 500; cursor: pointer; }
.sh-acc summary::-webkit-details-marker { display: none; }
.sh-acc summary::after { content: "+"; font-size: 18px; color: var(--fg-muted); transition: transform .15s; }
.sh-acc details[open] summary::after { transform: rotate(45deg); }
.sh-acc summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.sh-acc-body { padding: 0 18px 16px; color: var(--fg-muted); }

/* Timeline */
.sh-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sh-tl { display: grid; grid-template-columns: 20px 1fr; gap: 12px; position: relative; padding-bottom: 18px; }
.sh-tl::before { content: ""; position: absolute; left: 9px; top: 18px; bottom: 0; width: 2px; background: var(--line); }
.sh-tl:last-child::before { display: none; } .sh-tl:last-child { padding-bottom: 0; }
.sh-tl-dot { width: 12px; height: 12px; margin: 4px; border-radius: 50%; background: var(--c, var(--accent)); box-shadow: 0 0 0 3px var(--cs, var(--accent-soft)); }
.sh-tl-title { font-size: 14px; font-weight: 500; }
.sh-tl-meta { font-size: 12px; color: var(--fg-muted); }

/* Skeleton, Empty */
.sh-skel { background: linear-gradient(90deg, var(--bg-muted) 0%, var(--bg) 50%, var(--bg-muted) 100%); background-size: 200% 100%; animation: sh-shimmer 1.4s linear infinite; border-radius: var(--radius-md); }
@keyframes sh-shimmer { to { background-position: -200% 0; } }
.sh-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.sh-empty-art { display: flex; gap: 6px; margin-bottom: 8px; }
.sh-empty-art span { width: 28px; height: 36px; border-radius: 4px; background: var(--c); }
.sh-empty-art span:nth-child(2) { transform: translateY(-6px); }
.sh-empty h4 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 28px; letter-spacing: -.02em; }
.sh-empty p { margin: 0 0 8px; color: var(--fg-muted); font-size: 14px; max-width: 32ch; }

@media (prefers-reduced-motion: reduce) { .sh-skel, .sh-toast { animation: none; } .sh-radio input::after, .sh-tip-body, .sh-acc summary::after { transition: none; } }

/* ---------- 2.2: Metric — 아이콘 + 값 + 설명 작은 지표 ---------- */
.sh-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.sh-metric { display: flex; align-items: center; gap: var(--space-3); padding: 12px 14px; border-radius: var(--radius-lg); background: var(--cs, var(--bg-muted)); min-width: 0; }
.sh-metric-ic { width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--bg-subtle); color: var(--ci, var(--fg-muted)); }
.sh-metric-tx { display: flex; flex-direction: column; min-width: 0; }
.sh-metric-tx b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-metric-tx small { font-size: 12px; color: var(--fg); opacity: .8; }
.sh-metric-em .sh-metric-tx b { color: var(--ci); }

/* ---------- 2.2: DescList — 이름과 값 목록 ---------- */
.sh-dl { margin: 0; display: flex; flex-direction: column; }
.sh-dl > div { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 10px 0; border-bottom: 1px dashed var(--line); min-width: 0; }
.sh-dl > div:last-child { border-bottom: 0; }
.sh-dl dt { flex: none; font-size: 13px; color: var(--fg-muted); white-space: nowrap; }
.sh-dl dd { margin: 0; min-width: 0; font-size: 13px; font-weight: 600; text-align: right; }
.sh-dl-wrap > div { align-items: flex-start; }
.sh-dl-wrap dt { width: 84px; white-space: normal; }
.sh-dl-wrap dd { flex: 1; text-align: left; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.sh-dl-boxed { padding: 2px 14px; border-radius: var(--radius-lg); background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--line); }
.sh-dl-boxed > div { border-bottom-style: solid; }

/* ---------- 2.2: ProgressRing — 원형 진행률 (--p: 0~100) ---------- */
.sh-progress-ring { --s: 132px; --t: 10px; position: relative; width: var(--s); height: var(--s); flex: none; display: grid; place-items: center; }
.sh-progress-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--ci, var(--primary)) calc(var(--p, 0) * 1%), var(--bg-muted) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--t)), var(--fg) calc(100% - var(--t) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--t)), var(--fg) calc(100% - var(--t) + 1px)); }
.sh-progress-ring b { position: relative; font-size: calc(var(--s) * .23); font-weight: 750; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sh-progress-ring b small { font-size: .45em; color: var(--fg-muted); margin-left: 1px; }
.sh-progress-ring-sm { --s: 64px; --t: 6px; }

/* ---------- 2.2: StepTrack — 진행 단계 (끝난 단계 체크, 지금 단계 강조) ---------- */
.sh-track { container: sh-track / inline-size; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.sh-track > li { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: 12px 14px; border-radius: var(--radius-lg); min-width: 0; }
.sh-track > li::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px; background: var(--line); }
.sh-track > li.is-done::after { background: var(--success); }
.sh-track > li.is-now { background: var(--cs, var(--accent-soft)); }
.sh-track > li.is-now::after { background: var(--ci, var(--primary)); }
.sh-track-dot { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--bg-muted); color: var(--fg-muted); border: 1px solid var(--line); }
.sh-track-dot .sh-i { width: 16px; height: 16px; }
.is-done > .sh-track-dot { background: var(--success-soft); color: var(--success); border-color: transparent; }
.is-now > .sh-track-dot { background: var(--ci, var(--primary)); color: var(--on-color); border-color: transparent; box-shadow: 0 0 0 4px var(--cs, var(--accent-soft)), 0 0 0 6px var(--ci, var(--primary)); }
.sh-track-tx { display: flex; flex-direction: column; min-width: 0; }
.sh-track-tx b { font-size: 14px; font-weight: 600; }
.is-now .sh-track-tx b { color: var(--fg); font-weight: 700; } /* 옅은 바탕(--cs) 위 글자는 fg — 진한 색 글자는 대비가 모자란다 */
.sh-track-tx small { font-size: 12px; color: var(--fg-muted); }
/* 세로 */
.sh-track-v { grid-auto-flow: row; gap: 0; }
.sh-track-v > li { padding: 10px 12px; gap: 14px; } /* 현재 단계 고리(6px)가 강조 바탕 끝·글자에 닿지 않게 */
.sh-track-v > li::after { display: none; }
.sh-track-v > li + li::before { content: ""; position: absolute; left: 27px; top: -8px; width: 2px; height: 16px; background: var(--line); }
.sh-track-v > li.is-done + li::before { background: var(--success); }
/* 크게 · 가운데 */
.sh-track-lg > li { flex-direction: column; text-align: center; gap: 8px; padding: 0 4px; background: transparent !important; }
.sh-track-lg > li::after { display: none; }
.sh-track-lg > li + li::before { content: ""; position: absolute; top: 16px; left: calc(-50% + 22px); right: calc(50% + 22px); height: 2px; background: var(--line); }
.sh-track-lg > li.is-done + li::before { background: var(--success); }
.sh-track-lg .sh-track-tx { align-items: center; width: 100%; }
.sh-track-lg > li.is-now > .sh-track-dot { box-shadow: 0 0 0 4px var(--cs, var(--accent-soft)), 0 0 0 6px var(--ci, var(--primary)); }
@container sh-track (max-width: 520px) {
  .sh-track > li { flex-direction: column; text-align: center; gap: 10px; padding: 10px 2px 8px; }
  .sh-track-tx { align-items: center; width: 100%; }
  .sh-track-tx b { font-size: 12px; }
  .sh-track-tx small { display: none; }
  .sh-track-v > li { flex-direction: row; text-align: left; padding: 10px 12px; gap: 14px; }
  .sh-track-v .sh-track-tx { align-items: flex-start; }
  .sh-track-v .sh-track-tx small { display: block; }
}

/* ---------- 2.2: Countdown — 남은 시간 (1초마다 줄고, 기준 이하이면 강조) ---------- */
.sh-countdown { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-full); background: var(--cs, var(--accent-soft)); box-shadow: inset 0 0 0 1px var(--c, var(--accent)); color: var(--fg); font-size: 13px; white-space: nowrap; }
.sh-countdown .sh-i { width: 15px; height: 15px; color: var(--ci, var(--accent)); }
.sh-countdown b { font-family: var(--font-mono); font-size: 14px; color: var(--ci, var(--accent)); font-variant-numeric: tabular-nums; }
.sh-countdown.is-urgent { background: var(--ci, var(--primary)); color: var(--on-color); box-shadow: 0 0 0 4px var(--cs, var(--accent-soft)); animation: sh-cd-pulse 1.2s ease-in-out infinite; }
.sh-countdown.is-urgent b, .sh-countdown.is-urgent .sh-i { color: var(--on-color); }
.sh-countdown.is-over { background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sh-countdown.is-over b, .sh-countdown.is-over .sh-i { color: var(--fg-muted); }
@keyframes sh-cd-pulse { 50% { box-shadow: 0 0 0 7px var(--cs, var(--accent-soft)); } }
@media (prefers-reduced-motion: reduce) { .sh-countdown.is-urgent { animation: none; } }

/* ===== 20-color.css ===== */

/* ---------- 컴포넌트 색 적용 ---------- */
.sh-c-blue { --ci: var(--primary); } .sh-c-sky { --ci: var(--sky-ink); } .sh-c-teal { --ci: var(--teal-ink); }
.sh-c-violet { --ci: var(--violet-ink); } .sh-c-pink { --ci: var(--pink-ink); } .sh-c-orange { --ci: var(--orange-ink); }
/* 2.2: 상태색 — 범주색 자리에서 성공·주의·오류를 그대로 쓴다(.sh-c-* 를 받는 모든 컴포넌트) */
.sh-c-success { --c: var(--success); --cs: var(--success-soft); --ci: var(--success); } .sh-c-warning { --c: var(--warning); --cs: var(--warning-soft); --ci: var(--warning); } .sh-c-danger { --c: var(--danger); --cs: var(--danger-soft); --ci: var(--danger); }

/* Button: 색 채움(.sh-btn-tone)과 옅은 채움(.sh-btn-soft) */
.sh-btn-tone { background: var(--ci, var(--primary)); color: var(--on-color); }
.sh-btn-tone:hover { opacity: .88; }
.sh-btn-soft { background: var(--cs, var(--accent-soft)); color: var(--fg); }
.sh-btn-soft::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--accent)); }
.sh-btn-soft:hover { box-shadow: inset 0 0 0 1px var(--c, var(--accent)); }

/* 체크박스·라디오·스위치: 색 클래스가 있으면 그 색으로 채운다 */
.sh-check.sh-c-blue input:checked, .sh-check[class*="sh-c-"] input:checked { background: var(--ci); border-color: var(--ci); }
.sh-check[class*="sh-c-"] input::after { border-color: var(--on-color); }
.sh-radio[class*="sh-c-"] input:checked { background: var(--ci); border-color: var(--ci); }
.sh-radio[class*="sh-c-"] input::after { background: var(--on-color); }
.sh-switch[class*="sh-c-"][aria-checked="true"] .sh-switch-track { background: var(--ci); border-color: var(--ci); }
.sh-switch[class*="sh-c-"][aria-checked="true"] .sh-switch-thumb { background: var(--on-color); }

/* Tabs: 밑줄형, 탭마다 색 */
.sh-tabs-line .sh-tablist { background: transparent; padding: 0; gap: 4px; border-radius: 0; border-bottom: 1px solid var(--line); align-self: stretch; }
.sh-tabs-line .sh-tab { height: 40px; border-radius: 0; display: inline-flex; align-items: center; gap: 8px; box-shadow: none; position: relative; }
.sh-tabs-line .sh-tab[aria-selected="true"] { background: transparent; box-shadow: none; }
.sh-tabs-line .sh-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ci, var(--primary)); }
.sh-count { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--cs, var(--bg-muted)); color: var(--fg); font-size: 11px; font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }

/* Badge: 색 채움형 */
.sh-badge-solid { background: var(--ci, var(--primary)); color: var(--on-color); }
.sh-badge-solid .sh-badge-dot { background: var(--on-color); }

/* Alert: 범주색 톤 */
.sh-alert[class*="sh-c-"] { background: var(--cs); }
.sh-alert[class*="sh-c-"] svg { color: var(--ci); }

/* Card: 색 머리 */
.sh-card-tinted { padding: 0; overflow: hidden; gap: 0; }
.sh-card-tinted .sh-card-cover { background: var(--cs, var(--accent-soft)); padding: 24px 28px 20px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.sh-card-tinted .sh-card-cover::after { content: ""; position: absolute; right: -24px; top: -24px; width: 120px; height: 120px; border-radius: 50%; background: var(--c, var(--accent)); opacity: .18; }
.sh-card-tinted .sh-card-inner { padding: 20px 28px 24px; display: flex; flex-direction: column; gap: 16px; }
.sh-card-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--ci, var(--primary)); color: var(--on-color); display: grid; place-items: center; position: relative; z-index: 1; }
.sh-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }

/* Stat: 옅은 색 바탕 */
.sh-stat[class*="sh-c-"] { background: var(--cs); border-color: transparent; }
.sh-stat[class*="sh-c-"] .sh-stat-icon { background: var(--ci); color: var(--on-color); }
.sh-stat[class*="sh-c-"] .sh-stat-label, .sh-stat[class*="sh-c-"] .sh-stat-delta { color: var(--fg); }

/* Menu: 색 아이콘 칸 */
.sh-menu-ic { width: 22px; height: 22px; border-radius: 6px; background: var(--cs); color: var(--ci); display: grid; place-items: center; flex: none; }

/* Dialog: 색 아이콘 원 */
.sh-dialog-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--cs, var(--danger-soft)); color: var(--ci, var(--danger)); display: grid; place-items: center; }

/* Toast: 색 아이콘 */
.sh-toast b { width: 24px; height: 24px; border-radius: 50%; background: var(--ci, var(--sky-ink)); color: var(--on-color); display: grid; place-items: center; font-size: 12px; flex: none; }

/* Accordion: 번호 칩 */
.sh-acc summary .sh-num { width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--cs); color: var(--fg); font-size: 12px; font-weight: 600; display: inline-grid; place-items: center; margin-right: 12px; }
.sh-acc summary > span:first-child { display: inline-flex; align-items: center; }
.sh-acc details[open] summary .sh-num { background: var(--ci); color: var(--on-color); }

/* Input: 아이콘 붙은 입력 */
.sh-input-wrap { position: relative; }
.sh-input-wrap .sh-input { padding-left: 40px; }
.sh-input-ic { position: absolute; left: 8px; top: 8px; width: 24px; height: 24px; border-radius: 6px; background: var(--cs); color: var(--ci); display: grid; place-items: center; pointer-events: none; }

/* Pagination·Breadcrumb 색 */
.sh-pages[class*="sh-c-"] .sh-page[aria-current="page"] { background: var(--ci); color: var(--on-color); }
.sh-crumb-ic { width: 22px; height: 22px; border-radius: 6px; background: var(--cs); color: var(--ci); display: inline-grid; place-items: center; margin-right: 6px; vertical-align: middle; }

/* Tooltip 색 */
.sh-tip[class*="sh-c-"] .sh-tip-body { background: var(--ci); color: var(--on-color); }



/* ===== 30-steps.css ===== */

/* ---------- Steps (결재선) ---------- */
.sh-flow { display: flex; flex-direction: column; gap: 20px; padding: 24px; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.sh-flow-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.sh-flow-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 30px; letter-spacing: -.02em; }
.sh-flow-meta { font-size: 13px; color: var(--fg-muted); }
.sh-flow-meta b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }

.sh-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; list-style: none; margin: 0; padding: 0; }
.sh-step { --sc: var(--line-strong); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 0 8px; min-width: 0; }
/* 연결선: 각 단계의 왼쪽 절반 + 오른쪽 절반 */
.sh-step::before, .sh-step::after { content: ""; position: absolute; top: 25px; height: 4px; width: calc(50% - 30px); background: var(--bg-muted); border-radius: 2px; }
.sh-step::before { left: 0; } .sh-step::after { right: 0; }
.sh-step:first-child::before, .sh-step:last-child::after { display: none; }
.sh-step-done::before, .sh-step-done::after, .sh-step-now::before { background: var(--teal-ink); }
.sh-step-rej::before { background: var(--teal-ink); }

.sh-step-dot { position: relative; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 600; box-sizing: border-box; margin-bottom: 8px;
  background: var(--bg-subtle); color: var(--fg-muted); border: 2px dashed var(--line-strong); }
.sh-step-done .sh-step-dot { background: var(--teal-soft); color: var(--fg); border: 2px solid var(--teal-ink); }
.sh-step-now .sh-step-dot { background: var(--ci, var(--primary)); color: var(--on-color); border: 0; box-shadow: 0 0 0 6px var(--cs, var(--accent-soft)); }
.sh-step-now .sh-step-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--ci, var(--primary)); opacity: .5; animation: sh-pulse 1.8s ease-out infinite; }
.sh-step-rej .sh-step-dot { background: var(--danger-soft); color: var(--danger); border: 2px solid var(--danger); }
@keyframes sh-pulse { from { transform: scale(1); opacity: .5; } to { transform: scale(1.35); opacity: 0; } }
.sh-step-check { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-ink); color: var(--on-color); box-shadow: 0 0 0 3px var(--bg-subtle); }
.sh-step-rej .sh-step-check { background: var(--danger); color: var(--on-danger); }

.sh-step-role { font-size: 11px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--fg-muted); }
.sh-step-name { font-size: 15px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.sh-step-pos { font-size: 12px; color: var(--fg-muted); font-weight: 400; }
.sh-step-time { font-size: 12px; color: var(--fg-muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.sh-step .sh-badge { margin-top: 6px; }
.sh-step-note { margin-top: 8px; max-width: 180px; padding: 8px 10px; font-size: 12px; line-height: 17px; text-align: left; background: var(--bg-muted); border-radius: var(--radius-md); color: var(--fg); position: relative; }
.sh-step-note::before { content: ""; position: absolute; top: -5px; left: 50%; margin-left: -5px; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); }

.sh-flow-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }

/* 좁은 화면: 세로 결재선 */
@media (max-width: 640px) {
  .sh-steps { grid-auto-flow: row; gap: 0; }
  .sh-step { display: grid; grid-template-columns: 54px 1fr; column-gap: 14px; text-align: left; align-items: start; padding: 0 0 20px; }
  .sh-step > *:not(.sh-step-dot) { grid-column: 2; justify-self: start; }
  .sh-step-dot { grid-row: 1 / span 6; margin-bottom: 0; }
  .sh-step::before { display: none; }
  .sh-step::after { display: block; top: 62px; bottom: 4px; left: 25px; right: auto; width: 4px; height: auto; }
  .sh-step:last-child::after { display: none; }
  .sh-step-note::before { left: 14px; }
}
@media (prefers-reduced-motion: reduce) { .sh-step-now .sh-step-dot::after { animation: none; } }

/* ===== 40-dnd-grid.css ===== */

/* ---------- Timeline (이력) ---------- */
.sh-feed { display: flex; flex-direction: column; gap: 8px; }
.sh-feed-day { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--fg-muted); margin: 8px 0 4px; }
.sh-feed-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sh-feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sh-ev { display: grid; grid-template-columns: 40px 1fr; gap: 14px; position: relative; padding-bottom: 16px; }
.sh-ev::before { content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; width: 2px; border-radius: 1px; background: linear-gradient(var(--c, var(--line)), var(--line)); opacity: .6; }
.sh-ev:last-child::before { display: none; } .sh-ev:last-child { padding-bottom: 0; }
.sh-ev-node { width: 40px; height: 40px; border-radius: 12px; background: var(--ci, var(--primary)); color: var(--on-color); display: grid; place-items: center; box-shadow: 0 0 0 4px var(--cs, var(--accent-soft)); }
.sh-ev-body { min-width: 0; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.sh-ev-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sh-ev-who { font-size: 14px; line-height: 20px; flex: 1; min-width: 0; }
.sh-ev-who b { font-weight: 600; }
.sh-ev-time { font-size: 12px; color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-ev-quote { margin: 0; padding: 10px 14px; border-radius: var(--radius-md); background: var(--cs, var(--bg-muted)); font-size: 14px; line-height: 21px; }
.sh-ev-change { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--fg-muted); }
.sh-file-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: var(--radius-md); font-size: 13px; background: var(--bg); max-width: 100%; }
.sh-file-chip .sh-ext { flex: none; }
.sh-file-chip span:last-child { color: var(--fg-muted); font-size: 12px; }

/* ---------- 드래그 공통 ---------- */
[data-sort-item] { cursor: grab; }
[data-sort-item]:active { cursor: grabbing; }
[data-sort-item].is-dragging { opacity: .35; }
.sh-drop-ph { list-style: none; border: 2px dashed var(--ci, var(--primary)); border-radius: var(--radius-lg); background: var(--cs, var(--accent-soft)); box-sizing: border-box; }
[data-sortable].is-over { outline: 2px solid var(--ci, var(--primary)); outline-offset: 2px; }
[data-sort-item]:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }
.sh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kanban */
.sh-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 4px; }
.sh-col { display: flex; flex-direction: column; gap: 10px; background: var(--bg-muted); border-radius: var(--radius-lg); padding: 12px; min-width: 0; }
.sh-col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.sh-col-head::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--ci); }
.sh-col-title { font-size: 14px; font-weight: 600; flex: 1; }
.sh-col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-height: 120px; border-radius: var(--radius-md); }
.sh-kcard { background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; }
.sh-kcard:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.sh-kcard-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sh-kcard-title { font-size: 14px; font-weight: 500; line-height: 20px; }
.sh-kcard-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.sh-tag-static { padding-right: 10px; height: 24px; font-size: 12px; }

/* Sortable list */
.sh-sortlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sh-sortrow { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 8px; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.sh-grip { width: 20px; height: 28px; display: grid; place-items: center; color: var(--fg-muted); flex: none; }
.sh-sort-num { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--ci, var(--primary)); color: var(--on-color); flex: none; font-variant-numeric: tabular-nums; }
.sh-sortrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sh-sortrow-main b { font-size: 14px; font-weight: 600; }
.sh-sortrow-main span { font-size: 12px; color: var(--fg-muted); }

/* Dropzone */
.sh-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 28px 16px; border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--bg-subtle); cursor: pointer; transition: background-color .15s, border-color .15s; }
.sh-dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sh-dropzone:focus-within { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }
.sh-dropzone.is-over { border-color: var(--ci, var(--primary)); background: var(--cs, var(--accent-soft)); }
.sh-dropzone-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--ci, var(--primary)); color: var(--on-color); display: grid; place-items: center; margin-bottom: 6px; }
.sh-dropzone b { font-size: 15px; font-weight: 600; }
.sh-dropzone span { font-size: 13px; color: var(--fg-muted); }
.sh-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sh-file { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.sh-ext { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 10px; font-weight: 700; letter-spacing: .02em; background: var(--ci); color: var(--on-color); grid-row: span 2; }
.sh-file-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sh-file-meta { grid-column: 2; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.sh-file-meta .sh-progress-track { flex: 1; height: 6px; }
.sh-file .sh-tag-x { grid-row: span 2; grid-column: 3; grid-row-start: 1; }
/* 전송 속도 · 남은 시간 · 흐름 막대(크기를 모를 때) · 받기 · 실패 */
.sh-file-meta { flex-wrap: wrap; row-gap: 4px; }
.sh-file-meta .sh-progress-track { flex: 1 1 80px; min-width: 48px; }
.sh-speed, .sh-pct { white-space: nowrap; }
.sh-speed:empty { display: none; }
.sh-file.is-down .sh-progress-bar { background: var(--primary); }
.sh-file.is-indet .sh-progress-bar { animation: sh-xfer-flow 1.1s ease-in-out infinite; }
@keyframes sh-xfer-flow { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.sh-file.is-local .sh-progress-track, .sh-file.is-local .sh-speed { display: none; }
.sh-file.is-error { border-color: var(--danger); }
.sh-file.is-error .sh-progress-bar { background: var(--danger); }
/* 전송 패널: shDownload에 list를 주지 않으면 화면 왼쪽 아래에 생긴다 */
.sh-xfer { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50; width: min(360px, calc(100vw - 32px)); max-height: min(420px, 60vh); display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); animation: sh-in .2s ease-out; }
.sh-xfer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.sh-xfer .sh-files { padding: 10px; overflow: auto; }

/* ---------- Data grid ---------- */
.sh-grid { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sh-grid-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sh-grid-search { position: relative; flex: 1 1 220px; max-width: 320px; }
.sh-grid-search .sh-input { padding-left: 36px; }
.sh-grid-search svg { position: absolute; left: 12px; top: 12px; color: var(--fg-muted); pointer-events: none; }
.sh-grid-spacer { flex: 1; }
.sh-grid-facets { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-facet { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--bg-subtle); font: inherit; font-size: 13px; font-weight: 500; color: var(--fg); cursor: pointer; }
.sh-facet i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--fg-muted)); }
.sh-facet em { font-style: normal; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.sh-facet[aria-pressed="true"] { background: var(--ci, var(--primary)); border-color: var(--ci, var(--primary)); color: var(--on-color); }
.sh-facet[aria-pressed="true"] em { color: inherit; opacity: .8; }
.sh-facet[aria-pressed="true"] i { background: var(--on-color); }
.sh-grid-cols { position: relative; }
.sh-grid-cols summary { list-style: none; }
.sh-grid-cols summary::-webkit-details-marker { display: none; }
.sh-grid-cols .sh-menu { right: 0; left: auto; padding: 8px; gap: 2px; }
.sh-grid-cols .sh-check { padding: 6px 8px; border-radius: var(--radius-md); }
.sh-grid-cols .sh-check:hover { background: var(--bg-muted); }
.sh-grid-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: var(--radius-lg); background: var(--fg); color: var(--bg); }
.sh-grid-bulk b { font-weight: 600; margin-right: auto; font-variant-numeric: tabular-nums; }
.sh-grid-bulk .sh-btn-ghost { color: var(--bg); }
.sh-grid-bulk .sh-btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.sh-grid .sh-table-wrap { max-height: 520px; overflow: auto; }
.sh-grid .sh-table th { position: sticky; top: 0; z-index: 1; }
.sh-grid .sh-table .sh-grid-chk { width: 44px; padding-left: 12px; padding-right: 0; }
.sh-grid-sort { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.sh-grid-sort:hover { color: var(--fg); }
.sh-grid-sort:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus); border-radius: 2px; }
.sh-sort-ic { display: inline-flex; flex-direction: column; gap: 2px; }
.sh-sort-ic::before, .sh-sort-ic::after { content: ""; border: 3.5px solid transparent; opacity: .35; }
.sh-sort-ic::before { border-bottom: 4px solid currentColor; border-top: 0; }
.sh-sort-ic::after { border-top: 4px solid currentColor; border-bottom: 0; }
th[aria-sort="ascending"] .sh-sort-ic::before, th[aria-sort="descending"] .sh-sort-ic::after { opacity: 1; color: var(--accent); }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--fg); }
.sh-grid .sh-table tbody tr.is-selected { background: var(--accent-soft); }
.sh-grid.is-dense .sh-table td { padding-top: 6px; padding-bottom: 6px; }
.sh-grid.is-dense .sh-table th { padding-top: 8px; padding-bottom: 8px; }
.sh-grid-empty td { text-align: center; padding: 40px 16px !important; color: var(--fg-muted); }
/* 하단: 쪽당 건수(왼쪽) · 페이지(가운데) · 범위(오른쪽), 세 칸 모두 32px 높이에 세로 가운데 */
.sh-grid-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-top: 4px; font-size: 13px; color: var(--fg-muted); }
.sh-grid-size { justify-self: start; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sh-grid-foot .sh-pages { justify-self: center; flex-wrap: nowrap; }
.sh-grid-range { justify-self: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sh-grid-range b { color: var(--fg); font-weight: 600; }
.sh-select-sm { width: auto; height: 32px; font-size: 13px; padding: 0 30px 0 10px; background-position: calc(100% - 16px) 13px, calc(100% - 11px) 13px; }
.sh-pages-sm { gap: 2px; }
.sh-pages-sm .sh-page { min-width: 32px; height: 32px; padding: 0 6px; font-size: 13px; }
.sh-page-gap { min-width: 20px; text-align: center; color: var(--fg-muted); }
@media (max-width: 720px) {
  .sh-grid-foot { grid-template-columns: 1fr 1fr; row-gap: 10px; }
  .sh-grid-foot .sh-pages { grid-column: 1 / -1; grid-row: 1; }
}

/* 인라인 편집 */
.sh-grid-hint { margin: -2px 0 0; font-size: 12px; color: var(--fg-muted); }
.sh-edit-mark { margin-left: 4px; font-size: 11px; color: var(--accent); text-transform: none; }
.sh-grid .sh-table td.is-editable { cursor: text; position: relative; }
.sh-grid .sh-table td.is-editable:hover { box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--bg-subtle); }
.sh-grid .sh-table td.is-editable:focus { outline: none; box-shadow: inset 0 0 0 2px var(--focus); background: var(--bg-subtle); }
.sh-grid .sh-table td.is-dirty { background: var(--warning-soft); }
.sh-grid .sh-table td.is-dirty::after { content: ""; position: absolute; top: 0; right: 0; border: 5px solid transparent; border-top-color: var(--warning); border-right-color: var(--warning); }
.sh-grid .sh-table td.is-editing { padding: 4px 6px; box-shadow: none; background: var(--bg-subtle); }
.sh-cell-ed { height: 34px; min-width: 120px; font-size: 14px; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.sh-cell-ed[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.sh-cell-err { position: absolute; left: 6px; top: calc(100% - 2px); z-index: 3; white-space: nowrap; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--danger); color: var(--on-danger); font-size: 12px; line-height: 16px; box-shadow: var(--shadow-md); }
.sh-grid-dirty { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: var(--radius-lg); background: var(--warning-soft); color: var(--fg); }
.sh-grid-dirty b { font-weight: 600; margin-right: auto; font-size: 14px; }
.sh-grid-dirty-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
.sh-grid mark { background: var(--warning-soft); color: inherit; border-radius: 2px; padding: 0 1px; }

/* 2.2: 위 줄(기간·빠른 보기), 설정 레이어, 필터 칩, 다중 정렬, 묶기, 고정 열, 휴대폰 카드 */
.sh-grid { container: sh-grid / inline-size; }
.sh-grid-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.sh-grid-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.sh-grid-line .sh-seg { max-width: 100%; flex-wrap: wrap; }
.sh-grid-opt-l { font-size: 12px; font-weight: 700; color: var(--fg-muted); white-space: nowrap; }
.sh-grid-range-t { font-size: 13px; color: var(--fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sh-grid-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.sh-grid-pbtn[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--primary); }
.sh-grid-pbtn .sh-count { background: var(--primary); color: var(--on-primary); min-width: 18px; height: 18px; font-size: 11px; }
.sh-grid-msort { display: none; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-muted); }
.sh-grid-msort .sh-select { flex: 1; min-width: 0; }
.sh-grid-mine { display: inline-flex; align-items: center; height: 32px; max-width: 220px; min-width: 0; padding: 0 2px 0 4px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-subtle); }
.sh-grid-mine.is-on { border-color: var(--primary); background: var(--accent-soft); }
.sh-grid-mine > button { display: inline-flex; align-items: center; gap: 4px; min-width: 0; height: 28px; padding: 0 6px; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--fg); cursor: pointer; }
.sh-grid-mine > button .sh-i { width: 13px; height: 13px; flex: none; color: var(--orange-ink); }
.sh-grid-mine > .sh-grid-mine-x { width: 24px; padding: 0; justify-content: center; flex: none; }
.sh-grid-mine > .sh-grid-mine-x .sh-i { color: var(--fg-muted); }
.sh-grid-mine > button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus); }
.sh-grid-namebox { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); }
.sh-grid-namerow { display: flex; gap: 6px; flex-wrap: wrap; }
.sh-grid-namerow .sh-input { flex: 1 1 160px; width: auto; }
.sh-grid-pop-anchor { position: relative; height: 0; z-index: 25; }
.sh-grid-pop { position: absolute; top: -4px; right: 0; width: min(680px, 100%); max-height: min(72vh, 580px); display: flex; flex-direction: column; overflow: hidden; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 24px 48px -18px color-mix(in srgb, var(--fg) 35%, transparent), 0 2px 8px color-mix(in srgb, var(--fg) 8%, transparent); animation: sh-in .14s ease-out; }
.sh-grid-pop-cols { width: min(640px, 100%); }
.sh-grid-pop-view { width: min(560px, 100%); }
.sh-grid-pop-head { display: flex; align-items: center; gap: 8px; padding: 12px 10px 10px 16px; border-bottom: 1px solid var(--line); }
.sh-grid-pop-head b { font-size: 14px; font-weight: 600; }
.sh-grid-pop-head .muted { margin-right: auto; font-size: 12px; }
.sh-grid-pop-foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-top: 1px solid var(--line); background: var(--bg); font-size: 12px; }
.sh-grid-pane { display: grid; gap: 14px; padding: 14px 16px; overflow: auto; }
.sh-grid-pane-f { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.sh-grid-pane-v { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px 24px; }
.sh-grid-pane-foot { display: flex; justify-content: flex-end; }
.sh-grid-note { margin: 0; grid-column: 1 / -1; font-size: 13px; line-height: 1.6; color: var(--fg-muted); }
.sh-grid-fs { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sh-grid-fs legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.sh-grid-opts { display: flex; flex-direction: column; gap: 6px; max-height: 176px; overflow: auto; padding-right: 4px; }
.sh-grid-opts .sh-check { font-size: 13px; min-width: 0; }
.sh-grid-opts em { margin-left: auto; font-style: normal; color: var(--fg-muted); font-variant-numeric: tabular-nums; flex: none; }
.sh-grid-span { display: flex; align-items: center; gap: 6px; }
.sh-grid-span .sh-input { flex: 1; min-width: 0; }
.sh-grid-fs .sh-date-wrap .sh-input { cursor: pointer; }
.sh-grid-opt { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; min-width: 0; }
.sh-grid-opt .sh-grid-opt-l { width: 72px; }
.sh-grid-collist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.sh-grid-colrow { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-subtle); min-width: 0; cursor: grab; }
.sh-grid-colrow .sh-check { flex: 1; min-width: 0; font-size: 13px; }
.sh-grid-colrow .sh-col-al { margin-left: auto; }
.sh-grid-colrow .sh-mini-btn .sh-i { width: 14px; height: 14px; }
.sh-grid-colrow [data-g="down"] .sh-i { transform: rotate(180deg); }
.sh-grid-grip { display: grid; color: var(--fg-muted); }
.sh-grid-grip .sh-i { width: 14px; height: 14px; }
.sh-grid-colrow.is-drop, .sh-grid th.is-drop { box-shadow: inset 3px 0 0 var(--primary); }
.sh-grid .is-drag { opacity: .45; }
.sh-grid-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sh-grid-chips .sh-fchip { max-width: 300px; min-width: 0; }
.sh-grid-chips .sh-fchip .sh-i { width: 12px; height: 12px; }
.sh-grid .sh-table { table-layout: fixed; }
.sh-grid .sh-table th { cursor: grab; letter-spacing: 0; text-transform: none; font-size: 12px; font-weight: 600; }
.sh-grid-sort .sh-i { width: 12px; height: 12px; flex: none; opacity: .5; }
.sh-grid-sort.is-desc .sh-i { transform: rotate(180deg); }
th[aria-sort="ascending"] .sh-grid-sort, th[aria-sort="descending"] .sh-grid-sort { color: var(--fg); } /* 머리글 바탕(bg-muted) 위 글자는 fg, 정렬 표시는 아이콘 색으로 */
th[aria-sort="ascending"] .sh-grid-sort .sh-i, th[aria-sort="descending"] .sh-grid-sort .sh-i { opacity: 1; color: var(--accent); }
.sh-grid-sortn { min-width: 15px; height: 15px; border-radius: 8px; background: var(--primary); color: var(--on-primary); font-size: 10px; display: inline-grid; place-items: center; flex: none; }
.sh-grid-chk, .sh-grid-no { text-align: center; }
.sh-grid .sh-table td.sh-grid-no { color: var(--fg-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sh-grid-act { text-align: right; }
.sh-grid .sh-table td.sh-grid-act { padding-top: 4px; padding-bottom: 4px; }
.sh-grid-act .sh-icon-btn { width: 30px; height: 30px; }
.sh-grid .sh-grid-pin0, .sh-grid .sh-grid-pin0b, .sh-grid .sh-grid-pin1 { position: sticky; z-index: 1; background: var(--bg-subtle); }
.sh-grid .sh-grid-pin0 { left: 0; }
.sh-grid th.sh-grid-pin0, .sh-grid th.sh-grid-pin0b, .sh-grid th.sh-grid-pin1 { z-index: 3; background: var(--bg-muted); }
.sh-grid .sh-grid-pin1 { box-shadow: inset -1px 0 0 var(--line); }
.sh-grid.is-roomy .sh-table td { padding-top: 16px; padding-bottom: 16px; }
.sh-grid.is-stripe .sh-table tbody tr:nth-child(even):not(.sh-grid-grp) td { background: var(--bg); }
.sh-grid .sh-table tbody tr:not(.sh-grid-grp):hover td { background: var(--bg-muted); }
.sh-grid .sh-table tbody tr.is-selected td, .sh-grid .sh-table tbody tr.is-current td { background: var(--accent-soft); }
.sh-grid .sh-table tbody tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.sh-grid-grp td { background: var(--bg-muted) !important; padding: 6px 10px !important; }
.sh-grid-grp-btn { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 2px 4px; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: 13px; color: var(--fg); cursor: pointer; }
.sh-grid-grp-btn > .sh-i { width: 14px; height: 14px; color: var(--fg-muted); transition: transform .15s; }
.sh-grid-grp-btn[aria-expanded="false"] > .sh-i { transform: rotate(-90deg); }
.sh-grid-grp-btn em { font-style: normal; font-size: 12px; color: var(--fg-muted); }
.sh-grid-grp-btn:focus-visible, .sh-grid-more-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus); }
.sh-grid-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sh-grid-bar-track { flex: 1; min-width: 40px; height: 6px; border-radius: 3px; background: var(--bg-muted); overflow: hidden; }
.sh-grid-bar-track > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.sh-grid-bar-success .sh-grid-bar-track > span { background: var(--success); } .sh-grid-bar-warning .sh-grid-bar-track > span { background: var(--warning); } .sh-grid-bar-danger .sh-grid-bar-track > span { background: var(--danger); } .sh-grid-bar-sky .sh-grid-bar-track > span { background: var(--sky); } .sh-grid-bar-neutral .sh-grid-bar-track > span { background: var(--line-strong); }
.sh-grid-bar-n { width: 38px; flex: none; text-align: right; font-size: 12px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.sh-grid-more { display: none; }
.sh-grid-more-btn { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--bg); font: inherit; font-size: 12px; font-weight: 600; color: var(--fg-muted); cursor: pointer; }
.sh-grid-more-btn .sh-i { width: 13px; height: 13px; transition: transform .15s; }
.sh-grid-more-btn[aria-expanded="true"] .sh-i { transform: rotate(180deg); }
.sh-grid-loading { display: flex; flex-direction: column; gap: 12px; }
.sh-grid-loading .sh-grid-tools { margin-left: 0; }
.sh-grid-skel-in { display: block; flex: 1 1 220px; max-width: 320px; height: 36px; }
.sh-grid-skel-btn { display: block; width: 72px; height: 32px; }
.sh-grid-skel-rows { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.sh-grid-skel-row { display: grid; grid-template-columns: 1fr 2fr 3fr 1fr; gap: 14px; }
.sh-grid-skel-row .sh-skel { height: 18px; }
/* 좁은 그리드(휴대폰): 정렬 고르기, 같은 폭 도구 버튼(숫자는 모서리), 행을 카드로 */
@container sh-grid (max-width: 600px) {
  .sh-grid-search { flex-basis: 100%; max-width: none; }
  .sh-grid-msort { display: flex; flex-basis: 100%; }
  .sh-grid-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto; width: 100%; margin-left: 0; }
  .sh-grid-tools > .sh-grid-pbtn { position: relative; min-width: 0; padding: 0 8px; }
  .sh-grid-tools .sh-grid-pbtn .sh-count { position: absolute; top: -7px; right: -5px; box-shadow: 0 0 0 2px var(--bg-subtle); }
  .sh-grid-tools > .sh-grid-csv { width: 34px; padding: 0; }
  .sh-grid-tools > .sh-grid-csv > span { display: none; }
  .sh-grid-pop { max-height: 70vh; }
  .sh-grid-foot { grid-template-columns: 1fr 1fr; row-gap: 10px; }
  .sh-grid-foot .sh-pages { grid-column: 1 / -1; grid-row: 1; flex-wrap: wrap; }
  .sh-grid .sh-table-wrap { border: 0; background: transparent; overflow: visible; max-height: none; }
  .sh-grid .sh-table { display: block; min-width: 0 !important; }
  .sh-grid .sh-table thead { display: none; }
  .sh-grid .sh-table tbody { display: flex; flex-direction: column; gap: 8px; }
  .sh-grid .sh-table tr { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 46px 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-subtle); }
  .sh-grid .sh-table tr:has(.sh-grid-chk) { padding-left: 44px; }
  .sh-grid .sh-table tr.sh-grid-grp { padding: 4px 8px; background: var(--bg-muted); }
  .sh-grid .sh-table-wrap[data-overflow] td { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 8px; padding: 0 !important; border: 0; position: static !important; width: auto !important; background: transparent !important; box-shadow: none !important; white-space: normal; overflow: visible; text-overflow: clip; text-align: left; min-width: 0; }
  .sh-grid .sh-table td::before { content: attr(data-label); font-size: 12px; color: var(--fg-muted); }
  .sh-grid .sh-table td > .sh-badge { justify-self: start; }
  .sh-grid .sh-table-wrap[data-overflow] td.sh-grid-ctitle { display: block; order: -1; margin-bottom: 2px; font-size: 15px; font-weight: 700; }
  .sh-grid .sh-table td.sh-grid-ctitle::before, .sh-grid .sh-table td.sh-grid-chk::before, .sh-grid .sh-table td.sh-grid-act::before, .sh-grid .sh-table td.sh-grid-more::before, .sh-grid .sh-table tr.sh-grid-grp td::before, .sh-grid .sh-table tr.sh-grid-empty td::before { content: none; }
  .sh-grid .sh-table-wrap[data-overflow] td.sh-grid-chk { position: absolute !important; left: 14px; top: 14px; display: block; }
  .sh-grid .sh-table-wrap[data-overflow] td.sh-grid-act { position: absolute !important; right: 6px; top: 6px; display: block; }
  .sh-grid .sh-table td.sh-grid-no { display: none; }
  .sh-grid .sh-table-wrap[data-overflow] tr.sh-grid-grp td, .sh-grid .sh-table-wrap[data-overflow] tr.sh-grid-empty td { display: block; }
  .sh-grid .sh-table-wrap[data-overflow] td.sh-grid-more { display: block; margin-top: 4px; }
  .sh-grid.has-card .sh-table tr.is-fold td:not(.sh-grid-ctitle):not(.sh-grid-ckey):not(.sh-grid-chk):not(.sh-grid-act):not(.sh-grid-more) { display: none; }
  .sh-grid .sh-table tr.is-current { border-color: var(--primary); }
  .sh-grid-skel-row { grid-template-columns: 1fr 2fr; }
}
@media (prefers-reduced-motion: reduce) { .sh-grid-pop { animation: none; } .sh-grid-grp-btn > .sh-i, .sh-grid-more-btn .sh-i { transition: none; } }

@media (prefers-reduced-motion: reduce) { .sh-kcard, .sh-dropzone { transition: none; } .sh-file.is-indet .sh-progress-bar, .sh-xfer { animation: none; } .sh-kcard:hover { transform: none; } }

/* ===== 50-layout.css ===== */

/* ---------- Icon ---------- */
.sh-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.sh-i-lg { width: 20px; height: 20px; }
.sh-icon-btn { width: 32px; padding: 0; }
.sh-btn-md.sh-icon-btn { width: 40px; }
.sh-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.sh-icon-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--fg); font: inherit; font-size: 11px; cursor: pointer; }
.sh-icon-cell .sh-i { width: 20px; height: 20px; }
.sh-icon-cell span { color: var(--fg-muted); font-family: var(--font-mono); }
.sh-icon-cell:hover { border-color: var(--ci, var(--primary)); color: var(--ci, var(--primary)); background: var(--cs, var(--accent-soft)); }
.sh-icon-cell:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }
.sh-icon-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.sh-icon-tile { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cs); color: var(--ci); }
.sh-icon-tile.is-solid { background: var(--ci); color: var(--on-color); }

/* ---------- Calendar ---------- */
.sh-cal { display: flex; flex-direction: column; gap: 12px; }
.sh-cal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sh-cal-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 32px; letter-spacing: -.02em; }
.sh-cal-nav { display: flex; gap: 4px; align-items: center; }
.sh-cal-grid { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-subtle); }
.sh-cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sh-cal-row + .sh-cal-row { border-top: 1px solid var(--line); }
.sh-cal-wd span { padding: 8px 10px; font-size: 12px; font-weight: 500; color: var(--fg-muted); background: var(--bg-muted); }
.sh-cal-wd .is-sun { color: var(--danger); } .sh-cal-wd .is-sat { color: var(--accent); }
.sh-cal-day { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 92px; padding: 6px; border: 0; border-left: 1px solid var(--line); background: transparent; font: inherit; color: var(--fg); text-align: left; cursor: pointer; min-width: 0; }
.sh-cal-day:first-child { border-left: 0; }
.sh-cal-day:hover { background: var(--bg); }
.sh-cal-day:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.sh-cal-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.sh-cal-day.is-sun .sh-cal-num { color: var(--danger); } .sh-cal-day.is-sat .sh-cal-num { color: var(--accent); }
.sh-cal-day.is-out { background: var(--bg); } .sh-cal-day.is-out > * { opacity: .45; }
.sh-cal-day.is-today .sh-cal-num { background: var(--primary); color: var(--on-primary); }
.sh-cal-day.is-sel { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--primary); }
.sh-cal-hol { position: absolute; top: 10px; right: 8px; font-size: 10px; color: var(--danger); font-weight: 500; }
.sh-cal-ev { display: block; padding: 2px 6px; border-radius: 4px; font-size: 11px; line-height: 16px; background: var(--cs); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 2px 0 0 var(--ci); }
.sh-cal-more { font-size: 11px; color: var(--fg-muted); padding-left: 6px; }
.sh-cal-agenda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--bg-muted); font-size: 13px; min-height: 22px; }
.sh-cal-agenda b { font-weight: 600; margin-right: 4px; }
.sh-cal-ag { display: inline-flex; align-items: center; gap: 6px; }
.sh-cal-ag i { width: 8px; height: 8px; border-radius: 2px; background: var(--ci); }
.sh-cal-ag em { font-style: normal; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .sh-cal-day { min-height: 56px; } .sh-cal-ev { font-size: 0; height: 6px; padding: 0; } .sh-cal-hol, .sh-cal-more { display: none; } }

/* Date picker */
.sh-date-wrap { position: relative; }
.sh-date-wrap .sh-input { padding-right: 40px; cursor: pointer; }
.sh-date-wrap > .sh-i { position: absolute; right: 12px; top: 12px; color: var(--fg-muted); pointer-events: none; }
.sh-dp { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 280px; padding: 12px; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.sh-dp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sh-dp-head b { font-weight: 600; font-variant-numeric: tabular-nums; }
.sh-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sh-dp-wd { font-size: 11px; text-align: center; color: var(--fg-muted); padding: 4px 0; }
.sh-dp-wd.is-sun { color: var(--danger); } .sh-dp-wd.is-sat { color: var(--accent); }
.sh-dp-day { height: 34px; border: 0; border-radius: var(--radius-md); background: transparent; font: inherit; font-size: 13px; color: var(--fg); cursor: pointer; font-variant-numeric: tabular-nums; }
.sh-dp-day:hover { background: var(--bg-muted); }
.sh-dp-day:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.sh-dp-day.is-sun { color: var(--danger); } .sh-dp-day.is-sat { color: var(--accent); }
.sh-dp-day.is-out { opacity: .4; }
.sh-dp-day.is-today { box-shadow: inset 0 0 0 1px var(--primary); }
.sh-dp-day.is-sel { background: var(--primary); color: var(--on-primary); }
.sh-dp-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

/* ---------- Form ---------- */
.sh-form { display: flex; flex-direction: column; gap: 28px; }
.sh-form-sec { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.sh-form-sec:first-of-type { border-top: 0; padding-top: 0; }
.sh-form-sec-head h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.sh-form-sec-head p { margin: 0; font-size: 13px; color: var(--fg-muted); }
.sh-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.sh-form-grid .span-2 { grid-column: 1 / -1; }
.sh-req { color: var(--danger); margin-left: 2px; }
.sh-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sh-label-row .small { color: var(--fg-muted); }
.sh-input-group { display: flex; align-items: stretch; }
.sh-input-group .sh-input { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.sh-input-addon { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--bg-muted); color: var(--fg-muted); font-size: 14px; white-space: nowrap; }
.sh-form-summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--danger-soft); font-size: 14px; }
.sh-form-summary .sh-i { color: var(--danger); }
.sh-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.sh-form-actions .sh-spacer { margin-right: auto; }
.sh-input-wrap.is-invalid .sh-input, .sh-attach.is-invalid .sh-attach-drop { border-color: var(--danger); }
.sh-select[aria-invalid="true"], .sh-textarea[aria-invalid="true"] { border-color: var(--danger); }
@media (max-width: 760px) { .sh-form-sec { grid-template-columns: 1fr; gap: 14px; } .sh-form-grid { grid-template-columns: 1fr; } }

/* ---------- File attach (폼용) ---------- */
.sh-attach { display: flex; flex-direction: column; gap: 8px; }
.sh-attach-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--bg-subtle); }
.sh-attach-drop .small { color: var(--fg-muted); }
.sh-attach-btn { position: relative; overflow: hidden; }
.sh-attach-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sh-attach-btn:focus-within { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }
.sh-attach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sh-attach-list:empty { display: none; }
.sh-attach-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 4px 4px 4px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-subtle); font-size: 13px; }
.sh-attach-chip .sh-ext { width: 26px; height: 26px; border-radius: 7px; font-size: 8px; grid-row: auto; }
.sh-attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; font-weight: 500; }
.sh-attach-size { color: var(--fg-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------- Code block ---------- */
.sh-code { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-subtle); min-width: 0; }
.sh-code figcaption { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--line); background: var(--bg-muted); font-size: 12px; }
.sh-code-lang { font-family: var(--font-mono); font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: var(--radius-full); background: var(--cs, var(--accent-soft)); color: var(--fg); }
.sh-code-name { font-family: var(--font-mono); color: var(--fg-muted); margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-code [data-copy] { gap: 6px; }
.sh-code [data-copy].is-done { color: var(--teal-ink); }
.sh-code pre { margin: 0; padding: 14px 0; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 21px; }
.sh-code code { font-size: 13px; counter-reset: ln; display: block; min-width: max-content; }
.sh-code .ln { display: block; padding: 0 16px 0 0; }
.sh-code .ln::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 36px; margin-right: 16px; padding-right: 10px; text-align: right; color: var(--fg-muted); opacity: .6; border-right: 1px solid var(--line); user-select: none; }
.tk-k { color: var(--violet-ink); } .tk-s { color: var(--teal-ink); } .tk-n { color: var(--orange-ink); } .tk-f { color: var(--accent); } .tk-c { color: var(--fg-muted); font-style: italic; }
.sh-code-dark { --code-bg: #0b1220; }

/* ---------- Editor ---------- */
.sh-editor { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--bg-subtle); display: flex; flex-direction: column; min-width: 0; }
.sh-editor:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.sh-ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--bg); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.sh-ed-bar button { min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; display: inline-grid; place-items: center; }
.sh-ed-bar button:hover { background: var(--bg-muted); }
.sh-ed-bar button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.sh-ed-bar button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.sh-ed-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.sh-ed-link { display: flex; gap: 6px; align-items: center; padding: 8px; border-bottom: 1px solid var(--line); background: var(--accent-soft); }
.sh-ed-link .sh-input { height: 32px; }
.sh-ed-body { min-height: 160px; max-height: 360px; overflow-y: auto; padding: 14px 16px; font-size: 14px; line-height: 22px; outline: none; }
.sh-ed-body:empty::before { content: attr(data-placeholder); color: var(--fg-muted); }
.sh-ed-body h2 { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 28px; margin: 4px 0 8px; letter-spacing: -.02em; }
.sh-ed-body p { margin: 0 0 8px; }
.sh-ed-body blockquote { margin: 8px 0; padding: 8px 14px; border-radius: var(--radius-md); background: var(--violet-soft); }
.sh-ed-body ul, .sh-ed-body ol { margin: 0 0 8px; padding-left: 22px; }
.sh-ed-body a { color: var(--link); }
.sh-ed-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--fg-muted); }
[data-ed-count] { font-variant-numeric: tabular-nums; }
[data-ed-count].is-over { color: var(--danger); font-weight: 600; }
.sh-dialog-lg { width: min(640px, calc(100vw - 32px)); }

/* ---------- Layer popup / Popover ---------- */
.sh-layer { position: fixed; z-index: 60; top: max(72px, calc(env(safe-area-inset-top, 0px) + 24px)); left: 50%; transform: translateX(-50%); width: min(380px, calc(100vw - 32px)); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-subtle); border: 1px solid var(--line); box-shadow: 0 24px 64px -12px rgba(15, 35, 64, .35), var(--shadow-md); animation: sh-in .2s ease-out; }
.sh-layer-art { position: relative; height: 140px; background: var(--ci, var(--primary)); overflow: hidden; display: flex; align-items: flex-end; padding: 18px 22px; }
.sh-layer-art span { position: absolute; border-radius: 50%; }
.sh-layer-art .a { width: 140px; height: 140px; right: -30px; top: -40px; background: var(--sky); opacity: .9; }
.sh-layer-art .b { width: 70px; height: 70px; right: 90px; top: 60px; background: var(--pink); }
.sh-layer-art .c { width: 36px; height: 36px; right: 40px; top: 96px; background: var(--orange); }
.sh-layer-art b { position: relative; color: var(--on-color); font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 30px; letter-spacing: -.02em; }
.sh-layer-body { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.sh-layer-body ul { margin: 0; padding-left: 18px; color: var(--fg-muted); }
.sh-layer-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 10px 18px; background: var(--bg-muted); font-size: 13px; }
.sh-layer-foot .sh-check { font-size: 13px; }
.sh-pop-wrap { position: relative; display: inline-block; }
.sh-popover { position: absolute; z-index: 25; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 280px; padding: 16px; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 12px; text-align: left; }
.sh-popover::before { content: ""; position: absolute; top: -6px; left: 50%; margin-left: -6px; width: 12px; height: 12px; background: inherit; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.sh-pop-person { display: flex; gap: 12px; align-items: center; }
.sh-pop-person div { display: flex; flex-direction: column; }
.sh-pop-person b { font-size: 15px; } .sh-pop-person span { font-size: 12px; color: var(--fg-muted); }
.sh-pop-rows { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; }
.sh-pop-rows dt { color: var(--fg-muted); } .sh-pop-rows dd { margin: 0; }

/* ---------- Sidebar ---------- */
.sh-sidebar { --sw: 248px; width: var(--sw); display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--bg-subtle); border-right: 1px solid var(--line); box-sizing: border-box; transition: width .2s; height: 100%; min-height: 0; }
.sh-sidebar.is-collapsed { --sw: 68px; }
.sh-side-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 12px; }
.sh-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--fg); text-decoration: none; white-space: nowrap; }
/* 로고 마크: --logo-s로 크기 조절(간격·모서리도 비례) */
.sh-logo { width: var(--logo-s, 28px); height: var(--logo-s, 28px); flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--logo-s, 28px) / 14); }
.sh-logo i { border-radius: calc(var(--logo-s, 28px) * .107); } .sh-logo i:nth-child(1) { background: var(--primary); border-top-left-radius: calc(var(--logo-s, 28px) * .286); } .sh-logo i:nth-child(2) { background: var(--sky); } .sh-logo i:nth-child(3) { background: var(--teal); } .sh-logo i:nth-child(4) { background: var(--pink); border-bottom-right-radius: calc(var(--logo-s, 28px) * .286); }
/* 로고 타입: 마크 + 현 + 영문 이름. 크기는 --logo-s 하나로 */
.sh-logotype { --logo-s: 28px; display: inline-flex; align-items: center; gap: calc(var(--logo-s) * .26); color: var(--fg); text-decoration: none; white-space: nowrap; line-height: 1; }
.sh-logotype b { font-size: calc(var(--logo-s) * .9); font-weight: 800; letter-spacing: -.04em; }
.sh-logotype small { align-self: flex-end; margin-left: calc(var(--logo-s) * -.1); padding-bottom: calc(var(--logo-s) * .15); font-size: max(11px, calc(var(--logo-s) * .3)); font-weight: 600; letter-spacing: .01em; color: var(--fg-muted); }
.sh-side-group { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.sh-side-label { padding: 6px 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--fg-muted); white-space: nowrap; }
.sh-side-item { position: relative; display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 10px; border-radius: var(--radius-md); color: var(--fg); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.sh-side-item .sh-i { color: var(--fg-muted); }
.sh-side-item:hover { background: var(--bg-muted); }
.sh-side-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.sh-side-item[aria-current="page"] { background: var(--accent-soft); color: var(--fg); }
.sh-side-item[aria-current="page"] .sh-i { color: var(--accent); }
.sh-side-item .sh-count { margin-left: auto; }
.sh-side-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--c); flex: none; margin: 0 4px; }
.sh-side-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-lg); background: var(--bg-muted); white-space: nowrap; overflow: hidden; }
.sh-side-foot div { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.sh-side-foot b { font-weight: 600; } .sh-side-foot span { font-size: 12px; color: var(--fg-muted); }
.sh-sidebar.is-collapsed .sh-hide-c { display: none; }
.sh-sidebar.is-collapsed .sh-side-top { flex-direction: column; }
.sh-sidebar.is-collapsed .sh-side-item { justify-content: center; padding: 0; }
.sh-sidebar.is-collapsed .sh-side-item .sh-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; font-size: 9px; padding: 0 4px; }
.sh-sidebar.is-collapsed .sh-side-label { text-align: center; padding: 6px 0; font-size: 0; } .sh-sidebar.is-collapsed .sh-side-label::after { content: "···"; font-size: 12px; }
.sh-sidebar.is-collapsed .sh-side-foot { justify-content: center; padding: 6px; background: transparent; }
@media (prefers-reduced-motion: reduce) { .sh-sidebar { transition: none; } }

/* ---------- Header ---------- */
.sh-header { display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 16px; background: var(--bg-subtle); border-bottom: 1px solid var(--line); min-width: 0; }
.sh-header-nav { display: flex; gap: 2px; align-self: stretch; }
.sh-header-nav a { position: relative; display: inline-flex; align-items: center; padding: 0 12px; font-size: 14px; font-weight: 500; color: var(--fg-muted); text-decoration: none; }
.sh-header-nav a:hover { color: var(--fg); }
.sh-header-nav a[aria-current="page"] { color: var(--fg); }
.sh-header-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--primary); }
.sh-header-nav a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); border-radius: var(--radius-sm); }
.sh-header-search { margin-left: auto; display: flex; align-items: center; gap: 8px; height: 36px; width: 240px; padding: 0 8px 0 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); color: var(--fg-muted); font: inherit; font-size: 13px; cursor: text; }
.sh-header-search kbd { margin-left: auto; font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-subtle); }
.sh-header-actions { display: flex; align-items: center; gap: 4px; }
.sh-bell { position: relative; }
.sh-bell::after { content: ""; position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 2px var(--bg-subtle); }
.sh-header-user { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 4px; border: 0; border-radius: var(--radius-full); background: transparent; font: inherit; font-size: 14px; color: var(--fg); cursor: pointer; }
.sh-header-user:hover { background: var(--bg-muted); }
.sh-header-menu { display: none; }
@media (max-width: 860px) { .sh-header-nav, .sh-header-search kbd, .sh-header-user .sh-hide-m { display: none; } .sh-header-search { width: auto; flex: 1; } .sh-header-menu { display: inline-flex; } }

/* ---------- Footer ---------- */
.sh-footer { padding: 32px 24px 20px; background: var(--bg); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 28px; font-size: 13px; }
.sh-footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 24px; }
.sh-footer-top p { margin: 10px 0 0; color: var(--fg-muted); max-width: 30ch; }
.sh-footer h5 { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--fg-muted); }
.sh-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sh-footer a { color: var(--fg); text-decoration: none; }
.sh-footer a:hover { color: var(--link); text-decoration: underline; }
.sh-footer-bot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--fg-muted); }
.sh-footer-bot nav { display: flex; flex-wrap: wrap; gap: 16px; }
.sh-footer-bot .is-strong { font-weight: 700; color: var(--fg); }
.sh-footer address { font-style: normal; }
@media (max-width: 720px) { .sh-footer-top { grid-template-columns: 1fr 1fr; } .sh-footer-top > :first-child { grid-column: 1 / -1; } }

/* ---------- Section ---------- */
.sh-section { display: flex; flex-direction: column; gap: 24px; }
.sh-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.sh-section-head h3 { margin: 4px 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 38px; letter-spacing: -.01em; }
.sh-section-head p { margin: 0; color: var(--fg-muted); max-width: 52ch; }
.sh-eyebrow { font-size: 11px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--ci, var(--accent)); font-weight: 600; }
.sh-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.sh-feature { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--radius-lg); background: var(--cs); }
.sh-feature h4 { margin: 4px 0 0; font-size: 16px; font-weight: 600; }
.sh-feature p { margin: 0; font-size: 14px; color: var(--fg); opacity: .85; }
.sh-cta { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 32px; border-radius: var(--radius-lg); background: var(--primary); color: var(--on-primary); }
.sh-cta::before, .sh-cta::after { content: ""; position: absolute; border-radius: 50%; }
.sh-cta::before { width: 220px; height: 220px; right: -60px; top: -110px; background: var(--sky); opacity: .55; }
.sh-cta::after { width: 90px; height: 90px; right: 160px; bottom: -50px; background: var(--teal); opacity: .7; }
.sh-cta > * { position: relative; z-index: 1; }
.sh-cta h4 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 34px; letter-spacing: -.02em; }
.sh-cta p { margin: 0; opacity: .85; }
.sh-cta .sh-btn-secondary { background: var(--on-primary); color: var(--primary); border-color: transparent; }
.sh-cta .sh-btn-ghost { color: var(--on-primary); }
.sh-cta .sh-btn-ghost:hover { background: rgba(255, 255, 255, .14); }

/* ---------- Card 변형 ---------- */
.sh-card-profile { align-items: center; text-align: center; gap: 12px; }
.sh-card-profile .sh-profile-band { align-self: stretch; height: 64px; margin: -28px -28px -40px; background: var(--cs); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.sh-card-profile .sh-avatar { width: 72px; height: 72px; font-size: 24px; border: 4px solid var(--bg-subtle); box-shadow: inset 0 0 0 2px var(--c); position: relative; }
.sh-card-profile h3 { margin: 0; font-size: 17px; font-weight: 600; }
.sh-card-profile p { margin: 0; font-size: 13px; color: var(--fg-muted); }
.sh-profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); align-self: stretch; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sh-profile-stats b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 28px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sh-profile-stats span { font-size: 12px; color: var(--fg-muted); }
.sh-card-list { padding: 8px; gap: 0; }
.sh-card-list-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 12px; }
.sh-card-list-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.sh-card-list-head a { font-size: 13px; color: var(--link); text-decoration: none; }
.sh-doc-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); color: var(--fg); text-decoration: none; }
.sh-doc-row:hover { background: var(--bg-muted); }
.sh-doc-row .sh-ext { width: 34px; height: 34px; grid-row: auto; }
.sh-doc-row div { display: flex; flex-direction: column; min-width: 0; }
.sh-doc-row b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-doc-row span { font-size: 12px; color: var(--fg-muted); }
.sh-link-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.sh-link-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-subtle); color: var(--fg); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.sh-link-card:hover { border-color: var(--ci); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sh-link-card:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }
.sh-link-card b { font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sh-link-card b .sh-i { color: var(--fg-muted); transition: transform .15s; }
.sh-link-card:hover b .sh-i { transform: translateX(3px); color: var(--ci); }
.sh-link-card span { font-size: 13px; color: var(--fg-muted); }
@media (prefers-reduced-motion: reduce) { .sh-link-card, .sh-link-card b .sh-i { transition: none; } .sh-link-card:hover { transform: none; } }

/* ---------- Dashboard ---------- */
.sh-app { display: grid; grid-template-columns: auto 1fr; height: 760px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); }
.sh-app-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sh-app-content { flex: 1; overflow: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.sh-app-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.sh-app-title h3 { margin: 2px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 36px; letter-spacing: -.02em; }
.sh-dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.sh-dash > * { min-width: 0; }
.sh-dash .c-12 { grid-column: span 12; } .sh-dash .c-8 { grid-column: span 8; } .sh-dash .c-4 { grid-column: span 4; } .sh-dash .c-6 { grid-column: span 6; }
.sh-panel { background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.sh-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sh-panel-head h4 { margin: 0; font-size: 15px; font-weight: 600; }
.sh-chart { width: 100%; height: auto; display: block; overflow: visible; }
.sh-chart .ax { stroke: var(--line); stroke-width: 1; }
.sh-chart .lb { fill: var(--fg-muted); font-size: 11px; font-family: var(--font-sans); }
.sh-chart .vl { fill: var(--fg); font-size: 11px; font-weight: 600; font-family: var(--font-sans); }
.sh-chart .b1 { fill: var(--primary); } .sh-chart .b2 { fill: var(--sky); } .sh-chart .b3 { fill: var(--pink); }
.sh-donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sh-donut { width: 140px; height: 140px; flex: none; }
.sh-donut circle { fill: none; stroke-width: 18; }
.sh-donut .tr { stroke: var(--bg-muted); }
.sh-donut text { fill: var(--fg); font-family: var(--font-display); font-weight: 700; font-size: 26px; text-anchor: middle; letter-spacing: -.02em; }
.sh-donut .sub { fill: var(--fg-muted); font-family: var(--font-sans); font-size: 10px; }
.sh-spark { width: 100%; height: 36px; display: block; }
.sh-spark path { fill: none; stroke: var(--ci); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sh-spark .area { fill: var(--cs); stroke: none; }
@media (max-width: 900px) {
  .sh-app { grid-template-columns: 1fr; height: auto; }
  .sh-app .sh-sidebar { display: none; }
  .sh-dash .c-8, .sh-dash .c-4, .sh-dash .c-6 { grid-column: span 12; }
}

/* ---------- Date range picker ---------- */
.sh-rp { width: 640px; max-width: calc(100vw - 32px); padding: 0; overflow: hidden; }
.sh-rp-body { display: grid; grid-template-columns: 120px minmax(0, 1fr); }
.sh-rp-presets { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-right: 1px solid var(--line); background: var(--bg); }
.sh-rp-preset { text-align: left; height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius-md); background: transparent; font: inherit; font-size: 13px; color: var(--fg); cursor: pointer; }
.sh-rp-preset:hover { background: var(--bg-muted); }
.sh-rp-preset.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sh-rp-preset:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.sh-rp-cal { position: relative; padding: 12px 14px; }
.sh-rp-nav { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; pointer-events: none; }
.sh-rp-nav button { pointer-events: auto; }
.sh-rp-months { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sh-rp-title { display: block; text-align: center; height: 32px; line-height: 32px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.sh-rp .sh-dp-grid { gap: 2px 0; }
.sh-rp .sh-dp-day { border-radius: var(--radius-md); }
.sh-rp-blank { height: 34px; }
.sh-rp .sh-dp-day.is-in { background: var(--accent-soft); border-radius: 0; }
.sh-rp .sh-dp-day.is-start, .sh-rp .sh-dp-day.is-end { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.sh-rp .sh-dp-day.has-end { border-radius: var(--radius-md) 0 0 var(--radius-md); box-shadow: 6px 0 0 var(--accent-soft); }
.sh-rp .sh-dp-day.has-start { border-radius: 0 var(--radius-md) var(--radius-md) 0; box-shadow: -6px 0 0 var(--accent-soft); }
.sh-rp .sh-dp-day.is-preview { background: var(--accent-soft); color: var(--fg); box-shadow: inset 0 0 0 2px var(--primary); }
.sh-rp .sh-dp-day.is-preview.has-start { box-shadow: inset 0 0 0 2px var(--primary), -6px 0 0 var(--accent-soft); }
.sh-rp .sh-dp-day.is-today:not(.is-start):not(.is-end) { box-shadow: inset 0 0 0 1px var(--primary); }
.sh-rp-foot { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--bg); }
.sh-rp-sum { margin-right: auto; display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--fg-muted); }
.sh-rp-sum b { color: var(--fg); font-weight: 600; font-size: 14px; }
.sh-rp-sum span { font-variant-numeric: tabular-nums; }
.sh-range-days { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--fg); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .sh-rp-body { grid-template-columns: 1fr; }
  .sh-rp-presets { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); }
  .sh-rp-months { grid-template-columns: 1fr; }
  .sh-rp-months .sh-rp-month + .sh-rp-month { display: none; }
}

@keyframes sh-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ---------- 2.2: SectionCard (.sh-box) — 아이콘·제목·설명·동작 머리 + 본문 + 바닥 ---------- */
.sh-box { container: sh-box / inline-size; display: flex; flex-direction: column; min-width: 0; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.sh-box-head { display: flex; align-items: center; gap: var(--space-3); padding: 18px 22px; border-bottom: 1px solid var(--line); min-width: 0; }
.sh-box-icon { width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--cs, var(--accent-soft)); color: var(--ci, var(--primary)); }
.sh-box-tt { flex: 1; min-width: 0; }
.sh-box-title { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 700; letter-spacing: -.02em; }
.sh-box-sub { margin: 2px 0 0; font-size: 12px; color: var(--fg-muted); }
.sh-box-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex: 0 1 auto; max-width: 50%; min-width: 0; }
.sh-box-body { display: flex; flex-direction: column; gap: var(--space-4); padding: 20px 22px; min-width: 0; }
.sh-box-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 14px 22px; border-top: 1px solid var(--line); background: var(--bg); border-radius: 0 0 var(--radius-lg) var(--radius-lg); font-size: 13px; }
.sh-box-lg > .sh-box-head { padding: 22px 26px; }
.sh-box-lg .sh-box-title { font-size: 20px; }
.sh-box-lg > .sh-box-body { padding: 24px 26px; gap: var(--space-6); }
.sh-box-lg > .sh-box-foot { padding: 16px 26px; }
/* 색 머리: 범주색이 위에서 아래로 옅게 번지고, 아이콘은 색을 채운다 */
.sh-box-tint { border-color: transparent; overflow: hidden; background: linear-gradient(180deg, var(--cs, var(--accent-soft)) 0, var(--bg-subtle) 150px); box-shadow: 0 1px 2px color-mix(in srgb, var(--fg) 6%, transparent), 0 14px 30px -18px color-mix(in srgb, var(--ci, var(--primary)) 55%, transparent); }
.sh-box-tint > .sh-box-head { border-bottom: 0; padding-bottom: 6px; }
.sh-box-tint .sh-box-icon { background: var(--ci, var(--primary)); color: var(--on-color); box-shadow: 0 8px 16px -8px var(--ci, var(--primary)); }
.sh-box-tint > .sh-box-body { padding-top: 10px; }
.sh-box-tint > .sh-box-foot { background: transparent; border-top: 1px dashed var(--line); }
@container sh-box (max-width: 420px) {
  .sh-box-head, .sh-box-body, .sh-box-foot { padding-left: 16px !important; padding-right: 16px !important; }
  .sh-box-actions { display: none; }
  .sh-box-foot > .sh-btn { flex: 1 1 0; }
}

/* ---------- 2.2: SubNav — 알약 모양 하위 메뉴(넘치면 가로로 넘김) ---------- */
.sh-subnav { display: flex; gap: var(--space-2); overflow-x: auto; padding: 2px; }
.sh-subnav a, .sh-subnav button { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--bg-subtle); color: var(--fg-muted); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.sh-subnav .sh-i { width: 14px; height: 14px; }
.sh-subnav [aria-current="page"] { background: var(--fg); border-color: var(--fg); color: var(--bg-subtle); }
.sh-subnav a:focus-visible, .sh-subnav button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus); }

/* ---------- 2.2: 앱 틀이 자기 폭에 반응 + 좁으면 사이드바를 서랍으로 ---------- */
.sh-app { container: sh-app / inline-size; }
.sh-app > .sh-app-main { grid-column: -2 / -1; }
.sh-app-top { grid-template-columns: minmax(0, 1fr); }
.sh-app-top > .sh-sidebar { display: none; }
.sh-side-back { position: fixed; inset: 0; z-index: 79; background: var(--fg); opacity: .4; }
.sh-side-back[hidden] { display: none; }
.sh-sidebar.is-open { display: flex !important; position: fixed; top: 0; bottom: 0; left: 0; z-index: 80; height: auto; width: min(300px, 86vw); overflow-y: auto; box-shadow: var(--shadow-md); animation: sh-side-in .2s ease-out; }
@keyframes sh-side-in { from { transform: translateX(-100%); } to { transform: none; } }
@container sh-app (max-width: 900px) {
  .sh-app .sh-sidebar:not(.is-open) { display: none; }
  .sh-app .sh-header-menu { display: inline-flex; }
  .sh-app-top .sh-header-nav, .sh-app-top .sh-subnav-wide { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sh-sidebar.is-open { animation: none; } }
.sh-input-group.is-invalid .sh-input { border-color: var(--danger); }

/* ===== 55-fab.css ===== */
/* ---------- Floating action button ---------- */
/* .sh-fab 동그란 버튼 · .sh-fab-ext 글자 포함 · .sh-fab-sm 작게 · .sh-fab-soft 옅은 면 · sh-c-* 범주색
   .sh-fab-dock 화면 오른쪽 아래에 고정(.is-left 왼쪽, .is-contained 부모 상자 안) · .sh-fab-dial 펼침 메뉴 */
.sh-fab { --fab: 56px; --fab-fill: var(--primary); --fab-ink: var(--on-primary); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: none; width: var(--fab); height: var(--fab); padding: 0; border: 0; border-radius: var(--radius-full); background: var(--fab-fill); color: var(--fab-ink); font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.01em; cursor: pointer;
  box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--fab-fill) 70%, transparent), var(--shadow-md); transition: transform .15s, box-shadow .15s, opacity .2s, visibility .2s; }
.sh-fab[class*="sh-c-"] { --fab-fill: var(--ci); --fab-ink: var(--on-color); }
.sh-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -10px color-mix(in srgb, var(--fab-fill) 75%, transparent), var(--shadow-md); }
.sh-fab:active { transform: translateY(0) scale(.97); }
.sh-fab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus), var(--shadow-md); }
.sh-fab .sh-i { width: 22px; height: 22px; transition: transform .2s; }
.sh-fab-ext { width: auto; padding: 0 22px 0 18px; }
.sh-fab-sm { --fab: 40px; font-size: 13px; }
.sh-fab-sm .sh-i { width: 18px; height: 18px; }
.sh-fab-sm.sh-fab-ext { padding: 0 16px 0 12px; gap: 8px; }
.sh-fab-soft { --fab-fill: var(--bg-subtle); --fab-ink: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-md); }
.sh-fab-soft:hover { box-shadow: inset 0 0 0 1px var(--line-strong), 0 12px 24px -12px color-mix(in srgb, var(--fg) 35%, transparent), var(--shadow-md); }
.sh-fab-soft:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus), var(--shadow-md); }
.sh-fab:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* 숫자 꼬리표(새 알림·대기 건수) */
.sh-fab-count { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-full); background: var(--danger); color: var(--on-danger); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 0 0 2px var(--bg); font-variant-numeric: tabular-nums; }

/* 놓는 자리 */
.sh-fab-dock { position: fixed; right: max(24px, env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.sh-fab-dock > * { pointer-events: auto; }
.sh-fab-dock.is-left { right: auto; left: max(24px, env(safe-area-inset-left, 0px)); align-items: flex-start; }
.sh-fab-dock.is-contained { position: absolute; right: 16px; bottom: 16px; z-index: 5; }
.sh-fab-dock.is-contained.is-left { right: auto; left: 16px; }

/* 맨 위로: 내려가기 전에는 숨김 */
.sh-fab[data-fab-top]:not(.is-show) { opacity: 0; visibility: hidden; transform: translateY(10px) scale(.9); pointer-events: none; }

/* 펼침 메뉴 */
.sh-fab-dial { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.is-left .sh-fab-dial, .sh-fab-dial.is-left { align-items: flex-start; }
.sh-fab-dial.is-open > .sh-fab .sh-i { transform: rotate(45deg); }
.sh-fab-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-right: 8px; }
.is-left .sh-fab-actions, .sh-fab-dial.is-left .sh-fab-actions { align-items: flex-start; margin: 0 0 0 8px; }
.sh-fab-actions[hidden] { display: none; }
.sh-fab-action { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; font: inherit; color: var(--fg); cursor: pointer; animation: sh-fab-pop .18s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k, 0) * 35ms); }
.is-left .sh-fab-action, .sh-fab-dial.is-left .sh-fab-action { flex-direction: row-reverse; }
.sh-fab-label { padding: 6px 12px; border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); font-size: 13px; font-weight: 600; white-space: nowrap; }
.sh-fab-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--bg-subtle); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-md); transition: transform .15s; }
.sh-fab-ic .sh-i { width: 18px; height: 18px; }
.sh-fab-action[class*="sh-c-"] .sh-fab-ic { background: var(--ci); color: var(--on-color); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--ci) 70%, transparent), var(--shadow-sm); }
.sh-fab-action:hover .sh-fab-ic { transform: scale(1.08); }
.sh-fab-action:focus-visible { outline: none; }
.sh-fab-action:focus-visible .sh-fab-ic { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }
.sh-fab-action:focus-visible .sh-fab-label { box-shadow: inset 0 0 0 2px var(--focus); }
@keyframes sh-fab-pop { from { opacity: 0; transform: translateY(10px) scale(.92); } }

:root[data-shadow="flat"] .sh-fab, :root[data-shadow="flat"] .sh-fab-ic, :root[data-shadow="flat"] .sh-fab-label { box-shadow: inset 0 0 0 1px var(--line-strong); }
@media print { .sh-fab, .sh-fab-dock { display: none; } }
@media (prefers-reduced-motion: reduce) { .sh-fab, .sh-fab .sh-i, .sh-fab-ic { transition: none; } .sh-fab:hover, .sh-fab:active { transform: none; } .sh-fab-action { animation: none; } }

/* ===== 60-input-media.css ===== */

/* ================= 색 보호: 부모의 "span { color }" 규칙이 색 칸 글자를 덮지 않게 ================= */
.sh-ext.sh-ext { color: var(--on-color); }
.sh-dropzone .sh-dropzone-ic { color: var(--on-color); font-size: inherit; }
.sh-icon-tile.sh-icon-tile { color: var(--ci); }
.sh-icon-tile.is-solid.is-solid { color: var(--on-color); }
.sh-badge.sh-badge { color: var(--fg); font-size: 12px; }
.sh-badge-solid.sh-badge-solid { color: var(--on-color); }
.sh-avatar.sh-avatar { color: var(--fg); }
.sh-count.sh-count { color: var(--fg); }
/* 2.2: 진한 숫자 꼬리표(.sh-count-solid) — 오류·알림 건수처럼 눈에 띄어야 할 때. 채운 면 위 글자는 on-color */
.sh-count.sh-count.sh-count-solid { background: var(--ci, var(--primary)); color: var(--on-color); font-weight: 700; }
.sh-grid-pbtn .sh-count.sh-count { background: var(--primary); color: var(--on-primary); }
.sh-subnav .sh-count.sh-count:not(.sh-count-solid) { background: var(--bg-muted); color: var(--fg); }
.sh-subnav [aria-current="page"] .sh-count.sh-count:not(.sh-count-solid) { background: var(--bg-subtle); color: var(--fg); }

/* ================= OTP (입체·세련) ================= */
.sh-otp-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 36px 28px 28px; text-align: center; border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg) 100%);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 24px 48px -24px rgba(13, 116, 206, .28), 0 8px 16px -8px rgba(15, 35, 64, .10); }
.sh-otp-box::before { content: ""; position: absolute; inset: 0 0 auto; height: 120px; background: radial-gradient(60% 100% at 50% 0%, var(--cs, var(--accent-soft)) 0%, transparent 100%); pointer-events: none; }
.sh-otp-box > * { position: relative; }
.sh-otp-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: var(--on-color);
  background: linear-gradient(145deg, var(--sky) 0%, var(--ci, var(--primary)) 70%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 -2px 0 rgba(0, 0, 0, .12) inset, 0 10px 24px -8px var(--ci, var(--primary)), 0 0 0 6px var(--cs, var(--accent-soft)); }
.sh-otp-ic .sh-i { width: 26px; height: 26px; stroke-width: 1.7; }
.sh-otp-box h4 { margin: 4px 0 0; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.02em; }
.sh-otp-box p { margin: 0; font-size: 14px; line-height: 21px; color: var(--fg-muted); }
.sh-otp-box p b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.sh-otp { display: flex; gap: 10px; align-items: center; }
.sh-otp input { --lift: 0px; width: 52px; height: 64px; padding: 0; text-align: center; font-family: var(--font-sans); font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: var(--fg); caret-color: var(--primary); border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 -3px 0 rgba(15, 35, 64, .05) inset, 0 1px 2px rgba(15, 35, 64, .06), 0 6px 14px -6px rgba(15, 35, 64, .16);
  transform: translateY(var(--lift)); transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s, border-color .18s; }
.sh-otp input::placeholder { color: transparent; }
.sh-otp input:focus { outline: none; --lift: -3px; border-color: var(--primary);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 0 0 4px var(--accent-soft), 0 14px 24px -10px rgba(13, 116, 206, .45); }
.sh-otp input.is-filled { border-color: var(--line-strong); animation: sh-pop .22s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes sh-pop { 0% { transform: translateY(var(--lift)) scale(.86); } 100% { transform: translateY(var(--lift)) scale(1); } }
.sh-otp-sep { width: 12px; height: 3px; border-radius: 2px; background: var(--line-strong); opacity: .6; }
.sh-otp.is-ok input { border-color: var(--teal-ink); color: var(--fg); background: linear-gradient(180deg, var(--teal-soft), var(--bg-subtle)); box-shadow: 0 0 0 3px var(--teal-soft), 0 10px 20px -10px var(--teal); animation: sh-wave .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes sh-wave { 40% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
.sh-otp.is-error input { border-color: var(--danger); background: linear-gradient(180deg, var(--danger-soft), var(--bg-subtle)); box-shadow: 0 0 0 3px var(--danger-soft); }
.sh-otp.is-error { animation: sh-shake .4s cubic-bezier(.36, .07, .19, .97); }
.sh-otp-msg { font-size: 13px; font-weight: 500; min-height: 20px; }
.sh-otp-time { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 8px; }
.sh-otp-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--fg-muted); }
.sh-otp-meta [data-otp-timer] { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--fg); }
.sh-otp-meta [data-otp-timer].is-low { color: var(--danger); }
.sh-otp-bar { height: 4px; border-radius: 2px; background: var(--bg-muted); overflow: hidden; }
.sh-otp-bar span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sky), var(--primary)); transition: width 1s linear; }
.sh-otp-bar.is-low span { background: linear-gradient(90deg, var(--orange), var(--danger)); }
.sh-otp-resend { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.sh-otp-resend:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus); border-radius: 2px; }
:root[data-theme="dark"] .sh-otp input, :root[data-theme="dark"] .sh-otp-box { box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 24px -12px rgba(0, 0, 0, .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sh-otp input, :root:not([data-theme="light"]) .sh-otp-box { box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 24px -12px rgba(0, 0, 0, .6); } }
@media (max-width: 440px) { .sh-otp input { width: 42px; height: 54px; font-size: 22px; border-radius: 12px; } .sh-otp { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .sh-otp input, .sh-otp.is-ok input, .sh-otp.is-error, .sh-otp input.is-filled { animation: none; transition: none; } }

/* ================= Input 확장 ================= */
.sh-input-sm { height: 32px; font-size: 13px; padding: 0 10px; }
.sh-input-lg { height: 48px; font-size: 16px; padding: 0 16px; border-radius: var(--radius-lg); }
.sh-input:disabled, .sh-select:disabled, .sh-textarea:disabled { background: var(--bg-muted); color: var(--fg-muted); cursor: not-allowed; opacity: .75; }
.sh-input[readonly]:not([data-datepicker]):not([data-daterange]) { background: var(--bg-muted); border-style: dashed; }
.sh-input-ok { border-color: var(--teal-ink); }
.sh-hint-ok { color: var(--teal-ink); }
.sh-affix { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--bg-subtle); overflow: hidden; }
.sh-affix:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.sh-affix .sh-input { border: 0; border-radius: 0; box-shadow: none !important; min-width: 0; flex: 1; }
.sh-affix > span { display: inline-flex; align-items: center; padding: 0 12px; background: var(--bg-muted); color: var(--fg-muted); font-size: 14px; white-space: nowrap; }
.sh-affix > span:first-child { border-right: 1px solid var(--line); } .sh-affix > span:last-child { border-left: 1px solid var(--line); }
.sh-input-wrap .sh-input-end { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 2px; }
.sh-input-wrap .sh-input.has-end { padding-right: 44px; }
.sh-input-wrap.no-ic .sh-input { padding-left: 12px; }
.sh-mini-btn { width: 28px; height: 28px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg-muted); display: grid; place-items: center; cursor: pointer; }
.sh-mini-btn:hover { background: var(--bg-muted); color: var(--fg); }
.sh-mini-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus); }
.sh-input-clear[hidden] { display: none; }
.sh-pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sh-pw-meter i { height: 4px; border-radius: 2px; background: var(--bg-muted); transition: background-color .2s; }
.sh-pw-meter[data-level="1"] i:nth-child(-n+1) { background: var(--pink); }
.sh-pw-meter[data-level="2"] i:nth-child(-n+2) { background: var(--orange); }
.sh-pw-meter[data-level="3"] i:nth-child(-n+3) { background: var(--sky); }
.sh-pw-meter[data-level="4"] i { background: var(--teal); }
.sh-pw-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--fg-muted); }
.sh-pw-rules li { display: inline-flex; align-items: center; gap: 4px; }
.sh-pw-rules li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-strong); box-sizing: border-box; }
.sh-pw-rules li.is-ok { color: var(--fg); }
.sh-pw-rules li.is-ok::before { border-color: var(--teal-ink); background: var(--teal-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.sh-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--bg-subtle); overflow: hidden; }
.sh-stepper:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.sh-stepper button { width: 40px; border: 0; background: var(--bg-muted); color: var(--fg); font-size: 18px; cursor: pointer; }
.sh-stepper button:hover { background: var(--accent-soft); color: var(--accent); }
.sh-stepper button:disabled { opacity: .4; cursor: not-allowed; }
.sh-stepper input { width: 72px; border: 0; text-align: center; font: inherit; font-size: 15px; font-weight: 600; color: var(--fg); background: transparent; font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; }
.sh-stepper input::-webkit-inner-spin-button, .sh-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sh-money-kr { font-size: 13px; color: var(--fg); padding: 8px 12px; border-radius: var(--radius-md); background: var(--accent-soft); min-height: 20px; }
.sh-money-kr:empty::before { content: "금액을 입력하면 한글 금액이 나옵니다"; color: var(--fg-muted); }
.sh-money-input { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.sh-taginput { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--bg-subtle); box-sizing: border-box; cursor: text; }
.sh-taginput:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.sh-taginput input { flex: 1; min-width: 120px; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--fg); height: 28px; }
.sh-taginput .sh-tag { height: 26px; }
.sh-combo { position: relative; }
.sh-combo-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; max-height: 260px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.sh-combo-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); cursor: pointer; font-size: 14px; }
.sh-combo-list li[aria-selected="true"], .sh-combo-list li:hover { background: var(--bg-muted); }
.sh-combo-list li span:last-child { margin-left: auto; font-size: 12px; color: var(--fg-muted); }
.sh-combo-list mark { background: var(--warning-soft); color: inherit; border-radius: 2px; }
.sh-combo-empty { color: var(--fg-muted); cursor: default !important; justify-content: center; }
.sh-slider { display: flex; flex-direction: column; gap: 8px; }
.sh-slider-row { display: flex; justify-content: space-between; align-items: baseline; }
.sh-slider-row output { font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 10px; border-radius: var(--radius-full); background: var(--cs, var(--accent-soft)); font-size: 13px; }
.sh-range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; --val: 50%; cursor: pointer; }
.sh-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ci, var(--primary)) var(--val), var(--bg-muted) var(--val)); }
.sh-range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ci, var(--primary)) var(--val), var(--bg-muted) var(--val)); }
.sh-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--bg-subtle); border: 2px solid var(--ci, var(--primary)); box-shadow: 0 2px 6px rgba(15, 35, 64, .25); }
.sh-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--bg-subtle); border: 2px solid var(--ci, var(--primary)); box-shadow: 0 2px 6px rgba(15, 35, 64, .25); }
.sh-range:focus-visible { outline: none; }
.sh-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-soft), 0 2px 6px rgba(15, 35, 64, .25); }
.sh-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--fg-muted); padding: 0 4px; }
.sh-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-md); background: var(--bg-muted); }
.sh-seg label { position: relative; }
.sh-seg input { position: absolute; opacity: 0; pointer-events: none; }
.sh-seg span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--fg-muted); cursor: pointer; white-space: nowrap; }
.sh-seg input:checked + span { background: var(--bg-subtle); color: var(--fg); box-shadow: var(--shadow-sm); }
.sh-seg input:focus-visible + span { box-shadow: 0 0 0 2px var(--focus); }
.sh-in-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px 24px; align-items: start; }
.sh-in-title { grid-column: 1 / -1; margin: 8px 0 -6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--accent); }

/* ================= Code block 테마·옵션 ================= */
.sh-code { --cb-bg: var(--bg-subtle); --cb-bar: var(--bg-muted); --cb-fg: var(--fg); --cb-ln: var(--fg-muted); --cb-line: var(--line); --cb-hl: var(--accent-soft);
  --cb-k: var(--violet-ink); --cb-s: var(--teal-ink); --cb-n: var(--orange-ink); --cb-f: var(--accent); --cb-c: var(--fg-muted);
  background: var(--cb-bg); color: var(--cb-fg); border-color: var(--cb-line); }
.sh-code figcaption { background: var(--cb-bar); border-bottom-color: var(--cb-line); color: var(--cb-fg); flex-wrap: wrap; }
.sh-code .ln::before { color: var(--cb-ln); border-right-color: var(--cb-line); }
.sh-code .tk-k { color: var(--cb-k); } .sh-code .tk-s { color: var(--cb-s); } .sh-code .tk-n { color: var(--cb-n); } .sh-code .tk-f { color: var(--cb-f); } .sh-code .tk-c { color: var(--cb-c); }
.sh-code .ln.is-hl { background: var(--cb-hl); box-shadow: inset 3px 0 0 var(--cb-f); }
.sh-code-name { color: var(--cb-ln); }
.sh-code-tools { display: flex; align-items: center; gap: 2px; }
.sh-code-tools .sh-mini-btn { color: var(--cb-ln); width: 30px; height: 28px; }
.sh-code-tools .sh-mini-btn:hover { background: rgba(127, 127, 127, .16); color: var(--cb-fg); }
.sh-code-tools .sh-mini-btn[aria-pressed="true"] { background: rgba(127, 127, 127, .22); color: var(--cb-fg); }
.sh-code-tools select { height: 28px; border: 1px solid var(--cb-line); border-radius: var(--radius-sm); background: var(--cb-bg); color: var(--cb-fg); font: inherit; font-size: 12px; padding: 0 6px; }
.sh-code [data-copy] { color: var(--cb-fg); }
.sh-code .sh-btn-ghost:hover { background: rgba(127, 127, 127, .16); }
.sh-code.is-wrap code { min-width: 0; white-space: pre-wrap; word-break: break-all; }
.sh-code.is-wrap .ln { padding-left: 52px; text-indent: -52px; }
.sh-code.no-ln .ln::before { display: none; }
.sh-code.no-ln .ln { padding-left: 16px; text-indent: 0; }
.sh-code.is-folded pre { max-height: 168px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.sh-code-more { display: none; width: 100%; height: 34px; border: 0; border-top: 1px solid var(--cb-line); background: var(--cb-bar); color: var(--cb-fg); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.sh-code.is-long .sh-code-more { display: block; }
.sh-code-more:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.sh-code pre.is-scroll-y { max-height: 320px; overflow: auto; }
.sh-code[data-size="12"] pre, .sh-code[data-size="12"] code { font-size: 12px; line-height: 19px; }
.sh-code[data-size="14"] pre, .sh-code[data-size="14"] code { font-size: 14px; line-height: 22px; }
.sh-code[data-size="16"] pre, .sh-code[data-size="16"] code { font-size: 16px; line-height: 25px; }
/* 편집기 테마: 바탕·문법 색은 원래 편집기 색을 따른다. 줄 번호·머리줄 글자(--cb-ln)는 바탕·머리줄 모두 4.5:1 이상으로 맞췄다(contrast.js가 검사) */
.sh-code[data-theme-code="dark-plus"] { --cb-bg: #1e1e1e; --cb-bar: #252526; --cb-fg: #d4d4d4; --cb-ln: #8d8d8d; --cb-line: #333333; --cb-hl: #2a2d2e; --cb-k: #569cd6; --cb-s: #ce9178; --cb-n: #b5cea8; --cb-f: #dcdcaa; --cb-c: #6a9955; color-scheme: dark; }
.sh-code[data-theme-code="light-plus"] { --cb-bg: #ffffff; --cb-bar: #f3f3f3; --cb-fg: #1f1f1f; --cb-ln: #237691; --cb-line: #e5e5e5; --cb-hl: #e8f2ff; --cb-k: #0000ff; --cb-s: #a31515; --cb-n: #098658; --cb-f: #795e26; --cb-c: #008000; color-scheme: light; }
.sh-code[data-theme-code="one-dark"] { --cb-bg: #282c34; --cb-bar: #21252b; --cb-fg: #abb2bf; --cb-ln: #8d95a6; --cb-line: #3a3f4b; --cb-hl: #2c313c; --cb-k: #c678dd; --cb-s: #98c379; --cb-n: #d19a66; --cb-f: #61afef; --cb-c: #7f848e; color-scheme: dark; }
.sh-code[data-theme-code="monokai"] { --cb-bg: #272822; --cb-bar: #1e1f1c; --cb-fg: #f8f8f2; --cb-ln: #90908a; --cb-line: #3e3d32; --cb-hl: #3e3d32; --cb-k: #f92672; --cb-s: #e6db74; --cb-n: #ae81ff; --cb-f: #a6e22e; --cb-c: #88846f; color-scheme: dark; }
.sh-code[data-theme-code="dracula"] { --cb-bg: #282a36; --cb-bar: #21222c; --cb-fg: #f8f8f2; --cb-ln: #8692b7; --cb-line: #3b3d4d; --cb-hl: #44475a; --cb-k: #ff79c6; --cb-s: #f1fa8c; --cb-n: #bd93f9; --cb-f: #50fa7b; --cb-c: #6272a4; color-scheme: dark; }
.sh-code[data-theme-code="github"] { --cb-bg: #ffffff; --cb-bar: #f6f8fa; --cb-fg: #24292f; --cb-ln: #697079; --cb-line: #d0d7de; --cb-hl: #fff8c5; --cb-k: #cf222e; --cb-s: #0a3069; --cb-n: #0550ae; --cb-f: #8250df; --cb-c: #6e7781; color-scheme: light; }
.sh-code[data-theme-code="solarized"] { --cb-bg: #fdf6e3; --cb-bar: #eee8d5; --cb-fg: #586e75; --cb-ln: #526870; --cb-line: #e4dcc4; --cb-hl: #f3edd9; --cb-k: #859900; --cb-s: #2aa198; --cb-n: #d33682; --cb-f: #268bd2; --cb-c: #93a1a1; color-scheme: light; }
.sh-code-themes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }

/* ================= Table 정렬·넘침 ================= */
.sh-table .al-l { text-align: left; } .sh-table .al-c { text-align: center; } .sh-table .al-r { text-align: right; }
.sh-table th { position: relative; }
.sh-th-in { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.sh-table .al-c .sh-th-in { justify-content: center; } .sh-table .al-r .sh-th-in { flex-direction: row-reverse; }
th.al-c .sh-th-in, th.al-r .sh-th-in { width: 100%; }
.sh-th-menu-btn { opacity: 0; width: 22px; height: 22px; flex: none; border: 0; border-radius: 4px; background: transparent; color: var(--fg-muted); display: inline-grid; place-items: center; cursor: pointer; }
th:hover .sh-th-menu-btn, .sh-th-menu-btn:focus-visible, .sh-th-menu-btn[aria-expanded="true"] { opacity: 1; }
.sh-th-menu-btn:hover { background: var(--bg-subtle); color: var(--fg); }
.sh-th-menu-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus); }
.sh-col-resize { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 2; touch-action: none; }
.sh-col-resize::after { content: ""; position: absolute; top: 25%; bottom: 25%; left: 3px; width: 2px; border-radius: 1px; background: var(--line-strong); opacity: 0; }
th:hover .sh-col-resize::after, .sh-col-resize.is-drag::after { opacity: 1; background: var(--primary); }
.sh-th-pop { position: fixed; z-index: 70; min-width: 168px; padding: 6px; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.sh-th-pop b { padding: 6px 8px 4px; font-size: 11px; letter-spacing: .08em; color: var(--fg-muted); font-weight: 600; }
.sh-th-pop button { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border: 0; border-radius: var(--radius-md); background: transparent; font: inherit; color: var(--fg); cursor: pointer; text-align: left; }
.sh-th-pop button:hover, .sh-th-pop button:focus-visible { background: var(--bg-muted); outline: none; }
.sh-th-pop button[aria-pressed="true"] { color: var(--accent); font-weight: 600; }
.sh-th-pop button[aria-pressed="true"]::after { content: "✓"; margin-left: auto; }
.sh-al-ic { width: 16px; height: 12px; display: inline-flex; flex-direction: column; justify-content: space-between; }
.sh-al-ic i { height: 2px; border-radius: 1px; background: currentColor; }
.sh-al-ic i:nth-child(2) { width: 60%; } .sh-al-ic.c { align-items: center; } .sh-al-ic.r { align-items: flex-end; } .sh-al-ic i:nth-child(1), .sh-al-ic i:nth-child(3) { width: 100%; }
/* 넘침 방식: wrapper의 data-overflow */
.sh-table-wrap[data-overflow] .sh-table { table-layout: fixed; }
.sh-table-wrap[data-overflow="ellipsis"] td, .sh-table-wrap[data-overflow="expand"] td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-table-wrap[data-overflow="wrap"] td { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; vertical-align: top; }
.sh-table-wrap[data-overflow="scroll"] .sh-table { table-layout: auto; width: max-content; min-width: 100%; }
.sh-table-wrap[data-overflow="scroll"] td { white-space: nowrap; }
.sh-table-wrap[data-overflow="expand"] td.is-trunc { cursor: zoom-in; }
.sh-table-wrap[data-overflow="expand"] td.is-open { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; background: var(--accent-soft); cursor: zoom-out; }
.sh-table-wrap[data-overflow="ellipsis"] td.is-trunc { cursor: help; }
.sh-table td .sh-badge, .sh-table td .sh-cell-user { vertical-align: middle; }
.sh-ftip { position: fixed; z-index: 80; max-width: min(420px, calc(100vw - 32px)); padding: 8px 12px; border-radius: var(--radius-md); background: var(--fg); color: var(--bg); font-size: 13px; line-height: 19px; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; box-shadow: var(--shadow-md); pointer-events: none; animation: sh-in .12s ease-out; }
.sh-tbl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: 13px; color: var(--fg-muted); }

/* ================= Image: 썸네일·라이트박스·슬라이더 ================= */
.sh-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.sh-thumb { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--fg); text-align: left; cursor: zoom-in; }
.sh-thumb-img { position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--bg-muted); }
.sh-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.sh-thumb:hover img { transform: scale(1.04); }
.sh-thumb-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(11, 18, 32, .45)); opacity: 0; transition: opacity .2s; }
.sh-thumb:hover .sh-thumb-img::after { opacity: 1; }
.sh-thumb-zoom { position: absolute; right: 8px; bottom: 8px; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: #0f2340; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.sh-thumb:hover .sh-thumb-zoom, .sh-thumb:focus-visible .sh-thumb-zoom { opacity: 1; transform: none; }
.sh-thumb:focus-visible { outline: none; } .sh-thumb:focus-visible .sh-thumb-img { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }
.sh-thumb b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-thumb small { font-size: 12px; color: var(--fg-muted); margin-top: -4px; }
.sh-img-frame { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-muted); }
.sh-img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .4s; }
.sh-img-frame.is-loaded img { opacity: 1; }
.sh-img-frame:not(.is-loaded):not(.is-error)::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg-muted) 0%, var(--bg) 50%, var(--bg-muted) 100%); background-size: 200% 100%; animation: sh-shimmer 1.4s linear infinite; }
.sh-img-frame.is-error { display: grid; place-items: center; color: var(--fg-muted); font-size: 13px; }
.sh-img-frame.is-error img { display: none; }
.sh-img-frame.is-error::after { content: "이미지를 불러오지 못했습니다"; }
/* 라이트박스 */
.sh-lb { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto 1fr auto; background: rgba(8, 13, 24, .94); color: #eaf2fb; animation: sh-in .18s ease-out; }
.sh-lb[hidden] { display: none; }
.sh-lb-top { display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
.sh-lb-title { margin-right: auto; display: flex; flex-direction: column; min-width: 0; }
.sh-lb-title b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-lb-title span { font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
.sh-lb-btn { width: 40px; height: 40px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .08); color: inherit; display: grid; place-items: center; cursor: pointer; text-decoration: none; }
.sh-lb-btn:hover { background: rgba(255, 255, 255, .18); }
.sh-lb-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #70b8ff; }
.sh-lb-btn:disabled { opacity: .35; cursor: default; }
.sh-lb-zoom { min-width: 54px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; opacity: .8; }
.sh-lb-stage { position: relative; overflow: hidden; display: grid; place-items: center; touch-action: none; cursor: grab; }
.sh-lb-stage.is-drag { cursor: grabbing; }
.sh-lb-stage img { max-width: calc(100% - 120px); max-height: calc(100% - 24px); border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); user-select: none; -webkit-user-drag: none; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.sh-lb-stage.is-drag img { transition: none; }
.sh-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; }
.sh-lb-prev { left: 16px; } .sh-lb-next { right: 16px; }
.sh-lb-strip { display: flex; justify-content: center; gap: 8px; padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)); overflow-x: auto; }
.sh-lb-strip button { flex: none; width: 64px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #000; opacity: .5; cursor: pointer; }
.sh-lb-strip button[aria-current="true"] { border-color: #70b8ff; opacity: 1; }
.sh-lb-strip button:hover { opacity: .85; }
.sh-lb-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .sh-lb-stage img { max-width: 100%; } .sh-lb-nav { display: none; } .sh-lb-hide-m { display: none; } }
/* 슬라이더(캐러셀) */
.sh-carousel { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #0b1220; }
.sh-car-track { display: flex; transition: transform .5s cubic-bezier(.2, .8, .2, 1); touch-action: pan-y; }
.sh-carousel.is-drag .sh-car-track { transition: none; }
.sh-car-slide { position: relative; flex: 0 0 100%; aspect-ratio: 21 / 9; max-width: 100%; }
.sh-car-slide img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.sh-car-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 28px 52px; background: linear-gradient(transparent, rgba(8, 13, 24, .78)); color: #fff; display: flex; flex-direction: column; gap: 4px; }
.sh-car-cap span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; opacity: .8; }
.sh-car-cap b { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.02em; }
.sh-car-cap p { margin: 0; font-size: 14px; opacity: .85; max-width: 52ch; }
.sh-car-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #0f2340; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); opacity: 0; transition: opacity .2s; }
.sh-carousel:hover .sh-car-arrow, .sh-car-arrow:focus-visible { opacity: 1; }
.sh-car-arrow:focus-visible { outline: none; box-shadow: 0 0 0 3px #70b8ff; }
.sh-car-prev { left: 16px; } .sh-car-next { right: 16px; }
.sh-car-bar { position: absolute; left: 28px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; color: #fff; }
.sh-car-dots { display: flex; gap: 6px; margin-right: auto; }
.sh-car-dots button { position: relative; width: 28px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .35); cursor: pointer; overflow: hidden; }
.sh-car-dots button::after { content: ""; position: absolute; inset: 0; width: 0; background: #fff; }
.sh-car-dots button[aria-current="true"]::after { width: 100%; }
.sh-carousel.is-playing .sh-car-dots button[aria-current="true"]::after { width: 0; animation: sh-fill var(--dur, 5s) linear forwards; }
@keyframes sh-fill { to { width: 100%; } }
.sh-car-dots button:focus-visible { outline: none; box-shadow: 0 0 0 2px #70b8ff; }
.sh-car-count { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .85; }
.sh-car-play { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; display: grid; place-items: center; cursor: pointer; }
.sh-car-play:hover { background: rgba(255, 255, 255, .3); }
.sh-car-play:focus-visible { outline: none; box-shadow: 0 0 0 2px #70b8ff; }
@media (max-width: 640px) { .sh-car-slide { aspect-ratio: 4 / 3; } .sh-car-cap b { font-size: 18px; line-height: 24px; } .sh-car-cap p { display: none; } .sh-car-arrow { display: none; } }
/* 카드 슬라이더 (여러 장) */
.sh-cardslider { display: flex; flex-direction: column; gap: 12px; }
.sh-cs-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sh-cs-head h4 { margin: 0; font-size: 16px; font-weight: 700; }
.sh-cs-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, calc((100% - 32px) / 3)); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px; }
.sh-cs-item { scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-subtle); }
.sh-cs-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.sh-cs-item div { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.sh-cs-item b { font-size: 15px; font-weight: 600; }
.sh-cs-item span { font-size: 13px; color: var(--fg-muted); }
@media (prefers-reduced-motion: reduce) { .sh-car-track, .sh-lb-stage img, .sh-thumb img { transition: none; } .sh-cs-track { scroll-behavior: auto; } }
/* 드롭존 이미지 썸네일 */
.sh-file img.sh-ext { object-fit: cover; padding: 0; cursor: zoom-in; }
.sh-grid-ovf { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-muted); white-space: nowrap; }
.sh-col-menu-h { padding: 4px 8px; font-size: 11px; letter-spacing: .08em; color: var(--fg-muted); font-weight: 600; }
.sh-col-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sh-col-al { display: inline-flex; gap: 0; }
.sh-col-al .sh-mini-btn { width: 26px; height: 26px; }
.sh-col-al .sh-mini-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.sh-grid-cols .sh-menu { min-width: 240px; }
.sh-grid .sh-table th.al-r .sh-grid-sort { flex-direction: row-reverse; }

/* ---------- 2.2: 기간 선택 — 잘리지 않게 화면 기준으로 띄우고, 좁으면 아래에서 올라오는 시트(한 달씩) ---------- */
.sh-rp { z-index: 90; }
.sh-rp.is-sheet { border-radius: 18px 18px 0 0; border-bottom: 0; max-height: 86vh; overflow-y: auto; box-shadow: 0 -16px 40px -12px color-mix(in srgb, var(--fg) 40%, transparent); animation: sh-sheet-in .18s ease-out; }
.sh-rp.is-sheet .sh-rp-body { grid-template-columns: minmax(0, 1fr); }
.sh-rp.is-sheet .sh-rp-presets { flex-direction: row; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; }
.sh-rp.is-sheet .sh-rp-preset { flex: none; white-space: nowrap; border: 1px solid var(--line); border-radius: var(--radius-full); }
.sh-rp.is-sheet .sh-rp-months { grid-template-columns: minmax(0, 1fr); }
.sh-rp.is-sheet .sh-rp-months > :nth-child(2) { display: none; }
.sh-rp.is-sheet .sh-dp-day { height: 40px; font-size: 14px; }
.sh-rp.is-sheet .sh-rp-foot { position: sticky; bottom: 0; flex-wrap: wrap; background: var(--bg-subtle); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
@keyframes sh-sheet-in { from { transform: translateY(30%); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sh-rp.is-sheet { animation: none; } }

/* ===== 70-scroll-loader.css ===== */

/* ================= 스크롤바 ================= */
:root { --sb-thumb: rgba(15, 35, 64, .22); --sb-thumb-hover: rgba(15, 35, 64, .42); --sb-thumb-active: var(--primary); --sb-track: transparent; --sb-size: 12px; }
:root[data-theme="dark"] { --sb-thumb: rgba(234, 242, 251, .2); --sb-thumb-hover: rgba(234, 242, 251, .38); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sb-thumb: rgba(234, 242, 251, .2); --sb-thumb-hover: rgba(234, 242, 251, .38); } }
/* 표준(Firefox, 최신 Chrome) */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); }
  .sh-scroll-auto { scrollbar-color: transparent transparent; }
  .sh-scroll-auto:hover, .sh-scroll-auto:focus-within { scrollbar-color: var(--sb-thumb) transparent; }
}
/* WebKit(Chrome, Edge, Safari): 투명 테두리로 떠 있는 둥근 손잡이 */
::-webkit-scrollbar { width: var(--sb-size); height: var(--sb-size); }
::-webkit-scrollbar-track { background: var(--sb-track); }
::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; min-height: 40px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--sb-thumb-hover); border-width: 2px; }
::-webkit-scrollbar-thumb:active { background-color: var(--sb-thumb-active); border-width: 2px; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* 변형: 얇게 · 마우스를 올릴 때만 · 숨김 · 색 · 어두운 면 */
.sh-scroll-thin { --sb-size: 8px; }
.sh-scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.sh-scroll-thin::-webkit-scrollbar-thumb { border-width: 2px; }
.sh-scroll-auto::-webkit-scrollbar-thumb { background-color: transparent; }
.sh-scroll-auto:hover::-webkit-scrollbar-thumb, .sh-scroll-auto:focus-within::-webkit-scrollbar-thumb { background-color: var(--sb-thumb); }
.sh-scroll-auto:hover::-webkit-scrollbar-thumb:hover { background-color: var(--sb-thumb-hover); }
.sh-scroll-none { scrollbar-width: none; } .sh-scroll-none::-webkit-scrollbar { display: none; }
.sh-scroll-accent { --sb-thumb: color-mix(in srgb, var(--ci, var(--primary)) 55%, transparent); --sb-thumb-hover: var(--ci, var(--primary)); }
.sh-scroll-dark, .sh-code[data-theme-code="dark-plus"], .sh-code[data-theme-code="one-dark"], .sh-code[data-theme-code="monokai"], .sh-code[data-theme-code="dracula"], .sh-lb, .sh-carousel { --sb-thumb: rgba(255, 255, 255, .22); --sb-thumb-hover: rgba(255, 255, 255, .45); }
/* 스크롤 그림자: 위·아래로 더 있을 때 가장자리가 흐려진다 */
.sh-scroll-fade { -webkit-mask-image: linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent); }
.sh-sb-demo { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.sh-sb-box { height: 180px; overflow: auto; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-subtle); font-size: 13px; line-height: 22px; color: var(--fg); }
.sh-sb-box.is-dark { background: #0b1220; color: #c9d6e6; border-color: #1c2a42; }
.sh-sb-box p { margin: 0 0 8px; }
.sh-sb-cap { display: flex; flex-direction: column; gap: 6px; }
.sh-sb-cap b { font-size: 13px; } .sh-sb-cap code { font-size: 11px; color: var(--fg-muted); }

/* ================= 로딩 인디케이터 ================= */
.sh-loaders { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.sh-ld-cell { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 72px; font-size: 12px; color: var(--fg-muted); }
/* 스피너: 그라데이션 링 */
.sh-spinner { --s: 28px; --w: 3px; width: var(--s); height: var(--s); border-radius: 50%; flex: none; display: inline-block; vertical-align: middle;
  background: conic-gradient(from 0deg, transparent 0 10%, var(--ci, var(--primary)) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--w)), #000 calc(100% - var(--w) + .5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--w)), #000 calc(100% - var(--w) + .5px));
  animation: sh-spin .8s linear infinite; }
.sh-spinner-sm { --s: 16px; --w: 2px; } .sh-spinner-lg { --s: 44px; --w: 4px; } .sh-spinner-xl { --s: 64px; --w: 5px; }
.sh-spinner.on-color { background: conic-gradient(from 0deg, transparent 0 10%, currentColor 100%); }
@keyframes sh-spin { to { transform: rotate(360deg); } }
/* 트랙이 있는 스피너 */
.sh-ring { --s: 40px; position: relative; width: var(--s); height: var(--s); }
.sh-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--cs, var(--accent-soft)); }
.sh-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--ci, var(--primary)); border-right-color: var(--ci, var(--primary)); animation: sh-spin .9s cubic-bezier(.5, .15, .5, .85) infinite; }
/* 점 */
.sh-dots { display: inline-flex; gap: 6px; align-items: center; height: 20px; }
.sh-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: sh-bounce 1.1s cubic-bezier(.4, 0, .2, 1) infinite; }
.sh-dots i:nth-child(2) { background: var(--teal); animation-delay: .15s; } .sh-dots i:nth-child(3) { background: var(--violet); animation-delay: .3s; }
@keyframes sh-bounce { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-7px); opacity: 1; } }
/* 타이핑(채팅·자동 저장) */
.sh-typing { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--bg-muted); }
.sh-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-muted); animation: sh-fade 1.2s infinite; }
.sh-typing i:nth-child(2) { animation-delay: .2s; } .sh-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes sh-fade { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
/* 로고 로더: 현 네 칸이 차례로 */
.sh-logo-ld { width: 44px; height: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sh-logo-ld i { border-radius: 4px; animation: sh-tile 1.4s cubic-bezier(.4, 0, .2, 1) infinite; }
.sh-logo-ld i:nth-child(1) { background: var(--primary); border-top-left-radius: 12px; }
.sh-logo-ld i:nth-child(2) { background: var(--sky); animation-delay: .15s; }
.sh-logo-ld i:nth-child(4) { background: var(--pink); animation-delay: .3s; border-bottom-right-radius: 12px; }
.sh-logo-ld i:nth-child(3) { background: var(--teal); animation-delay: .45s; }
@keyframes sh-tile { 0%, 100% { transform: scale(1); opacity: 1; } 40% { transform: scale(.55); opacity: .5; } }
/* 막대: 무한·정해진 값 */
.sh-ld-bar { position: relative; height: 4px; width: 100%; border-radius: 2px; background: var(--cs, var(--accent-soft)); overflow: hidden; }
.sh-ld-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--ci, var(--primary)), transparent); animation: sh-slide 1.3s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes sh-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.sh-ld-bar.is-value::after { animation: none; width: var(--v, 0%); background: var(--ci, var(--primary)); transition: width .3s; }
.sh-ld-stripe { height: 10px; border-radius: 5px; background: var(--bg-muted); overflow: hidden; }
.sh-ld-stripe span { display: block; height: 100%; width: var(--v, 60%); border-radius: inherit; background: repeating-linear-gradient(45deg, var(--ci, var(--primary)) 0 10px, color-mix(in srgb, var(--ci, var(--primary)) 75%, #fff) 10px 20px); background-size: 28px 28px; animation: sh-stripe .8s linear infinite; transition: width .3s; }
@keyframes sh-stripe { to { background-position: 28px 0; } }
/* 원형 진행률 */
.sh-cprog { --v: 0; --s: 64px; position: relative; width: var(--s); height: var(--s); display: grid; place-items: center; }
.sh-cprog svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.sh-cprog circle { fill: none; stroke-width: 6; }
.sh-cprog .tr { stroke: var(--cs, var(--accent-soft)); }
.sh-cprog .vl { stroke: var(--ci, var(--primary)); stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: calc(163.4 - 163.4 * var(--v) / 100); transition: stroke-dashoffset .3s; }
.sh-cprog b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
/* 버튼 로딩 */
.sh-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.sh-btn.is-loading > * { visibility: hidden; }
.sh-btn.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--ld-c, var(--on-primary)) var(--ld-c, var(--on-primary)) transparent transparent; animation: sh-spin .7s linear infinite; }
.sh-btn-secondary.is-loading, .sh-btn-ghost.is-loading, .sh-btn-soft.is-loading { --ld-c: var(--fg); }
.sh-btn-tone.is-loading { --ld-c: var(--on-color); } .sh-btn-danger.is-loading { --ld-c: var(--on-danger); }
.sh-btn .sh-spinner { --s: 16px; --w: 2px; }
/* 영역 덮개 */
.sh-ld-host { position: relative; }
.sh-ld-overlay { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: inherit; background: color-mix(in srgb, var(--bg-subtle) 72%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); font-size: 14px; font-weight: 500; color: var(--fg); animation: sh-in .2s ease-out; }
.sh-ld-overlay[hidden] { display: none; }
.sh-ld-overlay small { font-size: 12px; font-weight: 400; color: var(--fg-muted); }
/* 페이지 상단 진행 막대 */
.sh-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 3px; pointer-events: none; }
.sh-topbar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sky), var(--primary), var(--violet)); box-shadow: 0 0 10px var(--primary), 0 0 4px var(--primary); border-radius: 0 2px 2px 0; transition: width .25s ease, opacity .4s ease .2s; }
/* 전체 화면 로더 */
.sh-fullload { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: sh-in .2s ease-out; }
.sh-fullload b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.sh-fullload span { font-size: 13px; color: var(--fg-muted); margin-top: -10px; }
.sh-ld-row { display: flex; flex-direction: column; gap: 14px; }
.sh-ld-row > div { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 16px; font-size: 13px; color: var(--fg-muted); }
@media (max-width: 520px) { .sh-ld-row > div { grid-template-columns: 1fr; gap: 6px; } }
@media (prefers-reduced-motion: reduce) {
  .sh-spinner, .sh-ring::after, .sh-btn.is-loading::after { animation-duration: 2.4s; }
  .sh-dots i, .sh-typing i, .sh-logo-ld i, .sh-ld-stripe span { animation: none; }
  .sh-ld-bar::after { animation-duration: 3s; }
}

/* ===== 80-theme.css ===== */

/* ================= 색 테마: <html data-color="teal|violet|rose|sunset|graphite"> (없으면 ocean) ================= */
:root[data-color="teal"] { --primary: #007a69; --accent: #007a69; --accent-soft: #e0f8f3; --bg: #f6fbfa; --bg-muted: #e7f3f0; --line: #d9e9e5; --line-strong: #7a918c; --fg: #0f2a27; --fg-muted: #4d6661; --on-primary: #ffffff; }
:root[data-color="violet"] { --primary: #6550b9; --accent: #6550b9; --accent-soft: #f1edfe; --bg: #faf9fe; --bg-muted: #efecfa; --line: #e1ddf2; --line-strong: #8a84a5; --fg: #1e1838; --fg-muted: #5b5577; --on-primary: #ffffff; }
:root[data-color="rose"] { --primary: #c2298a; --accent: #c2298a; --accent-soft: #fde9f4; --bg: #fefafc; --bg-muted: #f8eaf2; --line: #efdbe6; --line-strong: #9c8193; --fg: #33122a; --fg-muted: #6e5064; --on-primary: #ffffff; }
:root[data-color="sunset"] { --primary: #cc4e00; --accent: #b84600; --accent-soft: #ffefd6; --bg: #fffbf7; --bg-muted: #f9eee4; --line: #eedfd2; --line-strong: #9b8676; --fg: #2e1a0c; --fg-muted: #6c5646; --on-primary: #ffffff; }
:root[data-color="graphite"] { --primary: #1c2024; --accent: #1c2024; --accent-soft: #eceef1; --bg: #fcfcfd; --bg-muted: #f0f0f3; --line: #e0e1e6; --line-strong: #8b8d98; --fg: #1c2024; --fg-muted: #60646c; --on-primary: #ffffff; }
:root[data-color="teal"][data-theme="dark"] { --primary: #0bd8b6; --accent: #0bd8b6; --accent-soft: #0d2d2a; --bg: #0a1514; --bg-subtle: #0f1e1c; --bg-muted: #152925; --line: #1f3631; --line-strong: #557570; --fg: #e6f4f1; --fg-muted: #a3bdb7; --on-primary: #0a1514; }
:root[data-color="violet"][data-theme="dark"] { --primary: #baa7ff; --accent: #baa7ff; --accent-soft: #291f43; --bg: #0f0d1a; --bg-subtle: #161325; --bg-muted: #1f1b33; --line: #2c2645; --line-strong: #6c6590; --fg: #eeeafd; --fg-muted: #b1aac9; --on-primary: #0f0d1a; }
:root[data-color="rose"][data-theme="dark"] { --primary: #ff8dcc; --accent: #ff8dcc; --accent-soft: #37172f; --bg: #160b12; --bg-subtle: #1e1019; --bg-muted: #2a1623; --line: #3a2031; --line-strong: #7f5f72; --fg: #fbe9f3; --fg-muted: #c9a9bb; --on-primary: #160b12; }
:root[data-color="sunset"][data-theme="dark"] { --primary: #ff801f; --accent: #ff9b4f; --accent-soft: #331e0b; --bg: #140d07; --bg-subtle: #1c130b; --bg-muted: #271a10; --line: #382618; --line-strong: #7f6a59; --fg: #fbeee3; --fg-muted: #c8b4a3; --on-primary: #140d07; }
:root[data-color="graphite"][data-theme="dark"] { --primary: #edeef0; --accent: #edeef0; --accent-soft: #212225; --bg: #111113; --bg-subtle: #18191b; --bg-muted: #212225; --line: #2e3135; --line-strong: #696e77; --fg: #edeef0; --fg-muted: #b0b4ba; --on-primary: #111113; }
@media (prefers-color-scheme: dark) {
  :root[data-color="teal"]:not([data-theme="light"]) { --primary: #0bd8b6; --accent: #0bd8b6; --accent-soft: #0d2d2a; --bg: #0a1514; --bg-subtle: #0f1e1c; --bg-muted: #152925; --line: #1f3631; --line-strong: #557570; --fg: #e6f4f1; --fg-muted: #a3bdb7; --on-primary: #0a1514; }
  :root[data-color="violet"]:not([data-theme="light"]) { --primary: #baa7ff; --accent: #baa7ff; --accent-soft: #291f43; --bg: #0f0d1a; --bg-subtle: #161325; --bg-muted: #1f1b33; --line: #2c2645; --line-strong: #6c6590; --fg: #eeeafd; --fg-muted: #b1aac9; --on-primary: #0f0d1a; }
  :root[data-color="rose"]:not([data-theme="light"]) { --primary: #ff8dcc; --accent: #ff8dcc; --accent-soft: #37172f; --bg: #160b12; --bg-subtle: #1e1019; --bg-muted: #2a1623; --line: #3a2031; --line-strong: #7f5f72; --fg: #fbe9f3; --fg-muted: #c9a9bb; --on-primary: #160b12; }
  :root[data-color="sunset"]:not([data-theme="light"]) { --primary: #ff801f; --accent: #ff9b4f; --accent-soft: #331e0b; --bg: #140d07; --bg-subtle: #1c130b; --bg-muted: #271a10; --line: #382618; --line-strong: #7f6a59; --fg: #fbeee3; --fg-muted: #c8b4a3; --on-primary: #140d07; }
  :root[data-color="graphite"]:not([data-theme="light"]) { --primary: #edeef0; --accent: #edeef0; --accent-soft: #212225; --bg: #111113; --bg-subtle: #18191b; --bg-muted: #212225; --line: #2e3135; --line-strong: #696e77; --fg: #edeef0; --fg-muted: #b0b4ba; --on-primary: #111113; }
}
:root[data-color="graphite"] .sh-ed-body a, :root[data-color="graphite"] .sh-crumb a:hover { text-decoration: underline; }
/* 파랑 범주색(sh-c-blue)은 테마의 주 색을 따른다 */
:root[data-color] .sh-c-blue { --c: var(--primary); --ci: var(--primary); --cs: var(--accent-soft); }

/* ================= 모서리 · 밀도 ================= */
:root[data-radius="sharp"] { --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; }
:root[data-radius="round"] { --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; }
:root[data-radius="pill"] .sh-btn, :root[data-radius="pill"] .sh-input, :root[data-radius="pill"] .sh-select, :root[data-radius="pill"] .sh-tab, :root[data-radius="pill"] .sh-tablist, :root[data-radius="pill"] .sh-seg, :root[data-radius="pill"] .sh-seg span { border-radius: 999px; }
:root[data-radius="pill"] { --radius-lg: 18px; }
:root[data-density="compact"] .sh-btn-md, :root[data-density="compact"] .sh-input:not(.sh-input-sm):not(.sh-input-lg), :root[data-density="compact"] .sh-select:not(.sh-select-sm) { height: 34px; }
:root[data-density="compact"] .sh-table td { padding-top: 7px; padding-bottom: 7px; }
:root[data-density="compact"] .sh-table th { padding-top: 8px; padding-bottom: 8px; }
:root[data-density="compact"] .sh-card { padding: 20px; }
:root[data-density="compact"] .sh-side-item { height: 32px; }
:root[data-density="comfy"] .sh-btn-md, :root[data-density="comfy"] .sh-input:not(.sh-input-sm):not(.sh-input-lg), :root[data-density="comfy"] .sh-select:not(.sh-select-sm) { height: 46px; font-size: 15px; }
:root[data-density="comfy"] .sh-table td { padding-top: 16px; padding-bottom: 16px; }
:root[data-density="comfy"] .sh-card { padding: 34px; }

/* ================= 테마 팔레트 패널 ================= */
.sh-tp-fab { position: fixed; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-subtle); color: var(--fg); font: inherit; font-size: 14px; font-weight: 600; box-shadow: 0 12px 28px -10px rgba(15, 35, 64, .35), var(--shadow-sm); cursor: pointer; }
.sh-tp-fab:hover { box-shadow: 0 16px 32px -10px rgba(15, 35, 64, .45), var(--shadow-sm); }
.sh-tp-fab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }
.sh-tp-fab .sh-tp-dot { width: 32px; height: 32px; border-radius: 50%; background: conic-gradient(var(--primary) 0 25%, var(--sky) 0 50%, var(--teal) 0 75%, var(--pink) 0); box-shadow: inset 0 0 0 3px var(--bg-subtle); }
.sh-tp { position: fixed; z-index: 85; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); display: flex; flex-direction: column; background: var(--bg-subtle); border-left: 1px solid var(--line); box-shadow: -24px 0 48px -24px rgba(15, 35, 64, .35); animation: sh-drawer-in .25s cubic-bezier(.2, .8, .2, 1); padding-top: env(safe-area-inset-top, 0px); }
.sh-tp[hidden] { display: none; }
.sh-tp.is-inline { position: relative; inset: auto; width: 100%; max-width: 380px; height: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); animation: none; z-index: 1; padding-top: 0; }
@keyframes sh-drawer-in { from { transform: translateX(32px); opacity: 0; } }
.sh-tp-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.sh-tp-head b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.sh-tp-body { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 22px; }
.sh-tp-sec { display: flex; flex-direction: column; gap: 10px; }
.sh-tp-sec > span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--fg-muted); }
.sh-tp-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sh-tp-sw { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); font: inherit; font-size: 12px; font-weight: 500; color: var(--fg); cursor: pointer; }
.sh-tp-sw i { width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--bg), 0 2px 6px rgba(15, 35, 64, .2); }
.sh-tp-sw:hover { border-color: var(--line-strong); }
.sh-tp-sw[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--accent-soft); }
.sh-tp-sw:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }
.sh-tp-custom { display: flex; align-items: center; gap: 10px; }
.sh-tp-custom input[type=color] { width: 44px; height: 40px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--bg-subtle); cursor: pointer; }
.sh-tp-custom .sh-input { flex: 1; font-family: var(--font-mono); text-transform: uppercase; }
.sh-tp-contrast { font-size: 12px; color: var(--fg-muted); }
.sh-tp-contrast.is-bad { color: var(--danger); font-weight: 600; }
.sh-tp-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px; border-radius: var(--radius-lg); background: var(--bg); border: 1px dashed var(--line-strong); }
.sh-tp-foot { display: flex; gap: 8px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.sh-tp-foot .sh-btn { flex: 1; }
.sh-tp .sh-seg { display: flex; } .sh-tp .sh-seg label { flex: 1; } .sh-tp .sh-seg span { justify-content: center; width: 100%; box-sizing: border-box; padding: 0 8px; }
.sh-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sh-theme-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-subtle); cursor: pointer; padding: 0; font: inherit; color: var(--fg); text-align: left; }
.sh-theme-card[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.sh-theme-card:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }
.sh-theme-strip { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; height: 56px; }
.sh-theme-card b { padding: 10px 12px 2px; font-size: 14px; font-weight: 700; }
.sh-theme-card small { padding: 0 12px 12px; font-size: 12px; color: var(--fg-muted); }
@media (prefers-reduced-motion: reduce) { .sh-tp { animation: none; } }

/* ===== 85-admin.css ===== */

/* ================= Drawer(오른쪽 패널) ================= */
.sh-drawer-back { position: fixed; inset: 0; z-index: 75; background: rgba(15, 35, 64, .35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: sh-in .2s ease-out; }
.sh-drawer-back[hidden], .sh-drawer[hidden] { display: none; }
.sh-drawer { position: fixed; z-index: 76; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); display: flex; flex-direction: column; background: var(--bg-subtle); border-left: 1px solid var(--line); box-shadow: -24px 0 48px -24px rgba(15, 35, 64, .4); animation: sh-drawer-in .25s cubic-bezier(.2, .8, .2, 1); padding-top: env(safe-area-inset-top, 0px); }
.sh-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid var(--line); }
.sh-drawer-head h3 { margin: 2px 0 0; font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -.02em; }
.sh-drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }
.sh-drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg); }
.sh-drawer-foot .sh-spacer { margin-right: auto; }
.sh-avatar-edit { display: flex; align-items: center; gap: 16px; }
.sh-avatar-edit .sh-avatar { width: 64px; height: 64px; font-size: 22px; }
@media (prefers-reduced-motion: reduce) { .sh-drawer { animation: none; } }

/* ================= 관리자 페이지 ================= */
.sh-admin { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 860px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); }
.sh-adm-nav { display: flex; flex-direction: column; gap: 2px; padding: 20px 12px; background: var(--bg-subtle); border-right: 1px solid var(--line); overflow-y: auto; }
.sh-adm-nav-h { padding: 0 10px 14px; }
.sh-adm-nav-h b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.sh-adm-nav-h span { font-size: 12px; color: var(--fg-muted); }
.sh-adm-tab { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius-md); background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--fg); text-align: left; cursor: pointer; }
.sh-adm-tab .sh-i { color: var(--fg-muted); }
.sh-adm-tab:hover { background: var(--bg-muted); }
.sh-adm-tab[aria-selected="true"] { background: var(--accent-soft); color: var(--fg); font-weight: 600; }
.sh-adm-tab[aria-selected="true"] .sh-i { color: var(--accent); }
.sh-adm-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.sh-adm-tab .sh-dirty-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
.sh-adm-tab .sh-dirty-dot[hidden] { display: none; }
.sh-adm-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sh-adm-scroll { flex: 1; overflow-y: auto; padding: 28px 32px 32px; }
.sh-adm-panel { display: flex; flex-direction: column; gap: 24px; max-width: 880px; }
.sh-adm-panel[hidden] { display: none; }
.sh-adm-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.sh-adm-title h3 { margin: 4px 0 4px; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.02em; }
.sh-adm-title p { margin: 0; font-size: 14px; color: var(--fg-muted); }
.sh-set-group { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.sh-set-group-h { padding: 14px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sh-set-group-h b { font-size: 15px; font-weight: 700; }
.sh-set-group-h span { font-size: 13px; color: var(--fg-muted); }
.sh-set-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); align-items: center; gap: 12px 24px; padding: 16px 20px; }
.sh-set-row + .sh-set-row { border-top: 1px solid var(--line); }
.sh-set-row.is-switch { grid-template-columns: minmax(0, 1fr) auto; }
.sh-set-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sh-set-label b { font-size: 14px; font-weight: 600; }
.sh-set-label span { font-size: 13px; color: var(--fg-muted); line-height: 19px; }
.sh-set-label .sh-badge { align-self: flex-start; margin-top: 4px; }
.sh-set-ctrl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sh-set-preview { font-size: 12px; color: var(--fg-muted); }
.sh-set-preview code { font-size: 12px; color: var(--fg); background: var(--bg-muted); padding: 2px 6px; border-radius: 4px; }
.sh-danger-zone { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.sh-danger-zone .sh-set-group-h b { color: var(--danger); }
.sh-btn-danger-outline { background: transparent; color: var(--danger); border-color: var(--danger); }
.sh-btn-danger-outline:hover { background: var(--danger-soft); }
.sh-perm { width: 100%; border-collapse: collapse; font-size: 14px; }
.sh-perm th, .sh-perm td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: center; }
.sh-perm tr:last-child td { border-bottom: 0; }
.sh-perm th:first-child, .sh-perm td:first-child { text-align: left; }
.sh-perm thead th { font-size: 12px; font-weight: 600; color: var(--fg); background: var(--bg-muted); vertical-align: bottom; }
.sh-perm thead th .sh-check { flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; }
.sh-perm td:first-child b { display: block; font-weight: 600; font-size: 14px; }
.sh-perm td:first-child span { font-size: 12px; color: var(--fg-muted); }
.sh-perm td .sh-check { justify-content: center; }
.sh-perm tbody tr:hover { background: var(--bg); }
.sh-perm-wrap { overflow-x: auto; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.sh-user-cell { display: flex; align-items: center; gap: 10px; }
.sh-user-cell div { display: flex; flex-direction: column; }
.sh-user-cell b { font-weight: 600; } .sh-user-cell span { font-size: 12px; color: var(--fg-muted); }
.sh-adm-save { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 10px; margin: 0 16px 16px; padding: 10px 10px 10px 18px; border-radius: var(--radius-lg); background: var(--fg); color: var(--bg); box-shadow: 0 16px 32px -12px rgba(15, 35, 64, .5); animation: sh-in .2s ease-out; }
.sh-adm-save[hidden] { display: none; }
.sh-adm-save b { margin-right: auto; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.sh-adm-save b i { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
.sh-adm-save .sh-btn-ghost { color: var(--bg); }
.sh-adm-save .sh-btn-ghost:hover { background: rgba(255, 255, 255, .14); }
.sh-adm-save .sh-btn-primary { background: var(--bg); color: var(--fg); }
.sh-adm-save .sh-btn-primary.is-loading { --ld-c: var(--fg); }
.sh-notify-mx td:not(:first-child) { width: 92px; }
.sh-notify-mx .sh-switch { justify-content: center; }
.sh-audit { list-style: none; margin: 0; padding: 0; }
.sh-audit li { display: grid; grid-template-columns: 140px 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 20px; font-size: 14px; }
.sh-audit li + li { border-top: 1px solid var(--line); }
.sh-audit time { font-size: 12px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.sh-audit code { font-size: 12px; }
@media (max-width: 860px) {
  .sh-admin { grid-template-columns: 1fr; height: auto; }
  .sh-adm-nav { flex-direction: row; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sh-adm-nav-h { display: none; }
  .sh-adm-tab { flex: none; }
  .sh-adm-scroll { padding: 20px 16px; max-height: 760px; }
  .sh-set-row, .sh-set-row.is-switch { grid-template-columns: 1fr; }
  .sh-audit li { grid-template-columns: 1fr; gap: 4px; }
}

/* ===== 90-approval.css ===== */

/* ================= 결재란 ================= */
.sh-apv-wrap { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.sh-apv { border-collapse: collapse; table-layout: fixed; background: var(--bg-subtle); font-size: 12px; }
.sh-apv th, .sh-apv td { border: 1px solid var(--fg); text-align: center; padding: 0; }
.sh-apv thead th { height: 26px; width: 84px; font-weight: 600; background: var(--bg-muted); }
.sh-apv .sh-apv-side { width: 28px; writing-mode: vertical-rl; letter-spacing: .4em; font-weight: 700; background: var(--bg-muted); }
.sh-apv td { height: 92px; vertical-align: top; position: relative; }
.sh-apv-cell { height: 100%; min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 6px 4px 5px; box-sizing: border-box; }
.sh-apv-mark { height: 56px; display: grid; place-items: center; }
.sh-apv-mark svg, .sh-apv-mark img { max-width: 76px; max-height: 56px; display: block; }
.sh-apv-name { font-size: 12px; font-weight: 600; line-height: 14px; }
.sh-apv-date { font-size: 10px; color: var(--fg-muted); font-variant-numeric: tabular-nums; line-height: 12px; }
.sh-apv-tag { position: absolute; top: 3px; left: 3px; font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 3px; background: var(--orange-soft); color: var(--fg); }
.sh-apv td.is-skip { background: linear-gradient(to top right, transparent calc(50% - .6px), var(--fg) 50%, transparent calc(50% + .6px)); }
.sh-apv td.is-now { background: var(--accent-soft); }
.sh-apv-btn { margin-top: 10px; height: 32px; padding: 0 10px; border: 1px dashed var(--primary); border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.sh-apv-btn:hover { background: var(--accent-soft); }
.sh-apv-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus); }
.sh-apv-pick { position: absolute; z-index: 6; top: 44px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 2px; padding: 4px; min-width: 96px; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.sh-apv-pick button { height: 30px; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: 12px; color: var(--fg); cursor: pointer; text-align: left; padding: 0 8px; }
.sh-apv-pick button:hover, .sh-apv-pick button:focus-visible { background: var(--bg-muted); outline: none; }
.sh-stamp-in { animation: sh-stamp .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes sh-stamp { 0% { transform: scale(1.8) rotate(var(--r, 0deg)); opacity: 0; } 100% { transform: scale(1) rotate(var(--r, 0deg)); opacity: .92; } }
.sh-apv-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--fg-muted); }

/* ================= 서명 패드 ================= */
.sh-sign { display: flex; flex-direction: column; gap: 10px; }
.sh-sign-pad { position: relative; height: 200px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--bg-subtle) repeating-linear-gradient(0deg, transparent 0 39px, var(--line) 39px 40px); overflow: hidden; touch-action: none; cursor: crosshair; }
.sh-sign-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sh-sign-pad::after { content: "여기에 서명하세요"; position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; font-size: 13px; color: var(--fg-muted); pointer-events: none; border-top: 1px dashed var(--line-strong); margin: 0 28px; padding-top: 6px; }
.sh-sign-pad.has-ink::after { opacity: 0; }
.sh-sign-pad:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus); }
.sh-sign-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sh-sign-color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bg-subtle); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; padding: 0; }
.sh-sign-color[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--primary); }
.sh-sign-out { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--bg-muted); font-size: 13px; }
.sh-sign-out img { height: 44px; background: var(--bg-subtle); border-radius: 6px; border: 1px solid var(--line); }

/* ================= 트리 ================= */
.sh-tree-box { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sh-tree { list-style: none; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-subtle); max-height: 360px; overflow: auto; font-size: 14px; }
.sh-tree ul { list-style: none; margin: 0; padding: 0; }
.sh-tree li[aria-expanded="false"] > ul { display: none; }
.sh-tree-row { display: flex; align-items: center; gap: 6px; height: 34px; padding-right: 8px; padding-left: calc(var(--lv, 0) * 18px + 4px); border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; }
.sh-tree-row:hover { background: var(--bg-muted); }
.sh-tree li:focus { outline: none; }
.sh-tree li:focus > .sh-tree-row { box-shadow: inset 0 0 0 2px var(--focus); }
.sh-tree li[aria-selected="true"] > .sh-tree-row { background: var(--accent-soft); }
.sh-tree-tg { width: 20px; height: 20px; display: grid; place-items: center; color: var(--fg-muted); border-radius: 4px; flex: none; transition: transform .15s; }
.sh-tree li[aria-expanded="true"] > .sh-tree-row .sh-tree-tg { transform: rotate(90deg); }
.sh-tree-tg.is-leaf { visibility: hidden; }
.sh-tree-row .sh-check input { margin: 0; }
.sh-tree-row .sh-i { color: var(--fg-muted); }
.sh-tree-lab { overflow: hidden; text-overflow: ellipsis; }
.sh-tree-meta { margin-left: auto; font-size: 12px; color: var(--fg-muted); }
.sh-tree-add { margin-left: 4px; opacity: 0; }
.sh-tree-row:hover .sh-tree-add, .sh-tree li:focus > .sh-tree-row .sh-tree-add { opacity: 1; }
.sh-tree mark { background: var(--warning-soft); color: inherit; border-radius: 2px; }
.sh-tree li.is-hidden { display: none; }
.sh-tree-empty { padding: 20px; text-align: center; font-size: 13px; color: var(--fg-muted); }

/* ================= 결재선 지정 ================= */
.sh-apl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; }
.sh-apl-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sh-apl-side h4 { margin: 0; font-size: 14px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sh-apl-list { list-style: none; margin: 0; padding: 6px; min-height: 280px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
.sh-apl-list:empty::before { content: "왼쪽 조직도에서 사람을 더블클릭하거나 + 를 누르세요"; margin: auto; padding: 24px; text-align: center; font-size: 13px; color: var(--fg-muted); }
.sh-apl-item { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 8px 8px 6px; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-md); }
.sh-apl-item .sh-select { height: 30px; width: auto; font-size: 12px; padding-right: 28px; background-position: calc(100% - 15px) 12px, calc(100% - 10px) 12px; }
.sh-apl-item b { font-size: 14px; font-weight: 600; } .sh-apl-item span.small { font-size: 12px; color: var(--fg-muted); }
.sh-apl-sum { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 760px) { .sh-apl { grid-template-columns: 1fr; } }

/* ================= 댓글·멘션 ================= */
.sh-cmts { display: flex; flex-direction: column; gap: 16px; }
.sh-cmt { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.sh-cmt .sh-avatar { width: 36px; height: 36px; }
.sh-cmt-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-cmt-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.sh-cmt-head b { font-size: 14px; font-weight: 600; } .sh-cmt-head time { color: var(--fg-muted); font-size: 12px; }
.sh-cmt-text { font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
.sh-cmt-acts { display: flex; gap: 2px; margin-left: -8px; }
.sh-cmt-acts button { height: 28px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: 12px; font-weight: 500; color: var(--fg-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.sh-cmt-acts button:hover { background: var(--bg-muted); color: var(--fg); }
.sh-cmt-acts button[aria-pressed="true"] { color: var(--pink-ink); }
.sh-cmt-acts button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus); }
.sh-cmt-replies { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding-left: 14px; border-left: 2px solid var(--line); }
.sh-mention { display: inline; padding: 1px 4px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-weight: 600; white-space: nowrap; }
.sh-composer { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.sh-composer-box { position: relative; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.sh-composer-box:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.sh-composer-in { min-height: 64px; max-height: 200px; overflow-y: auto; padding: 10px 12px; font-size: 14px; line-height: 22px; outline: none; }
.sh-composer-in:empty::before { content: attr(data-placeholder); color: var(--fg-muted); }
.sh-composer-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--fg-muted); }
.sh-mention-pop { position: fixed; z-index: 70; min-width: 220px; max-height: 240px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.sh-mention-pop li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-md); font-size: 13px; cursor: pointer; }
.sh-mention-pop li[aria-selected="true"] { background: var(--accent-soft); }
.sh-mention-pop li span:last-child { margin-left: auto; color: var(--fg-muted); font-size: 12px; }

/* ================= 문서 뷰어 ================= */
.sh-viewer { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 640px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-muted); }
.sh-viewer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; background: var(--bg-subtle); border-bottom: 1px solid var(--line); font-size: 13px; }
.sh-viewer-bar .sh-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.sh-viewer-bar input { width: 44px; height: 30px; text-align: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-subtle); color: var(--fg); font: inherit; font-variant-numeric: tabular-nums; }
.sh-viewer-bar .sh-select { height: 30px; width: auto; font-size: 13px; }
.sh-viewer-title { margin-right: auto; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.sh-viewer-body { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 0; }
.sh-viewer-thumbs { width: 132px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; background: var(--bg-subtle); border-right: 1px solid var(--line); }
.sh-viewer.no-thumbs .sh-viewer-thumbs { display: none; }
.sh-viewer-thumbs button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border: 2px solid transparent; border-radius: var(--radius-md); background: none; font: inherit; font-size: 11px; color: var(--fg-muted); cursor: pointer; }
.sh-viewer-thumbs button[aria-current="true"] { border-color: var(--primary); color: var(--fg); font-weight: 600; }
.sh-viewer-thumbs img { width: 100%; border-radius: 3px; box-shadow: var(--shadow-sm); background: #fff; }
.sh-viewer-pages { overflow: auto; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.sh-viewer-page { width: calc(560px * var(--z, 1)); max-width: none; background: #fff; box-shadow: 0 2px 8px rgba(15, 35, 64, .12), 0 12px 32px -12px rgba(15, 35, 64, .25); flex: none; }
.sh-viewer-page img { width: 100%; display: block; }
@media (max-width: 640px) { .sh-viewer-thumbs { display: none; } .sh-viewer-pages { padding: 12px; } }

/* ================= 명령 팔레트 ================= */
.sh-cmdk-back { position: fixed; inset: 0; z-index: 92; background: rgba(15, 35, 64, .35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: sh-in .15s ease-out; }
.sh-cmdk-back[hidden] { display: none; }
.sh-cmdk { width: min(620px, 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 32px 64px -16px rgba(15, 35, 64, .45); overflow: hidden; }
.sh-cmdk-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.sh-cmdk-in input { flex: 1; height: 56px; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: var(--fg); }
.sh-cmdk-in kbd, .sh-cmdk-foot kbd { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--fg-muted); }
.sh-cmdk-list { overflow-y: auto; padding: 6px; margin: 0; list-style: none; }
.sh-cmdk-grp { padding: 10px 10px 4px; font-size: 11px; letter-spacing: .08em; font-weight: 600; color: var(--fg-muted); }
.sh-cmdk-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--radius-md); font-size: 14px; cursor: pointer; }
.sh-cmdk-item[aria-selected="true"] { background: var(--accent-soft); }
.sh-cmdk-item .sh-icon-tile { width: 30px; height: 30px; border-radius: 9px; }
.sh-cmdk-item small { margin-left: auto; font-size: 12px; color: var(--fg-muted); }
.sh-cmdk-item mark { background: none; color: var(--accent); font-weight: 700; }
.sh-cmdk-empty { padding: 32px; text-align: center; color: var(--fg-muted); font-size: 14px; }
.sh-cmdk-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); background: var(--bg); font-size: 12px; color: var(--fg-muted); }

/* ================= 알림 센터 ================= */
.sh-notif-btn { position: relative; }
.sh-notif-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--pink-ink); color: var(--on-color); font-size: 10px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg-subtle); font-variant-numeric: tabular-nums; }
.sh-notif-count[hidden] { display: none; }
.sh-notif { position: fixed; z-index: 72; width: min(400px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 80px)); display: flex; flex-direction: column; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 24px 48px -12px rgba(15, 35, 64, .35); overflow: hidden; animation: sh-in .15s ease-out; }
.sh-notif[hidden] { display: none; }
.sh-notif-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 10px; }
.sh-notif-head b { font-size: 16px; font-weight: 700; }
.sh-notif .sh-tablist { margin: 0 12px 8px; }
.sh-notif-list { overflow-y: auto; margin: 0; padding: 0 6px 6px; list-style: none; }
.sh-notif-item { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer; }
.sh-notif-item:hover { background: var(--bg-muted); }
.sh-notif-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.sh-notif-item .sh-icon-tile { width: 36px; height: 36px; border-radius: 11px; }
.sh-notif-item p { margin: 0; font-size: 13px; line-height: 19px; color: var(--fg-muted); }
.sh-notif-item p b { color: var(--fg); font-weight: 600; }
.sh-notif-item time { font-size: 11px; color: var(--fg-muted); }
.sh-notif-item.is-unread { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.sh-notif-item.is-unread::after { content: ""; position: absolute; right: 12px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.sh-notif-empty { padding: 36px 16px; text-align: center; color: var(--fg-muted); font-size: 13px; }

/* ================= 마법사(다단계 폼) ================= */
.sh-wizard { display: flex; flex-direction: column; gap: 22px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.sh-wz-steps { display: flex; list-style: none; margin: 0; padding: 0; counter-reset: wz; }
.sh-wz-step { flex: 1; display: flex; align-items: center; gap: 10px; position: relative; font-size: 13px; color: var(--fg-muted); min-width: 0; }
.sh-wz-step:not(:last-child)::after { content: ""; flex: 1; height: 2px; margin: 0 10px; background: var(--line); border-radius: 1px; }
.sh-wz-step.is-done:not(:last-child)::after { background: var(--primary); }
.sh-wz-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; border: 2px solid var(--line-strong); background: var(--bg-subtle); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.sh-wz-step.is-now { color: var(--fg); font-weight: 600; }
.sh-wz-step.is-now .sh-wz-num { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px var(--accent-soft); }
.sh-wz-step.is-done .sh-wz-num { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.sh-wz-lab { white-space: nowrap; }
.sh-wz-panel[hidden] { display: none; }
.sh-wz-panel { display: flex; flex-direction: column; gap: 16px; animation: sh-in .2s ease-out; }
.sh-wz-panel h4 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.sh-wz-foot { display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.sh-wz-foot .sh-spacer { margin-right: auto; font-size: 13px; color: var(--fg-muted); }
.sh-wz-sum { display: grid; grid-template-columns: 120px 1fr; gap: 10px 16px; margin: 0; padding: 16px; border-radius: var(--radius-md); background: var(--bg-muted); font-size: 14px; }
.sh-wz-sum dt { color: var(--fg-muted); } .sh-wz-sum dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.sh-wz-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; text-align: center; }
@media (max-width: 640px) { .sh-wz-lab { display: none; } .sh-wz-step.is-now .sh-wz-lab { display: inline; } }

/* ================= 필터 막대 ================= */
.sh-fbar { display: flex; flex-direction: column; gap: 10px; }
.sh-fbar-views { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-fbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sh-fchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 12px; border-radius: var(--radius-full); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); font-size: 13px; color: var(--fg); }
.sh-fchip b { font-weight: 600; }
.sh-fchip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--fg-muted); cursor: pointer; display: grid; place-items: center; font-size: 14px; }
.sh-fchip button:hover { background: var(--bg-subtle); color: var(--fg); }
.sh-fadd { position: relative; }
.sh-fpop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 260px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.sh-fpop[hidden] { display: none; }
.sh-fpop .sh-check { font-size: 13px; }
.sh-fpop-vals { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.sh-fpop-foot { display: flex; justify-content: flex-end; gap: 6px; }

/* ================= 차트 ================= */
.sh-chart-box { position: relative; display: flex; flex-direction: column; gap: 10px; }
.sh-chart-svg { width: 100%; display: block; overflow: visible; font-family: var(--font-sans); }
.sh-chart-svg .ax { stroke: var(--line); }
.sh-chart-svg .lb { fill: var(--fg-muted); font-size: 11px; }
.sh-chart-svg .ln { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sh-chart-svg .ar { opacity: .16; }
.sh-chart-svg .cross { stroke: var(--fg-muted); stroke-dasharray: 3 3; }
.sh-chart-svg .dot { stroke: var(--bg-subtle); stroke-width: 2.5; }
.sh-chart-svg .hm { stroke: var(--bg-subtle); stroke-width: 2; rx: 4px; }
.sh-chart-svg .hm:hover { stroke: var(--fg); }
.sh-chart-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 120px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--fg); color: var(--bg); font-size: 12px; line-height: 18px; box-shadow: var(--shadow-md); }
.sh-chart-tip[hidden] { display: none; }
.sh-chart-tip b { display: block; margin-bottom: 2px; }
.sh-chart-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.sh-chart-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-chart-legend button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--bg-subtle); font: inherit; font-size: 12px; color: var(--fg); cursor: pointer; }
.sh-chart-legend button i { width: 10px; height: 10px; border-radius: 3px; }
.sh-chart-legend button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.sh-hm-scale { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--fg-muted); }
.sh-hm-scale span { display: flex; gap: 2px; }
.sh-hm-scale i { width: 16px; height: 10px; border-radius: 2px; }

/* ================= 우클릭 메뉴 · 사람 카드 ================= */
.sh-ctx { position: fixed; z-index: 80; min-width: 200px; }
.sh-ctx[hidden] { display: none; }
.sh-ctx-target { user-select: none; }
.sh-ctx-target.is-ctx { background: var(--accent-soft); }
.sh-files-list { list-style: none; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.sh-files-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-md); font-size: 14px; cursor: context-menu; }
.sh-files-list li:hover { background: var(--bg-muted); }
.sh-files-list li:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.sh-files-list .sh-ext { width: 30px; height: 30px; border-radius: 8px; font-size: 8px; grid-row: auto; }
.sh-files-list span.small { color: var(--fg-muted); font-size: 12px; }
.sh-hc-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
.sh-hc { position: fixed; z-index: 78; width: 300px; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--bg-subtle); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 20px 40px -12px rgba(15, 35, 64, .35); animation: sh-in .15s ease-out; }
.sh-hc[hidden] { display: none; }
.sh-hc-top { display: flex; gap: 12px; align-items: center; }
.sh-hc-top .sh-avatar { width: 48px; height: 48px; font-size: 18px; }
.sh-hc-top div { display: flex; flex-direction: column; }
.sh-hc-top b { font-size: 16px; } .sh-hc-top span { font-size: 12px; color: var(--fg-muted); }
.sh-hc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.sh-hc-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }

/* ================= 인쇄용 기안문(A4) ================= */
.sh-paper-wrap { overflow-x: auto; padding: 24px; background: var(--bg-muted); border-radius: var(--radius-lg); }
.sh-paper { width: 794px; min-height: 1123px; margin: 0 auto; padding: 64px 72px 56px; box-sizing: border-box; background: #fff; color: #111; font-size: 14px; line-height: 1.75; box-shadow: 0 4px 24px rgba(15, 35, 64, .18); display: flex; flex-direction: column; color-scheme: light; --fg: #111; --fg-muted: #555; --bg-subtle: #fff; --bg-muted: #f2f2f2; --line: #bbb; }
.sh-paper-org { text-align: center; font-size: 15px; font-weight: 600; letter-spacing: .3em; }
.sh-paper h2 { margin: 6px 0 22px; text-align: center; font-size: 30px; font-weight: 800; letter-spacing: .5em; }
.sh-paper .sh-apv-wrap { margin-bottom: 18px; }
.sh-paper .sh-apv thead th, .sh-paper .sh-apv .sh-apv-side { background: #f2f2f2; }
.sh-paper-meta { display: grid; grid-template-columns: 70px 1fr; border-top: 2px solid #111; border-bottom: 1px solid #111; }
.sh-paper-meta dt, .sh-paper-meta dd { margin: 0; padding: 7px 10px; border-bottom: 1px solid #ccc; }
.sh-paper-meta dt { font-weight: 700; letter-spacing: .4em; }
.sh-paper-meta dt:nth-last-of-type(1), .sh-paper-meta dd:last-of-type { border-bottom: 0; }
.sh-paper-body { padding: 22px 4px; flex: 1; }
.sh-paper-body ol { padding-left: 20px; margin: 8px 0; }
.sh-paper-body table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.sh-paper-body th, .sh-paper-body td { border: 1px solid #555; padding: 5px 8px; }
.sh-paper-body th { background: #f2f2f2; }
.sh-paper-body td.r { text-align: right; font-variant-numeric: tabular-nums; }
.sh-paper-sign { position: relative; text-align: center; font-size: 24px; font-weight: 800; letter-spacing: .3em; margin: 28px 0 24px; }
.sh-paper-sign svg { position: absolute; left: calc(50% + 120px); top: -18px; width: 70px; height: 70px; }
.sh-paper-foot { border-top: 2px solid #111; padding-top: 8px; font-size: 12px; line-height: 1.7; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.sh-paper-foot span { white-space: nowrap; }
@media print {
  @page { size: A4; margin: 0; }
  body.is-printing * { visibility: hidden !important; }
  body.is-printing .sh-paper.is-printing, body.is-printing .sh-paper.is-printing * { visibility: visible !important; }
  body.is-printing .sh-paper.is-printing { position: fixed; left: 0; top: 0; margin: 0; box-shadow: none; width: 210mm; min-height: 297mm; }
  body.is-printing .sh-apv-btn { display: none; }
}

/* ================= 투어 ================= */
.sh-tour-spot { position: fixed; z-index: 96; border-radius: var(--radius-lg); box-shadow: 0 0 0 4px var(--primary), 0 0 0 9999px rgba(11, 18, 32, .55); pointer-events: none; transition: all .3s cubic-bezier(.2, .8, .2, 1); }
.sh-tour-pop { position: fixed; z-index: 97; width: min(340px, calc(100vw - 24px)); padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-subtle); border-radius: var(--radius-lg); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .5); transition: top .3s, left .3s; }
.sh-tour-pop b { font-size: 16px; font-weight: 700; }
.sh-tour-pop p { margin: 0; font-size: 14px; color: var(--fg-muted); line-height: 21px; }
.sh-tour-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.sh-tour-dots { display: flex; gap: 4px; margin-right: auto; }
.sh-tour-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line-strong); transition: width .2s; }
.sh-tour-dots i.is-on { width: 18px; background: var(--primary); }

/* ================= 화면 나누기 ================= */
.sh-split { --split: 38%; display: grid; grid-template-columns: minmax(0, var(--split)) 10px minmax(0, 1fr); height: 420px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-subtle); }
.sh-split.is-a-collapsed { grid-template-columns: 0 10px minmax(0, 1fr); }
.sh-split-pane { overflow: auto; min-width: 0; }
.sh-split-handle { position: relative; cursor: col-resize; background: var(--bg-muted); border-left: 1px solid var(--line); border-right: 1px solid var(--line); touch-action: none; }
.sh-split-handle::before { content: ""; position: absolute; left: 3px; top: 50%; width: 2px; height: 32px; margin-top: -16px; border-radius: 1px; background: var(--line-strong); box-shadow: 2px 0 0 transparent; }
.sh-split-handle:hover::before, .sh-split-handle.is-drag::before, .sh-split-handle:focus-visible::before { background: var(--primary); }
.sh-split-handle:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.sh-split-list { list-style: none; margin: 0; padding: 6px; }
.sh-split-list li { padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.sh-split-list li:hover { background: var(--bg-muted); }
.sh-split-list li[aria-selected="true"] { background: var(--accent-soft); }
.sh-split-list b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-split-list span { font-size: 12px; color: var(--fg-muted); }
.sh-split-detail { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.sh-split-detail h4 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }

/* ================= 가상 스크롤 목록 ================= */
.sh-vlist { position: relative; height: 380px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.sh-vlist-spacer { position: relative; }
.sh-vrow { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: 80px 110px minmax(0, 1fr) 90px 110px; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 13px; box-sizing: border-box; }
.sh-vrow:nth-child(even) { background: color-mix(in srgb, var(--bg-muted) 45%, transparent); }
.sh-vrow .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-muted); }
.sh-vrow b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-vrow.is-hit { background: var(--warning-soft) !important; }
.sh-vlist-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-muted); }
@media (max-width: 640px) { .sh-vrow { grid-template-columns: 60px minmax(0, 1fr) 80px; } .sh-vrow > :nth-child(2), .sh-vrow > :nth-child(5) { display: none; } }
@media (prefers-reduced-motion: reduce) { .sh-stamp-in, .sh-tour-spot, .sh-tour-pop, .sh-wz-panel { animation: none; transition: none; } }

/* ===== 95-global.css ===== */

/* ================= 전역 옵션 (html의 data-* 속성 하나로 페이지 전체에 적용) ================= */
/* 1. 화면 배율: 앱 루트(.sh-scale-root)에 적용 — 저시력 사용자 */
:root[data-scale="90"] .sh-scale-root { zoom: .9; }
:root[data-scale="110"] .sh-scale-root { zoom: 1.1; }
:root[data-scale="125"] .sh-scale-root { zoom: 1.25; }
/* 2. 글꼴: 시스템 글꼴(맑은 고딕·Apple SD 고딕) */
:root[data-font="system"] { --font-sans: -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif; --font-display: var(--font-sans); }
/* 3. 모션 줄이기(운영체제 설정과 별개로 강제) */
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
:root[data-motion="reduce"] .sh-spinner, :root[data-motion="reduce"] .sh-ring::after, :root[data-motion="reduce"] .sh-btn.is-loading::after { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
/* 4. 고대비: 보조 글자·선을 진하게, 포커스 링 굵게 */
:root[data-contrast="high"] { --fg-muted: #24344d; --line: #7d8ea5; --line-strong: #3f5068; --shadow-sm: 0 0 0 1px #7d8ea5; }
:root[data-contrast="high"][data-theme="dark"] { --fg-muted: #dbe3ee; --line: #6b7d97; --line-strong: #b9c6d8; --shadow-sm: 0 0 0 1px #6b7d97; }
@media (prefers-color-scheme: dark) { :root[data-contrast="high"]:not([data-theme="light"]) { --fg-muted: #dbe3ee; --line: #6b7d97; --line-strong: #b9c6d8; } }
:root[data-contrast="high"] .sh-badge, :root[data-contrast="high"] .sh-tag, :root[data-contrast="high"] .sh-alert { box-shadow: inset 0 0 0 1px var(--line-strong); }
:root[data-contrast="high"] .sh-btn-ghost { text-decoration: underline; text-underline-offset: 3px; }
/* 5. 색약 친화 상태색(Okabe–Ito 계열): 성공=파랑, 오류=주황빛 빨강 */
:root[data-cvd="on"] { --success: #0072b2; --success-soft: #e3f0fa; --danger: #b5470b; --danger-soft: #fbe9df; --warning: #8a6a00; --warning-soft: #fff4c7; --teal: #0072b2; --teal-ink: #0072b2; --teal-soft: #e3f0fa; }
:root[data-cvd="on"][data-theme="dark"] { --success: #56b4e9; --success-soft: #0f2a3d; --danger: #f2a571; --danger-soft: #3a1f10; --warning: #f0e442; --warning-soft: #2e2a08; --teal: #56b4e9; --teal-ink: #56b4e9; --teal-soft: #0f2a3d; }
@media (prefers-color-scheme: dark) { :root[data-cvd="on"]:not([data-theme="light"]) { --success: #56b4e9; --success-soft: #0f2a3d; --danger: #f2a571; --danger-soft: #3a1f10; --warning: #f0e442; --warning-soft: #2e2a08; --teal: #56b4e9; --teal-ink: #56b4e9; --teal-soft: #0f2a3d; } }
/* 6. 그림자 */
:root[data-shadow="flat"] { --shadow-sm: none; --shadow-md: 0 0 0 1px var(--line); }
:root[data-shadow="flat"] .sh-otp-box, :root[data-shadow="flat"] .sh-otp input, :root[data-shadow="flat"] .sh-tp-fab { box-shadow: none; }
:root[data-shadow="deep"] { --shadow-sm: 0 2px 6px rgba(15, 35, 64, .10), 0 1px 2px rgba(15, 35, 64, .08); --shadow-md: 0 20px 40px -12px rgba(15, 35, 64, .28), 0 4px 10px rgba(15, 35, 64, .08); }
/* 7. 아이콘 선 굵기 */
:root { --icon-stroke: 1.5; }
.sh-i { stroke-width: var(--icon-stroke); }
:root[data-icon="thin"] { --icon-stroke: 1.2; }
:root[data-icon="bold"] { --icon-stroke: 2; }
/* 8. 링크 항상 밑줄(색만으로 링크를 구분하지 않기) */
:root[data-links="underline"] a:not(.sh-btn):not(.sh-side-item):not(.sh-brand):not(.sh-link-card):not(.sh-doc-row):not(.sh-cs-item):not(.toc a):not(.sh-header-nav a) { text-decoration: underline; text-underline-offset: 3px; }
/* 9. 표 줄무늬 */
:root[data-zebra="on"] .sh-table tbody tr:nth-child(even), :root[data-zebra="on"] .sh-perm tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-muted) 55%, transparent); }
/* 10. 포커스 강조 */
:root[data-focus="strong"] :focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 2px !important; }
/* 11. 토스트 위치 */
:root[data-toast-pos="top"] .sh-toasts { top: calc(16px + env(safe-area-inset-top, 0px)); bottom: auto; right: 50%; transform: translateX(50%); }
:root[data-toast-pos="bl"] .sh-toasts { right: auto; left: max(16px, env(safe-area-inset-left, 0px)); }
/* 12. 스크롤바 */
:root[data-scrollbar="thin"] { --sb-size: 8px; }
:root[data-scrollbar="thin"] ::-webkit-scrollbar-thumb { border-width: 2px; }
:root[data-scrollbar="auto"] ::-webkit-scrollbar-thumb { background-color: transparent; }
:root[data-scrollbar="auto"] *:hover::-webkit-scrollbar-thumb { background-color: var(--sb-thumb); }
.sh-tp-adv { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; font-size: 13px; }
.sh-tp-adv label { color: var(--fg); }
.sh-tp-adv .sh-select { height: 32px; font-size: 13px; padding-right: 30px; background-position: calc(100% - 16px) 13px, calc(100% - 11px) 13px; }

/* ================= 입력창 안 아이콘: 크기와 상관없이 세로 가운데 ================= */
.sh-input-wrap .sh-input-ic { top: 50%; transform: translateY(-50%); }
.sh-input-wrap .sh-input-sm { padding-left: 34px; }
.sh-input-wrap:has(.sh-input-sm) .sh-input-ic { left: 5px; width: 22px; height: 22px; border-radius: 6px; }
.sh-input-wrap:has(.sh-input-sm) .sh-input-ic .sh-i { width: 14px; height: 14px; }
.sh-input-wrap .sh-input-lg { padding-left: 50px; }
.sh-input-wrap:has(.sh-input-lg) .sh-input-ic { left: 10px; width: 28px; height: 28px; border-radius: 8px; }
.sh-date-wrap > .sh-i, .sh-grid-search svg { top: 50%; transform: translateY(-50%); }
.sh-apl-side h4 { flex-wrap: wrap; white-space: nowrap; }