/* ============================================================================
   AI중심대학 TF — hkai 포털 공통 스타일(base.css·theme.css) 위에 얹는 TF 전용.
   TF 의 표시색은 HKNU 로고 오른쪽 막대의 청록(#00a79e — 첫 화면 카드와 같은 색, 사용자 지시 2026-10-15).
   ========================================================================= */

:root {
    --tf: #00a79e;
    --tf-deep: #00756f;
    --tf-tint: #e3f6f4;
    /* 올리기 색 — 다른 데서 쓰지 않는 보라. 초록(TF·완료)·파랑·주황·빨강 사이에서 올리는 자리가 바로 눈에 띄게(사용자 요청 2026-10-16) */
    --up: #7c3aed;
    --up-deep: #5b21b6;
    --up-tint: #f3edff;
}
:root[data-theme="dark"] { --tf-tint: #0f2f2d; --up: #a78bfa; --up-deep: #c4b5fd; --up-tint: #261b45; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) { --tf-tint: #0f2f2d; --up: #a78bfa; --up-deep: #c4b5fd; --up-tint: #261b45; }
}

/* ── 셸 ─────────────────────────────────────────────────────────────── */
.tf .navitem.active { color: var(--tf-deep); }
.tf .sidenav .navitem.active { background: var(--tf-tint); color: var(--tf-deep); }
:root[data-theme="dark"] .tf .navitem.active, :root[data-theme="dark"] .tf .sidenav .navitem.active { color: var(--tf); }
.tf .sidenav { overflow-y: auto; }
.tf .sidenav .navitem { text-decoration: none; }
/* 로고 + 메뉴 접기(☰) — 줄은 로고 대신 이 묶음 아래에 */
.tf-navtop { display: flex; flex-direction: column; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tf-navtop .sidenav-brand { border-bottom: 0; margin-bottom: 0; }
.tf-navfold { display: none; }
@media (min-width: 1200px) {
    .tf-navtop { flex-direction: row; justify-content: space-between; gap: 4px; }
    .tf-navtop .sidenav-brand { min-width: 0; padding-right: 0; }
    .tf-navfold { display: inline-flex; flex: none; color: var(--text-2); }
    /* 접힘 — 태블릿 레일처럼 아이콘과 작은 글자만 */
    html[data-nav="mini"] .shell { padding-left: var(--rail-w); }
    html[data-nav="mini"] .sidenav { width: var(--rail-w); padding: 12px 8px; }
    html[data-nav="mini"] .topbar { left: var(--rail-w); }
    html[data-nav="mini"] .toast { left: calc(50% + var(--rail-w) / 2); }
    html[data-nav="mini"] .tf-navtop { flex-direction: column; gap: 2px; padding-bottom: 6px; }
    html[data-nav="mini"] .sidenav-brand { padding: 6px 0 2px; }
    html[data-nav="mini"] .sidenav-wordmark { display: none; }
    html[data-nav="mini"] .sidenav .navitem { flex-direction: column; justify-content: center; gap: 2px; height: 62px; padding: 0; font-size: 11px; }
    html[data-nav="mini"] .sidenav .navitem .badge-dot { position: absolute; top: 8px; right: calc(50% - 20px); margin: 0; border: 2px solid var(--surface); }
}
.tf .bottomnav .navitem { text-decoration: none; }

.tf-topbar { gap: 6px; padding-inline: 12px 10px; }
.tf-brand { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); text-decoration: none; }
/* 왼쪽 위 — 옆 글씨가 보일 때만 H 마크(.brand-home)가 hkai 첫 화면으로, 글씨(.brand-app)는 이 앱의 홈.
   글씨가 안 보이는 폰·태블릿 레일·접힌 메뉴에서는 .brand-home 을 숨기고 .brand-app 안의 H(.brand-app-mark)가 앱 홈으로(사용자 요청 2026-10-25) */
.brand-home, .brand-app { color: inherit; text-decoration: none; border-radius: var(--r-md); }
.brand-home { display: none; flex: none; }
.brand-app { display: flex; align-items: center; gap: 10px; min-width: 0; }
@media (min-width: 1200px) {
    html:not([data-nav="mini"]) .brand-home { display: inline-flex; }
    html:not([data-nav="mini"]) .brand-app-mark { display: none; }
}
.brand-home:focus-visible, .brand-app:focus-visible { outline: 2px solid var(--hknu-blue); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .brand-home:hover img { opacity: .75; } }
.tf-brand img { width: 28px; height: 28px; }
.tf-brand b { font-size: 15.5px; font-weight: 900; white-space: nowrap; color: var(--tf-deep); }
:root[data-theme="dark"] .tf-brand b { color: var(--tf); }
@media (min-width: 768px) { .tf-brand { display: none; } }
.tf-spacer { flex: 1; }

/* 오른쪽 위 — 사번 이름(사용자 지시) */
.tf-me {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--r-pill);
    border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer;
    font-size: 14px; white-space: nowrap; max-width: 60vw;
}
.tf-me-no { color: var(--text-2); font-variant-numeric: tabular-nums; font-size: 13px; }
.tf-me b { font-weight: 800; }
.tf-me .tag { margin-left: 2px; }
@media (max-width: 420px) { .tf-me .tag { display: none; } .tf-me { padding: 6px 10px; } }
/* 폰에서는 로고만 — 사번·이름(오른쪽 위)이 먼저다 */
@media (max-width: 520px) { .tf-brand b { display: none; } }
.tf-me { overflow: hidden; }
.tf-me-no { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.tf-menu-scrim { position: fixed; inset: 0; z-index: 89; }
.tf-menu {
    position: fixed; z-index: 90; top: calc(var(--topbar-h) + var(--safe-top) + 4px); right: 10px;
    width: min(300px, calc(100vw - 20px));
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3);
    padding: 6px; display: flex; flex-direction: column;
}
.tf-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; }
.tf-menu-head span { font-size: 12.5px; color: var(--text-2); }
.tf-menu a, .tf-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--r-md);
    border: 0; background: none; text-align: left; font-size: 14.5px; color: var(--text); cursor: pointer; text-decoration: none;
}
.tf-menu a:hover, .tf-menu button:hover { background: var(--surface-2); }
.tf-menu form { margin: 0; }
/* 폰 아래 탭의 다섯째 칸 '더보기' 와 그 시트(나머지 메뉴를 3열 타일로) */
button.navitem { font-family: inherit; }
/* 점 셋 아이콘은 가운데 줄에 있어 기본 자리(오른쪽 위)의 숫자가 셋째 점을 가린다 — 위·오른쪽으로 비켜 둔다 */
.bottomnav .tf-more .badge-dot { top: -3px; right: calc(50% - 34px); }
.tf-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 16px 16px; }
.tf-more-grid a {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px;
    border-radius: var(--r-md); background: var(--surface-2); color: var(--text); text-decoration: none;
    font-size: 13px; font-weight: 700; text-align: center;
}
.tf-more-grid a svg { width: 24px; height: 24px; color: var(--tf-deep); }
.tf-more-grid a.is-on { background: var(--tf-tint); color: var(--tf-deep); }
.tf-more-grid .badge-dot { top: 6px; right: calc(50% - 26px); }

.row.is-unread { background: var(--tf-tint); }

/* ── 본문 폭 ──
   폰·태블릿(1200px 미만)은 hkai 와 같은 틀 그대로. 큰 모니터에서는 화면을 다 쓴다(사용자 요청 2026-10-15) —
   다만 1800px 에서 멈춘다(그보다 넓으면 눈이 좌우로 너무 오간다). 넓어진 자리는 화면마다 칸을 늘려 쓰고,
   읽는 글(게시글·회의록 본문)은 한 줄이 너무 길지 않게 따로 줄인다(.tf-read).
   그냥 폭만 풀면 카드·글줄이 늘어나기만 해 오히려 보기 나쁘다 — 그래서 아래 화면별 배치가 같이 간다. */
@media (min-width: 1200px) {
    .tf-page, .tf-page-wide { --content-max: 1800px; }
    .tf .page { max-width: 1800px; }
    .tf-page { padding-inline: 24px; }
    .tf .page.is-flush .page-pad { padding-inline: 24px; }
    .tf .page.tf-mid { max-width: 1200px; }       /* 입력 칸·대화처럼 넓어도 쓸모가 적은 화면 */
}
.tf-page { padding-inline: 16px; }
.tf-body, .tf-post .tf-dl { max-width: 78ch; }   /* 읽는 글줄 — 어느 폭에서든 한국어 한 줄 40자 안팎 */

/* 홈 — 카드들을 위에서 아래로 단을 채워 흘린다(높이가 제각각이라 격자보다 빈틈이 적다). 1·2·3·4단 */

/* 탭 화면을 큰 모니터에서 나란히 — SwipePager Class. 위 탭은 감추고 pane 마다 제목을 단다 */
.pane-title { display: none; }

/* 목록 + 옆 내용(큰 모니터) — 소통의 글·회의록, 자료의 파일 미리보기 */
.tf-page .card + .card { margin-top: 12px; }
.tf-pane { padding-top: 12px; }
.pad { padding: 12px 16px; }
.tf-h1 { font-size: 20px; font-weight: 900; margin: 6px 0 8px; }
.tf-lead { color: var(--text-2); margin-bottom: 14px; line-height: 1.6; }
.tf-muted { color: var(--text-3); font-size: 13px; }
.tf-src { color: var(--text-3); font-size: 12px; padding: 8px 16px 12px; }
.tf-warn-text { color: var(--warn); font-weight: 600; }
.tf-grow { flex: 1; }
.tf-nowrap { white-space: nowrap; }
.tf-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.tf-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.tf-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tf-chips { padding: 0; }
.tf-search { min-width: 200px; flex: 1; max-width: 360px; }
.tf-select {
    font: inherit; font-size: 14px; padding: 8px 10px; border-radius: var(--r-md);
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); max-width: 100%;
}
.tf-select.sm { padding: 4px 6px; font-size: 13px; }
.btn.sm { min-height: 32px; padding: 0 12px; font-size: 13px; gap: 5px; display: inline-flex; align-items: center; }
.btn.sm svg { width: 16px; height: 16px; }
.btn { text-decoration: none; }

/* 두 단 — 데스크톱에서 */
.tf-col { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.tf-col .card + .card { margin-top: 0; }

/* ── 홈 ── */
.tf-callout {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 12px;
    border-radius: var(--r-lg); text-decoration: none; color: var(--text);
}
.tf-callout.warn { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.tf-callout > span { flex: 1; }
/* 1~2건 — 띠 안에서 바로 연다 */
.tf-callout.is-list { align-items: flex-start; }
.tf-callout.is-list > svg { margin-top: 2px; }
.tf-callout-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tf-callout-body a { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.tf-callout-body a:hover { text-decoration: underline; }
.tf-callout-body .tag { margin-right: 4px; vertical-align: 1px; }
.tf-callout-more { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700;
    color: var(--text-2); text-decoration: none; white-space: nowrap; }
.tf-callout-more svg { width: 16px; height: 16px; }

.tf-code {
    flex: none; display: inline-block; padding: 2px 7px; margin-right: 4px; border-radius: 6px;
    background: var(--tf-tint); color: var(--tf-deep); font-size: 12px; font-weight: 800;
    font-variant-numeric: tabular-nums; letter-spacing: -.2px; vertical-align: 1px;
}
:root[data-theme="dark"] .tf-code { color: var(--tf); }
.tf-ver { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--surface-sunken); font-size: 12px; font-weight: 800; margin-right: 4px; }
.tf-ev { font-size: 11.5px; color: var(--tf-deep); font-weight: 700; }
.up-ico { flex: none; font-size: 20px; width: 26px; text-align: center; line-height: 1; }
/* 파일 형식 아이콘(Services/FileIcons) — 글자 크기를 따른다. 어두운 화면에서도 종이는 흰색 */
.fi { display: inline-block; flex: none; vertical-align: -0.28em; }
.up-ico .fi, .cht-file-ico .fi { vertical-align: middle; }

.tf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 14px; }
.tf-stats div { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 12px 14px; display: flex; flex-direction: column; }
.tf-stats b { font-size: 20px; font-weight: 900; color: var(--tf-deep); }
.tf-stats span { font-size: 12.5px; color: var(--text-2); }
.tf-dl { display: grid; grid-template-columns: 92px 1fr; gap: 6px 12px; padding: 4px 16px 12px; margin: 0; font-size: 14px; }
.tf-dl dt { color: var(--text-2); font-weight: 700; }
.tf-dl dd { margin: 0; line-height: 1.55; }
/* 사업 개요 — 카드를 한 줄로 쌓고 카드 안의 항목을 폭에 따라 1·2·3열로(남는 칸 없이). 긴 항목은 한 줄을 다 쓴다 */
.tf-about { display: flex; flex-direction: column; gap: 12px; }
.tf-about .card + .card { margin-top: 0; }
.tf-kvs { display: grid; grid-template-columns: 1fr; gap: 0 28px; padding: 2px 16px 10px; margin: 0; font-size: 14px; }
.tf-kv { display: grid; grid-template-columns: 84px 1fr; gap: 0 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.tf-kv dt { color: var(--text-2); font-weight: 700; }
.tf-kv dd { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
@media (min-width: 900px) {
    .tf-kvs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tf-kv.is-wide { grid-column: 1 / -1; }
}
/* 짧은 항목이 넷뿐인 카드(H-AIDE)는 3열이면 둘째 줄에 빈칸이 생긴다 — 2열까지만 */
@media (min-width: 1500px) { .tf-kvs:not(.is-2) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tf-tasks { padding: 0 16px 8px; display: grid; grid-template-columns: 1fr; gap: 0 28px; }
@media (min-width: 640px) { .tf-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tf-tasks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .tf-tasks { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tf-tasks li { display: grid; grid-template-columns: 26px 1fr; gap: 2px 8px; padding: 7px 0; border-top: 1px solid var(--line); align-content: start; }
.tf-tasks b { grid-row: span 2; color: var(--tf-deep); font-weight: 900; }
.tf-tasks small { color: var(--text-3); font-size: 12px; }

/* ── 자료(탐색기) ── */
.tf-explorer { display: grid; grid-template-columns: 1fr; gap: 14px; padding-inline: 16px; }
.tf-tree-pane { display: none; }
.tf-split { display: none; }
@media (min-width: 900px) {
    /* 폴더 칸 | 손잡이 | 목록 — 폭은 손잡이로(--tree-w, tf.js splitInit) */
    .tf-explorer { grid-template-columns: var(--tree-w, 280px) 12px minmax(0, 1fr); column-gap: 0; align-items: start; }
    .tf-split { display: block; align-self: stretch; min-height: 240px; cursor: col-resize; position: relative; touch-action: none; }
    .tf-split::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 5px; width: 2px; border-radius: 2px; background: var(--line); transition: background .15s, width .15s, left .15s; }
    .tf-split:hover::before, .tf-split:focus-visible::before, .tf-explorer.is-resizing .tf-split::before { background: var(--tf); width: 4px; left: 4px; }
    .tf-explorer.is-resizing { cursor: col-resize; user-select: none; }
    .tf-explorer.is-resizing * { pointer-events: none; }
}
@media (min-width: 1200px) { .tf-explorer { padding-inline: 24px; } }
/* 미리보기 모달에 연 파일 */
.tf-filelist .row.is-sel { background: var(--tf-tint); box-shadow: inset 3px 0 0 var(--tf); }
@media (min-width: 900px) {
    .tf-tree-pane {
        display: block; position: sticky; top: calc(var(--topbar-h) + var(--safe-top) + 12px);
        max-height: calc(100dvh - var(--topbar-h) - 40px); overflow: auto;
        background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 8px 4px;
    }
}
.tf-ftree, .tf-ftree ul { list-style: none; margin: 0; padding: 0; }
.tf-ft-line { display: flex; align-items: center; }
.tf-ft-tog { flex: none; width: 22px; height: 28px; border: 0; background: none; color: var(--text-3); cursor: pointer; font-size: 12px; }
.tf-ft-row {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 0; background: none;
    border-radius: var(--r-sm); cursor: pointer; text-align: left; font-size: 13.5px; color: var(--text);
}
.tf-ft-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.tf-ft-row small { color: var(--text-3); font-size: 11.5px; }
.tf-ft-row svg { width: 17px; height: 17px; color: var(--tf-deep); }
.tf-ft-row.is-sel { background: var(--tf-tint); font-weight: 700; }
.tf-ft-row:hover { background: var(--surface-2); }
.tf-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--text-3); margin: 4px 0 6px; }
.tf-crumbs a { color: var(--tf-deep); text-decoration: none; font-weight: 600; }
.tf-folder-ico { color: var(--tf-deep); width: 22px; height: 22px; }
/* 맨 위 폴더 — 아이콘 속을 색으로 채워 구분(2026-10-20). 테두리는 같은 색을 진하게 */
.tf-fc0 { --fc: #e5484d; } .tf-fc1 { --fc: #f76b15; } .tf-fc2 { --fc: #e2a400; } .tf-fc3 { --fc: #30a46c; } .tf-fc4 { --fc: #12a594; }
.tf-fc5 { --fc: #0090ff; } .tf-fc6 { --fc: #3e63dd; } .tf-fc7 { --fc: #8e4ec6; } .tf-fc8 { --fc: #d6409f; } .tf-fc9 { --fc: #8d8d86; }
svg.tf-fc { color: color-mix(in srgb, var(--fc) 80%, #000); }
svg.tf-fc path { fill: color-mix(in srgb, var(--fc) 55%, transparent); }
.tf-filelist .row-title { display: block; }

/* ── 올리기 ── */
.up { margin-top: 12px; }
.up-drop {
    display: flex; align-items: center; gap: 14px; padding: 18px 16px; cursor: pointer;
    border: 2px dashed var(--up); border-radius: var(--r-lg);
    background: var(--up-tint); transition: background var(--dur), border-color var(--dur), box-shadow var(--dur);
}
.up-drop svg { width: 26px; height: 26px; color: #fff; flex: none; box-sizing: content-box; padding: 9px; border-radius: 50%; background: var(--up); }
.up-drop b { display: block; font-size: 14.5px; color: var(--up-deep); }
.up-drop small { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.up.is-drag .up-drop, .up-drop:hover { background: color-mix(in srgb, var(--up) 16%, var(--surface)); border-style: solid;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--up) 18%, transparent); }
.up.is-compact .up-drop { padding: 12px 14px; }
.up-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.up-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; }
.up-item.is-확인필요 { border-color: color-mix(in srgb, var(--warn) 60%, transparent); }
.up-item.is-실패 { border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.up-row { display: flex; align-items: center; gap: 10px; }
.up-main { flex: 1; min-width: 0; }
.up-name { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.up-sub { font-size: 12.5px; color: var(--text-2); }
.up-ok { color: var(--ok); font-weight: 600; }
.up-err { color: var(--danger); font-weight: 600; }
.up-bar { height: 4px; border-radius: 4px; background: var(--surface-sunken); margin-top: 6px; overflow: hidden; }
.up-bar span { display: block; height: 100%; background: var(--up); transition: width .25s; }
.up-ask { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.up-note { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.up-cands { display: flex; flex-direction: column; gap: 6px; }
.up-cand {
    display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: var(--r-md);
    border: 1px solid var(--line); cursor: pointer;
}
.up-cand.is-on { border-color: var(--tf); background: var(--tf-tint); }
.up-cand input[type=radio] { margin-top: 4px; }
.up-cand span { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.up-cand b { font-size: 13.5px; overflow-wrap: anywhere; }
.up-cand small { font-size: 12px; color: var(--text-2); }
.up-select, .up-text { font: inherit; font-size: 13px; padding: 6px 8px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); max-width: 100%; }
.up-msg { margin: 0; }
.up-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.up-clear { margin-top: 8px; }

/* ── 파일 화면 ── */
.tf-pre { white-space: pre-wrap; font-family: var(--font); font-size: 13px; line-height: 1.6; padding: 4px 16px 14px; margin: 0; max-height: 420px; overflow: auto; color: var(--text-2); }
.tf-form-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.tf-form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.tf-form-grid .span2 { grid-column: 1 / -1; }
@media (min-width: 640px) { .tf-form-grid { grid-template-columns: 1fr 1fr; } }

.tf-alert { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.55; margin: 8px 0; }
.tf-alert.ok { background: color-mix(in srgb, var(--ok) 10%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.tf-alert.danger { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

/* ── 글·회의록 ── */
.tf-post h1 { font-size: 19px; font-weight: 900; margin-bottom: 4px; }
.tf-post h3 { font-size: 15px; font-weight: 800; margin: 16px 0 6px; }
.tf-body { font-size: 14.5px; line-height: 1.7; margin-top: 10px; overflow-wrap: anywhere; }
.tf-body a { color: var(--hknu-blue); text-decoration: underline; }
.tf-attach { margin-top: 14px; border-top: 1px solid var(--line); }
.tf-comment .row-sub b { color: var(--text); }
.tf-form { display: flex; flex-direction: column; gap: 8px; }
.tf-label { font-size: 13px; font-weight: 700; color: var(--text-2); margin-top: 4px; }
.tf-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.field textarea { resize: vertical; min-height: 44px; }
.tf-invalid { color: var(--danger); font-size: 12.5px; }

/* ── 일정 ── */
.tf-todo { align-items: flex-start; }
.tf-todo input[type=checkbox] { width: 19px; height: 19px; margin-top: 3px; flex: none; }
.tf-todo-main { border: 0; background: none; text-align: left; cursor: pointer; padding: 0; color: inherit; }
.tf-todo.is-done .row-title { text-decoration: line-through; color: var(--text-3); }
.tf-month { font-size: 16px; }
.tf-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 6px; }
.tf-cal-h { text-align: center; font-size: 13px; font-weight: 700; color: var(--text-3); padding: 4px 0; }
.tf-cal-d {
    min-height: 80px; display: flex; flex-direction: column; gap: 2px; align-items: stretch; padding: 3px; border: 0; border-radius: 6px;
    background: none; cursor: pointer; text-align: left; overflow: hidden; color: var(--text);
}
.tf-cal-d .n { font-size: 14px; font-weight: 700; }
.tf-cal-d.is-out { opacity: .4; }
.tf-cal-d.is-today .n { color: #fff; background: var(--tf); border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; }
.tf-cal-d.is-sel { background: var(--tf-tint); }
.tf-cal-d .ev { font-size: 12px; line-height: 1.35; padding: 1px 4px; border-radius: 4px; background: var(--brand-tint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-cal-d .ev.k-마감 { background: color-mix(in srgb, var(--warn) 20%, var(--surface)); }
.tf-cal-d .ev.k-발표 { background: var(--tf-tint); }
.tf-cal-d .more, .tf-cal-d .todo { font-size: 11.5px; color: var(--text-3); }
/* 폰에서는 칸이 좁아도 색 막대 대신 제목 앞부분을 읽을 수 있게 — 말줄임표가 글자 자리를 먹지 않도록 잘라서 보여 준다 */
@media (max-width: 520px) {
    .tf-cal { gap: 1px; }
    .tf-cal-d { min-height: 64px; padding: 2px; }
    .tf-cal-d .ev { font-size: 11.5px; padding: 0 2px; text-overflow: clip; }
}

/* ── 참여자 ── */
/* 사업 개요 › 분과·위원 — 추진단을 위에, 6개 분과를 카드로(폰 1 · 태블릿 2 · 큰 화면 3열). 연락처는 아이콘만, 누르면 펼침 */
.tf-org { margin-top: 22px; }
.tf-org-top { margin-bottom: 12px; }
.tf-org-top .tf-org-list { display: grid; grid-template-columns: 1fr; }
/* 추진단 칸 — 아래 분과 카드처럼 폭이 넉넉하면 3열(사용자 요청 2026-10-15). 첫 줄 사람들 위에는 줄을 긋지 않는다 */
@media (min-width: 768px) {
    .tf-org-top .tf-org-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tf-org-top .tf-org-person:nth-child(-n+2) { border-top: 0; }
}
@media (min-width: 1200px) {
    .tf-org-top .tf-org-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tf-org-top .tf-org-person:nth-child(-n+3) { border-top: 0; }
}
.tf-org-groups { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: start; }
.tf-org-groups .card + .card { margin-top: 0; }
@media (min-width: 768px) { .tf-org-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tf-org-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tf-org-list { list-style: none; margin: 0; padding: 0 0 6px; }
.tf-org-person { padding: 6px 16px; border-top: 1px solid var(--line); }
.tf-org-list .tf-org-person:first-child { border-top: 0; }
.tf-org-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 34px; }
.tf-org-line b { font-size: 15px; }
.tf-org-ico {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
    background: var(--surface-2); color: var(--tf-deep); cursor: pointer;
}
.tf-org-ico svg { width: 16px; height: 16px; }
.tf-org-ico.is-on { background: var(--tf); color: #fff; }
.tf-org-contact { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 6px; }
.tf-org-contact a { display: inline-flex; align-items: center; gap: 6px; color: var(--hknu-blue); text-decoration: none; font-size: 14px; font-weight: 600; }
.tf-org-contact svg { width: 15px; height: 15px; }
.tf-snippet { display: block; line-height: 1.5; }

/* ── AI ── */

/* ── 관리 ── */
.tf-table-wrap { overflow-x: auto; }
.tf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tf-table th, .tf-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tf-table th { background: var(--surface-2); font-weight: 700; color: var(--text-2); white-space: nowrap; }
.tf-table tr.is-locked td { opacity: .5; }
.tf-table small { color: var(--text-3); }
.tf-keyhelp { margin-top: 12px; font-size: 13px; line-height: 1.6; }
/* 관리 › 이메일 — 저절로 가는 메일 안내 */
.tf-mailauto { margin-top: 12px; font-size: 13px; line-height: 1.6; }
.tf-mailauto ul { margin: 6px 0 8px; padding-left: 18px; }
.tf-keyhelp pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-sunken); padding: 8px 10px; border-radius: var(--r-sm); font-size: 12px; margin: 6px 0; }

/* ── 로그인·비밀번호 ── */
.tf-auth { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; background: var(--bg); }
.tf-auth-card { width: 100%; max-width: 400px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-2); padding: 26px 22px 22px; }
.tf-auth-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); margin-bottom: 18px; }
.tf-auth-brand b { display: block; font-size: 18px; font-weight: 900; color: var(--tf-deep); }
.tf-auth-brand small { font-size: 12px; color: var(--text-2); }
.tf-auth-title { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.tf-auth-note { font-size: 12.5px; color: var(--text-2); margin-top: 12px; line-height: 1.6; }
.tf-auth-foot { font-size: 12px; color: var(--text-3); margin-top: 14px; text-align: center; }
.tf-auth .btn.primary { margin-top: 10px; background: var(--tf-deep); }

/* 배포 뒤 서버와 다시 잇는 동안(Blazor) — 기본 모양 대신 */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: grid; place-items: center; position: fixed; inset: 0; z-index: 999; background: rgba(15, 20, 30, .35);
}
.reconnect-card { background: var(--surface); padding: 18px 20px; border-radius: var(--r-lg); box-shadow: var(--sh-3); max-width: 320px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.reconnect-card span { color: var(--text-2); font-size: 13px; }
.reconnect-btn { display: none !important; margin-top: 6px; align-self: flex-start; }
#components-reconnect-modal.is-final .reconnect-btn { display: inline-flex !important; }   /* 10분이 지나도 안 될 때만 */

/* 새 버전(워커) 알림 띠 */
.tf-update {
    position: fixed; left: 50%; transform: translateX(-50%); z-index: 9999;
    bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 12px);
    display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px;
    background: var(--hknu-navy); color: #fff; font-size: 14px; box-shadow: var(--sh-3); max-width: calc(100vw - 32px);
}
.tf-update button { border: 0; border-radius: 8px; padding: 6px 12px; background: var(--hknu-amber); color: #17191d; font-weight: 800; cursor: pointer; }
@media (min-width: 768px) { .tf-update { bottom: 20px; } }

/* ── 관리 › 홈페이지 수정·배포 (RequestsPanel·DeployPanel — ICTRobot 의 요청 화면을 TF 카드로) ── */
.req { display: flex; flex-direction: column; gap: 12px; }
.req-compose { display: flex; flex-direction: column; gap: 8px; }
.req-compose > .tf-muted { line-height: 1.55; }
.req-textarea { min-height: 150px; font-size: 15px; line-height: 1.6; }
.req .field:has(textarea.dragover) { border-color: var(--up); background: var(--up-tint); }
/* 파일 첨부 단추·올리기 진행 패널도 올리기 색으로 */
.btn.is-up { color: var(--up-deep); border-color: color-mix(in srgb, var(--up) 45%, transparent); background: var(--up-tint); }
.btn.is-up svg { color: var(--up); }
.tf-up-panel { border-left: 4px solid var(--up); }
.req-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.req-files li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px;
    padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.req-files li span { overflow-wrap: anywhere; }
label.btn.is-disabled { opacity: .5; pointer-events: none; }
.req-progress { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.req-progress code, .req code { font-size: 12px; }
.req-msg { font-size: 14px; line-height: 1.6; margin: 8px 0 0; overflow-wrap: anywhere; }
.req-msg a { color: var(--hknu-blue); font-weight: 700; }
.req-pad { margin: 8px 16px; }

/* 동기화 → … → 배포 를 한 줄 화살표 블록으로. 좁으면 줄을 바꾼다 */
.req-steps { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.req-step { position: relative; padding: 6px 14px 6px 18px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
    background: var(--surface-sunken); color: var(--text-3); border: 0;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); }
.req-step:first-child { padding-left: 12px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
.req-step.done { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); color: var(--ok); }
.req-step.current { background: var(--tf-tint); color: var(--tf-deep); animation: req-pulse 1.4s ease-in-out infinite; }
.req-step.decide { background: var(--warn); color: #fff; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; }
@keyframes req-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .req-step.current { animation: none; } }

.req-grid { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .req-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.req-grid .tf-col .card + .card { margin-top: 0; }
.req-list { max-height: 55vh; overflow-y: auto; }
@media (max-width: 1099px) { .req-list { max-height: 40vh; } }
button.row.req-item { width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.req-item .row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-item.is-sel { background: var(--tf-tint); }
.req-item:hover { background: var(--surface-2); }

/* 주고받은 내용 — 요청은 오른쪽(파랑), 에이전트는 왼쪽(초록), 되묻는 글은 노랑 */
.req-detail { min-width: 0; }
.req-thread { max-height: 520px; overflow-y: auto; padding: 4px 16px 8px; display: flex; flex-direction: column; gap: 12px; }
.req-bubble { max-width: 92%; border-radius: 12px; padding: 0 12px 10px; overflow-wrap: anywhere; word-break: keep-all;
    font-size: 14px; line-height: 1.65; }
.req-bubble.user { margin-left: auto; background: var(--brand-tint); border-left: 3px solid var(--hknu-blue); }
.req-bubble.agent { margin-right: auto; background: var(--tf-tint); border-left: 3px solid var(--tf); }
.req-bubble.ask { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border-left-color: var(--warn); }
.req-bubble-meta { margin: 0 -12px 8px; padding: 5px 12px; border-radius: 9px 9px 0 0; font-size: 12px; font-weight: 800;
    color: var(--text-2); border-bottom: 1px solid var(--line); }
.req-plain { white-space: pre-wrap; }
.req-md > :first-child { margin-top: 0; }
.req-md > :last-child { margin-bottom: 0; }
.req-md h1, .req-md h2, .req-md h3, .req-md h4 { font-size: 14.5px; font-weight: 800; margin: 12px 0 4px; }
.req-md p { margin: 0 0 8px; }
.req-md ul, .req-md ol { margin: 0 0 8px; padding-left: 20px; }
.req-md ul, .req-decide-list, .req-commits { list-style: disc; }
.req-md ol { list-style: decimal; }
.req-md li { margin-bottom: 2px; }
.req-md code { font-size: .86em; padding: 1px 5px; border-radius: 4px; background: var(--surface-sunken); }
.req-md pre { background: var(--surface-sunken); border-radius: 8px; padding: 8px 10px; overflow-x: auto; }
.req-md pre code { background: none; padding: 0; }
.req-md table { font-size: 13px; border-collapse: collapse; margin-bottom: 8px; }
.req-md th, .req-md td { border: 1px solid var(--line); padding: 3px 8px; }
.req-md a { color: var(--hknu-blue); text-decoration: underline; }
.req-atts { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.req-atts a { color: var(--hknu-blue); }
.req-followup { margin: 4px 16px 12px; padding-top: 10px; border-top: 1px dashed var(--line-strong); display: flex; flex-direction: column; gap: 6px; }
.req-followup p { font-size: 13.5px; margin: 0; }
.req-option { text-align: left; white-space: normal; height: auto; padding-block: 4px; }
.req-changed { list-style: none; margin: 0; padding: 0 16px 10px; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.req-pre { margin: 0 16px 12px; padding: 8px 10px; max-height: 420px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
    font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 1.5; background: var(--surface-sunken); border-radius: var(--r-sm); }
.req-decide-list { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; }
.req-commits { margin: 4px 0 8px; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.req-gap { margin-top: 8px; line-height: 1.55; }
.req-details { margin-top: 10px; }
.req-details summary { cursor: pointer; font-size: 13px; color: var(--text-2); }
.req-details .req-pre { margin: 6px 0 0; }

/* 미리보기 인스턴스 표시 — 운영과 헷갈리지 않게 화면 테두리를 주황으로, 오른쪽 아래에 작은 이름표.
   맨 위 띠로 했더니 고정된 윗줄(topbar)을 가렸다. 테두리·이름표는 눌림을 받지 않는다(pointer-events: none). */
.tf-preview-band { position: fixed; inset: 0; z-index: 300; pointer-events: none; border: 3px solid var(--warn); }
.tf-preview-band span { position: absolute; right: 10px; bottom: 8px; background: var(--warn); color: #fff; border-radius: 999px;
    font-size: 12px; font-weight: 800; padding: 3px 10px; box-shadow: var(--sh-1); }
@media (max-width: 767px) { .tf-preview-band span { bottom: calc(72px + env(safe-area-inset-bottom)); } }

/* 자료 오른쪽 칸(FilePeek) */
/* 파일 미리보기 모달(2026-10-20) — 문서 그대로, 큰 화면은 넓게 */
.tf-pv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.tf-pv-meta { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
.tf-pv-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-pv-sheet .p2pv { box-shadow: none; border-radius: 0; background: transparent; }
.tf-pv-sheet .p2pv-pages { max-height: none; overflow: visible; }
.tf-pv-sheet .sheet-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (min-width: 768px) {
    .sheet.full.tf-pv-sheet { width: min(1080px, 94vw); height: 92dvh; }
}
.pad-x { margin-inline: 16px; }

/* 위쪽 줄의 찾기 아이콘(종 옆) — 링크지만 종 버튼과 같은 모양 */
a.iconbtn.tf-topicon { color: inherit; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
a.iconbtn.tf-topicon.is-on { color: var(--tf-deep); }
/* 위쪽 줄 아이콘(AI 도우미·찾기·종) 사이를 조금 좁게 — 누르는 자리(40px)는 그대로 두고 칸 사이 틈(6px)만 없앤다(사용자 요청 2026-10-15) */
.tf-topbar .iconbtn + .iconbtn { margin-left: -6px; }

/* 올리기 진행 패널(tf.js 가 그린다 — Blazor 연결이 끊겨도 계속 보이게). 폰은 아래 탭 위, 큰 화면은 오른쪽 아래 */
.tf-up-panel {
    position: fixed; right: 12px; z-index: 900; width: min(380px, calc(100vw - 24px));
    bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 10px);
    background: var(--surface); color: var(--text); border-radius: var(--r-lg); box-shadow: var(--sh-3);
    border: 1px solid var(--line); padding: 10px 12px; font-size: 13px;
}
@media (min-width: 768px) { .tf-up-panel { bottom: 16px; right: 16px; } }
.tf-up-panel.is-retry { border-color: color-mix(in srgb, var(--warn) 60%, transparent); }
.tf-up-head { display: flex; align-items: flex-start; gap: 8px; }
.tf-up-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tf-up-txt b { font-size: 13.5px; }
.tf-up-txt small { color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.tf-up-btn { border: 0; background: var(--surface-2); color: var(--text-2); border-radius: var(--r-sm); padding: 3px 8px; font: inherit; font-size: 12px; cursor: pointer; }
.tf-up-total { height: 5px; border-radius: 5px; background: var(--surface-sunken); margin: 8px 0 4px; overflow: hidden; }
.tf-up-total span { display: block; height: 100%; background: var(--up); transition: width .25s; }
.tf-up-panel.is-retry .tf-up-total span { background: var(--warn); }
.tf-up-rows { list-style: none; margin: 6px 0 0; padding: 0; max-height: 28vh; overflow: auto; display: flex; flex-direction: column; gap: 3px; }
.tf-up-rows li { display: flex; gap: 8px; font-size: 12.5px; }
.tf-up-rows .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-up-rows .s { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tf-up-rows li.is-done .s { color: var(--ok); }
.tf-up-rows li.is-err .s { color: var(--danger); font-weight: 700; }
.tf-up-rows li.is-retry .s { color: var(--warn); }
.tf-up-note { margin: 6px 0 0; color: var(--danger); font-size: 12px; overflow-wrap: anywhere; }

/* ── 홈 = 할 일 | 달력 + 나머지(공지·최근 버전) — 일정 화면을 합침(2026-10-15) ── */
.tf-home-main { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.tf-home-main .card + .card { margin-top: 0; }
@media (min-width: 1100px) { .tf-home-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tf-home-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tf-home-col .card + .card { margin-top: 0; }
/* 내 것 — 걸러 내지 않고 눈에 띄게. 마감 지남 — 따로 묶지 않고 빨갛게 */
.tf-todo.is-mine { background: color-mix(in srgb, var(--hknu-blue) 6%, var(--surface)); box-shadow: inset 3px 0 0 var(--hknu-blue); }
.tf-todo.is-late { box-shadow: inset 3px 0 0 var(--danger); }
.tf-todo .row-title .tag { margin-right: 4px; vertical-align: 1px; }
.tf-fold { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; border-top: 1px solid var(--line); background: none;
    padding: 10px 16px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--text-2); cursor: pointer; text-align: left; }
.tf-fold svg { width: 16px; height: 16px; }
.tf-cal-card .card-head { gap: 4px; }
.tf-cal-card .tf-cal { box-shadow: none; padding: 4px 8px 8px; }
@media (min-width: 1200px) { .tf-cal-card .tf-cal-d { min-height: 84px; } }
.tf-day { border-top: 1px solid var(--line); padding: 8px 16px 10px; }
.tf-day-title { display: block; font-size: 14px; margin-bottom: 2px; }
.tf-day .row { padding-inline: 0; }

/* 홈 카드 색 — 할 일(TF 청록)·공지(HKNU 주황)·최근 버전(HKNU 파랑)을 한눈에 가르게(사용자 요청 2026-10-15).
   위 테두리와 머리 띠만 물들이고 본문은 그대로. 어두운 화면에서도 같은 식(surface 와 섞는다) */
.tf-hcard { --acc: var(--tf); border-top: 4px solid var(--acc); }
.tf-hcard.is-notice { --acc: var(--hknu-amber); }
.tf-hcard.is-recent { --acc: var(--hknu-blue); }
.tf-hcard > .card-head { background: color-mix(in srgb, var(--acc) 17%, var(--surface)); padding-bottom: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); }
.tf-hcard > .card-head h2 { display: flex; align-items: center; gap: 6px; font-weight: 800; color: color-mix(in srgb, var(--acc) 60%, var(--text)); }
.tf-hcard > .card-head h2 > svg { width: 20px; height: 20px; flex: none; color: var(--acc); }
.tf-hcard > .card-head h2 .tf-muted { color: var(--text-2); }

/* ── 홈페이지 수정 — 바로 배포 (2026-10-16, _Platform/patterns/direct-deploy-option.md) ──
   선택은 보통 체크박스(.tf-check) 그대로. 켜면 아래에 경고 한 줄 */
.req-mode-warn { margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.5; color: var(--warn); }
.tag.req-direct { background: transparent; color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.req-item .tag.req-direct { margin-right: 4px; }
.req-commitline { margin-top: 0; font-size: 12.5px; }
.req-revert-failed { color: var(--danger); font-weight: 700; }

/* 홈페이지 수정 — 모델 고르기: 작은 단추 + 바로 아래 펼침 목록(2026-10-16). 폰 폭에서도 화면 안에 */
.req-model { position: relative; display: inline-block; }
.req-model-btn { font-weight: 700; }
.req-model-shade { position: fixed; inset: 0; z-index: 40; }
.req-model-list {
    position: absolute; left: 0; top: calc(100% + 4px); z-index: 41; list-style: none; margin: 0; padding: 4px;
    width: max-content; min-width: 220px; max-width: min(320px, calc(100vw - 32px));
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-3);
}
.req-model-list button {
    display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-sm);
    background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.req-model-list button:hover, .req-model-list button:focus-visible { background: var(--surface-2); }
.req-model-list button.on { background: var(--brand-tint); }
.req-model-chk { flex: none; width: 14px; color: var(--hknu-blue); font-weight: 800; }
.req-model-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.req-model-txt b { font-size: 13.5px; }
.req-model-txt small { font-size: 12px; color: var(--text-2); line-height: 1.4; }
/* 카드는 넘치는 것을 자른다(base.css .card) — 모델 목록이 펼쳐지는 새 요청 카드만 넘치게 둔다 */
.card.req-compose { overflow: visible; position: relative; z-index: 2; }

/* 자료 — 끌어다 옮기기·옮기기·지우기(2026-10-16) */
.tf-row-acts { display: inline-flex; gap: 2px; flex: none; opacity: .55; }
.tf-row-acts .iconbtn { width: 32px; height: 32px; }
.tf-row-acts .iconbtn svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
    .tf-row-acts { opacity: 0; transition: opacity var(--dur); }
    .row:hover .tf-row-acts, .row:focus-within .tf-row-acts { opacity: 1; }
}
.tf-explorer.is-dragging .row *, .tf-explorer.is-dragging .tf-ft-row * { pointer-events: none; }
.row.is-drop, .tf-ft-row.is-drop { background: var(--up-tint); box-shadow: inset 0 0 0 2px var(--up); }
.row.is-dragged { opacity: .45; }
.tf-move-list { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow: auto; margin: 8px 0; }
.tf-move-row { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 9px 10px;
    border-radius: var(--r-sm); font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.tf-move-row:hover:not(:disabled) { background: var(--surface-2); }
.tf-move-row:disabled { opacity: .45; cursor: default; }
.tf-move-row.is-here { opacity: .7; }
.tf-move-row svg { width: 18px; height: 18px; color: var(--tf-deep); flex: none; }
.tf-move-row small { margin-left: auto; color: var(--text-2); }

/* 확인 시트(휴지통으로 보낼까요?) — 아이콘 + 이름 + 설명, 단추는 시트 아래 줄(2026-10-16) */
.tf-sheet-lead { margin: 0 0 4px; }
.tf-confirm { display: flex; gap: 14px; align-items: flex-start; }
.tf-confirm-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.tf-confirm-ico svg { width: 20px; height: 20px; }
.tf-confirm-txt { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tf-confirm-txt p { margin: 0; line-height: 1.55; }
.tf-confirm-name { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; overflow-wrap: anywhere; }
.tf-confirm-name svg { width: 18px; height: 18px; flex: none; }

/* ── 전체 상황판(2026-10-20) — 전광판처럼 큰 숫자 + 목차 순서의 표 ───────────── */
.sb-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; }
.sb-board { overflow: visible; }
.sb-chapter { padding: 10px 14px; background: color-mix(in srgb, var(--tf) 14%, var(--surface)); font-weight: 900; font-size: 14.5px;
    border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: baseline; }
.sb-chapter small { font-weight: 700; color: var(--text-2); }
.sb-section { padding: 8px 14px; font-weight: 800; font-size: 13.5px; color: var(--text-2); border-top: 1px solid var(--line); background: var(--surface-2); }
.sb-row { display: grid; grid-template-columns: 1fr; gap: 4px 12px; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 13.5px; }
.sb-colhead { display: none; }
.sb-toc { font-weight: 700; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.sb-target { color: var(--text-2); font-weight: 600; }
.sb-who { color: var(--text-2); }
.sb-docs-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sb-docs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.sb-doc { border-left: 3px solid var(--line-strong); padding: 4px 0 4px 8px; border-radius: 2px; }
.sb-doc.is-fresh { border-left-color: var(--ok); }
.sb-doc.is-empty { border-left-color: var(--line); }
.sb-doc.is-warn { border-left-color: var(--warn); }
.sb-file { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); text-decoration: none; font-weight: 700; }
.sb-file:hover .sb-file-name { text-decoration: underline; }
.sb-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sb-ver { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.sb-ver small { color: var(--text-2); }
.sb-pages { font-variant-numeric: tabular-nums; color: var(--text-2); }
.sb-ev-btn { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
    border-radius: var(--r-pill); padding: 2px 8px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.sb-ev-btn svg { width: 14px; height: 14px; }
.sb-ev-btn.is-on { background: var(--brand-tint); border-color: var(--hknu-blue); color: var(--hknu-blue); }
.sb-evlist { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; margin: 4px 0 2px; padding: 6px 8px; background: var(--surface-2); border-radius: var(--r-sm); }
.sb-evlist a { display: flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; font-size: 13px; min-width: 0; }
.sb-evlist a:hover .sb-file-name { text-decoration: underline; }
.sb-evlist small { color: var(--text-2); white-space: nowrap; }
/* 큰 화면 — 칸을 나란히(목차 · 분과 · 담당 · 원고들[파일 · 버전 · 쪽 · 증빙]) */
@media (min-width: 1100px) {
    .sb-row { grid-template-columns: minmax(0, 2.5fr) 74px minmax(0, 1fr) minmax(0, 4.83fr); align-items: start; }   /* 최신 버전을 줄인 만큼 목차를 넓게(2026-10-21) */
    .sb-colhead { display: grid; font-size: 12px; font-weight: 800; color: var(--text-2); background: var(--surface-2); border-top: 0; }
    .sb-docs { grid-template-columns: minmax(0, 2.6fr) minmax(106px, 0.9fr) 48px 84px; }
    .sb-colhead .sb-docs { padding-left: 11px; }
    .sb-ver { flex-wrap: nowrap; white-space: nowrap; }    /* 최신 버전은 한 줄로(v2 · 날짜 · 올린 사람) */
    .sb-evlist { grid-column: 1 / -1; }
}
/* 관리 › 홈페이지 수정 — 접수된 수정 요청(2026-10-20) */
.req-fb { margin-bottom: 14px; }
.req-fb-row { border-top: 1px solid var(--line); padding: 8px 14px 10px; }
.req-fb-row.is-on { background: var(--tf-tint); }
.req-fb-row.is-target { box-shadow: inset 4px 0 0 var(--tf); }
.req-fb-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; border: 0; background: none; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.req-fb-title { font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.req-fb-main small { color: var(--text-2); }
.req-fb-body { margin: 8px 0 0; padding: 10px 12px; background: var(--surface-2); border-radius: var(--r-sm); font-size: 13.5px; line-height: 1.6; }
.req-fb-atts { font-size: 12.5px; margin-top: 6px; }
.req-fb-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.req-fb-using { margin: 6px 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--tf-tint); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* 수정 요청 화면 */
.fb .fb-form .field + .tf-label { margin-top: 10px; }
.fb .fb-form .tf-inline { margin-top: 10px; }
.fb-row .row-main { min-width: 0; }
.fb-row .row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 올리기 — 메모 칸·점검 안내(2026-10-20) */
.up-memo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.up-memo svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.up-memo input { flex: 1; min-width: 0; }
.up-notes { list-style: none; margin: 0 0 8px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.up-notes li.is-ask { color: var(--text); font-weight: 600; }
.up-notes.is-done { margin: 6px 0 0; color: var(--text-2); }
.up-notes.is-done li::before { content: "ℹ️ "; }
.up-name-edit { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--text-2); }
.up-name-edit .up-text { flex: 1; min-width: 0; }
.up-inline { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.up-inline .field { flex: 1; min-width: 0; }
.tf-pv-memo { flex-basis: 100%; color: var(--text-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 열 제목은 칸 가운데(사용자 요청 2026-10-20) */
.sb-colhead > span, .sb-colhead .sb-docs > span { text-align: center; }
/* 편집 — 항목 옆 연필 */
.sb-editbtn { width: 28px; height: 28px; margin-left: 4px; vertical-align: middle; color: var(--text-2); }
.sb-editbtn svg { width: 15px; height: 15px; }
.sb.is-editing .sb-chapter, .sb.is-editing .sb-section, .sb.is-editing .sb-row:not(.sb-colhead) { outline: 1px dashed transparent; }
.sb-edit-doc { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.sb-edit-doc .sb-file-name { flex: 1; }
/* 목차에 걸리지 않은 원고 */
.sb-loose { margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
.sb-loose .card-head h2 { color: var(--text); }
.sb-loose-row { padding: 10px 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.sb-loose-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sb-loose-pick .tf-select { flex: 1 1 320px; min-width: 0; max-width: 640px; }
.sb-loose-hint { margin: 0; font-size: 13px; color: var(--text-2); }
/* 파일 목록 — 긴 이름은 한 줄로 줄이고(…) 마우스를 대면 title 로 다 보인다 */
.tf-filelist .row-main { min-width: 0; }
.tf-filelist .row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 장마다 무지개 순서로(요약 빨강 → Ⅴ 보라) — 장 띠는 그 색 바탕, 아래 줄은 왼쪽 색 줄 */
.sb-c0 { --ch: #e5484d; } .sb-c1 { --ch: #f76b15; } .sb-c2 { --ch: #d9a300; }
.sb-c3 { --ch: #30a46c; } .sb-c4 { --ch: #0090ff; } .sb-c5 { --ch: #8e4ec6; }
.sb-chapter[class*="sb-c"] { background: color-mix(in srgb, var(--ch) 16%, var(--surface)); box-shadow: inset 6px 0 0 var(--ch); }
.sb-chapter[class*="sb-c"] .tf-code { background: var(--ch); color: #fff; }
.sb-section[class*="sb-c"] { background: color-mix(in srgb, var(--ch) 6%, var(--surface-2)); box-shadow: inset 6px 0 0 color-mix(in srgb, var(--ch) 55%, transparent); }
.sb-row[class*="sb-c"]:not(.sb-colhead) { box-shadow: inset 6px 0 0 color-mix(in srgb, var(--ch) 55%, transparent); }
.sb-row[class*="sb-c"] .sb-toc .tf-code { background: color-mix(in srgb, var(--ch) 14%, var(--surface)); color: color-mix(in srgb, var(--ch) 70%, var(--text)); }

/* 홈 공지 — 줄을 누르면 모달(2026-10-20, 게시 화면을 뺐다) */
.tf-notice-row { width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.tf-notice-row:hover { background: var(--surface-2); }
.tf-notice-new { margin-left: auto; }
.tf-notice-comments { border-top: 1px solid var(--line); padding-top: 4px; }
.tf-notice-comments .section-title { padding: 0 16px; }

/* ── AI 도우미(하나로, 2026-10-20) — AIoT Lab AI Chat(aiot.hknu.ac.kr/chat) 모양: 인사·예시 칩·말풍선·근거·아래 입력 줄 ── */
.aic-page.page { display: flex; flex-direction: column; padding-inline: 8px; padding-bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 6px); }
/* /agent — 대화 칸이 메뉴 오른쪽 화면 폭을 다 쓴다(사용자 요청 2026-10-25, TF AI 도우미처럼). 폭 제한(.page max-width)을 푼다 */
.tf .aic-page.page { max-width: none; width: 100%; }
@media (min-width: 768px) { .aic-page.page { padding-inline: 16px; padding-bottom: 16px; } }
.aic-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 4px 10px; }
.aic-head h1 { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 900; margin: 0; }
.aic-head .tf-muted { font-size: 13px; }
.aic-new { margin-left: auto; }
.aic { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.aic-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 14px; }
.aic-hello { margin: auto 0; text-align: center; padding: 16px 8px; }
.aic-hello-t { font-weight: 800; font-size: 18px; }
.aic-hello-s { color: var(--text-2); font-size: 14px; margin-top: 5px; line-height: 1.6; }
.aic-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 16px; max-width: 760px; margin-inline: auto; }
.aic-chip { border: 1px solid color-mix(in srgb, var(--tf) 35%, transparent); background: var(--tf-tint); color: var(--tf-deep);
    border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 13.5px; cursor: pointer; transition: background .15s, border-color .15s; }
.aic-chip:hover { background: color-mix(in srgb, var(--tf) 22%, var(--surface)); border-color: var(--tf); }
.aic-msg { display: flex; gap: 9px; align-items: flex-start; }
.aic-msg.is-user { justify-content: flex-end; }
.aic-bubble { padding: 9px 13px; line-height: 1.6; font-size: 14.5px; overflow-wrap: anywhere; }
.aic-msg.is-user .aic-bubble { background: var(--tf-deep); color: #fff; border-radius: 16px 16px 4px 16px; white-space: pre-wrap; max-width: 82%; }
.aic-msg.is-bot .aic-bubble { background: var(--surface); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px;
    max-width: calc(100% - 40px); box-shadow: 0 1px 2px rgba(16, 32, 58, .05); min-width: 0; }
.aic-avatar { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--tf-deep), var(--tf) 55%, color-mix(in srgb, var(--tf) 55%, #fff)); }
.aic-avatar svg { width: 16px; height: 16px; }
.aic-text a { color: var(--tf-deep); }
.aic-err { color: var(--danger, #b42318); font-size: 13px; margin-top: 5px; }
.aic-meta { color: var(--text-3); font-size: 11.5px; margin-top: 6px; }
.aic-typing { display: inline-flex; gap: 4px; padding: 5px 0; }
.aic-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); animation: aic-dot 1.2s ease-in-out infinite; }
.aic-typing i:nth-child(2) { animation-delay: .15s; }
.aic-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes aic-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.aic-src { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line); }
.aic-src a { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); text-decoration: none; padding: 3px 5px; border-radius: 6px; min-width: 0; }
.aic-src a:hover { background: var(--tf-tint); color: var(--tf-deep); }
.aic-src-n { flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; background: var(--tf-tint); color: var(--tf-deep);
    font-weight: 700; font-size: 11.5px; display: grid; place-items: center; }
.aic-src-t { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.aic-input { display: flex; gap: 7px; align-items: flex-end; padding: 10px 11px; border-top: 1px solid var(--line); background: var(--surface); }
.aic-input textarea { flex: 1; resize: none; border: 1px solid var(--line-strong); border-radius: 14px; padding: 9px 13px; font: inherit;
    font-size: 14.5px; line-height: 1.45; max-height: 150px; overflow-y: hidden; outline: none; background: var(--surface); color: var(--text); }
.aic-input textarea:focus { border-color: var(--tf); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tf) 18%, transparent); }
.aic-send { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--tf-deep); color: #fff;
    display: grid; place-items: center; cursor: pointer; transition: opacity .15s; }
.aic-send:disabled { opacity: .4; cursor: default; }
.aic-send svg { width: 18px; height: 18px; }
.aic-panel { padding-block: 12px; }
/* 폴더 나무 머리줄 — 모두 펼치기/모두 닫기(2026-10-20, '전체' 줄 대신) */
.tf-ft-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 6px 6px 10px; margin-bottom: 4px;
    border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 800; color: var(--text-2); }
.fb-guide { margin-bottom: 10px; font-size: 14px; line-height: 1.6; }
.fb-guide ul { margin: 6px 0; padding-left: 18px; color: var(--text-2); font-size: 13.5px; }
.fb-guide li { margin: 2px 0; }

/* ── 분과 뱃지 색(2026-10-20) — 분과 번호마다 하나. Fmt.GroupClass 가 grp-1~6·grp-head 를 붙인다 ── */
:root { --g1: #2563eb; --g2: #16a34a; --g3: #7c3aed; --g4: #ea580c; --g5: #db2777; --g6: #0891b2; --g-head: #0f2c5e; }
:root[data-theme="dark"] { --g-head: #8fb4ff; }
.grp-1 { --g: var(--g1); } .grp-2 { --g: var(--g2); } .grp-3 { --g: var(--g3); }
.grp-4 { --g: var(--g4); } .grp-5 { --g: var(--g5); } .grp-6 { --g: var(--g6); } .grp-head { --g: var(--g-head); }
.tag.grp { background: color-mix(in srgb, var(--g) 13%, var(--surface)); color: color-mix(in srgb, var(--g) 82%, var(--text));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 30%, transparent); }
.cht-room-ico.grp { background: var(--g); color: #fff; }
.tf-org-head.grp { box-shadow: inset 4px 0 0 var(--g); }
.tf-menu-groups { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.sb-group { display: flex; flex-wrap: wrap; gap: 3px; }
/* 상황판 — 좁은 화면의 숫자 한 줄(넓은 화면은 열 제목 괄호에) */
.sb-summary { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 10px 14px; background: var(--surface-2); font-size: 13.5px; color: var(--text-2); }
.sb-summary b { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; margin-left: 4px; }
@media (min-width: 1100px) { .sb-summary { display: none; } }

/* ── 오른쪽 아래 [설치 | 알림] 아이콘(2026-10-20, ICTRobot #pwa-corner 와 같은 모양) — 글자 없이 아이콘만, 설명은 title ── */
.tf-corner { position: fixed; right: 12px; bottom: 12px; z-index: 65; }
.tf-corner:empty { display: none; }
.tf-corner-bar { display: flex; align-items: center; gap: 2px; padding: 3px; background: color-mix(in srgb, var(--surface) 94%, transparent);
    border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 2px 10px rgba(16, 24, 40, .12); backdrop-filter: blur(6px); }
.tf-corner button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0;
    background: none; color: var(--text-2); border-radius: 999px; cursor: pointer; }
.tf-corner button svg { width: 16px; height: 16px; }
.tf-corner button:hover { background: var(--tf-tint); color: var(--tf-deep); }
.tf-corner button:focus-visible { outline: 2px solid var(--tf); outline-offset: 1px; }
.tf-corner button.is-on { color: #F58220; }
.tf-corner-sep { width: 1px; height: 16px; background: var(--line-strong); }
/* 폰 — 아래 메뉴 바로 위. 입력 줄이 오른쪽 아래에 있는 화면(AI 도우미·대화)에서는 가리지 않게 숨긴다 */
@media (max-width: 767.98px) { .tf-corner { bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 8px); right: 8px; } }
body:has(.aic-page) .tf-corner, body:has(.cht-page) .tf-corner { display: none; }
#tf-corner-msg { position: fixed; right: 12px; bottom: 56px; z-index: 200; max-width: min(340px, calc(100vw - 24px)); padding: 10px 14px; border-radius: 12px;
    background: #1C2035; color: #fff; font-size: 13px; line-height: 1.5; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
@media (max-width: 767.98px) { #tf-corner-msg { bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 52px); right: 8px; } }

/* ── AI 도우미 — 별빛처럼 반짝임(2026-10-20). 움직임을 줄인 기기에서는 멈춘다 ── */
.tf-ai-star { position: relative; overflow: visible; }
.tf-ai-star svg { animation: tf-star-glow 2.6s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes tf-star-glow {
    0%, 100% { color: var(--tf-deep); filter: drop-shadow(0 0 0 rgba(255, 200, 60, 0)); transform: scale(1) rotate(0); }
    50% { color: #f0a500; filter: drop-shadow(0 0 4px rgba(255, 196, 40, .9)) drop-shadow(0 0 10px rgba(255, 222, 120, .55)); transform: scale(1.1) rotate(-8deg); }
}
.tf-ai-star::before, .tf-ai-star::after { content: ""; position: absolute; border-radius: 50%; background: #ffd84d; pointer-events: none; opacity: 0;
    box-shadow: 0 0 6px 2px rgba(255, 216, 77, .85); animation: tf-twinkle 2.6s ease-in-out infinite; }
.tf-ai-star::before { width: 4px; height: 4px; top: 6px; right: 7px; animation-delay: .7s; }
.tf-ai-star::after { width: 3px; height: 3px; bottom: 8px; left: 7px; animation-delay: 1.6s; }
@keyframes tf-twinkle { 0%, 100% { opacity: 0; transform: scale(.2); } 50% { opacity: 1; transform: scale(1); } }
.aic-avatar { background-size: 220% 220% !important; animation: aic-shine 3.2s ease-in-out infinite; position: relative; }
.aic-avatar svg { animation: tf-star-glow-w 2.6s ease-in-out infinite; }
@keyframes aic-shine { 0%, 100% { background-position: 0% 50%; box-shadow: 0 0 0 rgba(255, 210, 80, 0); } 50% { background-position: 100% 50%; box-shadow: 0 0 14px rgba(255, 210, 80, .55); } }
@keyframes tf-star-glow-w { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 240, 180, 0)); transform: scale(1); } 50% { filter: drop-shadow(0 0 5px rgba(255, 240, 180, .95)); transform: scale(1.12) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) {
    .tf-ai-star svg, .tf-ai-star::before, .tf-ai-star::after, .aic-avatar,
    .aic-avatar svg { animation: none; }
}
/* 관리 › 기록 — 시각·사람·한 일 칸을 넉넉하게(사용자 요청 2026-10-20) */
.tf-audit { min-width: 760px; }
.tf-audit col.c-at { width: 120px; }
.tf-audit col.c-who { width: 130px; }
.tf-audit col.c-act { width: 260px; }
.tf-audit td:nth-child(-n+3) { white-space: nowrap; }
.tf-audit td:nth-child(3) { white-space: normal; font-weight: 600; }
.tf-audit td:nth-child(4) { overflow-wrap: anywhere; color: var(--text-2); }

/* ── 홈 '꼭 지켜 주세요'(2026-10-20) — 장미·붉은 빛으로(공지의 주황과 다르게, 사용자 요청) ── */
.tf-guide { --gd: #e11d48; border: 1.5px solid color-mix(in srgb, var(--gd) 55%, transparent); background: color-mix(in srgb, var(--gd) 6%, var(--surface)); margin-top: 14px; }
.tf-guide-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.tf-guide-head b { font-size: 15.5px; font-weight: 900; color: color-mix(in srgb, var(--gd) 85%, #000); }
.tf-guide-head .tf-muted { font-size: 12.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-guide-head svg { width: 18px; height: 18px; color: var(--text-2); flex: none; }
.tf-guide-ico { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--gd); color: #fff; font-weight: 900; font-size: 15px; }
.tf-guide-list { margin: 0; padding: 0 14px 14px 34px; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; line-height: 1.55; }
.tf-guide-list li::marker { font-weight: 900; color: var(--gd); }
.tf-guide-list li > b { display: block; color: var(--text); }
.tf-guide-list li > span { display: block; color: var(--text-2); font-size: 13px; }
.tf-guide-list code { background: var(--surface-2); padding: 0 5px; border-radius: 4px; font-size: 12.5px; color: var(--text); }
.tf-guide-list a { color: var(--gd); font-weight: 800; }
:root[data-theme="dark"] .tf-guide { --gd: #fb7185; }
:root[data-theme="dark"] .tf-guide-head b { color: #fda4af; }
/* AI 도우미 하위 메뉴(2026-10-20) — AI 도우미 · 규정 문답·학교 안내 · 교직원 찾기 */
.aic-mode { display: flex; flex: none; align-self: center; padding: 2px; background: var(--surface-2); border-radius: 10px; }
.aic-mode button { border: 0; background: none; padding: 5px 9px; border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.aic-mode button.on { background: var(--surface); color: var(--tf-deep); box-shadow: 0 1px 2px rgba(16, 32, 58, .1); }
.aic-mode button:disabled { opacity: .45; cursor: default; }
.aic-tier { display: inline-block; font-size: 11.5px; font-weight: 800; color: #b45309; background: #fef3c7; border-radius: 6px; padding: 1px 7px; margin-bottom: 4px; }
.aic-warn { color: #b45309; }
@media (max-width: 600px) { .aic-input { flex-wrap: wrap; } .aic-mode { order: -1; flex-basis: 100%; } .aic-input textarea { min-width: 0; } }

/* 말로 묻기(2026-10-20, hkai MicButton 과 같은 동작) — 입력 줄 왼쪽 마이크, 듣는 중엔 빨갛게 맥박 */
.mic-wrap { position: relative; flex: none; display: flex; align-self: flex-end; }
.mic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface);
    color: var(--text-2); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s; }
.mic svg { width: 19px; height: 19px; }
.mic:hover { color: var(--tf-deep); background: var(--tf-tint); }
.mic:disabled { opacity: .45; cursor: default; }
.mic.is-on { color: #fff; background: #dc2626; border-color: #dc2626; animation: mic-pulse 1.2s ease-out infinite; }
.mic.is-busy { color: var(--tf-deep); background: var(--tf-tint); }
@keyframes mic-pulse { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); } 100% { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); } }
.mic-status { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 5; display: flex; align-items: center; gap: 8px;
    max-width: min(320px, calc(100vw - 32px)); width: max-content; padding: 8px 12px; border-radius: 12px; background: var(--surface);
    border: 1px solid var(--line); box-shadow: var(--sh-1); font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--text-2); }
.mic-status.is-on { color: #dc2626; }
.mic-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #dc2626; animation: mic-blink 1s steps(2) infinite; }
@keyframes mic-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .mic.is-on, .mic-dot { animation: none; } }

/* 교직원 찾기 — 큰 전화 단추(2026-10-20, 포털 people-call 과 같은 일) */
.people-call { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface); }
.people-call-who { font-size: 13px; font-weight: 700; color: var(--text-2); }
.people-call-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.people-call-btn { flex: 1 1 140px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: 14px;
    background: #16a34a; color: #fff; text-decoration: none; font-size: 14.5px; font-weight: 700; }
.people-call-btn.is-mobile { background: #2563eb; }
.people-call-btn svg { width: 18px; height: 18px; }
.people-call-btn b { font-variant-numeric: tabular-nums; }

/* 공지 — 넓은 모달·첨부 클립·쪽 나누기(2026-10-20) */
@media (min-width: 768px) { .sheet.tf-notice-sheet { width: min(860px, 94vw); } }
.tf-notice-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tf-notice-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-notice-clip { flex: none; display: inline-flex; align-items: center; gap: 1px; color: var(--text-2); font-size: 12px; font-weight: 700; }
.tf-notice-clip svg { width: 15px; height: 15px; }
.tf-pager { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 8px 10px 12px; }
.tf-pager button { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; font: inherit; font-size: 13px; font-weight: 700; color: var(--text-2); cursor: pointer; display: inline-grid; place-items: center; }
.tf-pager button svg { width: 15px; height: 15px; }
.tf-pager button.on { background: var(--tf-deep); border-color: var(--tf-deep); color: #fff; }
.tf-pager button:disabled { opacity: .4; cursor: default; }

/* 규정 문답 답 아래 한 줄 — 근거 펼치기 · [더 자세한 답 보기] [복사](포털 app.css .ai-foot 과 같은 모양, 2026-10-20) */
.aic .ai-foot { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.aic .ai-foot-links { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
@media (max-width: 560px) { .aic .ai-foot { flex-wrap: wrap; } .aic .ai-foot-links { flex-basis: auto; } }
.aic .ai-foot-actions { flex: none; margin-left: auto; display: flex; gap: 6px; }
.aic .ai-foot-actions .btn svg { width: 14px; height: 14px; }
.aic .ai-src-toggle { padding: 4px 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--tf-deep); text-align: left; }
.aic .ai-src-toggle::before { content: "▸ "; }
.aic .ai-src-toggle.is-open::before { content: "▾ "; }
.aic .ai-src-toggle.is-rest { color: var(--text-3); font-weight: 600; }
.aic .ai-src-list { margin-top: 4px; }
.aic .ai-src-list.is-rest { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); }
.aic .ai-src-list-head { font-size: 12px; font-weight: 700; color: var(--text-3); }
.aic .ai-source { padding: 8px 0; border-bottom: 1px solid var(--line); }
.aic .ai-source:last-child { border-bottom: 0; }
.aic .ai-source-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.aic .ai-source-head .tf-muted { font-size: 12px; }
.aic .ai-source p { margin: 5px 0 6px; font-size: 13px; line-height: 1.65; color: var(--text-2); white-space: pre-wrap; }
.aic .ai-source a { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--tf-deep); text-decoration: none; }
.aic .ai-source a svg { width: 13px; height: 13px; }
.aic-fallback { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: #b45309; }

/* 알림 모달 — 넓게(알림이 많아도 한 줄에 읽히게, 사용자 요청 2026-10-20) */
@media (min-width: 768px) { .sheet.tf-alerts-sheet { width: min(760px, 94vw); } }

/* 꼭 지켜 주세요 머리 줄 — 펼치기 + 사용법(PDF) 단추(2026-10-20) */
.tf-guide-bar { display: flex; align-items: center; gap: 6px; padding-right: 10px; }
.tf-guide-bar .tf-guide-head { flex: 1; min-width: 0; }
.tf-guide-manual { flex: none; border-color: color-mix(in srgb, var(--gd) 45%, transparent); color: color-mix(in srgb, var(--gd) 85%, #000); background: var(--surface); }
.tf-guide-manual svg { width: 15px; height: 15px; }
:root[data-theme="dark"] .tf-guide-manual { color: #fda4af; }

/* 사업 개요 — 카드마다 옅은 색(사용자 요청 2026-10-20: 구분되게, 튀지 않게). 왼쪽 띠 + 머리 줄만 옅게 물들인다 */
.ab-teal { --ac: #0d9488; } .ab-indigo { --ac: #4f46e5; } .ab-amber { --ac: #d97706; } .ab-rose { --ac: #e11d48; }
.ab-card { box-shadow: var(--sh-1), inset 4px 0 0 var(--ac); }
.ab-card > .card-head { background: color-mix(in srgb, var(--ac) 7%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--ac) 16%, transparent); }
.ab-card > .card-head h2 { color: color-mix(in srgb, var(--ac) 70%, var(--text)); }
.ab-card .tf-kv dt { color: color-mix(in srgb, var(--ac) 55%, var(--text-2)); }
.ab-card .tf-tasks b { color: color-mix(in srgb, var(--ac) 80%, var(--text)); }
/* 위 숫자 네 칸 — 위쪽 가는 띠와 숫자 색만 */
.tf-stats div { box-shadow: var(--sh-1), inset 0 3px 0 var(--ac, var(--tf-deep)); }
.tf-stats div:nth-child(1) { --ac: #0d9488; } .tf-stats div:nth-child(2) { --ac: #2563eb; }
.tf-stats div:nth-child(3) { --ac: #4f46e5; } .tf-stats div:nth-child(4) { --ac: #d97706; }
.tf-stats div b { color: color-mix(in srgb, var(--ac) 85%, var(--text)); }
/* 분과 카드 머리 줄도 그 분과 색으로 옅게 */
.tf-org-head.grp { background: color-mix(in srgb, var(--g) 7%, var(--surface)); }

/* 올리기 칸 — 폴더 고르기 단추(2026-10-21) */
.up-drop .up-dirbtn { margin-left: auto; flex: none; background: var(--surface); }
.up-drop .up-dirbtn svg { width: 15px; height: 15px; }

/* 파일 — 선택(2026-10-21): 체크 칸(.tf-selbox — 폼의 .tf-check 와 다른 것) · 고른 줄 · 위 선택 줄 */
.tf-selbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; padding: 8px 12px; border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--tf-deep) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tf-deep) 25%, transparent); }
.tf-selcount { font-size: 13.5px; color: var(--tf-deep); }
.tf-selall { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--text); cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.tf-selall:hover { background: var(--surface-2); }
.tf-selbox { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.8px solid var(--line-strong); background: var(--surface); display: inline-grid; place-items: center; color: #fff; }
.tf-selbox svg { width: 13px; height: 13px; stroke-width: 3; }
.tf-selbox.on { background: var(--tf-deep); border-color: var(--tf-deep); }
.tf-selbox.some { border-color: var(--tf-deep); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 9px var(--tf-deep); }
.tf-filelist.is-selecting .row { cursor: pointer; user-select: none; }
.tf-filelist .row.is-checked { background: color-mix(in srgb, var(--tf-deep) 9%, var(--surface)); }
.tf-danger-text { color: var(--danger); }

/* 여러 개 끌기 — 끄는 모양(2026-10-21) */
.tf-drag-ghost { position: fixed; top: -100px; left: -100px; padding: 7px 12px; border-radius: 10px; background: var(--tf-deep); color: #fff; font-size: 13px; font-weight: 800; box-shadow: var(--sh-2, 0 6px 18px rgba(0,0,0,.2)); }

/* AI 도우미 세 칸 색 구분(사용자 요청 2026-10-21) — 칸마다 TF 색 변수를 바꿔 말풍선·아바타·예시 칩·근거·마이크가 그 칸 색으로.
   사업 개요 카드와 같은 결: TF 업무 문답 청록 · 규정 문답·학교 안내 남색 · 교직원 찾기 호박 */
.aic-page .aic { box-shadow: var(--sh-1), inset 0 3px 0 var(--tf); }

/* 지난 일정 — 제목 앞 빨간 ✓(2026-10-24) · 달력 아래 일정의 푸시·메일 단추 */
.ev-done { font-style: normal; font-weight: 700; color: #d93025; margin-right: 2px; }
:root[data-theme="dark"] .ev-done { color: #ff7b72; }
.tf-ev-send { flex: none; color: var(--text-2); }
.tf-ev-link { flex: none; color: var(--hknu-blue); }

/* 왼쪽 메뉴의 관리 — 아이콘만 학교 청록으로 살짝 눈에 띄게(2026-10-24). 글자색·선택 표시는 다른 메뉴와 같다 */
.navitem.is-admin svg { color: var(--hknu-teal); stroke-width: 2.2; }
:root[data-theme="dark"] .navitem.is-admin svg { color: #3cc4b9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .navitem.is-admin svg { color: #3cc4b9; } }

/* 대화방 — 지금 보는 사람 · 안 보는 사람(2026-10-24) */
.cht-presence { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 4px 14px 6px; font-size: 12px; color: var(--text-2); border-bottom: 1px solid var(--line); }
.cht-pres-on { min-width: 0; }
.cht-pres-off { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.cht-pres-off:hover { text-decoration: underline; }
.cht-pres-list { flex-basis: 100%; color: var(--text-3, var(--text-2)); }
.cht-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #b8bfca; margin-right: 5px; vertical-align: 1px; }
.cht-dot.on { background: #1fa463; }

/* 좌우로 넘기는 탭(관리) — 지금 탭이 아닌 칸은 한 화면 높이로(SwipePager is-off, 2026-10-24) */
.swipe > .pane.is-off { max-height: calc(100dvh - 140px); overflow: hidden; }
/* 쪽 넘기기 — 줄임표와 전체 건수(Pager) */
.tf-pager-gap { color: var(--text-2); padding: 0 2px; }
.tf-pager-total { margin-left: 8px; font-size: 12px; color: var(--text-2); }

/* 관리 › AI 설정 — AI 도우미 안내 표(2026-10-24) */
.tf-aiinfo td { vertical-align: top; font-size: 13px; line-height: 1.55; }
.tf-aiinfo td:first-child { white-space: nowrap; }
.tf-aiinfo-note { margin: 8px 4px 0; font-size: 12.5px; line-height: 1.6; }

/* AI 도우미 — 관리와 같은 SwipePager(Fill, 2026-10-24). 탭 줄 아래를 칸들이 채우고, 칸마다 제 색(바깥 aic-k-* 를 덮어쓴다) */
.swipe-pager.is-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.swipe-pager.is-fill > div:last-child { flex: 1 1 auto; min-height: 0; display: flex; }
.swipe-pager.is-fill .swipe { flex: 1 1 auto; min-height: 0; }
.swipe-pager.is-fill .swipe > .pane { min-height: 0; height: 100%; display: flex; flex-direction: column; }
.aic-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* 칸 안의 대화 칸·입력 칸도 세로로만 브라우저에 맡긴다 — 안쪽 스크롤 상자(overflow:auto)가 가로 끌기를 가져가면 브라우저가 손가락을
   빼앗고(pointercancel) 한 칸 넘어가다 제자리로 튕겼다(2026-10-25). 관리 탭은 칸 안에 스크롤 상자가 없어 그런 일이 없었다 */
.swipe .aic-log, .swipe .aic-input textarea { touch-action: pan-y; }
.aic-k-ai { --tf: #00a79e; --tf-deep: #00756f; --tf-tint: #e3f6f4; }
:root[data-theme="dark"] .aic-k-ai { --tf-tint: #0f2f2d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aic-k-ai { --tf-tint: #0f2f2d; } }

/* 제목 옆 (i) 말풍선 — InfoTip(2026-10-24). 자리는 hknu.infotipPlace 가 정하기 전까지 숨긴다 */
.infotip-btn { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; margin-left: 4px; border: 0; border-radius: 50%;
    background: none; color: var(--text-2); cursor: pointer; vertical-align: middle; flex: none; }
.infotip-btn svg { width: 19px; height: 19px; }
.infotip-btn:hover, .infotip-btn[aria-expanded="true"] { color: var(--hknu-blue); background: var(--surface-2, rgba(0,0,0,.05)); }
.infotip-scrim { position: fixed; inset: 0; z-index: 90; background: transparent; }
.infotip-box { position: fixed; z-index: 91; visibility: hidden; overflow: auto; text-align: left; white-space: normal;
    padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .18); font-size: 13px; font-weight: 400; line-height: 1.6; }
.infotip-box.is-placed { visibility: visible; overflow: visible; }
.infotip-box::before { content: ""; position: absolute; top: -7px; left: calc(var(--tip-x, 50%) - 7px); width: 12px; height: 12px;
    background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.infotip-inner { max-height: calc(var(--tip-max, 70vh) - 28px); overflow: auto; }
.infotip-x { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--text-2); cursor: pointer; }
.infotip-box .infotip-title { margin: 0 22px 6px 0; font-size: 14.5px; font-weight: 800; color: var(--text); }
.infotip-box .infotip-sub { margin: 10px 0 2px; font-size: 13px; font-weight: 800; color: var(--hknu-blue); }
.infotip-box ul { margin: 2px 0 0; padding-left: 17px; }
.infotip-box li { margin: 2px 0; }
.infotip-box .infotip-note { margin-top: 8px; font-size: 12px; color: var(--text-2); }

/* 제목 + (i) — (i) 는 늘 보이고 제목만 줄임표로(2026-10-24) */
.chatfull-head h1 { display: flex; justify-content: center; align-items: center; gap: 0; }
.chatfull-head h1 .chatfull-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chatfull-head .infotip-btn { width: 24px; height: 24px; margin-left: 2px; }
.chatfull-head .infotip-btn svg { width: 17px; height: 17px; }
@media (max-width: 400px) { .chatfull-head h1 { font-size: 15.5px; letter-spacing: -0.02em; } .chatfull-head .infotip-btn { margin-left: 0; } }
.infotip-box .infotip-lead { margin: 0 0 6px; }
.infotip-box .infotip-warn { font-weight: 700; color: var(--hknu-red); }
.infotip-box .infotip-red { color: var(--hknu-red); }

/* ── /agent 전용(2026-10-25) ───────────────────────────────────────── */
/* 메뉴 — 위 세 메뉴와 준비 중인 에이전트를 나누는 줄 */
.ag-navsep { margin: 8px 10px 4px; border-top: 1px solid var(--line); padding-top: 6px; font-size: 11px; font-weight: 700; color: var(--text-2); }
.ag-navsep span { display: inline-block; }
html[data-nav="mini"] .ag-navsep span { display: none; }
@media (min-width: 768px) and (max-width: 1199.98px) { .ag-navsep span { display: none; } }
.ag-soon-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
    background: color-mix(in srgb, #64748b 14%, var(--surface)); color: #475569; vertical-align: middle; }
/* 탭(칸)마다 색 — TF AI 도우미와 같은 체계: 규정 남색 · 학교 안내 장미 · 교직원 호박 · 준비 중 회색 */
/* 더보기(폰) */
.ag-sheet-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(15, 23, 42, .35); }
.ag-more { position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; background: var(--surface); border-radius: 18px 18px 0 0;
    padding: 12px 14px calc(16px + var(--safe-bottom, 0px)); box-shadow: 0 -8px 24px rgba(15, 23, 42, .18); }
.ag-more-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ag-more-sub { margin: 12px 2px 6px; font-size: 12px; font-weight: 700; color: var(--text-2); }
/* PIN — 교직원 찾기 입구 · '더 자세한 답' 앞 */
.ag-gate { display: grid; place-items: center; }
.ag-gate-card { max-width: 380px; margin: auto; padding: 24px 20px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.ag-gate-ico { font-size: 34px; }
.ag-gate-card p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.ag-pin { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ag-pin-row { display: flex; gap: 6px; }
.ag-pin-row input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--line-strong, var(--line)); border-radius: 10px; font: inherit; font-size: 16px; letter-spacing: .2em; background: var(--surface); color: var(--text); }
.ag-pin-msg { margin: 0; color: var(--danger, #d63f3f); font-size: 13px; font-weight: 700; }
.ag-pin-ask { margin: 0; font-size: 12px; color: var(--text-2); }
.ag-pin-inline { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--tf-tint); font-size: 13px; }
/* 관리 */
.ag-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ag-stat span { display: block; font-size: 12.5px; color: var(--text-2); }
.ag-stat b { font-size: 24px; font-weight: 900; }
.ag-stat small { font-size: 13px; color: var(--text-2); font-weight: 700; }
.ag-bar { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 10px; margin: 6px 0; font-size: 13px; }
.ag-bar-t { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ag-bar-t i { display: block; height: 100%; border-radius: 999px; background: var(--tf); }
.ag-bar-n { color: var(--text-2); font-variant-numeric: tabular-nums; }
.ag-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-q { cursor: pointer; }
.ag-q.is-err .row-title { color: var(--danger, #d63f3f); }
.ag-asker { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.ag-asker svg { width: 13px; height: 13px; }
.ag-asker.is-user { color: var(--text); font-weight: 700; }
.ag-q-answer { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; }
.tf-danger-text { color: var(--danger, #d63f3f); }
/* 관리자 로그인 */
.ag-auth { min-height: 100dvh; display: grid; place-items: center; padding: 16px; background: var(--bg, #f2f4f7); }
.ag-auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px; box-shadow: var(--sh-1); }
.ag-auth-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--text); text-decoration: none; }
/* 회원·알림(2026-10-25) — 오른쪽 위 로그인·내 정보, 관리 › 회원 */
.ag-top-me span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-top-me.is-on { color: var(--tf-deep, var(--hknu-blue)); }
@media (max-width: 520px) { .ag-top-me span { max-width: 6em; } }
.ag-member { align-items: flex-start; gap: 10px; }
.ag-member .row-title .tag { margin-left: 4px; vertical-align: 1px; }
.ag-member-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex: none; }
.ag-bell { display: inline-flex; vertical-align: -3px; margin-left: 4px; color: var(--ok, #16a34a); }
.ag-bell svg { width: 16px; height: 16px; }
.ag-tok { margin-top: 8px; }
.tag.is-warn { background: color-mix(in srgb, #d97706 15%, var(--surface)); color: #b45309; }
.tag.is-ok { background: color-mix(in srgb, #16a34a 13%, var(--surface)); color: #15803d; }
.tag.is-off { background: var(--surface-2); color: var(--text-2); }
.tag.is-admin { background: color-mix(in srgb, #00a0e9 14%, var(--surface)); color: #0369a1; }
@media (max-width: 640px) { .ag-member { flex-direction: column; } .ag-member-act { justify-content: flex-start; } }
.ag-pin-ask a { color: var(--hknu-blue); font-weight: 700; }
/* 첫 화면(/agent/) — 지금 쓸 수 있는 것·준비 중인 것(2026-10-25) */
.ag-home { max-width: 980px; margin: 0 auto; padding-bottom: 40px; }   /* 위 여백(윗줄 높이)은 .page 가 준다 */
.ag-home-head { text-align: center; margin: 8px 0 22px; }
.ag-home-head img { display: block; margin: 0 auto 10px; border-radius: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.ag-home-head h1 { margin: 0; font-size: 24px; font-weight: 900; color: var(--text); }
.ag-home-head p { margin: 6px 0 0; font-size: 15px; color: var(--text-2); }
.ag-home-sec { margin: 22px 0 10px; font-size: 15px; font-weight: 800; color: var(--text-2); }
.ag-home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ag-home-grid.is-soon { grid-template-columns: repeat(3, 1fr); }
.ag-home-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; border-radius: 16px; background: var(--surface);
    border: 1px solid var(--line); border-top: 4px solid var(--tf); color: var(--text); text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease; }
@media (hover: hover) and (pointer: fine) { .ag-home-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2, 0 6px 18px rgba(0,0,0,.1)); } }
.ag-home-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tf-tint); color: var(--tf-deep); }
.ag-home-ico svg { width: 22px; height: 22px; }
.ag-home-card b { font-size: 17px; font-weight: 800; }
.ag-home-card b .tag { margin-left: 4px; font-size: 11px; vertical-align: 2px; }
.ag-home-desc { font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.ag-home-ex { margin-top: auto; padding-top: 4px; font-size: 13px; color: var(--tf-deep); font-weight: 700; }
/* '학교 구성원 전용' — 빨간 띠로 눈에 띄게(사용자 요청 2026-10-25) */
/* 오른쪽 위에 — 모든 카드의 짜임(아이콘·이름·설명·예)이 같게(사용자 요청 2026-10-26) */
.ag-home-note { position: absolute; top: 16px; right: 14px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
    font-size: 12.5px; font-weight: 800; color: #dc2626; background: color-mix(in srgb, #dc2626 10%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #dc2626 35%, transparent); }
.ag-home-note svg { width: 13px; height: 13px; stroke-width: 2.4; }
.is-soon .ag-home-card { border-top-width: 1px; background: var(--surface-2); }
.is-soon .ag-home-card b { font-size: 15.5px; }
.ag-home-foot { margin: 22px 0 0; text-align: center; font-size: 13px; color: var(--text-2); }
.ag-home-foot a { color: var(--hknu-blue); font-weight: 700; }
@media (max-width: 1100px) { .ag-home-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .ag-home-grid { grid-template-columns: 1fr; } }

/* ── 메뉴 일곱 — 무지개 빨주노초파남보(사용자 요청 2026-10-25) ───────────────────────
   메뉴 차례대로 학교 안내(빨) · 규정 문답(주) · 교직원 찾기(노) · 학사 상담(초) · 입학 상담(파) · 진로 상담(남) · 교직원 업무(보).
   (학사 상담이 준비 중에서 올라와 넷째가 되면서 입학 상담과 색을 바꿨다 — 2026-10-25)
   한 메뉴의 색은 어디서나 같다 — 메뉴 아이콘·고른 칸, 그 화면(aic-page), 첫 화면 카드, 관리의 막대·꼬리표.
   aic-k-<키> 가 --tf·--tf-deep·--tf-tint 를 정하고, 쓰는 쪽은 그 변수만 본다. 노랑은 글씨가 읽히게 진한 금색(deep)으로. */
.aic-k-campus,    .k-campus    { --tf: #dc2626; --tf-deep: #b91c1c; --tf-tint: color-mix(in srgb, #dc2626 9%, var(--surface)); }
.aic-k-rules,     .k-school    { --tf: #ea580c; --tf-deep: #c2410c; --tf-tint: color-mix(in srgb, #ea580c 10%, var(--surface)); }
.aic-k-people,    .k-people    { --tf: #ca8a04; --tf-deep: #a16207; --tf-tint: color-mix(in srgb, #eab308 13%, var(--surface)); }
.aic-k-academic,  .k-academic  { --tf: #16a34a; --tf-deep: #15803d; --tf-tint: color-mix(in srgb, #16a34a 10%, var(--surface)); }
.aic-k-admission, .k-admission { --tf: #2563eb; --tf-deep: #1d4ed8; --tf-tint: color-mix(in srgb, #2563eb 9%, var(--surface)); }
.aic-k-career,    .k-career    { --tf: #4f46e5; --tf-deep: #3730a3; --tf-tint: color-mix(in srgb, #4f46e5 10%, var(--surface)); }
.aic-k-staff,     .k-staff     { --tf: #9333ea; --tf-deep: #7e22ce; --tf-tint: color-mix(in srgb, #9333ea 9%, var(--surface)); }
:root[data-theme="dark"] [class*="aic-k-"], :root[data-theme="dark"] [class*=" k-"] { --tf-deep: color-mix(in srgb, var(--tf) 70%, white); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [class*="aic-k-"], :root:not([data-theme="light"]) [class*=" k-"] { --tf-deep: color-mix(in srgb, var(--tf) 70%, white); } }
/* 메뉴 — 아이콘은 늘 제 색, 고른 칸은 제 색 바탕(.tf .sidenav .navitem.active 가 --tf-tint·--tf-deep 을 쓴다) */
.navitem[class*="aic-k-"] svg, .tf-more-grid a[class*="aic-k-"] svg { color: var(--tf); }
.tf .bottomnav .navitem[class*="aic-k-"].active { color: var(--tf-deep); }
.tf-more-grid a[class*="aic-k-"].is-on { background: var(--tf-tint); color: var(--tf-deep); }
/* 관리 — 메뉴별 막대·꼬리표도 같은 색 */
.tag.k-school, .tag.k-campus, .tag.k-people, .tag.k-academic, .tag.k-admission, .tag.k-career, .tag.k-staff { background: var(--tf-tint); color: var(--tf-deep); }   /* 일곱 메뉴 모두(입학·진로·교직원 업무가 빠져 회색이던 것, 2026-10-26) */
/* 준비 중 — 제 색은 그대로, 조금 옅게 */
.navitem.is-soon { opacity: .85; }
.navitem.is-soon:hover, .navitem.is-soon.active { opacity: 1; }
.is-soon .ag-home-card { border-top-width: 4px; }

/* ── 관리 › 사용 통계 그래프(2026-10-26) — 메뉴는 제 색(aic-k-/k-), '더 자세한 답' 은 회청색 ──
   색이 서로 가까운 메뉴(파·남·보)가 있어 색만으로 가리지 않는다: 쌓은 칸 사이 2px 틈, 칸마다 title 풀이, 범례, 표로 보기 */
.k-cloud { --tf: #475569; --tf-deep: #334155; --tf-tint: color-mix(in srgb, #475569 10%, var(--surface)); }
:root[data-theme="dark"] .k-cloud { --tf: #94a3b8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .k-cloud { --tf: #94a3b8; } }
.ag-bar-t i[class*="k-"] { background: var(--tf); }
.ag-bar.is-cloud { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.ag-range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--text-2); }
.ag-range input[type="date"] { height: 32px; padding: 0 8px; border: 1px solid var(--line-strong, var(--line)); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.ag-range-tbl { margin-left: auto; }
.ag-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 10px; font-size: 12.5px; color: var(--text-2); }
.ag-leg { display: inline-flex; align-items: center; gap: 5px; }
.ag-leg i { width: 11px; height: 11px; border-radius: 3px; background: var(--tf); }
.ag-chart { display: flex; gap: 6px; }
.ag-chart-y { display: flex; flex-direction: column; justify-content: space-between; height: 190px; padding-bottom: 0; font-size: 11px; color: var(--text-3, var(--text-2)); text-align: right; min-width: 22px; }
.ag-chart-plot { flex: 1; display: flex; align-items: stretch; gap: 6px; min-width: 0; overflow: hidden; padding-bottom: 2px;
    background: linear-gradient(to bottom, var(--line) 1px, transparent 1px) 0 0 / 100% 95px; }
.ag-chart-plot.is-dense { gap: 2px; }
/* 기간이 길어도(최대 92일) 가로 스크롤 없이 폭 안에 — 막대가 가늘어진다 */
.ag-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.ag-chart-plot.is-dense .ag-stack { width: 70%; }
.ag-chart-plot.is-dense .ag-cloud { width: 30%; }
.ag-col-bars { height: 190px; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-bottom: 1px solid var(--line-strong, var(--line)); }
.ag-stack { width: 62%; max-width: 26px; display: flex; flex-direction: column-reverse; gap: 2px; border-radius: 4px 4px 0 0; overflow: hidden; }
.ag-stack i { display: block; min-height: 2px; background: var(--tf); }
.ag-cloud { width: 24%; max-width: 9px; min-height: 0; border-radius: 3px 3px 0 0; background: var(--tf); }
.ag-col:hover .ag-col-bars { background: color-mix(in srgb, var(--text) 4%, transparent); }
.ag-col-x { height: 16px; margin-top: 4px; font-size: 10.5px; color: var(--text-2); text-align: center; white-space: nowrap; overflow: visible; display: flex; justify-content: center; }
@media (max-width: 640px) { .ag-col-x:not(.is-major) { visibility: hidden; } }

/* ── 관리 › 자료(2026-10-26) — 메뉴 고르기·답하는 방식·학습한 자료·원본 파일·자료 더하기 ── */
.ag-dtopics { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ag-dtopics .chip svg, .ag-filter .chip svg { width: 15px; height: 15px; color: var(--tf); }
.ag-dtopics .chip.active, .ag-filter .chip[class*="k-"].active { background: var(--tf-tint); color: var(--tf-deep); border-color: var(--tf); }
.ag-filter .chip { display: inline-flex; align-items: center; gap: 4px; }
.ag-data { display: grid; gap: 12px; }
.ag-data .card { border-top: 3px solid var(--tf); }
.ag-data-h { margin: 0 0 8px; font-size: 15.5px; font-weight: 800; }
.ag-data-h small { margin-left: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.ag-data-sub { margin: 10px 0 4px; font-size: 13px; font-weight: 800; color: var(--tf-deep); }
.ag-data ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.65; }
.ag-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ag-kind { padding: 4px 10px; border-radius: 999px; background: var(--tf-tint); font-size: 12.5px; color: var(--text-2); }
.ag-kind b { color: var(--tf-deep); }
.ag-dfind { max-width: 320px; margin-bottom: 8px; }
.ag-dlist { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.ag-dlist .tf-table { margin: 0; }
.ag-dlist thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.ag-files { list-style: none; padding-left: 0 !important; columns: 2 300px; column-gap: 18px; }
.ag-files li { break-inside: avoid; padding: 2px 0; font-size: 13px; }
.ag-files a { display: inline-flex; align-items: center; gap: 4px; color: var(--text); text-decoration: none; }
.ag-files a:hover { color: var(--tf-deep); text-decoration: underline; }
.ag-files svg { width: 14px; height: 14px; color: var(--tf); flex: none; }
.ag-data-warn { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 12.5px; font-weight: 700; color: #b91c1c; }
.ag-data-warn svg { width: 14px; height: 14px; }
.ag-upload { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.ag-upload input[type="file"] { font-size: 13px; }