/* 공개 홈페이지: '오답 노트' 세계. 책상 위에 노트 종이와 포스트잇을 놓고, 네이비 잉크로 쓰고, 채점은 빨간 펜으로 한다.
   값은 아래 --site-* 토큰과 brand.css(네이비·초점색·글꼴)만 쓴다. 업무 화면 tokens.css와 같은 이름을 두지 않는다. 정책: docs/design-site.md */
:root {
  /* 재료 */
  --site-desk: #e4e9f0;                 /* 책상: 페이지 바탕 */
  --site-paper: #ffffff;                /* 노트 종이 */
  --site-rule: #e6ebf2;                 /* 노트 종이(.sheet)의 괘선. 흰 종이 위 표·시간표의 줄 구분선도 이 색이다 */
  --site-margin: rgb(208 52 63 / 55%);  /* 종이 왼쪽의 빨간 여백선 */
  --site-ink: var(--navy-900);          /* 네이비 잉크: 제목, 주요 버튼, 머리글 */
  --site-pen: #d0343f;                  /* 채점하는 빨간 펜: 화면당 한두 곳. 글자는 흰 종이 위에서만(4.9:1, 책상·포스트잇 위는 4.1:1) */
  --site-pen-strong: #bc2a35;           /* 포스트잇·책상 위에 빨간 펜으로 쓰는 글자(포스트잇 4.9:1, 책상 4.9:1) */
  --site-student: #1f3c88;              /* 학생이 쓴 글씨 */
  --site-highlight: #ffe066;            /* 형광 노랑: 바탕으로만(글자색으로 쓰지 않는다) */
  --site-sticky: #ffe98f;               /* 포스트잇: 바탕으로만 */
  --site-tape: rgb(255 255 255 / 55%);  /* 포스트잇을 붙인 반투명 테이프 */
  --site-sticky-edge: #857430;          /* 포스트잇 위 입력란·선택지 테두리(포스트잇 3.8:1) */
  --site-sticky-field: rgb(255 255 255 / 70%); /* 포스트잇 위 입력란·선택지·동의 문구 바탕 */
  --site-tint: #f3f6fb;                 /* 노트 종이 위 GGSL 칸 바탕 */

  /* 글자. 본문·흐린 글자는 책상·종이·포스트잇 어디서나 4.5:1 이상이다. */
  --site-text: #1c2738;
  --site-text-body: #3a4556;
  --site-text-muted: #5a6475;
  --site-text-on-ink: #c3cee0;
  --site-edge: #c5cedb;                 /* 책상 위 구분선, 흰 종이 위 화면 사진 테두리 */
  --site-control: #77818f;              /* 흰 종이·책상 위 입력란·선택지 테두리: 흰 종이 3.9:1, 책상 3.2:1 */
  --site-warning: #85570c;              /* 미리보기 안내 */
  --site-warning-bg: #fff5df;
  /* 시간표 수리논술: 보라. 빨간 펜과 겹치지 않게 했다(글자 9.2:1, 테두리 흰 종이 7.4:1). */
  --site-essay: #6b3fa0;
  --site-essay-bg: #f0e9f9;
  --site-essay-text: #4b2a7f;

  /* 크기 */
  --site-line: 2.125rem;                /* 괘선 간격 34px. 종이 안 글줄 높이와 같다 */
  --site-sheet-gutter: 3.75rem;         /* 여백선 위치 60px(휴대폰 26px) */
  --site-text-xs: 0.75rem;
  --site-text-sm: 0.8125rem;
  --site-text-md: 0.875rem;
  --site-text-base: 1rem;
  --site-text-lg: 1.125rem;
  --site-text-xl: 1.25rem;
  --site-text-2xl: 1.625rem;
  --site-text-3xl: 2.25rem;
  --site-weight-regular: 400;
  --site-weight-semibold: 600;
  --site-weight-bold: 700;
  --site-weight-heading: 800;           /* 제목은 Pretendard 800, 두 줄 이내 */
  --site-leading-heading: 1.25;
  --site-leading-body: 1.7;

  --site-space-1: 0.25rem;
  --site-space-2: 0.5rem;
  --site-space-3: 0.75rem;
  --site-space-4: 1rem;
  --site-space-5: 1.25rem;
  --site-space-6: 1.5rem;
  --site-space-8: 2rem;
  --site-space-10: 2.5rem;
  --site-space-16: 4rem;
  --site-space-20: 5rem;

  --site-radius-paper: 3px;
  --site-radius-sticky: 2px;
  --site-radius-field: 6px;
  --site-radius-control: 8px;
  --site-radius-full: 999px;
  --site-shadow-paper: 0 1px 2px rgb(11 32 68 / 6%), 0 12px 32px rgb(11 32 68 / 8%);
  --site-shadow-sticky: 0 2px 3px rgb(11 32 68 / 8%), 0 14px 26px rgb(11 32 68 / 14%);
  --site-shadow-raised: 0 16px 48px rgb(6 22 48 / 12%);
  --site-target-min: 2.75rem;
  --site-z-navigation: 10;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--site-desk); }
body.site { margin: 0; background: var(--site-desk); color: var(--site-text); font-family: var(--font-brand); font-size: var(--site-text-base); line-height: var(--site-leading-body); word-break: keep-all; overflow-wrap: anywhere; }
.site a { color: inherit; }
.site img { max-width: 100%; }
.site h1, .site h2, .site h3 { color: var(--site-ink); font-weight: var(--site-weight-heading); line-height: var(--site-leading-heading); letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
.site h3 { font-weight: var(--site-weight-bold); letter-spacing: -0.01em; }
.site :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.site-in { max-width: 67.5rem; margin: 0 auto; padding: 0 var(--site-space-8); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 미리보기 띠 */
.site-preview { background: var(--site-warning-bg); color: var(--site-warning); font-size: var(--site-text-sm); font-weight: var(--site-weight-semibold); text-align: center; padding: var(--site-space-2) var(--site-space-4); }

/* 버튼: 네이비 잉크(주요), 테두리(보조), 형광 노랑(머리글의 상담 신청) */
.site-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--site-target-min); padding: 0 var(--site-space-5); border: 0; border-radius: var(--site-radius-control); font: inherit; font-size: 0.9375rem; font-weight: var(--site-weight-heading); line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
.site-btn.primary { background: var(--site-ink); color: var(--site-paper); }
.site-btn.primary:hover { background: var(--navy-800); }
.site-btn.outline { background: transparent; color: var(--site-ink); box-shadow: inset 0 0 0 1.5px var(--site-ink); }
.site-btn.outline:hover { background: var(--navy-100); }
.site-btn.highlight { background: var(--site-highlight); color: var(--navy-950); }
.site-btn.highlight:hover { background: var(--site-sticky); }
.site-btn:disabled { opacity: 0.6; cursor: progress; }

/* 머리글: 네이비 바 */
.site-header { background: var(--site-ink); color: var(--site-paper); }
.site-bar { display: flex; align-items: center; gap: var(--site-space-6); min-height: 4rem; }
.site-brand { display: flex; align-items: center; gap: var(--site-space-2); font-size: 1.0625rem; font-weight: var(--site-weight-heading); text-decoration: none; }
.site-brand img { width: 2rem; height: 2rem; border-radius: 6px; }
.site-nav { display: flex; gap: var(--site-space-5); flex: 1; font-size: var(--site-text-md); color: var(--site-text-on-ink); }
.site-nav a { display: flex; align-items: center; min-height: var(--site-target-min); text-decoration: none; }
.site-nav a:hover { color: var(--site-paper); }
.site-nav a[aria-current="page"] { color: var(--site-paper); font-weight: var(--site-weight-bold); box-shadow: inset 0 -2px var(--site-paper); }
.site-actions { display: flex; align-items: center; gap: var(--site-space-4); }
/* 로그인은 메뉴와 같은 흐린 글자의 링크다(.site a의 색 상속보다 앞서도록 .site를 붙인다). */
.site .site-login { display: flex; align-items: center; min-height: var(--site-target-min); font-size: var(--site-text-md); color: var(--site-text-on-ink); text-decoration: none; }
.site .site-login:hover { color: var(--site-paper); text-decoration: underline; }
.site-menu { display: none; margin-left: auto; position: relative; }
.site-menu summary { list-style: none; cursor: pointer; min-height: var(--site-target-min); display: flex; align-items: center; padding: 0 var(--site-space-4); border: 1px solid rgb(255 255 255 / 30%); border-radius: var(--site-radius-control); font-size: var(--site-text-md); font-weight: var(--site-weight-bold); }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu nav { position: absolute; right: 0; top: calc(100% + var(--site-space-2)); z-index: var(--site-z-navigation); display: grid; min-width: 12rem; background: var(--site-paper); color: var(--site-text); border-radius: var(--site-radius-control); box-shadow: var(--site-shadow-raised); padding: var(--site-space-2); }
.site-menu nav a { padding: var(--site-space-3); text-decoration: none; border-radius: 6px; }
.site-menu nav a[aria-current="page"] { background: var(--navy-100); color: var(--site-ink); font-weight: var(--site-weight-bold); }

/* 재료: 책상, 노트 종이, 포스트잇, 빨간 펜 */
.desk { background: var(--site-desk); padding-bottom: var(--site-space-16); }
/* 줄 쳐진 노트 종이. 괘선은 글줄(--site-line)의 바닥에 맞춰 긋고, 왼쪽에 빨간 여백선을 긋는다. */
.sheet { position: relative; background-color: var(--site-paper); background-image: linear-gradient(to top, var(--site-rule) 1px, transparent 1px); background-size: 100% var(--site-line); background-position: 0 var(--site-line); border-radius: var(--site-radius-paper); box-shadow: var(--site-shadow-paper); padding: var(--site-line) var(--site-space-8) var(--site-line) calc(var(--site-sheet-gutter) + var(--site-space-6)); line-height: var(--site-line); }
.sheet::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--site-sheet-gutter); width: 2px; background: var(--site-margin); }
.sheet p, .sheet ul, .sheet ol, .sheet dl { margin: 0; }
/* 괘선 없는 흰 종이: 노트 연출 없이 글과 표를 얹는다. */
.paper { background: var(--site-paper); border-radius: var(--site-radius-paper); box-shadow: var(--site-shadow-paper); padding: var(--site-space-10); }
/* 노란 포스트잇: 살짝 기울여 반투명 테이프로 붙인다. 글자는 잉크색, 흐린 글자도 4.9:1이다. */
.sticky { position: relative; background: var(--site-sticky); color: var(--site-text); border-radius: var(--site-radius-sticky); padding: var(--site-space-6) var(--site-space-5) var(--site-space-5); box-shadow: var(--site-shadow-sticky); transform: rotate(1.2deg); }
.sticky::before { content: ""; position: absolute; left: 50%; top: -0.625rem; width: 4.625rem; height: 1.25rem; transform: translateX(-50%) rotate(-2deg); background: var(--site-tape); }
/* 빨간 펜 표시(예: 문제 앞 'Q.'). 종이 안에서는 그 글줄 높이 그대로 여백선 왼쪽 칸에 쓴다. */
.pen-mark { color: var(--site-pen); font-weight: 900; }
.sheet .pen-mark { position: absolute; left: 0; width: var(--site-sheet-gutter); text-align: center; font-size: 1.25rem; line-height: var(--site-line); }

/* 포스트잇 위 입력란과 선택지(홈 '선생님께', 상담 신청). 테두리는 포스트잇과 3:1 이상이다. */
.sticky select, .sticky textarea, .sticky input:not([type=radio]):not([type=checkbox]):not([type=hidden]) { width: 100%; min-height: var(--site-target-min); padding: var(--site-space-2) var(--site-space-3); font: inherit; font-size: var(--site-text-base); font-weight: var(--site-weight-regular); color: var(--site-text); background: var(--site-sticky-field); border: 1.5px solid var(--site-sticky-edge); border-radius: var(--site-radius-field); }
.sticky input[type=radio], .sticky input[type=checkbox] { accent-color: var(--site-ink); }
.sticky ::placeholder { color: var(--site-text-muted); }
.sticky-reasons { min-width: 0; margin: 0; padding: 0; border: 0; }
.sticky-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
/* 선택지는 체크박스다. 상자는 투명하게 칩 전체를 덮어 눌리는 곳이 칩 크기와 같다. */
.sticky-chip { position: relative; display: flex; }
.sticky-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sticky-chip span { display: flex; align-items: center; min-height: var(--site-target-min); padding: 0 var(--site-space-3); border: 1.5px solid var(--site-sticky-edge); border-radius: var(--site-radius-full); background: var(--site-sticky-field); font-size: var(--site-text-sm); font-weight: var(--site-weight-semibold); line-height: 1.3; }
.sticky-chip input:checked + span { border-color: var(--site-pen); background: var(--site-paper); color: var(--site-pen); font-weight: var(--site-weight-heading); }
/* 고른 칩은 색만으로 알리지 않는다. 앞에 체크 표시를 그린다(.note-check와 같은 방법). */
.sticky-chip input:checked + span::before { content: ""; flex: none; width: 0.3125rem; height: 0.5625rem; margin: 0 var(--site-space-2) 0.125rem 0.125rem; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); }
.sticky-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 바닥글과 휴대폰 고정 버튼 */
.site-footer { background: var(--navy-950); color: var(--site-text-on-ink); font-size: var(--site-text-sm); padding: var(--site-space-8) 0; }
.site-footer p { margin: 0 0 var(--site-space-1); }
.site-footer b { color: var(--site-paper); }
.site-footer a:hover { color: var(--site-paper); }
.site-dock { display: none; }

/* 글과 목록: 책상과 흰 종이 위의 본문, 흐린 글자, 링크, 목록 */
.site-preview-note { color: var(--site-warning); font-size: var(--site-text-sm); margin: var(--site-space-2) 0 0; }
.site-lead { color: var(--site-text-body); max-width: 40em; margin: 0; }
.site-muted { color: var(--site-text-muted); }
.site-link { color: var(--site-ink); }
.site-note { font-size: var(--site-text-sm); color: var(--site-text-muted); }
/* 나란한 단: 단마다 네이비 윗줄과 소제목 */
.home-cols, .site-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--site-space-8); }
.home-cols { margin-top: var(--site-space-6); }
.home-cols > div, .site-cols > div { border-top: 2px solid var(--site-ink); padding-top: var(--site-space-4); }
.home-cols p, .site-cols p { margin: 0 0 var(--site-space-2); }
.site-cols h3 { margin-bottom: var(--site-space-2); }
.site-cols p { color: var(--site-text-body); }
.site-cols p:last-child { margin-bottom: 0; }
.site-cols .site-dl { grid-template-columns: 2.5rem minmax(0, 1fr); }
/* 줄 목록: 학년·주차, 이름, 내용을 한 줄에. 줄 사이는 흰 종이 위 구분선 */
.site-rows { list-style: none; padding: 0; }
.site-rows li { display: grid; grid-template-columns: 6.5rem 11rem minmax(0, 1fr); gap: var(--site-space-1) var(--site-space-4); padding: var(--site-space-3) 0; border-top: 1px solid var(--site-rule); }
.site-rows li:last-child { border-bottom: 1px solid var(--site-rule); }
.site-rows-2 li { grid-template-columns: 11rem minmax(0, 1fr); }
.site-rows b { color: var(--site-text-muted); font-weight: var(--site-weight-semibold); font-variant-numeric: tabular-nums; }
.site-rows strong { color: var(--site-ink); }
.site-rows span { color: var(--site-text-body); }
.site-list { padding-left: var(--site-space-5); color: var(--site-text-body); }
.site-list li + li { margin-top: var(--site-space-2); }
.site-dl { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--site-space-2) var(--site-space-3); margin: 0; }
.site-dl dt { color: var(--site-text-muted); }
.site-dl dd { margin: 0; }
.site-dl a { overflow-wrap: anywhere; }
/* 페이지 끝의 상담 신청: 책상 위 한 줄 */
.site-end { display: flex; justify-content: space-between; align-items: center; gap: var(--site-space-4); flex-wrap: wrap; margin-top: var(--site-space-8); }
.site-end p { margin: 0; color: var(--site-text-body); }
.site-end div { display: flex; gap: var(--site-space-2); }

/* 페이지 머리: 책상 위에 제목과 소개 한두 문장. 문단 사이는 아래 한 규칙으로만 띄운다. */
.site-page-head { padding: var(--site-space-10) 0 var(--site-space-6); }
.site-page-head > * { margin: 0; }
.site-page-head > * + * { margin-top: var(--site-space-3); }
.site-page-head h1 { font-size: var(--site-text-3xl); letter-spacing: -0.03em; }

/* 구획: 괘선 없는 흰 종이 한 장에 한 구획. 노트 연출(괘선·여백선·빨간 펜)은 홈 첫 화면에서만 한다. */
.site-section + .site-section, .site-section + .site-end { margin-top: var(--site-space-8); }
/* 눈에 띄게 할 구획(교육과정의 중3 겨울방학 특강): 네이비 강조 테두리. 그림자가 아니라 테두리라 고대비 모드에서도 남는다. */
.paper.site-featured { border: 2px solid var(--site-ink); }
.site-section > * { margin: 0; }
.site-section > * + * { margin-top: var(--site-space-4); }
.site-section h2 { font-size: var(--site-text-2xl); }
.site-section h3 { font-size: var(--site-text-lg); }
.site-section > h3 { margin-top: var(--site-space-8); }
.site-section > h2 + h3 { margin-top: var(--site-space-4); }
/* 긴 문서(개인정보처리방침)는 종이 한 장에 여러 조항을 잇는다. */
.site-doc .site-section h2 { font-size: var(--site-text-xl); }
.site-legal { max-width: 48rem; }

/* 표: 흰 종이 위에 평범하게. 좁은 화면에서는 표 안에서만 가로로 민다. */
.site-table-wrap { overflow-x: auto; }
.site-table { width: 100%; border-collapse: collapse; font-size: var(--site-text-md); }
.site-table caption { text-align: left; color: var(--site-text-muted); font-size: var(--site-text-sm); padding: 0 0 var(--site-space-2); }
.site-table th, .site-table td { text-align: left; vertical-align: top; padding: var(--site-space-2) var(--site-space-3); border-bottom: 1px solid var(--site-rule); white-space: nowrap; overflow-wrap: break-word; }
.site-table th:first-child, .site-table td:first-child { padding-left: 0; }
.site-table tbody tr:last-child > * { border-bottom: 0; }
.site-table thead th { color: var(--site-text-muted); font-weight: var(--site-weight-semibold); border-bottom-color: var(--site-edge); }
.site-table tbody th { color: var(--site-ink); font-weight: var(--site-weight-bold); }
.site-table-text td:last-child { white-space: normal; min-width: 16rem; }

/* 홈 첫 화면: 제목, 학생이 쓴 GGSL 노트 한 장, 그 옆에 붙인 '선생님께' 포스트잇. 노트 연출은 여기서만 한다. */
/* 첫 화면 큰 사진: 화면 폭 전체. 문구가 사진 가운데 있어 좁은 화면은 양옆을 잘라 문구 크기를 지킨다. 아래 끝은 책상 바탕으로 번진다. */
.home-banner { position: relative; margin: 0; height: clamp(20rem, 40.625vw, 37.5rem); overflow: hidden; background: #8ab6d6; }
.home-banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.home-banner::after { content: ""; position: absolute; inset: auto 0 0; height: 35%; background: linear-gradient(to bottom, transparent, var(--site-desk)); pointer-events: none; }
.home-hero { padding: var(--site-space-10) 0 var(--site-space-2); }
.site .home-hero h1 { max-width: 12em; font-size: clamp(1.875rem, 1.25rem + 2.5vw, 2.875rem); line-height: 1.16; letter-spacing: -0.035em; }
.home-lead { font-size: var(--site-text-lg); color: var(--site-text-body); max-width: 34em; margin: 0 0 var(--site-space-6); }
.home-hero .home-lead { max-width: 40em; margin: var(--site-space-3) 0 var(--site-space-6); }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--site-space-5); margin: 0; }
.home-link { color: var(--site-ink); font-weight: var(--site-weight-bold); text-decoration: none; }
.home-link:hover { text-decoration: underline; }
.home-table { display: grid; grid-template-columns: minmax(0, 1fr) 18.75rem; align-items: start; }
.home-note-col { min-width: 0; }
/* 예시 노트 칩: 노트 위 책상에 한 줄(휴대폰은 줄을 바꾼다). 고른 칩은 네이비로 채운다. */
.note-picks { display: flex; flex-wrap: wrap; gap: var(--site-space-2); margin: 0 0 var(--site-space-4); }
.note-picks[hidden] { display: none; }
.note-pick { min-height: var(--site-target-min); padding: 0 var(--site-space-4); border: 0; border-radius: var(--site-radius-full); background: var(--site-paper); box-shadow: inset 0 0 0 1px var(--site-control); font: inherit; font-size: var(--site-text-sm); font-weight: var(--site-weight-semibold); color: var(--site-text); cursor: pointer; }
.note-pick:hover { box-shadow: inset 0 0 0 1.5px var(--site-ink); }
.note-pick[aria-pressed="true"] { background: var(--site-ink); color: var(--site-paper); box-shadow: none; font-weight: var(--site-weight-bold); }
.note-pick:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* 노트 아래 GGSL 뜻풀이(원장 검수 문장): 책상 위 본문 글자 */
.home-ggsl-about { max-width: 40em; margin-top: var(--site-space-5); color: var(--site-text-body); }
.home-ggsl-about p { margin: 0; }
.home-ggsl-about p + p { margin-top: var(--site-space-2); }
/* 노트 안의 글은 모두 괘선 한 줄(--site-line) 단위로 놓아 줄 위에 앉힌다. 첫 줄부터 쓴다. */
.sheet.ggsl-note { padding-top: 0; }
.note-meta { display: flex; flex-wrap: wrap; gap: 0 var(--site-space-4); font-size: var(--site-text-sm); font-weight: var(--site-weight-semibold); color: var(--site-text-muted); }
.note-meta b { color: var(--site-text); font-weight: var(--site-weight-bold); }
.note-sample { margin-left: auto; font-weight: var(--site-weight-regular); }
.note-problem { font-weight: var(--site-weight-semibold); }
.note-answer, .note-why { font-size: var(--site-text-sm); font-weight: var(--site-weight-semibold); color: var(--site-text-muted); }
.note-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--site-space-3); }
.note-first, .note-fixed { font-size: 0.9375rem; font-weight: var(--site-weight-bold); }
/* 처음 쓴 답(학생 잉크)을 빨간 펜으로 긋고, 옆에 고친 답을 빨간 펜으로 쓴다. */
.note-first { position: relative; color: var(--site-student); text-decoration: none; }
.note-first::after { content: ""; position: absolute; left: -0.375rem; right: -0.375rem; top: 50%; height: 2.5px; background: var(--site-pen); transform: rotate(-8deg); }
.note-fixed { color: var(--site-pen); }
/* 고대비 모드는 배경과 테두리 색을 시스템 색으로 바꾸므로, 빨간 긋기는 글자 취소선으로, 고른 칩은 굵은 강조색 테두리로 알린다. */
@media (forced-colors: active) {
  .note-first { text-decoration: line-through; }
  .note-first::after { display: none; }
  .sticky-chip span { border-color: ButtonBorder; }
  .sticky-chip input:checked + span { border-color: Highlight; border-width: 3px; padding: 0 calc(var(--site-space-3) - 1.5px); }
  .note-pick { border: 1px solid ButtonBorder; }
  .note-pick[aria-pressed="true"] { border: 3px solid Highlight; }
}
/* GGSL 네 칸. 칸 높이가 괘선 줄 수와 맞도록 안쪽 위아래 여백 없이 쓰고, 칸 사이는 바탕을 짧게 칠해 띄운다. */
.ggsl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--site-space-3); }
.ggsl-cell { padding: 0 var(--site-space-4); background: linear-gradient(var(--site-tint), var(--site-tint)) top / 100% calc(100% - var(--site-space-2)) no-repeat; transition: opacity 0.35s ease-out; }
.ggsl-cell.is-waiting { opacity: 0.12; }
.ggsl dt { display: flex; align-items: baseline; gap: var(--site-space-2); font-size: var(--site-text-sm); font-weight: var(--site-weight-semibold); color: var(--site-text-muted); }
.ggsl dt b { font-size: 1.1875rem; font-weight: 900; line-height: 1; color: var(--site-ink); }
.ggsl dd { margin: 0; font-size: 0.9375rem; font-weight: var(--site-weight-semibold); color: var(--site-student); }
/* 틀린 이유: 앱의 오답 원인 가운데 고른 것 하나에 빨간 펜 동그라미. */
.note-tag, .note-circled { display: inline-block; line-height: 1.5; padding: 0 var(--site-space-2); margin-right: var(--site-space-1); border-radius: var(--site-radius-full); }
.note-tag { background: var(--site-tint); }
.note-circled { border: 2px solid var(--site-pen); border-radius: 46% 54% 50% 50% / 58% 48% 52% 42%; background: var(--site-paper); color: var(--site-pen); font-weight: var(--site-weight-heading); }
.note-pen { color: var(--site-pen); font-weight: var(--site-weight-bold); }
.note-checks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--site-space-1) var(--site-space-5); font-size: var(--site-text-sm); font-weight: var(--site-weight-bold); color: var(--site-pen); }
.note-check::before { content: ""; display: inline-block; width: 0.375rem; height: 0.6875rem; margin: 0 var(--site-space-3) 0.1875rem 0.125rem; border-right: 3px solid var(--site-pen); border-bottom: 3px solid var(--site-pen); transform: rotate(45deg); vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .ggsl-cell { transition: none; } }
/* '선생님께' 포스트잇: 노트 오른쪽 위에 겹쳐 붙인다(휴대폰·태블릿은 노트 아래). */
.home-sticky { z-index: 1; margin: 1.625rem 0 0 -1.125rem; }
.site .home-sticky h2 { font-size: var(--site-text-xl); letter-spacing: -0.02em; margin: 0 0 var(--site-space-1); }
.home-sticky > p { margin: 0; font-size: var(--site-text-sm); line-height: 1.55; color: var(--site-text-body); }
.home-sticky > label, .home-sticky legend { display: block; margin: var(--site-space-4) 0 var(--site-space-1); padding: 0; font-size: var(--site-text-sm); font-weight: var(--site-weight-bold); color: var(--site-text); }
.home-sticky .sticky-reasons { margin-top: var(--site-space-4); }
.home-sticky legend { margin-top: 0; }
/* 빨간 펜 답장. 포스트잇 위라 진한 펜으로 쓴다. 안내 문장은 흐린 글자. */
.home-sticky .sticky-reply { min-height: 4.8em; margin: var(--site-space-5) 0 0; font-size: var(--site-text-sm); line-height: 1.6; color: var(--site-text-muted); }
.home-sticky .sticky-reply.is-reply { color: var(--site-pen-strong); font-weight: var(--site-weight-semibold); }
.home-sticky .site-btn { width: 100%; margin-top: var(--site-space-2); }

/* 홈 아래 구획: 괘선 없는 흰 종이 위에 지금 내용을 그대로 얹는다. */
.home-section { margin-top: var(--site-space-8); }
.site .home-section h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -0.03em; margin: 0 0 var(--site-space-4); }
.site .home-section h3 { font-size: var(--site-text-lg); margin: 0 0 var(--site-space-2); }
.home-section p { color: var(--site-text-body); }
.home-section .home-muted { color: var(--site-text-muted); font-size: var(--site-text-sm); margin: 0 0 var(--site-space-2); }
.home-director { display: grid; gap: var(--site-space-4); }
/* 원장 사진은 종이 아래 끝에 맞춰 허리에서 자른다. 잘린 선이 종이 가장자리와 겹친다. */
.home-principal { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--site-space-8); }
.home-portrait { align-self: end; margin-bottom: calc(-1 * var(--site-space-10)); }
.home-portrait img { display: block; width: 100%; height: 22rem; object-fit: cover; object-position: top; }
.home-vice p { margin: 0; }
.home-facts { margin: var(--site-space-4) 0 0; padding-left: var(--site-space-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--site-space-1) var(--site-space-8); font-size: var(--site-text-md); color: var(--site-text-body); }
.home-facts li::marker { color: var(--site-text-muted); }
.home-facts-1 { grid-template-columns: 1fr; margin-bottom: var(--site-space-5); }
.home-steps { list-style: none; margin: var(--site-space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--site-space-4); }
.home-steps b { display: block; font-size: var(--site-text-2xl); font-weight: var(--site-weight-heading); color: var(--site-ink); }
.home-steps strong { display: block; margin: var(--site-space-1) 0; }
.home-steps span { display: block; font-size: var(--site-text-sm); color: var(--site-text-muted); }
.home-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--site-space-10); align-items: start; }
.home-grades { display: flex; flex-wrap: wrap; gap: var(--site-space-2); margin: var(--site-space-6) 0 var(--site-space-4); }
.home-grades a { display: flex; align-items: center; justify-content: center; gap: var(--site-space-1); min-height: var(--site-target-min); padding: var(--site-space-2) var(--site-space-4); border-radius: var(--site-radius-full); background: var(--site-paper); box-shadow: inset 0 0 0 1px var(--site-control); text-decoration: none; font-size: var(--site-text-md); }
.home-grades small { color: var(--site-text-muted); }
.home-phone { display: flex; justify-content: center; }
.home-phone .site-phone { flex: none; width: 100%; max-width: 17rem; }
/* 블로그 새 글: 종이 한 장 안의 목록 */
.home-posts { list-style: none; margin: 0 0 var(--site-space-4); padding: 0; }
.home-posts li { padding: var(--site-space-2) 0; border-bottom: 1px solid var(--site-rule); }
.home-posts a { color: var(--site-text); font-weight: var(--site-weight-semibold); }
.home-posts small { display: block; color: var(--site-text-muted); font-size: var(--site-text-sm); }

/* 관리 시스템: 구획마다 글(5)과 앱 화면 사진(7) */
.site-who { max-width: 40em; grid-template-columns: 4rem minmax(0, 1fr); }
.site-who dd { color: var(--site-text-body); }
.site-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--site-space-8); align-items: start; }
.site-section.site-feature > * + * { margin-top: 0; }
.site-feature h2 { margin-bottom: var(--site-space-3); }
.site-feature p { margin: 0 0 var(--site-space-3); color: var(--site-text-body); }
.site-feature ul { margin: 0; padding-left: var(--site-space-5); color: var(--site-text-body); }
.site-shot img { display: block; width: 100%; border: 1px solid var(--site-edge); border-radius: var(--site-radius-paper); background: var(--site-paper); }
.site-phones { display: flex; gap: var(--site-space-6); }
/* 두 휴대폰이 7칸 너비 안에서 함께 줄어든다(태블릿 폭에서 가로 스크롤 방지). */
.site-phone { flex: 1 1 0; min-width: 0; max-width: 16.25rem; border: 8px solid var(--site-text); border-radius: 1.75rem; overflow: hidden; background: var(--site-paper); }
.site-phone img { display: block; width: 100%; border: 0; border-radius: 0; }
/* 앱 화면 사진 아래에 시연 데이터라는 표지를 단다(사진 위에 겹치면 화면 내용을 가린다). */
.site-sample { display: block; padding-top: var(--site-space-1); font-size: var(--site-text-xs); color: var(--site-text-muted); text-align: right; }
.site-phone .site-sample { padding: var(--site-space-1) 0; text-align: center; }

/* 공개 시간표: 세로축이 시간인 주간 캘린더(흰 종이) */
.tt-chips, .tt-days { display: flex; gap: var(--site-space-2); flex-wrap: wrap; margin-bottom: var(--site-space-4); }
.tt-chips a, .tt-days a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--site-target-min); padding: 0 var(--site-space-4); border-radius: var(--site-radius-full); background: var(--site-paper); box-shadow: inset 0 0 0 1px var(--site-control); text-decoration: none; font-size: var(--site-text-md); white-space: nowrap; }
.tt-chips a[aria-current="page"], .tt-days a[aria-current="page"] { background: var(--site-ink); box-shadow: none; color: var(--site-paper); font-weight: var(--site-weight-bold); }
.tt-days { display: none; }
.tt-legend { display: flex; gap: var(--site-space-4); font-size: var(--site-text-sm); color: var(--site-text-muted); margin-bottom: var(--site-space-3); }
.tt-legend i { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 3px; margin-right: var(--site-space-1); }
.tt-legend .mid { background: var(--navy-800); } .tt-legend .high { background: var(--focus); } .tt-legend .essay { background: var(--site-essay); }
.tt-empty { padding: var(--site-space-6); color: var(--site-text-body); }
.tt-empty, .tt-cal { background: var(--site-paper); border-radius: var(--site-radius-paper); box-shadow: var(--site-shadow-paper); }
.tt-cal { overflow: hidden; --site-tt-hour: 3rem; }
.tt-head, .tt-body { display: grid; grid-template-columns: 3.25rem repeat(7, minmax(0, 1fr)); }
.tt-head { border-bottom: 1px solid var(--site-rule); }
.tt-head span { text-align: center; padding: var(--site-space-2) 0; font-weight: var(--site-weight-bold); font-size: var(--site-text-md); border-left: 1px solid var(--site-rule); }
.tt-head span:first-child { border-left: 0; }
.tt-head .weekend { color: var(--site-text-muted); }
.tt-body { height: calc(var(--site-tt-hours) * var(--site-tt-hour)); margin-top: var(--site-space-3); }
.tt-axis { position: relative; }
.tt-axis span { position: absolute; right: var(--site-space-2); transform: translateY(-50%); font-size: var(--site-text-xs); color: var(--site-text-muted); font-variant-numeric: tabular-nums; }
.tt-col { position: relative; border-left: 1px solid var(--site-rule); background: repeating-linear-gradient(to bottom, var(--site-rule) 0 1px, transparent 1px var(--site-tt-hour)); }
.tt-ev { position: absolute; overflow: hidden; border-left: 3px solid; border-radius: 4px; padding: var(--site-space-1) var(--site-space-2); font-size: var(--site-text-sm); line-height: 1.3; text-decoration: none; }
.tt-ev b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-weight: var(--site-weight-bold); }
.tt-ev time { display: block; font-size: var(--site-text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; opacity: .85; }
.tt-ev:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tt-ev.mid { background: var(--navy-100); border-color: var(--navy-800); color: var(--site-ink); }
.tt-ev.high { background: #e4ecfa; border-color: var(--focus); color: #1d3f80; }
.tt-ev.essay { background: var(--site-essay-bg); border-color: var(--site-essay); color: var(--site-essay-text); }
.tt-badge { display: inline-block; margin-top: var(--site-space-1); padding: 0 var(--site-space-1); border-radius: 4px; font-size: 0.6875rem; font-weight: var(--site-weight-bold); color: inherit; background: rgb(255 255 255 / 70%); border: 1px solid currentColor; }
.tt-ev.narrow { padding: var(--site-space-1); }
.tt-ev.narrow .tt-badge { display: none; }
.tt-note { margin-top: var(--site-space-4); }
.tt-none { display: none; margin: 0; padding: var(--site-space-6) var(--site-space-4); text-align: center; color: var(--site-text-muted); font-size: var(--site-text-md); }
.tt-call { display: flex; justify-content: space-between; align-items: center; gap: var(--site-space-4); flex-wrap: wrap; margin-top: var(--site-space-4); padding: var(--site-space-5) var(--site-space-6); border-radius: var(--site-radius-control); background: var(--site-ink); color: var(--site-paper); }
.tt-call small { display: block; color: var(--site-text-on-ink); font-size: var(--site-text-sm); }
.tt-call a { text-decoration: none; font-size: var(--site-text-2xl); font-weight: var(--site-weight-heading); font-variant-numeric: tabular-nums; text-align: right; }
.tt-detail { border: 0; border-radius: var(--site-radius-control); padding: var(--site-space-6); width: min(26rem, calc(100vw - 2rem)); box-shadow: var(--site-shadow-raised); color: var(--site-text); background: var(--site-paper); }
.tt-detail::backdrop { background: rgb(6 22 48 / 35%); }
.tt-detail h2 { font-size: var(--site-text-xl); margin-bottom: var(--site-space-3); }
.tt-detail-tags { display: flex; gap: var(--site-space-1); flex-wrap: wrap; margin: 0 0 var(--site-space-2); }
.tt-tag { font-size: var(--site-text-xs); font-weight: var(--site-weight-bold); padding: 2px var(--site-space-2); border-radius: 5px; background: var(--navy-100); color: var(--site-ink); }
.tt-tag.dday { background: var(--site-highlight); color: var(--navy-950); }
.tt-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--site-space-2); margin-top: var(--site-space-5); }
.tt-detail-actions .primary { grid-column: 1 / -1; }
.tt-detail-close { position: absolute; top: var(--site-space-3); right: var(--site-space-3); border: 0; background: transparent; color: var(--site-text-muted); font: inherit; font-size: var(--site-text-sm); min-height: var(--site-target-min); cursor: pointer; }

/* 상담 신청: 홈 '선생님께' 포스트잇과 같은 노란 종이에 쓴다. 긴 양식이라 기울이지 않는다. */
.site-form-page { max-width: 40rem; }
.site-form { display: grid; gap: var(--site-space-4); }
.site-form.sticky { transform: none; padding: var(--site-space-8) var(--site-space-6) var(--site-space-6); }
.site-form > label { display: grid; gap: var(--site-space-1); font-size: var(--site-text-sm); font-weight: var(--site-weight-bold); }
.site-segment legend, .site-form .sticky-reasons legend { display: block; margin-bottom: var(--site-space-1); padding: 0; font-size: var(--site-text-sm); font-weight: var(--site-weight-bold); }
.site-segment { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--site-space-2); }
.site-segment label { display: flex; align-items: center; gap: var(--site-space-2); min-height: var(--site-target-min); padding: 0 var(--site-space-3); border: 1.5px solid var(--site-sticky-edge); border-radius: var(--site-radius-field); background: var(--site-sticky-field); font-size: var(--site-text-md); }
.site-hint { margin: calc(-1 * var(--site-space-3)) 0 0; font-size: var(--site-text-sm); }
.site-consent { background: var(--site-sticky-field); border-radius: var(--site-radius-field); padding: var(--site-space-3) var(--site-space-4); font-size: var(--site-text-sm); color: var(--site-text-body); }
.site-form .site-check { display: flex; align-items: center; gap: var(--site-space-2); min-height: var(--site-target-min); font-size: var(--site-text-md); font-weight: var(--site-weight-bold); }
.site-check input { width: 1.125rem; height: 1.125rem; margin: 0; flex: none; }
.site-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* 신청 완료: 받은 내용을 작은 포스트잇에 */
.site-summary { max-width: 24rem; margin-bottom: var(--site-space-8); }

@media (max-width: 1000px) {
  .home-table { grid-template-columns: minmax(0, 1fr); }
  .home-sticky { width: min(100%, 24rem); margin: var(--site-space-6) var(--site-space-2) 0 auto; }
  .home-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-cols { grid-template-columns: minmax(0, 1fr); gap: var(--site-space-6); }
}

@media (max-width: 760px) {
  :root { --site-sheet-gutter: 1.625rem; }
  .site-in { padding: 0 var(--site-space-4); }
  .site-bar { min-height: 3.5rem; }
  .site-nav, .site-actions { display: none; }
  .site-menu { display: block; }
  .sheet { padding: var(--site-line) var(--site-space-4) var(--site-line) calc(var(--site-sheet-gutter) + var(--site-space-3)); }
  .sheet .pen-mark { font-size: 0.9375rem; }
  .sticky { transform: rotate(-1deg); padding: var(--site-space-5) var(--site-space-4) var(--site-space-4); }
  .site-form.sticky { transform: none; padding: var(--site-space-6) var(--site-space-4) var(--site-space-5); }
  .site-page-head { padding: var(--site-space-8) 0 var(--site-space-5); }
  .site-page-head h1 { font-size: 1.75rem; }
  .paper { padding: var(--site-space-5); }
  .site-section + .site-section, .site-section + .site-end { margin-top: var(--site-space-5); }
  .site-section h2 { font-size: var(--site-text-xl); }
  .home-hero { padding-top: var(--site-space-6); }
  .home-hero .home-lead { font-size: var(--site-text-base); }
  .ggsl { grid-template-columns: minmax(0, 1fr); }
  .note-meta { gap: 0 var(--site-space-3); font-size: var(--site-text-xs); }
  .home-sticky { width: auto; margin: var(--site-space-5) var(--site-space-1) 0; }
  .home-principal, .home-split, .home-cols { grid-template-columns: minmax(0, 1fr); }
  .home-principal, .home-split, .home-cols { gap: var(--site-space-6); }
  .home-portrait { justify-self: center; width: 12rem; margin-bottom: calc(-1 * var(--site-space-5)); }
  .home-portrait img { height: 15rem; }
  .home-facts { grid-template-columns: 1fr; }
  .home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-section { margin-top: var(--site-space-5); }
  /* 줄 목록은 학년·주차와 이름을 한 줄에, 내용을 그 아래에 */
  .site-rows li, .site-rows-2 li { grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--site-space-3); }
  .site-rows li > span { grid-column: 1 / -1; }
  /* 표는 낱말 단위로 줄을 바꿔 휴대폰 폭 안에 든다. */
  .site-table th, .site-table td { white-space: normal; padding: var(--site-space-2); }
  .site-table-text td:last-child { min-width: 0; }
  .site-feature { grid-template-columns: 1fr; gap: var(--site-space-4); }
  .site-phones { justify-content: center; }
  .site-phone { flex: none; width: 13.75rem; }
  .site-phone + .site-phone { display: none; }
  .tt-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--site-space-4)); padding-right: var(--site-space-4); }
  .tt-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--site-space-1); }
  .tt-days a { padding: 0; border-radius: 6px; }
  .tt-head { display: none; }
  .tt-head, .tt-body { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .tt-col { display: none; }
  .tt-col.is-day { display: block; }
  .tt-col.is-day .tt-none { display: block; }
  .tt-cal { --site-tt-hour: 3.5rem; }
  .tt-ev { font-size: var(--site-text-md); }
  .tt-call a { font-size: var(--site-text-xl); text-align: left; }
  .tt-detail { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: var(--site-radius-control) var(--site-radius-control) 0 0; }
  /* 고정 버튼이 바닥글 끝을 가리지 않게 그 높이만큼 비운다. */
  .site-footer { padding-bottom: calc(var(--site-space-20) + var(--site-space-4)); }
  .site-dock { display: flex; gap: var(--site-space-2); position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--site-z-navigation); padding: var(--site-space-2) var(--site-space-3) calc(var(--site-space-3) + env(safe-area-inset-bottom)); background: var(--site-paper); border-top: 1px solid var(--site-edge); }
  .site-dock .site-btn { flex: 1; }
  .site-dock .site-btn.primary { flex: 1.5; }
}