/* ============================================================
   아트포엠 성적 관리 — 디자인 시스템
   신뢰감 · 단순함 · 가독성. 남색 잉크 + 브랜드 오렌지 한 점.
   ============================================================ */
:root {
  --brand: #ff5413;
  --brand-dark: #d9430b;
  --brand-tint: #fff3ed;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --faint: #94a3b8;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --bg: #f5f6f8;
  --card: #ffffff;
  --surface-2: #f8fafc;
  --good: #0f7b4e;
  --bad: #c62839;
  --warn: #b45309;
  --radius: 10px;
  /* 과목 색 (검증된 범주형 팔레트, 고정 순서) */
  --s-han: #4a3aa7;  /* 한국사 violet */
  --s-kor: #2a78d6;  /* 국어 blue */
  --s-eng: #eb6834;  /* 영어 orange */
  --s-math: #eda100; /* 수학 yellow */
  --s-t1: #1baf7a;   /* 탐Ⅰ aqua */
  --s-t2: #e87ba4;   /* 탐Ⅱ magenta */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.edit-only { display: none !important; }
.edit-on .edit-only { display: inline-flex !important; }

/* ---------- 상단바 ---------- */
#topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 20px;
  padding: 0 24px; height: 58px;
  background: var(--ink); color: #fff; border-bottom: 3px solid var(--brand);
}
.brand { display: flex; align-items: center; gap: 9px; font-size: 15px; white-space: nowrap; letter-spacing: -.2px; }
.brand img { height: 22px; }
.brand b { font-weight: 800; }
.brand { color: #fff; }
#nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; height: 56px; align-items: stretch; }
#nav a {
  display: flex; align-items: center; padding: 0 13px; color: #94a3b8; font-weight: 600; white-space: nowrap; font-size: 14px;
  border-bottom: 3px solid transparent; margin-bottom: -3px;
}
#nav a:hover { color: #fff; }
#nav a.active { color: #fff; border-bottom-color: var(--brand); }
.top-right { display: flex; align-items: center; gap: 10px; }
.sync { font-size: 12px; color: #94a3b8; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.sync::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.sync.on::before { background: var(--good); }
.sync.off::before { background: var(--bad); }
.editor-chip { font-size: 12px; background: rgba(255,255,255,.12); color: #fff; padding: 4px 10px; border-radius: 999px; font-weight: 700; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line-2);
  background: #fff; cursor: pointer; font-weight: 600; white-space: nowrap; color: var(--ink-2);
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); border-color: var(--faint); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: #1e293b; }
.btn.accent { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.accent:hover { background: var(--brand-dark); }
.btn.danger { color: var(--bad); border-color: #f1c4c9; }
.btn.danger:hover { background: #fff5f6; }
.btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
#editBtn { background: #fff; border-color: #fff; color: var(--ink); }
#editBtn:hover { background: #e2e8f0; }
.edit-on #editBtn { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- 레이아웃 ---------- */
#app { padding: 24px; max-width: 1480px; margin: 0 auto; }
.loading { padding: 60px; text-align: center; color: var(--muted); }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { font-size: 24px; margin: 0; font-weight: 800; letter-spacing: -.5px; }
.page-head .spacer { flex: 1; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
.card h2 { font-size: 15px; margin: 0 0 14px; font-weight: 800; padding-left: 10px; border-left: 4px solid var(--ink); display: flex; align-items: center; gap: 8px; letter-spacing: -.2px; }
.card h2 .sub { font-weight: 500; color: var(--muted); font-size: 12px; }
.muted { color: var(--muted); }
.hint { font-size: 12px; color: var(--muted); margin: 6px 0; }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; background: #e9edf2; padding: 3px; border-radius: 9px; }
.tabs a, .tabs button { padding: 5px 14px; border-radius: 7px; border: 0; background: transparent; cursor: pointer; font-weight: 600; color: var(--muted); }
.tabs a.active, .tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
select.ctl, input.ctl { padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }

/* ---------- 표 ---------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
table.tbl th, table.tbl td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: center; white-space: nowrap; }
table.tbl thead th { background: var(--surface-2); font-weight: 700; color: var(--ink-2); font-size: 12px; position: sticky; top: 0; z-index: 1; }
table.tbl thead tr:first-child th { border-top: 1px solid var(--line); }
table.tbl th.sub { font-weight: 500; color: var(--muted); font-size: 11px; }
table.tbl th.grp { border-left: 1px solid var(--line); }
table.tbl th.grp[data-sj] { box-shadow: inset 0 3px 0 var(--sjc); }
table.tbl td.first { border-left: 1px solid var(--line); }
table.tbl td.name, table.tbl th.name { text-align: left; position: sticky; left: 0; background: #fff; z-index: 2; font-weight: 700; }
table.tbl thead th.name { background: var(--surface-2); z-index: 3; }
table.tbl tbody tr:nth-child(even) td { background: #fbfcfd; }
table.tbl tbody tr:hover td { background: #f2f6fb; }
table.tbl td.l { text-align: left; }
.g1, .g2 { color: var(--good); font-weight: 800; }
.g3 { color: #1d4ed8; font-weight: 700; }
.g4, .g5 { color: var(--ink-2); font-weight: 600; }
.g6, .g7, .g8, .g9 { color: var(--bad); font-weight: 700; }

/* 입력 셀 */
input.cell { width: 100%; min-width: 44px; border: 1px solid transparent; background: transparent; padding: 4px 4px; text-align: center; border-radius: 5px; }
input.cell.wide { min-width: 58px; }
input.cell.text { text-align: left; min-width: 100px; }
.edit-on input.cell { border-color: #e8ecf1; background: #fff; }
input.cell:focus { outline: 2px solid var(--brand); outline-offset: -1px; background: #fff; }
input.cell[readonly] { cursor: default; }
td.cellwrap { padding: 2px !important; }

/* 폼 */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; }
.form input, .form select, .form textarea { padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; font-size: 14px; color: var(--ink); font-weight: 500; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
.form input[readonly], .form textarea[readonly] { background: var(--surface-2); border-color: var(--line); }
.form .full { grid-column: 1 / -1; }
textarea { resize: vertical; min-height: 80px; }

/* 학생 목록 표 */
.gchip { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; font-size: 12px; color: var(--muted); }
.gchip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; background: var(--sjc); }
.gchip b { font-size: 13px; }
.cnt { color: var(--muted); font-size: 12px; }
.name-link { font-weight: 700; color: var(--ink); }
.name-link:hover { color: var(--brand-dark); text-decoration: underline; }

/* 학생 사진 */
.pw { position: relative; display: inline-block; overflow: hidden; vertical-align: middle; line-height: 0; }
.pw.xs { border-radius: 50%; margin-right: 8px; } .pw.xs .photo { margin-right: 0; }
.pw.sm { border-radius: 50%; } .pw.lg { border-radius: 10px; }
.pw.left .photo { filter: grayscale(.6); }
.pw .ribbon { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bad); color: #fff; text-align: center; font-style: normal; font-weight: 900; letter-spacing: 3px; line-height: 1.7; }
.pw.lg .ribbon { font-size: 16px; } .pw.sm .ribbon { font-size: 8px; letter-spacing: 0; line-height: 1.4; } .pw.xs .ribbon { font-size: 0; height: 5px; }
tr.left-row td { color: var(--faint); } tr.left-row .name-link { color: var(--muted); } tr.left-row .gchip b { color: var(--faint); }
.r-photo-wrap { position: relative; display: inline-block; overflow: hidden; border-radius: 6px; margin: 0 0 8px auto; }
.photo { object-fit: cover; background: #e2e8f0; color: #94a3b8; display: inline-flex; align-items: flex-end; justify-content: center; overflow: hidden; flex-shrink: 0; }
.photo.empty svg { width: 100%; height: 100%; display: block; }
.photo.lg.empty svg { width: 70%; height: 70%; margin-bottom: -4px; }
.photo.xs { width: 26px; height: 26px; border-radius: 50%; font-size: 12px; margin-right: 8px; vertical-align: middle; }
.photo.sm { width: 44px; height: 44px; border-radius: 50%; font-size: 18px; }
.photo.lg { width: 160px; height: 213px; border-radius: 10px; font-size: 40px; border: 1px solid var(--line); }
.card-layout { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: start; }
.photo-box { text-align: center; }
.r-photo { width: 72px; height: 96px; object-fit: cover; border-radius: 6px; border: 2px solid rgba(255,255,255,.25); display: block; margin: 0 0 8px auto; }
.r-hero-r { display: flex; flex-direction: column; align-items: flex-end; }
@media screen and (max-width: 760px) { .card-layout { grid-template-columns: 1fr; } .photo-box { margin: 0 auto; } }

.kind { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.kind.nurse { background: #e0f2fe; color: #075985; }
.kind.out { background: #fef3c7; color: #92400e; }

/* 태그 · 배지 · 경고 카드 */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags.small { gap: 4px; }
.tag { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--muted); font-weight: 600; font-size: 13px; cursor: pointer; }
.tag:disabled { cursor: default; }
.tag:not(:disabled):hover { border-color: var(--ink); color: var(--ink); }
.tag.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tag.on.warn { background: var(--bad); border-color: var(--bad); }
.tags.small .tag { padding: 2px 9px; font-size: 11.5px; }
.tags .tag:disabled:not(.on) { display: none; }
.edit-on .tags .tag { display: inline-block; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; margin-right: 4px; }
.badge.warn { background: #fee2e2; color: var(--bad); }
.badge.med { background: #fef3c7; color: #92400e; }
.alert-card { border-color: #fca5a5; box-shadow: inset 4px 0 0 var(--bad); }
.form label > select { padding: 8px 10px; }
select.cell { width: 100%; border: 1px solid transparent; background: transparent; padding: 4px; border-radius: 5px; }
.edit-on select.cell { border-color: #e8ecf1; background: #fff; }

/* 벌점 */
.dm-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.dm-score { display: flex; flex-direction: column; align-items: center; padding: 10px 22px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); min-width: 130px; }
.dm-score small { font-size: 11px; color: var(--muted); font-weight: 600; }
.dm-score b { font-size: 40px; font-weight: 900; line-height: 1.1; letter-spacing: -1px; }
.dm-score span { font-size: 12px; color: var(--muted); }
.dm-score.danger { background: #fee2e2; border-color: #fca5a5; } .dm-score.danger b { color: var(--bad); }
.dm-score.warn { background: #fef3c7; border-color: #fcd34d; } .dm-score.warn b { color: #b45309; }
.dm-info { flex: 1; min-width: 220px; }
.dm-info .hint { margin: 6px 0 0; }
.dm-warn { color: #b45309; font-weight: 800; }
details.card summary { list-style: none; }
details.card summary::before { content: '▸ '; } details.card[open] summary::before { content: '▾ '; }

.dc-item { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
.dc-item.on { border-color: #fca5a5; background: #fff7f7; }
.dc-item .meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.dc-item .meta .spacer { flex: 1; }
.dc-item p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; }

.mates { font-size: 12px; color: var(--ink-2); font-weight: 500; margin-top: 2px; }

/* 상담 */
.counsel-item { border-left: 3px solid var(--line-2); padding: 6px 14px; margin-bottom: 12px; }
.counsel-item .meta { font-size: 12px; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.counsel-item .meta b { color: var(--ink); }
.counsel-item .meta .spacer { flex: 1; }
.counsel-item p { margin: 4px 0 0; white-space: pre-wrap; }

/* 이력 */
.hist-item { display: grid; grid-template-columns: 130px 90px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.hist-item .t { color: var(--muted); }
.hist-item .e { font-weight: 700; }

/* 토스트 / 모달 */
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
#toast div { background: var(--ink); color: #fff; padding: 9px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 8px 20px rgba(0,0,0,.18); animation: fade 3.5s forwards; }
#toast div.err { background: var(--bad); }
@keyframes fade { 0% { opacity: 0; transform: translateY(8px);} 8% { opacity: 1; transform: none;} 85% { opacity: 1;} 100% { opacity: 0;} }
.modal { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-box { background: #fff; border-radius: 14px; padding: 24px; width: min(960px, 100%); max-height: 92vh; overflow: auto; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.modal-box h3 { margin: 0 0 12px; font-size: 17px; letter-spacing: -.3px; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.drop { border: 1.5px dashed var(--line-2); border-radius: 10px; padding: 26px; text-align: center; color: var(--muted); cursor: pointer; }
.drop:hover { border-color: var(--brand); background: var(--brand-tint); }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.thumbs img { height: 90px; border-radius: 6px; border: 1px solid var(--line); }

/* ---------- 성적 리포트 (성적제안서) ---------- */
.r-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; background: var(--ink); color: #fff; margin: -40px -44px 0; padding: 30px 44px 26px; border-bottom: 4px solid var(--brand); }
.r-hero .r-academy { color: #cbd5e1; font-size: 12px; font-weight: 600; }
.r-hero .r-academy img { height: 16px; filter: brightness(0) invert(1); opacity: .9; }
.r-hero .r-name { color: #fff; font-size: 38px; margin-top: 8px; letter-spacing: -1px; }
.r-hero .r-name small { color: #94a3b8; }
.r-hero-r { text-align: right; }
.r-hero-r .lbl { font-size: 12px; color: #94a3b8; font-weight: 600; }
.r-hero-r .val { font-size: 26px; font-weight: 800; color: var(--brand); letter-spacing: -.5px; line-height: 1.2; margin: 2px 0; }
.r-multi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.r-multi.big { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.r-mini { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px 6px; background: #fff; box-shadow: inset 0 3px 0 var(--sjc); }
.r-mini .mh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.r-mini .mt { font-size: 13px; font-weight: 800; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.r-mini .mt i { width: 9px; height: 9px; border-radius: 2px; background: var(--sjc); display: inline-block; }
.r-mini .mg { font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.r-mini .mg small { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 1px; }
.r-mini .mc { height: 160px; margin-top: 2px; }
.r-multi.big .r-mini .mc { height: 220px; }

.proposal-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.proposal-book { display: flex; flex-direction: column; gap: 28px; align-items: center; }
.report {
  width: 920px; max-width: 100%; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; padding: 40px 44px 32px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}
.r-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.r-academy { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); letter-spacing: -.1px; }
.r-academy img { height: 18px; }
.r-title { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 10px; letter-spacing: .4px; text-transform: uppercase; }
.r-name { font-size: 30px; font-weight: 800; letter-spacing: -.8px; line-height: 1.15; margin-top: 2px; }
.r-name small { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 8px; letter-spacing: 0; }
.r-exam { text-align: right; }
.r-exam .lbl { font-size: 12px; color: var(--muted); font-weight: 600; }
.r-exam .val { font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.r-exam .val b { color: var(--brand); }
.r-note { margin-top: 22px; padding: 14px 18px; background: var(--brand-tint); border: 1px solid #fcd9c8; border-left: 5px solid var(--brand); border-radius: 0 8px 8px 0; font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.65; min-height: 20px; }
.r-sec { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 12px; padding-left: 12px; border-left: 4px solid var(--brand); }
.r-sec h3 { font-size: 17px; font-weight: 800; margin: 0; letter-spacing: -.4px; }
.r-sec span { font-size: 12px; color: var(--muted); }
.r-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.r-tile { border: 1px solid var(--line-2); border-radius: 8px; padding: 12px 12px 10px; box-shadow: inset 0 4px 0 var(--sjc); background: var(--surface-2); }
.r-tile .t { font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-tile .g { font-size: 34px; font-weight: 900; letter-spacing: -1.2px; line-height: 1.1; margin-top: 6px; }
.r-tile .g small { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.r-tile .s { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.r-tile .d { font-size: 11.5px; font-weight: 700; margin-top: 6px; line-height: 1.5; }
.r-tile .d .up { color: var(--good); } .r-tile .d .down { color: var(--bad); } .r-tile .d .same { color: var(--faint); }
.r-tile.empty { opacity: .45; }
table.rt { border-collapse: collapse; width: 100%; font-size: 13px; }
table.rt th, table.rt td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--line); }
table.rt thead th { font-size: 12px; color: var(--ink-2); font-weight: 700; border-bottom: 1.5px solid var(--ink); background: transparent; }
table.rt thead th i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--sjc); margin-right: 5px; vertical-align: 0; }
table.rt td:first-child, table.rt th:first-child { text-align: left; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
table.rt tr.hl td { background: var(--brand-tint); }
table.rt.chg td { vertical-align: top; padding: 9px 6px; }
table.rt.chg td:first-child { padding-top: 12px; }
table.rt.chg td:first-child i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--sjc); margin-right: 6px; }
table.rt.chg th.hl, table.rt.chg td.hl { background: var(--brand-tint); }
table.rt.chg th.hl { color: var(--brand-dark); }
table.rt.chg .cg { font-size: 13px; display: flex; align-items: baseline; justify-content: center; gap: 2px; }
table.rt.chg .cg b { font-size: 22px; font-weight: 900; letter-spacing: -.5px; }
table.rt.chg .cg small { font-size: 11px; color: var(--muted); font-weight: 600; margin-right: 4px; }
table.rt.chg .cs { font-size: 11.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
table.rt.chg .cs b { color: var(--ink); font-weight: 700; }
table.rt.chg em { font-style: normal; font-weight: 800; font-size: 11px; margin-left: 4px; }
table.rt.chg em.up { color: var(--good); } table.rt.chg em.down { color: var(--bad); } table.rt.chg em.same { color: var(--faint); }
table.rt .gv { font-size: 15px; font-weight: 800; }
table.rt .gv small { font-weight: 600; font-size: 11px; color: var(--muted); }
table.rt .sub { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
table.rt .sel { display: block; font-size: 11px; color: var(--faint); }
table.rt.compact { margin-top: 12px; }
table.rt.compact th, table.rt.compact td { padding: 6px 5px; font-size: 12px; white-space: nowrap; }
table.rt.compact th small { display: block; font-size: 10px; color: var(--muted); font-weight: 600; }
.r-memo { font-size: 14px; line-height: 1.85; white-space: pre-wrap; color: var(--ink); min-height: 100px; padding: 16px 20px; border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; }
.r-memo.ph, .r-note.ph { color: var(--faint); }
.r-foot { display: flex; justify-content: space-between; margin-top: 30px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--faint); }
[contenteditable=true] { outline: 1px dashed var(--line-2); }
[contenteditable=true]:hover { outline-color: var(--brand); }
[contenteditable=true]:focus { outline: 2px solid var(--brand); background: #fffdfb; }
.ai-row { display: flex; gap: 6px; justify-content: flex-end; margin: -6px 0 8px; }

@media print {
  @page { size: A4 portrait; margin: 10mm 11mm; }
  body { background: #fff; }
  #topbar, .proposal-toolbar, #toast, .modal, .no-print { display: none !important; }
  #app { padding: 0; max-width: none; }
  .proposal-book { gap: 0; }
  .report { width: 100%; box-shadow: none; border: 0; border-radius: 0; padding: 0; break-after: page; page-break-after: always; }
  .report:last-child { break-after: auto; page-break-after: auto; }
  [contenteditable=true] { outline: none; }
  .r-hero { margin: 0; padding: 20px 24px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .r-mini, .r-tile, .r-note, .r-memo, .r-tiles, table.rt tr, table.rt thead { break-inside: avoid; page-break-inside: avoid; }
  table.rt thead { display: table-header-group; }
  .r-sec { break-after: avoid; page-break-after: avoid; }
  .r-multi { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .r-tiles { grid-template-columns: repeat(6, 1fr); }
  .r-tile .g { font-size: 26px; }
  canvas { max-width: 100%; }
  .r-mini .mc { height: 128px; }
  .r-multi { margin-bottom: 4px; }
  .r-sec { margin: 18px 0 8px; }
  .r-hero .r-name { font-size: 30px; }
  .r-hero { padding: 16px 22px; }
  .r-tile, .r-note, .r-mini, table.rt tr.hl td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .r-tiles { gap: 6px; }
}
@media screen and (max-width: 760px) {
  #topbar { padding: 0 12px; gap: 8px; }
  .brand span { display: none; }
  #app { padding: 12px; }
  .report { padding: 22px 18px; }
  .r-tiles { grid-template-columns: repeat(3, 1fr); }
  .r-multi { grid-template-columns: 1fr 1fr; }
  .r-hero { margin: -22px -18px 0; padding: 20px 18px; }
  .r-name { font-size: 24px; }
  .hist-item { grid-template-columns: 1fr; gap: 2px; }
}