/* UI_GUIDE.md v2 "채점 노트"의 CSS 블록을 그대로 모은 공용 스타일. Quasar 기본 스타일을 덮어쓴다.
   화면별 추가 스타일은 각 HTML의 <style>에 둔다. 이 파일은 가이드가 바뀔 때만 고친다. */

/* 1. 색과 글꼴 */
:root{
  --paper:#FFFFFF;      /* 바탕 */
  --graphite:#2A2C33;   /* 글자, 진한 버튼 */
  --sub:#555A66;        /* 보조 글자 (흰 바탕 대비 OK) */
  --pencil:#FFCB2E;     /* 노란 머리띠, 올리기 버튼 */
  --today:#FFF1BF;      /* 오늘 칸 */
  --redpen:#E03A2F;     /* 채점 표시 (그래픽 전용) */
  --redtext:#C42B21;    /* 빨간 글자 (일요일 등 작은 글씨) */
  --marker:#A8F0CF;     /* 형광펜: 모은 용돈 밑줄 */
  --eraser:#F7C3CC;     /* 지우개 분홍: 쉬는 날 */
  --grid:#8FB0D6;       /* 원고지·채점표 칸 선 */
  --rule:#CFDCEC;       /* 공책 줄 (목록 구분선) */
  --head:#F2F6FB;       /* 요일 줄 바탕 */
  --hand:"Gaegu",cursive;        /* 숫자, 제목, 응원 한 줄 (굵게 700) */
  --text:"Gothic A1",sans-serif; /* 본문, 버튼, 금액 내역 */
}
body{margin:0;background:var(--paper);color:var(--graphite);font-family:var(--text)}
.hand{font-family:var(--hand);font-weight:700}
.sub{color:var(--sub)}
.marker{background:linear-gradient(transparent 55%,var(--marker) 55%,var(--marker) 92%,transparent 92%);padding:0 2px}
.rule-row{border-bottom:1.5px solid var(--rule)}

/* 2. 채점 표시 (SVG, 그대로 복사해서 쓴다) */
/* 바를 정 획: 그날 쓴 사람 수만큼 (최대 2개, 3명이면 동그라미로 대체) */
.ticks{display:flex;gap:3px;height:12px;align-items:flex-end}
.ticks span{width:2.5px;height:12px;border-radius:2px;background:var(--redpen);transform:rotate(8deg)}
/* 쉬는 날 */
.cell.rest{background:var(--eraser)}

/* 3. 공통 머리띠 (노란 연필 띠) */
.band{background:var(--pencil);padding:26px 20px 16px}
.band h1{margin:0;font-size:40px;line-height:1.05}
.band .date{font-size:14px;font-weight:600}

/* 4-1. 우리 채점표 (달력) */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1.5px solid var(--grid);border-left:1.5px solid var(--grid)}
.cal>*{border-right:1.5px solid var(--grid);border-bottom:1.5px solid var(--grid)}
.cal .wd{padding:4px 0;text-align:center;font-size:12px;font-weight:600;color:var(--sub);background:var(--head)}
.cal .wd.sun{color:var(--redtext)}
.cal .cell{height:54px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.cal .cell .num{font-family:var(--hand);font-weight:700;font-size:20px;line-height:1}
.cal .cell.future .num{color:#9AA0AE}
.cal .cell.today{background:var(--today)}
.cal .cell .today-tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--graphite);color:#fff;font-size:10px;font-weight:600;padding:1px 6px;border-radius:8px}

/* 4-3. 사람별 줄 */
.person{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:12px 0;border-bottom:1.5px solid var(--rule)}
.person .badge{width:44px;height:44px;border-radius:50%;position:relative;display:grid;place-items:center;background:var(--head);font-family:var(--hand);font-weight:700;font-size:20px}
.person.done .badge{background:var(--today)}          /* 오늘 쓴 사람: 배지에 동그라미 SVG 겹치기 */
.person .name{font-family:var(--hand);font-weight:700;font-size:24px;line-height:1.1}
.person .money{font-family:var(--hand);font-weight:700;font-size:22px}  /* .marker 밑줄 */
.person .write{width:44px;height:44px;border-radius:50%;background:var(--graphite);color:#fff;display:grid;place-items:center}

/* 5-3. 올리기 버튼 (연필 모양) */
.pencil-btn{display:grid;grid-template-columns:40px minmax(0,1fr) 14px 34px;height:72px;border:0;padding:0;background:transparent}
.pencil-btn .body{background:var(--pencil);display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:18px;color:var(--graphite)}
.pencil-btn .ferrule{background:#C9CDD6}
.pencil-btn .eraser{background:var(--eraser);border-radius:0 12px 12px 0}

/* 5-4. 이번 달 채점표 */
.sheet{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1.5px solid var(--grid);border-left:1.5px solid var(--grid)}
.sheet .cell{aspect-ratio:1;position:relative;border-right:1.5px solid var(--grid);border-bottom:1.5px solid var(--grid);display:flex;flex-direction:column;align-items:center;justify-content:center}
.sheet .no{font-family:var(--hand);font-weight:700;font-size:22px;line-height:1}
.sheet .date{font-size:10px;color:var(--sub)}
.sheet .cell.today{background:var(--today)} .sheet .cell.rest{background:var(--eraser)}