/* 빛 · 움직임 — 앱 전체 (2026-10-20 대표 지시: 무료특강 실행창처럼 다 이런 모션, 불사자 느낌)
   2026-10-20 다시 짬 — bulsaja.com 을 본보기로: 어두운 바탕 + 점 격자 + 위에서 번지는 빛 + 천천히 흐르는 오로라,
   유리판 카드 + 커서를 따라가는 테두리 빛, 빛 그림자를 가진 주요 버튼 + 지나가는 반짝임, 아래에서 떠오르는 등장.
   - 곡선 2개: --mo-out(들어오고 반응할 때) · --mo-inout(자리 이동) / 시간: 120 · 180 · 280 · 560ms
   - 색은 지금 테마(--accent 하늘색) 그대로. 커서 위치(--mx · --my)는 motion.js 가 채운다 (화면 전체를 따라다니던 빛은 2026-10-21 뺌).
   style.css 와 따로 둔 이유: 다른 작업이 style.css 를 자주 고쳐서 서로 덮어쓰지 않게. 이 파일은 style.css 뒤에 읽힌다. */
:root {
  --mo-out: cubic-bezier(.16, 1, .3, 1);
  --mo-inout: cubic-bezier(.65, 0, .35, 1);
  --mo-1: 120ms; --mo-2: 180ms; --mo-3: 280ms; --mo-4: 560ms;
  --glow: color-mix(in srgb, var(--accent) 55%, transparent);
  --glass: color-mix(in srgb, var(--surface) 72%, transparent);
  --glass-line: color-mix(in srgb, var(--accent) 14%, transparent);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* 2026-10-23 대표 지시: 창 왼쪽 위 모서리에 흰 점이 보이던 것 — 화면 맨 바닥(html)에 색이 없어 브라우저 기본 흰색이 비쳤다. 바탕색을 직접 깐다 */
html { background: var(--ground); }

/* ── 바탕: 위에서 번지는 빛 + 천천히 흐르는 오로라 + 점 격자 (내리는 눈 자리를 대신한다) ── */
body {
  background:
    radial-gradient(1100px 520px at 50% -220px, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    var(--ground);
  background-attachment: fixed;
}
body::before, body::after {
  display: block; content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-size: auto; animation: none; opacity: 1;
}
body::before {   /* 오로라 — 두 덩어리 빛이 20초에 걸쳐 천천히 오간다 */
  inset: -20%;
  background-image:
    radial-gradient(38% 30% at 22% 18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(34% 28% at 82% 8%, color-mix(in srgb, #7FE3C4 10%, transparent), transparent 70%);
  filter: blur(20px);
  animation: mo-aurora 20s var(--mo-inout) infinite alternate;
}
body::after {    /* 점 격자 — 아래로 갈수록 옅어진다 */
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 100%);
  opacity: .55;
}
@keyframes mo-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, 3%, 0) scale(1.06); }
  100% { transform: translate3d(-3%, 5%, 0) scale(1.02); }
}
/* ── 반응: 필요한 속성만 전환 ── */
.panel, .card, .ld-box, .mk-queue li, .chap-menu .pg, .apps a, .pagesbar a,
.btn, button, input, select, textarea, summary, table.grid tr {
  transition: color var(--mo-2) var(--mo-out), background-color var(--mo-2) var(--mo-out),
    border-color var(--mo-2) var(--mo-out), box-shadow var(--mo-3) var(--mo-out), transform var(--mo-1) var(--mo-out);
}

/* ── 유리판: 칸 · 카드는 반투명 + 흐림 + 윗변 하이라이트 ── */
.panel, .card, .ld-box {
  background: var(--glass); border-color: var(--glass-line);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--hi), 0 1px 2px rgba(0, 0, 0, .18), 0 12px 32px -18px rgba(0, 0, 0, .5);
}

/* ── 커서를 따라가는 빛: 안쪽은 옅게, 테두리는 밝게 (bulsaja 카드처럼) ── */
.mo-spot { position: relative; isolation: isolate; }
.mo-spot::after {   /* 안쪽 빛 */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%);
  transition: opacity var(--mo-3) var(--mo-out);
}
.mo-spot::before {  /* 테두리 빛 — 1px 테두리 모양으로 오려 낸다 */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--glow), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity var(--mo-3) var(--mo-out);
}
.mo-spot:hover::after, .mo-spot:hover::before, .mo-spot:focus-within::before { opacity: 1; }
:is(.panel, .card, .ld-box, .mk-queue li, .chap-menu .pg):not(.mo-flat) { position: relative; isolation: isolate; }
:is(.panel, .card, .ld-box, .mk-queue li, .chap-menu .pg):not(.mo-flat)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%);
  transition: opacity var(--mo-3) var(--mo-out);
}
:is(.panel, .card, .ld-box, .mk-queue li, .chap-menu .pg):not(.mo-flat)::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--glow), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity var(--mo-3) var(--mo-out);
}
:is(.panel, .card, .ld-box, .mk-queue li, .chap-menu .pg):not(.mo-flat):hover::after,
:is(.panel, .card, .ld-box, .mk-queue li, .chap-menu .pg):not(.mo-flat):hover::before { opacity: 1; }
table.grid tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* ── 버튼: 주요 버튼은 하늘빛 그러데이션 + 빛 그림자, 올리면 반짝임이 한 번 지나간다 ── */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn.primary {
  border-color: transparent; color: #06121F;
  background: linear-gradient(180deg, #B5E2FA 0%, var(--accent) 55%, #5AAEDD 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 22px -10px var(--glow), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
.btn.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #C8EBFC 0%, #94D3F4 55%, #68B9E6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 30px -10px var(--glow), 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn.primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.btn.primary:hover:not(:disabled)::after { animation: mo-shine 760ms var(--mo-out); }
@keyframes mo-shine { 0% { left: -60%; opacity: 0; } 15% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
.btn:not(.primary):not(.danger) { background: color-mix(in srgb, var(--surface) 60%, transparent); border-color: var(--glass-line); }
.btn:not(.primary):not(.danger):hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.btn:active:not(:disabled) { transform: scale(.98); transition-duration: 60ms; }
.btn svg { transition: transform var(--mo-2) var(--mo-out); }
.btn:hover:not(:disabled) svg:last-child { transform: translateX(3px); }

/* ── 입력 칸: 하늘색 테두리 + 옅은 빛 고리 ── */
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 18px -6px var(--glow);
}

/* ── 왼쪽 업무 메뉴 (2026-10-21 다시 짬) ──
   유리판 + 오른쪽 경계선을 따라 빛이 천천히 내려온다 · 묶음 제목에 첫 화면과 같은 선 아이콘 ·
   올리면 민트빛 하이라이트 하나가 메뉴 사이를 미끄러져 따라다닌다(.ws-hover, motion.js) — 2026-10-20 대표 지시 민트색 유지 ·
   지금 페이지는 하늘색 막대가 빛나고, 다른 메뉴로 가면 그 표시가 새 자리로 미끄러져 간다(View Transitions) ·
   한 번 들어올 때만 메뉴가 위에서부터 차례로 나타난다(.ws-intro, motion.js) */
.workspace-sidebar {
  gap: 22px; padding: 20px 12px 16px; border-right: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--wood-2, #0F2340) 70%, transparent), color-mix(in srgb, var(--ground) 60%, transparent));
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
}
/* 2026-10-23 대표 지시: 메뉴를 옮길 때 로고 · 메뉴 글자 크기가 바뀌며 출렁이던 것 —
   「라이브 전」처럼 본문 글꼴을 바꾸는 페이지가 왼쪽 메뉴까지 바꿨다. 왼쪽 메뉴는 어느 페이지든 같은 글꼴로 고정한다 */
.workspace-sidebar { font-family: var(--font); letter-spacing: normal; font-size: 15px; }
.workspace-sidebar::after {   /* 오른쪽 경계선 + 내려오는 빛 */
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; pointer-events: none;
  background:
    linear-gradient(180deg, transparent, #DDF3FF 50%, transparent) 0 -160px / 1px 160px no-repeat,
    linear-gradient(180deg, transparent, var(--glass-line) 12%, var(--glass-line) 88%, transparent);
  animation: ws-edge 7s var(--mo-inout) infinite;
}
@keyframes ws-edge { 0% { background-position: 0 -160px, 0 0; } 60%, 100% { background-position: 0 calc(100vh + 160px), 0 0; } }

.workspace-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 18px; border-bottom: 0; position: relative;
  font-family: inherit; letter-spacing: 0; text-decoration: none; }
.workspace-brand::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--glass-line), transparent); }
.ws-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none;
  color: #06121F; font-size: 15px; font-weight: 800;
  background: linear-gradient(180deg, #B5E2FA, var(--accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px -6px var(--glow);
  transition: transform var(--mo-3) var(--mo-out), box-shadow var(--mo-3) var(--mo-out); }
/* 2026-10-23 대표 지시: 십자가 글자 대신 billibro 로고(_bb_mark.html) — 로고에 색이 들어 있어 바탕은 비운다 */
.ws-mark { background: none; box-shadow: 0 6px 18px -6px var(--glow); border-radius: 9px; }
.ws-mark .bb-mark { display: block; width: 100%; height: 100%; }
.ws-word { font-size: 18px; font-weight: 800; letter-spacing: -.01em;
  background: linear-gradient(180deg, #F2FAFF 30%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.workspace-brand:hover { text-decoration: none; }
/* 2026-10-23 대표 지시: 로고에 커서를 대도 아무것도 바뀌지 않게 (기울기 · 커지기 · 위쪽 흰 선 뺌) — 클릭하면 홈(오늘)으로만 간다 */
.workspace-brand:hover .ws-mark { transform: none; box-shadow: 0 6px 18px -6px var(--glow); }

.workspace-menu { position: relative; gap: 20px; }
.workspace-group h2 { display: flex; align-items: center; gap: 8px; margin: 0 8px 6px; color: var(--muted);
  font-size: 12px; font-weight: 700; letter-spacing: .03em; transition: color var(--mo-2) var(--mo-out); }
.workspace-group.is-current h2, .workspace-group:hover h2 { color: var(--ink); }
.workspace-group.is-current h2 .ws-icon { color: var(--accent); }
.ws-icon { display: grid; place-items: center; flex: none; color: var(--muted); transition: color var(--mo-2) var(--mo-out); }
.ws-icon .hm-svg { width: 15px; height: 15px; }
.ws-icon .hm-svg * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.workspace-group:hover .ws-icon .hm-svg * { animation: hm-redraw 800ms var(--mo-out) both; }
.workspace-items { position: relative; z-index: 1; gap: 1px; }

.workspace-item { position: relative; display: block; padding: 8px 10px 8px 31px; border: 0 !important; border-radius: 8px;
  color: color-mix(in srgb, var(--ink) 72%, transparent); font-size: 13.5px; font-weight: 500; line-height: 1.35; text-decoration: none;
  transition: color var(--mo-2) var(--mo-out), transform var(--mo-1) var(--mo-out); }
.workspace-item:hover { color: #E9FFF8; background: transparent; text-decoration: none; }
.workspace-item:active { transform: scale(.98); }
.workspace-item.is-current { color: #FFFFFF; font-weight: 650; view-transition-name: ws-current;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 4%, transparent) 85%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent); }
.workspace-item.is-current::before {   /* 지금 페이지 막대 — 빛이 위아래로 흐른다 */
  content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 12px var(--accent);
  animation: ws-dot 2.8s ease-in-out infinite; }
@keyframes ws-dot { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 12px var(--accent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 6%, transparent), 0 0 18px var(--accent); } }
.workspace-item.is-reference { color: var(--muted); }

/* 미끄러지는 하이라이트 — 한 개가 올린 메뉴로 옮겨 다닌다 */
.ws-hover { position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: 8px; pointer-events: none; z-index: 0; opacity: 0;
  background: linear-gradient(90deg, rgba(127, 227, 196, .13), rgba(127, 227, 196, .03) 80%);
  box-shadow: inset 0 0 0 1px rgba(127, 227, 196, .12);
  transition: transform 340ms var(--mo-out), height 340ms var(--mo-out), opacity 200ms var(--mo-out); }
.ws-hover::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 2px; border-radius: 0 2px 2px 0;
  background: #7FE3C4; box-shadow: 0 0 10px #7FE3C4; }
.ws-hover.is-on { opacity: 1; }
.ws-hover.is-jump { transition: opacity 200ms var(--mo-out); }

.workspace-logout { border-top: 0; position: relative; }
.workspace-logout::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--glass-line), transparent); }
.workspace-logout .linkbtn { color: var(--muted); transition: color var(--mo-2) var(--mo-out); }
.workspace-logout .linkbtn:hover { color: var(--ink); }

/* 한 번 들어올 때 — 묶음 제목 · 메뉴가 차례로 왼쪽에서 들어온다 */
@keyframes ws-in { from { opacity: 0; transform: translate3d(-10px, 0, 0); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.ws-intro .workspace-brand, .ws-intro .workspace-group h2, .ws-intro .workspace-item {
  animation: ws-in 620ms var(--mo-out) both; animation-delay: calc(var(--k, 0) * 28ms + 80ms); }
.ws-intro .ws-icon .hm-svg * { animation: hm-draw 1100ms var(--mo-out) calc(var(--k, 0) * 28ms + 200ms) both; }

/* 페이지를 옮길 때 — 왼쪽 메뉴는 그대로, 지금 페이지 표시는 새 자리로 미끄러지고 본문만 바뀐다 */
@view-transition { navigation: auto; }
.workspace-sidebar { view-transition-name: ws-side; }
.workspace-main { view-transition-name: ws-main; }
::view-transition-group(ws-current) { animation-duration: 460ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-old(ws-current), ::view-transition-new(ws-current) { animation-duration: 300ms; height: 100%; }
::view-transition-old(ws-main) { animation: 160ms ease-in both ws-out; }
::view-transition-new(ws-main) { animation: 420ms cubic-bezier(.16, 1, .3, 1) 60ms both ws-new; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
@keyframes ws-out { to { opacity: 0; transform: translateY(-4px); filter: blur(2px); } }
@keyframes ws-new { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }

/* ── 왼쪽 메뉴 설정 묶음: 접기 (2026-10-20) ── */
.workspace-group-settings > summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
.workspace-group-settings > summary::-webkit-details-marker { display: none; }
.workspace-group-settings > summary h2 { margin-bottom: 0; }
.workspace-group-settings > summary::after { content: "▸"; margin-left: auto; padding-right: 8px; color: #8FB6D5;
  transition: transform var(--mo-3) var(--mo-out); }
.workspace-group-settings[open] > summary::after { transform: rotate(90deg); }
.workspace-group-settings[open] > summary h2 { margin-bottom: 6px; }

/* ── 화면 안 탭 (답답이: 현황 · 처리 대기 · 미답변 댓글 …) — 유리 줄 위에서 지금 탭에 빛나는 밑줄 ── */
.sub-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; align-self: flex-start;
  background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--hi);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sub-tabs a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px;
  color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: color var(--mo-2) var(--mo-out), background-color var(--mo-2) var(--mo-out); }
.sub-tabs a:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, transparent); text-decoration: none; }
.sub-tabs a.on { color: var(--ink); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); }
.sub-tabs a.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 10px var(--accent); }
@media (max-width: 640px) { .sub-tabs { align-self: stretch; overflow-x: auto; flex-wrap: nowrap; } .sub-tabs a { white-space: nowrap; } }

/* 홈(첫 화면) 모양 · 움직임은 style.css 「첫 화면」 묶음과 today_menu.html 에 있다 */

/* ── 등장: 위에서부터 차례로 12px 떠오른다. 화면 아래 칸은 스크롤해서 보일 때 떠오른다 (motion.js) ── */
@keyframes mo-up { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
main.page > *:not(script):not(style) { animation: mo-up var(--mo-4) var(--mo-out) both; }
main.page > :nth-child(2) { animation-delay: 50ms; }
main.page > :nth-child(3) { animation-delay: 100ms; }
main.page > :nth-child(4) { animation-delay: 150ms; }
main.page > :nth-child(n+5) { animation-delay: 200ms; }
main.page > .hm { animation: none; }   /* 첫 화면은 칸마다 따로 등장시킨다 */
.mo-reveal { opacity: 0; transform: translate3d(0, 16px, 0); }
.mo-reveal.is-in { opacity: 1; transform: none; transition: opacity var(--mo-4) var(--mo-out), transform var(--mo-4) var(--mo-out); }

/* ── 접기 · 펴기: 내용이 내려오며 나타난다 ── */
@keyframes mo-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
details[open] > :not(summary) { animation: mo-down var(--mo-3) var(--mo-out) both; }

/* ── 살아 있음 표시: 점 + 퍼지는 고리 (bulsaja 배지처럼) ── */
.mo-live { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #7FE3C4; flex: none; }
.mo-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #7FE3C4; animation: mo-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes mo-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

/* ── 동작 줄이기 설정이면 다 끈다 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mo-reveal { opacity: 1; transform: none; }
}