/* ============================================================
   SnowUI 컴포넌트 라이브러리 — Toby 공용 자산 (정본)
   전제: snowui_tokens.css 선행 로드, html[data-theme="light"|"dark"]
   문법: 흰 페이지 / 무테두리·무그림자 패널(fill+radius 16) /
         파스텔 KPI / 헤어라인 / Inter 14px 위계 / 점 인디케이터 내비 /
         파스텔 칩 + 어두운 글자 / 이모지 금지(텍스트·기하 요소만)
   사용처: TobyComp 대시보드 → 학원 앱 → 담토연 데모 UI
   ============================================================ */

/* ---- 시맨틱 별칭 (정본 토큰이 모드별로 반전되므로 단일 블록) ----
   페이지 = primary-background (#FFF / 다크 #1C1C1C)
   패널   = primary-light (#F7F9FB / 다크 White 5%) — readme "plain tint fills"
   헤어라인 = black-10, 옅은 구분선·hover = black-5 */
:root, html[data-theme]{
  --sn-page:var(--primary-background);
  --sn-panel:var(--primary-light);
  --sn-hair:var(--black-10);
  --sn-hair2:var(--black-5);
  --sn-chip-ink:var(--black-80);       /* 틴트 칩 위 글자(모드 따라 반전) */
}
/* 칩·이벤트 틴트: 정본 세컨더리 파스텔의 저알파 버전(사용자 지시: 원색 그대로는 과함) */
:root, html[data-theme="light"]{
  --tint-blue:rgba(177,227,255,0.45);
  --tint-purple:rgba(198,199,248,0.45);
  --tint-mint:rgba(186,237,189,0.50);
  --tint-green:rgba(161,227,203,0.50);
  --tint-orange:rgba(255,203,131,0.50);
  --tint-red:rgba(255,71,71,0.30);
  --tint-indigo:rgba(149,164,252,0.40);
}
html[data-theme="dark"]{
  --tint-blue:rgba(177,227,255,0.20);
  --tint-purple:rgba(198,199,248,0.20);
  --tint-mint:rgba(186,237,189,0.22);
  --tint-green:rgba(161,227,203,0.22);
  --tint-orange:rgba(255,203,131,0.24);
  --tint-red:rgba(255,71,71,0.28);
  --tint-indigo:rgba(149,164,252,0.24);
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--sn-page)}
body{font-family:var(--sn-font);font-size:15px;line-height:1.65;   /* 사용자 지시: 전반 폰트 상향 */
     background:var(--sn-page);color:var(--sn-text-1)}
::selection{background:var(--sn-color-2)}
a{color:var(--sn-accent);text-decoration:none} a:hover{text-decoration:underline}

/* ============ 레이아웃 ============ */
.sn-shell{display:grid;grid-template-columns:216px minmax(0,1fr);min-height:100vh;max-width:1440px;margin:0 auto}
.sn-sidebar{padding:20px 16px;border-right:1px solid var(--sn-hair);display:flex;flex-direction:column}
.sn-main{min-width:0;display:flex;flex-direction:column}
.sn-topbar{display:flex;align-items:center;gap:8px;padding:14px 28px;border-bottom:1px solid var(--sn-hair);flex-wrap:nowrap}
.sn-topbar .sn-sp{flex:1}
.sn-topbar .sn-btn{white-space:nowrap;flex:none}
.sn-page-body{padding:24px 28px 56px;max-width:1040px}

/* ============ 사이드바 ============ */
.sn-brand{display:flex;align-items:center;gap:10px;padding:8px;margin-bottom:16px}
.sn-brand-mark{width:24px;height:24px;border-radius:50%;background:var(--sn-primary);flex:none}
.sn-brand b{font-size:var(--sn-t-14);font-weight:var(--sn-w-semibold)}
.sn-nav-sec{color:var(--sn-text-3);font-size:var(--sn-t-14);padding:14px 8px 4px}
.sn-nav-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;position:relative;
  padding:8px 10px 8px 22px;border:none;border-radius:var(--sn-r-12);background:transparent;
  font:inherit;color:var(--sn-text-1);cursor:pointer}
.sn-nav-item svg{flex:none;width:20px;height:20px}
.sn-nav-item:hover{background:var(--sn-hair2)}
.sn-nav-item.is-active{background:var(--sn-hair2)}
.sn-nav-item.is-active::before{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:4px;height:16px;border-radius:2px;background:var(--sn-primary)}
.sn-side-foot{margin-top:auto;color:var(--sn-text-3);font-size:var(--sn-t-12);line-height:1.5;
  padding:16px 8px 4px;border-top:1px solid var(--sn-hair2)}

/* ============ 상단바 요소 ============ */
.sn-crumb{display:flex;align-items:center;gap:8px;font-size:var(--sn-t-14);min-width:0;white-space:nowrap}
.sn-crumb .is-dim{color:var(--sn-text-3)}
.sn-crumb .is-cur{font-weight:var(--sn-w-semibold);overflow:hidden;text-overflow:ellipsis}
.sn-topmeta{color:var(--sn-text-3);font-size:var(--sn-t-12);white-space:nowrap}

/* ============ 버튼 ============ */
.sn-btn{font:inherit;font-size:var(--sn-t-14);color:var(--sn-text-1);cursor:pointer;
  background:var(--sn-fill);border:none;border-radius:var(--sn-r-8);padding:6px 12px}
.sn-btn:hover{background:var(--sn-hair)}
.sn-btn:disabled{opacity:.35;cursor:default}
.sn-btn:focus-visible{outline:none;box-shadow:var(--sn-focus)}
.sn-btn.is-primary{background:var(--sn-primary);color:var(--sn-on-primary)}
.sn-btn.is-primary:hover{background:var(--sn-primary);opacity:.9}
.sn-btn.is-sm{font-size:var(--sn-t-12);padding:4px 12px}
select.sn-btn, select.sn-btn.is-sm{appearance:none;padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right 14px top 55%,right 10px top 55%;background-size:4px 4px;background-repeat:no-repeat}

/* ============ 패널(카드) ============ */
.sn-card{background:var(--sn-panel);border-radius:var(--sn-r-16);padding:20px 24px;margin-bottom:16px}
.sn-card-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.sn-card-hd h2{font-size:15px;font-weight:var(--sn-w-semibold);white-space:nowrap}
.sn-card-hd .sn-muted{flex:0 1 auto;min-width:0}
.sn-card-hd .sn-sp{flex:1}
.sn-empty{color:var(--sn-text-3);text-align:center;padding:48px 0}

/* ============ KPI 타일 ============ */
.sn-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:16px}
.sn-kpi{border-radius:var(--sn-r-16);padding:20px 24px;color:var(--sn-text-1)}   /* 다크에서 틴트 배경 + 흰 글자 */
.sn-kpi.is-a{background:var(--sn-color-1)}
.sn-kpi.is-b{background:var(--sn-color-2)}
.sn-kpi .k{font-size:var(--sn-t-14);display:flex;align-items:center;gap:6px}
.sn-kpi .k .dot,.sn-kpi .k .d{width:6px;height:6px;border-radius:50%;flex:none}
.sn-kpi .v{font-size:var(--sn-t-24);line-height:var(--sn-lh-24);font-weight:var(--sn-w-semibold);margin-top:8px}
.sn-kpi .s{font-size:var(--sn-t-12);opacity:.6;margin-top:2px}

/* ============ 리스트 행 (정렬 스캔라인: 배지열 고정) ============
   SnowUI 정본 재정렬(2026-07-25): 좌측 액센트 바·인용구 보더 제거(정본 어휘에 없음),
   강조 = 파스텔 틴트 채움, 타이포 = 12/18·14/20 고정 스케일, hover = black-5 채움. */
.sn-row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;
  padding:10px 0;border-top:1px solid var(--sn-hair2)}
.sn-row:first-of-type{border-top:none}
.sn-row.is-plain{grid-template-columns:minmax(0,1fr)}
.sn-row-badge{padding-top:1px}
.sn-row-title{font-size:var(--sn-t-14);line-height:var(--sn-lh-14)}
.sn-row-sub{font-size:var(--sn-t-12);line-height:var(--sn-lh-12);color:var(--sn-text-3);
  margin-top:4px}
.sn-row.is-pin{grid-template-columns:minmax(0,1fr);
  background:var(--sn-color-2);
  border-radius:var(--sn-r-12);padding:12px 14px;margin:8px 0;border-top:none}
.sn-fold{margin-top:4px}
.sn-fold summary{cursor:pointer;font-size:var(--sn-t-12);line-height:var(--sn-lh-12);
  color:var(--sn-text-3);list-style:none;display:inline-flex;align-items:center;gap:5px;
  background:none;border:none;padding:2px 8px;margin-left:-8px;border-radius:var(--sn-r-8)}
.sn-fold summary:hover{color:var(--sn-text-1);background:var(--sn-fill)}
.sn-fold summary::-webkit-details-marker{display:none}
.sn-fold summary .sn-caret{width:7px;height:7px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);transition:transform .15s ease}
.sn-fold[open] summary .sn-caret{transform:rotate(45deg)}
.sn-fold-body{background:var(--sn-fill);border-radius:var(--sn-r-8);
  padding:10px 12px;margin-top:6px;display:flex;flex-direction:column;gap:6px}
.sn-fold-line{font-size:var(--sn-t-12);line-height:var(--sn-lh-12);color:var(--sn-text-2)}
.sn-fold-line.is-meta{color:var(--sn-text-3)}

/* ============ 편집 표 (진도·출석부, SnowUI 헤어라인 규격) ============ */
.sn-edit-table{width:100%;border-collapse:collapse;font-size:var(--sn-t-14);line-height:var(--sn-lh-14)}
.sn-edit-table th{font-weight:var(--sn-w-semibold);text-align:left;color:var(--sn-text-3);
  font-size:var(--sn-t-12);padding:8px 8px;border-bottom:1px solid var(--sn-line)}
.sn-edit-table td{padding:6px 8px;border-bottom:1px solid var(--sn-hair2);vertical-align:middle}
.sn-edit-table input[type="text"],.sn-edit-table input:not([type]){width:100%;box-sizing:border-box;
  font:inherit;font-size:var(--sn-t-14);color:var(--sn-text-1);background:none;
  border:none;border-radius:var(--sn-r-8);padding:6px 8px;outline:none}
.sn-edit-table input:not([type="checkbox"]):hover{background:var(--sn-fill)}
.sn-edit-table input:not([type="checkbox"]):focus{background:var(--sn-fill);box-shadow:var(--sn-focus)}
.sn-edit-table td.att{text-align:center;cursor:pointer;min-width:44px;border-radius:var(--sn-r-8);
  user-select:none;color:var(--sn-text-3)}
.sn-edit-table td.att:hover{background:var(--sn-fill)}
.sn-edit-table td.att.is-set{color:var(--sn-text-1);font-weight:var(--sn-w-semibold)}

/* ============ 진도 회차 카드 (모바일 대응, 표 대체) ============ */
.sn-sess{border:1px solid var(--sn-hair2);border-radius:var(--sn-r-12);
  padding:12px 14px;margin-bottom:10px}
.sn-sess.is-done{background:var(--sn-fill)}
.sn-sess .hd{display:flex;gap:10px;align-items:center;
  font-size:var(--sn-t-14);line-height:var(--sn-lh-14)}
.sn-sess .hd b{font-weight:var(--sn-w-semibold)}
.sn-sess .ck{display:inline-flex;gap:6px;align-items:center;cursor:pointer;
  font-size:var(--sn-t-12);color:var(--sn-text-3);flex:none}
.sn-sess .flds{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.sn-sess .flds label{display:flex;flex-direction:column;gap:4px;
  font-size:var(--sn-t-12);line-height:var(--sn-lh-12);color:var(--sn-text-3)}
.sn-sess .flds input{font:inherit;font-size:var(--sn-t-14);color:var(--sn-text-1);
  background:none;border:1px solid var(--sn-hair2);border-radius:var(--sn-r-8);
  padding:8px 10px;outline:none;width:100%;box-sizing:border-box}
.sn-sess .flds input:focus{background:var(--sn-fill);box-shadow:var(--sn-focus)}
@media (max-width:760px){ .sn-sess .flds{grid-template-columns:1fr} }

/* ============ 가로 스크롤 래퍼 (출석부 등 넓은 표) ============ */
.sn-xscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sn-edit-table.is-nowrap th,.sn-edit-table.is-nowrap td{white-space:nowrap}
.sn-edit-table.is-nowrap th:not(:first-child){text-align:center}  /* 데이터 열은 헤더·칸 모두 중앙 정렬 (출결 표 어긋남 방지) */

/* ============ 아코디언 섹션 (대시보드형: 요약 상시·상세 접힘) ============ */
.sn-acc{border-top:1px solid var(--sn-hair2)}
.sn-acc:first-of-type{border-top:none}
.sn-acc summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  padding:12px 8px;border-radius:var(--sn-r-8)}
.sn-acc summary::-webkit-details-marker{display:none}
.sn-acc summary:hover{background:var(--sn-fill)}
.sn-acc summary .t{font-size:var(--sn-t-14);line-height:var(--sn-lh-14);
  font-weight:var(--sn-w-semibold)}
.sn-acc summary .hint{margin-left:auto;color:var(--sn-text-3);
  font-size:var(--sn-t-12);line-height:var(--sn-lh-12);text-align:right}
.sn-acc summary .sn-caret{width:7px;height:7px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  color:var(--sn-text-3);transform:rotate(-45deg);transition:transform .15s ease}
.sn-acc[open] summary .sn-caret{transform:rotate(45deg)}
.sn-acc-body{padding:2px 8px 14px}

/* ============ 스크롤바 (SnowUI 규격: black 알파 썸, 트랙 투명, 화살표 없음) ============ */
*{scrollbar-width:thin;scrollbar-color:var(--black-20) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--black-20);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--black-40)}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}
html[data-theme="dark"] *{scrollbar-color:rgba(255,255,255,0.2) transparent}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2)}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.35)}

/* ============ 채팅 패널 (비서실장 브리지, SnowUI ai-chat 문법) ============ */
.sn-chat{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:100%;z-index:60;
  background:var(--primary-background);border-left:1px solid var(--sn-line);
  display:flex;flex-direction:column;transform:translateX(102%);transition:transform .2s ease}
.sn-chat.is-open{transform:none}
.sn-chat-hd{display:flex;align-items:center;gap:8px;padding:14px 16px;
  border-bottom:1px solid var(--sn-hair2);font-size:var(--sn-t-14);line-height:var(--sn-lh-14)}
.sn-chat-hd b{font-weight:var(--sn-w-semibold)}
.sn-chat-sub{color:var(--sn-text-3);font-size:var(--sn-t-12)}
.sn-dot{width:8px;height:8px;border-radius:50%;background:var(--black-20);flex:none}
.sn-dot.is-on{background:var(--colors-green)}
.sn-dot.is-wait{background:var(--sn-red,#e5484d)}   /* Q&A 미답변 표시등 (2026-08-09) */
.sn-chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.sn-msg{max-width:88%;font-size:var(--sn-t-14);line-height:var(--sn-lh-14);
  overflow-wrap:break-word;white-space:pre-wrap}
.sn-msg.is-user{margin-left:auto;background:var(--sn-color-2);
  border-radius:var(--sn-r-16);padding:10px 14px}
.sn-msg.is-assist{margin-right:auto}
.sn-msg .mt{margin-top:4px;font-size:var(--sn-t-12);line-height:var(--sn-lh-12);
  color:var(--sn-text-3);white-space:nowrap}
.sn-msg.is-status{margin:0 auto;color:var(--sn-text-3);font-size:var(--sn-t-12)}
.sn-chat-day{display:flex;align-items:center;gap:10px;color:var(--sn-text-3);
  font-size:var(--sn-t-12);line-height:var(--sn-lh-12)}
.sn-chat-day::before,.sn-chat-day::after{content:"";flex:1;border-top:1px solid var(--sn-hair2)}
.sn-typing{display:inline-flex;gap:4px;padding:4px 0}
.sn-typing i{width:6px;height:6px;border-radius:50%;background:var(--black-20);
  animation:sn-blink 1s infinite}
.sn-typing i:nth-child(2){animation-delay:.2s}
.sn-typing i:nth-child(3){animation-delay:.4s}
@keyframes sn-blink{0%,100%{opacity:.25}50%{opacity:.9}}
.sn-chat-comp{padding:12px 16px 16px}
.sn-chat-comp .box{display:flex;gap:8px;align-items:flex-end;border-radius:24px;
  background:rgba(255,255,255,0.8);
  box-shadow:inset 0 0 0 0.5px rgba(0,0,0,0.1),0 8px 28px rgba(0,0,0,0.1);
  padding:10px 10px 10px 16px}
html[data-theme="dark"] .sn-chat-comp .box{background:rgba(28,28,28,0.8);
  box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.12),0 8px 28px rgba(0,0,0,0.4)}
.sn-chat-comp textarea{flex:1;border:none;background:none;resize:none;font:inherit;
  font-size:var(--sn-t-14);line-height:var(--sn-lh-14);color:var(--sn-text-1);
  outline:none;padding:6px 0;min-height:20px;height:32px;max-height:120px;
  overflow-y:hidden;box-sizing:border-box}
.sn-chat-comp textarea::placeholder{color:var(--sn-text-3)}
.sn-chat-comp .send{border:none;cursor:pointer;border-radius:12px;
  background:var(--sn-text-1);color:var(--primary-background);
  font:inherit;font-size:var(--sn-t-14);line-height:var(--sn-lh-14);padding:6px 14px;flex:none}
.sn-chat-comp .send:disabled{opacity:.4;cursor:default}
/* 첨부 (2026-07-27) */
.sn-chat-comp .box{padding-left:10px}
.sn-chat-comp .attach{border:none;cursor:pointer;border-radius:12px;background:none;
  color:var(--sn-text-3);font:inherit;font-size:18px;line-height:20px;
  padding:5px 9px;flex:none;align-self:flex-end}
.sn-chat-comp .attach:hover{background:var(--sn-fill);color:var(--sn-text-1)}
/* 음성 입력 토글 (2026-08-07): ＋와 같은 크기·정렬.
   켜짐 표시를 배경 반전으로 했더니 다크 모드에서 --sn-text-1이 흰색이라
   버튼이 통째로 흰 덩어리가 됐다(사용자 스크린샷). 테마에 따라 뒤집히는 토큰을
   배경에 쓰면 안 된다. 녹음 관례대로 적색을 쓰고 배경은 옅은 틴트만 얹는다.
   적색은 두 테마에서 모두 적색이라 뒤집히지 않는다. */
.sn-chat-comp .attach.mic{display:inline-flex;align-items:center;justify-content:center;
  padding:5px 7px;line-height:20px;margin-left:-6px}
.sn-chat-comp .attach.mic svg{display:block}
.sn-chat-comp .attach.mic[aria-pressed="true"]{color:var(--sn-red);
  background:color-mix(in srgb, var(--sn-red) 14%, transparent)}
.sn-chat-comp .attach.mic[aria-pressed="true"]:hover{
  background:color-mix(in srgb, var(--sn-red) 22%, transparent)}
/* color-mix 미지원 브라우저 폴백: 틴트 없이 적색 아이콘만 */
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .sn-chat-comp .attach.mic[aria-pressed="true"]{background:none}
}
}

.sn-chat-files{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px 8px}
.sn-chat-files:empty{display:none}
.sn-chat-files .f{display:inline-flex;align-items:center;gap:6px;max-width:220px;
  background:var(--sn-fill);border-radius:10px;padding:5px 8px;
  font-size:var(--sn-t-12);line-height:var(--sn-lh-12);color:var(--sn-text-2)}
.sn-chat-files .f span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-chat-files .f button{border:none;background:none;cursor:pointer;color:var(--sn-text-3);
  font:inherit;font-size:13px;line-height:1;padding:0 2px;flex:none}
.sn-chat-files .f button:hover{color:var(--sn-text-1)}
.sn-chat-files .f.is-up{opacity:.55}
@media (max-width:760px){.sn-chat{width:100%}}

/* ============ 칩 ============ */
.sn-chip{display:inline-block;font-size:var(--sn-t-12);font-weight:var(--sn-w-semibold);
  color:var(--sn-chip-ink);padding:1px 8px;border-radius:var(--sn-r-8);white-space:nowrap}
.sn-chip.is-wrap{box-sizing:border-box;max-width:100%;white-space:normal;
  word-break:keep-all;overflow-wrap:anywhere}
.sn-chip.is-blue{background:var(--tint-blue)}
.sn-chip.is-indigo{background:var(--tint-indigo)}
.sn-chip.is-purple{background:var(--tint-purple)}
.sn-chip.is-mint{background:var(--tint-mint)}
.sn-chip.is-green{background:var(--tint-green)}
.sn-chip.is-orange{background:var(--tint-orange)}
.sn-chip.is-red{background:var(--tint-red)}
.sn-chip.is-neutral{background:var(--sn-fill);color:var(--sn-text-2);font-weight:var(--sn-w-regular)}
.sn-chip.is-ghost{background:var(--sn-fill);color:var(--sn-text-3);font-weight:var(--sn-w-regular)}

/* ============ 표 ============ */
.sn-table{width:100%;border-collapse:collapse;font-size:var(--sn-t-12)}
.sn-table th{color:var(--sn-text-3);font-weight:var(--sn-w-regular);text-align:left;
  padding:8px 10px;border-bottom:1px solid var(--sn-hair);white-space:nowrap}
.sn-table td{padding:8px 10px;border-bottom:1px solid var(--sn-hair2);vertical-align:top}
.sn-scroll{overflow-x:auto}

/* ============ 캘린더 ============ */
.sn-cal{width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--sn-t-12)}
.sn-cal th{text-align:center;color:var(--sn-text-3);font-weight:var(--sn-w-regular);
  padding:6px 2px;border-bottom:1px solid var(--sn-hair)}
.sn-cal th.is-sun{color:var(--sn-red)} .sn-cal th.is-sat{color:var(--sn-accent)}
.sn-cal td{height:88px;vertical-align:top;padding:4px;border-bottom:1px solid var(--sn-hair2);
  border-radius:var(--sn-r-8);cursor:pointer;white-space:normal}
.sn-cal td:hover{background:var(--sn-fill)}
.sn-cal td.is-dim{cursor:default}
.sn-cal td.is-sel{background:var(--sn-fill)}
.sn-cal .dnum{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;color:var(--sn-text-2)}
.sn-cal .dnum.is-sun{color:var(--sn-red)} .sn-cal .dnum.is-sat{color:var(--sn-accent)}
.sn-cal td.is-today .dnum{background:var(--sn-primary);color:var(--sn-on-primary);font-weight:var(--sn-w-semibold)}
.sn-ev{display:block;font-size:var(--sn-t-12);line-height:16px;padding:1px 6px;border-radius:var(--radius-4);margin-top:2px;
  color:var(--sn-chip-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-ev.is-sched{background:var(--tint-blue)} .sn-ev.is-dl{background:var(--tint-red)}
.sn-ev.is-rep{background:var(--tint-purple)} .sn-ev.is-rt{background:var(--tint-mint)}
.sn-ev.is-past{background:var(--sn-fill);color:var(--sn-text-3)}
.sn-ev.is-more{background:transparent;color:var(--sn-text-3)}

/* ============ 웰컴(홈) ============ */
.sn-welcome{max-width:720px;margin:0 auto;padding-top:32px}
.sn-welcome .sn-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sn-hero{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin-bottom:32px}
.sn-hero .mark{width:48px;height:48px;border-radius:50%;background:var(--sn-primary)}
.sn-hero h1{font-size:var(--sn-t-24);line-height:var(--sn-lh-24);font-weight:var(--sn-w-semibold)}
.sn-hero .sub{color:var(--sn-text-3);font-size:var(--sn-t-14)}
.sn-menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:24px}
.sn-menu-card{display:flex;align-items:center;gap:12px;padding:18px 20px;
  background:var(--sn-panel);border:none;border-radius:var(--sn-r-16);
  font:inherit;color:var(--sn-text-1);cursor:pointer;text-align:left}
.sn-menu-card:hover{background:var(--sn-fill)}
a.sn-menu-card{text-decoration:none;color:var(--sn-text-1)}
.sn-menu-card svg{flex:none;color:var(--sn-text-1)}
.sn-menu-card .lbl{font-weight:var(--sn-w-semibold);font-size:15px;white-space:nowrap}
.sn-menu-card .cnt{margin-left:auto;color:var(--sn-text-3);font-size:var(--sn-t-14);white-space:nowrap}
@media (max-width:760px){
  .sn-welcome{padding-top:16px}
  .sn-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sn-menu-card{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 16px}
  .sn-menu-card .cnt{margin-left:0}
}

/* ============ 텍스트 유틸 ============ */
.sn-muted{color:var(--sn-text-3);font-size:var(--sn-t-12)}
.sn-body2{color:var(--sn-text-2)}
.sn-pre{white-space:pre-wrap;font-size:var(--sn-t-14);line-height:1.8;color:var(--sn-text-2);   /* 사용자 지시: 회의록 가독성 */
  border-top:1px solid var(--sn-hair2);padding-top:12px;margin-top:8px}
.sn-subhead{font-weight:var(--sn-w-semibold);margin:16px 0 4px}
.sn-subhead .sn-muted{font-weight:var(--sn-w-regular)}

/* ============ 모바일 ============ */
.sn-backdrop{display:none}
.sn-menubtn{display:none}
@media (max-width:760px){
  .sn-shell{grid-template-columns:1fr}
  .sn-sidebar{position:fixed;top:0;left:-280px;bottom:0;width:250px;z-index:50;background:var(--sn-page);
    transition:left .22s ease;overflow-y:auto;border-right:1px solid var(--sn-hair);box-shadow:var(--sn-shadow-2)}
  .sn-sidebar.is-open{left:0}
  .sn-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40}
  .sn-backdrop.is-show{display:block}
  .sn-menubtn{display:inline-block;padding:4px 10px;white-space:nowrap}
  .sn-topbar{padding:10px 12px;gap:6px;position:sticky;top:0;z-index:30;background:var(--sn-page)}
  .sn-topbar .sn-btn{padding:5px 10px;font-size:13px}
  .sn-crumb{flex:1 1 auto;overflow:hidden}
  .sn-crumb .is-dim{display:none}   /* 모바일: 브레드크럼 루트 생략, 현재 탭명만 */
  .sn-page-body{padding:14px 14px 40px}
  .sn-card{padding:14px 16px;min-width:0}
  .sn-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}   /* 모바일: 화면폭 초과 방지 */
  .sn-kpi{padding:14px 16px;min-width:0}
  .sn-kpi .v{font-size:var(--sn-t-18)}
  .sn-row{grid-template-columns:64px minmax(0,1fr);gap:8px}
  .sn-cal td{height:66px;padding:2px 3px}
  .sn-ev{font-size:9px;padding:1px 3px}
  .sn-topmeta{display:none}
}

/* ── 서재 아카이브 필터 (2026-07-30): 분류 = 복수 선택 토글, 폴더 = 보조 필터 ── */
.sn-fltlbl{flex:none;font-size:var(--sn-t-12);color:var(--sn-text-3);align-self:center;min-width:26px}
.sn-toggle{display:inline-flex;align-items:center;gap:6px;font-size:var(--sn-t-12);font-weight:var(--sn-w-semibold);
  padding:5px 12px;border-radius:999px;border:1px solid var(--sn-line);background:none;color:var(--sn-text-2);
  cursor:pointer;font-family:inherit;line-height:var(--sn-lh-12)}
.sn-toggle:hover{background:var(--sn-fill)}
.sn-toggle.is-on{background:var(--tint-purple);border-color:transparent;color:var(--sn-chip-ink)}
.sn-toggle .tick{display:none}
.sn-toggle.is-on .tick{display:inline}
.sn-toggle .cnt{font-weight:var(--sn-w-regular);color:var(--sn-text-3)}
.sn-toggle.is-on .cnt{color:var(--sn-chip-ink);opacity:.7}
.sn-folderchip{display:inline-block;font-size:var(--sn-t-12);padding:3px 10px;border-radius:var(--sn-r-8);
  border:none;background:var(--sn-fill);color:var(--sn-text-3);cursor:pointer;font-family:inherit}
.sn-folderchip:hover{color:var(--sn-text-2)}
.sn-folderchip.is-on{background:var(--sn-primary);color:var(--sn-on-primary)}