.dv{
  --sky:#319ffd; --sky-dark:#2584dd; --sky-bg:#e8f2ff;
  --navy:#00416c; --navy-2:#0a5787;
  --indigo:#4338ca;                        /* 「지금 할 차례」 띠·테두리 — 지금 처리할 결과물(파랑 = 이동·제출 · 금색 = 추천 · 초록 = 통과 · 빨강 = 보완) */
  --green:#5f8f12; --green-bg:#f1f7e3;
  --amber:#c9821c; --amber-bg:#fdf3e2;
  --gold:#f6c343;                          /* 「추천」 배지(D-152) — 상태색과 겹치지 않는 채운 금색 */
  --coral:#e04b38; --coral-bg:#fdeeec;
  --panel:#ffffff; --panel-2:#f9fafb; --panel-3:#eef1f4;
  --line:#dde2e7; --line-soft:#e9edf1;
  --ink:#131a21; --ink-2:#39434c; --ink-3:#566068; --ink-4:#5e6872;
  /* 글자용 진한 색 — 옅은 바탕(흰색·회색·하늘·연두·살구·분홍) 어디에 놓여도 4.5:1 이상. 위 원색(--sky·--green·--amber·--coral)은
     선·막대·배너 그림에만 쓴다(원색 글자는 2.8~4.0:1 로 계획서 표시 규칙 미달 · v4.190). 회색 2종도 같은 이유로 진하게. 검사: css_contrast_check.py */
  --sky-ink:#0267be; --green-ink:#4c720e; --amber-ink:#8e5c14; --coral-ink:#c1301e; --gold-ink:#3d2b00;
  --btn:#0274d6; --btn-hover:#0263b6;   /* 채운 버튼 — 흰 글자 4.7:1 · 6.1:1 (사이트 기본색 #319ffd 는 2.8:1) */
  --r-s:5px; --r-m:9px;
  /* 글자 크기 10단계(v4.192) — 크기는 이 토큰으로만 쓴다(옛 12.3·12.8·11.8px 등 29종 → 10종). 학생 화면은 `.dv-learner` 가 한 단계씩 키운다.
     검사: css_contrast_check.py ④ */
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:15px;
  --fs-lg:16px; --fs-xl:18px; --fs-2xl:20px; --fs-3xl:24px; --fs-4xl:30px;
  --mono:'Poppins',ui-monospace,SFMono-Regular,Menlo,monospace;

  max-width:1180px; margin:0 auto; padding:0px 22px 0px;
  color:var(--ink); font-size:var(--fs-base); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.dv.dv-wide{max-width:1480px}
/* 학생 화면(P00~P03·P07 참여톡) — 본문 15~16px · 가장 작은 글자 12px(초등학생 가독성 · v4.192). 운영·지도교사·검토 화면은 위 기본값(밀도 유지) */
.dv.dv-learner{--fs-2xs:12px; --fs-xs:13px; --fs-sm:15px; --fs-md:15px; --fs-base:16px;
  --fs-lg:17px; --fs-xl:20px; --fs-2xl:22px; --fs-3xl:26px; --fs-4xl:32px}
.dv *{box-sizing:border-box}
.dv h1,.dv h2,.dv h3{margin:0;line-height:1.32;text-wrap:balance}
.dv p{margin:0}
/* ⚠️ 위 초기화(0,1,1)는 클래스 하나(0,1,0) 규칙의 여백(p·h1~h3)과 줄 간격(h1~h3)을 이긴다 — 그런 클래스 규칙에 여백을 적으면 화면에 나오지 않는다.
   여백이 필요하면 `.dv .x` 처럼 앞에 .dv 를 붙인다(D-149). 예전 화면의 덮여 있던 여백 선언 11개는 화면 변화 없이 지웠다(D-151 · 전후 렌더 계산 비교) */
/* 입력 요소·라벨 글꼴 — 사이트 lms-main 의 `label`·`textarea`·`input[type=text|url|email|password|tel]` 이 `font: italic 300 … Georgia` 다.
   글꼴 이름만 공통 CSS 의 `*{font-family:… !important}` 가 덮고 기울임·굵기 300 이 남아, 라벨 글자가 기울고 입력 글자가 가늘게 보였다
   (2026-09-14 사용자 지적). 기울임은 `.dv` 안에서 전부 바로잡는다(우리 규칙은 기울임을 쓰지 않는다). 굵기는 `:where(.dv)` 로 사이트 규칙과
   **같은 우선순위만** 가져 뒤에 와서 이긴다 — 우리 부품 규칙(`.bd-form label` 600 등)의 굵기는 그대로 이긴다. 검사: css_form_font_check.py */
.dv label,.dv input,.dv textarea,.dv select,.dv button{font-style:normal}
:where(.dv) label{font-weight:inherit}
:where(.dv) textarea,:where(.dv) input[type="text"],:where(.dv) input[type="url"],:where(.dv) input[type="email"],
:where(.dv) input[type="password"],:where(.dv) input[type="tel"]{font-weight:400}
/* ⚠️ 링크 글자색 규칙은 `.dv … a`(0,2,1) 이상 + `:visited` 짝(0,3,1) 이상으로, 호버 색은 `:hover`(0,3,1) + `:visited:hover`(0,4,1) 로 쓴다.
   사이트 공통 CSS `mlp/css/common.css` 의 `.wrap a:not(.btn)`(0,2,1) · `.wrap a:visited:not(.btn)`(0,3,1) · `a:visited:not(.btn):hover`(0,3,1)
   가 전부 `color:inherit` 라, 이보다 낮은 규칙은 글자색이 부모 색으로 바뀐다 — 처음부터, 또는 한 번 누른 링크에서만(2026-09-14 「검토함 열기」).
   이 <style> 은 공통 CSS 뒤에 오므로 같은 우선순위면 이긴다. 검사: tasks/mlp_competency/css_link_check.py */
.dv a:not(.dv-btn),.dv a:not(.dv-btn):visited{color:var(--sky-ink);text-decoration:none}
.dv a:hover{text-decoration:underline}
/* 호버 색도 못 박는다 — lms-main 의 `p a:not(.btn):hover`(0,2,2)·`p a:visited:not(.btn):hover`(0,3,2) 가 <p> 안 링크를 #065683 으로 바꾼다.
   이 규칙(0,3,1·0,4,1)보다 뒤에 오는 부품 규칙(메뉴·빵부스러기·탭·칩·오늘 요약)은 제 호버 색을 따로 둔다 */
.dv a:not(.dv-btn):hover,.dv a:not(.dv-btn):visited:hover{color:var(--sky-ink)}
.dv .num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dv .eyebrow{font-family:var(--mono);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--navy-2);display:inline-block;margin-bottom:4px}
.dv :focus-visible{outline:2px solid var(--sky-ink);outline-offset:2px}

/* ── 머리와 화면 이동 ───────────────────────────────── */
.dv-top{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;
  justify-content:space-between;padding-bottom:18px;
  border-bottom:2px solid var(--navy);margin-bottom:22px}
.dv-top h1{font-size:clamp(22px,2.7vw,28px);font-weight:700;letter-spacing:-.024em;
  color:var(--navy);margin:4px 0 6px;text-align:left}   /* 사이트 공통 h1 가운데 정렬을 이긴다 — 설명 줄이 생기자 제목만 가운데로 보이던 결함(2026-09-11) */
.dv-top .sub{color:var(--ink-2);font-size:var(--fs-md);max-width:64ch;line-height:1.6}
.dv-nav{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;flex:none;background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.03)}
.dv-nav a{display:flex;align-items:center;padding:9px 18px;font-size:var(--fs-sm);font-weight:600;
  color:var(--ink-2);text-decoration:none;border-right:1px solid var(--line-soft);
  white-space:nowrap;transition:background .15s ease, color .15s ease}
.dv-nav a:last-child{border-right:0}
/* 글자색은 위 「링크 글자색 규칙」 우선순위로 따로(지금 보는 화면은 늘 방문한 링크다) */
.dv .dv-nav a,.dv .dv-nav a:visited{color:var(--ink-2)}
.dv .dv-nav a:hover,.dv .dv-nav a:visited:hover{background:var(--sky-bg);color:var(--navy);text-decoration:none}
.dv .dv-nav a[aria-current],.dv .dv-nav a[aria-current]:visited{background:var(--navy);color:#fff}
.dv .dv-nav a[aria-current]:hover,.dv .dv-nav a[aria-current]:visited:hover{background:var(--navy-2);color:#fff}

/* ── KPI 요약 카드 ──────────────────────────────────── */
.dv-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}
.dv-kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);
  padding:14px 18px;box-shadow:0 2px 6px rgba(0,65,108,.03);display:flex;flex-direction:column;justify-content:space-between}
.dv-kpi-label{font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);margin-bottom:4px}
.dv-kpi-value{font-size:var(--fs-3xl);font-weight:700;color:var(--navy);line-height:1.2}
.dv-kpi-sub{font-size:var(--fs-xs);color:var(--ink-4);margin-top:4px}

/* ── 판 ─────────────────────────────────────────────── */
.dv-card-flat{border:0!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important;background:transparent!important}
.dv-card{border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel);
  padding:20px 22px;margin-bottom:18px;box-shadow:0 3px 12px rgba(0,65,108,.03)}
.dv-card>h2{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.02em;color:var(--navy);margin-bottom:5px}
.dv-card>.hint{font-size:var(--fs-sm);color:var(--ink-3);margin-bottom:16px;line-height:1.65}
.dv-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dv-box{background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r-m);padding:14px 16px}
.dv-box h3{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.11em;
  text-transform:uppercase;color:var(--navy-2);font-weight:700;margin-bottom:9px}
.dv-box ul{margin:0;padding-left:18px;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.85}

/* ── 입력 ───────────────────────────────────────────── */
.dv-field{display:block;margin-bottom:14px}
.dv-field>span{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);
  margin-bottom:6px}
.dv-field em{font-style:normal;color:var(--ink-4);font-weight:400;margin-left:4px}
.dv input[type=text],.dv select,.dv textarea{width:100%;min-width:0;height:auto;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);
  color:var(--ink);padding:9px 12px;font-size:var(--fs-sm);font-family:inherit;
  line-height:1.6;box-shadow:none;transition:border-color .15s ease}
.dv input[type=text]:focus,.dv select:focus,.dv textarea:focus{border-color:var(--sky)}
.dv select{padding-right:32px}
.dv textarea{min-height:120px;font-family:var(--mono);font-size:var(--fs-xs);line-height:1.7;
  resize:vertical;white-space:pre}
.dv-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.dv-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}

/* ── 드래그 앤 드롭 업로더 ───────────────────────────── */
.dv-dropzone{border:2px dashed var(--sky);border-radius:var(--r-m);background:var(--sky-bg);
  padding:22px 18px;text-align:center;cursor:pointer;transition:background .15s ease, border-color .15s ease;
  position:relative;margin-bottom:14px}
.dv-dropzone:hover,.dv-dropzone.dragover{background:#dbeafe;border-color:var(--sky-dark)}
.dv-dropzone input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dv-dropzone-icon{font-size:var(--fs-3xl);margin-bottom:6px;display:block}
.dv-dropzone-title{font-size:var(--fs-md);font-weight:600;color:var(--navy);display:block;margin-bottom:3px}
.dv-dropzone-hint{font-size:var(--fs-xs);color:var(--ink-3);display:block}
.dv-file-selected{display:inline-flex;align-items:center;gap:6px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-s);padding:6px 12px;font-size:var(--fs-xs);
  color:var(--navy);font-weight:600;margin-top:8px}

/* ⚠️ **사이트 공통 CSS 가 버튼을 통째로 지운다.**
   `mlp/css/common.css` 의 button:not(.make) 리셋을 넘어서기 위해
   `.dv button.dv-btn` 복합 선택자 우선순위를 못 박는다. */
.dv button.dv-btn,
.dv a.dv-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:var(--fs-sm);font-weight:600;
  line-height:1.45;padding:8px 16px;border-radius:var(--r-s);
  border:1px solid var(--btn);background:var(--btn);color:#fff;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  -webkit-appearance:none;appearance:none;letter-spacing:0;
  background-image:none;transition:background .15s ease, border-color .15s ease, transform .1s ease}
/* 한 번 누른(방문한) 링크 버튼도 흰 글자 — 공통 CSS 의 `.wrap a:visited:not(.btn){color:inherit}`(0,3,1)에 지지 않게 같은
   우선순위로 뒤에 둔다. ghost·반려 등 변형은 더 뒤에 같은 우선순위로 있어 제 색을 지킨다 */
.dv a.dv-btn:visited{color:#fff}
.dv button.dv-btn:hover:not(:disabled),
.dv a.dv-btn:hover,.dv a.dv-btn:visited:hover{background:var(--btn-hover);border-color:var(--navy);
  color:#fff;text-decoration:none;
  transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,65,108,.15)}
.dv button.dv-btn:disabled{opacity:.45;cursor:not-allowed}
.dv button.dv-btn.ghost,
.dv a.dv-btn.ghost{background:var(--panel-3);color:var(--ink-2);border:1px solid #dfe4ea}
.dv button.dv-btn.ghost:hover:not(:disabled),
.dv a.dv-btn.ghost:hover{background:#e3e8ee;color:var(--navy);border-color:#cfd6de;transform:none;box-shadow:none}
.dv button.dv-btn.danger{background:var(--panel);color:var(--coral-ink);border-color:#e8bcb3}
.dv button.dv-btn.danger:hover:not(:disabled){background:var(--coral-bg);color:var(--coral-ink);border-color:var(--coral)}
.dv button.dv-btn.sm,
.dv a.dv-btn.sm{padding:5px 11px;font-size:var(--fs-xs)}
/* 수료증 버튼 — 나의 학습방 「이수증」 버튼과 같은 모양(흰 바탕 · 파란 글씨 · 옅은 파란 테두리). 채운 파란 버튼과 헷갈리지 않게(사용자 지적 2026-09-23) */
.dv a.dv-btn.cert,.dv a.dv-btn.cert:visited{background:var(--panel);color:var(--sky-ink);border:1px solid #93c5fd;font-weight:600}
.dv a.dv-btn.cert:hover,.dv a.dv-btn.cert:visited:hover{background:var(--sky-bg);color:#1d4ed8;border-color:var(--sky);transform:none;box-shadow:none}
/* 오른쪽 진행 상자의 행동 역할(D-139 · 사용자 지적 2026-09-30 「회색 버튼이 같아 눌러야 할 것처럼 안 보인다」) — 파란 채움은 과제 시작·제출만 ·
   기록 다시 읽기(「내 활동 확인」)는 흰 바탕 파란 테두리. 위 화면으로 가는 링크는 두지 않는다 — 경로는 배너가 맡는다(D-140). 다른 회색(ghost) 버튼은 그대로 */
.dv a.dv-btn.outline,.dv a.dv-btn.outline:visited{background:var(--panel);color:var(--sky-ink);border:1px solid var(--sky-dark);gap:5px}
.dv a.dv-btn.outline:hover,.dv a.dv-btn.outline:visited:hover{background:var(--sky-bg);color:var(--sky-ink);border-color:var(--sky-dark);transform:none;box-shadow:none}
/* 학생 흐름 화면 브레드크럼(D-141 · D-142 · D-143 · D-145) — 배너 안 제목 위 흰 막대 · 집은 강조 없는 회색 아이콘(인증제 안내) · 지난 단계는 아이콘 + 글자 링크 ·
   끝에 지금 화면 남색 칩 · 좁으면 줄을 바꾼다(가로로 넘쳐 잘리지 않게 — 사용자 지적 2026-09-30 모바일).
   모서리(D-145 · 「알약처럼 너무 둥글다 — 다른 카드·버튼 정도로」 사용자 2026-09-30) — 막대는 카드와 같은 --r-m · 칩과 링크 hover 는 버튼과 같은 --r-s.
   안팎 모서리가 겹쳐 보이게 막대 = 칩 + 안쪽 여백 3 + 테두리 1(9 = 5 + 3 + 1) — 칩만 작게 하면 칩 모서리가 막대의 둥근 끝을 1px 넘는다 */
.dv-crumbs{margin:0 0 10px;max-width:100%;min-width:0}
.dv-crumbs ol{list-style:none;margin:0;padding:3px;display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px;max-width:100%;box-sizing:border-box;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);box-shadow:0 2px 6px rgba(0,65,108,.06)}
.dv-crumbs li{display:inline-flex;align-items:center;gap:2px;min-width:0;font-size:var(--fs-md);font-weight:600}
.dv-crumbs li:not(:last-child)::after{content:"›";color:var(--ink-3);font-size:var(--fs-lg);font-weight:400;line-height:1;margin:0 4px}   /* 앞 칸 끝 — 줄이 바뀌어도 둘째 줄 맨 앞에 › 가 혼자 남지 않는다(D-144) */
.dv .dv-crumbs a,.dv .dv-crumbs a:visited{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 8px;border-radius:var(--r-s);color:var(--ink-2);text-decoration:none;overflow-wrap:anywhere}
.dv .dv-crumbs a:hover{background:var(--sky-bg);color:var(--navy);text-decoration:none}
.dv .dv-crumbs li.home a,.dv .dv-crumbs li.home a:visited{width:32px;padding:0;justify-content:center;color:var(--ink-3)}
.dv-crumbs a i{font-size:var(--fs-md);vertical-align:-2px}
/* 지금 화면 칩(D-143) — 흰 막대 높이의 80~85%(사용자 지정 2026-09-30): 칩 36px ÷ 막대 44px(칩 36 + 안쪽 여백 3×2 + 테두리 1×2) ≈ 82%.
   지난 단계 링크(32px)는 칩보다 낮게 둬 막대 높이는 칩이 정한다 · 구분 › 는 칩 밖(칩은 li 안 span) · 칩 오른쪽도 막대 끝에서 3px */
.dv-crumbs li.now span{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:3px 14px;box-sizing:border-box;border-radius:var(--r-s);
  background:var(--navy);color:#fff;font-size:var(--fs-md);font-weight:600;overflow-wrap:anywhere}
.dv-crumbs li.now span i{font-size:var(--fs-md);vertical-align:-2px}
.dv-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 휴대폰(D-144) — 지난 단계는 짧게: 「내 인증 현황」은 아이콘만 · 영역은 「제N영역」만. 전체 이름은 읽기 도구용으로 남긴다 · 지금 칩은 늘 전체 이름(큰 제목을 감춰 칩이 유일한 제목) */
.dv-crumbs .dv-crumb-short{display:none}
@media (max-width:640px){
  .dv-crumbs .dv-crumb-full{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .dv-crumbs .dv-crumb-short{display:inline}
  /* 누르는 영역만 44px — 보이는 크기(32px 칸 · 아이콘)는 그대로 두고 투명한 가장자리로 넓힌다(390px 점검 2026-10-12) */
  .dv .dv-crumbs a{position:relative}
  .dv .dv-crumbs a::before{content:"";position:absolute;top:-6px;bottom:-6px;left:-7px;right:-7px}}

/* 사용 가이드 — 「할 일」이 아니라 「읽을 것」이라 채운 버튼과 나눈다(사용자 지적 2026-09-17).
   흰 바탕 + 남색 테두리·글자 + 책 아이콘. 호버에도 남색을 유지한다(공통 CSS 의 color:inherit 방지) */
.dv a.dv-btn.guide,.dv a.dv-btn.guide:visited{background:var(--navy);color:#fff;
  border-color:var(--navy);font-weight:700}
.dv a.dv-btn.guide:hover,.dv a.dv-btn.guide:visited:hover{background:var(--navy-2);color:#fff;
  border-color:var(--navy-2)}
.dv a.dv-btn.guide i{margin-right:6px;line-height:1}
/* 다음 단계 버튼 알림(사용자 2026-10-07 · ✏️ D-201 — D-200 의 「30초 한 바퀴 뒤 끝」을 대체) — 화면마다 다음 단계 버튼 하나에만 `nudge`
   (안내 주 행동 · 내 인증 「지금 할 일」 · 영역 「지금 할 차례」 과제 · 영역에 지금 할 일이 없을 때 「내 인증 현황 보기」). ::before — 옅은 정적 고리(4px · 하늘색 25%)를 늘 둔다.
   ::after — 그 고리 위를 밝은 빛 한 점이 2초에 한 바퀴씩 시계방향으로 계속 돈다(✏️ D-202 — 4.5초는 느리다 · 사용자 2026-10-07)(「지금 다음 단계로 가세요」를 놓치지 않게).
   ✏️ D-203 — 「움직임 끄기」 제어는 잘못 누를 위험이 있어 없앴다(사용자 2026-10-07). 움직임을 멈추는 길은 기기의 「움직임 줄이기」 설정과 마우스·키보드가 닿을 때뿐.
   마우스를 올리거나 키보드로 고르면 이동을 멈추고 고리를 감춘다(visibility — 애니메이션 값이 opacity 를 덮으므로) · 기기 「움직임 줄이기」면 처음부터 정적 고리만(제어 없음).
   @property 를 모르는 오래된 브라우저는 빛이 돌지 않고 한 자리에 머문다(정적 고리는 그대로). 실제 제출·지도교사 승인·반려 버튼에는 쓰지 않는다 */
@property --dv-nudge-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.dv .dv-btn.nudge{position:relative}
.dv .dv-btn.nudge::before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 4px rgba(2,116,214,.25)}
.dv .dv-btn.nudge::after{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;padding:4px;border-radius:calc(var(--r-s) + 4px);pointer-events:none;
  background:conic-gradient(from var(--dv-nudge-a),rgba(124,196,255,0) 0deg 318deg,rgba(124,196,255,.95) 342deg,#fff 352deg,rgba(124,196,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:dv-nudge-spin 2s linear .6s infinite}
@keyframes dv-nudge-spin{to{--dv-nudge-a:360deg}}
.dv .dv-btn.nudge:hover::before,.dv .dv-btn.nudge:hover::after,.dv .dv-btn.nudge:focus-visible::before,.dv .dv-btn.nudge:focus-visible::after{visibility:hidden}
.dv .dv-btn.nudge:hover::after,.dv .dv-btn.nudge:focus-visible::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.dv .dv-btn.nudge::after{animation:none;opacity:0}}


/* ── 알림 ───────────────────────────────────────────── */
.dv-msg{font-size:var(--fs-sm);margin-top:9px;color:var(--ink-2);font-weight:500}
.dv-msg.err{color:var(--coral-ink)}
.dv-msg.warn{color:var(--amber-ink)}
.dv-msg.ok{color:var(--green-ink)}
.dv-note{border-left:3px solid var(--navy-2);background:var(--panel-2);padding:12px 16px;
  border-radius:0 var(--r-s) var(--r-s) 0;font-size:var(--fs-sm);color:var(--ink);
  margin-top:16px;line-height:1.65}
.dv-warnbar{background:var(--amber-bg);border:1px solid var(--amber);color:var(--ink);
  padding:12px 16px;border-radius:var(--r-m);font-size:var(--fs-sm);margin-bottom:14px;line-height:1.65}

/* ── 상태 표시 ──────────────────────────────────────── */
.dv-pill{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);padding:3px 10px;border-radius:999px;
  white-space:nowrap;font-weight:600;border:1px solid var(--line);
  background:var(--panel);color:var(--ink-3)}
.dv-pill.pass{background:var(--green-bg);border-color:var(--green);color:var(--green-ink)}
.dv-pill.review{background:var(--amber-bg);border-color:var(--amber);color:var(--amber-ink)}
.dv-pill.stop{background:var(--coral-bg);border-color:var(--coral);color:var(--coral-ink)}
.dv-pill.info{background:var(--sky-bg);border-color:var(--sky);color:var(--sky-ink)}
/* 상태 코드 그대로 쓰는 알약도 색으로 구분 — 지도교사 화면 학생·영역 상태, 검토함(사용자 지시 2026-09-11) */
.dv-pill.needs_review{background:var(--amber-bg);border-color:var(--amber);color:var(--amber-ink)}
.dv-pill.rejected{background:var(--coral-bg);border-color:var(--coral);color:var(--coral-ink)}
.dv-pill.completed,.dv-pill.passed,.dv-pill.auto_passed{background:var(--green-bg);border-color:var(--green);color:var(--green-ink)}
.dv-pill.in_progress{background:var(--sky-bg);border-color:#b9d6f5;color:var(--navy-2)}
.dv-pill.not_started{background:var(--panel-2);border-color:var(--line);color:var(--ink-4)}
.dv-badge{display:inline-block;padding:1px 7px;font-size:var(--fs-2xs);font-weight:700;border-radius:999px;
  background:var(--panel-3);color:var(--ink-3);margin-left:5px}
.dv-mark{font-weight:700;font-size:var(--fs-base);display:inline-block;text-align:center;width:20px}
.dv-mark.y{color:var(--green-ink)} .dv-mark.n{color:var(--coral-ink)} .dv-mark.na{color:var(--ink-4)}

/* ── 표 ─────────────────────────────────────────────── */
.dv-tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.02)}
/* 선을 칸마다 따로 그린다(separate) — collapse 는 이웃 칸이 선을 반씩 나눠 그려서, 말줄임용 overflow:hidden 칸(td.who·td.rv-who)이
   자기 몫의 반을 잘라 그 열만 줄이 한 칸 어긋나 계단처럼 보였다(검토함 2026-09-14). 선은 아래쪽만 있으므로 겹칠 곳이 없다 */
.dv-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)}
.dv-tbl th,.dv-tbl td{text-align:left;padding:11px 13px;
  border-bottom:1px solid var(--line-soft);vertical-align:middle}
.dv table.dv-tbl thead th{font-size:var(--fs-sm);letter-spacing:0;   /* 고정폭·자간·대문자 머리글 제거 — 한글 머리글이 따로 놀던 문제(모든 화면 · 2026-09-11) */
  text-transform:none;color:var(--ink-3);font-weight:600;
  background:var(--panel-2);white-space:nowrap;padding:11px 13px;
  border-bottom:1px solid var(--line)}
.dv table.dv-tbl tbody td a,.dv table.dv-tbl tbody td a:visited{color:var(--sky-ink);line-height:inherit}   /* :visited — 위 .dv-nav 주석 */
.dv-tbl tr:last-child td{border-bottom:0}
.dv-tbl tbody tr:hover td{background:#fafcff}
.dv-tbl td.v{color:var(--ink-3);font-size:var(--fs-xs)}
.dv-tbl td.n{font-variant-numeric:tabular-nums;text-align:right;font-family:var(--mono)}
.dv-tbl tr.off td{background:var(--panel-2);color:var(--ink-4)}
.dv-empty{padding:28px 14px;text-align:center;color:var(--ink-4);font-size:var(--fs-sm)}
.dv-tbl td.who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-tbl td.code{font-family:var(--mono);font-size:var(--fs-xs);word-break:break-all;
  color:var(--ink-3);line-height:1.5}
.dv-rowacts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ── 원문 미리보기 ──────────────────────────────────── */
.dv-preview-wrap{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--panel)}
.dv-preview-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;
  border-bottom:1px solid var(--line);background:var(--panel-2)}
.dv-preview-head h3{margin:0;font-size:var(--fs-sm);color:var(--navy);font-weight:700}
.dv-preview{background:var(--panel-3);min-height:300px;max-height:500px;
  display:flex;align-items:center;justify-content:center;overflow:auto}
.dv-preview iframe{width:100%;height:500px;border:0;display:block;background:#fff}
.dv-preview img{max-width:100%;height:auto;display:block;margin:auto}
.dv-preview .dv-empty{margin:0}

/* ── 단계 진행 ──────────────────────────────────────── */
.dv-steps{display:flex;border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.02)}
.dv-steps .st{flex:1;min-width:0;padding:11px 13px;
  border-right:1px solid var(--line-soft);background:var(--panel-2);font-size:var(--fs-xs);transition:background .2s ease}
.dv-steps .st:last-child{border-right:0}
.dv-steps .st.done{background:var(--sky-bg)}
.dv-steps .st .s{font-family:var(--mono);font-size:var(--fs-2xs);font-weight:700;
  color:var(--sky-ink);display:block}
.dv-steps .st .t{font-weight:600;color:var(--ink);font-size:var(--fs-xs);display:block;margin:2px 0}
.dv-steps .st .v{color:var(--ink-3);font-size:var(--fs-2xs);display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 사유 카드 ──────────────────────────────────────── */
.dv-reasons{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dv-reasons li{border:1px solid var(--line);border-left-width:3px;
  border-radius:0 var(--r-s) var(--r-s) 0;padding:10px 14px;background:var(--panel-2)}
.dv-reasons li.document{border-left-color:var(--coral)}
.dv-reasons li.quality{border-left-color:var(--amber)}
.dv-reasons li.system{border-left-color:var(--ink-4)}
.dv-reasons .lb{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.dv-reasons .lb b{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.dv-reasons .dt{font-size:var(--fs-xs);color:var(--ink-2);margin-top:3px;line-height:1.65}
.dv-reasons .cd{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-4);
  letter-spacing:.04em}

.dv-check{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-2);
  margin-bottom:8px;cursor:pointer}
.dv-kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--line-soft);font-size:var(--fs-sm)}
.dv-kv:last-child{border-bottom:0}
.dv-kv dt{color:var(--ink-2);margin:0}
.dv-kv dd{margin:0;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

@media (max-width:860px){
  .dv-split,.dv-grid2,.dv-kpis{grid-template-columns:minmax(0,1fr)}
  .dv-steps{flex-direction:column}
  .dv-steps .st{border-right:0;border-bottom:1px solid var(--line-soft)}
  .dv-top{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.dv *{transition:none!important}}
/* ── 참여자 화면 (P00·P01·P02) ───────────────────────── */
.dv-banner{position:relative;isolation:isolate;display:flex;align-items:center;
  min-height:160px;margin:0 -22px 26px;padding:26px 34px;overflow:hidden;
  border:0;border-radius:0;border-bottom:3px solid var(--sky);
  background:linear-gradient(112deg,#d6e9fd 0%,var(--sky-bg) 100%);
  box-shadow:none}
.dv-banner:before,.dv-banner:after{content:"";position:absolute;z-index:-1;border-radius:999px}
.dv-banner:before{width:280px;height:280px;right:80px;top:-176px;background:rgba(255,255,255,.42)}
.dv-banner:after{width:190px;height:190px;right:-55px;bottom:-115px;background:rgba(49,159,253,.12)}
.dv-banner-copy{position:relative;z-index:1;max-width:690px;padding-right:20px;min-width:0}   /* min-width:0 — 브레드크럼 길이만큼 늘어나 잘리지 않게(D-142) */
.dv-banner .eyebrow{margin-bottom:5px;color:var(--navy-2)}
.dv-banner h1{margin:0 0 7px;color:var(--navy);font-size:clamp(23px,2.8vw,31px);
  font-weight:700;letter-spacing:-.035em;text-align:left;text-wrap:initial}
.dv-banner-copy{text-align:left}
.dv-banner-sub{max-width:65ch;color:var(--ink-2);font-size:var(--fs-md);line-height:1.62}
.dv-banner-art{position:absolute;right:20px;top:50%;width:330px;height:142px;
  transform:translateY(-50%);color:var(--navy);pointer-events:none}
/* 간결형 배너(banner(compact=True)) — 높이를 줄이고 바로 밑 필터 줄(.dv-subbar.attached)과 한 덩어리로 붙인다 */
.dv-banner.compact{min-height:0;margin-bottom:0;padding:18px 34px 16px}
.dv-banner.compact h1{margin-bottom:4px}
.dv-banner.compact .dv-banner-art{width:250px;height:108px}
/* 브레드크럼 배너(D-144) — 큰 제목을 감춰(D-143) 막대와 설명 한 줄만 남으니 높이를 내용에 맞춘다(160px → 약 118px) · 그림은 간결형 크기 ·
   설명 첫 글자는 집 아이콘 왼쪽 끝에(막대 테두리 1 + 안쪽 여백 3 + 집 칸 32px 가운데 아이콘) — 휴대폰은 들여쓰기 없음(아래 640px 규칙) */
.dv-banner.has-crumbs{min-height:0;padding:20px 34px}
.dv-banner.has-crumbs .dv-banner-art{width:250px;height:108px}
.dv-banner.has-crumbs .dv-banner-sub{padding-left:calc(4px + (32px - var(--fs-md)) / 2)}
/* 장면 그림 배너(안내 화면만 · banner(art_img=…) · UX2 일러스트 2026-10-07) — SVG 대신 오른쪽에 그림. 그림은 하늘 바탕이 채워진 불투명이라
   왼쪽 끝을 배너 바탕으로 흐리게 이어 붙인다(mask). 글은 왼쪽 HTML 그대로 · 그림과 겹치지 않게 글 폭을 줄인다. 휴대폰은 글 아래에 그림 */
.dv-banner.has-img{min-height:240px}
.dv-banner.has-img .dv-banner-copy{max-width:58%}
.dv-banner-img{position:absolute;right:0;top:0;bottom:0;z-index:0;height:100%;width:auto;max-width:44%;object-fit:cover;object-position:right center;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%);mask-image:linear-gradient(to right,transparent 0,#000 24%)}
@media (max-width:640px){
  .dv-banner.has-img{flex-direction:column;align-items:stretch;min-height:0;padding-bottom:0}
  .dv-banner.has-img .dv-banner-copy,.dv-banner.has-img .dv-banner-sub{max-width:100%}
  .dv-banner-img{position:static;display:block;width:calc(100% + 36px);max-width:none;height:150px;margin:14px -18px 0;object-position:62% 45%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%)}
}
.dv-subbar.attached{margin:0 -22px 18px;padding:10px 34px;background:var(--panel);border-bottom:1px solid var(--line)}
.dv-hero{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);
  padding:20px 24px;margin-bottom:20px;display:flex;flex-direction:column;gap:12px}
.dv-hero.muted{background:var(--panel-2);border-color:var(--line)}
.dv-hero-main{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.dv-hero-text h2{font-size:var(--fs-xl);font-weight:700;color:var(--navy);margin:0 0 4px}
.dv-hero-text p{font-size:var(--fs-md);color:var(--ink-2);line-height:1.5;margin:0}
/* P00 개인 안내의 「현재 진행」·「다음 할 일」 줄(D-137) */
.dv-hero-text p.dv-hero-line+p.dv-hero-line{margin-top:2px}
.dv-hero-lb{display:inline-block;margin-right:8px;font-weight:700;color:var(--navy)}
.dv-hero-act{flex:none}

/* 4단계 로드맵 스텝퍼 */
.dv-roadmap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:22px}
.dv-roadmap-step{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-m);
  padding:14px 16px;display:flex;flex-direction:column;gap:4px;position:relative;
  transition:border-color .15s ease,background .15s ease}
.dv-roadmap-step.active{background:var(--panel);border-color:var(--sky-dark);
  box-shadow:0 3px 10px rgba(37,132,221,.12)}
.dv-roadmap-step.done{background:var(--green-bg);border-color:#cfe0a8}
.dv-roadmap-num{font-size:var(--fs-xs);font-weight:700;color:var(--ink-3)}   /* 「1단계 · 지금」 — 한글이라 숫자 글꼴·대문자 간격을 쓰지 않는다(v4.195) */
.dv-roadmap-step.active .dv-roadmap-num{color:var(--sky-ink)}
.dv-roadmap-step.done .dv-roadmap-num{color:var(--green-ink)}
.dv-roadmap-title{font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.dv-roadmap-desc{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.45}

/* 트랙 그리드 */
.dv-track-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.dv-track-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);
  padding:12px 16px;display:flex;flex-direction:column;gap:8px;box-shadow:0 1px 4px rgba(0,0,0,.02)}
.dv-track-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.dv-track-card header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
/* 알약은 한 줄로 두고(줄바꿈 금지 · flex 축소 금지) 제목 쪽이 접힌다 — 휴대폰 360px 에서 알약이 두 줄로 깨졌다(사용자 지적 2026-09-23).
   트랙 카드의 개인 강조(테두리·「내 배정」 알약)는 없다 — 트랙 개요는 모든 사람에게 같다(D-137) */
.dv-track-badge{font-size:var(--fs-2xs);font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap;flex:0 0 auto;margin-top:2px;
  background:var(--panel-3);color:var(--ink-3)}
.dv-track-title{font-size:var(--fs-base);font-weight:700;color:var(--navy);margin:0;min-width:0;line-height:1.4}
.dv-track-meta{font-size:var(--fs-sm);color:var(--ink-3)}
/* P00 한 화면(사용자 요청 2026-09-30 「밑이 살짝 잘린다」 · 1080p) — 소개 화면만(.dv-intro) 상자 여백·간격을 줄인다 */
.dv-intro .dv-hero{padding:16px 22px;margin-bottom:14px}
.dv-intro .dv-roadmap{margin-bottom:14px}
.dv-intro .dv-roadmap-step{padding:12px 14px}
.dv-intro .dv-card{padding:16px 20px;margin-bottom:12px}
.dv-intro .dv-track-grid{margin-top:10px;gap:12px}
.dv-track-meta b{color:var(--ink)}

/* P01 영역 카드 */
.dv-area-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}
/* 학생 카드(영역·과제·요약·사이드바)는 테두리만 — 카드 전체를 누를 수 없으므로 호버로 떠오르지 않는다(v4.195 · 검사 ⑤) */
.dv-area-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);
  padding:18px 20px;gap:14px}
/* P01 영역 카드 썸네일 (학교급별 · 영역 주제별) */
.dv-area-thumb{display:block;position:relative;width:100%;aspect-ratio:16 / 9;border-radius:var(--r-s);overflow:hidden;background:var(--panel-2);border:1px solid var(--line-soft);text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.dv-area-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s cubic-bezier(0.16,1,0.3,1)}
.dv-area-card:hover .dv-area-thumb img,.dv-area-thumb:hover img{transform:scale(1.04)}
.dv-area-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.dv-area-card-title{display:flex;align-items:center;gap:10px}
.dv-area-card-title .seq{font-size:var(--fs-sm);font-weight:700;color:var(--ink-3)}
.dv-area-card-title h3{font-size:var(--fs-lg);font-weight:700;color:var(--navy);margin:0}
.dv-area-card-stats{display:flex;align-items:center;gap:14px;font-size:var(--fs-sm);color:var(--ink-2);flex-wrap:wrap}
.dv-stat-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-s);
  background:var(--panel-2);border:1px solid var(--line-soft);font-size:var(--fs-xs)}
.dv-stat-pill.req{background:var(--coral-bg);border-color:#f8d3cc;color:var(--coral-ink)}
.dv-stat-pill.req.pass{background:var(--green-bg);border-color:#cfe0a8;color:var(--green-ink)}
.dv-stat-pill.opt{background:var(--sky-bg);border-color:#d0e2fa;color:var(--navy-2)}
.dv-stat-pill.opt.pass{background:var(--green-bg);border-color:#cfe0a8;color:var(--green-ink)}
.dv-progress{height:8px;background:var(--panel-3);border-radius:999px;overflow:hidden;width:100%}
.dv-progress-bar{height:100%;background:var(--sky);border-radius:999px;transition:width .3s ease}
.dv-progress-bar.done{background:var(--green)}
.dv-area-card-foot{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:auto;
  padding-top:12px;border-top:1px solid var(--line-soft)}
.dv-area-card-foot .dv-btn{align-self:flex-end}

/* P02 2열 레이아웃 */
.dv-split-area{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.dv-sidebar{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);
  padding:18px 20px;position:sticky;top:var(--dv-stick-top,20px)}
.dv-sidebar h3{font-size:var(--fs-base);font-weight:700;color:var(--navy);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
.dv-sidebar-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-sm)}
.dv-sidebar-list li{display:flex;justify-content:space-between;align-items:center;color:var(--ink-2)}
.dv-sidebar-list li b{color:var(--ink)}
/* 영역 화면 「내 진행 현황」 숫자 줄 — 이름 · 숫자(오른쪽 맞춤 · 고정 폭 숫자) · ✓ 칸(늘 자리 확보) */
.dv-prog-row{display:grid;grid-template-columns:minmax(0,1fr) auto 14px;align-items:baseline;column-gap:4px}
.dv-prog-row .lb{color:var(--ink-3)}
.dv-prog-row b{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.dv-prog-row .ck{text-align:center;color:var(--green-ink);font-weight:700}
.dv-prog-row.wait,.dv-prog-row.wait .lb{color:var(--sky-ink)}

/* P02 과제 카드 */
.dv-task{border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel);
  margin-bottom:16px;overflow:hidden}
.dv-task>header{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
/* P03 기준 행 (3-3) */
.dv-crit-title{flex:1;font-size:var(--fs-md);color:var(--ink)}   /* P03 기준 카드 머리 글 — 모바일 규칙이 폭을 바꿀 수 있게 인라인 대신 클래스 */
.dv-crit-no{width:24px;height:24px;border-radius:50%;background:var(--sky-bg);color:var(--navy-2);font-size:var(--fs-xs);font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.dv-result{margin:0 18px 12px;padding:12px 14px;border-radius:var(--r-s);border:1px solid var(--line-soft);background:var(--panel-2);font-size:var(--fs-sm)}
.dv-result>b{display:block;color:var(--navy);margin-bottom:4px}
.dv-result.passed,.dv-result.auto_passed{background:var(--green-bg);border-color:#cfe0a8}
.dv-result.passed>b,.dv-result.auto_passed>b{color:var(--green-ink)}
.dv-result.rejected{background:var(--coral-bg);border-color:#f8d3cc}
.dv-result.rejected>b{color:var(--coral-ink)}
.dv-result .meta{font-size:var(--fs-xs);color:var(--ink-3)}
.dv-result .reason{margin-top:6px;font-size:var(--fs-sm);color:var(--ink)}
.dv-result .reason b{margin-right:6px;color:var(--coral-ink)}
.dv-form{margin:0 18px 14px;padding:14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);display:flex;flex-direction:column;gap:10px}
.dv-field{display:flex;flex-direction:column;gap:6px}
.dv-field .lb{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);font-style:normal}
.dv-form label,.dv-form .dv-check{font-style:normal;font-weight:500}
.dv-field .lb small{font-weight:500;color:var(--ink-4);margin-left:6px}
.dv-field textarea,.dv-field input[type=url]{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-s);font-size:var(--fs-md);font-family:inherit;line-height:1.55}
.dv-field textarea:focus,.dv-field input[type=url]:focus{outline:none;border-color:var(--sky)}
.dv-field .cnt{font-size:var(--fs-xs);color:var(--ink-3);align-self:flex-end}
.dv-field .hint{font-size:var(--fs-xs);color:var(--ink-4)}
.dv-check{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-2)}
.dv-form-problems{background:var(--coral-bg);border:1px solid #f8d3cc;border-radius:var(--r-s);padding:10px 12px;font-size:var(--fs-sm);color:var(--ink)}
.dv-form-problems b{color:var(--coral-ink);display:block;margin-bottom:4px}
.dv-form-problems ul{margin:0;padding-left:18px}
.dv-form-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.dv-form-note{font-size:var(--fs-xs);color:var(--ink-3)}
.dv-form-placeholder{margin:0 18px 14px;padding:12px 14px;border:1px dashed var(--line);border-radius:var(--r-s)}
.dv-form-soon{margin-top:6px;font-size:var(--fs-sm);color:var(--ink-4)}
.dv-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:var(--fs-sm);margin:0}
/* P08 사용 가이드 — 긴 글 화면(2026-09-16). 번호·글머리 목록과 문답만 필요하다 */
/* ── P08 가이드 — 설명 옆에 실제 화면 조각을 둔다 ────────────────────
   조각은 흉내가 아니라 화면과 같은 부품 클래스(.dv-task·.dv-pill·.dv-precheck …)를 쓴다.
   그래서 화면 CSS 가 바뀌면 가이드 그림도 함께 바뀐다 — 가이드가 화면과 어긋나지 않는다. */
/* 내 인증 현황 상단 행동 배너(D-186 ① · UX2-R1 4.5.3) — 영역 카드(흰 둥근 카드)와 구별되는 전체 폭 띠: 상태 색 바탕 · 왼쪽 굵은 강조선 · 큰 아이콘 ·
   상태 라벨 · 제목 · 한 줄 행동 설명 · 오른쪽 주 버튼 하나. 사용 가이드 화면 그림도 같은 모양을 쓴다 */
.dv-focus{--fc:var(--navy);--fbg:#eef4fb;margin-bottom:28px;background:var(--fbg);border-left:8px solid var(--fc);border-radius:4px;padding:24px 28px}
.dv-focus.is-fix{--fc:var(--coral);--fbg:var(--coral-bg)} .dv-focus.is-wait{--fc:var(--amber);--fbg:var(--amber-bg)}
.dv-focus.is-badge{--fc:var(--gold);--fbg:#fdf6e3} .dv-focus.is-peer{--fc:var(--sky-dark);--fbg:var(--sky-bg)}
.dv-focus.is-done,.dv-focus.is-peer_done{--fc:var(--green);--fbg:var(--green-bg)}
.dv-focus-main{display:flex;align-items:center;gap:20px 24px}
.dv-focus-ic{flex:none;display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--fc);color:#fff;font-size:var(--fs-4xl)}
.dv-focus-body{flex:1;min-width:0}
.dv .dv-focus-tag{margin:0 0 6px;font-size:var(--fs-sm);font-weight:700;letter-spacing:.02em;color:var(--fc)}
.dv-focus.is-fix .dv-focus-tag{color:var(--coral-ink)} .dv-focus.is-wait .dv-focus-tag{color:var(--amber-ink)} .dv-focus.is-badge .dv-focus-tag{color:var(--gold-ink)}
.dv-focus.is-done .dv-focus-tag,.dv-focus.is-peer_done .dv-focus-tag{color:var(--green-ink)}
.dv-focus .dv-rec-meta{margin:0 0 2px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-3)}
.dv-focus .dv-rec-title{margin:0;font-size:var(--fs-2xl);font-weight:700;color:var(--navy);line-height:1.35;text-wrap:balance}
.dv .dv-focus-line{margin:6px 0 0;font-size:var(--fs-md);color:var(--ink-2);line-height:1.6}
.dv-focus-act{flex:none}
.dv-focus-act .dv-btn{min-height:52px;padding-left:26px;padding-right:26px;font-size:var(--fs-md);font-weight:700}
.dv-focus-badge{flex:none;width:140px;height:140px;object-fit:contain}
/* 배지(UX2-R2 4.6.3) — 지금 상태가 주제목 · 등급·설명·발급일은 같은 서체의 보조 위계 · 상태 색은 보조(글자가 늘 상태를 말한다) */
.dv-focus .dv-badge-st.is-eligible{color:var(--sky-ink)} .dv-focus .dv-badge-st.is-issued{color:var(--green-ink)} .dv-focus .dv-badge-st.is-checking{color:var(--amber-ink)}
.dv .dv-badge-tier{margin:4px 0 0;font-size:var(--fs-lg);font-weight:700;color:var(--navy)}
.dv .dv-badge-date{margin:6px 0 0;font-size:var(--fs-sm);color:var(--ink-3);font-variant-numeric:tabular-nums}
.dv-pill.badge-eligible{background:var(--sky-bg);border-color:var(--sky);color:var(--sky-ink)}
.dv-pill.badge-issued{background:var(--green-bg);border-color:var(--green);color:var(--green-ink)}
.dv-pill.badge-checking{background:var(--amber-bg);border-color:var(--amber);color:var(--amber-ink)}
.dv-focus-sub{margin-top:18px;padding-top:14px;border-top:1px solid rgba(0,0,0,.08)}
.dv-focus-sub h3{margin:0 0 8px;font-size:var(--fs-md);font-weight:700;color:var(--ink-2)}
/* 기다리는 동안 할 수 있어요(UX2-R2 4.6.2) — 한 줄 = 영역 라벨 · 할 일(가장 크게) · 목적지를 말하는 버튼. 카드·그림자 없이 행 구분선·정렬로 */
.dv-focus-sub ul{list-style:none;margin:0;padding:0}
.dv-wait-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:10px 0;border-top:1px solid rgba(0,0,0,.08)}
.dv-wait-row:first-child{border-top:0}
.dv-wait-row .m{font-size:var(--fs-sm);font-weight:700;color:var(--amber-ink);padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.7)}
.dv-wait-row .t{font-size:var(--fs-lg);font-weight:700;color:var(--ink);min-width:0}
.dv-wait-row .dv-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:640px){.dv-focus{padding:18px 16px;border-left-width:6px}.dv-focus-main{flex-wrap:wrap}.dv-focus-ic{width:48px;height:48px;font-size:var(--fs-3xl)}
  .dv-focus-body{flex-basis:calc(100% - 72px)}.dv-focus-act{flex-basis:100%}.dv-focus-act .dv-btn{width:100%;justify-content:center}
  .dv-focus-badge{width:96px;height:96px}.dv-focus.is-badge .dv-focus-body{flex-basis:100%}
  .dv-focus .dv-rec-title{font-size:var(--fs-xl)}
  .dv-wait-row{grid-template-columns:auto minmax(0,1fr)}.dv-wait-row .dv-btn{grid-column:1 / -1;width:100%}}
.dv-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:start}
.dv-g-said>:first-child{margin-top:0}
.dv-g-said>:last-child{margin-bottom:0}
.dv-g-shot{border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel);overflow:hidden}
.dv-g-shot-head{padding:8px 12px;background:var(--panel-2);border-bottom:1px solid var(--line);
  font-size:var(--fs-2xs);color:var(--ink-3);line-height:1.5}
.dv-g-shot-head b{display:block;color:var(--ink-2);font-size:var(--fs-xs);font-weight:700}
.dv-g-shot-body{padding:13px}
.dv-g-shot-body>:last-child{margin-bottom:0}
.dv-g-cap{padding:9px 12px;border-top:1px solid var(--line-soft);background:var(--panel-2);
  font-size:var(--fs-2xs);color:var(--ink-3);line-height:1.6}
/* 조각 안에서는 화면 부품을 조금 줄여 설명 옆에 들어가게 한다(부품 규칙 자체는 건드리지 않는다) */
.dv-g-shot-body .dv-task{margin-bottom:9px}
.dv-g-shot-body .dv-task:last-child{margin-bottom:0}
.dv-g-pills{display:flex;flex-wrap:wrap;gap:7px}
@media (max-width:980px){.dv-g{grid-template-columns:minmax(0,1fr);gap:15px}}
.dv-guide-steps{margin:8px 0 12px;padding-left:1.35em;display:grid;gap:9px;
  font-size:var(--fs-base);color:var(--ink);line-height:1.7}
.dv-guide-steps>li>b{color:var(--navy)}
.dv-guide-list{margin:6px 0 12px;padding-left:1.25em;display:grid;gap:7px;
  font-size:var(--fs-base);color:var(--ink);line-height:1.7}
.dv-guide-steps .dv-sub,.dv-guide-list .dv-sub{display:block;margin-top:3px;color:var(--ink-3);font-size:var(--fs-sm)}
.dv-guide-faq{grid-template-columns:minmax(0,1fr);gap:0;margin-top:6px}
.dv-guide-faq dt{margin-top:13px;color:var(--ink);font-weight:700;font-size:var(--fs-base)}
.dv-guide-faq dt:first-child{margin-top:0}
.dv-guide-faq dd{margin:3px 0 0;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.7}
/* 파일 제출 가이드(P08-2) — 실제 화면 부품이 없는 예제(프로그램 메뉴 경로 · PDF 쪽 모양 · 가린 이수증)만 여기서 그린다.
   과제 안내 상자·순서 상자·링크 칸은 실제 부품 클래스를 그대로 쓴다 */
.dv-g-more{font-size:var(--fs-sm);color:var(--ink-2)}
.dv-g-paths{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.dv-g-paths>li{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:10px;align-items:baseline}
.dv-g-paths>li>b{font-size:var(--fs-sm);color:var(--ink)}
.dv-g-path{display:flex;flex-wrap:wrap;align-items:center;gap:5px 6px;font-size:var(--fs-xs);color:var(--ink-3)}
.dv-g-key{display:inline-block;padding:2px 8px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);color:var(--ink-2);white-space:nowrap}
.dv-g-key.hit{border-color:#cfe3f8;background:var(--sky-bg);color:var(--navy);font-weight:600}
.dv-g-compare{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px}
.dv-g-compare b{display:block;margin-bottom:8px;font-size:var(--fs-xs);font-weight:700}
.dv-g-compare .dv-g-good{color:var(--green-ink)}
.dv-g-compare .dv-g-bad{color:var(--coral-ink)}
.dv-g-pages{display:flex;gap:8px;align-items:flex-start}
.dv-g-page{width:56px;aspect-ratio:1/1.414;padding:6px;border:1px solid var(--line);border-radius:3px;background:var(--panel);display:grid;gap:4px;align-content:start}
.dv-g-page i{display:block;height:3px;border-radius:1px;background:var(--line)}
.dv-g-page .img{display:block;height:26px;border-radius:2px;background:var(--panel-3)}
.dv-g-page.tiny{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
.dv-g-page.tiny .img{height:13px}
.dv-g-page-no{display:block;margin-top:4px;text-align:center;font-size:var(--fs-2xs);color:var(--ink-3)}
.dv-g-doc{max-width:320px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel)}
.dv-g-doc h4{margin:0 0 12px;text-align:center;font-size:var(--fs-md);font-weight:700;letter-spacing:.3em;color:var(--ink)}
.dv-g-doc dl{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:6px 10px;margin:0;font-size:var(--fs-xs)}
.dv-g-doc dt{color:var(--ink-3)}
.dv-g-doc dd{margin:0;color:var(--ink)}
.dv-g-mask{display:inline-block;width:9em;height:1.1em;vertical-align:middle;border-radius:2px;background:var(--ink-2)}
@media (max-width:560px){.dv-g-compare{grid-template-columns:minmax(0,1fr)}}
.dv-dl dt{color:var(--ink-3);font-weight:600}.dv-dl dd{margin:0;color:var(--ink-2)}
/* A03 검토함 (3-6 · 리뷰 반영) */
.rv-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:6px}
.rv-tabs{flex:1;min-width:0;margin-bottom:12px}
.rv-today{background:var(--sky-bg);border:1px solid #cfe2fb;border-radius:var(--r-m);padding:10px 14px;font-size:var(--fs-sm);color:var(--ink-2);min-width:260px}
.rv-today b{display:block;color:var(--navy);font-size:var(--fs-md);margin-bottom:2px}
.rv-today.alert{background:var(--amber-bg);border-color:#f3dcb0}
.rv-filters{margin-bottom:8px}
.rv-quick{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 12px;font-size:var(--fs-xs);color:var(--ink-3)}
.rv-chip{padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink-2);font-size:var(--fs-xs);text-decoration:none}
.dv a.rv-chip,.dv a.rv-chip:visited,.dv a.rv-chip:hover,.dv a.rv-chip:visited:hover{color:var(--ink-2)}   /* 링크 글자색 규칙 우선순위 · 호버에도 같은 색 */
.rv-chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.rv-chip:hover{text-decoration:none;border-color:var(--sky)}
.rv-total{margin-left:auto;color:var(--ink-3)}
.rv-tbl tbody tr{cursor:pointer}
/* 열마다 머리글과 본문 글자의 시작선이 어긋나던 문제(2026-09-14): ① 머리글은 공통 표 규칙(11px 13px)·본문은 검토함 규칙(7px 10px)이라
   3px 차이 ② 첫 열의 열림 표시 왼쪽 테두리 4px 가 본문에만 있었다 → 머리글도 같은 안쪽 여백·같은 테두리 자리 */
.dv table.dv-tbl.rv-tbl thead th{padding:7px 10px}
.rv-tbl thead th:first-child{border-left:4px solid transparent}
.rv-tbl tbody tr td:first-child{border-left:4px solid transparent}
.rv-tbl tbody tr.is-open td{background:var(--sky-bg)}
.rv-tbl tbody tr.is-open td:first-child{border-left-color:var(--sky)}
.rv-tbl .rv-task{font-weight:600;color:var(--ink)}
.rv-detail{background:var(--panel);border:1px solid #b8d4f2;border-radius:var(--r-m);box-shadow:0 6px 20px rgba(0,65,108,.08);padding:0;position:sticky;top:var(--dv-stick-top,20px);max-height:calc(100vh - 120px);display:flex;flex-direction:column;overflow:hidden}
.rv-detail #rv-body{overflow:auto;padding:18px 20px 0;flex:1}
.rv-empty{padding:40px 20px;text-align:center;color:var(--ink-4);font-size:var(--fs-sm)}
.rv-sum{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.rv-name{font-size:var(--fs-xl);color:var(--navy)}
.rv-sum .v,.rv-crit-box .v,.rv-sec .v{font-size:var(--fs-xs);color:var(--ink-3)}
.rv-crit-box{margin-top:12px;padding:12px 14px;background:var(--panel-2);border-left:4px solid var(--navy);border-radius:var(--r-s)}
.rv-crit-box .lb{font-size:var(--fs-2xs);font-weight:700;color:var(--navy-2);letter-spacing:.04em}
.rv-crit{font-size:var(--fs-lg);font-weight:700;color:var(--ink);margin:3px 0 4px;line-height:1.4}
.rv-sec{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:var(--fs-sm)}
.rv-sec>b{display:block;color:var(--navy);margin-bottom:8px;font-size:var(--fs-sm)}
.rv-sec>b small{font-weight:500;color:var(--ink-4);margin-left:6px}
.rv-sec .hint{font-size:var(--fs-xs);color:var(--ink-4);margin-top:6px}
.rv-evidence{min-height:120px}
.rv-img{max-width:100%;max-height:420px;border:1px solid var(--line);border-radius:var(--r-s);display:block}
.rv-pdf{width:100%;height:380px;border:1px solid var(--line);border-radius:var(--r-s);margin-bottom:6px}
.rv-ans{margin-bottom:10px}.rv-ans b{color:var(--ink-3);font-size:var(--fs-xs);display:block}.rv-ans p{margin:2px 0 0;white-space:pre-wrap;background:var(--panel-2);padding:10px 12px;border-radius:var(--r-s);font-size:var(--fs-md);line-height:1.6}
.rv-auto ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.rv-auto li{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm)}
.rv-auto li.ok span{background:var(--green-bg);color:var(--green-ink)}.rv-auto li.bad span{background:var(--coral-bg);color:var(--coral-ink)}.rv-auto li.warn span{background:var(--panel-3);color:var(--ink-3)}
.rv-auto li em{font-style:normal;color:var(--coral-ink);font-size:var(--fs-xs)}
.rv-auto li.warn em{color:var(--ink-3)}
.rv-verdict{margin-top:8px;padding:8px 12px;border-radius:var(--r-s);background:var(--sky-bg);color:var(--navy);font-weight:600;font-size:var(--fs-sm)}
.rv-reject{background:var(--coral-bg);border:1px solid #f8d3cc;border-top:1px solid #f8d3cc;border-radius:var(--r-s);padding:12px 14px;margin-top:16px}
.rv-reject>b{color:var(--coral-ink)}
/* D-100 ① 사후 반려 영향 경고 — 이 반려로 영역 완료가 취소되고 수료증이 회수 대상이 될 때만(서버 모의 계산) */
.rv-revoke-warn{margin:0 0 10px;padding:8px 10px;background:#fff;border:1px solid #f0c4bb;border-radius:var(--r-s);color:var(--coral-ink);font-size:var(--fs-sm);font-weight:600;line-height:1.55}
.rv-revoke-warn b{margin-right:6px}
.rv-reject select{width:100%;padding:8px 10px;border:1px solid #f0c4bb;border-radius:var(--r-s);font-size:var(--fs-sm);background:#fff;margin-bottom:6px}
.rv-sec textarea,.rv-sec input[type=text]{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-s);font-size:var(--fs-sm);font-family:inherit;background:#fff}
.rv-actions{position:sticky;bottom:0;background:var(--panel);border-top:1px solid var(--line);padding:12px 20px;margin:16px -20px 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rv-actions-main{display:flex;gap:8px;flex:1;justify-content:center}
.rv-actions .dv-btn.sm{padding:9px 18px;font-size:var(--fs-md)}
.dv a.dv-btn.rv-btn-reject,.dv button.dv-btn.rv-btn-reject{background:#fff;color:var(--coral-ink);border-color:#e8bcb3}
.dv button.dv-btn.rv-btn-reject:hover:not(:disabled){background:var(--coral-bg);border-color:var(--coral);color:var(--coral-ink)}
.rv-auto-next{font-size:var(--fs-xs);color:var(--ink-3);display:flex;align-items:center;gap:4px;white-space:nowrap}
.dv-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.dv-filters select,.dv-filters input[type=search]{padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-s);font-size:var(--fs-sm);background:var(--panel)}
.dv-filters input[type=search]{min-width:200px}
.rv-filters{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;margin:0 0 14px}
.rv-filters select{display:inline-block;width:auto!important;min-width:110px;max-width:150px;flex:0 0 auto;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-s);font-size:var(--fs-sm);background:var(--panel)}
.rv-filters input[type=search]{flex:1 1 auto;min-width:180px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-s);font-size:var(--fs-sm);background:var(--panel)}
@media (max-width:900px){.rv-filters{flex-wrap:wrap}.rv-filters select{flex:1 1 calc(50% - 4px);max-width:none}.rv-filters input[type=search]{flex:1 1 100%}}
@media (max-width:540px){.rv-filters select{flex:1 1 100%}}
.rv-split{grid-template-columns:minmax(460px,1fr) 580px;gap:20px;align-items:start}
@media (max-width:1080px){.rv-split{grid-template-columns:minmax(0,1fr)}.rv-detail{max-height:none;order:1;position:static}}
.rv-ans-box{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-s);padding:12px 14px;margin-bottom:10px}
.rv-ans-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:var(--fs-xs)}
.rv-ans-head b{color:var(--navy)}
.rv-ans-count{font-size:var(--fs-2xs);font-weight:600;padding:2px 7px;border-radius:999px;background:var(--panel-3);color:var(--ink-3)}
.rv-ans-empty{border-color:#f8d3cc!important;background:#fffaf9!important}
/* A03 판정 패널 골격(2026-09-11 시안): 좌우 반반 · 패널 안 2열 · 큰 뷰어 · 상태 색 · 고정 바 */
.rv-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:1300px){.rv-split{grid-template-columns:minmax(0,1fr) 560px}}
@media (max-width:1080px){.rv-split{grid-template-columns:minmax(0,1fr)}}
.rv-detail{max-height:calc(100vh - 96px);min-height:520px}
.rv-detail #rv-body{padding:14px 16px 0}
.rv-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.rv-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.rv-who .rv-name{font-size:var(--fs-xl)}
.rv-head-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.rv-wait-badge{font-size:var(--fs-sm);padding:4px 10px;border-radius:999px;background:var(--panel-2);color:var(--ink-2)}
.rv-wait-badge b{margin-left:2px}
.rv-wait-badge.warm{background:var(--amber-bg);color:var(--amber-ink)}.rv-wait-badge.hot{background:var(--coral-bg);color:var(--coral-ink)}
.rv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:12px}
.rv-grid>.wide{grid-column:1/-1}
@media (max-width:1300px){.rv-grid{grid-template-columns:minmax(0,1fr)}}
.rv-card{border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel);padding:12px 14px;min-width:0;font-size:var(--fs-sm)}
.rv-card>h4,.rv-card>summary{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:var(--fs-md);font-weight:700;color:var(--navy)}
.rv-card>h4 small{font-weight:500;color:var(--ink-4);font-size:var(--fs-xs)}
.rv-card>h4 .rv-h4-btn{margin-left:auto;padding:4px 10px;font-size:var(--fs-xs)}
.rv-card>h4 .dv-pill{margin-left:auto}
.rv-card .hint{font-size:var(--fs-xs);color:var(--ink-4);margin-top:6px}
.rv-card .v{font-size:var(--fs-xs);color:var(--ink-3)}
.rv-path{font-size:var(--fs-xs);color:var(--ink-3);margin-bottom:4px}.rv-path span{color:var(--ink-4);margin:0 2px}
.rv-card .rv-crit{font-size:var(--fs-lg);margin:2px 0 6px}
.rv-crit-sm{font-size:var(--fs-md);font-weight:600;color:var(--ink);margin-bottom:6px;line-height:1.45}
.rv-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.rv-guide{margin-top:8px;font-size:var(--fs-sm)}.rv-guide summary{cursor:pointer;color:var(--sky-ink);font-weight:600}
.rv-guide-body{margin-top:6px;display:flex;flex-direction:column;gap:6px;color:var(--ink-2)}
.rv-guide-body b{display:block;font-size:var(--fs-xs);color:var(--navy)}.rv-guide-body p{margin:2px 0 0;white-space:pre-wrap;line-height:1.5}
.rv-area-row{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:var(--fs-sm)}
.rv-area-lb{width:34px;color:var(--ink-3)}.rv-area-row b{min-width:36px;text-align:right}.rv-area-row b.ok{color:var(--green-ink)}
.rv-area-bar{flex:1}
.rv-area-st{margin-top:4px}
.rv-ev-card{grid-row:span 2}
@media (max-width:1300px){.rv-ev-card{grid-row:auto}}
.rv-ev-tabs{display:flex;gap:4px;margin-bottom:8px;border-bottom:1px solid var(--line-soft)}
.rv-ev-tab{border:0;background:transparent;padding:6px 10px;font-size:var(--fs-sm);color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.rv-ev-tab.on{color:var(--navy);font-weight:700;border-bottom-color:var(--navy)}
.rv-img{max-height:640px;width:auto;max-width:100%;margin:0 auto}
.rv-pdf{height:640px;margin-bottom:0}
.rv-ev-meta{display:flex;gap:12px;align-items:center;margin-top:6px;font-size:var(--fs-xs);color:var(--ink-3)}
.rv-ev-meta span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-ev-note{margin-top:6px}
.rv-ans-text{white-space:pre-wrap;line-height:1.6;font-size:var(--fs-md);color:var(--ink)}
.rv-ans-none{color:var(--coral-ink);font-weight:600}
.rv-checklist-card{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-s);padding:10px 12px;margin-top:6px}
.rv-checklist-card>b{display:block;font-size:var(--fs-xs);color:var(--navy);margin-bottom:6px}
.rv-checklist-item{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);padding:3px 0}
.rv-checklist-item span{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-2xs);background:var(--panel-3);color:var(--ink-3)}
.rv-checklist-item.checked span{background:var(--green-bg);color:var(--green-ink)}
.rv-checklist-item small{color:var(--ink-4)}
.rv-links .rv-link-row{padding:6px 0;border-bottom:1px solid var(--line-soft);word-break:break-all;font-size:var(--fs-sm)}
/* 게시판 활동 제출(D-46) — 제출 순간의 글·댓글·공감 목록. 제목은 게시판 글로 가는 링크 */
.rv-act h5{margin:12px 0 4px;font-size:var(--fs-xs);color:var(--ink-3);font-weight:700}
.rv-act-row{padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-sm)}
.rv-act-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.rv-act-head .v{margin-left:auto;font-size:var(--fs-xs);color:var(--ink-4)}
.rv-act-text{margin-top:2px;color:var(--ink-2);overflow-wrap:anywhere}
.rv-auto ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.rv-auto li{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-sm)}
.rv-auto li:last-child{border-bottom:0}
.rv-auto-lb{display:flex;flex-direction:column;gap:1px;color:var(--ink-2);min-width:0}
.rv-auto li em{font-style:normal;font-size:var(--fs-xs);color:var(--ink-4)}
.rv-auto li.bad em{color:var(--coral-ink)}
.rv-auto-st{white-space:nowrap;font-size:var(--fs-xs);font-weight:700;padding:2px 8px;border-radius:999px;background:var(--panel-3);color:var(--ink-3)}
.rv-auto li.ok .rv-auto-st{background:var(--green-bg);color:var(--green-ink)}.rv-auto li.bad .rv-auto-st{background:var(--coral-bg);color:var(--coral-ink)}
.rv-auto li.ok span,.rv-auto li.bad span,.rv-auto li.warn span{background:transparent}
.rv-verdict{margin-top:8px}
/* 발급번호 중복(D-128) — 운영자: 같은 번호의 다른 제출을 여는 버튼 · 지도교사: 한 줄 안내(단일 제출물은 카드 · 칸 탭은 문단) */
.rv-auto-links{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.rv-dup{margin:0 0 10px;padding:8px 10px;background:var(--coral-bg);border:1px solid #f0c4bb;border-radius:var(--r-s);color:var(--coral-ink);font-size:var(--fs-sm);font-weight:600;line-height:1.55;overflow-wrap:anywhere}
.rv-dup b{margin-right:6px}
.rv-card.rv-dup{margin:0;padding:8px 10px;background:var(--coral-bg);border:1px solid #f0c4bb;border-radius:var(--r-s)}
/* D-162 지도교사 사유 안내 — 중립(경고색 아님 · 원인 단정 없음). 중복 줄(.rv-dup · 주의)과 함께 오지 않는다 */
.rv-autonote{margin:0 0 10px;padding:8px 10px;background:var(--sky-bg);border:1px solid var(--line);border-radius:var(--r-s);color:var(--ink-2);font-size:var(--fs-sm);line-height:1.55;overflow-wrap:anywhere}
.rv-autonote b{margin-right:6px;color:var(--sky-ink)}
.rv-card.rv-autonote{margin:0;padding:8px 10px;background:var(--sky-bg);border:1px solid var(--line);border-radius:var(--r-s)}
/* 제출물 1건의 인증기준(D-51) — 과제 정보 카드 안 기준 목록 · 반려 카드의 「문제가 된 인증기준」 · 정합성 확인 경고 */
.rv-unit{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
.rv-unit>b{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-bottom:4px;font-weight:600}
.rv-unit-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 0;font-size:var(--fs-sm);color:var(--ink);line-height:1.45}
.rv-unit-no{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--panel-3);color:var(--ink-2);font-size:var(--fs-2xs);font-weight:700}
.rv-unit-row .dv-pill{white-space:nowrap}
.rv-unit .hint{margin-top:4px}
.rv-problem{margin-top:10px;padding-top:8px;border-top:1px dashed #f0c4bb}
.rv-problem>b{display:block;font-size:var(--fs-xs);color:var(--coral-ink);margin-bottom:4px}
.rv-problem>b small{display:block;font-weight:400;color:var(--ink-2);margin-top:2px;line-height:1.5}
.rv-problem .dv-check{align-items:flex-start;padding:4px 0;line-height:1.45}
.rv-problem .dv-check input{margin-top:3px}
/* D-119 제출 칸이 여러 개인 과제 — 칸 고르기 버튼 · 칸별 처분(검토 대기 칸은 승인·반려를 반드시 고른다).
   칸은 누르는 것이 분명해야 한다(2026-09-29 사용자 지적 「눌러서 확인해야겠다는 느낌이 안 든다」) — 밑줄 탭 대신 테두리 버튼 ·
   마우스 올림·선택됨 · 칸마다 「눌러서 확인 → 열어 봄 → 승인/반려 선택함」 진행 줄 · 위에 안내와 처리 개수 */
.rv-slot-guide{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;margin:0 0 10px;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
.rv-slot-count{font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.rv-slot-count.ok{color:var(--green-ink)}
.rv-slot-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:0 0 14px}
/* 사이트 기본 button(lms-main: 파란 그라디언트·글자 그림자·간격 1px · 호버 `button:hover:not(:disabled)` 0,2,1)을 이기려면 `.dv button.…` 로 올린다
   — `.rv-slot-btn.on`(0,2,0)으로는 호버 때 선택 색이 사라졌다(2026-09-29 사용자 지적). 쉴 때도 버튼으로 보이게 진한 테두리·그림자·열기 표시 */
.dv button.rv-slot-btn{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:5px;min-height:44px;margin:0;padding:10px 30px 10px 12px;
  border:1px solid #b9c3cc;border-radius:var(--r-m);background:#fff;background-image:none;box-shadow:0 1px 2px rgba(19,26,33,.08);
  color:var(--ink);font:inherit;font-size:var(--fs-sm);font-weight:400;letter-spacing:normal;text-shadow:none;text-align:left;vertical-align:top;cursor:pointer;
  transition:border-color .15s ease-out,background-color .15s ease-out,box-shadow .15s ease-out,transform .15s ease-out}
.dv button.rv-slot-btn::after{content:"";position:absolute;top:14px;right:12px;width:7px;height:7px;border-right:2px solid #7d8791;border-bottom:2px solid #7d8791;transform:rotate(-45deg)}
.dv button.rv-slot-btn:hover:not(:disabled){border-color:var(--navy-2);background:var(--panel-2);background-image:none;box-shadow:0 3px 8px rgba(0,65,108,.14);transform:translateY(-1px)}
.dv button.rv-slot-btn:hover:not(:disabled)::after{border-color:var(--navy-2)}
.dv button.rv-slot-btn:active:not(:disabled),.dv button.rv-slot-btn:focus:not(:disabled){box-shadow:0 1px 2px rgba(19,26,33,.08)}
.dv button.rv-slot-btn:focus-visible{outline:2px solid var(--sky-ink);outline-offset:2px}
.dv button.rv-slot-btn.on,.dv button.rv-slot-btn.on:hover:not(:disabled),.dv button.rv-slot-btn.on:focus:not(:disabled){border-color:var(--navy);background:var(--sky-bg);background-image:none;
  box-shadow:inset 0 0 0 1px var(--navy),0 2px 8px rgba(0,65,108,.16);transform:none}
.dv button.rv-slot-btn.on::after{border-color:var(--navy);transform:rotate(45deg);top:12px}
.dv button.rv-slot-btn.missing{border-style:dashed;background:var(--panel-2)}
.rv-slot-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.rv-slot-top b{font-size:var(--fs-sm);color:var(--navy)}
.rv-slot-top .dv-pill{white-space:nowrap}
.rv-slot-txt{font-size:var(--fs-xs);color:var(--ink-2);line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rv-slot-st{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:600;color:var(--ink-3)}
.rv-slot-st svg{width:14px;height:14px;flex:none}
.rv-slot-st.todo{color:var(--coral-ink)}
.rv-slot-st.seen{color:var(--sky-ink)}
.rv-slot-st.pass{color:var(--green-ink)}
.rv-slot-st.stop{color:var(--coral-ink)}
.rv-slot-head{font-size:var(--fs-sm);color:var(--ink);line-height:1.5;margin-bottom:6px}
.rv-slot-head b{margin-right:8px;color:var(--navy)}
.rv-slot-ev{margin-top:8px}
.rv-slot-rec{margin-top:10px;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
.rv-slot-rec b{margin-right:6px;color:var(--ink)}
.rv-slot-next{display:flex;justify-content:flex-end;margin-top:12px}
/* 칸별 처리 — 고른 처분이 버튼 이름·색과 칸의 선택 상자 테두리로 보인다(2026-09-29 사용자 지적 「승인을 하는지 반려를 하는지 헷갈린다」).
   승인만 = 기본 채운 버튼 · 반려만 = 빨강 채움 · 섞임 = 남색 채움 · 아무것도 안 고름 = 비활성 */
.dv button.dv-btn.rv-go-reject{background:var(--coral-ink);border-color:var(--coral-ink);color:#fff}
.dv button.dv-btn.rv-go-reject:hover:not(:disabled){background:#a3281a;border-color:#a3281a;color:#fff}
.dv button.dv-btn.rv-go-mixed{background:var(--navy);border-color:var(--navy);color:#fff}
.dv button.dv-btn.rv-go-mixed:hover:not(:disabled){background:var(--navy-2);border-color:var(--navy-2);color:#fff}
.rv-decide.is-approve{border-color:#b9d38c;background:var(--green-bg)}
.rv-decide.is-reject{border-color:#e8bcb3}
.rv-decide.is-approve>b{color:var(--green-ink)}
.rv-decide.is-reject>b{color:var(--coral-ink)}
.rv-decide{margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel-2)}
.rv-decide>b{display:block;font-size:var(--fs-xs);color:var(--ink-2);margin-bottom:6px}
.rv-decide-opts{display:flex;gap:18px;flex-wrap:wrap}
.rv-decide-opts label{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);cursor:pointer}
.rv-slot-reject{margin-top:10px}
.rv-slot-empty{margin-top:8px;padding:18px;text-align:center;color:var(--ink-4);font-size:var(--fs-sm);background:var(--panel-2);border-radius:var(--r-s)}
.rv-card.rv-integrity{background:var(--amber-bg);border-color:#f0d9a8}
.rv-card.rv-integrity>h4{color:var(--amber-ink)}
.rv-card input[type=text]{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-s);font-size:var(--fs-sm);font-family:inherit;background:#fff}
.rv-note-prev{margin-top:6px;font-size:var(--fs-sm);color:var(--ink-2)}.rv-note-prev b{font-size:var(--fs-xs);color:var(--ink-4);margin-right:6px}
.rv-card.rv-reject{background:var(--coral-bg);border-color:#f3cdc5;margin-top:0;padding:12px 14px}
.rv-card.rv-reject>h4{color:var(--coral-ink)}
.rv-reject-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:8px;align-items:start}
@media (max-width:700px){.rv-reject-row{grid-template-columns:minmax(0,1fr)}}
.rv-reject-row select{margin:0;height:38px}
.rv-reject-row textarea{width:100%;min-height:38px;padding:8px 10px;border:1px solid #f0c4bb;border-radius:var(--r-s);font-size:var(--fs-sm);font-family:inherit;background:#fff}
.rv-hist summary{cursor:pointer;font-size:var(--fs-sm);color:var(--ink-3);font-weight:600}
.rv-actions{margin:14px -16px 0;padding:12px 16px}
.dv button.dv-btn.rv-btn-approve{min-width:120px}
.rv-sort{color:var(--sky-ink);margin-left:2px}
.rv-tbl td.rv-chev,.rv-tbl th.rv-chev{width:22px;color:var(--ink-4);font-size:var(--fs-lg);text-align:center;padding-left:4px;padding-right:8px}
.rv-tbl .dv-pill{white-space:nowrap}
.rv-page-size select{padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-s);font-size:var(--fs-sm);background:var(--panel)}
/* 쪽 번호는 사이트 공통 .pagination(mlp/css/common.css · 공지사항 목록과 같은 모양). 크기 선택만 오른쪽에 둔다 */
.rv-pagebar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:8px}
.rv-pagebar .pagination{grid-column:2;width:auto;padding-top:0}
.rv-pagebar .rv-page-size{grid-column:3;justify-self:end}
@media (max-width:640px){.rv-pagebar{grid-template-columns:1fr}.rv-pagebar .pagination,.rv-pagebar .rv-page-size{grid-column:1;justify-self:center}}
/* 공통 CSS 는 화살표(prev·next)를 span 의 :before 로 덮어 그려 안쪽 링크가 눌리지 않는다(공지사항은 span onclick) — 클릭을 링크로 통과 */
.dv .pagination span:first-child:before,.dv .pagination span:last-child:before{pointer-events:none}
a.rv-today{display:block;text-decoration:none}.dv a.rv-today,.dv a.rv-today:visited,.dv a.rv-today:hover,.dv a.rv-today:visited:hover{color:var(--ink-2)}a.rv-today:hover{text-decoration:none;border-color:var(--sky)}
.rv-overlay{position:fixed;inset:0;background:rgba(0,30,50,.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.rv-overlay[hidden]{display:none}
/* 검토함 머리 축소(2026-09-11): 제목 한 줄 + 돌아가기, 탭·필터·칩은 최소 높이 — 세로 공간을 목록·판정 패널에 */
.dv-top-compact{align-items:flex-end;justify-content:space-between;padding-bottom:0;margin-bottom:4px;border-bottom:0}   /* 제목 밑줄 없음(탭 밑줄과 혼동) · 돌아가기 버튼은 머리 영역 바닥에 */
.dv-top-compact .dv-btn{margin-bottom:2px}
.dv a.rv-chip.on,.dv a.rv-chip.on:visited{color:#fff}          /* 활성 칩 글자는 흰색 — .dv a 색 규칙에 지지 않게 */
.dv a.rv-chip:hover{text-decoration:none;border-color:var(--sky)}.dv a.rv-chip.on:hover,.dv a.rv-chip.on:visited:hover{color:#fff}   /* 칩 호버 밑줄 없음 */
/* 셀렉트는 셀렉트처럼 — 오른쪽 끝 아래 삼각형 */
.rv-filters select,.rv-page-size select{-webkit-appearance:none;appearance:none;padding-right:26px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2300416c' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center}
.rv-tbl td{vertical-align:middle}                             /* 열마다 높이가 달라 보이던 문제 — 모두 세로 가운데 */
.rv-card select{-webkit-appearance:none;appearance:none;padding-right:26px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2300416c' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center}
.rv-card label,.rv-actions label,.rv-card .dv-check{font-style:normal}   /* 사이트 공통 label 이탤릭 상쇄 */
/* 판정 패널 정리 — 상자보다 구획: 카드 테두리를 걷고 윗줄 하나로, 증빙·반려만 상자 */
.rv-card{border:0;border-top:1px solid var(--line-soft);border-radius:0;background:transparent;padding:10px 2px 6px}
.rv-card>h4{margin-bottom:6px}
.rv-grid{gap:4px 24px;margin-top:6px}
.rv-card.rv-ev-card{border-top:1px solid var(--line-soft)}
.rv-ev-card{grid-row:auto}.rv-ev-card.span2{grid-row:span 2}
.rv-card.rv-reject{background:var(--coral-bg);border:1px solid #f3cdc5;border-radius:var(--r-s);padding:12px 14px;margin-top:6px}
.rv-checklist-card{background:transparent;border:0;padding:0}
.rv-ans-box{margin-bottom:8px}
.rv-verdict{margin-top:4px;font-weight:600}
.rv-img.rv-zoom{cursor:zoom-in}
.rv-overlay-img{max-width:100%;max-height:82vh;display:block;margin:0 auto}
.rv-overlay-pdf{width:100%;height:82vh;border:0}
#rv-overlay-body{padding:14px 18px}
/* 목록은 화면 안에서 내부 스크롤(높이는 JS fitHeights 가 맞춘다) · 행 밀도 축소 */
.rv-tblwrap-scroll{overflow:auto}
/* 검토함 왼쪽 목록은 직각 — 오른쪽 판정 패널(둥근 모서리)과 구분(사용자 지시 2026-09-14) */
.dv-tblwrap.rv-tblwrap-scroll{border-radius:0}
/* 대시보드 학교급 선택 — 지금 보는 학교급은 채운 남색. 링크 글자색 규칙보다 높게 */
.dv a.dv-btn.ghost.active,.dv a.dv-btn.ghost.active:visited,.dv a.dv-btn.ghost.active:hover,.dv a.dv-btn.ghost.active:visited:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.rv-tbl thead th{position:sticky;top:0;background:var(--panel-2);z-index:1}
.rv-tbl th,.rv-tbl td{padding:7px 10px;font-size:var(--fs-sm);line-height:1.35}
.rv-tbl td b{font-size:var(--fs-sm)}.rv-tbl td .v{font-size:var(--fs-xs)}
/* 행 높이를 같게 — 과제·인증기준 칸이 폭에 따라 2~3줄로 접혀 행마다 높이가 달랐고, 가운데 정렬된 칩·상태가 열 안에서 계단처럼
   보였다(2026-09-14). 열 너비를 머리글에 고정(table-layout:fixed)하고 두 줄 칸은 줄마다 말줄임. 전체 문장은 title(마우스 올림)과 상세 패널에 */
.rv-tbl{table-layout:fixed;min-width:680px}
.rv-tbl th.rv-th-who{width:150px}.rv-tbl th.rv-th-type{width:84px}.rv-tbl th.rv-th-status{width:96px}
.rv-tbl td.rv-who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-tbl td.rv-who b,.rv-tbl td.rv-who .v{display:block;overflow:hidden;text-overflow:ellipsis}
.rv-tbl td.rv-task-cell{overflow:hidden}
.rv-tbl td.rv-task-cell b,.rv-tbl td.rv-task-cell .v{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-tbl .dv-pill{font-size:var(--fs-2xs);padding:2px 8px}
.rv-tbl .dv-meta-tag{font-size:var(--fs-2xs)}
.dv-top-compact h1{font-size:var(--fs-4xl);margin:20px 0px 0px 0px}
/* 좁은 화면은 `.dv` 위 여백 18px(아래 640px 블록)이 있어 제목 위 20px 이 겹쳐 떠 보인다(사용자 지시 2026-09-14 · 검토함도 같은 머리).
   ⚠️ 그 18px 은 `.dv{padding-top}`(0,1,0)이라 **`.dv.dv-wide{padding-top:0}`(0,2,0)에 지고 있었다** — 넓은 화면인 검토함만
   제목이 사이트 머리(로고 줄)에 딱 붙었다(사용자 지적 2026-09-17). 그 상쇄 줄을 지워 세 화면이 같은 여백을 갖는다 */
@media (max-width:640px){.dv-top-compact h1{margin-top:0;font-size:var(--fs-3xl)}
  /* 돌아가기 버튼이 제목 줄보다 두꺼워 보이지 않게 높이를 못 박는다(사용자 지적 2026-09-17) */
  .dv .dv-top-compact a.dv-btn{height:32px;min-height:32px;padding-top:0;padding-bottom:0}}
.rv-top{margin-top:0}
.rv-tabs{margin-bottom:4px}
.rv-tabs .dv-tab-btn,.rv-tabs a.dv-tab-btn{min-height:34px;padding:6px 4px 9px;font-size:var(--fs-md)}
.rv-filters{margin:0 0 10px}
.rv-filters select,.rv-filters input[type=search]{padding:6px 10px}
.rv-quick{margin:0 0 8px}
.rv-detail{max-height:calc(100vh - 40px)}
.rv-tbl .dv-meta-tag{white-space:nowrap}
.rv-overlay-box{background:#fff;border-radius:var(--r-m);width:min(960px,96vw);max-height:92vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.rv-overlay-head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line)}
#rv-overlay-body{overflow:auto;padding:18px 22px;font-size:var(--fs-base);line-height:1.7}
#rv-overlay-body .rv-ans-text{font-size:var(--fs-lg)}
.rv-ans-empty .rv-ans-count{background:var(--coral-bg);color:var(--coral-ink)}
.rv-ans-text{margin:0;white-space:pre-wrap;font-size:var(--fs-sm);line-height:1.65;color:var(--ink)}
.rv-checklist-card{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-s);padding:10px 14px;margin-bottom:8px}
.rv-checklist-item{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);padding:4px 0}
.rv-checklist-item.checked{color:var(--ink)}
.rv-checklist-item.unchecked{color:var(--ink-4)}
.rv-tbl-loading{opacity:0.5;pointer-events:none;transition:opacity .15s ease}

/* ── 검토함 모바일(사용자 결정 2026-09-14) ─────────────────────────────
   1080px 이하: ③ 건을 누르면 상세가 전체 화면(위 「← 목록 · 이전 건 · 다음 건」 고정) ④ 승인·반려 버튼 아래 고정.
   640px 이하: ① 검색창 + 「필터 (N)」(선택 상자는 펼칠 때만) · 총 건수 한 줄 ② 표 대신 한 건 = 한 덩어리 · 탭 오른쪽 흐림.
   PC 화면은 그대로다. 스크립트(inbox.js)가 html 에 rv-m-open 을 붙이고 뗀다. */
/* 숨김은 `.dv button.dv-btn`(0,2,1)의 display:inline-flex 보다 높게 — 낮게 두면 PC 에서 보인다(사용자 지적 2026-09-14) */
.dv button.dv-btn.rv-flt-toggle,.dv button.dv-btn.rv-m-close{display:none}
.rv-head-st{display:flex;align-items:center;gap:8px}
.dv button.dv-btn.ghost.rv-flt-toggle.has{border-color:var(--sky);color:var(--navy)}
@media (max-width:1080px){
  .rv-detail{display:none}
  html.rv-m-open,html.rv-m-open body{overflow:hidden}
  html.rv-m-open .mq_wrap{display:none!important}                /* 사이트 빠른 메뉴가 아래 고정 버튼을 가리지 않게 */
  /* 높이는 주소창·하단 툴바를 뺀 실제 보이는 높이로 — 100%(=큰 뷰포트)로 두면 하단 행동 바가 화면 밖으로 잘린다.
     dvh 를 모르는 브라우저는 100% 를, 키보드가 뜨는 경우는 inbox.js 가 넣는 --rv-vvh 를 쓴다 */
  html.rv-m-open .rv-detail{display:flex;position:fixed;top:0;right:0;bottom:0;left:0;z-index:990;
    height:100%;height:100dvh;height:var(--rv-vvh,100dvh);max-height:none;min-height:0;border:0;border-radius:0;box-shadow:none}
  html.rv-m-open .rv-detail #rv-body{padding:0 16px}
  .dv button.dv-btn.rv-m-close{display:inline-flex}
  .rv-head{position:sticky;top:0;z-index:3;background:var(--panel);margin:0 -16px;padding:10px 16px;
    display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"close . prev next" "who who who who" "st st st st";
    gap:8px;align-items:center;box-shadow:0 1px 0 var(--line-soft)}
  .rv-head .rv-m-close{grid-area:close}
  .rv-head #rv-prev{grid-area:prev}
  .rv-head #rv-next{grid-area:next}
  .rv-head .rv-who{grid-area:who;min-width:0}
  .rv-head .rv-head-r{display:contents}
  .rv-head .rv-head-st{grid-area:st}
  .rv-actions{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .rv-actions-main .dv-btn{flex:1}
  .rv-actions .rv-auto-next{flex:1 1 100%;justify-content:center}
  /* 탭이 화면을 넘치면 오른쪽 끝을 흐려 「더 있다」고 알린다 — 끝까지 밀면 inbox.js 가 at-end 를 붙인다 */
  .rv-tabs{position:relative}
  .rv-tabs::after{content:"";position:absolute;top:0;right:0;bottom:1px;width:32px;pointer-events:none;
    background:linear-gradient(to right,rgba(255,255,255,0),#fff)}
  .rv-tabs.at-end::after{display:none}
}
@media (max-width:640px){
  .rv-filters{flex-wrap:wrap}
  .rv-filters input[type=search]{order:0;flex:1 1 0;min-width:0}
  .dv button.dv-btn.rv-flt-toggle{display:inline-flex;order:1;flex:none}
  .rv-filters select{order:3;display:none;flex:1 1 calc(50% - 4px)}
  .rv-filters.open select{display:block}
  /* 사이트 공통이 input·select 에만 height:34px 을 박아 두어 필터 버튼만 세로 길이가 따로 논다.
     셋을 같은 높이로 못 박아 한 줄이 가지런히 보이게 한다(사용자 지적 2026-09-17) */
  .rv-filters input[type=search],.rv-filters select,.dv .rv-filters button.dv-btn{height:36px;min-height:36px;padding-top:0;padding-bottom:0}
  .rv-filters select{line-height:34px}
  /* 펼친 선택 상자는 필터 버튼 아래로 내려 2열씩 — 폭 0 인 줄바꿈 칸을 검색줄과 선택 상자(order:3) 사이에 둔다 */
  .rv-filters.open::after{content:"";order:2;flex:0 0 100%;height:0;margin:0}
  .rv-quick{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .rv-quick>*{flex:none}
  .rv-tblwrap-scroll{overflow:visible}
  .dv .rv-tbl{display:block;min-width:0;table-layout:auto}
  .dv .rv-tbl thead{display:none}
  .dv .rv-tbl tbody{display:block}
  .dv .rv-tbl tbody tr.rv-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;position:relative;
    padding:10px 30px 10px 12px;border-bottom:1px solid var(--line-soft)}
  .dv .rv-tbl.rv-has-pick tbody tr.rv-row{padding-left:40px}
  .dv .rv-tbl tbody tr.rv-row:last-child{border-bottom:0}
  .dv .rv-tbl tbody tr.rv-row td{display:block;padding:0;border:0;background:transparent}
  .dv .rv-tbl tbody tr.rv-row td.rv-who,.dv .rv-tbl tbody tr.rv-row td.rv-task-cell{flex:1 1 100%;min-width:0}
  .rv-tbl td.rv-who b,.rv-tbl td.rv-who .v{display:inline}
  .rv-tbl td.rv-who .v::before{content:" · "}
  .dv .rv-tbl tbody tr.rv-row td.rv-pick-cell{position:absolute;left:12px;top:12px}
  .dv .rv-tbl tbody tr.rv-row td.rv-chev{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:auto}
  .dv .rv-tbl tbody tr.rv-row.is-open{background:var(--sky-bg);box-shadow:inset 4px 0 0 var(--sky)}
}
.dv-precheck{margin:0 18px 12px;padding:12px 14px;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-s);font-size:var(--fs-sm)}
.dv-precheck>b{display:block;color:var(--navy);margin-bottom:6px;font-size:var(--fs-xs);letter-spacing:.02em}
.dv-precheck ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:4px 18px}
.dv-precheck li{display:flex;justify-content:space-between;gap:10px;color:var(--ink-2)}
.dv-precheck li span:first-child{color:var(--ink-3);flex:none}
.dv-precheck .hint{margin-top:8px;color:var(--ink-4);font-size:var(--fs-xs)}
.dv-badge-req{font-size:var(--fs-2xs);font-weight:700;padding:3px 8px;border-radius:var(--r-s);
  background:var(--coral-bg);color:var(--coral-ink);border:1px solid #f8d3cc}
.dv-badge-opt{font-size:var(--fs-2xs);font-weight:700;padding:3px 8px;border-radius:var(--r-s);
  background:var(--sky-bg);color:var(--navy-2);border:1px solid #d0e2fa}
/* 선택 과제 난이도(D-101) — 필수·선택 옆 보조 표시. 새 색을 들이지 않는 중립 칩(필수·선택과 같은 크기) */
.dv-badge-diff{font-size:var(--fs-2xs);font-weight:700;padding:3px 8px;border-radius:var(--r-s);
  background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line)}
/* 「추천」 배지(D-150 · ✏️ D-152 금색) — 내 인증 현황 추천 카드와 추천 영역 카드. 시스템이 고른 다음 할 일이지 선수 과제가 아니다(다른 과제도 열린다).
   제목 남색과 섞이지 않고 옅은 상태 칩(필수 산호 · 선택 하늘 · 완료 초록)·주의 상자(옅은 호박)와도 구별되게 채운 금색 + 별
   (사용자 「배지와 제목 색이 같아 추천 느낌이 안 난다」 · 외부 검토 「노랑·금색 계열」 2026-10-01 · 글자 대비 8:1) */
.dv-badge-rec{display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 6px;border-radius:var(--r-s);vertical-align:middle;
  background:var(--gold);color:var(--gold-ink);font-size:var(--fs-xs);font-weight:800;line-height:1.4;letter-spacing:.02em;white-space:nowrap}
.dv-badge-rec i{font-size:var(--fs-sm);line-height:1}
.dv-area-card-head .dv-badge-rec{margin-left:6px}
/* P05 동료 총평 · 총평 관리(5-2 · D-103) — 기존 카드·폼(bd-form) 위에 간격과 글 상자만 더한다. 새 색을 들이지 않는다 */
.pr-sec{margin-top:16px}
.pr-sec>h2{font-size:var(--fs-lg);font-weight:700;color:var(--ink);margin:0 0 12px}
.pr-h3{font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.pr-steps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 12px;padding:0}
.pr-step{font-size:var(--fs-sm);font-weight:600;padding:6px 12px;border-radius:var(--r-s);background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2)}
.pr-step.done{background:var(--green-bg);border-color:#d6e8b8;color:var(--green-ink)}
.pr-text{white-space:pre-wrap;line-height:1.7;font-size:var(--fs-sm);color:var(--ink-2);background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-s);padding:12px 14px;margin:0 0 8px}
.pr-sum{list-style:none;margin:0;padding:0;font-size:var(--fs-sm);color:var(--ink-2)}
.pr-sum li{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 0}
.pr-sum li.pr-task{padding-left:12px}
.pr-date{font-size:var(--fs-xs);color:var(--ink-3);font-weight:400}
.pr-ans{margin:0}
.pr-ans dt{font-size:var(--fs-sm);font-weight:700;color:var(--ink);margin-top:10px}
.pr-ans dd{margin:4px 0 0;white-space:pre-wrap;line-height:1.7;font-size:var(--fs-sm);color:var(--ink-2)}
.pr-reply{margin-top:10px;padding:10px 12px;border-radius:var(--r-s);background:var(--sky-bg);font-size:var(--fs-sm);color:var(--ink-2)}
.pr-reply p{margin:4px 0 0;white-space:pre-wrap}
.pr-received+.pr-received,.pr-row+.pr-row{border-top:1px solid var(--line-soft);margin-top:14px;padding-top:14px}
.pr-row-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-sm)}
.pr-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pr-act summary{cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--navy-2)}
.pr-act form{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;font-size:var(--fs-sm)}
.pr-act input[type=text]{padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-s);min-width:220px}
.dv-task>header h3{flex:1;font-size:var(--fs-lg);font-weight:700;color:var(--ink);margin:0;min-width:200px}
.dv-task>header .elem{font-size:var(--fs-xs);color:var(--ink-3);background:var(--panel-2);padding:2px 8px;border-radius:var(--r-s)}
.dv-task .body{padding:14px 18px;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.65}
.dv-task-lead{font-size:var(--fs-md);color:var(--ink);margin-bottom:10px;line-height:1.55}
.dv-details{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-s);
  padding:8px 14px;margin:10px 0;font-size:var(--fs-sm)}
.dv-summary{cursor:pointer;font-weight:600;color:var(--navy-2);user-select:none;padding:2px 0}
.dv-summary:hover{color:var(--navy)}
.dv-details dl{display:grid;grid-template-columns:72px 1fr;gap:6px 12px;margin:10px 0 4px}
.dv-details dt{color:var(--ink-4);font-size:var(--fs-xs);font-weight:700}
.dv-details dd{margin:0;white-space:pre-line;color:var(--ink-2)}

/* 기준 체크리스트 */
.dv-crit{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line-soft)}
.dv-crit li{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-sm)}
.dv-crit li:last-child{border-bottom:0}
.dv-crit-check{font-size:var(--fs-md);font-weight:700;width:18px;flex:none;text-align:center}
.dv-crit-check.pass{color:var(--green-ink)}
.dv-crit-check.submitted{color:var(--sky-ink)}
.dv-crit-check.rejected{color:var(--coral-ink)}
.dv-crit-check.wait{color:var(--ink-4)}
/* P02 기준 행의 상태 — 알약 대신 글자(아이콘 모양 + 글자 병기 · v4.195) */
.dv-crit-st{font-size:var(--fs-xs);font-weight:600;margin-top:2px}
.dv-crit-st.pass{color:var(--green-ink)}.dv-crit-st.submitted{color:var(--sky-ink)}.dv-crit-st.rejected{color:var(--coral-ink)}.dv-crit-st.wait{color:var(--ink-3)}
.dv-side-status{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;font-size:var(--fs-sm);color:var(--ink-2)}
.dv-crit .t{flex:1;color:var(--ink)}
.dv-crit .how{font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap}

/* 과제 하단 액션바 */
.dv-task-actions{padding:12px 18px;background:var(--panel-2);border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.dv-task-actions>:only-child{margin-left:auto}   /* 안내 문장 없이 버튼(묶음)만 있으면 오른쪽(P02·P03 · v4.195) */
/* P03 기준 카드 맨 아래 액션바는 카드 가장자리까지 채운다 — P02 과제 카드와 같은 모양(사용자 지적 2026-09-28).
   본문(.body) 안쪽 여백만큼 음수 여백을 준다 · 카드가 모서리를 잘라 내므로(overflow:hidden) 둥근 모서리는 따로 두지 않는다 */
.dv-task .body>.dv-task-actions:last-child{margin:0 -18px -14px}
/* P03 두 영역(5-11 화면 보정 · 사용자 지적 2026-09-29) — 「제출할 결과물」(내는 것 · 폼·버튼은 여기에만)과
   「인증 기준」(결과물을 보는 관점 · 상태·사유만). 결과물 카드는 테두리 색과 채운 아이콘으로 해야 할 일 쪽임을 보인다 */
/* 두 영역의 제목 — 카드 제목보다 한 단계 크게 · 아래 굵은 줄로 영역을 연다(사용자 지적 2026-09-29 「잘 눈에 안 띈다」) */
/* 영역 머리 = 제목(+설명) · 아래 굵은 줄 · 줄과 첫 카드 사이를 띄운다(사용자 지적 2026-09-29 「밑줄이 카드에 거의 붙어 모양새가 안 좋다」) */
.dv-area-head{margin:34px 0 18px;padding-bottom:10px;border-bottom:2px solid var(--navy)}
.dv-task-brief+.dv-area-head{margin-top:26px}
.dv-area-h{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-xl);font-weight:800;color:var(--navy);letter-spacing:-.01em}
.dv-g-shot-body .dv-area-h{font-size:var(--fs-md);margin:14px 0 10px;padding-bottom:5px;border-bottom:1px solid var(--navy)}
.dv-g-shot-body .dv-area-h:first-child{margin-top:0}
/* 반려 결과물 카드의 고칠 기준 — 번호 · 기준 문장(원문) · 사유(원문) */
.dv-fix-list{list-style:none;margin:6px 0 4px;padding:0;display:grid;gap:8px}
.dv-fix-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start}
.dv-fix-no{font-size:var(--fs-xs);font-weight:700;color:#fff;background:var(--coral-ink);border-radius:var(--r-s);padding:1px 7px;margin-top:2px;white-space:nowrap}
.dv-fix-t{display:block;font-size:var(--fs-sm);color:var(--ink);font-weight:600}
.dv-fix-why{margin-top:3px;font-size:var(--fs-sm);color:var(--ink)}
.dv-fix-why b{margin-right:6px;color:var(--coral-ink)}
.dv-area-note{font-size:var(--fs-sm);color:var(--ink-3);max-width:72ch}
.dv-task.dv-deliv{border-color:#bcd8f7}
.dv-deliv-ic{width:30px;height:30px;border-radius:var(--r-s);background:var(--navy-2);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:var(--fs-lg)}
.dv-deliv-covers{flex:1 1 100%;padding-left:40px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.dv-area-count{font-size:var(--fs-sm);font-weight:700;color:var(--navy-2);background:var(--sky-bg);border-radius:var(--r-s);padding:1px 8px;align-self:center}
.dv-form-lead{font-size:var(--fs-sm);color:var(--ink-2)}
/* P03 오른쪽 과제 진행 요약(D-124) — 이름 왼쪽 · 상태 알약·통과 개수 오른쪽. 기준 목록은 본문에만 */
.dv-side-sum{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:10px;font-size:var(--fs-sm)}
.dv-side-sum li{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--ink-2)}
.dv-side-sum .lb{min-width:0;overflow-wrap:anywhere}
.dv-side-count{font-weight:700;color:var(--navy-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.dv-deliv-hint{color:var(--ink-3);font-size:var(--fs-xs)}
.dv-task-actions.dv-task-actions-top{margin:0 18px 12px;border:1px solid var(--line-soft);border-radius:var(--r-s)}
/* 결과물 카드 첫 행동(D-146) — 「강좌에서 제출하기」를 카드 맨 위(반려면 사유 상자 아래)에 버튼만 왼쪽으로. 카드 끝 회색 막대 모양·가장자리까지
   채우기는 끈다(순서 상자가 없어 마지막 칸이 돼도) · 휴대폰은 640px 규칙이 버튼을 가로 전체로 늘린다 */
.dv-task .body>.dv-task-actions.dv-task-actions-lead,.dv-task .body>.dv-task-actions.dv-task-actions-lead:last-child{padding:0;margin:0 0 12px;background:none;border:0;justify-content:flex-start}
.dv-task-actions.dv-task-actions-lead>:only-child{margin-left:0}
/* ── 「지금 할 차례」(D-147) — 한 화면에 주 행동 하나: 지금 할 카드(또는 고르기 목록)를 맨 위로 올리고 남색 띠(할 일·까닭)를 붙인다.
   새 상자가 아니라 같은 버튼이 두 번 나오지 않는다. 나머지는 버튼 없는 순서 행 · 접힌 결과물은 이름·상태·다음 순서 한 줄 ── */
/* 「지금 할 차례」는 인디고 — 남색이 브레드크럼 현재 위치·제출 버튼·카드 테두리에도 쓰여 「지금 할 일」로 읽히지 않았다(사용자 「다른 데도 쓰이는
   비슷한 색이라 하나만 있을 때 잘 모르겠다 · 띠는 유지 · 색은 다르게」 · 외부 검토 2026-10-01). 띠는 그대로 · 테두리는 같은 색으로 조금 얇게 · 제출 버튼은 파랑 그대로 */
.dv-task.is-now{border:1.5px solid var(--indigo)}   /* 그림자 없음 — 테두리·띠로 충분하다(사용자 지적 2026-10-01 · D-148) */
.dv-now{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;padding:9px 18px;background:var(--indigo);color:#fff}
.dv-now-tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:800;letter-spacing:.02em;white-space:nowrap}
.dv-now-tag i{font-size:var(--fs-lg);line-height:1}
.dv-now-why{font-size:var(--fs-sm);font-weight:500;color:#fff}
.dv-fold>summary{list-style:none;display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;padding:12px 18px;cursor:pointer}
.dv-fold>summary::-webkit-details-marker{display:none}
.dv-fold>summary:hover{background:var(--panel-2)}
.dv-fold>summary:focus-visible{outline:2px solid var(--navy-2);outline-offset:-2px}
.dv-fold[open]>summary{border-bottom:1px solid var(--line-soft)}
.dv-fold>summary .dv-crit-title{flex:1 1 0;min-width:0;font-size:var(--fs-md);font-weight:700;color:var(--ink);margin:0}
.dv-fold>summary .dv-pill{margin-left:0}
.dv-fold-meta{flex:1 1 100%;font-size:var(--fs-sm);color:var(--ink-3);padding-left:40px}
.dv-fold-chev{font-size:var(--fs-xl);line-height:1;color:var(--ink-3);transition:transform .15s}
.dv-fold[open]>summary .dv-fold-chev,.dv-brief-fold[open]>summary .dv-fold-chev{transform:rotate(180deg)}
/* 문단(p)·제목(h3)에 여백을 주는 규칙은 `.dv` 를 앞에 붙인다 — 공통 초기화 `.dv p`·`.dv h3`{margin:0}(0,1,1)가 클래스 하나(0,1,0)를 이겨
   여백이 적용되지 않았다(2026-10-01 발견 · D-149 · 검사: css_contrast_check.py 「초기화에 덮인 여백」) */
.dv .dv-fold-note{margin:0 0 10px;padding:8px 12px;border-radius:var(--r-s);background:var(--sky-bg);color:var(--ink-2);font-size:var(--fs-sm)}
.dv .dv-fold-cov{margin:0 0 10px}
.dv-fold-cov .dv-deliv-covers{padding-left:0;font-size:var(--fs-sm);color:var(--ink-2)}
.dv-brief-fold>summary{list-style:none;cursor:pointer}
.dv-brief-fold>summary::-webkit-details-marker{display:none}
.dv-brief-fold>summary:focus-visible{outline:2px solid var(--navy-2);outline-offset:2px}
.dv-brief-fold>summary>h2{display:flex;align-items:center;gap:6px;font-size:var(--fs-base);font-weight:700;color:var(--navy);margin:0}
.dv-brief-fold[open]>summary>h2{margin-bottom:8px}
.dv-brief-fold>summary>h2 i:first-child{font-size:var(--fs-xl);line-height:1;color:var(--navy-2)}
.dv-brief-hint{margin-left:auto;font-size:var(--fs-sm);font-weight:600;color:var(--navy-2)}
.dv-brief-fold[open] .dv-brief-hint .c,.dv-brief-fold:not([open]) .dv-brief-hint .o{display:none}
/* 묶음 제목(다음 · 선택과제 고르기 · 확인 중 · 다른 선택과제 · 마친 과제) — 위 묶음과 24px · 제목과 목록 사이 8px · 설명은 둘째 줄 작은 글자
   (사용자 지적 2026-10-01 「위아래가 너무 붙어 깔끔하지 않다」 · D-148 · 번호 없이 제목 한 줄 D-149).
   D-158 — 위 얇은 구분선 대신 아이콘 + 이름 + 개수의 짧은 칩과 오른쪽으로 이어지는 선(실선 하나는 카드 테두리·본문 줄에 묻혀 경계가 안 보였다 · 사용자 2026-10-01).
   칩은 아래 카드의 상태 배지와 같은 토큰(배경·글자·아이콘·테두리): 확인 중 = 살구(.dv-pill.needs_review) · 마친 과제 = 연두(.dv-pill.passed) ·
   그 밖 = 중립 회색(고를 수 있는 목록이라 상태색이 아니다 · 「선택」 종류 칩의 파랑과 헷갈리지 않게). 오른쪽 선은 같은 색을 옅게.
   누르는 행동의 파랑(버튼)은 쓰지 않는다. 묶음을 카드로 감싸지 않는다 */
.dv .dv-rest-h{display:flex;flex-direction:column;gap:4px;margin:24px 0 8px;
  font-size:var(--fs-base);font-weight:700;color:var(--ink-2);line-height:1.4}
.dv-rest-h span{font-size:var(--fs-sm);font-weight:500;color:var(--ink-3)}
.dv .dv-rest-h .dv-rest-line{display:flex;align-items:center;gap:10px}
.dv-rest-line::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.dv-rest-line.wait::after{background:var(--amber);opacity:.35}
.dv-rest-line.done::after{background:var(--green);opacity:.35}
.dv .dv-rest-h .dv-rest-chip{display:inline-flex;align-items:center;gap:6px;flex:none;padding:2px 10px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--panel-3);font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)}
.dv .dv-rest-h .dv-rest-chip i{font-size:var(--fs-base);line-height:1}
.dv .dv-rest-h .dv-rest-chip .n{font-size:var(--fs-xs);font-weight:600}
.dv .dv-rest-h .dv-rest-line.wait .dv-rest-chip{background:var(--amber-bg);border-color:var(--amber);color:var(--amber-ink)}
.dv .dv-rest-h .dv-rest-line.done .dv-rest-chip{background:var(--green-bg);border-color:var(--green);color:var(--green-ink)}
.dv a.dv-row,.dv a.dv-row:visited{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:12px 14px;margin:0 0 8px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);color:var(--ink);text-decoration:none}
.dv a.dv-row:hover{background:var(--panel-2);border-color:#c9d3dd;text-decoration:none}
.dv a.dv-row:focus-visible{outline:2px solid var(--navy-2);outline-offset:2px}
.dv-row-t{flex:1 1 0;min-width:0;font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.dv-row .dv-pill{margin-left:0}
.dv-row-go{font-size:var(--fs-xl);line-height:1;color:var(--ink-3)}
.dv-row-meta{flex:1 1 100%;font-size:var(--fs-sm);font-weight:400;color:var(--ink-3)}
.dv .dv-choose-lead,.dv .dv-state-lead{margin:0 0 12px;font-size:var(--fs-md);color:var(--ink)}
.dv-choose-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dv-choose-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel-2)}
.dv-choose-list li.is-rej{border-color:#f3c5bd;background:var(--coral-bg)}
.dv-choose-list .t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.dv-choose-list .t b{font-size:var(--fs-md);color:var(--ink)}
.dv-choose-list .s{grid-column:1;margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
.dv-choose-list .m{grid-column:1;font-size:var(--fs-xs);color:var(--ink-3)}
.dv-choose-list .dv-btn{grid-column:2;grid-row:1 / span 3;align-self:center}
.dv-state-next{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:12px 14px;border-radius:var(--r-s);background:var(--panel-2);border:1px solid var(--line-soft)}
.dv-state-next .lb{font-size:var(--fs-sm);color:var(--ink-3)}
.dv-state-next b{font-size:var(--fs-md);color:var(--ink)}
.dv-state-next .dv-btn{margin-left:auto}
/* 휴대폰 한 줄 요약(배너 아래) — PC 는 오른쪽 진행 상황 상자가 있어 감춘다 */
.dv-mini-prog{display:none;align-items:center;gap:8px;margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--panel);font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.dv-mini-prog i{font-size:var(--fs-lg);color:var(--navy-2)}
/* 내 인증 현황 — 「지금 할 차례」 카드 머리 · 같은 순위 남은 건수 · 추천한 영역 카드 테두리 */
/* 추천 카드(D-152) — 「[추천] 제N영역 · 필수과제」 한 줄 + 과제 이름 한 줄(조금 작게 · 한 줄에 들어가게) + 버튼. 설명 문장·다른 과제 목록은 두지 않는다 */
.dv-kpi-info p.dv-rec-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0 0 6px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.dv-kpi-info h3.dv-rec-title{font-size:var(--fs-xl);margin:0}
.dv-area-card.is-now-area{border:2px solid var(--navy)}
/* 휴대폰·좁은 화면 — 진행 상황 상자는 「지금 할 차례」 카드 바로 아래로(D-147 · 5-11 최종 보정 ③ 「모바일은 맨 위」 대체).
   본문 목록을 display:contents 로 풀어 지금 할 카드 뒤 형제만 뒤로 보낸다 · 학생 화면(.dv-learner)만 — 검토함(inbox)도 dv-split-area 를 쓴다 */
@media (max-width:980px){
  .dv-learner .dv-mini-prog{display:flex}
  /* 그리드의 align-items:start 가 세로 flex 에서는 「내용 폭으로 줄임」이 된다 — 진행 상황 상자·접힌 결과물 카드가 화면 폭을 채우게 늘린다 */
  .dv-learner .dv-split-area{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .dv-learner .dv-split-area>.dv-task-list{display:contents}
  .dv-learner .dv-split-area>.dv-sidebar{order:1;margin:0 0 16px}
  .dv-learner .dv-split-area>.dv-task-list>.is-now~*{order:2}
  /* 목록을 풀면 위아래 여백이 겹치지 않고 더해진다 — 위 카드 16px + 8px = 24px(PC 와 같게 · D-149) */
  .dv-learner .dv-split-area>.dv-task-list>.dv-rest-h{margin-top:8px}
}
@media (max-width:640px){
  .dv-choose-list li{grid-template-columns:minmax(0,1fr)}
  .dv-choose-list .dv-btn{grid-column:1;grid-row:auto;width:100%}
  .dv-state-next .dv-btn{margin-left:0;width:100%}
  .dv-fold-meta{padding-left:0}
  .dv-now{padding:9px 14px}
}
/* 파일·링크 택일(FILE_OR_URL · 사용자 지적 2026-09-30 「파일 내기가 잘 식별 안 됨」) — 「파일로 내기」·「링크로 내기」를 같은 모양 두 칸으로,
   파일 먼저(기준 원문 「원본 파일 또는 공유 링크」 순서) · 사이에 「또는」. 파일 칸 버튼은 파일 과제와 같은 기본 버튼 「강좌에서 제출하기」.
   「둘 중 한 가지로」 머리 줄은 없다 — 카드 제목이 「…또는…」(D-132) */
.dv-choice-file{margin:0 18px;padding:14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);display:flex;flex-direction:column;gap:10px}
.dv-choice-h{font-size:var(--fs-md);font-weight:700;color:var(--navy)}
.dv-choice-or{margin:8px 18px;text-align:center;font-size:var(--fs-xs);font-weight:600;color:var(--ink-3)}
/* 「내 활동 확인」 결과 알림(사용자 요청 2026-09-30 「알려 주고 사라지는 알림창」) — 넓은 안내 막대가 화면을 밀어내지 않게 잠깐 보였다 사라진다.
   아래 가운데의 작은 카드(D-134 · 외부 검토 — 위 가운데 짙은 알약은 상태 배지·메뉴 알림처럼 보였다): 흰 바탕 · 남색 글자 · 얇은 테두리 · 체크 아이콘 ·
   아래에서 살짝 올라와 약 3초 뒤 사라진다 · 휴대폰은 하단 안전영역 바로 위. 모달·어둡게·확인 버튼은 없다 — 결과는 카드·진행 현황·「마지막 확인」에 그대로 */
.dv-toast{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom, 0px));z-index:1050;display:flex;align-items:center;gap:8px;max-width:calc(100% - 32px);
  padding:12px 18px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);font-size:var(--fs-sm);font-weight:600;line-height:1.4;
  box-shadow:0 8px 24px rgba(0,40,70,.14);pointer-events:none;opacity:0;transform:translate(-50%,12px);animation:dv-toast 3.2s ease forwards}
.dv-toast i{font-size:var(--fs-md);color:var(--green-ink)}
@keyframes dv-toast{0%{opacity:0;transform:translate(-50%,12px)}10%,82%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0);visibility:hidden}}
@media (max-width:640px){.dv-toast{bottom:calc(12px + env(safe-area-inset-bottom, 0px))}}
@keyframes dv-toast-still{0%,85%{opacity:1}100%{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.dv-toast{transform:translate(-50%,0);animation:dv-toast-still 3.2s linear forwards}}
/* 인증 기준 = 카드 하나 안의 목록(D-126) — 번호 · 기준 문장(원문) · 결과물 표시·상태. 좁으면 결과물 표시·상태가 문장 아래로 */
.dv-crit-list{list-style:none;margin:0 0 16px;padding:0;border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel);overflow:hidden}
.dv-crit-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:6px 12px;align-items:start;padding:14px 18px;border-top:1px solid var(--line-soft)}
.dv-crit-row:first-child{border-top:0}
.dv-crit-main{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:2px}
.dv-crit-sub{font-size:var(--fs-xs);color:var(--ink-3);overflow-wrap:anywhere}
.dv-crit-sub b{color:var(--coral-ink);margin-right:4px}
.dv-crit-side{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.dv-crit-side .dv-crit-by{white-space:nowrap}
.dv-crit-acts{grid-column:2 / -1;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
/* 사이트 공통 CSS 가 html·body 에 keep-all 을 걸어 띄어쓰기에서만 줄이 바뀐다 — 띄어쓰기 없는 파일 이름·주소·사유가 좁은 화면에서 칸을 넘으면 그 덩어리만 끊는다 */
.dv-task.dv-deliv,.dv-crit-list{overflow-wrap:anywhere}
@media (max-width:640px){
  .dv-crit-row{grid-template-columns:24px minmax(0,1fr)}
  .dv-crit-side,.dv-crit-acts{grid-column:2;justify-content:flex-start;flex-wrap:wrap}
  .dv-crit-side .dv-crit-by{white-space:normal}   /* 긴 결과물 이름(고등 19 「편집에 사용한 신뢰할 수 있는 출처 URL」)이 목록 밖으로 잘리지 않게 */
}

/* 2분할 대시보드 (P01) */
.dv-kpi-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:24px}
.dv-kpi-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);
  padding:20px 22px;display:flex;flex-direction:column;
  justify-content:space-between;gap:14px}
.dv-kpi-card-header{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-sm);
  font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.dv-kpi-card-body{display:flex;align-items:center;gap:22px;flex:1;padding:6px 0}
/* 완료한 영역 칸(P01) — 영역마다 한 칸, 완료한 영역만 채운다. 퍼센트 도넛을 대신한다(필수·선택 합산 금지 · v4.190) */
.dv-seg{display:flex;gap:6px;margin:0 0 10px;max-width:240px}
.dv-seg i{flex:1;height:10px;border-radius:3px;background:var(--panel-3);box-shadow:inset 0 0 0 1px var(--line)}
.dv-seg i.on{background:var(--green-ink);box-shadow:none}
/* 필수·선택 칸 그림(P01 영역 카드 · D-154) — 과제 하나에 칸 하나. 통과(초록 ✓) · 확인 중(하늘 빗금 — 통과로 세지 않는다) · 아직 통과 전(빈 칸 · D-157 에서 「미완료」를 바꿈).
   칸마다 상태 글자(.dv-sr · title) · 선택은 「N개 이상」 · 줄의 「N개 중 N개 통과」는 화면 읽기용 숨김 설명만. 점선·줄 끝 숫자는 두지 않는다(사용자 2026-10-01).
   필수·선택을 합친 퍼센트·진행 막대는 쓰지 않는다(§10 표시 규칙 · 위 「완료한 영역」 칸과 같은 방식).
   범례(.dv-slot-legend · D-157)는 「영역별 인증 현황」 제목 옆 한 줄(640px 이하는 제목 아래) — 칸 모양 규칙을 함께 써서 칸과 같은 모양을 작게 · 정보 표시라 테두리 칩·배경 없이 */
.dv-slots{display:grid;gap:8px}
.dv-slot-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0}
.dv-slot-row .lb{flex:none;min-width:2.6em;font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)}
.dv-slot-row .sl{display:flex;align-items:center;gap:6px}
.dv-slot-row .sl i,.dv-slot-legend i{position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;
  border:1.5px solid #c9d3dd;background:var(--panel);font-style:normal}
.dv-slot-row .sl i.ok,.dv-slot-legend i.ok{background:var(--green-ink);border-color:var(--green-ink)}
.dv-slot-row .sl i.ok b,.dv-slot-legend i.ok b{color:#ffffff;font-size:var(--fs-sm);font-weight:800;line-height:1}
.dv-slot-row .sl i.wait,.dv-slot-legend i.wait{border-color:var(--sky);background:repeating-linear-gradient(45deg,var(--sky-bg) 0 4px,#cfe3fb 4px 8px)}
/* 보완 필요(D-159) — 반려 배지(.dv-pill.rejected)와 같은 산호 토큰 + 「!」 · 빈 칸(아직 안 함)과 가른다. 학생 화면 이름은 「보완 필요」(「반려」를 쓰지 않는다) */
.dv-slot-row .sl i.fix,.dv-slot-legend i.fix{border-color:var(--coral);background:var(--coral-bg)}
.dv-slot-row .sl i.fix b,.dv-slot-legend i.fix b{color:var(--coral-ink);font-size:var(--fs-sm);font-weight:800;line-height:1}
/* 범례 묶음은 고유 이름 — 과제 화면 「제출할 결과물」·「인증 기준」 머리(.dv-area-head)와 규칙이 서로 번지지 않게(13:54 반영분 바로잡음) */
.dv-slots-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 20px}
.dv .dv-slot-legend{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:var(--fs-xs);font-weight:600;color:var(--ink-3)}
.dv-slot-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.dv-slot-legend i{width:18px;height:18px;border-radius:5px}
.dv-slot-legend i.ok b,.dv-slot-legend i.fix b{font-size:var(--fs-2xs)}
@media (max-width:640px){.dv-slot-legend{flex-basis:100%}}
.dv-slot-row .cap{font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);white-space:nowrap}
/* 통합 파일 카드의 칸 줄(P03 · 통합 카드 결정 안) — 칸마다 한 줄: 칸 그림(위 칸 그림과 같은 네 모양 · 18px) · 이름 · 상태 글자 · 올린 파일·시각 · 보완 칸이면 고쳐야 할 내용.
   정보 표시라 테두리 칩·마우스 반응 없이 · 긴 파일 이름은 끊는다(좁은 화면 넘침 없음) · 고유 이름(.dv-file-slots) — 영역 카드 칸 규칙과 번지지 않게 */
.dv .dv-file-slots{list-style:none;margin:0 18px 12px;padding:0;display:grid;gap:6px}
.dv .dv-result .dv-file-slots{margin:6px 0 2px}
.dv-file-slots>li{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;min-width:0;font-size:var(--fs-sm);line-height:1.5}
.dv-file-slots>li>i{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:5px;
  border:1.5px solid #c9d3dd;background:var(--panel);font-style:normal;font-size:var(--fs-2xs);font-weight:800;line-height:1}
.dv-file-slots>li>i.ok{background:var(--green-ink);border-color:var(--green-ink);color:#ffffff}
.dv-file-slots>li>i.wait{border-color:var(--sky);background:repeating-linear-gradient(45deg,var(--sky-bg) 0 4px,#cfe3fb 4px 8px)}
.dv-file-slots>li>i.fix{border-color:var(--coral);background:var(--coral-bg);color:var(--coral-ink)}
.dv-file-slots .t{min-width:0;color:var(--ink);font-weight:700;overflow-wrap:anywhere}
.dv-file-slots .st{color:var(--ink-3);font-weight:600}
.dv-file-slots .st.warn{color:var(--amber-ink)}
.dv-file-slots li.fix>.st{color:var(--coral-ink)}
.dv-file-slots li.ok>.st{color:var(--green-ink)}
.dv-file-slots .m{flex-basis:100%;min-width:0;padding-left:26px;font-size:var(--fs-xs);color:var(--ink-3);overflow-wrap:anywhere}
.dv .dv-file-slots .dv-fix-list{flex-basis:100%;min-width:0;margin:2px 0 4px 26px}
.dv-kpi-info{flex:1}
.dv-kpi-info h3{font-size:var(--fs-2xl);font-weight:700;color:var(--navy);margin:0 0 6px;text-align:left}
.dv-kpi-info p{font-size:var(--fs-md);color:var(--ink-3);margin:0;line-height:1.55}
.dv-kpi-card.is-next .dv-kpi-info{margin:4px 0}
/* P01 요약 — PC(981px 이상)는 한 장의 띠: 왼쪽 「완료한 영역」 좁게 · 오른쪽 「다음 할 일」은 글과 버튼을 가로로 · 세로 구분선.
   두 장을 같은 너비로 두니 왼쪽 카드가 내용에 비해 비어 보였다(사용자 PC 확인 2026-09-15 · v4.196). 980px 이하는 두 장으로 쌓는 모습 그대로 */
@media (min-width:981px){
  .dv-kpi-split{grid-template-columns:minmax(240px,1fr) minmax(0,2fr);gap:0;
    background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m)}
  .dv-kpi-split>.dv-kpi-card{border:0;border-radius:0;background:transparent;justify-content:flex-start}
  .dv-kpi-split>.dv-kpi-card+.dv-kpi-card{border-left:1px solid var(--line-soft)}
  .dv-kpi-split .dv-kpi-card-body{flex:none;padding:0}
  .dv-kpi-split .dv-kpi-card.is-next{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:24px;row-gap:14px}
  .dv-kpi-split .dv-kpi-card.is-next .dv-kpi-card-header{grid-column:1/-1}
  .dv-kpi-split .dv-kpi-card.is-next .dv-kpi-info{margin:0}
  /* 추천 카드(할 일이 있을 때 · 머리 칸 없음 D-148) — 위에서부터 두 줄: 「[추천] 제N영역 · 종류」는 왼쪽 「완료한 영역」 줄과 같은 높이(위 20px · 줄 25.5px),
     과제 이름·버튼 줄은 가운데가 왼쪽 「0/3 영역 완료」 가운데와 맞게(줄 사이 8px). 머리 칸이 빠진 뒤에도 위 아래 정렬(align-items:end)이 남아
     글이 카드 바닥으로 내려가 있었다(사용자 지적 2026-10-01 「왼쪽에 비해 글자가 너무 밑으로」 · D-155) */
  .dv-kpi-split .dv-kpi-card.is-next.is-now-kpi{align-content:start;align-items:center;row-gap:8px}
  .dv-kpi-split .dv-kpi-card.is-now-kpi .dv-kpi-info{display:contents}
  .dv-kpi-split .dv-kpi-card.is-now-kpi .dv-rec-meta{grid-column:1/-1;margin:0;line-height:1.7}
}

/* 안내/유의사항 박스 — 좌측 정갈한 액센트 바 */
/* P03 과제 안내 상자 — 읽는 정보. 흰 카드(인증 기준 = 해야 할 일)와 모양으로 구분 */
.dv-task-brief{background:var(--sky-bg);border:1px solid #cfe3f8;border-left:4px solid var(--navy-2);border-radius:0 var(--r-m) var(--r-m) 0;
  padding:16px 20px;margin-bottom:16px}
.dv-task-brief>h2{display:flex;align-items:center;gap:6px;font-size:var(--fs-base);font-weight:700;color:var(--navy);margin:0 0 8px}
.dv-task-brief>h2 i{font-size:var(--fs-xl);line-height:1;color:var(--navy-2)}
.dv .dv-task-brief a.dv-btn.ghost,.dv .dv-task-brief a.dv-btn.ghost:hover{background:var(--panel)}   /* 하늘색 바탕 위 연한 버튼은 흰 바탕 */
.dv-precheck .dv-upload-state{margin-top:8px;padding:8px 10px;border-radius:var(--r-s);background:var(--amber-bg);border:1px solid #f0d9a8;color:var(--ink)}
/* P03 파일 내는 순서(v4.197) — 번호 원: 지금 할 단계(now) 채운 파랑 · 끝낸 단계(done) 초록 ✓ · 남은 단계 회색.
   옛 「제출 전 확인」 목록 규칙(.dv-precheck li 양끝 맞춤·첫 칸 회색)을 같은 우선순위로 뒤에서 덮는다 */
.dv-file-steps ol{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.dv-precheck.dv-file-steps li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;color:var(--ink-2)}
.dv-precheck.dv-file-steps li .n{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);font-weight:700;background:var(--panel-3);color:var(--ink-3)}
.dv-precheck.dv-file-steps li.now .n{background:var(--btn);color:#fff}
.dv-precheck.dv-file-steps li.done .n{background:var(--green-ink);color:#fff}
.dv-file-steps li>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.dv-file-steps li>div>b{font-size:var(--fs-sm);color:var(--ink)}
.dv-file-steps li.done>div>b{color:var(--ink-2);font-weight:600}
.dv-file-steps li>div>span{font-size:var(--fs-xs);color:var(--ink-3);overflow-wrap:anywhere}
.dv-file-steps li>div>span.warn{color:var(--amber-ink);font-weight:600}
.dv-precheck.dv-file-steps li .dv-upload-state{margin:0;padding:0;background:none;border:0;color:var(--ink-2)}
/* P03 파일 제출 가이드 링크(P08-2) — 순서 상자 바로 아래 오른쪽 끝(순서 상자 오른쪽 끝과 맞춘다 · 사용자 지시 2026-09-28).
   `.dv-task .body` 안이라 우선순위를 그만큼 올린다 — 낮으면 본문 문단 규칙이 여백을 덮어 왼쪽으로 붙었다 */
.dv-task .body>.dv-file-guide{margin:-4px 18px 12px;font-size:var(--fs-sm);text-align:right}
.dv-file-guide-link{display:inline-block;padding:2px 0;font-weight:600}
.dv-file-guide-link i{margin-left:4px;vertical-align:-1px}
/* 과제 안내 상자의 「제출할 것」(D-111) — 학습 콘텐츠 줄과 같은 크기·색 */
.dv-task-submit{font-size:var(--fs-sm);color:var(--ink-2);max-width:72ch}
.dv-task-submit b{color:var(--ink-2);margin-right:6px}
/* 화면 아래 규칙 한 줄(P01 영역 완료 조건 · P02 제출 뒤 흐름) — 아이콘 카드 대신 윗줄 하나와 글(v4.195) */
.dv-rule-note{padding:12px 2px 0;border-top:1px solid var(--line-soft);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.65}
.dv-rule-note b{color:var(--navy)}

/* 영역 아이콘 & 메타 칩 */
.dv-area-icon{width:40px;height:40px;border-radius:var(--r-s);background:var(--sky-bg);color:var(--navy-2);
  display:flex;align-items:center;justify-content:center;flex:none}
.dv-meta-tag{display:inline-flex;align-items:center;font-size:var(--fs-xs);font-weight:500;padding:2px 8px;
  border-radius:var(--r-s);background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line-soft)}
/* 학생 화면에서는 증빙 종류·요소 이름을 칩이 아니라 글자로 — 상태 알약·필수/선택 표시만 모양을 가진다(v4.195) */
.dv-learner .dv-meta-tag,.dv-learner .dv-task>header .elem{background:none;border:0;padding:0;border-radius:0;color:var(--ink-3)}

@media (max-width:980px){
  /* 사이트 래퍼(common.css·notice.css)가 1023px 이하에서 이미 좌우 20px 을 비운다 — 화면 자체 여백은 없앤다 */
  .dv{padding-left:0;padding-right:0}
  .dv-banner{margin-left:0;margin-right:0}
  .dv-subbar.attached{margin-left:0;margin-right:0;padding-left:18px;padding-right:18px}
  .dv-banner-copy{max-width:70%}
  .dv-banner-art{right:-20px;width:290px;opacity:.82}
  .dv-split-area{grid-template-columns:minmax(0,1fr)}
  .dv-area-cards{grid-template-columns:minmax(0,1fr)}
  .dv-sidebar{order:-1;position:static}
  .dv-roadmap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-track-grid{grid-template-columns:minmax(0,1fr)}
  .dv-kpi-split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  /* #content {padding: 0px} */
  .dv{padding-top:18px}
  .dv-banner{min-height:142px;padding:20px 18px}
  .dv-banner.compact{min-height:0;padding:16px 18px 14px}
  .dv-banner.has-crumbs{padding:20px 18px}
  .dv-banner.has-crumbs .dv-banner-sub{padding-left:0}
  .dv-banner-copy{max-width:100%;padding-right:0}
  .dv-banner h1{font-size:var(--fs-3xl)}
  .dv-banner-sub{font-size:var(--fs-sm);max-width:86%}
  .dv-banner-art{right:-92px;width:245px;opacity:.25}
  .dv-roadmap{grid-template-columns:minmax(0,1fr)}
}
/* ── 4열 KPI 그리드 ──────────────────────────────────── */
.dv-kpis-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}
/* KPI 3개(M01 · D-94 로 「승인 대기 배정」을 뺐다) — PC·모바일 모두 한 줄 3칸. 4칸 격자의 모바일 축소(여백·글자)는 그대로 받는다 */
.dv .dv-kpis-4.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* 대시보드 영역별 현황 — 학교급마다 한 줄에 영역 3칸 */
.dv-area-level+.dv-area-level{margin-top:18px}
.dv-area-level-title{font-size:var(--fs-sm);font-weight:700;color:var(--navy);margin-bottom:10px}
.dv-area-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dv-area-stat{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-s);padding:12px 14px;min-width:0}
.dv-area-worst{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 8px;font-size:var(--fs-xs);background:var(--panel);padding:6px 10px;border-radius:var(--r-s);border:1px solid var(--line-soft)}
@media (max-width:980px){.dv-area-row{grid-template-columns:minmax(0,1fr)}}
@media (max-width:980px){.dv-kpis-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 표를 모바일에서 행 카드로(dv-stack · 사용자 지시 2026-09-15) — 표에 dv-stack, 감싸는 칸에 dv-stack-wrap, 칸마다 data-label.
   st-title 제목 줄(전체 폭) · st-sub 제목 밑 보조 글(전체 폭) · st-corner 오른쪽 위(상태·버튼) · st-full 전체 폭(맨 아래) ·
   st-pick 왼쪽 위 체크박스(표에 has-pick). PC 에서는 아무것도 바꾸지 않는다 */
.st-all-label{display:none}
.dv-tbl .nw{white-space:nowrap}   /* 학생 배정 표의 학교급·시작일 — PC 에서 두 줄로 꺾이지 않게 */
.dv-tbl tbody tr.is-picked td{background:var(--sky-bg)}
@media (max-width:640px){
  /* KPI 4개 — 한 줄 4개가 아니라 2×2 */
  .dv-kpis-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dv-kpis-4 .dv-kpi{padding:12px 14px}
  .dv-kpis-4 .dv-kpi-value{font-size:var(--fs-2xl)}
  .dv-kpis-4 .dv-kpi-sub{font-size:var(--fs-2xs);line-height:1.45}

  .dv .dv-tblwrap.dv-stack-wrap{overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
  .dv table.dv-stack{display:block;width:100%}
  .dv table.dv-stack thead{display:none}
  .dv table.dv-stack tbody{display:flex;flex-direction:column;gap:10px}
  .dv table.dv-stack tbody tr{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;
    padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel)!important;box-shadow:0 1px 3px rgba(0,65,108,.03)}
  .dv table.dv-stack tbody td{display:block;min-width:0;padding:0;border:0;background:transparent!important;text-align:left;font-size:var(--fs-sm);line-height:1.5}
  .dv table.dv-stack tbody td[data-label]::before{content:attr(data-label);display:block;margin-bottom:1px;font-size:var(--fs-2xs);font-weight:600;color:var(--ink-4)}
  .dv table.dv-stack tbody td.st-title{order:-2;grid-column:1/-1;padding-right:88px;font-size:var(--fs-md);overflow-wrap:anywhere}
  .dv table.dv-stack tbody td.st-sub{order:-1;grid-column:1/-1;margin-top:-6px;font-size:var(--fs-xs);color:var(--ink-3);overflow-wrap:anywhere}
  .dv table.dv-stack tbody td.st-full{order:2;grid-column:1/-1}
  .dv table.dv-stack tbody td.st-corner{position:absolute;top:10px;right:12px}
  .dv table.dv-stack tbody tr.st-total{background:var(--panel-2)!important}
  .dv table.dv-stack tbody tr.is-selected{border-color:var(--sky);background:var(--sky-bg)!important;box-shadow:inset 0 0 0 1px var(--sky)}
  .dv table.dv-stack tbody tr.st-total.is-selected{border-color:var(--sky);box-shadow:inset 0 0 0 1px var(--sky)}
  /* 체크박스 표 — 체크박스는 왼쪽 위, 머리 줄은 「전체 선택」만 */
  .dv table.dv-stack.has-pick tbody tr{padding-left:44px;cursor:pointer}
  .dv table.dv-stack tbody td.st-pick{position:absolute;top:13px;left:14px}
  .dv table.dv-stack tbody tr.is-picked{border-color:var(--sky);background:var(--sky-bg)!important;box-shadow:inset 0 0 0 1px var(--sky)}
  .dv table.dv-stack.has-pick thead{display:block;margin-bottom:8px}
  .dv table.dv-stack.has-pick thead tr{display:flex}
  .dv table.dv-stack.has-pick thead th{display:none}
  .dv table.dv-stack.has-pick thead th.st-pick{display:flex;align-items:center;gap:8px;width:auto!important;padding:0 0 0 14px;border:0;background:transparent;font-size:var(--fs-sm);font-weight:600;color:var(--ink-3)}
  .dv table.dv-stack .st-all-label{display:inline}
}

/* ── 빵부스러기 네비게이션 ───────────────────────────── */

/* ── 업무 알림 배너 (오늘 확인할 사항 / 우선 확인 항목) ── */
.dv-alert-banner{background:var(--green-bg);border:1px solid #d6e6b8;border-left:4px solid var(--green);
  border-radius:var(--r-m);padding:16px 20px;margin-bottom:22px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.dv-alert-banner.warn{background:var(--amber-bg);border-color:#fae0b5;border-left-color:var(--amber)}
.dv-alert-banner-main{display:flex;align-items:flex-start;gap:14px}
.dv-alert-banner-icon{width:34px;height:34px;border-radius:var(--r-s);background:#e3efc9;color:var(--green-ink);
  display:flex;align-items:center;justify-content:center;flex:none}
.dv-alert-banner.warn .dv-alert-banner-icon{background:#fde8ca;color:var(--amber-ink)}
.dv-alert-banner-title{font-size:var(--fs-base);font-weight:700;color:var(--navy);margin-bottom:4px}
.dv-alert-banner-list{margin:0;padding-left:18px;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.6}

/* ── 모던 언더라인 탭 (설문 통계 규격: 44px 터치 타겟, 모바일 가로 스크롤) ──── */
.dv-subbar{display:flex;justify-content:space-between;align-items:center;margin-top:-10px;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.dv-profile-chip{display:inline-flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);padding:7px 13px;box-shadow:0 1px 3px rgba(0,65,108,.02)}
.dv-tabs{display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);margin-top:14px;margin-bottom:20px;padding:0;
  background:transparent;overflow:visible}      /* overflow:auto 를 주면 밑줄(::after, -1px) 때문에 세로 스크롤 위젯(▲●▼)이 생긴다 */
.dv-tabs-list{display:flex;gap:28px;margin:0;padding:0;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}   /* min-width:0 이 없으면 flex 자식이 내용만큼 늘어나 가로 스크롤이 생기지 않는다 */
.dv-tabs-list::-webkit-scrollbar{display:none}
@media (max-width:640px){
  /* 옆으로 밀 수 있으면 가장자리에 그림자 — 끝까지 밀면 사라진다(덮개는 글과 함께 움직이고 그림자는 상자에 붙어 있다 · 390px 점검 2026-10-12) */
  .dv-tabs-list{gap:20px;width:100%;
    background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left center/28px 100% no-repeat local,
               linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right center/28px 100% no-repeat local,
               radial-gradient(farthest-side at 0 50%,rgba(0,65,108,.4),rgba(0,65,108,0)) left center/16px 100% no-repeat scroll,
               radial-gradient(farthest-side at 100% 50%,rgba(0,65,108,.4),rgba(0,65,108,0)) right center/16px 100% no-repeat scroll}
  .dv-tab-btn[aria-selected="true"]::after{bottom:0}
}
.dv-tab-btn,a.dv-tab-btn{position:relative;min-height:44px;flex:0 0 auto;padding:10px 4px 14px;
  border:0;border-radius:0;background:transparent;color:var(--ink-2);
  font-size:var(--fs-base);font-weight:600;cursor:pointer;transition:color .15s ease;
  outline:none;box-shadow:none;margin:0;text-decoration:none!important;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;line-height:1.4}
.dv-tab-btn:hover,a.dv-tab-btn:hover{color:var(--navy);background:transparent;text-decoration:none!important}
/* 링크 탭의 글자색은 「링크 글자색 규칙」 우선순위로 — 이전엔 (0,1,1)·(0,2,0)이라 선택 탭의 파란 글자가 아예 적용되지 않았다 */
.dv a.dv-tab-btn,.dv a.dv-tab-btn:visited{color:var(--ink-2)}
.dv a.dv-tab-btn:hover,.dv a.dv-tab-btn:visited:hover{color:var(--navy)}
.dv-tab-btn[aria-selected="true"],.dv a.dv-tab-btn[aria-selected="true"],.dv a.dv-tab-btn[aria-selected="true"]:visited{color:var(--sky-ink);font-weight:700;background:transparent}
.dv-tab-btn[aria-selected="true"]::after{content:'';position:absolute;bottom:-1px;left:0;right:0;
  height:3px;background:var(--sky-dark);border-radius:3px 3px 0 0}
.dv-tab-badge{font-size:var(--fs-2xs);font-weight:700;padding:1px 7px;border-radius:999px;
  background:var(--panel-3);color:var(--ink-3);line-height:1.4}
.dv-tab-btn[aria-selected="true"] .dv-tab-badge{background:var(--sky-bg);color:var(--sky-ink)}
.dv-tab-panel[hidden]{display:none}

/* ── 담당 학생 관리 상태 카드 ────────────────────────── */
.dv-student-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);
  padding:16px 20px;margin-bottom:12px;box-shadow:0 1px 4px rgba(0,65,108,.03);
  display:grid;grid-template-columns:220px 1fr auto;gap:20px;align-items:center;
  transition:border-color .15s ease,box-shadow .15s ease}
.dv-student-card:hover{border-color:#b4c6d8;box-shadow:0 3px 10px rgba(0,65,108,.06)}
.dv-student-info h4{font-size:var(--fs-base);font-weight:700;color:var(--ink);margin:0 0 4px}
.dv-student-info p{font-size:var(--fs-xs);color:var(--ink-4);margin:0}
.dv-student-areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dv-student-area-chip{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-s);
  padding:8px 10px;font-size:var(--fs-xs)}
.dv-student-area-chip .area-head{display:flex;justify-content:space-between;margin-bottom:3px;font-weight:600;color:var(--navy)}
.dv-student-area-chip .area-counts{color:var(--ink-3);font-size:var(--fs-2xs)}
.dv-student-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
/* 담당 학생 행의 상태 알약과 해제 버튼은 상태와 무관하게 같은 폭 · 해제는 옅은 붉은색(사용자 지시 2026-09-11) */
.dv-student-actions .dv-pill{min-width:104px;justify-content:center;box-sizing:border-box;white-space:nowrap}
.dv-student-actions .dv-btn{width:104px;box-sizing:border-box;justify-content:center;text-align:center}
.dv .dv-student-actions button.dv-btn.ghost{background:var(--coral-bg);color:var(--coral-ink);border-color:#f0c4bb}
.dv .dv-student-actions button.dv-btn.ghost:hover:not(:disabled){background:#fbe3df;color:var(--coral-ink);border-color:var(--coral)}
@media (max-width:860px){
  .dv-student-card{grid-template-columns:1fr;gap:12px}
  .dv-student-areas{grid-template-columns:1fr}
  .dv-student-actions{flex-direction:row;justify-content:space-between;align-items:center}
}

/* ── 학교급별 비교 테이블 ────────────────────────────── */
.dv-comp-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.dv-comp-table th,.dv-comp-table td{padding:12px 14px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:middle}
.dv-comp-table thead th{background:var(--panel-2);font-weight:700;color:var(--navy);font-size:var(--fs-xs);border-bottom:1px solid var(--line)}
.dv-comp-table tr:hover td{background:#fafcff}
.dv-comp-table tr.is-selected td{background:#eff6ff !important}
.dv-comp-table tr.is-selected td.st-title b{color:var(--navy)}
.dv-comp-progress{display:flex;align-items:center;gap:8px;min-width:140px}

/* ── 최근 활동 로그 ─────────────────────────────────── */
.dv-log-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dv-log-item{display:flex;align-items:baseline;gap:10px;font-size:var(--fs-sm);padding:6px 0;border-bottom:1px solid var(--line-soft)}
.dv-log-item:last-child{border-bottom:0}
.dv-log-time{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-4);white-space:nowrap}
.dv-log-msg{color:var(--ink-2);flex:1}

/* ── P07 참여톡 — 인증제 전용 게시판 (4-8) ─────────────── */
.bd-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start;margin-top:10px}   /* 제목과 도구 줄 사이(사용자 지시 10px) */
.bd-layout.has-side{grid-template-columns:minmax(0,1fr) 280px}
.bd-layout{margin-bottom:48px}                       /* 쪽 번호가 사이트 푸터에 붙지 않게 */
/* 위쪽 한 줄 안내 — 인증 기준이 이 게시판을 가리킬 때만 */
.bd-banner{display:flex;align-items:flex-start;gap:8px;margin:10px 0 4px;padding:10px 14px;border:1px solid #b9d6f5;border-radius:var(--r-m);background:var(--sky-bg);color:var(--navy-2);font-size:var(--fs-sm);line-height:1.6}
.bd-banner i{font-size:var(--fs-lg);line-height:1.5}
.bd-banner p{margin:0}
/* 목록 위 도구 줄 — [전체][내 글] · 글 수 · 글쓰기 */
.bd-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bd-toolbar .rv-quick{margin:0}
.bd-total{font-size:var(--fs-sm);color:var(--ink-3)}
.dv .bd-toolbar #bd-write-open{margin-left:auto}
.bd-writebox[hidden]{display:none}                 /* .bd-form 의 display:flex 가 hidden 을 이기지 않게 */
.dv-card.bd-writebox{margin:0}
.bd-formactions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.bd-preview{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.6;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bd-stat{display:inline-flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums}
.bd-stat i{font-size:var(--fs-md);line-height:1}
/* 댓글·공감이 1 이상이면 강조 — 하트는 글 보기의 「공감함」 버튼보다 옅은 붉은색(내가 공감했다는 뜻으로 읽히지 않게) */
.bd-stat.on{color:var(--ink-2);font-weight:600}
.bd-stat-reply.on i{color:var(--sky-ink)}
.bd-stat-like.on i{color:#e35237}   /* 아이콘 3:1 이상(옛 #ec8a78 은 2.2:1) */
.bd-author{color:var(--ink-2);font-weight:600}
.bd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 내 참여 현황 — 기준별 충족·남은 개수(판정과 같은 집계) */
.bd-status>h2{font-size:var(--fs-base);font-weight:700;color:var(--navy);margin:0}
.bd-status ul{list-style:none;margin:8px 0 10px;padding:0}
.bd-status li{padding:10px 0;border-bottom:1px solid var(--line-soft)}
.bd-status-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--fs-sm);font-weight:600}
.bd-status-rule{margin-top:4px;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.55}
.bd-status .cnt{margin-left:4px;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.bd-status li.ok .cnt{color:var(--green-ink)}
/* 현황 칸의 충족·「N개 더」 알약은 구분만 되게 작게(사용자 지시 2026-09-14) — 공통 .dv-pill 은 다른 화면이 써서 이 칸에서만 줄인다 */
.bd-status .dv-pill{flex:none;padding:0 6px;font-size:var(--fs-2xs);font-weight:600;line-height:17px}
.bd-main,.bd-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.bd-side .dv-card{margin-bottom:0}
.bd-replies>h2,.bd-form h2{font-size:var(--fs-base);font-weight:700;color:var(--navy);margin:0}
.bd-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel);overflow:hidden}
/* 행 전체가 글 링크 — 제목 링크의 ::after 를 행 크기로 펼친다(링크는 하나 · 스크립트 없음). 올리면 옅은 배경 */
.bd-item{position:relative;padding:13px 16px;border-bottom:1px solid var(--line-soft);transition:background .12s ease}
.bd-item:hover{background:#f8fafc}
.bd-item:focus-within{background:#f8fafc;box-shadow:inset 3px 0 0 var(--sky)}
.dv a.bd-title::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}
.bd-item:last-child{border-bottom:0}
/* 글자색은 「링크 글자색 규칙」보다 뒤·같은 우선순위로 */
.dv a.bd-title,.dv a.bd-title:visited{display:block;font-weight:700;font-size:var(--fs-base);color:var(--ink);overflow-wrap:anywhere}
.dv a.bd-title:hover,.dv a.bd-title:visited:hover{color:var(--sky-ink);text-decoration:underline}
/* 내 글 배지 — 제목 끝의 작은 알약. 인라인 블록이라 제목 링크 밑줄이 번지지 않는다 */
.bd-mine{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--sky-bg);border:1px solid #b9d6f5;color:var(--navy-2);font-size:var(--fs-2xs);font-weight:700;line-height:1.5;vertical-align:2px;white-space:nowrap}
.dv-card .bd-posthead h2 .bd-mine{vertical-align:3px}
.bd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:4px;font-size:var(--fs-xs);color:var(--ink-3)}
.bd-empty{color:var(--ink-3);font-size:var(--fs-sm)}
.bd-backlist{display:flex;justify-content:center;margin:4px 0 48px}
.bd-form{display:flex;flex-direction:column;gap:6px}
.bd-form label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);margin:0}
.dv .bd-form textarea{font-family:inherit;font-size:var(--fs-md);white-space:pre-wrap;min-height:0}
.bd-hint{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6}
/* 삭제 제한 안내(D-36) — 글쓰기 상자의 주의 문장 · 내 글의 「지울 수 없음」 표시 */
.bd-caution{display:flex;gap:6px;align-items:flex-start;padding:8px 10px;border-radius:var(--r-s);background:var(--amber-bg);color:var(--ink-2);font-size:var(--fs-sm);line-height:1.55}
.bd-caution i{flex:none;font-size:var(--fs-base);line-height:1.3;color:var(--amber-ink)}
.bd-locked{display:inline-flex;align-items:center;gap:4px;align-self:center;font-size:var(--fs-xs);color:var(--ink-3)}
.bd-locked i{font-size:var(--fs-md)}
/* 운영 모드·운영자 삭제(v4.172 · D-36) — 운영 대시보드 「게시판 목록」 → 「관리」. 안내는 주황, 삭제는 붉은 계열로 참여자 동작과 구분한다.
   펼침은 <details>(스크립트 없이 동작). `.dv button.dv-btn`(0,2,1)·호버(0,4,1)보다 한 단계 높게 쓴다 */
.bd-banner.bd-manage{border-color:#f3dcb0;background:var(--amber-bg);color:var(--ink-2)}
.bd-banner.bd-manage i{color:var(--amber-ink)}
.bd-admin{align-self:center}
.bd-admin[open]{flex-basis:100%}
.bd-admin>summary{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid #f1b5ab;border-radius:var(--r-s);background:var(--panel);color:var(--coral-ink);font-size:var(--fs-sm);font-weight:600;line-height:1.5;cursor:pointer;list-style:none;user-select:none}
.bd-admin>summary::-webkit-details-marker{display:none}
.bd-admin>summary i{font-size:var(--fs-md);line-height:1}
.bd-admin>summary:hover,.bd-admin[open]>summary{background:var(--coral-bg)}
.bd-admin>summary:focus-visible{outline:2px solid var(--coral-ink);outline-offset:2px}
.bd-admin-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin-top:8px;padding:10px 12px;border:1px solid #f1b5ab;border-radius:var(--r-m);background:var(--coral-bg)}
.bd-admin-field{display:flex;flex-direction:column;gap:3px;margin:0;font-size:var(--fs-xs);font-weight:600;color:var(--ink-2)}
.dv .bd-admin-form select,.dv .bd-admin-form input.bd-admin-other{height:34px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-s);background:#fff;font-size:var(--fs-sm);color:var(--ink);box-shadow:none}
.dv .bd-admin-form input.bd-admin-other{flex:1 1 220px;min-width:0}
.dv button.dv-btn.bd-admin-go{background:var(--coral-ink);border-color:var(--coral-ink);color:#fff}
.dv button.dv-btn.bd-admin-go:hover:not(:disabled){background:#c73e2c;border-color:#c73e2c;color:#fff}
@media (max-width:640px){.bd-admin-form{flex-direction:column;align-items:stretch}.dv .bd-admin-form input.bd-admin-other{flex:none;width:100%}}
/* 운영 대시보드 맨 아래 「게시판 목록」 */
.dv-boards-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:12px}
.dv-card .dv-boards-head h2{margin:0}
.dv-boards-head .hint{font-size:var(--fs-xs);color:var(--ink-4)}

/* 검증 템플릿(A05 대체 · profiles_admin) — 대시보드·지도교사와 같은 틀. 규칙은 라벨:값 목록으로, 종류는 색 칩으로(2026-09-22) */
.pf-unit{font-size:var(--fs-md);font-weight:600;color:var(--ink-3);margin-left:3px}
.pf-code{font-family:var(--mono);font-size:var(--fs-2xs);background:var(--panel-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--navy)}
.pf-tbl th.pf-th-key{width:200px}.pf-tbl th.pf-th-task{width:200px}.pf-tbl th.pf-th-state{width:96px}.pf-tbl th.pf-th-reg{width:150px}
.pf-tbl td{vertical-align:top}
.pf-tbl tr.off td{color:var(--ink-4)}
.pf-tbl tr.off td b{color:var(--ink-3)}
.pf-ver{display:inline-block;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-3);background:var(--panel-2);border:1px solid var(--line);border-radius:4px;padding:0 5px;margin-left:2px;vertical-align:1px}
.pf-title{margin-top:3px;line-height:1.45}
.pf-level{font-size:var(--fs-2xs);padding:1px 7px;margin-right:6px;vertical-align:1px}
.pf-unbound{color:var(--coral-ink);font-weight:600}
.pf-kind{display:inline-block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.02em;border-radius:4px;padding:2px 7px;margin-bottom:6px;border:1px solid transparent}
.pf-kind-certificate{background:var(--sky-bg);color:var(--navy);border-color:#b9d6f5}
.pf-kind-template{background:var(--green-bg);color:var(--green-ink);border-color:var(--green)}
.pf-kind-freeform{background:var(--amber-bg);color:var(--amber-ink);border-color:var(--amber)}
.pf-rule-list{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px 10px;margin:0;font-size:var(--fs-xs);line-height:1.5}
.pf-rule-list dt{color:var(--ink-4);font-weight:600;white-space:nowrap}
.pf-rule-list dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
.pf-rule-list dd.code{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-2)}
.pf-used{margin-top:5px;white-space:nowrap}
.pf-src{margin-top:3px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-hash{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-4);margin-top:2px}
/* 운영 대시보드 맨 아래 — 검증 템플릿 진입 카드(두 계정만 · access.PROFILES_ADMIN_USER_IDS) */
.dv-entry-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dv-entry-copy{flex:1 1 360px;min-width:0}
.dv-entry-copy b{display:block;color:var(--navy);font-size:var(--fs-md);margin-bottom:4px}
.dv-entry-copy p{margin:0;color:var(--ink-3);font-size:var(--fs-sm);line-height:1.55}
@media (max-width:640px){
  .dv-kpis{grid-template-columns:1fr}
  .pf-tbl.dv-stack tbody td.pf-reg{grid-column:1/-1}
  .pf-src{max-width:none}
}
.dv-boards-empty{color:var(--ink-3);font-size:var(--fs-sm)}
.dv-boards-key{font-size:var(--fs-xs);color:var(--ink-4)}
.dv-boards-tbl td{vertical-align:middle}
.dv-boards-tbl td.dv-boards-when{white-space:nowrap;font-variant-numeric:tabular-nums}
.bd-error{padding:8px 10px;border-radius:var(--r-s);background:var(--coral-bg);color:var(--coral-ink);font-size:var(--fs-sm);font-weight:600}
.dv-note.bd-flash{margin:10px 0 4px}
.dv-note.bd-flash-error{border-left-color:var(--coral);color:var(--coral-ink)}
.bd-posthead{padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line-soft)}
.dv-card .bd-posthead h2{font-size:var(--fs-xl);font-weight:700;color:var(--ink);margin:0;overflow-wrap:anywhere}
.bd-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-md);color:var(--ink);line-height:1.7;margin:0}
.bd-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-top:12px}
.bd-actions form{margin:0}
.bd-count{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-sm);color:var(--ink-3);align-self:center}
/* 공감 — 누르기 전은 옅은 회색 테두리 + 빈 하트, 누른 뒤는 붉은 계열 + 채운 하트(사용자 지시 2026-09-14).
   .dv button.dv-btn(0,2,1)·호버(0,4,1)보다 한 단계 높게 쓴다 */
.bd-like-form{display:flex;align-items:center;gap:8px}
.dv button.dv-btn.bd-like{gap:5px;background:var(--panel);color:var(--ink-2);border:1px solid var(--line)}
.dv button.dv-btn.bd-like i{font-size:var(--fs-base);line-height:1;color:var(--ink-3)}
.dv button.dv-btn.bd-like .bd-like-n{font-variant-numeric:tabular-nums}
.dv button.dv-btn.bd-like:hover:not(:disabled){background:var(--coral-bg);color:var(--coral-ink);border-color:#f1b5ab;transform:none;box-shadow:none}
.dv button.dv-btn.bd-like:hover:not(:disabled) i,.dv button.dv-btn.bd-like.on i{color:var(--coral-ink)}
.dv button.dv-btn.bd-like.on{background:var(--coral-bg);color:var(--coral-ink);border-color:#f1b5ab}
.dv button.dv-btn.bd-like.on:hover:not(:disabled){background:#fbe0dc;border-color:var(--coral)}
.bd-like-msg{font-size:var(--fs-xs);color:var(--coral-ink)}
.bd-replies ul{list-style:none;margin:8px 0 0;padding:0}
.bd-reply{padding:10px 0;border-bottom:1px solid var(--line-soft)}
.bd-reply .bd-body{margin-top:4px;font-size:var(--fs-md)}
.bd-reply .bd-actions{margin-top:6px}
.bd-replyform{margin-top:14px}
.bd-replyform button{align-self:flex-end}
/* 좁은 화면 — 한 줄로 쌓고 「내 참여 현황」을 목록 위에(사용자 지시 2026-09-14). has-side 두 칸 규칙(0,2,0)을 같은 우선순위로 덮는다 */
@media (max-width:980px){.bd-layout,.bd-layout.has-side{grid-template-columns:minmax(0,1fr)}.bd-side{order:-1}}
@media (max-width:640px){.bd-layout{margin-bottom:32px}.bd-backlist{margin-bottom:32px}}

/* 학생 화면 모바일(640px 이하 · 사용자 확인 2026-09-15 「버튼이 왼쪽에 치우침 · 글자가 크게 느껴짐」 · v4.194)
   ① 글자는 데스크톱 학생 단계보다 한 단계 작게 — 본문 15px · 가장 작은 글자 12px 은 지킨다(검사 ④)
   ② 카드 아래 행동 버튼은 폭을 채운다 — 두 개가 한 묶음이면 반씩
   ③ 기준 글이 좁은 칸에 갇히지 않게 — 번호·표시 옆 글이 한 줄을 다 쓰고, 증빙 종류·상태 알약은 다음 줄로 */
@media (max-width:640px){
  .dv.dv-learner{--fs-2xs:12px; --fs-xs:13px; --fs-sm:14px; --fs-md:14px; --fs-base:15px;
    --fs-lg:16px; --fs-xl:17px; --fs-2xl:19px; --fs-3xl:22px; --fs-4xl:26px}
  .dv-learner .dv-task-actions,.dv-learner .dv-form-actions{flex-direction:column;align-items:stretch}
  .dv-learner .dv-task-actions>span:last-child,.dv-learner .dv-form-actions>span:last-child{display:flex;gap:8px}
  .dv-learner .dv-task-actions>span:last-child>.dv-btn,.dv-learner .dv-form-actions>span:last-child>.dv-btn{flex:1 1 0;min-width:0}
  /* 반씩 나눈 버튼·긴 과제 안내 링크는 nowrap 글자가 틀을 넘는다(「강좌에서 제출하기」 360px) — 좁으면 띄어쓰기에서 두 줄로 */
  .dv-learner .dv-task-actions .dv-btn,.dv-learner .dv-form-actions .dv-btn,.dv-learner .dv-crit-acts .dv-btn,.dv-learner .dv-task-brief .dv-btn{white-space:normal;text-align:center}
  .dv-learner .dv-area-card-foot .dv-btn{align-self:stretch}
  .dv-learner .dv-task-actions>*{margin-left:0}
  .dv-learner .dv-kpi-card .dv-btn,.dv-learner .dv-hero-act,.dv-learner .dv-hero-act .dv-btn,.dv-learner .bd-backlist .dv-btn{width:100%}
  .dv-learner .dv-task>header .dv-crit-title{flex:1 1 calc(100% - 34px)}
  .dv-learner .dv-task>header .dv-crit-title+*{margin-left:34px}
  /* 결과물 카드 머리(D-123)는 아이콘(30px+간격 = 40px)이라 위 두 줄(번호 원 34px 기준)을 쓰면 이름이 아이콘 아래로 떨어지고 상태가 또 한 줄을 차지했다
     (사용자 지적 2026-09-29 · 중등 10 360px) — 아이콘·이름·상태를 한 줄에, 이름이 길면 이름만 줄바꿈 · 안내 문장은 그 아래 이름 자리에 맞춘다 */
  .dv-learner .dv-deliv>header .dv-crit-title{flex:1 1 0;min-width:0}
  .dv-learner .dv-deliv>header .dv-crit-title+*{margin-left:0}
  .dv-learner .dv-crit li{flex-wrap:wrap}
  .dv-learner .dv-crit li>.t{flex:1 1 calc(100% - 28px)}
  .dv-learner .dv-crit li>.t+*{margin-left:28px}
}

/* 터치 목표 44px(정본 §10 표시 규칙 · v4.190) — 손가락으로 누르는 기기(pointer:coarse)와 640px 이하에서만 키운다. 마우스로 쓰는
   표·도구 화면의 밀도는 그대로. 문장 안 링크는 제외(WCAG 목표 크기 예외), 쪽 번호는 사이트 공통 `.pagination` 을 따른다.
   검사: tasks/mlp_competency/css_contrast_check.py(선택자 목록을 이 블록과 대조) */
@media (pointer:coarse),(max-width:640px){
  .dv button.dv-btn,.dv a.dv-btn{min-height:44px}
  .dv .dv-summary,.dv .rv-guide summary,.dv .rv-hist summary,.dv .rv-ev-tab{min-height:44px;padding-top:11px;padding-bottom:11px}
  .dv .bd-admin>summary{min-height:44px}
  .dv .rv-chip{display:inline-flex;align-items:center;min-height:44px}
  .dv .dv-check{min-height:44px}
  .dv .dv-sidebar-list a{display:inline-flex;align-items:center;min-height:44px}
  .dv .dv-nav a{min-height:44px}
  .dv .dv-field input[type=url],.dv input[type=text],.dv select{min-height:44px}
}

/* 움직임 줄이기 — 전환과 「마우스 올림·초점 때 움직이는 transform」(버튼 들림 · 검토함 칸 버튼 들림 · 운영 대시보드 행 화살표 밀림)만 끈다.
   ✏️ 2026-10-07 — 예전 `.dv *{transform:none!important}` 은 자리 잡기용 transform 까지 지워 화면이 흐트러졌다: 배너 그림(SVG)이 아래로 밀리고 방패·문서가 겹침 ·
   알림(토스트) 가운데 맞춤 풀림 · 펼친 접기 화살표가 뒤집히지 않음 · 표 화살표 세로 가운데 풀림. 새 움직임용 transform 을 더하면 아래 목록에도 더한다 */
@media (prefers-reduced-motion:reduce){
  .dv *{transition:none!important}
  .dv button.dv-btn:hover,.dv a.dv-btn:hover,.dv button.rv-slot-btn:hover,
  .dv-comp-table tbody tr.a01-row:hover .a01-go svg,.dv-comp-table tbody tr.a01-row:focus-visible .a01-go svg{transform:none!important}
}