/* 글꼴 (2026-10-27 디자인): 본문 Noto Sans KR · 제목 Noto Serif KR(명조) — 구글 무료 글꼴 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=Noto+Serif+KR:wght@600;700&display=swap');
/* 옛한글(ᄒᆞᆫ, ᄫᅵ, ㆍ, 방점 〮〯 등): 두벌식 옛글 자판으로 입력한 글자를 어느 기기에서나 한 글자로 모아 보여 줌.
   옛한글 자모가 화면에 있을 때만 내려받음(150KB). 글꼴: Noto Sans CJK KR 일부(SIL 열린 글꼴 사용권) */
@font-face { font-family: 'YetHangul'; font-weight: 400; font-display: swap; src: url('fonts/yet-Regular.woff2') format('woff2');
    unicode-range: U+1100-11FF, U+A960-A97F, U+D7B0-D7FF, U+302E-302F, U+3164-318E, U+25CC; }
@font-face { font-family: 'YetHangul'; font-weight: 700; font-display: swap; src: url('fonts/yet-Bold.woff2') format('woff2');
    unicode-range: U+1100-11FF, U+A960-A97F, U+D7B0-D7FF, U+302E-302F, U+3164-318E, U+25CC; }
/* =====================================================================
   common.css — 모든 페이지 공통 스타일 (색 테마 · 글꼴 · 상단 메뉴)
   ===================================================================== */

/* ---- 색 테마: 두 달마다 바뀜 (theme.js 가 <html data-theme="1~6"> 을 붙임) ----
   한 테마 안에서는 주요색 한 가지와 그 옅은 색만 씀. 맞음·틀림 색도 차분하게 맞춤. */
:root {
    --font: 'YetHangul', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --font-title: 'YetHangul', 'Noto Serif KR', 'AppleMyungjo', 'Batang', serif;
    --surface: #ffffff;
    --ink: #2b2b2b;            /* 본문 글자 */
    --muted: #77736c;          /* 흐린 글자 */
    --chart-2: #b8925a;        /* 그래프 두 번째 색 (모래색) */
    --ok: #3f7a55;   --ok-soft: #e7f0e9;
    --danger: #b0473b; --danger-soft: #f7e9e6; --danger-line: #ecc9c3;
    /* 9·10월 숲 (기본값) */
    --bg: #f7f6f1; --line: #e3e0d6;
    --accent: #2d5040; --accent-deep: #1f3a2e; --accent-soft: #e5ece7; --accent-line: #c9d6cd;
    --point-bg: #f3e7c9; --point-ink: #6b5226;
}
[data-theme="1"] { /* 1·2월 먹 — 흰 화선지에 먹 */
    --bg: #fafaf8; --line: #e4e4e0;
    --accent: #33383d; --accent-deep: #1e2226; --accent-soft: #ececea; --accent-line: #d2d3d0;
    --point-bg: #efe9dc; --point-ink: #5f5136;
}
[data-theme="2"] { /* 3·4월 진달래 */
    --bg: #fbf7f6; --line: #ecdfe0;
    --accent: #8a4458; --accent-deep: #6b3243; --accent-soft: #f4e6ea; --accent-line: #e5ccd4;
    --point-bg: #f5ebd7; --point-ink: #77592c;
}
[data-theme="3"] { /* 5·6월 비취 */
    --bg: #f5f8f7; --line: #dce5e3;
    --accent: #2a6b6a; --accent-deep: #1d4f4e; --accent-soft: #e2eeed; --accent-line: #c5dbd9;
    --point-bg: #f2ead4; --point-ink: #6b5528;
}
[data-theme="4"] { /* 7·8월 쪽빛 */
    --bg: #f6f8fb; --line: #dde3ec;
    --accent: #2c5a8a; --accent-deep: #1f4268; --accent-soft: #e4ecf5; --accent-line: #c8d6e8;
    --point-bg: #f3ead3; --point-ink: #6b5528;
}
[data-theme="5"] { /* 9·10월 숲 */
    --bg: #f7f6f1; --line: #e3e0d6;
    --accent: #2d5040; --accent-deep: #1f3a2e; --accent-soft: #e5ece7; --accent-line: #c9d6cd;
    --point-bg: #f3e7c9; --point-ink: #6b5226;
}
[data-theme="6"] { /* 11·12월 도토리 */
    --bg: #f8f5f0; --line: #e7dfd3;
    --accent: #6e4f35; --accent-deep: #533a26; --accent-soft: #f0e8df; --accent-line: #ddcdbb;
    --point-bg: #efe6d2; --point-ink: #5e4a2a;
}

body, button, input, select, textarea { font-family: var(--font); }
.t-title { font-family: var(--font-title); }

/* ---- 상단 메뉴: 위에 HELLO JANE KO, 아래에 메뉴 (지금 화면은 밑줄) ---- */
.nav-menu {
    position: sticky; top: 0; z-index: 500; flex-shrink: 0;
    background: var(--bg); width: 100%; box-sizing: border-box;
    padding: 18px 20px 0; font-family: var(--font);
}
.nav-inner { max-width: 760px; margin: 0 auto; }
.nav-brand { display: block; font-size: 15px; font-weight: 700; letter-spacing: 3px; color: var(--accent); text-decoration: none; margin-bottom: 10px; }
.nav-links { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
    flex: 0 0 auto; text-decoration: none; color: var(--muted); font-weight: 500; font-size: 16px;
    padding: 6px 0 10px; border-bottom: 2.5px solid transparent; margin-bottom: -1px; transition: color 0.2s ease; white-space: nowrap;
}
.nav-links a:hover { color: var(--accent); }
.nav-links a.active { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); }

@media (max-width: 600px) {
    .nav-menu { padding: 12px 16px 0; }
    .nav-brand { font-size: 13px; margin-bottom: 6px; }
    .nav-links { gap: 20px; }
    .nav-links a { font-size: 15px; }
}

/* ---- 여러 화면에서 같이 쓰는 모양 ---- */
.t-back { display: inline-flex; align-items: center; gap: 4px; padding: 9px 14px; border: 1.5px solid var(--accent); border-radius: 12px; background: var(--surface); color: var(--accent); font-size: 15px; cursor: pointer; text-decoration: none; }
.t-back:hover { background: var(--accent-soft); }

/* 보기 전용 계정으로 학생 화면을 볼 때: 보내기·입력 칸 숨김 (저장은 어차피 규칙이 막음) */
.hj-viewing .qc-bar, .hj-viewing .qc-replybar, .hj-viewing .qc-gotit, .hj-viewing .qc-reply, .hj-viewing #push-box { display: none !important; }

.hidden { display: none !important; }