@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@600;900&display=swap");
/* ============================================================================
   sproof-edit.css — 학교생활 끝판왕(학생부끝판왕) 홈 화면 지면 교정 (2026-08-05)
   ----------------------------------------------------------------------------
   회장님 지적: 「디자인이 여전히 AI스럽고 별로다」. 수학 사이트에서 실측한 처방
   (DESIGN-CANON.md)을 이 사이트의 홈 화면에 같은 방식으로 적용한다.

   실측(고치기 전, #v_home 기준, 1280px):
     · 상자(그림자+테두리+모서리) 21개 — 전부 같은 판이었다.
     · 표제(h2) 7개, 전부 같은 스타일(24px/750 산세리프) — 위계가 크기조차 아니었다.
     · 색 5계열(남색 #143A6B · 코럴 #E2431F · 파랑 #2E5FD0 · 초록 #0E7A50 · 금색 #E0A100)
       + 진로검사 판의 인디고 그라디언트(#1B4E86→#12365F→#0E2A50, 단추 #D8451F→#C03A16).
     · 이모지 19개(카테고리 아이콘 6종 × 반복 + 🚀 2 + 화살표).

   울타리: 이 사이트는 SPA 한 페이지에 모든 화면(#v_home,#v_shelf,#v_act…)이 들어있고
   header/nav 는 화면 전환과 무관하게 공용이다. 수학의 body.home-page 에 대응하는
   자리가 없으므로 **#v_home** 하위로만 규칙을 건다. header/nav 는 손대지 않는다.

   지키는 것:
     · 이 파일 말고는 어떤 CSS 바이트도 고치지 않는다. index.html 도 <link> 한 줄만.
     · 배경색을 새로 칠하는 자리(진로검사 판)만 그 위 글자색까지 같이 정하고
       대비를 계산해 적었다(Chromium 실측, 별도 색은 만들지 않는다).
     · 성공/경고/위험(success·warning·danger) 같은 "의미가 있는" 상태색은 브랜드색이
       아니므로 건드리지 않는다. 브랜드 장식색(navy·accent·cta·brand-link)만 하나로 모은다.
     · 이모지는 index.html 텍스트 안에 이미 박혀 있다(구조를 안 바꾸므로 지울 수 없다).
       이 파일은 이모지를 건드리지 않는다 — 손 못 대는 한계로 남긴다.

   되돌리는 법: index.html 에서 이 파일을 부르는 <link> 한 줄만 지우면 원래대로 돌아온다.
   ========================================================================== */

/* ── 0. 이 파일이 쓰는 값 ──────────────────────────────────────────────── */
#v_home{
  --se-accent:  #2F4858;   /* 이 사이트의 유일한 강조색(청회) */
  --se-ink:     #20242C;   /* 표제용 먹색 */
  --se-rule:    #D9DEE4;   /* 절 머리 괘선 — 2px */
  --se-rule-2:  #E7EAEF;   /* 묶음 괘선 — 1px */
  --se-serif:   "Noto Serif KR","Nanum Myeongjo","Batang","바탕",serif;
  --se-sans:    "Pretendard Variable","Pretendard","Malgun Gothic",system-ui,sans-serif;
  --se-mono:    "Pretendard Variable","Pretendard",ui-monospace,"SF Mono",Menlo,monospace;
}

/* ── 1. 강조색을 하나로 모은다 ────────────────────────────────────────────
   --navy(브랜드 남색) · --accent/--cta(코럴) · --blue(브랜드링크) 는 index.html
   인라인 <style> 이 정의한 커스텀 프로퍼티다. #v_home 아래에서만 다시 선언하면
   .panel h2 색, .card .num 색, 표제 왼괘선, 잠금판 글자, "이동 ›" 같은 인라인
   style="color:var(--blue)" 자리까지 전부 한 번에 모인다(상속으로 전파).
   success(초록 "무료") · warning(금색 "MAX") · danger(빨강 "잠김")는 의미가 있는
   상태색이라 그대로 둔다 — 브랜드 장식색만 하나로 모으는 것이 이번 처방이다.
   대비 재계산(배경 #FFFFFF 고정) : #143A6B 8.85:1 → #2F4858 8.55:1 (여전히 통과) */
#v_home{
  --navy:   var(--se-accent);
  --accent: var(--se-accent);
  --cta:    var(--se-accent);
  --blue:   var(--se-accent);
}

/* ============================================================================
   2. 상자를 걷는다 — 누를 수 있는 것(herocard·button·chip)만 남기고
      절은 위 괘선 한 줄로 나눈다. 배경·글자색은 그대로 둔다.
   ========================================================================== */
#v_home > .panel,
#v_home > .today,
#v_home .grid2 > .panel{
  border:0;
  border-top:2px solid var(--se-rule);
  border-radius:0;
  box-shadow:none;
  background:transparent;
  margin:0;
  padding:34px 0 30px;
}
#v_home > *:first-child{ border-top:0; padding-top:0; }
#v_home > .panel + .panel,
#v_home > .today + .panel{ margin-top:0; }
#v_home .grid2{ gap:0; }
#v_home .grid2 > .panel{ padding:26px 0 28px; }
@media (min-width:760px){
  #v_home .grid2 > .panel{ padding:26px 28px 28px; border-top:2px solid var(--se-rule); }
  #v_home .grid2 > .panel + .panel{ border-left:1px solid var(--se-rule-2); border-top:2px solid var(--se-rule); }
}

/* .today(오늘의 학생부 가이드) — 남색→파랑 그라디언트 판을 걷고 지면으로.
   배경을 없애므로 인라인 색(color:#fff)이 아니라 CSS 로 준 흰 글자를 같이 걷어
   본문 먹색으로 되돌린다. 태그 칩(.tag)도 배경이 없어졌으니 괘선 칩으로 바꾼다.
   대비: #20242C on #FFFFFF = 15.7:1 */
#v_home > .today{
  background:transparent;
  color:var(--se-ink);
}
#v_home > .today::after{ display:none; }             /* 배경 위 대형 이모지 워터마크 — 판이 없어졌으니 같이 지운다 */
/* 계열 아이콘 이모지(herocard/obcard 안의 별도 span) — 캐논 "이모지 0" 처방.
   .emo 는 텍스트와 분리된 span 이라 CSS 로 안전히 지울 수 있다.
   (주의: .catdot/.gold 버튼/안내문처럼 이모지가 같은 텍스트 노드 안에 글자와
   붙어 있는 경우는 CSS 만으로 이모지만 골라 지울 수 없다 — HTML/JS 를 건드리지
   말라는 제약과 충돌해 이번 처방에서는 남겨두었다. 최종 보고서의 한계 항목 참조.) */
#v_home .emo{ display:none; }
#v_home > .today p{ color:#3A4650; opacity:1; }
#v_home > .today .tag{
  background:transparent;
  border:1px solid var(--se-rule-2);
  color:#3A4650;
}

/* 통계 4칸(.cards) — 상자 대신 세로 괘선으로 나눈 숫자 줄. 기록·증빙 사이트의
   본체와 결이 같다(목록형). 숫자는 고정폭 + 강조색(§3), 라벨은 라벨체(§4). */
#v_home > .cards{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:2px solid var(--se-rule);
  margin:0; padding:18px 0 22px;
}
#v_home > .cards > .card{
  flex:1 1 140px;
  background:transparent; border:0; border-radius:0; box-shadow:none;
  padding:6px 18px;
  border-left:1px solid var(--se-rule-2);
}
#v_home > .cards > .card:first-child{ border-left:0; padding-left:0; }

/* 진로검사 CTA — 인디고 그라디언트 세 색 + 단추 그라디언트 두 색을 강조색 하나로.
   index.html 에 인라인 style 로 박혀 있어 !important 가 필요하다.
   대비: 흰 글자(인라인 color:#fff) on #2F4858 = 8.55:1 (전: on #1B4E86~ 6.3~7:1대)
   맨 위 3색 띠(인라인 절대배치 div, #2E6DB4→#6FA8E6→#C0521F)는 절 머리 괘선의
   먹색 2px 규칙과 같은 자리이므로 그 규칙색으로 통일한다. */
#v_home #careertest-cta{
  background:var(--se-accent) !important;
  border:0 !important;
  border-radius:0 !important;
  border-top:2px solid var(--se-rule) !important;
  box-shadow:none !important;
  margin:0; padding:34px 0 30px;
}
#v_home #careertest-cta > div[style*="position:absolute"]{
  background:var(--se-ink) !important;
  height:2px !important;
}
#v_home #careertest-cta h2{ border-left-color:#fff; }
#v_home #careertest-cta a[href]{
  background:#FFFFFF !important;
  color:var(--se-accent) !important;
  border:1px solid #FFFFFF !important;
  border-radius:2px !important;
  box-shadow:none !important;
  font-weight:700 !important;
}

/* 온보딩 배너 · 스트릭 · 자료실 진입 · 회원등급 · 잠금판 — 절 머리 괘선 */
#v_home #onboardbanner{ border-top:2px dashed var(--se-rule); padding-top:30px; }
#v_home #streakbox{ padding:18px 0; }
#v_home #pubentrycard{
  border-radius:0; box-shadow:none; border:0; border-top:2px solid var(--se-rule);
  padding:22px 0;
}
#v_home #homelock{ margin-top:0; }
#v_home .lock{ box-shadow:none; border-radius:2px; }

/* ── 누를 수 있는 것만 상자로 남긴다(모서리 2px, 그림자 없음) ─────────────
   herocard(계열 선택)는 「집어 드는 것」이라 작은 상자로 남긴다.
   onae-pro.css 가 .herocard 에 얹은 3겹 그림자를 이 파일이 나중에 실려 이긴다. */
#v_home .herocard{
  border-radius:2px;
  box-shadow:none;
  border:1px solid var(--se-rule-2);
}
#v_home .herocard:hover{ box-shadow:none; border-color:var(--se-accent); }
#v_home .hero{ gap:1px; background:var(--se-rule-2); }
#v_home button,
#v_home .btn{
  border-radius:2px;
}
/* onae-pro.css 가 이 사이트 전용 보정으로 button.warn 배경을 #C6371A !important 로
   못박아 두었다(무통장 안내 버튼, 주황 위 흰 글자 4.15:1 보정, 2026-08-02).
   !important 는 이 파일도 !important 라야 이긴다. 대비: 흰 글자 on #2F4858 = 8.55:1 */
#v_home button.warn{ background:var(--se-accent) !important; }

/* ============================================================================
   3. 숫자는 고정폭 + 강조색 — 본문 글자와 섞이지 않게
   ========================================================================== */
#v_home .cards .num{
  font-family:var(--se-mono);
  font-variant-numeric:tabular-nums;
  font-weight:800;
  color:var(--se-accent);
  letter-spacing:-0.01em;
}

/* ============================================================================
   4. 위계는 서체로 — 표제는 세리프 900, 라벨은 자간 넓은 산세리프 11px
   ========================================================================== */
#v_home h2{
  font-family:var(--se-serif);
  font-size:27px;
  font-weight:900;
  letter-spacing:-0.02em;
  line-height:1.32;
  color:var(--se-ink);
  border-left:3px solid var(--se-accent);
  padding-left:12px;
  margin-bottom:8px;
}
#v_home h3{
  font-family:var(--se-serif);
  font-size:19px;
  font-weight:900;
  letter-spacing:-0.015em;
  color:var(--se-ink);
}
#v_home .cards .lbl{
  font-family:var(--se-sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  color:#5C6B7A;
  margin-top:4px;
}
#v_home .today .tag{
  font-family:var(--se-sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
}

/* ============================================================================
   5. 여백 리듬 — 절 40px 뼈대는 §2 padding 에서 이미 주었다. 줄 사이 10px.
   ========================================================================== */
#v_home > .panel h2 + p,
#v_home > .today h2 + p{ margin-top: 0; }
#v_home ul, #v_home ol{ line-height:1.85; }
#v_home table{ font-size:13px; }

/* ── 360px — 좁은 화면에서 절 여백을 줄이고 세로 괘선을 접는다 ───────────── */
@media (max-width:600px){
  #v_home > .panel,
  #v_home > .today,
  #v_home #careertest-cta,
  #v_home #pubentrycard{ padding-left:0; padding-right:0; }
  #v_home h2{ font-size:22px; padding-left:10px; }
  #v_home > .cards{ padding:14px 0 18px; }
  #v_home > .cards > .card{ flex:1 1 46%; border-left:0; border-top:1px solid var(--se-rule-2); padding:10px 0 0; }
  #v_home > .cards > .card:nth-child(-n+2){ border-top:0; }
}
@media (max-width:759px){
  #v_home .grid2 > .panel + .panel{ border-top:1px solid var(--se-rule-2); }
}