/* diag.v4.css : 예비고1 진단고사 상세페이지 전용 (2026-09-27). site.v4.css + course.v4.css 위에 얹는다.
   원천 = phase_c/diag_work/src/diag.v4.css, 빌드 = build_page.py (보조 글꼴 @font-face 는 빌드가 끝에 붙인다) */

body.course-diag .course-hero::before{content:"試"}
body.course-diag{counter-reset:sec}
/* 헤더 이루리소식 탭 현재 쪽 표시 (10-02 s9 이관) */
.menu a.top[aria-current="page"]{color:var(--ink)}
.menu a.top[aria-current="page"]::after{transform:scaleX(1)}

/* ---- 버튼 (신청 = 숲색 채움 1개, 나머지는 테두리) ---- */
.dx-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 28px;
  font-size:15px;font-weight:600;letter-spacing:-.005em;line-height:1;border:1px solid transparent;border-radius:2px;
  white-space:nowrap;transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.dx-btn svg{width:18px;height:18px;flex:none}
.dx-btn--primary{background:var(--forest);color:#fff}
.dx-btn--primary:hover,.dx-btn--primary:focus-visible{background:var(--forest-deep)}
.dx-btn--ghost{border-color:var(--hair);color:var(--ink)}
.dx-btn--ghost:hover,.dx-btn--ghost:focus-visible{border-color:var(--goldline);background:rgba(197,165,114,.06)}
.dx-btn:focus-visible{outline:2px solid var(--goldline);outline-offset:3px}
.dx-ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---- 히어로 ---- */
body.course-diag .course-hero__inner{grid-template-areas:"tag tag" "title meta" "lede meta" "cta meta"}
.dx-hero__cta{grid-area:cta;margin-top:clamp(28px,3vw,40px)}
body.course-diag .course-hero__meta-value b{font-weight:600;color:var(--forest)}
/* B안: 히어로 오른쪽 = 날짜 블록 */
body.course-diag .dx-hero--dates .course-hero__inner{grid-template-areas:"tag tag" "title dates" "lede dates" "cta dates"}
.dx-hero--dates .dx-when{grid-area:dates;align-self:end}
/* C안: 히어로 오른쪽 = 100명 막대 */
body.course-diag .dx-hero--line .course-hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"tag tag" "title line" "lede line" "cta line"}
.dx-hero--line .dx-line{grid-area:line;align-self:end}
.dx-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--goldline)}
.dx-facts div{padding:18px 0 4px;border-bottom:1px solid var(--hairsoft)}
.dx-facts dt{font-size:10.5px;font-weight:600;letter-spacing:.18em;color:var(--muted)}
.dx-facts dd{margin-top:6px;font-size:15.5px;font-weight:500;line-height:1.45;letter-spacing:-.01em}

/* ---- 100명 한 줄 막대 ---- */
.dx-line{position:relative}
.dx-line__stage{position:relative;padding-top:60px}
.dx-line__cap{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--muted);margin-bottom:14px}
.dx-line__bar{position:relative;display:grid;grid-template-columns:repeat(100,1fr);gap:1px;height:clamp(56px,6vw,72px)}
.dx-line__bar i{display:block;background:rgba(27,25,21,.07)}
.dx-line__bar i.g1{background:var(--forest)}
.dx-line__bar i.g2{background:rgba(0,98,65,.42)}
.dx-line__bar i.g3{background:rgba(0,98,65,.16)}
.dx-line__bar i.g4{background:rgba(27,25,21,.11)}
.dx-line__bar i.g5{background:rgba(27,25,21,.06)}
/* 등급 경계 10, 34, 66, 90 뒤 칸 왼쪽에 1px 선(칸 사이 간격 자리). 3~5등급 칸끼리 대비가 1.03~1.11:1 이라 선으로 가른다(critic r1 #7) */
.dx-line__bar i.b{position:relative}
.dx-line__bar i.b::before{content:"";position:absolute;left:-1px;top:-5px;bottom:-5px;width:1px;background:var(--muted)}
/* 위쪽 괄호: 중학교 A 1~30명(실선) + 31~39명(점선) */
.dx-bracket{position:absolute;top:0;height:60px;pointer-events:none}
.dx-bracket--a{left:0;width:39%}
.dx-bracket--a::before{content:"";position:absolute;left:0;bottom:8px;width:76.923%;height:10px;border:1px solid var(--goldline);border-bottom:0}
.dx-bracket--a::after{content:"";position:absolute;left:76.923%;right:0;bottom:8px;height:10px;border-top:1px dashed var(--goldline);border-right:1px dashed var(--goldline)}
.dx-bracket__t{position:absolute;left:0;bottom:24px;white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--goldtext)}
.dx-bracket__t b{font-size:clamp(17px,1.8vw,21px);font-weight:700;letter-spacing:-.02em;margin-left:4px}
/* 아래 눈금: 누적 10, 34, 66, 90 */
.dx-ticks{position:relative;height:22px;margin-top:16px}
.dx-ticks span{position:absolute;top:0;transform:translateX(-50%);font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.dx-ticks span.on{color:var(--forest)}
.dx-line__first{position:absolute;left:0;width:10%;bottom:-11px;height:7px;border:1px solid var(--forest);border-top:0}
.dx-line__note{margin-top:12px;font-size:12.5px;line-height:1.7;color:var(--muted)}

/* ---- 섹션 공통 ---- */
.dx-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start}
.dx-p{font-size:16px;line-height:1.8;letter-spacing:-.012em;color:var(--ink);max-width:40em}
.dx-p + .dx-p{margin-top:16px}
.dx-p--mute{color:var(--muted);font-size:15.5px}

/* ---- 행 목록 (헤어라인) ---- */
.dx-rows{border-top:1px solid var(--goldline)}
.dx-row{display:grid;grid-template-columns:minmax(96px,.32fr) minmax(0,1fr) auto;gap:clamp(16px,3vw,40px);align-items:baseline;
  padding:clamp(20px,2.4vw,28px) 0;border-bottom:1px solid var(--hairsoft)}
.dx-row__k{font-size:clamp(18px,1.9vw,22px);font-weight:600;letter-spacing:-.025em;line-height:1.35}
.dx-row__v{font-size:15.5px;line-height:1.75;color:var(--muted);letter-spacing:-.01em}
.dx-row__v strong{color:var(--ink);font-weight:600}
.dx-row__tag{font-size:13px;font-weight:700;color:var(--forest);white-space:nowrap}
.dx-row__tag--paid{color:var(--muted);font-weight:600}
.dx-row--num .dx-row__k{font-size:clamp(24px,2.8vw,34px);font-weight:600;color:var(--goldtext);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.dx-row--first .dx-row__k{color:var(--forest)}

/* ---- 일정 ---- */
.dx-when{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--goldline)}
.dx-day{padding:18px 0 20px;border-bottom:1px solid var(--hairsoft)}
.dx-day + .dx-day{padding-left:clamp(16px,2vw,28px);border-left:1px solid var(--hairsoft)}
.dx-day__m{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.04em}
.dx-day__d{display:flex;align-items:baseline;gap:8px;margin-top:4px;font-size:clamp(48px,6vw,76px);font-weight:600;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.dx-day__d small{font-size:clamp(15px,1.5vw,18px);font-weight:600;letter-spacing:0;color:var(--forest)}
.dx-when__or{grid-column:1 / -1;padding:14px 0 0;font-size:14px;color:var(--muted)}
.dx-slots{border-top:1px solid var(--goldline)}
.dx-slot{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2.4vw,32px);align-items:baseline;padding:clamp(18px,2vw,24px) 0;border-bottom:1px solid var(--hairsoft)}
.dx-slot__n{font-size:13px;font-weight:700;color:var(--goldtext);letter-spacing:.04em}
.dx-slot__t{font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dx-slot__c{font-size:14px;color:var(--muted)}
.dx-place{margin-top:clamp(28px,3vw,40px);padding:22px 24px;background:var(--plate);border:1px solid var(--hairsoft)}
.dx-place__k{font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--muted)}
.dx-place__v{margin-top:6px;font-size:17px;font-weight:600;letter-spacing:-.015em}
.dx-place__s{margin-top:4px;font-size:14px;color:var(--muted)}
.dx-place a{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-size:14px;font-weight:600;color:var(--forest);border-bottom:1px solid rgba(0,98,65,.4)}

/* ---- 진단 뒤 흐름 (가로 타임라인) ---- */
.dx-tl{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--goldline);position:relative}
.dx-tl__i{grid-column:span var(--span,1)}
.dx-tl__i{position:relative;padding:32px clamp(12px,2vw,28px) 8px 0}
.dx-tl__i::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;background:var(--field);border:1px solid var(--goldline);transform:rotate(45deg);z-index:1}
.dx-tl__i.on::before{background:var(--forest);border-color:var(--forest)}
.dx-tl__m{font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.dx-tl__i.on .dx-tl__m{color:var(--forest)}
.dx-tl__d{margin-top:10px;font-size:15.5px;line-height:1.75;color:var(--muted);max-width:30ch}
.dx-tl__i.win .dx-tl__d{max-width:44ch}
/* 겨울 구간 선(숲색 2px) + 끝 눈금 */
.dx-tl__i.win::after{content:"";position:absolute;left:10px;right:0;top:-1px;height:2px;background:var(--forest)}
.dx-tl__i.win .dx-tl__m{color:var(--forest)}

.dx-team{margin-top:clamp(36px,4vw,52px);font-size:15.5px;line-height:1.8;color:var(--ink);max-width:44em;padding-left:18px;border-left:2px solid var(--goldline)}

/* ---- 자주 묻는 질문 ---- */
.dx-faq{border-top:1px solid var(--goldline)}
.dx-faq details{border-bottom:1px solid var(--hairsoft)}
.dx-faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:16px 0;cursor:pointer;list-style:none;
  font-size:16.5px;font-weight:600;letter-spacing:-.015em;line-height:1.5}
.dx-faq summary::-webkit-details-marker{display:none}
.dx-faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:1px solid var(--goldtext);border-bottom:1px solid var(--goldtext);transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease)}
.dx-faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.dx-faq summary:focus-visible{outline:2px solid var(--goldline);outline-offset:4px}
.dx-faq__a{padding:0 0 22px;font-size:15.5px;line-height:1.8;color:var(--muted);max-width:62ch}

/* ---- 02 네 가지 차이 (번호 4칸, 행 목록 반복을 끊는다 slop r1 #1) ---- */
.dx-quad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--goldline);border-bottom:1px solid var(--hairsoft)}
.dx-quad__i{padding:clamp(22px,2.4vw,32px) clamp(16px,2vw,28px) 8px 0}
.dx-quad__i + .dx-quad__i{padding-left:clamp(16px,2vw,28px);border-left:1px solid var(--hairsoft)}
.dx-quad__n{font-size:14px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.dx-quad__k{margin-top:10px;font-size:clamp(18px,1.9vw,22px);font-weight:600;letter-spacing:-.025em;line-height:1.35}
.dx-quad__v{margin-top:10px;font-size:15.5px;line-height:1.75;color:var(--muted);letter-spacing:-.01em}

/* ---- 05 유료 과정 (무료 행과 모양을 뗀다 slop r1 #12) ---- */
/* 무료 행 목록과 28px 떼고, 위 선을 한 단계 진하게. 열은 행 목록과 같다(critic r2 #4) */
.dx-paid{display:grid;grid-template-columns:minmax(96px,.32fr) minmax(0,1fr) auto;gap:clamp(16px,3vw,40px);align-items:baseline;
  margin-top:28px;padding:clamp(18px,2vw,24px) 0;border-bottom:1px solid var(--hairsoft)}
.dx-paid__k{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.015em;line-height:1.4}
.dx-paid__v{font-size:15.5px;line-height:1.75;color:var(--muted);letter-spacing:-.01em}

/* ---- 한 단어 고아 줄 줄이기 (critic r1 #2) ---- */
.dx-nw{white-space:nowrap}
body.course-diag .course-hero__lede,body.course-diag .section__lede,body.course-diag .course-cta__lede,.dx-p,.dx-row__v,.dx-faq__a,.dx-quad__v,.dx-tl__d,.dx-line__note,.dx-paid__v{text-wrap:pretty}
/* 시기표 칸은 2~3줄이라 pretty 로는 1024~1440 에서 한 단어 끝줄이 남는다(s6 lastline 실측). 줄 길이를 고르게 */
.dx-tl__d{text-wrap:balance}
/* 320px 에서 <br> 앞 제목 구간이 두 줄로 접히며 4자 줄이 남는다(s6 lastline 구간 측정: 1등급은, 내신 사이, 재어 보고). 넓은 폭은 구간마다 한 줄이라 영향 없음 */
body.course-diag .section__title,body.course-diag .course-cta__title{text-wrap:balance}

/* ---- 마지막 신청 ---- */
body.course-diag .course-cta__group{gap:12px}
.dx-cta-meta{margin-top:22px;font-size:13.5px;color:var(--muted)}

/* ---- 출처와 학원 표시 ---- */
.dx-notes{padding:clamp(40px,5vw,64px) 0 clamp(56px,6vw,80px);border-top:1px solid var(--hairsoft)}
.dx-notes p{font-size:13px;line-height:1.75;color:var(--muted);max-width:78ch}
.dx-notes p + p{margin-top:10px}

/* ---- 모바일 하단 바: 이 페이지는 신청이 오른쪽 채움 칸 ---- */
body.course-diag .mobile-cta a.dx-mc{background:var(--forest);color:#fff}

/* ---- 반응형 ---- */
@media (max-width:960px){
  body.course-diag .course-hero__inner,
  body.course-diag .dx-hero--dates .course-hero__inner,
  body.course-diag .dx-hero--line .course-hero__inner{grid-template-columns:1fr;grid-template-areas:"tag" "title" "lede" "cta" "meta"}
  body.course-diag .dx-hero--dates .course-hero__inner{grid-template-areas:"tag" "title" "lede" "dates" "cta"}
  body.course-diag .dx-hero--line .course-hero__inner{grid-template-areas:"tag" "title" "lede" "line" "cta"}
  .dx-hero--dates .dx-when,.dx-hero--line .dx-line{margin-top:36px}
  .dx-2col{grid-template-columns:1fr}
  .dx-tl{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--goldline);margin-left:4px}
  .dx-tl__i{grid-column:auto;padding:0 0 28px 26px}
  .dx-tl__i::before{left:-5px;top:9px}
  .dx-tl__d,.dx-tl__i.win .dx-tl__d{max-width:44ch}
  .dx-tl__i.win::after{left:-1px;right:auto;top:20px;bottom:0;width:2px;height:auto}
  .dx-quad{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dx-quad__i:nth-child(3){padding-left:0;border-left:0}
  .dx-quad__i:nth-child(n+3){border-top:1px solid var(--hairsoft)}
}
@media (max-width:720px){
  .dx-row{grid-template-columns:1fr auto;row-gap:6px}
  .dx-row__k{grid-column:1 / -1}
  .dx-row__v{grid-column:1}
  .dx-row__tag{grid-column:2;grid-row:2}
  .dx-row--nt .dx-row__v{grid-column:1 / -1}
  .dx-btn{flex:1 1 auto}
  .dx-paid{grid-template-columns:1fr auto;row-gap:6px}
  .dx-paid__k{grid-column:1 / -1}
  .dx-paid__v{grid-column:1}
  .dx-paid .dx-row__tag{grid-column:2;grid-row:2}
  .dx-slot{grid-template-columns:auto 1fr}
  .dx-slot__c{grid-column:2}
}
@media (max-width:420px){
  .dx-ticks span{font-size:11.5px}
  .dx-bracket__t{font-size:12.5px}
}
@media (max-width:480px){
  .dx-quad{grid-template-columns:1fr}
  .dx-quad__i,.dx-quad__i + .dx-quad__i{padding:20px 0 16px;border-left:0}
  .dx-quad__i + .dx-quad__i{border-top:1px solid var(--hairsoft)}
  .dx-quad__i{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:8px}
  .dx-quad__n{grid-row:1 / span 2;padding-top:3px}
  .dx-quad__k,.dx-quad__v{grid-column:2}
  .dx-quad__k{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.dx-btn,.dx-faq summary::after{transition:none}}

/* ==== s3 (10-02, 건우 20:30): 요약 블록, 근거 한 줄, 과목별 문항 수, 관련 안내, 최종 수정 ==== */
/* 요약: 히어로 바로 아래 한 문단(검색과 AI 답변기가 인용하는 자리, JSON-LD speakable 대상) */
.dx-brief-wrap{padding:clamp(36px,4.6vw,60px) 0 0}
.dx-brief{max-width:62em;padding:2px 0 2px clamp(16px,2vw,24px);border-left:2px solid var(--goldline)}
.dx-brief__k{font-size:11px;font-weight:600;letter-spacing:.26em;color:var(--muted)}
.dx-brief__v{margin-top:10px;font-size:clamp(15.5px,1.5vw,17px);line-height:1.85;letter-spacing:-.012em;color:var(--ink);text-wrap:pretty}
/* 02 네 칸의 근거 한 줄 */
.dx-quad__d{margin-top:12px;padding-top:12px;border-top:1px solid var(--hairsoft);font-size:14px;line-height:1.7;color:var(--muted);letter-spacing:-.01em;text-wrap:pretty}
.dx-quad__d b{font-weight:600;color:var(--goldtext);font-variant-numeric:tabular-nums;white-space:nowrap}
.dx-quad__i{padding-bottom:clamp(18px,2vw,26px)}
/* 03 과목 행 오른쪽: 문항 수와 시간 */
.dx-row__meta{font-size:14px;font-weight:600;color:var(--goldtext);white-space:nowrap;font-variant-numeric:tabular-nums}
/* 관련 안내(사이트 안 링크) */
.dx-rel-wrap{padding:0 0 clamp(56px,7vw,96px)}
.dx-rel__h{font-size:11px;font-weight:600;letter-spacing:.26em;color:var(--muted);margin-bottom:14px}
.dx-rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-top:1px solid var(--goldline);border-bottom:1px solid var(--hairsoft)}
.dx-rel__i{display:block;padding:clamp(18px,2vw,24px) clamp(14px,1.8vw,24px) clamp(18px,2vw,24px) 0;color:var(--ink);transition:background-color .25s var(--ease)}
.dx-rel__i + .dx-rel__i{padding-left:clamp(14px,1.8vw,24px);border-left:1px solid var(--hairsoft)}
.dx-rel__k{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.02em;line-height:1.45;text-decoration:underline;text-decoration-color:var(--goldline);text-decoration-thickness:1px;text-underline-offset:5px}
.dx-rel__v{display:block;margin-top:8px;font-size:14px;line-height:1.7;color:var(--muted);text-wrap:pretty}
.dx-rel__i:hover .dx-rel__k,.dx-rel__i:focus-visible .dx-rel__k{text-decoration-color:var(--goldtext)}
.dx-rel__i:focus-visible{outline:2px solid var(--goldline);outline-offset:2px}
/* 최종 수정 */
.dx-notes p.dx-updated{margin-top:14px;font-variant-numeric:tabular-nums}
@media (max-width:480px){
  .dx-quad__d{grid-column:2}
}
@media (max-width:720px){
  /* 과목 행: 과목 이름과 문항 수를 한 줄에, 설명은 아래 줄 전체 폭 */
  .dx-row--meta .dx-row__k{grid-column:1}
  .dx-row--meta .dx-row__meta{grid-column:2;grid-row:1;align-self:baseline}
  .dx-row--meta .dx-row__v{grid-column:1 / -1}
  .dx-rel{grid-template-columns:1fr}
  .dx-rel__i,.dx-rel__i + .dx-rel__i{padding:16px 0;border-left:0}
  .dx-rel__i + .dx-rel__i{border-top:1px solid var(--hairsoft)}
}
@media (prefers-reduced-motion:reduce){.dx-rel__i{transition:none}}

/* ==== s4 (10-02, design-critic s3 고칠 것 1~6, 신청 버튼 아래 임시 고지) ==== */
/* 3 요약: 본문 글 폭(.dx-team 44em)과 맞춘다 / 5 라벨: 이 쪽 전용 라벨은 자간을 줄여 '요 약'으로 읽히지 않게 */
.dx-brief{max-width:44em;padding-left:18px}
.dx-brief__v{font-size:clamp(15.5px,1.5vw,16px)}
.dx-brief__k,.dx-rel__h{font-size:12.5px;letter-spacing:.04em}
/* 6 근거 줄 숫자: 금색은 01 의 '중학교 A' 뜻과 겹쳐 빼고 굵기만 */
.dx-quad__d b{color:var(--ink)}
/* 2 근거 줄 위 선을 칸끼리 맞춘다: 칸마다 번호, 제목, 설명, 근거 네 줄을 바깥 격자의 같은 행에 놓는다 */
@media (min-width:481px){
  .dx-quad__i{grid-row:span 4;display:grid;grid-template-rows:subgrid}
  .dx-quad__d{align-self:start}
}
/* 1 관련 안내: 721~979px 은 2열, 980px 이상은 칸 수만큼 한 줄(--n 은 빌더가 칸 수로 채운다) */
@media (min-width:980px){
  .dx-rel{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
}
@media (min-width:721px) and (max-width:979px){
  .dx-rel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dx-rel__i:nth-child(odd){padding-left:0;border-left:0}
  .dx-rel__i:nth-child(n+3){border-top:1px solid var(--hairsoft)}
}
/* 신청 버튼 아래 임시 고지(결재 NT-9 A). 신청 블록은 밝은 카드라 본문 보조색 */
.course-cta__fine{max-width:52ch;margin:clamp(24px,3vw,32px) auto 0;font-size:13.5px;line-height:1.75;color:var(--muted);text-wrap:pretty}
/* critic 4: 관련 안내가 신청 블록 뒤로 오면서 위 여백을 준다 */
.course-cta + .dx-rel-wrap{padding-top:clamp(48px,6vw,80px)}

/* ==== news.v4.css 추가분 : 이루리소식 목록, 2차 설명회 상세 (2026-10-02) ====
   빌드가 diag.v4.css 원천 뒤에 이 파일을 붙여 /assets/v4/news.v4.css 로 낸다. body 클래스 = course-diag course-news */

body.course-news .course-hero::before{content:"記"}
body.course-news.nw-list-page .course-hero::before{content:"報"}

/* ---- 헤더: 이루리소식 탭 현재 쪽 표시 ---- */
.menu a.top[aria-current="page"]{color:var(--ink)}
.menu a.top[aria-current="page"]::after{transform:scaleX(1)}

/* ---- 01 정시 학생부 반영 대학 (15칸 두 줄) ---- */
.nw-bars{margin:0;padding:clamp(20px,2.4vw,28px) 0 0;border-top:1px solid var(--goldline)}
.nw-bars__cap{font-size:13.5px;font-weight:600;color:var(--muted);letter-spacing:-.01em}
.nw-bars__row{display:grid;grid-template-columns:minmax(92px,auto) minmax(0,1fr) auto;align-items:center;gap:14px;margin-top:18px}
.nw-bars__y{font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.nw-bars__cells{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:4px}
.nw-bars__cells i{display:block;aspect-ratio:1;border:1px solid var(--goldline);background:var(--field)}
.nw-bars__cells i.on{background:var(--forest);border-color:var(--forest)}
.nw-bars__row--old .nw-bars__cells i.on{background:rgba(0,98,65,.32);border-color:rgba(0,98,65,.32)}
.nw-bars__n{font-size:clamp(22px,2.4vw,28px);font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right}
.nw-bars__row--new .nw-bars__n{color:var(--forest)}
.nw-bars__note{margin-top:16px;font-size:13px;line-height:1.7;color:var(--muted)}

/* ---- 03 다루는 내용 8칸 ---- */
.nw-topics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--goldline)}
.nw-topics__i{padding:clamp(22px,2.4vw,30px) clamp(14px,1.8vw,24px) clamp(18px,2vw,26px);border-bottom:1px solid var(--hairsoft)}
.nw-topics__i:not(:nth-child(4n+1)){border-left:1px solid var(--hairsoft)}
.nw-topics__i:nth-child(4n+1){padding-left:0}
.nw-topics__n{font-size:14px;font-weight:600;color:var(--goldtext);font-variant-numeric:tabular-nums}
.nw-topics__k{margin-top:10px;font-size:clamp(17px,1.7vw,19.5px);font-weight:600;letter-spacing:-.025em;line-height:1.45;color:var(--ink)}
.nw-topics__v{margin-top:8px;font-size:14.5px;line-height:1.7;color:var(--muted)}
.nw-gloss{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:clamp(24px,3vw,32px);font-size:14px;line-height:1.7;color:var(--muted)}
.nw-gloss b{font-weight:600;color:var(--ink);margin-right:6px}

/* ---- 04 1차에서 2차로 ---- */
.nw-steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--goldline)}
.nw-step{position:relative;padding:clamp(24px,2.6vw,34px) clamp(16px,2.4vw,36px) clamp(20px,2.4vw,28px) 0}
.nw-step + .nw-step{padding-left:clamp(16px,2.4vw,36px);border-left:1px solid var(--hairsoft)}
.nw-step::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;background:var(--field);border:1px solid var(--goldline);transform:rotate(45deg)}
.nw-step + .nw-step::before{left:-5px}
.nw-step.on::before{background:var(--forest);border-color:var(--forest)}
.nw-step__d{font-size:14px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.nw-step.on .nw-step__d{color:var(--forest)}
.nw-step__k{margin-top:10px;font-size:clamp(19px,2vw,23px);font-weight:600;letter-spacing:-.025em;line-height:1.4;color:var(--ink)}
.nw-step__v{margin-top:10px;font-size:15.5px;line-height:1.75;color:var(--muted);max-width:40ch}

/* ---- 06 하루 일정 ---- */
.nw-oneday .dx-day__d{font-size:clamp(64px,8vw,104px)}
.nw-oneday__t{margin-top:14px;font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.02em;color:var(--forest)}

/* ---- 이루리소식 목록 ---- */
.nw-list{display:grid;gap:0;border-top:1px solid var(--goldline)}
.nw-card{display:grid;grid-template-columns:minmax(120px,.22fr) minmax(0,1fr) auto;gap:clamp(18px,3vw,44px);align-items:start;
  padding:clamp(28px,3.4vw,44px) 0;border-bottom:1px solid var(--hairsoft)}
.nw-card__date{font-variant-numeric:tabular-nums}
.nw-card__m{font-size:14px;font-weight:600;color:var(--muted)}
.nw-card__d{margin-top:4px;font-size:clamp(40px,4.4vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.nw-card__d small{margin-left:6px;font-size:15px;font-weight:600;letter-spacing:0;color:var(--muted)}
.nw-card__status{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--forest);color:var(--forest);font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.nw-card__status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.nw-card[data-state="done"] .nw-card__status{border-color:var(--hairsoft);color:var(--muted)}
.nw-card__k{margin-top:12px;font-size:clamp(21px,2.3vw,27px);font-weight:600;letter-spacing:-.03em;line-height:1.4;color:var(--ink)}
.nw-card__v{margin-top:10px;font-size:15.5px;line-height:1.75;color:var(--muted);max-width:52ch;text-wrap:pretty}
.nw-card__meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px;font-size:14px;color:var(--ink)}
.nw-card__meta span b{font-weight:600;color:var(--muted);margin-right:6px}
.nw-card__act{display:flex;flex-direction:column;gap:10px;min-width:150px}
.nw-card[data-state="done"] .nw-card__act .dx-btn--primary{display:none}
.nw-card[data-state="done"] .nw-card__d,.nw-card[data-state="done"] .nw-card__k{color:var(--muted)}
.nw-past{margin-top:clamp(40px,5vw,64px)}
.nw-past__h{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.nw-past__i{display:grid;grid-template-columns:minmax(120px,.22fr) minmax(0,1fr) auto;gap:clamp(18px,3vw,44px);padding:18px 0;border-bottom:1px solid var(--hairsoft);font-size:15px;color:var(--muted)}
.nw-past__i b{font-weight:600;color:var(--ink)}

@media (max-width:960px){
  .nw-topics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nw-topics__i:not(:nth-child(4n+1)){border-left:0}
  .nw-topics__i:nth-child(4n+1){padding-left:clamp(14px,1.8vw,24px)}
  .nw-topics__i:nth-child(odd){padding-left:0}
  .nw-topics__i:nth-child(even){border-left:1px solid var(--hairsoft)}
  .nw-card{grid-template-columns:minmax(0,1fr)}
  .nw-card__act{flex-direction:row;flex-wrap:wrap;min-width:0}
  .nw-past__i{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .nw-steps{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--goldline);margin-left:4px}
  .nw-step,.nw-step + .nw-step{padding:0 0 26px 26px;border-left:0}
  .nw-step::before,.nw-step + .nw-step::before{left:-5px;top:7px}
  .nw-bars__row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .nw-bars__y{grid-column:1}
  .nw-bars__n{grid-column:2;grid-row:1}
  .nw-bars__cells{grid-column:1 / -1}
}
@media (max-width:480px){
  .nw-topics{grid-template-columns:1fr}
  .nw-topics__i,.nw-topics__i:nth-child(odd),.nw-topics__i:nth-child(even){padding:18px 0 16px;border-left:0}
  .nw-topics__i{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:8px}
  .nw-topics__n{grid-row:1 / span 2;padding-top:3px}
  .nw-topics__k,.nw-topics__v{grid-column:2}
  .nw-topics__k{margin-top:0}
  .nw-card__act .dx-btn{flex:1 1 140px}
}

/* ---- 02 달력 4칸, 목록 히어로, 행사 종료 상태 ---- */
.dx-tl.nw-tl4{grid-template-columns:repeat(4,minmax(0,1fr))}
body.course-news .nw-hero--list .course-hero__inner{grid-template-columns:1fr;grid-template-areas:"tag" "title" "lede"}
body.course-news .nw-hero--list{padding-bottom:clamp(36px,5vw,64px)}
.nw-amp{display:inline-block;width:.32em;height:.06em;margin:0 .14em;vertical-align:.32em;background:currentColor}
.nw-ended-note{display:none;margin-top:16px;font-size:15px;line-height:1.7;color:var(--muted)}
.nw-ended-note a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
body[data-state="done"] .nw-ended-note{display:block}
body[data-state="done"] [data-dx="apply"]{display:none}
body[data-state="done"] .mobile-cta{grid-template-columns:1fr}
body[data-state="done"] .mobile-cta .div{display:none}
/* 행사 뒤 상태 글자는 ENDED_JS 가 data-done-label 값으로 바꾼다(읽기 프로그램이 옛 글자를 함께 읽지 않게, r3 7) */
.nw-card[data-state="done"] .nw-card__act [data-dx="apply"]{display:none}
.nw-card__k a{color:inherit;text-decoration:none;background-image:linear-gradient(var(--goldline),var(--goldline));background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .35s var(--ease)}
.nw-card__k a:hover,.nw-card__k a:focus-visible{background-size:100% 1px}
@media (max-width:960px){.dx-tl.nw-tl4{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.nw-card__k a{transition:none}}
.nw-card__d{white-space:nowrap}
.nw-card__d--two{font-size:clamp(32px,3.4vw,44px)}
.nw-card__aside{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.nw-card__thumb{display:block;width:144px;height:112px;object-fit:cover;border:1px solid var(--hairsoft);background:#F6F3EA}
.nw-card__aside .nw-card__act{width:100%}
@media (max-width:960px){
  .nw-card{position:relative}
  .nw-card__aside{display:contents}
  .nw-card__thumb{position:absolute;top:clamp(28px,3.4vw,44px);right:0;width:96px;height:75px}
  .nw-card__aside .nw-card__act{width:auto}
}

/* ---- s2 (10-02 18시, critic r1 고칠 것 8건, astra r2 MED 7) ---- */
/* 히어로 제목 3줄: 둘째 줄 '고1 3월 첫 수업부터' = 7.43em. 1280 이상 78px(열 604~624), 320 은 열 272 에 맞춰 줄인다 */
body.course-news:not(.nw-list-page) .course-hero__title{font-size:min(clamp(38px,6.6vw,78px),calc(13vw - 6px))}
body.course-news:not(.nw-list-page) .course-hero__lede{max-width:30em}
body.course-news .course-hero__meta-label{font-size:12px;letter-spacing:.12em}
.nw-meta-link{color:inherit;text-decoration:underline;text-decoration-color:var(--goldline);text-decoration-thickness:1px;text-underline-offset:4px}
.nw-meta-link:hover,.nw-meta-link:focus-visible{text-decoration-color:var(--goldtext)}
/* 주제 제목 끝줄 고르게(빌드가 끝 단어를 &nbsp; 로 묶는다) */
.nw-topics__k,.nw-step__k{text-wrap:balance}
/* 강조색 하나: 통계 숫자와 막대 = 금색, 숲색 면은 신청 버튼과 CTA 에만 */
body.course-news .dx-row--first .dx-row__k{color:var(--goldtext)}
.nw-bars__cells i.on{background:var(--goldtext);border-color:var(--goldtext)}
.nw-bars__row--old .nw-bars__cells i.on{background:var(--goldline);border-color:var(--goldline)}
.nw-bars__row--new .nw-bars__n{color:var(--goldtext)}
.nw-step.on::before{background:var(--goldtext);border-color:var(--goldtext)}
.nw-step.on .nw-step__d{color:var(--goldtext)}
/* 목록 상태 배지: 받는 중 = 숲색 테두리, 준비 중 = 금색 테두리, 마감 = 회색 */
.nw-card[data-state="preparing"] .nw-card__status{border-color:var(--goldline);color:var(--goldtext)}
.nw-card[data-state="closed"] .nw-card__status{border-color:var(--hair);color:var(--muted)}
/* 06 일정: 하루 행사라 왼쪽 날짜 칸을 한 칸으로 */
.dx-when.nw-oneday{grid-template-columns:1fr}
/* 행사 뒤 전환: ENDED_JS 가 body(상세)나 .nw-card(목록)에 data-state="done" 을 달면 상태 문장(.nw-pre)을 숨기고
   종료 문면(.nw-post)을 보인다. 네 접수 상태 모두 같다(r3 1) */
.nw-post{display:none}
[data-state="done"] .nw-pre{display:none}
[data-state="done"] span.nw-post,[data-state="done"] em.nw-post{display:inline}
[data-state="done"] p.nw-post{display:block}
[data-state="done"] .nw-post a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.nw-note{margin-top:22px}
/* 화면에는 숨기고 읽기 프로그램만 읽는 글자(목록 날짜 '14일, 15일', r3 8) */
.nw-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 보조 글꼴 (사이트 subset 에 없는 글자만, 빌드 생성) */
@font-face{font-family:"Noto Serif KR";src:url("/assets/v4/fonts/NotoSerifKR-Regular.news.woff2?v=49597c20") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+5831,U+8A18,U+8A66}