/* GLASS 템플릿 — Apple 유리(Liquid Glass) 느낌. 은은한 색 번짐 배경 위에 반투명 · 흐림 패널, 둥근 모서리, 알약 버튼, 시스템 글꼴.
   틀(배치 · 간격)은 그대로. 진행 바는 칸 나뉜 그대로, 조직 색 위치도 그대로.
   설정 > 디자인에서 GLASS를 고르면 <html data-skin="glass"> (db.js applyPrefs).
   규칙은 :where()로 감싸 특이도를 올리지 않는다 → app.css의 완료 · 흐림 같은 상태 규칙이 그대로 이긴다.
   흐림(backdrop-filter)은 요소 자신이 아니라 ::before 층에 준다. 요소에 직접 주면 그 안의 position: fixed 창(설정 · 팝업)이 갇힌다. */

:root[data-skin="glass"] {
  --bar: var(--org-l, var(--fg));   /* 진행 바: 조직 색, 없으면 흑백 */
  --bg: #EEF1F8; --fg: #1D1D1F; --mid: #6E6E73; --faint: rgba(60, 60, 67, .16); --hover: rgba(255, 255, 255, .55);
  --paper: rgba(255, 255, 255, .62); --glass: rgba(255, 255, 255, .55); --glass-hi: rgba(255, 255, 255, .78); --edge: rgba(255, 255, 255, .75);
  /* 강조(포커스 · 체크 · 마우스 올린 테두리 · 칩 · 배경 번짐) = 조직 색, 없으면 파랑 */
  --accent: var(--org-l, #007AFF); --red: #FF3B30;
  --hi: color-mix(in srgb, var(--accent) 70%, transparent);
  --bw: 1px; --line: rgba(0, 0, 0, .08); --line-hi: rgba(0, 0, 0, .18);
  --org: var(--org-l, var(--accent)); --on-org: var(--on-org-l, #FFFFFF);
  --sh: 0 8px 32px rgba(31, 38, 80, .10), 0 1px 2px rgba(31, 38, 80, .06);
  --sh-pop: 0 24px 64px rgba(31, 38, 80, .22), 0 2px 6px rgba(31, 38, 80, .08);
  --blur: blur(22px) saturate(180%);
  --wash: radial-gradient(60vw 60vw at 8% 0%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 60%),
          radial-gradient(55vw 55vw at 100% 10%, rgba(255, 150, 200, .35), transparent 60%),
          radial-gradient(70vw 60vw at 50% 110%, rgba(120, 230, 210, .35), transparent 60%);
  --pixel: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --logo: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Pretendard Variable", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="glass"]:not([data-theme="light"]) {
    --bar: var(--org-d, var(--fg));
    --bg: #0B0C14; --fg: #F5F5F7; --mid: #A1A1A6; --faint: rgba(235, 235, 245, .16); --hover: rgba(255, 255, 255, .10);
    --paper: rgba(44, 44, 56, .55); --glass: rgba(36, 36, 48, .50); --glass-hi: rgba(70, 70, 86, .62); --edge: rgba(255, 255, 255, .14);
    --accent: var(--org-d, #0A84FF); --red: #FF453A;
    --line: rgba(255, 255, 255, .10); --line-hi: rgba(255, 255, 255, .24);
    --org: var(--org-d, var(--accent)); --on-org: var(--on-org-d, #FFFFFF);
    --sh: 0 8px 32px rgba(0, 0, 0, .35); --sh-pop: 0 24px 64px rgba(0, 0, 0, .55);
    --wash: radial-gradient(60vw 60vw at 8% 0%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 60%),
            radial-gradient(55vw 55vw at 100% 10%, rgba(190, 70, 160, .28), transparent 60%),
            radial-gradient(70vw 60vw at 50% 110%, rgba(20, 160, 150, .25), transparent 60%);
    color-scheme: dark;
  }
}
:root[data-skin="glass"][data-theme="dark"] {
    --bar: var(--org-d, var(--fg));
  --bg: #0B0C14; --fg: #F5F5F7; --mid: #A1A1A6; --faint: rgba(235, 235, 245, .16); --hover: rgba(255, 255, 255, .10);
  --paper: rgba(44, 44, 56, .55); --glass: rgba(36, 36, 48, .50); --glass-hi: rgba(70, 70, 86, .62); --edge: rgba(255, 255, 255, .14);
  --accent: var(--org-d, #0A84FF); --red: #FF453A;
  --line: rgba(255, 255, 255, .10); --line-hi: rgba(255, 255, 255, .24);
  --org: var(--org-d, var(--accent)); --on-org: var(--on-org-d, #FFFFFF);
  --sh: 0 8px 32px rgba(0, 0, 0, .35); --sh-pop: 0 24px 64px rgba(0, 0, 0, .55);
  --wash: radial-gradient(60vw 60vw at 8% 0%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 60%),
          radial-gradient(55vw 55vw at 100% 10%, rgba(190, 70, 160, .28), transparent 60%),
          radial-gradient(70vw 60vw at 50% 110%, rgba(20, 160, 150, .25), transparent 60%);
  color-scheme: dark;
}

/* ---- 배경: 색 번짐 (화면에 고정) */
:root[data-skin="glass"] { background-color: var(--bg); background-image: var(--wash); background-attachment: fixed; min-height: 100%; }
:where(:root[data-skin="glass"]) body { background: transparent; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* ---- 유리 패널: 반투명 + 흐림 + 위쪽 빛 테두리. 흐림은 ::before 층 */
:where(:root[data-skin="glass"]) .top, :where(:root[data-skin="glass"]) .box, :where(:root[data-skin="glass"]) .proc, :where(:root[data-skin="glass"]) .pcard2, :where(:root[data-skin="glass"]) .mcard, :where(:root[data-skin="glass"]) .tpl, :where(:root[data-skin="glass"]) .statrow, :where(:root[data-skin="glass"]) .weekcal, :where(:root[data-skin="glass"]) .modal { position: relative; isolation: isolate; background: transparent; border: 1px solid var(--edge); box-shadow: var(--sh), inset 0 1px 0 var(--edge); }
:where(:root[data-skin="glass"]) .top { position: sticky; }
:where(:root[data-skin="glass"]) .top::before, :where(:root[data-skin="glass"]) .box::before, :where(:root[data-skin="glass"]) .proc::before, :where(:root[data-skin="glass"]) .pcard2::before, :where(:root[data-skin="glass"]) .mcard::before, :where(:root[data-skin="glass"]) .tpl::before, :where(:root[data-skin="glass"]) .statrow::before, :where(:root[data-skin="glass"]) .weekcal::before, :where(:root[data-skin="glass"]) .modal::before, :where(:root[data-skin="glass"]) .toast::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); pointer-events: none; }
:where(:root[data-skin="glass"]) .modal::before, :where(:root[data-skin="glass"]) .toast::before { background: var(--glass-hi); }
:where(:root[data-skin="glass"]) .toast { isolation: isolate; background: transparent; border: 1px solid var(--edge); box-shadow: var(--sh-pop), inset 0 1px 0 var(--edge); }

/* ---- 모서리 */
:where(:root[data-skin="glass"]) .box, :where(:root[data-skin="glass"]) .proc, :where(:root[data-skin="glass"]) .pcard2, :where(:root[data-skin="glass"]) .mcard, :where(:root[data-skin="glass"]) .tpl, :where(:root[data-skin="glass"]) .statrow, :where(:root[data-skin="glass"]) .weekcal, :where(:root[data-skin="glass"]) .empty, :where(:root[data-skin="glass"]) .newcard, :where(:root[data-skin="glass"]) .newproc, :where(:root[data-skin="glass"]) .idea, :where(:root[data-skin="glass"]) .filepick { border-radius: 18px !important; }
:where(:root[data-skin="glass"]) .modal { border-radius: 24px !important; }
:where(:root[data-skin="glass"]) .btn, :where(:root[data-skin="glass"]) .orgbtn, :where(:root[data-skin="glass"]) .tabs a, :where(:root[data-skin="glass"]) .filters, :where(:root[data-skin="glass"]) .sw, :where(:root[data-skin="glass"]) .filters button, :where(:root[data-skin="glass"]) .sw button, :where(:root[data-skin="glass"]) .filters .step, :where(:root[data-skin="glass"]) .toast, :where(:root[data-skin="glass"]) .badge, :where(:root[data-skin="glass"]) .pin, :where(:root[data-skin="glass"]) .doing, :where(:root[data-skin="glass"]) .iconbtn { border-radius: 999px !important; }
:where(:root[data-skin="glass"]) input[type=text], :where(:root[data-skin="glass"]) input[type=date], :where(:root[data-skin="glass"]) textarea, :where(:root[data-skin="glass"]) select, :where(:root[data-skin="glass"]) .calitem, :where(:root[data-skin="glass"]) .note, :where(:root[data-skin="glass"]) .colorpick button { border-radius: 12px !important; }
:where(:root[data-skin="glass"]) .mkind, :where(:root[data-skin="glass"]) .pmmark, :where(:root[data-skin="glass"]) .collab-badge, :where(:root[data-skin="glass"]) .who .role, :where(:root[data-skin="glass"]) .preview-procs span, :where(:root[data-skin="glass"]) .pri { border-radius: 6px !important; }
:where(:root[data-skin="glass"]) input[type=checkbox] { border-radius: 6px !important; }
:where(:root[data-skin="glass"]) .tag { border-radius: 50% !important; }
:where(:root[data-skin="glass"]) .proc, :where(:root[data-skin="glass"]) .statrow, :where(:root[data-skin="glass"]) .weekcal { overflow: hidden; }

/* ---- 글자 */
:where(:root[data-skin="glass"]) h1, :where(:root[data-skin="glass"]) h2 { letter-spacing: -.02em; font-weight: 600; }
:where(:root[data-skin="glass"]) .ptitle { font-weight: 700; text-transform: none; letter-spacing: -.03em; font-size: 2.1rem; }
:where(:root[data-skin="glass"]) .px { letter-spacing: 0; }
:where(:root[data-skin="glass"]) .px.reg, :where(:root[data-skin="glass"]) .proc-h .nm b { font-weight: 600; }
:where(:root[data-skin="glass"]) .label { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--mid); }
:where(:root[data-skin="glass"]) .logo, :where(:root[data-skin="glass"]) .brand { font-family: var(--logo); font-weight: 700; letter-spacing: .06em; }

/* ---- 상단: 떠 있는 유리 바 */
:where(:root[data-skin="glass"]) .top { border-width: 0 0 1px; box-shadow: 0 1px 0 var(--line); }
:where(:root[data-skin="glass"]) .top { border-bottom-color: var(--line); }
:where(:root[data-skin="glass"]) .orgbtn { background: var(--glass); border: 1px solid var(--edge); font-weight: 600; padding: 3px 12px; box-shadow: inset 0 1px 0 var(--edge); }
:where(:root[data-skin="glass"]) .tabs { gap: 4px; }
:where(:root[data-skin="glass"]) .tabs a { border: 0; padding: 4px 12px; color: var(--mid); font-weight: 500; }
:where(:root[data-skin="glass"]) .tabs a:not(.on):hover { background: var(--hover); color: var(--fg); }
:where(:root[data-skin="glass"]) .tabs a.on { background: var(--org); color: var(--on-org); box-shadow: 0 2px 8px color-mix(in srgb, var(--org) 35%, transparent); }
:where(:root[data-skin="glass"]) .iconbtn { border: 0; }
:where(:root[data-skin="glass"]) .iconbtn:hover { background: var(--hover); }

/* ---- 버튼: 유리 알약, 주요 버튼은 색 알약 */
:where(:root[data-skin="glass"]) .btn { background: var(--glass); border: 1px solid var(--edge); font-weight: 500; padding: 5px 14px; box-shadow: inset 0 1px 0 var(--edge), 0 1px 2px rgba(0, 0, 0, .06); transition: background .2s, transform .1s; }
:where(:root[data-skin="glass"]) .btn:hover { background: var(--glass-hi); }
:where(:root[data-skin="glass"]) .btn:active { transform: scale(.97); }
:where(:root[data-skin="glass"]) .btn.sm { padding: 2px 10px; font-size: 13px; }
:where(:root[data-skin="glass"]) .btn.solid { background: var(--org); border-color: transparent; color: var(--on-org); box-shadow: 0 4px 14px color-mix(in srgb, var(--org) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); font-weight: 600; }
:where(:root[data-skin="glass"]) .btn.solid:hover { background: var(--org); filter: brightness(1.06); }
:where(:root[data-skin="glass"]) .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--mid); }
:where(:root[data-skin="glass"]) .btn.ghost:hover { background: var(--hover); color: var(--fg); text-decoration: none; }
:where(:root[data-skin="glass"]) .btn.danger { background: var(--red); border-color: transparent; color: #FFFFFF; box-shadow: 0 4px 14px color-mix(in srgb, var(--red) 35%, transparent); }
:where(:root[data-skin="glass"]) .btn:disabled { opacity: .4; }

/* ---- 입력 */
:where(:root[data-skin="glass"]) input[type=text], :where(:root[data-skin="glass"]) input[type=date], :where(:root[data-skin="glass"]) textarea, :where(:root[data-skin="glass"]) select { background: var(--glass); border: 1px solid var(--line); padding: 7px 12px; transition: box-shadow .2s, border-color .2s; }
:where(:root[data-skin="glass"]) input[type=text]:focus, :where(:root[data-skin="glass"]) input[type=date]:focus, :where(:root[data-skin="glass"]) textarea:focus, :where(:root[data-skin="glass"]) select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
:where(:root[data-skin="glass"]) input.bare { background: transparent; border: 1px solid transparent; border-radius: 10px !important; padding: 4px 8px; }
:where(:root[data-skin="glass"]) input.bare:not(:focus):hover { background: var(--hover); }
:where(:root[data-skin="glass"]) input.bare:focus { border-color: var(--accent); background: var(--glass); }
:where(:root[data-skin="glass"]) :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
:where(:root[data-skin="glass"]) input[type=checkbox] { border: 1.5px solid var(--line-hi); background: var(--glass); }
:where(:root[data-skin="glass"]) input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
:where(:root[data-skin="glass"]) input[type=checkbox]:checked::after { width: 4px; height: 8px; background: none; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }

/* ---- 카드 */
:where(:root[data-skin="glass"]) .pcard, :where(:root[data-skin="glass"]) .mcard { transition: transform .2s, box-shadow .2s; }
:where(:root[data-skin="glass"]) .pcard:hover, :where(:root[data-skin="glass"]) .mcard:hover { transform: translateY(-2px); box-shadow: var(--sh-pop), inset 0 1px 0 var(--edge); }
:where(:root[data-skin="glass"]) .mcard.pinned { box-shadow: var(--sh), inset 3px 0 0 var(--org); }
:where(:root[data-skin="glass"]) .tpl.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--sh); }
:where(:root[data-skin="glass"]) .proc-b, :where(:root[data-skin="glass"]) .rule { border-top: 1px solid var(--line); }
:where(:root[data-skin="glass"]) .pcard2.finished { border-color: var(--edge); }
:where(:root[data-skin="glass"]) .pcard2.finished::before { background: color-mix(in srgb, var(--glass) 60%, transparent); }
:where(:root[data-skin="glass"]) .pcard2.finished .badge { background: var(--faint); color: var(--mid); }
:where(:root[data-skin="glass"]) .newcard, :where(:root[data-skin="glass"]) .newproc, :where(:root[data-skin="glass"]) .empty, :where(:root[data-skin="glass"]) .filepick, :where(:root[data-skin="glass"]) .idea { border: 1.5px dashed var(--line-hi); background: color-mix(in srgb, var(--glass) 50%, transparent); }
:where(:root[data-skin="glass"]) .newcard:hover, :where(:root[data-skin="glass"]) .newproc:focus-within, :where(:root[data-skin="glass"]) .filepick:hover, :where(:root[data-skin="glass"]) .idea:hover { border-color: var(--accent); color: var(--accent); }
:where(:root[data-skin="glass"]) .note { border: 1px solid var(--edge); background: color-mix(in srgb, var(--accent) 12%, var(--glass)); }
:where(:root[data-skin="glass"]) .overlay { background: rgba(10, 12, 30, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:where(:root[data-skin="glass"]) .modal { border-color: var(--edge); box-shadow: var(--sh-pop), inset 0 1px 0 var(--edge); padding: 22px; }
:where(:root[data-skin="glass"]) .toast { color: var(--fg); }

/* ---- 목록 줄 */
:where(:root[data-skin="glass"]) .task { border-bottom-color: var(--line); }
:where(:root[data-skin="glass"]) .task:hover { background: var(--hover); }
:where(:root[data-skin="glass"]) .task.mine { box-shadow: inset 3px 0 0 var(--org); }
:where(:root[data-skin="glass"]) .task.compact.mine { box-shadow: none; }
:where(:root[data-skin="glass"]) .clrow, :where(:root[data-skin="glass"]) .logline, :where(:root[data-skin="glass"]) .mitem { border-bottom-color: var(--line); }
:where(:root[data-skin="glass"]) .due.late { color: var(--red); text-decoration: none; font-weight: 600; }
:where(:root[data-skin="glass"]) .pri { border: 1px solid var(--red); color: var(--red); }

/* ---- 칸 진행 바 */
/* ---- 진행 바: 유리 알약 (색 = --bar: 조직 색, 없으면 흑백). 완료 = 빛나는 알약, 진행 중 = 빛이 흐르는 반투명, 할 일 = 빈 유리 */
:where(:root[data-skin="glass"]) .seg { gap: 3px; height: 10px; }
:where(:root[data-skin="glass"]) .seg.lg { height: 14px; gap: 4px; }
:where(:root[data-skin="glass"]) .seg.sm { height: 8px; }
:where(:root[data-skin="glass"]) .seg i { border-radius: 999px !important; background: var(--faint); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06); }
:where(:root[data-skin="glass"]) .seg i.d { background: linear-gradient(180deg, color-mix(in srgb, var(--bar) 70%, white), var(--bar) 60%, color-mix(in srgb, var(--bar) 82%, black)); box-shadow: 0 0 8px color-mix(in srgb, var(--bar) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45); }
:where(:root[data-skin="glass"]) .seg i.w { background: linear-gradient(90deg, color-mix(in srgb, var(--bar) 22%, transparent), color-mix(in srgb, var(--bar) 55%, transparent), color-mix(in srgb, var(--bar) 22%, transparent)); background-size: 200% 100%; animation: glass-flow 2.4s linear infinite; }
@keyframes glass-flow { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
:where(:root[data-skin="glass"]) .dim .seg i.d, :where(:root[data-skin="glass"]) .pcard2.finished .seg i.d { background: color-mix(in srgb, var(--mid) 55%, transparent); box-shadow: none; }
:where(:root[data-skin="glass"]) .dim .seg i.w { background: color-mix(in srgb, var(--mid) 30%, transparent); animation: none; }
:where(:root[data-skin="glass"]) .legend span::before { border-radius: 999px; width: 10px; height: 6px; vertical-align: 1px; }
:where(:root[data-skin="glass"]) .legend .d::before { background: var(--bar); }
:where(:root[data-skin="glass"]) .legend .w::before { background: color-mix(in srgb, var(--bar) 40%, transparent); }

/* ---- 칩 */
:where(:root[data-skin="glass"]) .tag { border-width: 1.5px; font-family: var(--body); font-size: 10px; font-weight: 600; background: var(--glass); }
:where(:root[data-skin="glass"]) .badge { font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: 0; background: var(--faint); color: var(--fg); padding: 1px 8px; }
:where(:root[data-skin="glass"]) .pin { font-family: var(--body); font-size: 10px; font-weight: 700; padding: 1px 7px; }
:where(:root[data-skin="glass"]) .doing { border: 0; background: color-mix(in srgb, var(--accent) 16%, transparent); color: color-mix(in srgb, var(--accent) 80%, var(--fg)); font-size: 11px; font-weight: 600; padding: 1px 8px; }
:where(:root[data-skin="glass"]) .mkind, :where(:root[data-skin="glass"]) .who .role, :where(:root[data-skin="glass"]) .collab-badge, :where(:root[data-skin="glass"]) .preview-procs span, :where(:root[data-skin="glass"]) .pmmark { border-color: var(--line-hi); font-family: var(--body); letter-spacing: 0; }

/* ---- 세그먼트 버튼: 유리 트랙 + 흰 알약 */
:where(:root[data-skin="glass"]) .filters, :where(:root[data-skin="glass"]) .sw { border: 1px solid var(--edge); background: var(--glass); padding: 3px; gap: 2px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06); }
:where(:root[data-skin="glass"]) .filters button, :where(:root[data-skin="glass"]) .sw button, :where(:root[data-skin="glass"]) .filters .step { background: transparent; border: 0 !important; color: var(--mid); font-weight: 500; padding: 3px 12px; transition: background .2s, color .2s; }
:where(:root[data-skin="glass"]) .sw button { font-family: var(--body); font-size: 13px; }
:where(:root[data-skin="glass"]) .filters button:not(.on):hover, :where(:root[data-skin="glass"]) .sw button:not(.on):hover { color: var(--fg); }
:where(:root[data-skin="glass"]) .filters button.on, :where(:root[data-skin="glass"]) .sw button.on, :where(:root[data-skin="glass"]) .filters .step.on { background: var(--glass-hi); color: var(--fg); font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, .12), inset 0 1px 0 var(--edge); }

/* ---- 달력 · 숫자 칸 */
:where(:root[data-skin="glass"]) .calitem { border: 1px solid var(--edge); background: var(--glass); }
:where(:root[data-skin="glass"]) .calitem:hover { background: var(--glass-hi); }
:where(:root[data-skin="glass"]) .calday.today { background: color-mix(in srgb, var(--accent) 10%, transparent); }
:where(:root[data-skin="glass"]) .colorpick button { border: 1px solid var(--edge); background: var(--glass); }
:where(:root[data-skin="glass"]) .colorpick button.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* ---- 로딩 화면: 유리 카드 안에서 빛이 흐르는 알약 */
:where(:root[data-skin="glass"]) .loader { gap: 18px; }
:where(:root[data-skin="glass"]) .ld-logo { font-family: var(--logo); font-weight: 700; font-size: 1.6rem; letter-spacing: .08em; }
:where(:root[data-skin="glass"]) .ld-bar { width: 180px; height: 8px; gap: 0; border-radius: 999px; overflow: hidden; position: relative;
  background: var(--glass); border: 1px solid var(--edge); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
:where(:root[data-skin="glass"]) .ld-bar i { display: none; }
:where(:root[data-skin="glass"]) .ld-bar::before { content: ""; position: absolute; inset: 0; width: 45%; border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 80%, white), transparent); animation: ld-glass 1.4s ease-in-out infinite; }
@keyframes ld-glass { 0% { transform: translateX(-100%); } 100% { transform: translateX(230%); } }
:where(:root[data-skin="glass"]) .ld-text { font-family: var(--body); font-size: 13px; }
:where(:root[data-skin="glass"]) .ld-text::after { content: none; }

@media (prefers-reduced-motion: reduce) { :where(:root[data-skin="glass"]) * { transition: none !important; } :where(:root[data-skin="glass"]) .ld-bar::before, :where(:root[data-skin="glass"]) .seg i.w { animation: none; } }

/* ---- 마우스 올린 테두리: 조직 색 */
:where(:root[data-skin="glass"]) .pcard:hover, :where(:root[data-skin="glass"]) .mcard:hover, :where(:root[data-skin="glass"]) .tpl:hover, :where(:root[data-skin="glass"]) .calitem:hover, :where(:root[data-skin="glass"]) .orgbtn:hover { border-color: var(--hi); }
:where(:root[data-skin="glass"]) .btn:not(.solid):not(.ghost):not(.danger):hover { border-color: var(--hi); }
:where(:root[data-skin="glass"]) input[type=text]:not(:focus):hover, :where(:root[data-skin="glass"]) input[type=date]:not(:focus):hover, :where(:root[data-skin="glass"]) textarea:not(:focus):hover, :where(:root[data-skin="glass"]) select:not(:focus):hover, :where(:root[data-skin="glass"]) input.bare:not(:focus):hover { border-color: var(--hi); }
:where(:root[data-skin="glass"]) input[type=checkbox]:hover { border-color: var(--accent); }