/* ═══════════════════════════════════════════════════════════════════════════
   여해 업무 포탈 공통 디자인 — iOS 유리질(Liquid Glass) 톤 (2026-10-12)
   app.leesunsin.com(sns-dashboard)·docs.leesunsin.com(document-system) 직원 화면 공통.
   두 시스템의 app/static/glass.css 는 같은 파일(내용 동일하게 유지할 것).
   규칙: 글·버튼·동작은 바꾸지 않고 겉모습만. 흐림(backdrop-filter)은 카드·패널·헤더·메뉴에만 — 말풍선·목록 행처럼
   수백 개가 생기는 요소에는 쓰지 않는다(성능).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --c-navy:#1a3a5c; --c-navy-d:#15304a; --c-gold:#D3BFA0; --c-title:#1D1D1F; --c-body:#3C3C43;
  --g-muted:#4f4f56;            /* 보조 글자 — 남색 번짐 위의 유리 카드에서도 AA(4.5:1) */
  --g-faint:#5b5b62;            /* 아주 작은 보조 글자(11px 이상) */
  --glass:rgba(255,255,255,.48);  --glass-done:rgba(255,255,255,.40);  --glass-strong:rgba(255,255,255,.72);
  --glass-hi:rgba(255,255,255,.85); --edge:rgba(26,58,92,.12); --ring:0 0 0 1px var(--edge);
  --spring:cubic-bezier(.2,.8,.2,1);
  --g-blur:blur(22px) saturate(1.8);
}
html { background:#e8edf5; }
body { -webkit-font-smoothing:antialiased; }
body.g-body { background:transparent; color:var(--c-body);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", sans-serif; }
/* 바탕: 유리에 비칠 색 번짐(벽지). fixed 가상 요소라 어느 스크롤 방식에서도 화면에 고정 — 카드가 그 위를 지나가며 비친다 */
body.g-body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42% 38% at 10% 8%,  rgba(230,203,160,.95) 0%, rgba(230,203,160,0) 70%),
    radial-gradient(38% 34% at 88% 10%, rgba(26,58,92,.32)    0%, rgba(26,58,92,0)    70%),
    radial-gradient(46% 42% at 80% 80%, rgba(96,158,236,.62)  0%, rgba(96,158,236,0)  70%),
    radial-gradient(36% 34% at 20% 88%, rgba(176,150,222,.52) 0%, rgba(176,150,222,0) 70%),
    radial-gradient(34% 30% at 40% 42%, rgba(243,196,160,.48) 0%, rgba(243,196,160,0) 70%),
    radial-gradient(30% 30% at 62% 52%, rgba(118,204,192,.44) 0%, rgba(118,204,192,0) 70%),
    linear-gradient(180deg,#f3f5fa 0%,#e7ebf4 100%); }

/* ── 헤더·메뉴 ── */
.g-header { background:rgba(255,255,255,.58); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur);
  border-bottom:1px solid rgba(26,58,92,.08); }
.g-nav { background:rgba(255,255,255,.38); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur);
  border-color:rgba(26,58,92,.08) !important; }
.g-nav-link { display:block; padding:8px 12px; border-radius:12px; font-size:13.5px; font-weight:500; color:var(--c-body); white-space:nowrap;
  transition:background-color .2s ease, color .2s ease, transform .2s var(--spring); }
.g-nav-link:hover { background:rgba(255,255,255,.7); color:var(--c-title); }
.g-nav-link:active { transform:scale(.97); }
.g-nav-link.is-on { background:var(--c-navy); color:#fff; box-shadow:0 8px 18px -10px rgba(26,58,92,.7); }
.g-nav-label { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--g-faint); font-weight:600; }

/* ── 유리 카드·패널 ── */
.g-card { position:relative; border-radius:22px; padding:15px 16px 13px;
  background-color:var(--glass);
  background-image:linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%);   /* 윗면 광택 */
  -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur);
  box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px rgba(255,255,255,.35), var(--ring),
             0 1px 1px rgba(16,24,40,.03), 0 14px 34px -14px rgba(26,58,92,.32);
  transition:transform .35s var(--spring), box-shadow .35s var(--spring), background-color .25s ease;
  animation:g-in .45s var(--spring); }
@keyframes g-in { from { opacity:0; transform:translateY(8px) scale(.985); } }
@media (hover:hover) {
  .g-card.cursor-pointer:hover, .g-card.g-lift:hover { transform:translateY(-2px);
    box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px rgba(255,255,255,.4), var(--ring),
               0 2px 2px rgba(16,24,40,.03), 0 20px 44px -16px rgba(26,58,92,.42); } }
.g-card.cursor-pointer:active, .g-card.g-lift:active { transform:scale(.985); }
.g-card.is-done { background-color:var(--glass-done); }
.g-card.is-done .g-name { color:var(--g-faint); }
.g-card.is-urgent { --ring:0 0 0 1.5px rgba(255,59,48,.45), 0 10px 26px -12px rgba(255,59,48,.38); }
.g-panel { border-radius:18px; background:rgba(255,255,255,.44); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 0 0 1px var(--edge), 0 10px 26px -16px rgba(26,58,92,.3); }
.g-panel.g-strong { background:var(--glass-strong); }
.g-divider { border-top:1px solid rgba(26,58,92,.08); }
.g-hairline { border-color:rgba(26,58,92,.08) !important; }
.g-title { font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--c-title); }
.g-muted { color:var(--g-muted); }

/* ── 알약(태그·상태·신규/기존) ── */
.g-chip { display:inline-flex; align-items:center; gap:3px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:500; line-height:1.25; white-space:nowrap; }
.g-chip.g-plain { background:rgba(60,60,67,.08); color:#48484e; }
.g-chip.g-wrap { white-space:normal; max-width:100%; overflow-wrap:anywhere; }   /* 긴 글(열람자 목록 등)은 줄바꿈 */
.g-state { display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:600; line-height:1.25; white-space:nowrap; }
.g-new { border:0; cursor:pointer; padding:3px 8px; border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.01em; line-height:1.25; white-space:nowrap;
  transition:transform .2s var(--spring), background-color .2s ease; }
.g-new:active { transform:scale(.94); }
.g-new.is-new { background:rgba(52,199,89,.2); color:#1b7f3a; box-shadow:inset 0 0 0 1px rgba(52,199,89,.28); }
.g-new.is-old { background:rgba(60,60,67,.1); color:#4f4f56; }

/* ── 단추 ── */
.g-btn { display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:5px 11px; border-radius:999px; font-size:11.5px; font-weight:600; line-height:1.25; white-space:nowrap; cursor:pointer;
  background:rgba(255,255,255,.74); color:var(--c-navy); border:0; box-shadow:inset 0 0 0 1px rgba(26,58,92,.16), 0 1px 2px rgba(16,24,40,.05);
  transition:background-color .2s ease, color .2s ease, transform .2s var(--spring), box-shadow .2s ease; }
.g-btn, .g-nav-link { text-decoration:none; }
.g-btn:hover { background:#fff; }
.g-btn:active { transform:scale(.96); }
.g-btn:disabled { opacity:.55; transform:none; cursor:default; }
.g-btn.g-md { padding:8px 16px; font-size:13px; }
.g-btn.g-lg { padding:10px 20px; font-size:14px; }
.g-btn.g-ok { background:rgba(52,199,89,.16); color:#1b7f3a; box-shadow:inset 0 0 0 1px rgba(52,199,89,.32); }
.g-btn.g-ok:hover { background:rgba(52,199,89,.24); }
.g-btn.g-primary { background:var(--c-navy); color:#fff; box-shadow:0 8px 18px -8px rgba(26,58,92,.6); }
.g-btn.g-primary:hover { background:var(--c-navy-d); }
.g-btn.g-danger { background:rgba(255,59,48,.1); color:#b3261e; box-shadow:inset 0 0 0 1px rgba(255,59,48,.3); }
.g-btn.g-danger:hover { background:rgba(255,59,48,.16); }
.g-btn.g-busy { background:rgba(255,159,10,.16); color:#8a5200; box-shadow:inset 0 0 0 1px rgba(255,159,10,.38); cursor:wait; }
.g-btn.g-quiet { background:transparent; box-shadow:none; color:#4f4f56; font-weight:500; }
.g-btn.g-quiet:hover { background:rgba(60,60,67,.08); color:var(--c-body); }

/* ── 구간 선택(segmented)·토글·스위치 ── */
.g-seg { display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:999px; background:rgba(26,58,92,.09);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:inset 0 1px 1px rgba(16,24,40,.06); }
.g-seg-btn { padding:6px 13px; border-radius:999px; font-size:12px; font-weight:600; color:#45454c; line-height:1.25; white-space:nowrap; border:0; background:transparent; cursor:pointer;
  transition:background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .2s var(--spring); }
.g-seg-btn:active { transform:scale(.96); }
.g-seg-btn.is-on { background:#fff; color:var(--c-navy); box-shadow:0 1px 2px rgba(16,24,40,.1), 0 6px 14px -6px rgba(26,58,92,.38); }
.g-toggle { padding:7px 14px; border-radius:999px; font-size:12px; font-weight:600; color:#45454c; line-height:1.25; white-space:nowrap; border:0; cursor:pointer;
  background:rgba(26,58,92,.09); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:inset 0 1px 1px rgba(16,24,40,.06);
  transition:background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .2s var(--spring); }
.g-toggle:active { transform:scale(.96); }
.g-toggle.is-hot { background:#d9281f; color:#fff; box-shadow:0 6px 14px -6px rgba(217,40,31,.6); }     /* 흰 글자 대비 4.9:1 */
.g-toggle.is-on  { background:var(--c-navy); color:#fff; box-shadow:0 6px 14px -6px rgba(26,58,92,.6); }
.g-switch { position:relative; display:inline-block; width:51px; height:31px; border-radius:999px; background:rgba(120,120,128,.32); border:0; cursor:pointer; flex-shrink:0;
  transition:background-color .25s ease; }
.g-switch.is-on { background:#34c759; }
.g-switch:disabled { opacity:.5; cursor:default; }
.g-switch-knob { position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.22), 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.06); transition:transform .25s var(--spring); }   /* 손잡이 윤곽 — 켜짐(초록) 위에서도 보이게 */
.g-switch.is-on .g-switch-knob { transform:translateX(20px); }

/* ── 입력 ── */
.g-input { box-sizing:border-box; width:100%; background:rgba(255,255,255,.74); border:1px solid rgba(26,58,92,.16); border-radius:14px; padding:8px 12px; font-size:14px; color:var(--c-title); outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.g-input::placeholder { color:#6b6b72; }
.g-input:focus { background:#fff; border-color:rgba(26,58,92,.5); box-shadow:0 0 0 3px rgba(26,58,92,.12); }
.g-input.g-bare { background:transparent; border-color:transparent; }
.g-input.g-bare:hover { border-color:rgba(26,58,92,.16); }
.g-input.g-bare:focus { background:#fff; border-color:rgba(26,58,92,.5); }

/* ── 목록 행(인박스 대화 목록 등) — 흐림 없음 ── */
.g-row { margin:2px 8px; padding:10px 12px; border-radius:14px; cursor:pointer; border:0;
  transition:background-color .2s ease, box-shadow .2s ease, transform .2s var(--spring); }
.g-row:hover { background:rgba(255,255,255,.55); }
.g-row:active { transform:scale(.99); }
.g-row.is-on { background:rgba(255,255,255,.8); box-shadow:inset 0 0 0 1px rgba(26,58,92,.14), 0 8px 18px -12px rgba(26,58,92,.4); }

/* ── 말풍선 — 흐림 없음(수백 개) ── */
.g-bubble-in  { background:rgba(255,255,255,.88); border-radius:18px 18px 18px 6px; padding:8px 14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 1px 2px rgba(16,24,40,.06), 0 6px 16px -12px rgba(26,58,92,.3); }
.g-bubble-out { background:rgba(222,231,243,.9); border-radius:18px 18px 6px 18px; padding:8px 14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 1px 2px rgba(16,24,40,.06), 0 6px 16px -12px rgba(26,58,92,.3); }
.g-bubble-out.is-staff { background:rgba(203,218,238,.92); }
.g-bubble-out.is-failed { background:rgba(255,236,235,.94); box-shadow:0 0 0 1px rgba(255,59,48,.35), 0 1px 2px rgba(16,24,40,.06); }

/* ── 모달 ── */
.g-modal-backdrop { background:rgba(26,58,92,.25); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.g-modal { background:rgba(255,255,255,.95); border-radius:22px; box-shadow:0 24px 60px -20px rgba(26,58,92,.45), 0 0 0 1px rgba(26,58,92,.08); }

/* ── 표 ── */
.g-table { width:100%; border-collapse:separate; border-spacing:0; }
.g-table th { font-size:11.5px; font-weight:600; color:var(--g-muted); text-align:left; padding:8px 12px; letter-spacing:.02em; }
.g-table td { padding:10px 12px; border-top:1px solid rgba(26,58,92,.07); font-size:13px; }
.g-table tr:hover td { background:rgba(255,255,255,.4); }

/* ── 대체·접근성·휴대폰 ── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .g-card, .g-panel { background-color:rgba(255,255,255,.93); } .g-card.is-done { background-color:rgba(255,255,255,.86); }
  .g-header, .g-nav { background:rgba(255,255,255,.92); } .g-seg, .g-toggle { background:rgba(26,58,92,.1); } }
@media (prefers-reduced-motion: reduce) {
  .g-card, .g-panel, .g-btn, .g-seg-btn, .g-toggle, .g-new, .g-nav-link, .g-row, .g-switch, .g-switch-knob, .g-input, .animate-pulse { animation:none !important; transition:none !important; }
  .g-card.cursor-pointer:hover, .g-card.g-lift:hover, .g-card.cursor-pointer:active, .g-card.g-lift:active, .g-btn:active, .g-seg-btn:active, .g-toggle:active, .g-new:active, .g-nav-link:active, .g-row:active { transform:none; } }
/* 키보드 초점 — 모든 조작 요소에 같은 표시 */
.g-btn:focus-visible, .g-seg-btn:focus-visible, .g-toggle:focus-visible, .g-new:focus-visible, .g-nav-link:focus-visible, .g-row:focus-visible, .g-switch:focus-visible { outline:2px solid rgba(26,58,92,.55); outline-offset:2px; }
@media (max-width: 640px) { :root { --g-blur:blur(14px) saturate(1.6); } }