:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --text: #1d2330;
  --muted: #6b7280;
  --line: #e4e7ec;
  --line-strong: #cfd4dc;
  --accent: #2f6fed;
  --accent-soft: #e8efff;
  --today: #fff6d6;
  --block-bg: #f3f6fb;

  --c-supply: #2f6fed;   --c-supply-bg: #e8efff;
  --c-exam: #d93a3a;     --c-exam-bg: #fdeaea;
  --c-change: #d9820b;   --c-change-bg: #fdf1dd;
  --c-makeup: #1f9d62;   --c-makeup-bg: #e2f5eb;
  --c-todo: #7c3aed;     --c-todo-bg: #f1eafe;
  --c-idea: #0e7490;     --c-idea-bg: #e0f5f9;   /* 💬 요청게시판 */
  --c-mine: #4f46e5;     --c-mine-bg: #eef0ff;   /* 📘 선택 수업 */
  --c-private: #ea7a1a;  --c-private-bg: #fff3e6; /* 🔒 나만 보기 */
  --c-pack: #0f766e;     --c-pack-bg: #e6f6f4;     /* 🎒 챙길 것 */
  --switch-off: #cfd4dc;
  --accent-shadow: rgba(47, 111, 237, .35);  --private-shadow: rgba(234, 122, 26, .35);

  /* 바탕·회색 단계 */
  --soft: #fafbfc;       /* 입력칸·원문 바탕 */
  --soft-2: #f7f8fa;     /* 교시 열 등 조금 더 진한 바탕 */
  --head-bg: #eef0f3;    /* 시간표 요일 줄 */
  --chip-bg: #f1f2f4;    /* 회색 꼬리표 */
  --faint: #b6bcc8;      /* 아주 흐린 글자(0개, 시간표 없음) */
  --icon-faint: #9aa3b2;
  --accent-press: #cfdcff; --accent-faint: #f3f6ff;
  --today-soft: #fffbeb;
  --mark: #ffe58a;       /* 검색 강조·내 이름 */
  /* 📌 고정(노랑) */
  --c-pin-line: #f1d58a; --c-pin-bg: #fffdf5; --c-pin-tag: #fff1bf; --c-pin-text: #8a6100;
  /* 진한 테두리·연한 바탕 */
  --c-change-line: #f3cf96; --c-change-soft: #fff8ea; --warn-text: #a15c00;
  --c-money-text: #7a4a00; --c-money-badge: #ffe7b3;
  --c-makeup-line: #b5e0c8; --c-makeup-soft: #f4fbf7; --c-ins: #146c43;
  --c-exam-line: #f3b9b9; --c-exam-soft: #fff6f6; --danger-text: #b42318;
  --c-todo-line: #cdb8fb; --c-todo-soft: #faf7ff;
  /* 시간표 칸 */
  --practice-bg: #e0f1ec; --practice-edge: #3a9282; --practice-line: #a9d6cc; /* 실습 수업 칸(이론은 --block-bg) */
  --block-edge: #94a3b8; --cancel-edge: #b8bec8; --stripe-1: #f7f7f8; --stripe-2: #eeeff1;
  /* 🦷 치아 그림: 치아 위에 번호가 있어 어두운 화면에서도 치아는 밝게 */
  --t-gum: #f7c7c9; --t-palate: #ef9ea3;
  --t-tooth: #ffffff; --t-tooth-line: #d8b9bb; --t-groove: #e7d3d4; --t-num: #d2555c;
  --t-sel-fill: #eef3ff; --t-need-fill: #e0f2fe; --t-used-fill: #ffe6cc;
  --t-need: #0ea5e9; --t-short: #0369a1; --t-used: #f08c2e;
  --t-need-bg: #e0f2fe; --t-need-soft: #f0f9ff; --t-need-line: #b6e0fb; --t-used-bg: #ffe6cc;
  --shadow: rgba(0, 0, 0, .16);
  --badge-red: #d93a3a; --badge-green: #1f9d62; /* 하얀 글자를 얹는 숫자 뱃지 */
  color-scheme: light;
}

/* 🌙 어두운 화면: <html data-theme="dark">(theme.js가 기기 설정·사용자 선택에 따라 붙임). 위와 같은 이름에 어두운 값만 */
:root[data-theme="dark"] {
  --bg: #121418;
  --panel: #1b1e24;
  --text: #e4e6eb;
  --muted: #9aa1ad;
  --line: #2d323b;
  --line-strong: #434a56;
  --accent: #5b8cff;
  --accent-soft: #1e2a45;
  --today: #3a3217;
  --block-bg: #232830;

  --c-supply: #6e9bff;   --c-supply-bg: #1e2a45;
  --c-exam: #ff6b6b;     --c-exam-bg: #3b1f22;
  --c-change: #f0a33c;   --c-change-bg: #382a16;
  --c-makeup: #3dc483;   --c-makeup-bg: #163027;
  --c-todo: #a98bff;     --c-todo-bg: #2a2244;
  --c-idea: #3cc0db;     --c-idea-bg: #13333c;
  --c-mine: #8f8dff;     --c-mine-bg: #25254a;
  --c-private: #ff9a45;  --c-private-bg: #3b2817;
  --c-pack: #2dd4bf;     --c-pack-bg: #12332f;
  --switch-off: #434a56;
  --accent-shadow: rgba(91, 140, 255, .3);  --private-shadow: rgba(255, 154, 69, .28);

  --soft: #16191e;
  --soft-2: #20242b;
  --head-bg: #252a32;
  --chip-bg: #2a2f37;
  --faint: #5d6471;
  --icon-faint: #7a8291;
  --accent-press: #2c3f6b; --accent-faint: #1a2233;
  --today-soft: #2a2614;
  --mark: #6b5713;
  --c-pin-line: #6b5a22; --c-pin-bg: #24211a; --c-pin-tag: #3d3418; --c-pin-text: #e7c45e;
  --c-change-line: #5c4421; --c-change-soft: #2a2218; --warn-text: #f0a33c;
  --c-money-text: #f2b65c; --c-money-badge: #4a3512;
  --c-makeup-line: #2a5a44; --c-makeup-soft: #17241f; --c-ins: #5fd69b;
  --c-exam-line: #6a3036; --c-exam-soft: #2a1b1e; --danger-text: #ff8a80;
  --c-todo-line: #4a3d75; --c-todo-soft: #221d33;
  --practice-bg: #1d3532; --practice-edge: #4aa595; --practice-line: #2e5f57;
  --block-edge: #5e6878; --cancel-edge: #555c68; --stripe-1: #20242b; --stripe-2: #282c34;
  --t-gum: #5a3035; --t-palate: #7a3b42;
  --t-tooth: #ece7e1; --t-tooth-line: #a38c8e; --t-groove: #cbb9ba; --t-num: #c2414a;
  --t-sel-fill: #c9d8ff; --t-need-fill: #bfe4fb; --t-used-fill: #ffd3a8;
  --t-need: #38bdf8; --t-short: #7cc8f5; --t-used: #ff9f4a;
  --t-need-bg: #12324a; --t-need-soft: #132530; --t-need-line: #24506e; --t-used-bg: #45301a;
  --shadow: rgba(0, 0, 0, .5);
  --badge-red: #d63c40; --badge-green: #1e8a56;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 { margin: 0; }
h2 { font-size: 17px; font-weight: 700; }
button { font: inherit; cursor: pointer; color: inherit; }
/* 입력칸 기본 바탕·글자색(어두운 화면에서 하얀 칸이 남지 않게). 칸마다 따로 정한 바탕이 있으면 그게 우선 */
input, textarea, select { background-color: var(--panel); color: var(--text); }

.topbar { padding: 24px 24px 8px; max-width: 1600px; margin: 0 auto; }
.topbar h1 { font-size: 22px; }
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.profile-chip {
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  padding: 6px 14px; font-size: 14px; font-weight: 600;
  word-break: keep-all; text-align: left; /* 좁은 화면에서 "8조"가 "8 / 조"로 쪼개지지 않게 */
}
.profile-chip.empty { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.inapp-banner {
  background: var(--c-pin-tag); border-bottom: 1px solid var(--c-pin-line); color: var(--c-pin-text);
  padding: 10px 16px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
}
.inapp-banner a { color: inherit; font-weight: 700; }
.profile-link { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.profile-link input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); }
.history { font-size: 12px; color: var(--muted); margin-top: 6px; }
.history summary { cursor: pointer; }
.history ul { margin: 4px 0 0; padding-left: 16px; }
.topbar p { margin: 4px 0 0; color: var(--muted); }

.layout {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); /* 왼쪽 할 일 · 오른쪽 시간표 탭 */
  gap: 16px;
  padding: 16px 24px 32px;
  max-width: 1600px;
  margin: 0 auto;
  align-items: start;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  min-width: 0;
}

/* ---------- 입력 ---------- */
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  resize: vertical;
}
textarea:focus, input:focus, select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
#notice-text { min-height: 200px; margin-top: 12px; }

.form-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 10px; }
.hint { color: var(--muted); font-size: 13px; }

.primary-btn {
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 9px 16px;
  font-weight: 600;
}
.primary-btn:disabled { opacity: .6; cursor: progress; }
.small-btn { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 3px 10px; font-size: 13px; }
.small-btn:hover { border-color: var(--line-strong); }
.danger { color: var(--c-exam); }
.danger:hover { border-color: var(--c-exam); }

.status { min-height: 1.5em; margin: 8px 0 0; font-size: 14px; }
.status.error { color: var(--c-exam); }
.status.ok { color: var(--c-makeup); }

.list-title { margin-top: 20px; }
.count { color: var(--muted); font-weight: 500; font-size: 14px; }

.notice-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
/* 입력한 공지는 공지가 쌓여도 페이지가 길어지지 않게 높이를 정하고 칸 안에서 스크롤(최신 공지가 맨 위) */
#notice-list {
  max-height: min(70vh, 820px); overflow-y: auto; overscroll-behavior: contain;
  padding: 2px 6px 2px 2px; margin-right: -6px; /* 스크롤바가 카드 테두리를 가리지 않게 */
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: 10px; padding-bottom: 10px;
}
#notice-list:has(> .empty) { border: 0; padding: 0; }
.empty { color: var(--muted); font-size: 14px; }

.notice-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.notice-card.busy { opacity: .6; pointer-events: none; }
.notice-head { display: flex; align-items: center; gap: 6px; }
.notice-meta { font-size: 12px; color: var(--muted); margin-right: auto; }
.raw-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13.5px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 6px 0;
  max-height: 7.5em;
  overflow: hidden;
}
.raw-text.open { max-height: none; }
.toggle-raw { background: none; border: 0; color: var(--accent); font-size: 13px; padding: 0; }
.edit-area { min-height: 140px; margin: 6px 0; font-size: 13.5px; }
.edit-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ---------- 시간표 / 기타 공지 탭 ---------- */
.main-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: -4px 0 14px; }
.main-tabs button {
  border: 0; background: none; padding: 8px 14px 9px; font-size: 15.5px; font-weight: 600; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; flex-shrink: 0;
}
.main-tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.new-badge { border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 700; color: #fff; background: var(--badge-red); }
.new-tag { color: #fff; background: var(--badge-red); font-size: 11px; }
.info-head { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.info-head:empty { display: none; }
/* 기타 공지 카드 목록: 공지가 쌓여도 페이지가 길어지지 않게 높이를 정하고 칸 안에서 스크롤(위의 검색·📌 고정 줄은 항상 보임) */
.info-list {
  display: flex; flex-direction: column; gap: 10px; margin-top: 8px;
  max-height: min(75vh, 900px); overflow-y: auto; overscroll-behavior: contain;
  padding: 2px 6px 2px 2px; margin-right: -6px;
}
.entry-link.add { border-style: dashed; color: var(--muted); padding-left: 10px; }
.entry-link.add:hover { color: var(--accent); }

/* 📌 계속 유효한 규칙: 고정 공지 한 줄씩 */
.pin-bar { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.pin-bar .feed-section { margin: 0 0 2px; }
.pin-row { border: 1px solid var(--c-pin-line); background: var(--c-pin-bg); border-radius: 8px; }
.pin-line { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; padding: 5px 10px; text-align: left; font-size: 13.5px; }
.pin-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-row.open .pin-text { white-space: normal; font-weight: 600; }
.pin-arrow { color: var(--muted); font-size: 13px; flex-shrink: 0; }
.pin-detail { padding: 0 10px 8px 30px; font-size: 13px; }
.pin-detail .info-points { margin-top: 0; }
.pin-detail .card-actions { margin-top: 6px; }
.pin-more { align-self: flex-start; font-size: 12.5px; }
.card-rules { margin-top: 6px; background: var(--c-pin-bg); border: 1px solid var(--c-pin-line); border-radius: 8px; padding: 6px 10px; }
.card-rules-title { font-size: 12px; font-weight: 700; color: var(--c-pin-text); }
.card-rules .info-points { margin-top: 2px; }
/* 💰 정산 탭 */
.money-badge { border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 700; color: var(--c-money-text); background: var(--c-money-badge); }
.settle-tag { border: 1px solid var(--c-change-line); background: var(--c-change-soft); color: var(--c-money-text); }
.settle-summary { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--soft); }
.settle-summary p { margin: 0 0 8px; }
.settle-who { font-size: 13px; color: var(--muted); font-weight: 600; }
.settle-total { font-size: 28px; font-weight: 800; letter-spacing: -.5px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.settle-total.done { font-size: 18px; color: var(--c-makeup); }
.settle-all { margin-top: 6px; }
.settle-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.settle-line { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.settle-line.paid { background: var(--c-makeup-soft); border-color: var(--c-makeup-line); }
.settle-line.paid .settle-amount { color: var(--muted); text-decoration: line-through; }
.settle-line-main { display: flex; align-items: flex-start; gap: 10px; }
.settle-line-text { flex: 1; min-width: 0; }
.settle-label { font-weight: 700; }
.settle-meta { font-size: 12.5px; color: var(--muted); }
.settle-amount { font-weight: 800; font-size: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.settle-paid { font-size: 13px; color: var(--c-makeup); font-weight: 600; margin-top: 2px; }
.settle-warn { font-size: 13px; color: var(--warn-text); background: var(--c-change-bg); border-radius: 6px; padding: 4px 8px; margin: 4px 0 0; }
.settle-line-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 6px; }
.pay-btn { padding: 6px 14px; }
.account-box { margin-top: 14px; border: 1px dashed var(--line-strong); border-radius: 10px; padding: 10px 12px; }
.account-title { font-size: 13px; font-weight: 700; color: var(--muted); }
.account-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.account-text { font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.settle-note { margin: 10px 0 0; }
.settle-src { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; border-top: 1px solid var(--line); padding: 8px 0; font-size: 13.5px; flex-wrap: wrap; }
.settle-src .settle-line-actions { margin-top: 0; }
.settle-unset { margin-top: 6px; }
#settle-tab .feed-section { margin-top: 16px; }

/* 🦷 내 모형치아 재고 */
.teeth-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.teeth-head h3 { font-size: 18px; }
.teeth-status.error { color: var(--c-exam); }
.teeth-hint { margin: 4px 0 8px; }
.tp-kind { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 12.5px; font-weight: 700; color: var(--text); background: var(--chip-bg); }
.t-scroll { margin-bottom: 14px; }
.t-chart { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel); }
.t-jaw-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--text); font-weight: 800; margin-bottom: 4px; }
/* 위턱·아래턱 아치: 컴퓨터는 나란히, 휴대폰은 위아래 */
.t-arches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.t-arches figure { margin: 0; min-width: 0; }
.t-arches figcaption { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; }
.chart-decid .t-arches { max-width: 75%; margin: 0 auto; } /* 유치는 영구치보다 조금 작게(칸 크기 약 92%), 화면 너비에 맞춰 같이 커짐 */
svg.arch { display: block; width: 100%; height: auto; user-select: none; -webkit-tap-highlight-color: transparent; }
.gum-band { fill: none; stroke: var(--t-gum); stroke-linecap: round; stroke-linejoin: round; }
.palate { fill: var(--t-palate); }
.arch-side { font-size: 10px; fill: var(--icon-faint); font-weight: 700; }
.arch-side.end { text-anchor: end; }
.tt { cursor: pointer; outline: none; }
.tt-body { fill: var(--t-tooth); stroke: var(--t-tooth-line); stroke-width: 1.2; }
.tt-line { fill: none; stroke: var(--t-groove); stroke-width: 1.1; stroke-linecap: round; }
.tt:hover .tt-body, .tt:focus-visible .tt-body { stroke: var(--accent); stroke-width: 1.8; }
.tt.sel .tt-body { stroke: var(--accent); stroke-width: 2.4; fill: var(--t-sel-fill); }
.tt.flag-need .tt-body { fill: var(--t-need-fill); stroke: var(--t-need); stroke-width: 2; }
.tt.flag-short .tt-body { fill: var(--t-need-fill); stroke: var(--t-short); stroke-width: 2.2; stroke-dasharray: 4 2.5; }
.tt.flag-used .tt-body { fill: var(--t-used-fill); stroke: var(--t-used); stroke-width: 2; }
.tt-num { font-size: 9.5px; font-weight: 800; fill: var(--t-num); text-anchor: middle; pointer-events: none; }
.tt-num.small { font-size: 8px; }
/* 개수 칸(SVG): ▲ / 숫자 / ▼. 종류별 색 구분 없이 한 가지 색, 0개는 흐리게 */
.tchip .tc-box { fill: var(--panel); }
.tchip .tc-frame { fill: none; stroke: var(--line-strong); stroke-width: 1.2; pointer-events: none; }
.tchip .tc-hit { fill: transparent; cursor: pointer; }
.tchip .tc-arrow .tc-hit { fill: var(--soft-2); }
.tchip .tc-sep { stroke: var(--line); stroke-width: 1; }
.tchip .tc-num { font-weight: 800; fill: var(--text); text-anchor: middle; font-variant-numeric: tabular-nums; pointer-events: none; }
.tchip .tc-arrow path { fill: var(--icon-faint); pointer-events: none; }
.tchip .tc-arrow:hover .tc-hit { fill: var(--accent-soft); }
.tchip .tc-arrow:hover path { fill: var(--accent); }
.tchip .tc-arrow:active .tc-hit { fill: var(--accent-press); }
.tchip .tc-num-area:hover .tc-hit { fill: var(--accent-faint); }
.tchip.zero .tc-num { fill: var(--faint); font-weight: 600; }
.tchip.sel .tc-box { fill: var(--accent-soft); } .tchip.sel .tc-frame { stroke: var(--accent); stroke-width: 2.2; }
/* 그림 제목, 오른쪽에 총 개수 */
.t-title { color: var(--text); }
.t-total { font-size: 12.5px; font-weight: 700; color: var(--muted); }
/* 공지 연동 표시: 지난 실습에 씀(주황) > 다가오는데 보유 0개(진한 파랑 점선) > 다가오는 실습(하늘색) */
.tchip.flag-need .tc-box { fill: var(--t-need-bg); } .tchip.flag-need .tc-frame { stroke: var(--t-need); stroke-width: 2; }
.tchip.flag-short .tc-box { fill: var(--t-need-bg); } .tchip.flag-short .tc-frame { stroke: var(--t-short); stroke-width: 2.2; stroke-dasharray: 4 2.5; }
.tchip.flag-used .tc-box { fill: var(--t-used-bg); } .tchip.flag-used .tc-frame { stroke: var(--t-used); stroke-width: 2; }
.teeth-legend { display: flex; gap: 10px; flex-wrap: wrap; margin: 2px 0 10px; }
.teeth-legend .lg { display: inline-flex; align-items: center; gap: 4px; }
.teeth-legend .lg::before { content: ""; width: 12px; height: 12px; border-radius: 3px; border: 2px solid; }
.teeth-legend .flag-used::before { border-color: var(--t-used); background: var(--c-change-soft); }
.teeth-legend .flag-short::before { border-color: var(--t-short); border-style: dashed; background: var(--t-need-bg); }
.teeth-legend .flag-need::before { border-color: var(--t-need); background: var(--t-need-bg); }
.teeth-alert { border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; font-size: 13.5px; }
.teeth-alert.used { background: var(--c-change-soft); border: 1px solid var(--c-change-line); }
.teeth-alert.need { background: var(--t-need-soft); border: 1px solid var(--t-need-line); }
.ta-title { font-weight: 700; margin-bottom: 4px; }
.ta-short { color: var(--t-short); }
.ta-sub { font-size: 12.5px; color: var(--muted); margin: -2px 0 4px; }
.ta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 4px 0; border-top: 1px dashed var(--c-change-line); }
.ta-row:first-of-type { border-top: 0; }
.ta-text { color: var(--text); font-size: 13.5px; }
.ta-actions { display: flex; gap: 6px; }
.ta-actions .primary-btn { padding: 5px 12px; }
.ta-group { margin-top: 4px; }
.ta-when { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ta-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.ta-chip { border: 1px solid var(--t-need-line); background: var(--panel); border-radius: 999px; padding: 2px 10px; font-size: 13px; }
.ta-chip small { color: var(--muted); }
.ta-chip.short { border: 1.5px dashed var(--t-short); background: var(--t-need-bg); }
.ta-chip.short small { color: var(--t-short); font-weight: 700; }
/* 큰 조절판: 화면 아래에 붙어 있음 */
.teeth-panel {
  position: sticky; bottom: 8px; z-index: 5; margin-top: 10px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 14px; padding: 10px 12px;
  box-shadow: 0 8px 28px var(--shadow);
}
.tp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tp-head b { font-size: 18px; }
.tp-head .close-btn { margin-left: auto; }
.tp-row { display: grid; grid-template-columns: 70px 52px 1fr 52px; gap: 8px; align-items: center; margin-top: 6px; }
.tp-btn { height: 48px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--soft-2); font-size: 26px; font-weight: 700; line-height: 1; }
.tp-btn:active { background: var(--accent-soft); }
.tp-row input { height: 48px; text-align: center; font: inherit; font-size: 22px; font-weight: 800; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.teeth-log ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }

/* 👥 명단: 여러 명을 한 줄에 이어서 */
.roster { margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--soft); }
.roster-head { font-size: 12.5px; font-weight: 700; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.roster-me { margin-left: auto; font-weight: 600; font-size: 12px; color: var(--muted); }
.roster-me.hit { color: #fff; background: var(--badge-red); border-radius: 999px; padding: 0 8px; }
.roster-people { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 4px; font-size: 13px; line-height: 1.5; }
.roster-person { white-space: nowrap; font-variant-numeric: tabular-nums; }
.roster-person b { font-weight: 600; }
.roster-person small { color: var(--muted); }
.roster-person.me { background: var(--mark); border-radius: 4px; padding: 0 4px; }
.roster-input { min-height: 120px; }
.partial-tag { display: inline-block; margin-right: 5px; border-radius: 4px; padding: 0 5px; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--chip-bg); border: 1px dashed var(--line-strong); vertical-align: 1px; }

/* ---------- 기타 공지 ---------- */
.feed-search { width: 100%; padding: 8px 12px; font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.feed-chips { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.feed-chip-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.feed-row-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.feed-chip {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  padding: 2px 10px; font-size: 12.5px; white-space: nowrap;
}
.feed-chip .n { font-size: 11px; color: var(--muted); font-weight: 600; }
.feed-chip.active { background: var(--text); border-color: var(--text); color: var(--panel); font-weight: 600; }
.feed-chip.active .n { color: var(--line-strong); }
.feed-result { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); }
.feed-section { margin: 4px 0 -4px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font-size: 13px; text-align: left; }
.more-btn { align-self: center; padding: 5px 16px; }
.realtime-toggle { align-self: center; color: var(--muted); }
.notice-card.pinned { border-color: var(--c-pin-line); background: var(--c-pin-bg); }
.notice-card.realtime { opacity: .7; }
.notice-card.flash { animation: flash 1.2s ease-out 2; }
.info-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.info-summary { margin: 6px 0 0; font-weight: 700; font-size: 14.5px; line-height: 1.4; }
.info-points { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; }
.info-points li + li { margin-top: 1px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.small-btn.pinned { border-color: var(--c-pin-line); background: var(--c-pin-bg); }
mark { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 1px; }
.info-tag.it-rule { color: var(--danger-text); background: var(--c-exam-bg); }
.info-tag.it-ref { color: var(--c-idea); background: var(--c-idea-bg); }
.info-tag.it-event { color: var(--c-todo); background: var(--c-todo-bg); }
.info-tag.it-money { color: var(--warn-text); background: var(--c-change-bg); }
.info-tag.it-dist { color: var(--c-makeup); background: var(--c-makeup-bg); }
.info-tag.it-etc { color: var(--muted); background: var(--chip-bg); }
.pin-tag { color: var(--c-pin-text); background: var(--c-pin-tag); }
.rt-tag { color: var(--muted); background: var(--chip-bg); }
.subject-tag { border: 1px solid var(--line); background: var(--panel); color: var(--text); font-weight: 600; }
button.subject-tag:hover { border-color: var(--accent); color: var(--accent); }
.check-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.edit-form .check-pill, .check-pill {
  display: inline-flex; align-items: center; gap: 4px; color: var(--text);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px 2px 6px; font-size: 13px; cursor: pointer;
}
.edit-form .check-pill input { width: auto; margin: 0; }
.check-pill.wide { border-radius: 8px; }

.entry-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.entry-link {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  padding: 3px 10px 3px 4px; font-size: 13px; text-align: left;
}
.entry-link:hover { border-color: var(--accent); }
.entry-link.warn { border-style: dashed; color: var(--muted); }
.no-entry { font-size: 13px; color: var(--muted); margin: 8px 0 0; }

/* ---------- AI 정확도 ---------- */
.ai-stats { margin-top: 20px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; }
.ai-stats > summary { display: flex; align-items: center; gap: 8px; padding: 12px 0; font-weight: 700; cursor: pointer; }
.ai-badge { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 8px; }
.ai-badge.ok { color: var(--c-makeup); background: var(--c-makeup-bg); }
.ai-badge.warn { color: var(--c-change); background: var(--c-change-bg); }
.ai-badge.bad { color: var(--c-exam); background: var(--c-exam-bg); }
.ai-badge.few { color: var(--muted); background: var(--chip-bg); }
.ai-model { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.ai-message { font-size: 13.5px; margin: 0 0 10px; }
.ai-metrics { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; margin-bottom: 12px; }
.ai-metrics > span:nth-child(odd) { color: var(--muted); }
.ai-metrics > span:nth-child(even) { text-align: right; font-variant-numeric: tabular-nums; }
.ai-issues-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 6px; font-size: 13px; font-weight: 600; }
.ai-issue { border-top: 1px solid var(--line); padding: 6px 0; font-size: 13px; }
.ai-issue summary { cursor: pointer; }
.ai-issue .when { color: var(--muted); font-size: 12px; margin-right: 4px; }
.ai-stats .raw-text { max-height: 160px; overflow: auto; }
.ai-stats .empty { margin: 0 0 12px; font-size: 13px; }

/* ---------- 할 일 ---------- */
.todo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.todo-badge { display: inline-block; margin-left: 4px; border-radius: 999px; padding: 1px 9px; font-size: 13px; font-weight: 700; color: #fff; background: var(--badge-red); vertical-align: 2px; }
.todo-badge.calm { background: var(--badge-green); }
.todo-section { margin-top: 12px; }
.todo-section-title { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 6px; }
.todo-section-title.overdue { color: var(--c-exam); }
.todo-section-title.today { color: var(--c-todo); }
.todo-list { display: flex; flex-direction: column; gap: 6px; }
.todo-item { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--panel); }
.todo-item.overdue { border-color: var(--c-exam-line); background: var(--c-exam-soft); }
.todo-item.today { border-color: var(--c-todo-line); background: var(--c-todo-soft); }
.todo-item.done { opacity: .55; }
.todo-item.done .todo-title { text-decoration: line-through; }
.todo-check { display: flex; padding-top: 2px; cursor: pointer; }
.todo-check input { width: 20px; height: 20px; accent-color: var(--c-todo); cursor: pointer; }
.todo-main { flex: 1; min-width: 0; background: none; border: 0; padding: 0; text-align: left; }
.todo-title { font-weight: 600; font-size: 14.5px; }
.todo-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 3px; font-size: 12px; }
.due-chip { border-radius: 999px; padding: 0 8px; background: var(--chip-bg); color: var(--muted); font-weight: 600; }
.due-chip.overdue { background: var(--c-exam-bg); color: var(--c-exam); }
.due-chip.today { background: var(--c-todo-bg); color: var(--c-todo); }
.target-chip { border-radius: 999px; padding: 0 8px; border: 1px solid var(--line); color: var(--muted); }
.need-profile { color: var(--c-change); }
.todo-empty { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.todo-more { margin-top: 10px; font-size: 13px; color: var(--muted); }
.todo-more summary { cursor: pointer; }
.todo-more .todo-list { margin-top: 6px; }
.todo-hidden-note { font-size: 12px; color: var(--muted); margin: 10px 0 0; }

/* ---------- 태그 ---------- */
.tag { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.t-준비물 { color: var(--c-supply); background: var(--c-supply-bg); }
.t-시험 { color: var(--c-exam); background: var(--c-exam-bg); }
.t-일정변경, .t-휴강, .t-변경 { color: var(--c-change); background: var(--c-change-bg); }
.t-보강, .t-추가 { color: var(--c-makeup); background: var(--c-makeup-bg); }
.t-할일 { color: var(--c-todo); background: var(--c-todo-bg); }

/* ---------- 캘린더 공통 ---------- */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; padding: 2px; background: var(--chip-bg); }
.view-toggle button { border: 0; background: none; border-radius: 7px; padding: 4px 14px; font-size: 14px; color: var(--muted); }
.view-toggle button.active { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav h2 { font-size: 18px; min-width: 150px; text-align: center; }
.icon-btn { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; width: 34px; height: 34px; font-size: 20px; line-height: 1; }
.ghost-btn { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 5px 12px; margin-left: auto; }
.week-note { margin: 8px 0 0; font-size: 13px; color: var(--c-change); font-weight: 600; min-height: 0; }
.week-note:empty { display: none; }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; font-size: 13px; }
.filter-label { color: var(--muted); }
.filter { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.filter input { accent-color: var(--accent); }
.legend { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }

.chip {
  display: flex; align-items: center; gap: 4px;
  width: 100%;
  border: 0; border-left: 3px solid; border-radius: 5px;
  padding: 2px 5px;
  font-size: 12px; text-align: left;
  overflow: hidden; white-space: nowrap;
}
.chip .chip-text { overflow: hidden; text-overflow: ellipsis; }
.chip.t-준비물 { border-color: var(--c-supply); }
.chip.t-시험 { border-color: var(--c-exam); }
.chip.t-일정변경, .chip.t-휴강, .chip.t-변경 { border-color: var(--c-change); }
.chip.t-보강, .chip.t-추가 { border-color: var(--c-makeup); }
.chip.t-할일 { border-color: var(--c-todo); }
.flash { animation: flash 1.6s ease-out 2; }
@keyframes flash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px rgba(47,111,237,.45); } }

/* ---------- 주간 시간표 ---------- */
.week-scroll { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: 8px; }
.week-grid {
  --period-h: 54px; /* 한 교시 최소 높이 */
  display: grid;
  min-width: 640px;
  background: var(--panel);
}
.wk-corner, .wk-day, .wk-period, .wk-slot { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wk-corner { background: var(--head-bg); font-size: 12px; color: var(--muted); display: flex; align-items: center; justify-content: center; position: sticky; left: 0; z-index: 3; }
.wk-day { background: var(--head-bg); padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wk-day.today { background: var(--today); }
.wk-date { font-size: 13px; font-weight: 700; text-align: center; }
.wk-date.sun { color: var(--c-exam); }
.wk-date.sat { color: var(--c-supply); }
.wk-day.today .wk-date::after { content: " · 오늘"; color: var(--accent); font-weight: 600; }
.wk-period {
  background: var(--soft-2); font-size: 12px; font-weight: 600; text-align: center;
  display: flex; flex-direction: column; justify-content: center;
  position: sticky; left: 0; z-index: 2;
}
.wk-period small { font-weight: 400; color: var(--muted); font-size: 11px; }
.wk-slot { min-height: 54px; }
.wk-slot.today { background: var(--today-soft); }

.block {
  margin: 2px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--block-edge);
  border-radius: 6px;
  background: var(--block-bg);
  padding: 4px 6px;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  display: flex; flex-direction: column; gap: 1px;
  overflow: hidden;
  min-width: 0;
  z-index: 1;
}
.block { cursor: pointer; }
.block:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.block .b-subject { font-weight: 700; font-size: 12.5px; }
.block .b-meta { color: var(--muted); }
.block .b-topic { color: var(--text); }
.block .b-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 1px; }
.block .b-badges .tag { font-size: 10.5px; padding: 0 6px; }
/* 수업 칸 안 준비물·시험·할 일 한 줄(timetable.js blockLines). 길면 …, 전체는 칸을 누르거나 마우스를 올리면 */
.block .b-line { display: block; width: 100%; border: 0; text-align: left; margin-top: 3px; padding: 1px 5px; border-radius: 4px; font-size: 11px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block .b-line.t-준비물 { color: var(--c-supply); background: var(--c-supply-bg); }
.block .b-line.t-시험 { color: var(--c-exam); background: var(--c-exam-bg); }
.block .b-line.t-할일 { color: var(--c-todo); background: var(--c-todo-bg); }
.block.practice { background: var(--practice-bg); border-color: var(--practice-line); border-left-color: var(--practice-edge); } /* 상태 색(아래)이 있으면 그게 우선 */
.block.exam { border-left-color: var(--c-exam); background: var(--c-exam-soft); }
.block.modified { border-left-color: var(--c-change); background: var(--c-change-soft); border-color: var(--c-change-line); }
.block.added { border-left-color: var(--c-makeup); background: var(--c-makeup-soft); border-color: var(--c-makeup-line); }
.block.cancelled {
  border-left-color: var(--cancel-edge); color: var(--muted);
  background: repeating-linear-gradient(135deg, var(--stripe-1), var(--stripe-1) 6px, var(--stripe-2) 6px, var(--stripe-2) 12px);
}
.block.cancelled .b-subject, .block.cancelled .b-meta, .block.cancelled .b-topic { text-decoration: line-through; }
.block.elective { background: var(--soft); border-style: dashed; border-left-style: solid; }

.day-label {
  margin: 2px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; letter-spacing: .3em;
  font-weight: 700; font-size: 15px;
  z-index: 1;
}
.day-label.holiday { background: var(--c-exam-bg); color: var(--c-exam); }
.day-label.event { background: var(--accent-soft); color: var(--c-supply); }
.day-label.none { background: var(--soft); color: var(--faint); font-weight: 500; font-size: 13px; }

/* ---------- 월간 ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-weekdays div { text-align: center; font-size: 13px; color: var(--muted); padding: 6px 0; }
.sun { color: var(--c-exam) !important; }
.sat { color: var(--c-supply) !important; }

.cal-days { border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.day {
  min-height: 118px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 4px;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.day.other { background: var(--soft); }
.day.other > * { opacity: .5; }
.day.today { background: var(--today); }
.day-num { font-size: 13px; font-weight: 600; padding: 0 2px; background: none; border: 0; text-align: left; }
.day-num:hover { color: var(--accent); }
.day-holiday { font-size: 11.5px; font-weight: 600; color: var(--c-exam); padding: 0 2px; }
.day-holiday.event { color: var(--c-supply); }

/* ---------- 상세 다이얼로그 ---------- */
dialog {
  border: 0; border-radius: 14px; padding: 0;
  width: min(540px, calc(100vw - 32px));
  box-shadow: 0 20px 50px rgba(0,0,0,.2);
  color: var(--text);
  background: var(--panel);
}
dialog::backdrop { background: rgba(20,24,33,.4); }
.dialog-body { padding: 20px; }
.dialog-head { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; }
.dialog-head h3 { margin: 6px 0 0; font-size: 18px; }
.dialog-head .tags { display: flex; gap: 4px; flex-wrap: wrap; }
.close-btn { background: none; border: 0; font-size: 22px; color: var(--muted); line-height: 1; }
.detail-row { display: grid; grid-template-columns: 76px 1fr; gap: 8px; margin-top: 10px; font-size: 14px; }
.detail-row > span:first-child { color: var(--muted); }
.detail-row ul { margin: 0; padding-left: 18px; }
.edited { font-size: 12px; color: var(--c-change); margin-left: 6px; }
.basis { font-size: 12px; color: var(--muted); }
.section-label { margin: 16px 0 4px; font-size: 13px; color: var(--muted); }
.dialog-body .raw-text { max-height: 240px; overflow: auto; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-top: 16px; }
.diff { font-size: 13px; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.diff del { color: var(--muted); }
.diff-text { line-height: 1.8; word-break: break-word; }
.diff-text del { color: var(--danger-text); background: var(--c-exam-bg); border-radius: 3px; padding: 0 2px; }
.diff-text ins { color: var(--c-ins); background: var(--c-makeup-bg); border-radius: 3px; padding: 0 2px; text-decoration: none; font-weight: 600; }
.similar-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 12px; }
.similar-card .dialog-actions { margin-top: 10px; }
.basis-choices .similar-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.basis-choices .basis { margin: 0; }

.confirm-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.confirm-item { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; }
.confirm-item input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.confirm-item > div { flex: 1; min-width: 0; }
.confirm-item.invalid { cursor: default; background: var(--c-exam-soft); }
.confirm-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.confirm-btn { border-color: var(--c-change); color: var(--c-change); font-weight: 600; }

.edit-form {display: grid; grid-template-columns: 76px 1fr; gap: 8px 10px; align-items: center; margin-top: 12px; font-size: 14px; }
.edit-form label { color: var(--muted); }
.edit-form input, .edit-form select, .edit-form textarea { font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; width: 100%; }
.edit-form textarea { min-height: 90px; }

@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; padding: 12px 16px 24px; }
  .topbar { padding: 16px 16px 0; }
}
@media (max-width: 600px) {
  .panel { padding: 14px; }
  .cal-nav h2 { min-width: 0; font-size: 16px; }
  .ghost-btn { margin-left: 0; }
  .day { min-height: 76px; padding: 2px; }
  .chip { font-size: 10px; border-left-width: 2px; padding: 1px 3px; }
  .form-row { flex-direction: column; align-items: stretch; }
  .main-tabs .long { display: none; } /* 휴대폰에선 "기타 공지" → "기타", "새 공지 5" → "5" */
  /* 휴대폰: 위턱·아래턱 아치를 위아래로(한 줄에 하나씩 크게) */
  .t-arches { grid-template-columns: 1fr; gap: 6px; }
  .t-chart { padding: 8px 2px; }
  .panel:has(#teeth-tab:not([hidden])) { padding: 14px 6px; } /* 치아 탭은 좌우 여백을 줄여 그림(칸)을 크게 */
  .tp-row { grid-template-columns: 58px 52px 1fr 52px; }
  .money-badge, .new-badge { padding: 0 6px; font-size: 11.5px; }
  .card-actions { gap: 4px; }
  .card-actions .small-btn { padding: 3px 7px; }
}
.todo-add { margin-right: auto; padding: 4px 10px; }
.teeth-editor .te-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.teeth-editor .te-row input { width: 76px; }
.teeth-editor .te-row select { flex: 1; min-width: 0; }
.teeth-editor .basis { margin: 4px 0 0; font-size: 12px; }
/* 📝 시험 D-day (할 일 칸 맨 위) */
.exam-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px;
  padding: 7px 10px; border-radius: 10px; background: var(--soft-2); font-size: 13.5px; color: var(--muted); }
.exam-strip b { color: var(--c-exam); }
.exam-strip.soon { display: block; background: var(--c-exam-soft); border: 1px solid var(--c-exam-line); color: var(--text); }
.exam-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; margin-bottom: 6px; }
.exam-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.exam-chip { border: 1px solid var(--c-exam-line); background: var(--panel); border-radius: 999px; padding: 3px 11px; font-size: 13.5px; text-align: left; }
.exam-chip small { color: var(--muted); }
.exam-chip.hot { background: var(--c-exam-bg); border-color: var(--c-exam); }
.exam-dday { color: var(--c-exam); font-weight: 800; font-variant-numeric: tabular-nums; }
.exam-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.exam-line { display: grid; grid-template-columns: 58px 1fr auto; gap: 8px; align-items: center; text-align: left; border: 1px solid var(--line);
  background: var(--panel); border-radius: 8px; padding: 7px 10px; font-size: 14px; }
.exam-line.hot { border-color: var(--c-exam); background: var(--c-exam-soft); }
.exam-line .exam-name small { color: var(--muted); }
.exam-line .exam-when { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
details .exam-line .exam-dday { color: var(--muted); }
/* 💬 요청게시판(색은 모두 변수 → 다크모드 때 변수만 바꾸면 됨) */
.topbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.board-btn { border: 1px solid var(--c-idea); color: var(--c-idea); background: var(--c-idea-bg); border-radius: 999px; padding: 6px 14px; font-weight: 600; }
.tag.t-제안 { color: var(--c-idea); background: var(--c-idea-bg); }
.board-intro { margin: 6px 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--c-idea-bg); color: var(--text); font-size: 13.5px; }
.board-write-btn { width: 100%; margin-bottom: 10px; }
.board-form { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 10px; background: var(--panel); }
.board-text { min-height: 110px; resize: vertical; }
.board-form-row { display: flex; align-items: center; gap: 8px; }
.board-private { font-size: 13.5px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.board-private input { width: auto; margin: 0; }
.board-private small { color: var(--muted); }
.board-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.board-thumb { position: relative; display: block; width: 76px; height: 76px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.board-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.board-thumb button { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--text); color: var(--panel); line-height: 1; }
.board-filter { margin: 4px 0 8px; }
.board-list { display: flex; flex-direction: column; gap: 8px; }
.board-post { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--panel); }
.board-post.mine { border-color: var(--c-idea); }
.board-post-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.board-kind { font-weight: 700; }
.board-status { border-radius: 999px; padding: 0 8px; background: var(--block-bg); color: var(--muted); font-weight: 600; }
.board-status.doing { background: var(--c-change-bg); color: var(--c-change); }
.board-status.done { background: var(--c-makeup-bg); color: var(--c-makeup); }
.board-mine { border-radius: 999px; padding: 0 8px; background: var(--c-idea-bg); color: var(--c-idea); font-weight: 600; }
.board-time { margin-left: auto; color: var(--muted); }
.board-body { margin: 6px 0; white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.board-hidden { margin: 6px 0; color: var(--muted); font-size: 13.5px; }
.board-reply { margin: 6px 0 0; padding: 6px 9px; border-radius: 8px; background: var(--block-bg); font-size: 13.5px; white-space: pre-wrap; }
.board-reply small { color: var(--muted); }
.board-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.board-like { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.board-like.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.board-admin { display: flex; gap: 6px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.board-admin select { width: auto; }
.board-admin input { flex: 1; min-width: 0; }
.board-foot { margin-top: 12px; text-align: right; font-size: 12.5px; }
.link-btn.danger { color: var(--c-exam); }
/* 👤 내 수업(개인 시간표) */
.tag.t-내수업 { color: var(--c-mine); background: var(--c-mine-bg); }
.block.personal { border-color: var(--c-mine); background: var(--c-mine-bg); }
.my-list { display: flex; flex-direction: column; gap: 8px; }
.my-elective { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.my-elective select { width: auto; }
.my-elective input { flex: 1 1 140px; min-width: 0; }
.my-fixed { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.my-fixed select { width: auto; }
.my-fixed input { flex: 1 1 130px; min-width: 0; }
.my-other { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 14px; margin-bottom: 4px; }
.mine-list { display: flex; flex-direction: column; gap: 6px; }
.mine-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: 14px; }
.mine-row input { width: auto; margin: 0; }
.mine-row .mine-text { flex: 1 1 160px; }
.mine-row select { width: auto; }
/* 시간표 툴바: [이번 주]는 › 바로 옆, [📘 선택 수업 설정]은 같은 줄 오른쪽 끝(같은 높이) */
#today-btn { margin-left: 0; }
/* 내 수업 설정: 필터 줄 오른쪽 끝의 조용한 글자 버튼(자주 안 쓰는 설정이라 눈에 덜 띄게, 사용자 2026-10-06) */
.my-classes-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; border-radius: 6px;
  padding: 3px 7px; color: var(--muted); font-size: 13px; font-weight: 600; }
.my-classes-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.my-classes-btn:hover { color: var(--c-mine); background: var(--c-mine-bg); }
.tag.t-나만 { color: var(--c-private); background: var(--c-private-bg); }
.block.personal:has(.t-나만) { border-color: var(--c-private); background: var(--c-private-bg); }
/* 공지 붙여넣기 줄 오른쪽 끝의 아이폰식 스위치: 꺼짐 회색 '모두에게' / 켜짐 주황 '나만 보기' */
.input-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 14px; font-weight: 600; color: var(--muted); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--switch-off); transition: background .2s; flex: none; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; /* 스위치 손잡이는 어두운 화면에서도 하양 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.switch input:checked + .switch-track { background: var(--c-private); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:checked ~ .switch-label { color: var(--c-private); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.mine-mode #notice-text { border-color: var(--c-private); box-shadow: 0 0 0 2px var(--c-private-bg); }
.mine-mode #submit-btn { background: var(--c-private); border-color: var(--c-private); box-shadow: 0 3px 10px var(--private-shadow); }
/* 입력한 공지: [👥 공통 공지 | 🔒 나만 보기] 탭 */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; margin-top: 20px; } /* 탭 전환해도 자리 고정 */
.list-head .list-title { white-space: nowrap; margin-top: 0; }
.notice-tabs { flex: none; }
.notice-tabs button[data-ntab="mine"].active { color: var(--c-private); }
.memo-card { border-color: var(--c-private-bg); }
.memo-card .notice-head { border-left: 3px solid var(--c-private); padding-left: 8px; }
.mine-save { background: var(--c-private); border-color: var(--c-private); }
.board-pw-row { display: flex; flex-direction: column; gap: 3px; }
.board-pw { max-width: 260px; }
.mine-past { flex-basis: 100%; color: var(--c-exam); }
select.need-pick { border-color: var(--c-private); box-shadow: 0 0 0 2px var(--c-private-bg); }
/* 공지 붙여넣기: 스위치를 바꿔도 버튼은 색만 바뀌게(버튼 너비 고정, 안내 칸 높이 2줄 고정) */
/* 안내 글은 늘 2줄(짧게 씀), 버튼은 그 2줄 높이에 딱 맞춤 → 위·아래 선이 같고, 스위치를 바꿔도 색·글자만 바뀜 */
#notice-form .form-row { align-items: stretch; gap: 10px; }
#notice-hint { height: 2.9em; line-height: 1.45em; overflow: hidden; display: flex; align-items: center; }
#submit-btn { width: 152px; min-height: 38px; white-space: nowrap; padding-top: 0; padding-bottom: 0;
  font-size: 15px; font-weight: 700; letter-spacing: -.2px;
  box-shadow: 0 3px 10px var(--accent-shadow); transition: transform .12s, box-shadow .12s, background .2s; }
#submit-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 14px var(--accent-shadow); }
#submit-btn:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 6px var(--accent-shadow); }
.mine-mode #submit-btn:hover:not(:disabled) { box-shadow: 0 5px 14px var(--private-shadow); }
@media (max-width: 600px) { #submit-btn { width: auto; } }
/* 🎒 준비물 동선 */
.pack-card { margin: 8px 0 4px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--c-pack); background: var(--c-pack-bg); font-size: 13.5px; }
.pack-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--c-pack);
  width: 100%; border: 0; background: none; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.pack-card-head > span { font-size: 12.5px; font-weight: 600; }
.pack-entry { padding: 6px 0; border-top: 1px dashed var(--line); }
.pack-entry:first-of-type { border-top: 0; }
.pack-entry-title { border: 0; background: none; padding: 0; font-weight: 700; color: var(--text); text-align: left; }
.pack-plan { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.pack-route { font-weight: 700; color: var(--c-pack); }
.pack-home { color: var(--c-private); }
.pack-place b { color: var(--text); }
.pack-unset { color: var(--muted); }
.pack-unknown { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pack-chip { border: 1px dashed var(--line-strong); background: var(--panel); border-radius: 999px; padding: 1px 9px; font-size: 12.5px; }
.supply-list { display: flex; flex-direction: column; gap: 5px; }
.supply-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* 보관 위치 목록: 하얀 바탕 + 줄 사이 얇은 선(아이폰 설정 목록처럼), 이름 앞 점(정함 = 초록, 아직 = 빈 회색), 올리면 줄만 연하게 */
.supply-group .supply-list { padding: 6px 0 2px; gap: 7px; }
.supply-group .supply-row { justify-content: space-between; padding: 7px 6px; border-bottom: 1px solid var(--line); border-radius: 0; transition: background .12s; }
.supply-group .supply-row:last-child { border-bottom: 0; }
.supply-group .supply-row:hover { background: var(--block-bg); border-radius: 8px; }
.supply-group .supply-row .supply-name { display: inline-flex; align-items: center; gap: 8px; }
.supply-group .supply-row .supply-name::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--c-pack); box-shadow: 0 0 0 2px var(--c-pack-bg); }
.supply-group .supply-row.unset .supply-name::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.supply-group .supply-row .seg-group { margin-left: auto; }
.supply-row input { flex: 1 1 120px; min-width: 0; }
.supply-row .supply-name { flex: 1 1 130px; font-size: 14px; color: var(--text); } /* 글자는 늘 진하게, 정했는지는 앞의 점으로만(사용자) */
.supply-row.focus, .supply-group .supply-row.focus { background: var(--c-pack-bg); border-radius: 8px; }
.learn-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.learn-row select, .learn-row input { flex: 1 1 140px; min-width: 0; width: auto; }
/* 🎒 준비물 탭 */
.pack-week { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.pack-week .pack-entry { border-top: 1px solid var(--line); padding: 8px 0; }
.supply-head { margin-top: 6px; }
.box-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; }
.box-list { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.box-tag { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 9px; font-size: 13px; background: var(--panel); }
.supply-search { margin-bottom: 8px; }
/* 보관함 버튼(누르면 아래 보관함 칸) + 칸 안: 넣어 둔 물건·물건 넣기·지우기 / 새 보관함 이름 입력 */
button.box-tag { padding: 2px 4px 2px 10px; gap: 6px; color: var(--text); }
button.box-tag:hover { border-color: var(--line-strong); }
button.box-tag.on { border-color: var(--c-pack); background: var(--c-pack-bg); color: var(--c-pack); font-weight: 600; }
.box-count { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--chip-bg); color: var(--muted); font-size: 11.5px; font-weight: 600; text-align: center; }
.box-panel { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; margin: 0 0 10px; background: var(--soft); display: flex; flex-direction: column; gap: 7px; }
.box-panel.box-new { flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; }
.box-panel.box-new input { flex: 1 1 160px; min-width: 0; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 14px; }
.box-panel.box-new .primary-btn { padding: 6px 14px; }
.box-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.box-items { display: flex; flex-wrap: wrap; gap: 5px; }
.box-item { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 1px 4px 1px 10px; font-size: 13px; }
.box-panel-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.box-panel-add select { font: inherit; font-size: 13.5px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 8px; }
/* 예전 디자인: 집에서 줄은 글자 그대로(장소 이름 뒤 쌍점) */
.supply-group { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; margin-bottom: 6px; background: var(--panel); }
.supply-group > summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; cursor: pointer; padding: 3px 0; }
.supply-group > summary .bulk { margin-left: auto; display: inline-flex; gap: 3px; align-items: center; }
.seg-group { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; flex: none; }
.seg { border: 0; border-left: 1px solid var(--line); background: var(--panel); color: var(--muted); padding: 5px 11px; font-size: 13px; font-weight: 600; min-width: 42px; }
.seg-group .seg:first-child { border-left: 0; }
.seg.on { background: var(--c-pack); color: var(--panel); }
.seg.small { border: 1px solid var(--line-strong); border-radius: 6px; padding: 1px 7px; min-width: 0; font-size: 12px; }
.box-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.box-chip { border: 1px dashed var(--line-strong); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 3px 9px; font-size: 12.5px; }
.box-chip.on { border-style: solid; border-color: var(--c-mine); background: var(--c-mine-bg); color: var(--c-mine); font-weight: 600; }
/* 탭 5개: 컴퓨터는 아이콘 옆 글자, 휴대폰은 아이콘 위·글자 아래로 한 줄에 다 */
@media (max-width: 600px) {
  .main-tabs { gap: 0; }
  .main-tabs button { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px; padding: 6px 2px 7px; font-size: 12px; position: relative; }
  .main-tabs .tab-text { white-space: nowrap; }
  .main-tabs .new-badge, .main-tabs .money-badge { position: absolute; top: 2px; right: 50%; transform: translateX(22px); font-size: 10px; padding: 0 5px; }
  .supply-row .supply-name { flex-basis: 100%; }
  .chart-decid .t-arches { max-width: none; } /* 휴대폰은 아치가 위아래라 꽉 차게 */
}
/* 🌙 화면 밝기 버튼(건의하기 왼쪽, 순서 밝기·건의하기·내 정보) + 작은 메뉴(버튼 왼쪽 끝에 맞춰 오른쪽으로 펼침: 휴대폰에서 화면 밖으로 안 나가게) */
.theme-wrap { position: relative; }
.theme-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.theme-btn:hover, .theme-btn[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.theme-btn svg, .theme-option svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.theme-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 190px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 8px 24px var(--shadow);
  display: flex; flex-direction: column; }
.theme-option { display: flex; align-items: center; gap: 8px; border: 0; background: none; border-radius: 7px; padding: 7px 10px; font-size: 14px; text-align: left; white-space: nowrap; }
.theme-option:hover { background: var(--block-bg); }
.theme-option.on { color: var(--accent); font-weight: 700; background: var(--accent-soft); }
/* 이모티콘은 쓰지 않는다(2026-10-06 디자인 확정). 소스에서는 지웠고, 혹시 들어온 이모티콘(AI가 쓴 글 등)은 core.js가 .ico로 감싸 숨김 */
.ico { display: none; }
/* 🛠 관리 창(admin.js): 맨 아래 작은 "관리" 글자 → 운영자 비밀번호 */
/* 맨 아래 꼬리말: 화면 끝까지 이어지는 띠(바탕보다 살짝 진함), 왼쪽 링크(사이 얇은 세로줄) · 오른쪽 만든 사람 */
.site-foot { margin-top: 28px; border-top: 1px solid var(--line); background: var(--head-bg); }
.site-foot-inner { max-width: 1600px; margin: 0 auto; padding: 18px 24px 22px; display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; }
.foot-links { display: flex; align-items: center; flex-wrap: wrap; }
.foot-links .link-btn { color: var(--muted); font-size: 12.5px; font-weight: 600; padding: 2px 10px; }
.foot-links .link-btn:first-child { padding-left: 0; }
.foot-links .link-btn + .link-btn { border-left: 1px solid var(--line-strong); }
.foot-links .link-btn:hover { color: var(--text); }
.foot-credit { margin: 0; color: var(--muted); font-size: 12.5px; }
.guide-list { margin: 6px 0 4px; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 5px; }
@media (max-width: 600px) { .site-foot-inner { flex-direction: column; align-items: flex-start; padding: 16px 16px 20px; } }
.admin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 12px 0 10px; }
.admin-tabs button { border: 0; background: none; padding: 6px 10px 7px; font-size: 14px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.admin-body { min-height: 120px; }
.admin-row-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; }
.admin-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; overscroll-behavior: contain; }
.admin-item { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13.5px; }
.admin-item-main { min-width: 0; flex: 1; word-break: break-word; }
.admin-item-actions { display: flex; gap: 4px; flex: none; }
.admin-import-list { max-height: 45vh; overflow-y: auto; overscroll-behavior: contain; margin-top: 0; }
.admin-import-item.done { opacity: .6; }
.admin-result.ok { color: var(--c-makeup); }
.admin-result.bad { color: var(--c-exam); }
.admin-reset-list { margin: 4px 0 8px; padding-left: 18px; font-size: 13.5px; }
/* 마우스를 올렸을 때(누를 수 있다는 표시) — 시간표 전체에서 일관되게(사용자 2026-10-05)
   수업 칸은 종류(이론·실습)·상태(수정됨·추가·선택·나만)와 상관없이 테두리가 파랗게: 상태별 테두리 색보다 우선하도록 맨 끝 + .week-grid
   작은 꼬리표(칸 안 줄, 날짜 줄·월간의 준비물·할 일·안내)는 같은 색 얇은 테두리 */
.week-grid .block:hover, .week-grid .block:focus-visible { border-color: var(--accent); }
.block .b-line:hover, .block .b-line:focus-visible,
.chip:hover, .chip:focus-visible { outline: 1px solid currentColor; outline-offset: -1px; }
/* ✏️ 공지 서랍(공지 붙여넣기·입력한 공지): 왼쪽에서 열림, 오른쪽 시간표는 그대로 보이고 쓸 수 있음. 휴대폰은 화면 전체 */
.notice-open-btn { border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 600; }
.notice-open-btn[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
/* 공지 창(사용자 2026-10-06 추천안): 컴퓨터 = [공지 올리기] 버튼 바로 아래에 붙어서 펼쳐지는 창(위치는 notices.js가 --pop-top/--pop-right로),
   휴대폰 = 화면 아래에서 올라오는 창 + 뒤 어둡게. 입력한 공지를 펼치면 화면 높이까지 커지고 목록 안에서만 스크롤 */
.notice-drawer { position: fixed; z-index: 30; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  top: var(--pop-top, 72px); right: var(--pop-right, 24px); width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - var(--pop-top, 72px) - 16px);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 14px 40px var(--shadow);
  padding: 12px 14px 16px; transform-origin: top right; animation: pop-in .16s ease-out; }
.notice-drawer:has(#notice-list:not([hidden])) { height: calc(100vh - var(--pop-top, 72px) - 16px); }
.notice-drawer[hidden] { display: none; }
.drawer-backdrop { display: none; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 600px) {
  .notice-drawer { top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0;
    border-width: 1px 0 0; padding-top: 18px; animation: sheet-up .22s ease-out; }
  .notice-drawer:has(#notice-list:not([hidden])) { height: 92vh; }
  .notice-drawer:has(#notice-list:not([hidden])) #notice-text { height: 90px; min-height: 90px; } /* 목록을 펼치면 붙여넣기 칸을 낮춰 목록만 스크롤 */
  .notice-drawer:has(#notice-list:not([hidden])) #notice-list { min-height: 140px; }
  .notice-drawer::before { content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
    border-radius: 999px; background: var(--line-strong); } /* 위쪽 손잡이 모양 */
  .drawer-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(0, 0, 0, .35); }
}
@media (prefers-reduced-motion: reduce) { .notice-drawer { animation: none; } }
.notice-drawer .input-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.notice-drawer #notice-text { min-height: 140px; height: 22vh; }
.notice-drawer #notice-list { flex: 1; min-height: 180px; max-height: none; }
.notice-drawer .ai-stats { flex: none; margin-top: 12px; }
.paste-btn { width: 100%; margin-top: 10px; padding: 9px 12px; border: 1px dashed var(--accent); border-radius: 10px;
  background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.paste-btn:hover { border-style: solid; }
/* 잠깐 뜨는 안내(core.js toast) */
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 40; max-width: min(560px, calc(100vw - 32px));
  padding: 10px 16px; border-radius: 12px; background: var(--text); color: var(--panel); font-size: 14px; box-shadow: 0 6px 20px var(--shadow); cursor: pointer; }
.toast.error { background: var(--badge-red); color: #fff; }
/* 컴퓨터: 할 일 칸과 시간표 칸의 아래 끝을 맞추고, 할 일은 칸 안에서만 스크롤(할 일 길이가 칸 높이를 늘리지 않게 contain: size) */
@media (min-width: 1101px) {
  .layout { align-items: stretch; }
  .todo-panel { contain: size; min-height: 420px; display: flex; flex-direction: column; } /* 높이는 시간표 칸에 맞춰짐 */
  .todo-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -10px; padding-right: 10px; }
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px; }
.drawer-head h2 { font-size: 18px; }
.notice-drawer .input-panel { border: 0; padding: 4px; background: none; }
@media (max-width: 600px) { /* 휴대폰: 맨 위 버튼 한 줄로 — "공지 올리기"→"공지", 내 정보는 이름만(학번 없는 사람은 그대로 보임) */
  .notice-open-btn .long { display: none; }
  .profile-chip:not(.empty) .chip-sid { display: none; }
}
/* 큰 모니터: 시간표 아래가 비지 않게 한 교시 높이를 화면 높이에 맞춰 늘림(시간표 칸 위쪽 요소들 높이 약 340px을 뺀 나머지를 11교시로 나눔) */
@media (min-width: 1101px) { .week-grid { --period-h: max(54px, calc((100vh - 340px) / 11)); } }
/* 손글씨 로고(사용자 그림): 투명 배경, 어두운 화면에선 선을 밝게 */
.site-title { margin: 0; line-height: 0; }
.site-logo { display: block; height: 52px; width: auto; }
:root[data-theme="dark"] .site-logo { filter: invert(1) brightness(.92); }
@media (max-width: 600px) { .site-logo { height: 34px; } }
/* 공지 창: 제목은 "공지 올리기" 하나, 붙여넣기 칸 위엔 스위치만. 입력한 공지는 처음엔 접힘 */
.notice-drawer .input-head { justify-content: flex-end; }
.list-toggle { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 0; font-size: 17px; font-weight: 700; color: var(--text); }
.list-toggle .count { font-size: 14px; }
.list-toggle .list-caret { color: var(--muted); font-size: 13px; transition: transform .15s; }
.list-head.open .list-caret { transform: rotate(180deg); }
.list-head:not(.open) .notice-tabs { display: none; }
.list-toggle:hover .list-title { color: var(--accent); }
/* 맨 위 버튼(사용자 2026-10-06 안 1): [공지 올리기]만 진하게 | 건의하기·다크모드는 테두리 없는 글자·아이콘 | 내 정보는 테두리만 */
.topbar-sep { width: 1px; height: 20px; background: var(--line-strong); margin: 0 2px; }
.board-btn { border: 0; background: none; color: var(--muted); padding: 6px 6px; font-weight: 600; }
.board-btn:hover { color: var(--c-idea); }
.theme-btn { border-color: transparent; background: none; }
.theme-btn:hover, .theme-btn[aria-expanded="true"] { border-color: transparent; background: var(--block-bg); }
.profile-chip { background: none; }
/* 홈 화면 아이콘 고르기(내 정보 창) */
.icon-choices { display: grid; grid-template-columns: repeat(5, max-content); gap: 8px; margin: 4px 0; } /* 10개 → 5개씩 두 줄 */
.icon-choice { padding: 3px; border: 2px solid transparent; border-radius: 14px; background: none; line-height: 0; }
.icon-choice img { width: 44px; height: 44px; border-radius: 10px; }
.icon-choice.on { border-color: var(--accent); }
.icon-choice:hover:not(.on) { border-color: var(--line-strong); }
/* 맨 위 버튼을 로고 세로 가운데가 아닌 아래쪽 줄에 맞춰, 시간표 칸 바로 위에 놓인 느낌으로(사용자 2026-10-06) */
.topbar-row { align-items: flex-end; }
@media (min-width: 1101px) {
  .topbar { padding-bottom: 4px; }
  .layout { padding-top: 10px; }
}
/* 탭을 바꿀 때 자연스럽게(사용자 2026-10-06): ① 스크롤바 자리를 늘 비워 둬서 내용 길이가 달라도 좌우로 안 흔들림
   ② 컴퓨터에선 두 칸의 최소 높이를 화면 높이로(짧은 탭으로 바꿔도 칸이 갑자기 줄지 않음) ③ 탭 내용은 살짝 나타나게 */
html { scrollbar-gutter: stable; }
@media (min-width: 1101px) { .todo-panel, .calendar-panel { min-height: calc(100vh - 100px); } }
#timetable-tab:not([hidden]), #info-tab:not([hidden]), #teeth-tab:not([hidden]), #supplies-tab:not([hidden]), #settle-tab:not([hidden]) { animation: tab-in .15s ease-out; }
@keyframes tab-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #timetable-tab, #info-tab, #teeth-tab, #supplies-tab, #settle-tab { animation: none !important; } }
.period-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; }
.period-pick select { width: auto; font: inherit; font-size: 13px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; }

/* ================= 디자인 정리(사용자 2026-10-06 확정: 예전 이모티콘·많은 색 디자인 대신) =================
   원칙: 탭만 선 아이콘, 색은 뜻이 있는 곳만 — 파랑(누르는 곳·준비물), 빨강(시험·마감), 주황(시간표 바뀜·치아 확인), 보라(할 일), 초록(준비물 탭 동선·위치).
   보강·요청·선택 수업·나만 보기·돈 꼬리표는 회색(--n-*). 예전 모양은 git 태그 디자인비교-마지막 / 디자인정리-전. */
.tab-svg { display: inline-block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* 이모티콘만 있던 자리는 글자로 */
:root .pin-icon::after, :root .pin-tag::after { content: "고정"; }
:root .board-lock::after { content: "비공개"; font-size: 12px; color: var(--muted); }

:root, :root[data-theme="dark"] {
  --n-text: #4b5563; --n-bg: #f1f2f4; --n-line: #d9dde3; --n-soft: #fafbfc;
  --pk: #1f7a5c; --pk-bg: #e3f3ec; --pk-line: #a9d8c3; --pk-soft: #f3faf7; /* 준비물·챙길 것(진한 초록) */
  --pk-home: #b45309; --pk-home-bg: #fdf0dc; /* 집에서 챙길 것(전날 밤) */
  --c-exam-line: #ec9f9f; --c-todo-line: #b9a2f6; --c-change-line: #ebb46c; /* 테두리 조금 진하게 */
  --c-makeup: var(--n-text);  --c-makeup-bg: var(--n-bg);
  --c-idea: var(--n-text);    --c-idea-bg: var(--n-bg);
  --c-mine: var(--n-text);    --c-mine-bg: var(--n-bg);
  --c-private: var(--n-text); --c-private-bg: var(--n-bg);
  --private-shadow: rgba(75, 85, 99, .25);
  --c-money-text: var(--n-text); --c-money-badge: var(--n-bg);
  --c-makeup-line: var(--n-line); --c-makeup-soft: var(--n-soft); --c-ins: var(--n-text);
  --badge-green: #6b7280;
}
:root[data-theme="dark"] {
  --n-text: #b8bec8; --n-bg: #2a2f37; --n-line: #3a404b; --n-soft: #1f2329;
  --pk: #4cc59a; --pk-bg: #163029; --pk-line: #2b5a49; --pk-soft: #17231f;
  --pk-home: #f0a54a; --pk-home-bg: #3a2a15;
  --c-exam-line: #8a3a42; --c-todo-line: #5f4c9c; --c-change-line: #7d5a26;
  --private-shadow: rgba(0, 0, 0, .3);
  --badge-green: #5d6471;
}
/* 할 일 칸(사용자 2026-10-06 3·4차): 오늘·마감 지남·오늘 챙길 것은 예전처럼 색 칸(변수 그대로),
   일주일 안의 시험은 흰 바탕 + 빨간 테두리·제목. 테두리 색은 위 :root에서 조금 진하게. */
/* 일주일 안의 시험(5차): 흰 바탕 + 연한 빨강 테두리, 제목은 기본 글자색 + 개수만 빨간 꼬리표, 시험 칩은 연한 빨강 바탕 */
:root .exam-strip.soon { background: var(--panel); border-color: var(--c-exam-line); }
:root .exam-count { display: inline-block; min-width: 20px; margin-left: 2px; padding: 0 6px; border-radius: 999px; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--c-exam); background: var(--c-exam-bg); vertical-align: 1px; }
:root .exam-chip { background: var(--c-exam-soft); border-color: var(--c-exam-line); }
:root .exam-chip.hot { background: var(--c-exam-bg); border-color: var(--c-exam-line); }
/* 왼쪽 굵은 띠(사용자가 빼 보자고 함). 되살리려면 theme.js DESIGN_BARS = true */
:root[data-bars] .exam-strip.soon { box-shadow: inset 4px 0 0 var(--c-exam); }
:root[data-bars] .pack-card { box-shadow: inset 4px 0 0 var(--pk); }
:root[data-bars] .todo-item.overdue { box-shadow: inset 4px 0 0 var(--c-exam); }
:root[data-bars] .todo-item.today { box-shadow: inset 4px 0 0 var(--c-todo); }
:root[data-bars] .teeth-alert.used { box-shadow: inset 4px 0 0 var(--t-used); }
/* 공휴일 칸: 바탕은 회색(빨간 바탕은 시험·마감과 헷갈림), 글자만 달력처럼 빨강 */
:root .day-label.holiday { background: var(--soft-2); }
/* 기타 공지 분류 꼬리표는 모두 회색(규칙·돈도 글자로 구분) */
:root .info-tag.it-rule, :root .info-tag.it-money { color: var(--n-text); background: var(--n-bg); }
/* 치아 탭 "개수를 확인해 주세요": 빨리 처리하게 주황 상자 + 주황 제목(왼쪽 띠는 3차에 뺌, 위 data-bars) */
:root .teeth-alert.used { border-width: 1.5px; }
:root .teeth-alert.used .ta-title { color: var(--warn-text); }
/* 돈 관련 꼬리표·경고는 회색 */
:root .settle-tag { border-color: var(--n-line); background: var(--n-bg); }
:root .settle-warn { color: var(--text); background: var(--n-bg); }
/* 시간표 칸 안 준비물·할 일 줄: 예전 연한 바탕(준비물 파랑·할 일 보라) + 굵은 글씨(사용자 2026-10-06 4차) */
:root .block .b-line { font-weight: 700; }
/* 준비물 탭 동선: 동선 글자 크게, 집·1층·4층·실습실은 장소 꼬리표 + 물건 */
:root .pack-route { font-size: 15px; color: var(--pk); }
:root .pack-plan { gap: 5px; }
:root .pack-home, :root .pack-place { color: var(--text); font-weight: 600; }
:root .pack-home b, :root .pack-place b {
  display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--pk); background: var(--pk-bg); }
:root .pack-home b { color: var(--pk-home); background: var(--pk-home-bg); }
/* 내 보관 위치: 고른 위치 버튼·앞의 점은 진한 초록 */
:root .seg.on { background: var(--pk); }
/* 검색칸 앞 돋보기 */
:root .feed-search { padding-left: 34px; background-repeat: no-repeat; background-position: 11px center; background-size: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .feed-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E"); }
.foot-credit a { color: inherit; text-decoration: none; }
.foot-credit a:hover { color: var(--text); text-decoration: underline; }
/* 깔끔: 내 보관 위치의 고른 표시(앞 동그라미·고른 보관함)는 진한 초록(사용자 2026-10-06 2차) */
:root .supply-group .supply-row .supply-name::before { background: var(--pk); box-shadow: 0 0 0 2px var(--pk-bg); }
:root .supply-group .supply-row.unset .supply-name::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
:root button.box-tag.on { border-color: var(--pk); background: var(--pk-bg); color: var(--pk); }