/* ── 디자인 토큰 & 기본 ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #FAF7F2;
  --surface: #FFFFFF;
  --surface-2: #F3EFE8;
  --border: #E8E4DC;
  --border-strong: #D3D1C7;
  --text: #2C2C2A;
  --text-sub: #444441;
  --text-muted: #888780;
  --primary: #E8724A;
  --primary-dark: #C85A35;
  --primary-soft: #FAECE7;
  --primary-ink: #993C1D;
  --bot-color: #8A80E0;
  --bot-bg: #EEEDFE;
  --bot-text: #3C3489;
  --danger: #E24B4A;
  --danger-soft: #FCEBEB;
  --success: #1D9E75;
  --paper: #FFFCF5;
  --paper-line: #EDE4D3;
  --paper-spine: #E8C9A8;
  --paper-ink: #5F3A1E;
  --radius-card: 16px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow: 0 1px 3px rgba(44, 44, 42, .06);
  --shadow-pop: 0 8px 24px rgba(44, 44, 42, .14);
  --rail-w: 64px;
  --tabbar-h: 58px;
  --font: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  /* 일정 8색: 배경 / 글자 / 진한 채움 */
  --ev-blue-bg: #E6F1FB;   --ev-blue-tx: #0C447C;   --ev-blue: #378ADD;
  --ev-green-bg: #EAF3DE;  --ev-green-tx: #27500A;  --ev-green: #639922;
  --ev-yellow-bg: #FAEEDA; --ev-yellow-tx: #633806; --ev-yellow: #EF9F27;
  --ev-pink-bg: #FBEAF0;   --ev-pink-tx: #72243E;   --ev-pink: #D4537E;
  --ev-purple-bg: #EEEDFE; --ev-purple-tx: #3C3489; --ev-purple: #7F77DD;
  --ev-orange-bg: #FAECE7; --ev-orange-tx: #712B13; --ev-orange: #D85A30;
  --ev-teal-bg: #E1F5EE;   --ev-teal-tx: #085041;   --ev-teal: #1D9E75;
  --ev-red-bg: #FCEBEB;    --ev-red-tx: #791F1F;    --ev-red: #E24B4A;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1C1A17;
    --surface: #272420;
    --surface-2: #312D28;
    --border: #3A3631;
    --border-strong: #4A453F;
    --text: #F1EFE8;
    --text-sub: #D3D1C7;
    --text-muted: #9C9A92;
    --primary: #E8845F;
    --primary-dark: #F0997B;
    --primary-soft: #3A2A22;
    --primary-ink: #F5C4B3;
    --bot-bg: #2F2B4A;
    --bot-text: #CECBF6;
    --danger: #F09595;
    --danger-soft: #4A2222;
    --success: #5DCAA5;
    --paper: #2A2622;
    --paper-line: #3A342D;
    --paper-spine: #5A4632;
    --paper-ink: #F0D9BF;
    --shadow: 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, .45);
    --ev-blue-bg: #0C2A47;   --ev-blue-tx: #B5D4F4;
    --ev-green-bg: #1E3309;  --ev-green-tx: #C0DD97;
    --ev-yellow-bg: #412402; --ev-yellow-tx: #FAC775;
    --ev-pink-bg: #4B1528;   --ev-pink-tx: #F4C0D1;
    --ev-purple-bg: #26215C; --ev-purple-tx: #CECBF6;
    --ev-orange-bg: #4A1B0C; --ev-orange-tx: #F5C4B3;
    --ev-teal-bg: #04342C;   --ev-teal-tx: #9FE1CB;
    --ev-red-bg: #501313;    --ev-red-tx: #F7C1C1;
    color-scheme: dark;
  }
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.ti { line-height: 1; }

/* ── 앱 셸: 레일 / 상단 바 / 탭바 ───────────────────────────── */
.app-body { min-height: 100vh; padding-left: var(--rail-w); }
.app-rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w); z-index: 50;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 0; background: var(--surface); border-right: 1px solid var(--border);
}
.rail-logo img { width: 36px; height: 36px; border-radius: 10px; display: block; margin-bottom: 8px; }
.rail-item {
  width: 48px; padding: 7px 0 5px; border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-muted); text-decoration: none; font-size: 10px;
}
.rail-item .ti { font-size: 21px; }
.rail-item:hover { background: var(--surface-2); color: var(--text); }
.rail-item.active { background: var(--primary-soft); color: var(--primary); }
.rail-spacer { flex: 1; }
.rail-avatar {
  width: 30px; height: 30px; border-radius: 50%; margin-top: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 600;
}
.app-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-title { font-size: 17px; font-weight: 600; }
.topbar-online { display: flex; gap: 4px; }
.topbar-meta { margin-left: auto; color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.topbar-meta .hdr-sep { margin: 0 6px; }
.topbar-menu { display: none; position: relative; }
.topbar-menu summary { list-style: none; cursor: pointer; font-size: 20px; color: var(--text-muted); padding: 4px; }
.topbar-menu summary::-webkit-details-marker { display: none; }
.topbar-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 160px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); padding: 6px; display: flex; flex-direction: column;
}
.topbar-menu-list a, .topbar-menu-user { padding: 9px 10px; border-radius: var(--radius-sm); text-decoration: none; font-size: 14px; }
.topbar-menu-user { color: var(--text-muted); font-size: 12px; }
.topbar-menu-list a:hover { background: var(--surface-2); }
.app-tabbar { display: none; }
.app-main { max-width: 1200px; margin: 0 auto; padding: 20px; }

@media (max-width: 767px) {
  .app-body { padding-left: 0; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .app-rail { display: none; }
  .app-topbar { padding: 10px 14px; }
  .topbar-title { font-size: 16px; }
  .topbar-meta .hdr-date, .topbar-meta .hdr-time, .topbar-meta .hdr-sep { display: none; }
  .topbar-menu { display: block; }
  .app-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface); border-top: 1px solid var(--border);
  }
  .tab-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--text-muted); text-decoration: none; font-size: 11px;
  }
  .tab-item .ti { font-size: 22px; }
  .tab-item.active { color: var(--primary); }
  .app-main { padding: 12px; }
}

/* ── 공통 컴포넌트 ──────────────────────────────────────────── */
.card { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 14px 16px; }
.btn-primary {
  background: var(--primary); color: #fff; border: none; border-radius: var(--radius);
  padding: 9px 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary {
  background: var(--surface); color: var(--text-sub); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 8px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.btn-secondary:hover { background: var(--surface-2); }
.chip {
  display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius-pill);
  padding: 4px 11px; font-size: 13px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-sub); cursor: pointer; white-space: nowrap;
}
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
input, select, textarea { accent-color: var(--primary); }
.field {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 9px 12px; outline: none;
}
.field:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ── 로그인 ────────────────────────────────────────────────── */
.login-body { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-container { width: 100%; max-width: 400px; }
.login-card { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-pop); padding: 36px 30px 28px; }
.login-header { text-align: center; margin-bottom: 26px; }
.login-logo { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 12px; background: var(--primary-soft); }
.login-header h1 { font-size: 22px; font-weight: 700; }
.login-subtitle { color: var(--text-muted); margin-top: 4px; font-size: 14px; }
.error-message[hidden] { display: none; }
.error-message { display: flex; align-items: center; gap: 6px; background: var(--danger-soft); color: var(--danger); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
.login-form .form-group { margin-bottom: 14px; }
.login-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-sub); }
.login-form input[type="text"], .login-form input[type="password"] {
  width: 100%; padding: 11px 14px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: 15px; outline: none;
}
.login-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.remember-group { margin-bottom: 18px !important; }
.remember-label { display: flex !important; align-items: center; gap: 8px; cursor: pointer; font-weight: 400 !important; color: var(--text-muted) !important; font-size: 14px; }
.remember-label input { width: 16px; height: 16px; }
.btn-login { width: 100%; padding: 12px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius); font-size: 16px; font-weight: 600; cursor: pointer; }
.btn-login:hover { background: var(--primary-dark); }
.login-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; font-size: 12px; color: var(--text-muted); }
.login-footer strong { color: var(--primary); }

/* ── 채팅 ──────────────────────────────────────────────────── */
.chat-body.app-body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.chat-main-wrap { flex: 1; min-height: 0; max-width: none; padding: 0; display: flex; }
@media (max-width: 767px) {
  /* 화면 높이(vh·dvh·innerHeight)는 브라우저마다 툴바 뒤 영역까지 포함하기도 해서 믿지 않는다.
     하단 탭 메뉴와 같은 fixed 기준으로 화면에 붙여, 입력창이 항상 탭 메뉴 바로 위에 오게 한다. */
  /* 아래 여백(탭 메뉴 자리)은 chat.js 가 탭 메뉴의 실제 위치를 재서 맞춘다
     (iOS Safari 는 떠 있는 주소창 위로 fixed 탭 메뉴를 올려 배치함) */
  /* min-height: 0 — 공통 .app-body 의 min-height: 100vh 가 남아 있으면 키보드 위로 줄어들지 못함 */
  .chat-body.app-body { position: fixed; inset: 0; height: auto; min-height: 0; }
  /* iOS 는 16px 보다 작은 입력칸을 누르면 화면을 확대한다 → 모바일 입력칸은 모두 16px 이상 */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: 16px !important; }
  /* 입력 중: 하단 탭 메뉴를 숨겨 입력창이 키보드 바로 위에 오게 */
  .chat-body.keyboard-open .app-tabbar { display: none; }
  .chat-body.app-body.keyboard-open { padding-bottom: 0; }
}
.chat-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }

/* 오른쪽 요약 패널 */
.sidebar {
  order: 2; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px;
  border-left: 1px solid var(--border);
}
.sidebar-section { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 12px 14px; }
.sidebar-section h3 { font-size: 13px; font-weight: 600; color: var(--primary); margin-bottom: 8px; }
.sb-toggle { display: flex; justify-content: space-between; align-items: center; }
.sb-chevron { display: none; transition: transform .2s; }
.sb-fold-toggle { cursor: pointer; user-select: none; }
.sb-fold-hint { font-size: 12px; font-weight: 400; color: var(--text-muted); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.sb-fold-hint .sb-updated { margin-right: 6px; }
.sb-fold-hint .ti { transition: transform .2s; }
.sb-fold:not(.fold-open) > :not(h3) { display: none; }
.sb-fold:not(.fold-open) .sb-fold-toggle { margin-bottom: 0; }
.sb-fold.fold-open .sb-fold-hint .ti { transform: rotate(180deg); }
.schedule-list, .today-summary { font-size: 13px; }
.schedule-item { padding: 6px 0 6px 10px; border-left: 3px solid var(--primary); margin-bottom: 6px; }
.schedule-item .s-date { font-size: 11px; color: var(--primary-ink); font-weight: 600; }
.schedule-item .s-title { font-weight: 600; margin-top: 2px; }
.schedule-item .s-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.empty-text { color: var(--text-muted); font-size: 13px; }
.ts-section { margin-bottom: 10px; }
.ts-diary { padding-top: 10px; border-top: 1px dashed var(--border); }
.ts-label { font-weight: 600; font-size: 12px; margin-bottom: 6px; }
.ts-item { font-size: 12px; padding: 2px 0 2px 9px; color: var(--text-sub); border-left: 2px solid var(--primary); margin-bottom: 4px; word-break: keep-all; }
.ts-time { color: var(--primary-ink); font-weight: 600; margin-right: 2px; }
.ts-empty, .ts-hint { font-size: 11px; color: var(--text-muted); }
.ts-hint { margin-top: 5px; }
.ts-summary { margin-top: 7px; padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 12px; color: var(--text-sub); line-height: 1.65; word-break: keep-all; }

/* 메시지 영역 */
.chat-main { order: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.messages-area { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.system-msg { align-self: center; font-size: 12px; color: var(--text-muted); background: var(--surface-2); border-radius: var(--radius-pill); padding: 4px 12px; }
.date-divider { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; align-self: stretch; pointer-events: none; user-select: none; }
.date-divider::before, .date-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.date-divider-text { font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px 12px; white-space: nowrap; }

.message { display: flex; align-items: flex-end; gap: 8px; max-width: 72%; }
.bot-message, .other-message { align-self: flex-start; }
.own-message { align-self: flex-end; flex-direction: row-reverse; }
.msg-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: #fff; flex-shrink: 0; }
.bot-avatar { background: transparent; overflow: hidden; }
.bot-icon { width: 32px; height: 32px; object-fit: cover; border-radius: 50%; display: block; }
.msg-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.own-body { align-items: flex-end; }
.msg-sender { font-size: 12px; font-weight: 600; margin-left: 2px; }
.msg-bubble { padding: 9px 13px; border-radius: 16px; font-size: 15px; line-height: 1.55; word-break: break-word; }
.other-bubble { background: var(--surface); color: var(--text); border-bottom-left-radius: 4px; box-shadow: var(--shadow); }
.bot-bubble { background: var(--bot-bg); color: var(--bot-text); border-bottom-left-radius: 4px; }
.own-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.msg-time { font-size: 11px; color: var(--text-muted); }
.msg-like-row { display: flex; }
.own-body .msg-like-row { justify-content: flex-end; }
.msg-like-btn { background: none; border: none; cursor: pointer; font-size: 12px; color: var(--text-muted); padding: 2px 6px; min-height: 26px; border-radius: var(--radius-pill); display: flex; align-items: center; gap: 3px; filter: grayscale(1); opacity: .55; }
.msg-like-btn:hover, .msg-like-btn.liked { filter: none; opacity: 1; background: var(--danger-soft); color: var(--danger); }
.msg-like-btn .like-count { font-size: 11px; }
.chat-link { color: var(--primary-ink); text-decoration: underline; word-break: break-all; }
.own-bubble .chat-link { color: #fff; }
.bot-bubble .chat-link { color: var(--bot-text); }
.msg-tts-row { display: flex; margin-top: 3px; }
.msg-tts-btn { background: none; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 2px 8px; font-size: 12px; cursor: pointer; color: var(--bot-text); }
.msg-tts-btn:hover { background: var(--bot-bg); }
.chat-img { max-width: 260px; max-height: 220px; border-radius: 10px; object-fit: cover; display: block; margin-bottom: 6px; cursor: pointer; }
/* NAS 백업 알림 카드 — 대화 말풍선과 구분되게 가운데 상태 카드(왼쪽 색 띠 = 결과) */
.message.backup-message { align-self: center; display: block; width: 100%; max-width: 440px; margin: 6px 0; }
.backup-message, .bk-item { --bk-bg: var(--ev-blue-bg); --bk-tx: var(--ev-blue-tx); --bk-accent: var(--ev-blue); }
.backup-success { --bk-bg: var(--ev-teal-bg); --bk-tx: var(--ev-teal-tx); --bk-accent: var(--success); }
.backup-partial, .backup-warn { --bk-bg: var(--ev-yellow-bg); --bk-tx: var(--ev-yellow-tx); --bk-accent: var(--ev-yellow); }
.backup-fail { --bk-bg: var(--ev-red-bg); --bk-tx: var(--ev-red-tx); --bk-accent: var(--danger); }
.backup-missing { --bk-bg: var(--ev-orange-bg); --bk-tx: var(--ev-orange-tx); --bk-accent: var(--ev-orange); }
.backup-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--bk-accent); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.backup-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bk-bg); color: var(--bk-tx); }
.backup-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.backup-titles { flex: 1; min-width: 0; }
.backup-title { font-size: 14px; font-weight: 700; }
.backup-sub { font-size: 12.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backup-time { font-size: 11px; opacity: .75; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.backup-detail { padding: 8px 12px 0; font-size: 13px; color: var(--text-sub); }
.backup-raw { padding: 6px 12px 0; font-size: 12.5px; color: var(--text-muted); }
.backup-raw summary { cursor: pointer; padding: 2px 0; }
.backup-raw div { margin-top: 4px; padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-sm); white-space: pre-wrap; word-break: break-word; color: var(--text-sub); }
.backup-foot { display: flex; align-items: center; gap: 6px; padding: 8px 12px 9px; font-size: 11.5px; color: var(--text-muted); }
.backup-bot { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.chat-video { max-width: 280px; max-height: 240px; border-radius: 10px; display: block; margin-top: 4px; background: #000; }
.chat-sticker { max-width: 150px; max-height: 150px; border-radius: 12px; display: block; }
.typing-indicator { display: flex; align-items: center; gap: 8px; padding: 0 20px 8px; font-size: 13px; color: var(--bot-color); }
.typing-dots { display: flex; gap: 4px; }
.typing-dots span { width: 6px; height: 6px; background: var(--bot-color); border-radius: 50%; animation: bounce .8s infinite; }
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }

/* 사진 미리보기 */
.img-preview-area { display: flex; align-items: center; gap: 10px; padding: 8px 20px; border-top: 1px solid var(--border); }
.img-preview-area img { max-height: 80px; max-width: 120px; border-radius: var(--radius-sm); object-fit: cover; }
.img-remove-btn { background: var(--danger); color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.img-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .85); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; }
.img-modal img { max-width: 94vw; max-height: 94vh; border-radius: 10px; object-fit: contain; }

/* 입력 영역 */
.input-area { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 8px 20px 14px; flex-shrink: 0; }
.quick-chips { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.quick-chips::-webkit-scrollbar { display: none; }
.quick-chip { display: inline-flex; align-items: center; gap: 4px; border: none; border-radius: var(--radius-pill); padding: 5px 11px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.media-btns { display: none; }
.mb-btn { width: 30px; height: 30px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--surface-2); color: var(--text-sub);
  font-size: 17px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mb-btn:active { background: var(--border); }
.qc-divider { width: 1px; height: 20px; background: var(--border-strong); margin: 0 3px; flex-shrink: 0; }
.quick-chip .ti { font-size: 15px; }
.qc-chunsik { background: var(--surface-2); padding: 2px 8px; }
.qc-chunsik.active { background: var(--primary-soft); box-shadow: inset 0 0 0 1.5px var(--primary); }
.qc-bot { width: 22px; height: 22px; border-radius: 50%; display: block; }
.qt-bot { width: 18px; height: 18px; border-radius: 50%; display: block; }
.qt-chunsik { background: var(--primary-soft); color: var(--primary-ink); }
.bot-mention { font-weight: 600; color: var(--bot-color); margin-right: 2px; }
.own-bubble .bot-mention { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.qc-schedule { background: var(--ev-blue-bg); color: var(--ev-blue-tx); }
.qc-diary { background: var(--ev-teal-bg); color: var(--ev-teal-tx); }
.qc-grades { background: var(--ev-yellow-bg); color: var(--ev-yellow-tx); }
.qc-schedule.active { background: var(--ev-blue); color: #fff; }
.qc-diary.active { background: var(--ev-teal); color: #fff; }
.qc-grades.active { background: var(--ev-yellow); color: #412402; }
.qc-short { display: none; }
.quick-hint { margin-left: auto; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.input-row { display: flex; align-items: flex-end; gap: 8px; }
.input-box {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 4px 5px 4px 6px;
}
.input-box:focus-within { border-color: var(--primary); }
.input-box.quick-on { border: 1.5px solid var(--primary); }
.ib-btn { width: 34px; height: 34px; border: none; background: none; border-radius: 50%; color: var(--text-muted); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ib-btn:hover { background: var(--surface-2); color: var(--text); }
.quick-tag { display: inline-flex; align-items: center; gap: 2px; border-radius: var(--radius-sm); padding: 3px 2px 3px 7px; font-size: 15px; white-space: nowrap; flex-shrink: 0; margin-left: 4px; }
.qt-lock { font-size: 12px; margin-left: -2px; }
.quick-tag[hidden] { display: none; }
.qt-schedule { background: var(--ev-blue-bg); color: var(--ev-blue-tx); }
.qt-schedule.qt-private { background: var(--primary-soft); color: var(--primary-ink); outline: 1px dashed var(--primary); outline-offset: -1px; }
.quick-vis { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.quick-vis[hidden] { display: none; }
.quick-vis-label { font-size: 12px; color: var(--text-muted); }
.qv-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-sub); font-size: 13px; cursor: pointer; }
.qv-btn[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; }
.qv-btn[data-vis="private"][aria-pressed="true"] { border-style: dashed; }
.qt-diary { background: var(--ev-teal-bg); color: var(--ev-teal-tx); }
.qt-grades { background: var(--ev-yellow-bg); color: var(--ev-yellow-tx); }
.quick-tag-x { border: none; background: none; color: inherit; opacity: .7; cursor: pointer; font-size: 11px; padding: 0 3px; }
.msg-input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; resize: none; padding: 8px 8px; font-size: 15px; line-height: 1.45; max-height: 120px; overflow-y: auto; }
.msg-input::placeholder { color: var(--text-muted); }
.btn-send { width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.btn-send { background: var(--primary); color: #fff; margin-left: 4px; }
.btn-send:hover { background: var(--primary-dark); }
.btn-send:disabled { opacity: .5; cursor: not-allowed; }

/* 음성 입력 상태 */


/* 이모지·스티커 피커 */
.emoji-picker, .sticker-picker {
  position: absolute; bottom: calc(100% + 6px); left: 20px; z-index: 200; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-pop);
}
.emoji-picker { width: 320px; max-height: 300px; padding: 10px 12px; }
.emoji-cat-label { font-size: 11px; font-weight: 600; color: var(--text-muted); margin: 8px 0 4px; }
.emoji-cat-label:first-child { margin-top: 0; }
.emoji-cat-row { display: flex; flex-wrap: wrap; gap: 2px; }
.emoji-item { font-size: 22px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); cursor: pointer; user-select: none; }
.emoji-item:hover { background: var(--surface-2); }
.sticker-picker { width: 300px; max-height: 330px; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; }
.sticker-item { cursor: pointer; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); padding: 6px; min-height: 80px; }
.sticker-item:hover { outline: 2px solid var(--primary); }
.sticker-thumb { max-width: 100%; max-height: 130px; border-radius: 6px; display: block; }
.sticker-empty { grid-column: 1 / -1; text-align: center; color: var(--text-muted); font-size: 12px; padding: 16px; line-height: 1.8; }

@media (max-width: 1023px) {
  .chat-layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
}

@media (max-width: 767px) {
  .chat-layout { grid-template-rows: auto minmax(0, 1fr); }
  .sidebar {
    display: block; order: 0; overflow: visible; padding: 8px 10px 0; border-left: none;
  }
  .sidebar-section { padding: 9px 12px; margin: 0; }
  .sidebar-section h3 { margin: 0; cursor: pointer; }
  .sb-chevron { display: inline-block; }
  .sb-drawer .sb-fold-hint { display: none; }   /* 휴대폰: 첫 머리는 사이드바 전체 펼치기(▾ sb-chevron) */
  .sidebar:not(.sb-open) .sidebar-section:not(.sb-drawer),
  .sidebar:not(.sb-open) .sb-drawer > :not(h3) { display: none; }
  .sidebar.sb-open { max-height: 45vh; overflow-y: auto; display: flex; flex-direction: column; }
  .sidebar.sb-open .sidebar-section { margin-top: 8px; }
  .sidebar.sb-open .sb-drawer { order: -1; margin-top: 0; }   /* 펼치는 머리는 늘 맨 위, 사진은 그 아래 */
  .sidebar.sb-open .sb-drawer h3 { margin-bottom: 8px; }
  .sidebar.sb-open .sb-chevron { transform: rotate(180deg); }
  .messages-area { padding: 10px 10px; }
  .message { max-width: 88%; }
  .chat-img { max-width: 210px; }
  .input-area { padding: 6px 8px 8px; gap: 6px; }
  .quick-chip { padding: 4px 8px; font-size: 12px; }
  .qc-chunsik { padding: 2px 6px; }
  .qc-long, .quick-hint { display: none; }
  .qc-short { display: inline; }
  .btn-photo, .btn-emoji, .btn-sticker { display: none; }
  /* 사진·이모지·스티커는 빠른 실행 줄 왼쪽에 아이콘으로 (구분선으로 나눔) */
  .media-btns { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .quick-chips { gap: 5px; }
  .emoji-picker, .sticker-picker { left: 8px; right: 8px; width: auto; }
}

/* ── 성적 차트 ───────────────────────────────────────────────── */


/* 성적 보기 버튼 */


/* ── 성적 전체 페이지 (따뜻한 스킨) ──────────────────────────── */


/* 필터바 내 계층형 콤보 픽커 */


/* ── 캘린더 버튼 ─────────────────────────────────────────────── */


/* ── 캘린더 전체 페이지 ───────────────────────────────────────── */


/* 달력 카드 (진짜 달력 느낌) */


/* 월 네비게이션 */


/* 달력 그리드 */


/* 일정 이벤트 칩 */


/* ── 일정 색상 피커 ──────────────────────────────────────────── */


/* ── 공휴일 표시 ─────────────────────────────────────────────── */


/* ── 다이어리 버튼 ───────────────────────────────────────────── */


/* ── 다이어리 스킨 ─────────────────────────────────────────── */

/* 배경: 짙은 가죽/나무 질감 */


/* 헤더 다이어리 테마 */


/* 책 바깥 영역 */


/* 책: 바인딩 + 페이지 */


/* 스파이럴 바인딩 */


/* 다이어리 페이지 (종이) */

/* 붉은 여백선 */


/* 날짜 네비게이션 */


/* 빈 상태 */


/* 다이어리 카드 (투명 — 종이 배경 사용) */


/* 섹션 타이틀 */


/* 구분선 */


/* 메모 리스트 */


/* 요약 텍스트 */


/* ── 폴라로이드 사진 ──────────────────────────────────────────── */

/* 테이프 장식 */


/* 폴라로이드 캡션 */


/* 다이어리 사진 추가 버튼 */


/* 다이어리 사진 업로드 모달 */


/* ── 캘린더 일정 추가 버튼 ───────────────────────────────────── */


/* ── 일정 생성/수정 모달 ─────────────────────────────────────── */


/* ── 성적 CRUD 추가 UI ──────────────────────────────────────── */


/* 등록자 셀 - 행 hover 시 삭제 버튼 표시 */


/* 성적 추가/수정 모달 */


/* ── 커스텀 값 픽커 (학원/과목/시험명) ────────────────────────── */


/* ev-field 내 select 스타일 추가 */


/* ── 가족 게시판 ─────────────────────────────────────────────── */

/* 채팅으로 돌아가기 버튼 */


/* 게시판 버튼 (헤더 네비) */


/* 전체 페이지 레이아웃 */


/* 카테고리 탭 바 */


/* 게시글 컨테이너 */


/* 게시글 그리드 */


/* 게시글 카드 */


/* 새 글쓰기 FAB */


/* ── 게시글 상세 모달 ──────────────────────────────────────── */


/* ── 새 글쓰기 모달 ────────────────────────────────────────── */
.new-post-modal { max-width: 520px; }

/* 사진 업로드 필드 - 라벨 없이 업로드 영역만 표시 */


/* ── 가족앨범 갤러리 ──────────────────────────────────────────── */


/* 이미지 영역 - 자연 비율 유지 (잘림 없음) */


/* 이미지 없을 때 빈 플레이스홀더 */


/* 하단 정보 영역 */


/* ── 반응형 (모바일) ──────────────────────────────────────────── */

/* ── 캘린더 모바일 대응 ───────────────────────────────────────── */

/* 공통: 화면 너비가 좁으면 컨테이너 패딩/마진 줄임 */


/* 모바일 세로/가로 공통 */
@media (max-width: 768px) {
  /* 헤더: 모바일 크기 조정 (이미 column 레이아웃) */


  /* 헤더 버튼 크기 */


  /* 게시판 모바일 */


  /* 요일 헤더 */


  /* 날짜 셀 */


  /* 이벤트 칩 */

}

/* 모바일 가로 (landscape) - 모든 내용 한 화면에 */
@media (max-height: 500px) and (orientation: landscape) {
  /* 가로 모드: 더 촘촘하게 */

}

/* ══════════════════════════════════════════════════
   가족 할 일판 (캘린더 하단 섹션)
══════════════════════════════════════════════════ */


/* ── 반복 일정 ─────────────────────────────────────────────── */

/* ── 캘린더 ────────────────────────────────────────────────── */
.cal-container { display: flex; flex-direction: column; gap: 14px; }
.cal-card { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 14px; }
.cal-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cal-nav-btn { width: 32px; height: 32px; border: none; background: none; border-radius: 50%; color: var(--text-sub); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cal-nav-btn:hover { background: var(--surface-2); }
.cal-month-title { font-size: 18px; font-weight: 600; min-width: 120px; text-align: center; }
.btn-cal-today { padding: 5px 11px; font-size: 13px; }
.cal-nav-spacer { flex: 1; display: none; }
.btn-add-series, .btn-add-event { font-size: 14px; }
.cal-dow-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.cal-dow { text-align: center; font-size: 12px; color: var(--text-muted); padding: 2px 0; }
.cal-dow:first-child { color: var(--danger); }
.cal-dow:last-child { color: var(--ev-blue); }
.cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: auto; gap: 4px; }
.cal-days { --cal-gap: 4px; --cell-px: 5px; }
.cal-cell { background: var(--bg); border-radius: var(--radius-sm); padding: 4px var(--cell-px) 6px; min-height: 96px; min-width: 0; position: relative; }
.cal-cell-head { display: flex; align-items: center; gap: 3px; min-width: 0; }
/* 여러 날 일정 막대: 연한 색, 옆 칸과 틈까지 이어 그림, 제목은 시작일·일요일에만 */
.cal-span { height: 18px; margin-top: 3px; border-radius: 0; font-size: 11px; line-height: 18px; white-space: nowrap; cursor: pointer; }
.cal-span.span-start { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.cal-span.span-end { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.cal-span.join-left { margin-left: calc(-1 * var(--cell-px) - var(--cal-gap) / 2); }
.cal-span.join-right { margin-right: calc(-1 * var(--cell-px) - var(--cal-gap) / 2); }
.cal-span.is-private { border-top: 1px dashed currentColor; border-bottom: 1px dashed currentColor; line-height: 16px; }
.cal-span.is-private.span-start { border-left: 1px dashed currentColor; }
.cal-span.is-private.span-end { border-right: 1px dashed currentColor; }
.cal-span-empty { background: none !important; cursor: default; }
.cal-span-title { position: relative; z-index: 2; display: block; width: max-content; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; font-weight: 500;
  max-width: calc(var(--span-days, 1) * (100% + 2 * var(--cell-px) + var(--cal-gap))); }
.cal-cell.other-month { background: transparent; opacity: .45; }
.cal-cell.today, .cal-cell.selected { box-shadow: inset 0 0 0 1.5px var(--primary); }
.cal-cell.drag-target { background: var(--primary-soft); }
.cal-day-num { font-size: 13px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.cal-cell:nth-child(7n) .cal-day-num { color: var(--ev-blue); }
.cal-cell:nth-child(7n+1) .cal-day-num, .cal-cell .cal-day-num.holiday-num { color: var(--danger); }
.cal-cell.today .cal-day-num { background: var(--primary); color: #fff !important; font-weight: 600; }
.cal-holiday-name { font-size: 10px; color: var(--danger); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-event {
  margin-top: 3px; border-radius: 6px; padding: 2px 6px; font-size: 12px; line-height: 1.35;
  white-space: normal; word-break: keep-all; overflow-wrap: anywhere; cursor: pointer;
}
.cal-event:hover { filter: brightness(.96); }
.cal-event-time { opacity: .75; margin-right: 3px; font-variant-numeric: tabular-nums; }
.series-num { font-weight: 600; }
.cal-event-repeat { margin-left: 3px; font-size: 9px; opacity: .6; }
.cal-event.draggable-chip { cursor: grab; }
/* 나만 보기 일정: 점선 테두리 + 🔒 */
.cal-event.is-private { outline: 1.5px dashed currentColor; outline-offset: -1.5px; }
.cal-event-lock { font-size: 9px; margin-right: 2px; }
.cal-nav-center { flex: 1; display: flex; justify-content: center; min-width: 0; }
.cal-filter { display: inline-flex; gap: 2px; padding: 2px; margin: 0; background: var(--surface-2); border-radius: 10px; }
.cal-filter button { border: none; background: none; color: var(--text-sub); font-size: 13px; padding: 5px 12px; border-radius: 8px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.cal-filter button[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.ev-vis { display: flex; gap: 6px; }
.ev-vis-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 10px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-sub); border-radius: 10px; font-size: 14px; cursor: pointer; }
.ev-vis-btn.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; }
.ev-vis-btn[data-vis="private"].active { border-style: dashed; }
.ev-vis-btn:disabled { cursor: not-allowed; opacity: .6; }
.ev-vis-hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.cal-event.drag-over { outline: 2px dashed currentColor; outline-offset: -1px; }
.cal-more { display: none; }
/* 일정창 춘식이
   - 넓은 화면(1480px~): 달력 오른쪽에 붙임(페이지 폭을 넓혀 달력 폭은 그대로)
   - 데스크톱(768~1479px): 달력 머리줄 '춘식이' 버튼으로 여는 오른쪽 슬라이드 창(달력 폭 유지)
   - 모바일: 달력 아래 접힌 줄, 누르면 펼침
   입력창은 맨 위, 대화는 최신이 위 */
.cal-top { display: block; }
.cal-assist { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow); overflow: hidden; }
.ca-head { display: none; align-items: center; gap: 8px; padding: 12px 14px; border: none; background: none; color: var(--text);
  text-align: left; cursor: pointer; width: 100%; }
.ca-bot { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
.ca-title { font-weight: 600; font-size: 14px; }
.ca-private { margin-left: auto; font-size: 11px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.ca-chevron { transition: transform .2s; color: var(--text-muted); }
.ca-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ca-input { display: flex; align-items: flex-end; gap: 6px; padding: 10px 10px 8px; border-bottom: 1px solid var(--border); }
.ca-form-bot { align-self: center; }
.ca-input textarea { flex: 1; min-width: 0; resize: none; border: 1.5px solid var(--primary); border-radius: 18px; background: var(--bg);
  color: var(--text); padding: 8px 12px; font-size: 14px; line-height: 1.4; max-height: 110px; outline: none; }
.ca-input textarea::placeholder { color: var(--text-muted); }
.ca-photo, .ca-send { width: 36px; height: 36px; flex-shrink: 0; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.ca-photo { background: var(--surface-2); color: var(--text-sub); }
.ca-send { background: var(--primary); color: #fff; }
.ca-send:disabled { opacity: .5; }
.ca-preview { display: flex; align-items: center; gap: 6px; margin: 6px 12px 0; padding: 5px 8px; font-size: 12px; background: var(--surface-2); border-radius: 8px; }
.ca-preview[hidden] { display: none; }
.ca-pv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ca-preview button { border: none; background: none; color: var(--text-muted); cursor: pointer; }
.ca-vis { display: flex; align-items: center; gap: 6px; padding: 8px 12px 4px; flex-wrap: wrap; }
.ca-vis .qv-btn { padding: 4px 10px; font-size: 12px; }
.ca-vis-label { font-size: 12px; color: var(--text-muted); }
.ca-private-inline { margin-left: auto; }
.ca-clear, .ca-close { border: none; background: none; color: var(--text-muted); font-size: 17px; cursor: pointer; padding: 4px; border-radius: 8px; }
.ca-clear:hover, .ca-close:hover { background: var(--surface-2); }
.ca-close { display: none; }
.ca-msgs { flex: 1; min-height: 160px; overflow-y: auto; padding: 6px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.ca-msg { max-width: 92%; display: flex; flex-direction: column; gap: 4px; }
.ca-text { padding: 8px 11px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.ca-user { align-self: flex-end; align-items: flex-end; }
.ca-user .ca-text { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.ca-assistant .ca-text { background: var(--surface-2); color: var(--text); border-bottom-left-radius: 4px; }
.ca-wait .ca-text { color: var(--text-muted); font-style: italic; }
.ca-img { max-width: 160px; max-height: 160px; border-radius: 10px; object-fit: cover; }
.ca-confirm .ca-text { border: 1.5px solid var(--primary); }
.ca-confirm.is-delete .ca-text { border-color: var(--danger); }
.ca-cf-actions { display: flex; gap: 6px; }
.ca-cf-actions button { border-radius: 10px; padding: 6px 14px; font-size: 13px; cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-sub); }
.ca-cf-actions .ca-cf-ok { border: none; background: var(--primary); color: #fff; font-weight: 600; }
.ca-confirm.is-delete .ca-cf-ok { background: var(--danger); }
.ca-cf-actions button:disabled { opacity: .5; }
/* 통계 막대그래프 */
.ca-chart { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 9px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.ca-chart-title { font-size: 12px; font-weight: 600; color: var(--text-sub); margin-bottom: 2px; }
.ca-bar-row { display: grid; grid-template-columns: 56px 1fr 26px; align-items: center; gap: 6px; font-size: 12px; }
.ca-bar-label { color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-bar-track { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.ca-bar { display: block; height: 100%; background: var(--primary); border-radius: 5px; min-width: 2px; }
.ca-bar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.btn-ca-open { display: none; align-items: center; gap: 5px; padding: 5px 10px; }
.ca-open-bot { width: 20px; height: 20px; border-radius: 50%; }
.btn-ca-open[aria-expanded="true"] { border-color: var(--primary); color: var(--primary-ink); }

@media (min-width: 1480px) {
  .app-main:has(.cal-top) { max-width: 1560px; }
  .cal-top { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
  .cal-assist { position: sticky; top: 12px; max-height: calc(100vh - 90px); }
}
@media (min-width: 768px) and (max-width: 1479px) {
  .btn-ca-open { display: inline-flex; }
  .cal-assist { position: fixed; top: 70px; right: 16px; bottom: 16px; width: 380px; z-index: 60;
    box-shadow: var(--shadow-pop, 0 12px 40px rgba(0,0,0,.35)); transform: translateX(calc(100% + 32px)); transition: transform .22s ease; }
  .cal-assist.drawer-open { transform: none; }
  .ca-close { display: inline-block; }
}
@media (max-width: 767px) {
  .cal-top .cal-assist { margin-top: 14px; }
  .ca-head { display: flex; }
  .ca-form-bot, .ca-private-inline { display: none; }
  .cal-assist.open .ca-chevron { transform: rotate(180deg); }
  .cal-assist.open .ca-head { border-bottom: 1px solid var(--border); }
  .cal-assist:not(.open) .ca-body { display: none; }
  .ca-msgs { max-height: 50vh; }
}

/* 선택한 날 일정 상세: 데스크톱은 할 일 옆 카드, 모바일은 달력 아래 */
.cal-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.day-detail { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow); padding: 14px; position: sticky; top: 16px; }
.dd-head { font-weight: 600; font-size: 14px; }
.dd-item.is-private { border-left-style: dashed; }
.dd-item { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: var(--bg); border: none; border-left: 3px solid var(--dd-color); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 8px 10px; cursor: pointer; width: 100%; }
.dd-time { font-size: 12px; color: var(--text-muted); min-width: 64px; font-variant-numeric: tabular-nums; }
.dd-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dd-title { font-size: 14px; font-weight: 500; word-break: keep-all; }
.dd-num { font-size: 11px; color: var(--primary-ink); font-weight: 400; }
.dd-sub { font-size: 12px; color: var(--text-muted); }
.dd-empty { font-size: 13px; color: var(--text-muted); padding: 4px 0; }
.dd-add { align-self: flex-start; border: none; background: none; color: var(--primary); font-size: 13px; padding: 4px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.dd-item:hover { filter: brightness(.97); }

/* 할 일 */
.todo-section { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 14px; }
.todo-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.todo-section-title { font-size: 15px; font-weight: 600; color: var(--primary); display: flex; align-items: center; gap: 6px; }
.todo-chevron { display: none; transition: transform .2s; }
.todo-new-btn { border: none; background: none; color: var(--primary); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.todo-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.todo-loading, .todo-empty-state, .todo-no-items { color: var(--text-muted); font-size: 13px; padding: 6px 0; }
.todo-project-card { background: var(--bg); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.todo-project-header { display: flex; align-items: center; gap: 6px; }
.todo-project-emoji { font-size: 18px; line-height: 1; }
.todo-project-title { font-weight: 600; flex: 1; min-width: 0; }
.todo-project-progress { font-size: 12px; color: var(--text-muted); }
.todo-proj-del-btn, .todo-item-del-btn { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 12px; opacity: .6; }
.todo-proj-del-btn:hover, .todo-item-del-btn:hover { opacity: 1; color: var(--danger); }
.todo-items { display: flex; flex-direction: column; gap: 2px; }
.todo-item { display: flex; align-items: flex-start; gap: 7px; padding: 4px 0; }
.todo-item-check { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; }
.todo-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.todo-item-content { font-size: 14px; word-break: keep-all; }
.todo-item.done .todo-item-content { color: var(--text-muted); text-decoration: line-through; }
.todo-item-meta { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--text-muted); }
.todo-assignee-badge { border-radius: var(--radius-pill); padding: 0 7px; color: #fff; font-size: 11px; }
.todo-add-row { display: flex; gap: 5px; margin-top: 2px; }
.todo-assignee-select, .todo-item-input { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 5px 7px; font-size: 13px; min-width: 0; }
.todo-item-input { flex: 1; }
.todo-item-add-btn { border: none; background: var(--primary-soft); color: var(--primary-ink); border-radius: var(--radius-sm); padding: 5px 10px; font-size: 13px; cursor: pointer; }

/* 모달 (일정·할 일·성적 공용) */
.ev-modal-bg, .todo-modal-bg { position: fixed; inset: 0; z-index: 9999; background: rgba(28, 26, 23, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ev-modal, .todo-modal { background: var(--surface); color: var(--text); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); width: 100%; max-width: 460px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.ev-modal-header, .todo-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--border); }
.ev-modal-close, .todo-modal-close { border: none; background: none; width: 30px; height: 30px; border-radius: 50%; color: var(--text-muted); cursor: pointer; font-size: 15px; }
.ev-modal-close:hover, .todo-modal-close:hover { background: var(--surface-2); }
.ev-modal-body, .todo-modal-body { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.ev-field { display: flex; flex-direction: column; gap: 5px; }
.ev-field > label, .todo-modal-label { font-size: 13px; font-weight: 600; color: var(--text-sub); }
.ev-field input, .ev-field textarea, .ev-field select, .todo-text-input { width: 100%; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 9px 12px; outline: none; }
.ev-field input:focus, .ev-field textarea:focus, .ev-field select:focus, .todo-text-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.ev-field textarea { resize: vertical; min-height: 56px; }
.ev-time-row { flex-direction: row; align-items: flex-end; gap: 8px; }
.ev-time-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ev-time-sep { padding-bottom: 10px; color: var(--text-muted); }
.required { color: var(--danger); }
.ev-color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.ev-color-btn { width: 28px; height: 28px; border-radius: 50%; border: 2px solid; cursor: pointer; }
.ev-color-btn.active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.ev-modal-footer, .todo-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); }
.todo-modal-footer { justify-content: flex-end; }
.ev-footer-right { display: flex; gap: 8px; margin-left: auto; }
.btn-ev-save, .todo-btn-save { background: var(--primary); color: #fff; border: none; border-radius: var(--radius); padding: 9px 16px; font-weight: 600; cursor: pointer; }
.btn-ev-save:hover, .todo-btn-save:hover { background: var(--primary-dark); }
.btn-ev-cancel, .todo-btn-cancel { background: var(--surface); color: var(--text-sub); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 8px 14px; cursor: pointer; }
.btn-ev-delete { background: var(--danger-soft); color: var(--danger); border: none; border-radius: var(--radius); padding: 8px 14px; cursor: pointer; display: inline-flex; }
.todo-emoji-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.todo-emoji-btn { width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-size: 20px; cursor: pointer; }
.todo-emoji-btn.active { border-color: var(--primary); background: var(--primary-soft); }

/* 반복 일정 */
.ev-weekdays { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ev-wd-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); font-size: 13px; cursor: pointer; }
.ev-wd-btn.sun { color: var(--danger); }
.ev-wd-btn.sat { color: var(--ev-blue); }
.ev-wd-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.ev-wd-presets { margin-left: auto; display: flex; gap: 4px; }
.ev-wd-preset { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-pill); padding: 3px 10px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.ev-repeat-preview { margin-top: 10px; background: var(--primary-soft); border-radius: var(--radius); padding: 10px 12px; }
.ev-repeat-count { font-size: 13px; font-weight: 600; color: var(--primary-ink); margin-bottom: 6px; }
.ev-repeat-hint { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.ev-repeat-dates { display: flex; flex-wrap: wrap; gap: 4px; max-height: 120px; overflow-y: auto; }
.ev-repeat-date { border: none; background: var(--surface); border-radius: 6px; padding: 2px 7px; font-size: 12px; cursor: pointer; }
.ev-repeat-date.off { text-decoration: line-through; color: var(--text-muted); opacity: .6; }
.ev-check { display: flex !important; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.ev-check input { width: 16px; height: 16px; }
.ev-check-hint { color: var(--text-muted); font-weight: 400; font-size: 12px; }
.ev-series-info { background: var(--primary-soft); color: var(--primary-ink); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; font-weight: 600; }
.scope-modal { max-width: 360px; }
.btn-cal-feed { padding: 5px 9px; font-size: 15px; display: inline-flex; align-items: center; }
.feed-modal { max-width: 440px; }
.feed-desc { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.55; }
.feed-subscribe { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; padding: 10px 14px; }
.feed-url-row { display: flex; gap: 6px; }
.feed-url-row input { flex: 1; min-width: 0; font-size: 12px; padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.feed-help { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; display: flex; flex-direction: column; gap: 4px; }
.feed-reset { align-self: flex-start; background: none; border: none; padding: 2px 0; font-size: 12.5px; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.feed-reset[data-armed="1"] { color: var(--danger, #c0392b); }
.scope-modal .ev-modal-body { gap: 8px; }
.scope-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.scope-btn { width: 100%; text-align: left; padding: 11px 14px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); font-size: 14px; cursor: pointer; }
.scope-btn:hover { border-color: var(--primary); color: var(--primary-ink); }

@media (max-width: 767px) {
  .cal-container { gap: 10px; }
  .cal-card { padding: 8px 4px; border-radius: var(--radius); }
  .cal-nav { padding: 0 6px; gap: 4px; }
  .cal-month-title { font-size: 16px; min-width: 0; }
  .btn-cal-today { padding: 4px 9px; font-size: 12px; }
  .cal-nav { flex-wrap: wrap; }
  .cal-nav-spacer { display: block; }
  .cal-nav-center { order: 10; flex-basis: 100%; justify-content: flex-start; }
  .btn-add-series .btn-text { display: none; }
  .btn-add-series { padding: 7px 9px; }
  .btn-add-event .btn-text { display: none; }
  .btn-add-event { width: 34px; height: 34px; padding: 0; border-radius: 50%; justify-content: center; font-size: 18px; }
  .cal-dow-row, .cal-days { gap: 2px; }
  .cal-days { --cal-gap: 2px; --cell-px: 1px; }
  .cal-span { height: 13px; line-height: 13px; font-size: 10px; margin-top: 1px; letter-spacing: -.3px; pointer-events: none; }
  .cal-span.span-start { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
  .cal-span.span-end { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
  .cal-span-title { padding: 0 2px; text-overflow: clip; }
  .cal-span.is-private { line-height: 11px; }
  .cal-cell { min-height: 78px; padding: 2px var(--cell-px); border-radius: 4px; }
  .cal-day-num { font-size: 11px; width: 18px; height: 18px; }
  .cal-holiday-name { display: none; }
  .cal-event {
    font-size: 10px; line-height: 13px; margin-top: 1px; padding: 0 2px; border-radius: 3px;
    white-space: nowrap; overflow: hidden; letter-spacing: -.3px; pointer-events: none;
  }
  .cal-event-time, .cal-event-repeat, .series-total { display: none; }
  .chip-overflow { display: none; }
  .cal-more { display: block; font-size: 10px; color: var(--text-muted); padding-left: 2px; }
  .day-detail { background: none; box-shadow: none; border-radius: 0; padding: 10px 6px 2px; position: static; }
  .cal-bottom { display: block; }
  .day-detail-slot { display: none; }
  .todo-section { padding: 10px 12px; }
  .todo-section-header { margin-bottom: 0; cursor: pointer; }
  .todo-chevron { display: inline-block; }
  .todo-section:not(.todo-open) .todo-projects { display: none; }
  .todo-section.todo-open .todo-section-header { margin-bottom: 10px; }
  .todo-section.todo-open .todo-chevron { transform: rotate(180deg); }
  .todo-projects { grid-template-columns: minmax(0, 1fr); }
  .ev-modal-bg, .todo-modal-bg { align-items: flex-end; padding: 0; }
  .ev-modal, .todo-modal { max-width: none; border-radius: var(--radius-card) var(--radius-card) 0 0; max-height: 90vh; }
  .ev-modal-footer, .todo-modal-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .ev-time-row input[type="date"] { max-width: none; }
}

/* ── 다이어리 (노트 감성, 카드형 글꼴) ─────────────────────── */
.diary-book-outer { max-width: 1000px; margin: 0 auto; }
.diary-book { background: var(--paper); border-left: 10px solid var(--paper-spine); border-radius: 6px var(--radius-card) var(--radius-card) 6px; box-shadow: var(--shadow); }
.diary-page-wrap { padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 14px; }
.diary-nav-skin { display: flex; align-items: center; gap: 12px; }
.diary-page-nav-btn { width: 32px; height: 32px; border: none; background: none; border-radius: 50%; color: var(--text-muted); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.diary-page-nav-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.diary-page-nav-btn:disabled { opacity: .3; cursor: default; }
.diary-date-title { font-size: 20px; font-weight: 600; color: var(--paper-ink); }
.diary-empty { text-align: center; color: var(--text-muted); padding: 40px 0; }
.diary-empty-icon { font-size: 40px; margin-bottom: 8px; }
.diary-card {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 22px; row-gap: 14px;
  grid-template-areas: "photos summary" "photos notes";
  align-items: start;
}
#photos-section { grid-area: photos; }
#summary-section { grid-area: summary; }
#notes-section { grid-area: notes; }
.diary-hr { display: none !important; }
.diary-section-title { font-size: 15px; font-weight: 600; color: var(--primary-ink); display: flex; align-items: center; gap: 6px; line-height: 22px; margin-bottom: 6px; }
.diary-section-title .btn-diary-upload { margin-left: auto; }
.btn-diary-upload { border: none; background: none; color: var(--primary); font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; }
.btn-diary-upload:hover { text-decoration: underline; }

/* 줄노트 (이야기·메모) — 줄 무늬 텍스처라 그라데이션 금지 규칙의 예외 */
.diary-summary-text, .diary-notes-list {
  background-image: repeating-linear-gradient(to bottom, transparent 0 21px, var(--paper-line) 21px 22px);
  line-height: 22px; font-size: 14.5px; color: var(--text-sub); word-break: keep-all;
}
.diary-summary-text { white-space: pre-wrap; }
.diary-notes-list { list-style: none; }
.diary-note-item { min-height: 22px; }
.diary-note-row { display: flex; align-items: flex-start; gap: 6px; }
.diary-note-content { flex: 1; }
.diary-note-meta { display: block; font-size: 11px; color: var(--text-muted); line-height: 22px; }
.note-edit-btn, .caption-edit-btn { border: none; background: none; cursor: pointer; font-size: 12px; opacity: 0; transition: opacity .15s; }
.diary-note-item:hover .note-edit-btn, .diary-caption-area:hover .caption-edit-btn { opacity: .7; }
.summary-edit-textarea, .caption-inline-input {
  width: 100%; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 6px 8px; font-size: 14px; line-height: 1.6; outline: none;
}
.summary-edit-textarea { min-height: 160px; resize: vertical; }
.summary-edit-textarea:focus, .caption-inline-input:focus { border-color: var(--primary); }
.caption-inline-wrap { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.caption-inline-save, .caption-inline-cancel { border: none; border-radius: var(--radius-sm); padding: 4px 9px; font-size: 12px; cursor: pointer; }
.caption-inline-save { background: var(--primary); color: #fff; }
.caption-inline-cancel { background: var(--surface-2); color: var(--text-sub); }

/* 폴라로이드 사진 */
.diary-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; padding-top: 8px; }
.diary-photo-item {
  position: relative; background: #fff; padding: 6px 6px 8px; box-shadow: 0 1px 4px rgba(44, 44, 42, .16);
  transform: rotate(-2deg); transition: transform .15s; cursor: grab;
}
.diary-photo-item:nth-child(2n) { transform: rotate(1.5deg); }
.diary-photo-item:nth-child(3n) { transform: rotate(-1deg); }
.diary-photo-item:hover { transform: rotate(0) scale(1.02); z-index: 1; }
.diary-photo-item::before {
  content: ''; position: absolute; top: -7px; left: 50%; width: 38px; height: 13px;
  transform: translateX(-50%) rotate(-3deg); background: #F5C4B3; opacity: .85; z-index: 1;
}
.diary-photo-item.dragging { opacity: .4; }
.diary-photo-item.drag-over { outline: 2px dashed var(--primary); outline-offset: 3px; }
.diary-photo-wrap { position: relative; }
.diary-photo-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; cursor: zoom-in; }
.diary-photo-del { position: absolute; top: 4px; right: 4px; border: none; background: rgba(255, 255, 255, .85); color: #2C2C2A; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-size: 12px; opacity: 0; transition: opacity .15s; }
.diary-photo-wrap:hover .diary-photo-del { opacity: 1; }
.diary-caption-area { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 5px; min-height: 18px; }
.diary-photo-caption { font-size: 12px; color: #5F5E5A; text-align: center; cursor: text; word-break: keep-all; }
.caption-placeholder { color: #B4B2A9; }
.diary-photo-meta { font-size: 10px; color: #888780; text-align: center; }
.diary-photos-more { display: none; }

/* 주간 영상일기 */
.weekly-video-section { border-top: 1.5px dashed var(--paper-line); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.weekly-video-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.weekly-video-header h2 { font-size: 15px; font-weight: 600; color: var(--primary-ink); display: flex; align-items: center; gap: 6px; }
.wv-sub { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.btn-weekly-gen { border: 1px solid var(--primary); color: var(--primary); background: none; border-radius: var(--radius-pill); padding: 4px 12px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.btn-weekly-gen:hover:not(:disabled) { background: var(--primary-soft); }
.btn-weekly-gen:disabled { opacity: .55; cursor: default; }
.wv-gen-short { display: none; }
.weekly-video-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.weekly-video-empty { grid-column: 1 / -1; font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.wv-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--paper-line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text); }
.wv-card:hover { box-shadow: var(--shadow-pop); }
.wv-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.wv-thumb { height: 72px; background: var(--wv-color); display: flex; align-items: center; justify-content: center; }
.wv-thumb .ti { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--primary-ink); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.wv-meta { padding: 7px 10px; display: flex; flex-direction: column; }
.wv-label { font-size: 13px; font-weight: 600; }
.wv-range { font-size: 12px; color: var(--text-muted); }
.wv-item-del { position: absolute; right: 6px; bottom: 6px; border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 15px; padding: 3px; border-radius: var(--radius-sm); }
.wv-item-del:hover { color: var(--danger); background: var(--danger-soft); }
.wv-archive { display: flex; flex-direction: column; gap: 10px; }
.wv-archive[hidden] { display: none; }
.wv-select { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 8px 10px; font-size: 14px; }
.wv-pick:empty { display: none; }
.wv-pick .wv-card { max-width: 420px; }
.wv-card-big .wv-thumb { height: 150px; }
.wv-card-big .wv-thumb .ti { width: 48px; height: 48px; font-size: 22px; }

/* 사진 업로드 모달 */
.diary-upload-modal-bg { position: fixed; inset: 0; z-index: 9999; background: rgba(28, 26, 23, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.diary-upload-modal { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); width: 100%; max-width: 420px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.diary-upload-modal h3 { font-size: 16px; font-weight: 600; }
.diary-upload-drop { border: 1.5px dashed var(--border-strong); border-radius: var(--radius); min-height: 160px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px; cursor: pointer; overflow: hidden; }
.diary-upload-drop.drag-over { border-color: var(--primary); background: var(--primary-soft); }
.diary-upload-drop img { max-width: 100%; max-height: 240px; object-fit: contain; }
.diary-upload-caption { width: 100%; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 9px 12px; outline: none; }
.diary-upload-caption:focus { border-color: var(--primary); }
.diary-upload-footer { display: flex; justify-content: flex-end; gap: 8px; }
.diary-upload-cancel { background: var(--surface); color: var(--text-sub); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 8px 14px; cursor: pointer; }
.diary-upload-save { background: var(--primary); color: #fff; border: none; border-radius: var(--radius); padding: 8px 16px; font-weight: 600; cursor: pointer; }
.diary-upload-save:disabled { opacity: .5; cursor: default; }

@media (prefers-color-scheme: dark) {
  .diary-photo-item { background: #3A3631; }
  .diary-photo-item::before { background: #7A4A3A; }
  .diary-photo-caption { color: var(--text-sub); }
  .caption-placeholder, .diary-photo-meta { color: var(--text-muted); }
}

@media (max-width: 767px) {
  .diary-book { border-left-width: 7px; }
  .diary-page-wrap { padding: 12px 12px 14px; gap: 10px; }
  .diary-nav-skin { justify-content: space-between; }
  .diary-date-title { font-size: 16px; }
  .diary-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photos" "summary" "notes"; }
  .diary-photo-grid { gap: 14px 8px; }
  #photos-section:not(.show-all) .diary-photo-item:nth-child(n+4) { display: none; }
  .diary-photo-grid:has(.diary-photo-item:nth-child(4)) + .diary-photos-more { display: block; margin: 6px 0 0 auto; border: none; background: none; color: var(--primary); font-size: 12px; cursor: pointer; }
  .dpm-hide, #photos-section.show-all .dpm-show { display: none; }
  #photos-section.show-all .dpm-hide { display: inline; }
  .diary-summary-text, .diary-notes-list { background-image: repeating-linear-gradient(to bottom, transparent 0 20px, var(--paper-line) 20px 21px); line-height: 21px; font-size: 14px; }
  .diary-photo-del, .note-edit-btn, .caption-edit-btn { opacity: .7; }
  .wv-gen-long { display: none; }
  .wv-gen-short { display: inline; }
  .weekly-video-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding-bottom: 4px; }
  .weekly-video-list .wv-card { flex: 0 0 42%; scroll-snap-align: start; }
  .wv-thumb { height: 58px; }
  .diary-upload-modal-bg { align-items: flex-end; padding: 0; }
  .diary-upload-modal { max-width: none; border-radius: var(--radius-card) var(--radius-card) 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

/* ── 성적 ──────────────────────────────────────────────────── */
/* 채팅 요약 패널·말풍선 차트 */
.chart-container { margin-top: 10px; padding: 10px; background: var(--surface); border-radius: var(--radius); max-width: 100%; overflow: hidden; }
.chart-container canvas { max-width: 100%; height: 220px !important; }
.grade-item { padding: 4px 0 4px 10px; border-left: 3px solid var(--primary); margin-bottom: 6px; }
.grade-item .g-student { font-size: 11px; color: var(--text-muted); }
.grade-item .g-score { font-weight: 600; font-size: 14px; }
.grade-item .g-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
/* 최근 NAS 백업 (색 띠 = 결과, 백업 카드와 같은 --bk-accent) */
.bk-item { padding: 4px 0 4px 10px; border-left: 3px solid var(--bk-accent); margin-bottom: 6px; }
.bk-item .bk-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-item .bk-status { font-size: 12px; color: var(--bk-tx); font-weight: 600; }
.bk-item .bk-status span { font-weight: 400; color: var(--text-muted); }
.bk-item .bk-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
/* 그때 오늘: 사진(4:3 꽉 채움) + 날짜·폴더 제목, 누르면 크게 */
.sidebar-section[hidden] { display: none !important; }
.pm-frame { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: none; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.pm-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-caption { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.pm-text { flex: 1; min-width: 0; }
.pm-when { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pm-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-shuffle { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-sub); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.pm-shuffle:hover { background: var(--surface-2); color: var(--primary); }
.pm-viewer { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .88); display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.pm-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.pm-viewer-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .15); color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
/* NAS 상태 한 줄 요약: 평소 회색, 문제만 노랑·빨강 */
.sys-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; font-size: 11.5px; color: var(--text-muted); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.sys-sep { opacity: .6; }
.sys-item { cursor: default; white-space: nowrap; }
.sys-warn { color: var(--ev-yellow-tx); font-weight: 600; }
.sys-crit { color: var(--danger); font-weight: 600; }
.sys-note { font-size: 11.5px; margin: -6px 0 10px; }
/* NAS 디스크: 볼륨 사용률 막대 + 디스크 줄(점 색 = 상태) */
.sb-updated { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.disk-stale { font-size: 12px; color: var(--ev-yellow-tx); background: var(--ev-yellow-bg); border-radius: var(--radius-sm); padding: 6px 8px; margin-bottom: 8px; }
.vol-item { --vol: var(--success); margin-bottom: 10px; }
.vol-item:last-child { margin-bottom: 0; }
.vol-warn { --vol: var(--ev-yellow); }
.vol-crit { --vol: var(--danger); }
.vol-head { display: flex; justify-content: space-between; align-items: baseline; }
.vol-name { font-weight: 600; font-size: 13.5px; }
.vol-pct { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vol-warn .vol-pct, .vol-crit .vol-pct { color: var(--vol); }
.vol-bar { height: 6px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; margin: 4px 0 3px; }
.vol-bar span { display: block; height: 100%; border-radius: inherit; background: var(--vol); }
.vol-meta { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.disk-row { --dot: var(--success); display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-sub); margin-top: 3px; min-width: 0; }
.disk-row .disk-model { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disk-row .disk-bits { margin-left: auto; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.disk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); flex-shrink: 0; }
.disk-warn { --dot: var(--ev-yellow); }
.disk-crit { --dot: var(--danger); }
.disk-crit .disk-bits { color: var(--danger); font-weight: 600; }
.disk-sleep, .disk-unknown { --dot: var(--border-strong); }
.grade-student-section { margin-bottom: 6px; }
.grade-student-divider { padding-top: 10px; border-top: 1px dashed var(--border); margin-top: 6px; }
.grade-student-label { font-size: 12px; font-weight: 600; margin-bottom: 6px; }

/* 성적 페이지 */
.text-muted { color: var(--text-muted); }
.grades-container { display: flex; flex-direction: column; gap: 14px; }
.grades-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: var(--radius); padding: 3px; gap: 2px; }
.seg-btn { border: none; background: none; border-radius: 9px; padding: 6px 14px; font-size: 14px; color: var(--text-muted); cursor: pointer; }
.seg-btn.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.seg-btn[data-v="연우"].active { color: #2FA58A; }
.seg-btn[data-v="연두"].active { color: #EBA23E; }
.filter-toggle { display: none; }
.filter-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1; }
.filter-more input[type="date"], .field-combo input {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  padding: 6px 12px; font-size: 13px; outline: none; min-width: 0;
}
.filter-more input:focus, .field-combo input:focus { border-color: var(--primary); }
.filter-sep { color: var(--text-muted); }
.btn-filter { padding: 6px 14px; font-size: 13px; border-radius: var(--radius-pill); }
.grade-del-date-row { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.del-date-label { font-size: 12px; color: var(--text-muted); }
.btn-del-date { border: none; background: var(--danger-soft); color: var(--danger); border-radius: var(--radius-pill); padding: 6px 12px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.field-combo { position: relative; display: flex; align-items: center; }
.filter-field-combo { width: 160px; }
.field-combo input { width: 100%; padding-right: 30px; }
.ev-field .field-combo input { border-radius: var(--radius); padding: 9px 34px 9px 12px; font-size: 15px; }
.btn-pick-toggle { position: absolute; right: 4px; border: none; background: none; color: var(--text-muted); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; }
.btn-pick-toggle:hover { background: var(--surface-2); }
.value-picker-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 300; max-height: 240px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 4px;
}
.picker-option { padding: 7px 10px; border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; }
.picker-option:hover { background: var(--surface-2); }
.picker-add-new { padding: 7px 10px; font-size: 13px; color: var(--primary); cursor: pointer; border-top: 1px solid var(--border); }
.picker-empty { padding: 7px 10px; font-size: 13px; color: var(--text-muted); }
.grades-chart-box, .grades-table-box { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 14px 16px; }
.grades-chart-box h2, .grades-table-head h2 { font-size: 15px; font-weight: 600; color: var(--primary); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.study-frame { display: block; width: 100%; height: 480px; border: 0; background: transparent; }
.grades-table-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.grades-table-head h2 { margin-bottom: 0; }
.btn-add-grade { font-size: 14px; }
.grades-table-scroll { overflow-x: auto; }
.grades-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.grades-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.grades-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.grades-table tr.grade-row { cursor: pointer; }
.grades-table tr.grade-row:hover td { background: var(--surface-2); }
.td-empty { text-align: center; padding: 20px !important; }
.score-cell { font-weight: 600; }
.score-above { color: var(--success); }
.score-below { color: var(--danger); }
.td-creator { position: relative; color: var(--text-muted); }
.row-del-btn { margin-left: 6px; border: none; background: var(--danger-soft); color: var(--danger); border-radius: 50%; width: 20px; height: 20px; font-size: 10px; cursor: pointer; opacity: 0; }
.grade-row:hover .row-del-btn { opacity: 1; }
.grades-hint { font-size: 12px; margin-top: 8px; }
/* 성적창 춘식이 — 대화 말풍선·입력창은 일정창 춘식이(.ca-*) 모양을 그대로 씀 */
.grades-assist { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.ga-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 4px; }
.ga-head h2 { font-size: 15px; font-weight: 600; color: var(--primary); }
.ga-head .ca-private { margin-left: auto; }
.grades-assist .ca-input { border-bottom: none; padding-top: 6px; }
.ga-chips { display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.ga-chips::-webkit-scrollbar { display: none; }
.ga-chips button { flex-shrink: 0; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-sub);
  border-radius: var(--radius-pill); padding: 5px 11px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.ga-chips button:hover { border-color: var(--primary); color: var(--primary); }
.grades-assist .ca-msgs { max-height: 640px; min-height: 120px; padding-top: 10px; }
.ca-msg.ga-has-chart { max-width: 100%; width: min(100%, 620px); }
.ga-chart { min-width: 0; }
.ga-canvas { position: relative; height: 220px; }
.gr-modal-bg { position: fixed; inset: 0; z-index: 9999; background: rgba(28, 26, 23, .45); display: none; align-items: center; justify-content: center; padding: 16px; }
.gr-modal { background: var(--surface); color: var(--text); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); width: 100%; max-width: 460px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }

@media (max-width: 767px) {
  .grades-filters { gap: 8px; }
  .seg { flex: 1; }
  .seg-btn { flex: 1; padding: 6px 8px; }
  .filter-toggle { display: inline-flex; }
  .filter-more { display: none; flex: 1 1 100%; background: var(--surface); border-radius: var(--radius); padding: 10px; }
  .grades-filters.filters-open .filter-more { display: flex; }
  .filter-field-combo { width: calc(50% - 4px); }
  .filter-more input[type="date"] { flex: 1; }
  .grade-del-date-row { margin-left: 0; width: 100%; }
  .grades-chart-box, .grades-table-box { padding: 12px; }
  .ga-head .ca-private { display: none; }
  .ga-head .ca-clear { margin-left: auto; }
  .grades-assist .ca-msgs { max-height: 70vh; }
  .ga-canvas { height: 200px; }
  .grades-table thead { display: none; }
  .grades-table, .grades-table tbody { display: block; }
  .grades-table tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; padding: 9px 2px; border-bottom: 1px solid var(--border); }
  .grades-table td { border: none; padding: 0; white-space: normal; }
  .grades-table td:nth-child(1) { grid-column: 1; grid-row: 1; color: var(--text-muted); font-size: 12px; }
  .grades-table td:nth-child(2) { grid-column: 2; grid-row: 1; font-size: 13px; }
  .grades-table td:nth-child(4) { grid-column: 3; grid-row: 1; font-weight: 500; }
  .grades-table td:nth-child(5) { grid-column: 1 / 4; grid-row: 2; font-size: 12px; color: var(--text-muted); }
  .grades-table td:nth-child(6) { grid-column: 4; grid-row: 1 / 3; font-size: 16px; align-self: center; }
  .grades-table td:nth-child(3), .grades-table td:nth-child(7), .grades-table td:nth-child(8), .grades-table td:nth-child(9) { display: none; }
  .grades-table td.td-empty { grid-column: 1 / -1; }
  .gr-modal-bg { align-items: flex-end; padding: 0; }
  .gr-modal { max-width: none; border-radius: var(--radius-card) var(--radius-card) 0 0; }
}

/* ── 게시판 ────────────────────────────────────────────────── */
.board-page-body { display: flex; flex-direction: column; gap: 12px; }
.board-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.board-tabs::-webkit-scrollbar { display: none; }
.board-tab { flex-shrink: 0; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-sub); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 14px; cursor: pointer; }
.board-tab:hover { background: var(--surface-2); }
.board-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.board-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.board-empty { grid-column: 1 / -1; text-align: center; color: var(--text-muted); padding: 40px 0; font-size: 14px; }
.board-card { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.board-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.bc-top { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 8px; }
.bc-thumb { order: -1; margin: -12px -14px 4px; }
.bc-thumb img { width: 100%; height: 150px; object-fit: cover; display: block; }
.board-cat-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 3px; border-radius: var(--radius-pill); padding: 2px 9px; font-size: 12px; border: 1px solid transparent; }
.bc-title { font-size: 15px; font-weight: 600; line-height: 1.4; word-break: keep-all; }
.bc-excerpt { font-size: 13px; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bc-footer { display: flex; align-items: center; gap: 6px; padding: 8px 14px 12px; font-size: 12px; color: var(--text-muted); }
.bc-avatar { width: 20px; height: 20px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.bc-author { color: var(--text-sub); }
.bc-reactions { margin-left: auto; display: flex; gap: 8px; }
.bc-like, .bc-cmt { filter: grayscale(1); opacity: .75; }
.bc-like.liked { filter: none; opacity: 1; color: var(--danger); }

/* 앨범 갤러리 */
.board-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.gallery-item { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow); overflow: hidden; cursor: pointer; }
.gl-img-wrap img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.gl-no-img { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--surface-2); font-size: 28px; }
.gl-info { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 3px; }
.gl-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-excerpt { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-author-row { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); }
.gl-avatar { width: 18px; height: 18px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.gl-author-name { color: var(--text-sub); }
.gl-date { margin-left: auto; }
.gl-reactions { display: flex; gap: 8px; font-size: 12px; color: var(--text-muted); }
.gl-reactions .bc-like.liked { color: var(--danger); }

/* 글쓰기 버튼 */
.board-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 45; width: 54px; height: 54px; border-radius: 50%;
  border: none; background: var(--primary); color: #fff; font-size: 24px; cursor: pointer;
  box-shadow: var(--shadow-pop); display: flex; align-items: center; justify-content: center;
}
.board-fab:hover { background: var(--primary-dark); }

/* 상세·글쓰기 모달 */
.board-modal-bg { position: fixed; inset: 0; z-index: 9999; background: rgba(28, 26, 23, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.board-modal { background: var(--surface); color: var(--text); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; }
.bm-header { position: sticky; top: 0; z-index: 1; background: var(--surface); display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.bm-title { font-size: 17px; font-weight: 600; flex: 1; min-width: 0; word-break: keep-all; }
.bm-close { border: none; background: none; width: 32px; height: 32px; border-radius: 50%; color: var(--text-muted); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bm-close:hover { background: var(--surface-2); }
.bm-meta { display: flex; align-items: center; gap: 8px; padding: 12px 18px 0; font-size: 13px; color: var(--text-muted); }
.bm-avatar, .bm-c-avatar { width: 26px; height: 26px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.bm-author-name { color: var(--text); font-weight: 500; }
.bm-edit-btn, .bm-delete-btn { border: none; background: none; font-size: 12px; cursor: pointer; color: var(--text-muted); padding: 3px 6px; border-radius: var(--radius-sm); }
.bm-edit-btn { margin-left: auto; }
.bm-delete-btn:hover { color: var(--danger); background: var(--danger-soft); }
.bm-edit-btn:hover { background: var(--surface-2); }
.bm-content { padding: 14px 18px; font-size: 15px; line-height: 1.7; white-space: pre-wrap; word-break: keep-all; }
.bm-img-wrap { padding: 0 18px 12px; }
.bm-img { width: 100%; border-radius: var(--radius); display: block; }
.bm-like-row { padding: 0 18px 12px; }
.bm-like-btn { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-pill); padding: 5px 12px; font-size: 13px; cursor: pointer; }
.bm-like-btn.liked { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.bm-divider { margin: 0 18px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text-sub); }
.bm-comments { padding: 0 18px; display: flex; flex-direction: column; gap: 10px; }
.bm-comment { display: flex; gap: 8px; }
.bm-c-body { flex: 1; min-width: 0; background: var(--surface-2); border-radius: var(--radius); padding: 7px 10px; }
.bm-c-header { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.bm-c-name { font-weight: 600; }
.bm-c-date { color: var(--text-muted); }
.bm-c-delete { margin-left: auto; border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 12px; }
.bm-c-delete:hover { color: var(--danger); }
.bm-c-content { font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: keep-all; margin-top: 2px; }
.bm-no-comment { font-size: 13px; color: var(--text-muted); padding: 4px 0; }
.bm-comment-input-row { position: sticky; bottom: 0; background: var(--surface); display: flex; gap: 8px; align-items: flex-end; padding: 12px 18px 14px; margin-top: 10px; border-top: 1px solid var(--border); }
.bm-comment-input { flex: 1; resize: none; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 8px 10px; font-size: 14px; outline: none; }
.bm-comment-input:focus { border-color: var(--primary); }
.bm-comment-submit { border: none; background: var(--primary); color: #fff; border-radius: var(--radius); padding: 9px 14px; font-weight: 600; cursor: pointer; }
.np-form { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.np-field { display: flex; flex-direction: column; gap: 6px; }
.np-field > label { font-size: 13px; font-weight: 600; color: var(--text-sub); }
.np-cat-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.np-cat-btn { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-pill); padding: 5px 12px; font-size: 13px; cursor: pointer; }
.np-cat-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.np-input, .np-textarea { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 9px 12px; outline: none; font-size: 15px; }
.np-input:focus, .np-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.np-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.np-photo-field { flex-direction: row; align-items: center; gap: 10px; }
.np-img-preview-wrap { position: relative; align-items: center; }
.np-img-preview { max-height: 90px; border-radius: var(--radius-sm); display: block; }
.np-img-remove { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--danger); color: #fff; font-size: 11px; cursor: pointer; }
.np-upload-btn { border: 1px dashed var(--border-strong); background: var(--surface); border-radius: var(--radius); padding: 8px 12px; font-size: 13px; color: var(--text-sub); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.np-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--border); }
.np-cancel { background: var(--surface); color: var(--text-sub); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 8px 14px; cursor: pointer; }
.np-submit { background: var(--primary); color: #fff; border: none; border-radius: var(--radius); padding: 9px 16px; font-weight: 600; cursor: pointer; }
.np-submit:disabled { opacity: .5; }

@media (max-width: 1023px) {
  .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .board-tab { padding: 5px 12px; font-size: 13px; }
  .board-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .board-card { flex-direction: column; }
  .bc-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "badge thumb" "title thumb" "excerpt thumb"; column-gap: 10px; row-gap: 4px; padding: 10px 12px 6px; }
  .board-cat-badge { grid-area: badge; justify-self: start; }
  .board-container { padding-bottom: 72px; }
  .bc-title { grid-area: title; font-size: 14px; }
  .bc-excerpt { grid-area: excerpt; -webkit-line-clamp: 1; }
  .bc-thumb { grid-area: thumb; order: 0; margin: 0; align-self: center; }
  .bc-thumb img { width: 64px; height: 64px; border-radius: var(--radius-sm); }
  .bc-footer { padding: 4px 12px 10px; }
  .board-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .board-fab { right: 16px; bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); width: 50px; height: 50px; }
  .board-modal-bg { align-items: flex-end; padding: 0; }
  .board-modal { max-width: none; border-radius: var(--radius-card) var(--radius-card) 0 0; max-height: 92vh; }
  .bm-comment-input-row, .np-actions { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* ── 알림설정 ──────────────────────────────────────────────── */
.tg-card { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.tg-header { text-align: center; padding: 8px 0 4px; }
.tg-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--ev-blue-bg); color: var(--ev-blue-tx); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 10px; }
.tg-header h1 { font-size: 20px; font-weight: 600; }
.tg-header p { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
.tg-status { border-radius: var(--radius-card); padding: 14px 16px; }
.tg-status.linked { background: var(--ev-teal-bg); color: var(--ev-teal-tx); }
.tg-status.unlinked { background: var(--ev-yellow-bg); color: var(--ev-yellow-tx); }
.tg-status .st-title { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.tg-status .st-sub { font-size: 13px; margin-top: 3px; opacity: .85; }
.tg-steps { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.tg-steps h2 { font-size: 15px; font-weight: 600; color: var(--primary); }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-body { flex: 1; min-width: 0; }
.step-title { font-weight: 600; font-size: 14px; }
.step-desc { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.step-desc code { background: var(--surface-2); border-radius: 6px; padding: 1px 6px; font-size: 13px; color: var(--text); }
.cmd-box { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: var(--radius); padding: 8px 8px 8px 12px; margin-top: 6px; }
.cmd-text { flex: 1; font-family: ui-monospace, Menlo, monospace; font-size: 14px; word-break: break-all; }
.btn-copy { border: none; background: var(--primary); color: #fff; border-radius: var(--radius-sm); padding: 6px 12px; font-size: 13px; cursor: pointer; }
.btn-unlink { width: 100%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--danger); border-radius: var(--radius); padding: 11px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn-unlink:hover { background: var(--danger-soft); }
/* 카카오톡 알림: 카카오 로그인 버튼 가이드(노랑 #FEE500, 글자 검정 85%) */
.kakao-icon { background: #FEE500; color: rgba(0, 0, 0, .85); }
.btn-kakao { width: 100%; background: #FEE500; color: rgba(0, 0, 0, .85); border-radius: var(--radius); padding: 13px; font-size: 15px; font-weight: 600; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 7px; }
.btn-kakao:hover { filter: brightness(.97); }
.btn-kakao.is-disabled { opacity: .5; pointer-events: none; }
.btn-kakao-test { width: 100%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: var(--radius); padding: 11px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn-kakao-test:hover { background: var(--surface-2); }
.btn-kakao-test:disabled { opacity: .6; cursor: default; }
.kakao-test-result { font-size: 13px; color: var(--text-sub); text-align: center; margin-top: -6px; }

/* ── 주간 영상 플레이어 ────────────────────────────────────── */
.player-body { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; }
.player-wrap { width: 100%; max-width: 960px; padding: 20px; }
.player-title { color: var(--paper-ink); font-size: 18px; font-weight: 600; text-align: center; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.player-wrap video { width: 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-pop); background: #000; display: block; }
.player-back { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 16px; color: var(--primary); text-decoration: none; font-size: 14px; }
.player-back:hover { text-decoration: underline; }

/* ── 일정 자동 제안 카드 ───────────────────────────────────── */
.suggest-card {
  align-self: flex-end; width: min(340px, 88%); background: var(--surface);
  border: 1.5px dashed var(--primary); border-radius: 16px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; font-size: 14px;
}
.suggest-card.is-done { border-style: solid; border-color: var(--ev-teal); }
.suggest-card.is-error { border-style: solid; border-color: var(--border-strong); }
.sg-head { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--primary-ink); }
.sg-bot { width: 20px; height: 20px; border-radius: 50%; }
.sg-body { display: flex; flex-direction: column; gap: 3px; }
.sg-when { font-weight: 600; font-variant-numeric: tabular-nums; }
.sg-title { word-break: keep-all; }
.sg-sub { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.sg-change { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sg-change s { color: var(--text-muted); }
.sg-field { font-size: 11px; color: var(--text-muted); background: var(--surface-2); border-radius: 6px; padding: 0 6px; }
.sg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.sg-actions button { border-radius: 10px; padding: 7px 10px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.sg-ok { flex: 1; border: none; background: var(--primary); color: #fff; font-weight: 600; }
.suggest-delete .sg-ok { background: var(--danger); }
.sg-ok.confirm { background: var(--danger); }
.sg-mine { border: 1px dashed var(--primary); background: var(--surface); color: var(--primary-ink); font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px; }
.sg-ok:disabled, .sg-no:disabled, .sg-mine:disabled { opacity: .5; cursor: default; }
.sg-no { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-sub); }
.sg-result { font-size: 13px; display: flex; align-items: center; gap: 5px; }
.is-done .sg-result { color: var(--ev-teal-tx); }
.is-error .sg-result { color: var(--text-sub); }
.sg-private { font-size: 11px; color: var(--text-muted); }
.confirm-card .sg-title { font-weight: 500; }
/* 채팅 통계 막대그래프 */
.chart-container.is-stats { height: auto; }
.stats-chart { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; min-width: 220px; }
.stats-chart-title { font-size: 12px; font-weight: 600; opacity: .85; margin-bottom: 2px; }
.stats-row { display: grid; grid-template-columns: 60px 1fr 28px; align-items: center; gap: 6px; font-size: 12px; }
.stats-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.stats-track { height: 10px; background: rgba(255,255,255,.12); border-radius: 5px; overflow: hidden; }
.stats-bar { display: block; height: 100%; background: var(--primary); border-radius: 5px; min-width: 2px; }
.stats-val { text-align: right; font-variant-numeric: tabular-nums; }

/* 성적: 통과 여부 */
.pass-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 8px; margin-left: 4px; vertical-align: middle; }
.pass-ok { background: var(--ev-teal-bg); color: var(--ev-teal-tx); }
.pass-no { background: var(--ev-red-bg, #f8d7d7); color: var(--ev-red-tx, #a32d2d); }
/* 성적 확인 카드 */
.grade-card .gc-rows, .grade-card .gc-new { margin: 0; padding-left: 16px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.grade-card .gc-new { color: var(--primary-ink); }
.gc-q { display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 10px; background: var(--surface-2); }
.gc-q-text { font-size: 13px; font-weight: 600; }
.gc-q-btns { display: flex; flex-wrap: wrap; gap: 5px; }
.gc-q-btns button { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: 14px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.gc-q-btns button.gc-new-btn { border-style: dashed; border-color: var(--primary); color: var(--primary-ink); }
.gc-q-input { display: flex; gap: 5px; }
.gc-q-input input { flex: 1; min-width: 0; border: 1px solid var(--border-strong); border-radius: 10px; padding: 5px 8px; background: var(--bg); color: var(--text); }
.gc-q-input button { border: none; background: var(--primary); color: #fff; border-radius: 10px; padding: 5px 10px; cursor: pointer; }

/* 새 버전 안내(배포 뒤 열려 있던 예전 화면) */
.app-update-bar { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; align-items: center; gap: 10px; white-space: nowrap; width: max-content;
  background: var(--primary); color: #fff; padding: 8px 10px 8px 14px; border-radius: 14px; box-shadow: var(--shadow-pop); font-size: 13px; max-width: calc(100vw - 24px); }
.app-update-bar[hidden] { display: none; }
.app-update-bar button { border: none; background: #fff; color: var(--primary-ink); font-weight: 600; border-radius: 10px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }

/* 메뉴 뱃지 (메일) */
.rail-item, .tab-item { position: relative; }
.nav-badge { position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tab-item .nav-badge { top: 4px; right: calc(50% - 22px); }
.nav-badge[hidden] { display: none; }