/* 차의과학대 교육과정 개편 의사결정 시트 — 공용 스타일 (모바일 우선 / 카카오 인앱 브라우저 대응) */

:root{
  --paper:#FBFCFB; --surface:#F1F4F2; --raise:#FFFFFF;
  --line:#D5DEDA; --line-soft:#E5EBE8;
  --ink:#16211F; --muted:#5C6B66; --faint:#8A9793;
  --accent:#0F6B5C; --accent-soft:#DCEBE6;
  --flag:#9A5A0C; --flag-soft:#F5E7D4;
  --keep:#3C6E4A; --keep-soft:#E0EDE2;
  --shadow:0 1px 2px rgba(22,33,31,.05), 0 8px 24px -16px rgba(22,33,31,.25);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1614; --surface:#18211F; --raise:#1C2624;
    --line:#2C3936; --line-soft:#232E2C;
    --ink:#E4ECE9; --muted:#9BABA6; --faint:#748480;
    --accent:#5CC3AC; --accent-soft:#16332D;
    --flag:#D9A05C; --flag-soft:#332614;
    --keep:#7FBB8C; --keep-soft:#1A2A1E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#0F1614; --surface:#18211F; --raise:#1C2624;
  --line:#2C3936; --line-soft:#232E2C;
  --ink:#E4ECE9; --muted:#9BABA6; --faint:#748480;
  --accent:#5CC3AC; --accent-soft:#16332D;
  --flag:#D9A05C; --flag-soft:#332614;
  --keep:#7FBB8C; --keep-soft:#1A2A1E;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1;
}
.wrap{max-width:940px; margin:0 auto; padding:0 16px 96px}
@media (min-width:720px){ .wrap{padding:0 24px 96px} }
a{color:var(--accent)}

/* ---- 머리 ---- */
header.mast{padding:34px 0 22px; border-bottom:2px solid var(--ink)}
@media (min-width:720px){ header.mast{padding:52px 0 26px} }
.eyebrow{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 12px}
h1{font-size:clamp(23px,5.6vw,38px); line-height:1.2; letter-spacing:-.02em; font-weight:800; margin:0 0 12px}
.dek{font-size:15px; color:var(--muted); margin:0; max-width:62ch}
.meta{display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:20px; font-size:13px; color:var(--muted)}
.meta b{color:var(--ink); font-weight:650}

/* ---- 진행 표시 ---- */
.tally{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 16px; margin:0 -16px; background:var(--paper);
  border-bottom:1px solid var(--line); font-size:13px; color:var(--muted);
}
.tally strong{color:var(--ink); font-weight:700}
.tally .bar{flex:1; min-width:100px; height:5px; border-radius:3px; background:var(--line-soft); overflow:hidden}
.tally .bar i{display:block; height:100%; width:0; background:var(--accent); transition:width .3s ease}
.tally .st{font-size:12px; color:var(--faint)}

/* ---- 구획 ---- */
.part{margin:44px 0 0}
.part-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding-bottom:10px; border-bottom:1px solid var(--line)}
.part-head h2{font-size:18px; font-weight:750; letter-spacing:-.01em; margin:0}
.tag{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; padding:3px 8px; border-radius:4px; white-space:nowrap}
.t-must{background:var(--accent-soft); color:var(--accent)}
.t-fix{background:var(--flag-soft); color:var(--flag)}
.t-opt{background:var(--keep-soft); color:var(--keep)}
.part-note{font-size:13.5px; color:var(--muted); margin:12px 0 0; max-width:66ch}

/* ---- 의사결정 카드 ---- */
.d{background:var(--raise); border:1px solid var(--line-soft); border-radius:10px; box-shadow:var(--shadow); margin-top:16px; transition:border-color .2s}
.d[data-v]{border-color:var(--accent)}
.d[data-v="reject"]{border-color:var(--line); opacity:.62}
.d[data-v="hold"]{border-color:var(--line)}
.d-top{display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; padding:14px 15px 12px}
.id{font-size:11.5px; font-weight:800; letter-spacing:.04em; color:var(--accent); background:var(--accent-soft); border-radius:5px; padding:3px 7px; flex:none; margin-top:2px}
.id.llm{color:var(--keep); background:var(--keep-soft)}
.d-title{flex:1; min-width:180px}
.d-title h3{margin:0 0 3px; font-size:15.5px; font-weight:700; line-height:1.42}
.d-title p{margin:0; font-size:12.5px; color:var(--muted)}

.yn{display:flex; gap:5px; flex-wrap:wrap; width:100%; margin-top:2px}
@media (min-width:820px){ .yn{width:auto; flex:none; margin-top:0} }
.yn button{
  font:inherit; font-size:12.5px; font-weight:650; padding:7px 11px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--muted);
  -webkit-tap-highlight-color:transparent;
}
.yn button:hover{border-color:var(--accent); color:var(--ink)}
.yn button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.yn button[aria-pressed="true"][data-v="adopt"]{background:var(--accent); border-color:var(--accent); color:var(--paper)}
.yn button[aria-pressed="true"][data-v="modify"]{background:var(--keep); border-color:var(--keep); color:var(--paper)}
.yn button[aria-pressed="true"][data-v="hold"]{background:var(--surface); border-color:var(--muted); color:var(--ink)}
.yn button[aria-pressed="true"][data-v="reject"]{background:var(--flag); border-color:var(--flag); color:var(--paper)}
.yn button[aria-pressed="true"][data-v="own"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}

.d-body{padding:12px 15px 16px; border-top:1px solid var(--line-soft)}
.why{font-size:13.5px; color:var(--muted); margin:0 0 13px; padding-left:11px; border-left:2px solid var(--line); white-space:pre-wrap}
.cmp{display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:700px){ .cmp{grid-template-columns:1fr 1fr} }
.col{background:var(--surface); border-radius:8px; padding:11px 13px}
.col h4{margin:0 0 7px; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:750; color:var(--faint)}
.col.new{background:var(--accent-soft)}
.col.new h4{color:var(--accent)}
.col ul{margin:0; padding-left:16px; font-size:13.5px}
.col li{margin:3px 0}
.none{color:var(--faint); font-style:italic}

.resp{margin-top:13px; border-top:1px dashed var(--line); padding-top:11px}
.resp label{display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:750; color:var(--faint); margin-bottom:6px}
.resp label .req{color:var(--flag); font-weight:800}
textarea,input[type=text],input[type=email],select{
  width:100%; font:inherit; font-size:14px; line-height:1.6; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:9px 11px;
}
textarea{min-height:62px; resize:vertical}
textarea:focus,input:focus,select:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.hint{font-size:12px; color:var(--faint); margin:6px 0 0}
.saveflag{font-size:11.5px; color:var(--keep); margin-left:8px; opacity:0; transition:opacity .25s}
.saveflag.on{opacity:1}

/* ---- 표 ---- */
.tblwrap{overflow-x:auto; margin-top:14px; border:1px solid var(--line); border-radius:9px; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:13px; min-width:600px}
th,td{padding:9px 11px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top}
thead th{background:var(--surface); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); font-weight:750; white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.n{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.pill{display:inline-block; font-size:10.5px; font-weight:750; padding:2px 7px; border-radius:4px; white-space:nowrap}
.p-base{background:var(--surface); color:var(--muted); border:1px solid var(--line)}
.p-bio{background:var(--keep-soft); color:var(--keep)}
.p-ax{background:var(--accent-soft); color:var(--accent)}

/* ---- 알림 ---- */
.warn{margin-top:18px; padding:12px 15px; border-radius:8px; background:var(--flag-soft); color:var(--flag); font-size:13px}
.ok{margin-top:18px; padding:12px 15px; border-radius:8px; background:var(--keep-soft); color:var(--keep); font-size:13px}
.warn b,.ok b{font-weight:750}

/* ---- 버튼 ---- */
.btn{
  display:inline-block; font:inherit; font-size:14.5px; font-weight:700; cursor:pointer;
  padding:12px 22px; border-radius:8px; border:1px solid var(--accent);
  background:var(--accent); color:var(--paper); text-decoration:none; text-align:center;
}
.btn:disabled{background:var(--surface); border-color:var(--line); color:var(--faint); cursor:not-allowed}
.btn.ghost{background:transparent; color:var(--accent)}
.btnrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}

/* ---- 전공 목록 카드 ---- */
.grid{display:grid; grid-template-columns:1fr; gap:12px; margin-top:20px}
@media (min-width:640px){ .grid{grid-template-columns:1fr 1fr} }
.mcard{
  display:block; background:var(--raise); border:1px solid var(--line-soft); border-radius:10px;
  box-shadow:var(--shadow); padding:15px 16px; text-decoration:none; color:inherit;
}
.mcard:hover{border-color:var(--accent)}
.mcard h3{margin:0 0 4px; font-size:16px; font-weight:750}
.mcard .sub{font-size:12.5px; color:var(--faint); margin:0 0 10px}
.mcard .row{display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--muted)}
.mcard .done{color:var(--keep); font-weight:700}
.mcard .todo{color:var(--flag); font-weight:700}

/* ---- 업로드 ---- */
.form{background:var(--raise); border:1px solid var(--line-soft); border-radius:10px; box-shadow:var(--shadow); padding:18px; margin-top:20px}
.field{margin-bottom:16px}
.field > label{display:block; font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:750; color:var(--faint); margin-bottom:6px}
input[type=file]{width:100%; font:inherit; font-size:13.5px; padding:10px; background:var(--surface); border:1px dashed var(--line); border-radius:7px}
.foot{margin-top:56px; padding-top:20px; border-top:2px solid var(--ink); font-size:13px; color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* 비전–목표–전략–실행 층위 배지 */
.layer{
  display:inline-block; vertical-align:middle; margin-left:6px;
  font-size:10.5px; font-weight:750; letter-spacing:.02em; white-space:nowrap;
  padding:2px 7px; border-radius:4px;
  background:var(--flag-soft); color:var(--flag);
}

/* ── 개편 취지·원칙 ── */
.purpose{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:16px 0 20px}
.pcard{display:flex;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:14px 16px}
.pcard .pnum{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);
  color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pcard b{display:block;margin-bottom:4px;font-size:15px}
.pcard p{margin:0;font-size:13.5px;color:var(--ink-mid);line-height:1.6}

.psum{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.ptable-wrap{overflow-x:auto;margin-bottom:12px}
.ptable{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
.ptable th,.ptable td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
  vertical-align:top}
.ptable thead th{font-size:12px;letter-spacing:.06em;color:var(--ink-soft);
  border-bottom:1.5px solid var(--ink);white-space:nowrap}
.ptable td.area{white-space:nowrap;color:var(--ink-soft);font-size:13px}
.ptable td.std,.ptable td.now{white-space:nowrap;font-variant-numeric:tabular-nums}
.ptable tr.st-bad{background:rgba(190,60,45,.05)}
.ptable tr.st-warn{background:rgba(190,140,20,.05)}
.pwhy{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-soft);line-height:1.55}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;
  font-weight:700;white-space:nowrap}
.pill.ok{background:#e6f2ea;color:#2f6b45}
.pill.warn{background:#fbf0dc;color:#8a5a10}
.pill.bad{background:#f9e6e3;color:#a3352a}
.pill.ask{background:#e9edf4;color:#41556f}

/* ── 15개 전공 현황판 ── */
/* 현황판은 가로로 잘리면 왼쪽 전공 이름이 사라져 못 쓴다.
   글자와 여백을 줄여 한 화면에 다 들어오게 한다. */
.ptable.board { min-width: 0; font-size: 12.5px; table-layout: auto; }
.ptable.board th, .ptable.board td { padding: 9px 8px; }
.ptable.board th:first-child, .ptable.board td:first-child { min-width: 150px; }
.ptable.board th.sym { width: 34px; text-align: center; white-space: nowrap;
  font-size: 14px; letter-spacing: 0; cursor: help }
.ptable.board td.mj { white-space: nowrap; font-weight: 700 }
.ptable.board td.mj a { text-decoration: none }
.ptable.board td.mj a:hover { text-decoration: underline }
.ptable.board td.mk { text-align: center; font-size: 15px; padding: 8px 4px }
.ptable.board td.num { text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums }
.ptable.board .col { display: block; font-size: 11.5px; color: var(--ink-soft);
  font-weight: 400; white-space: nowrap }
.ptable.board td.num { white-space: nowrap }
.m-ok { color: #2f6b45 }
.m-bad { color: #a3352a }
.ptable.board td.mk.up { background: #e6f2ea }
.up { color: #2f6b45; font-weight: 700; font-size: 11px; margin-left: 3px }

/* 현황판 머리글 기호 풀이 */
.legend { list-style: none; margin: 4px 0 10px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  font-size: 12.5px; color: var(--ink-mid) }
.legend li { white-space: nowrap }
.legend b { color: var(--ink); margin-right: 3px }

.ptable.board .was { color: var(--ink-soft) }
.ptable.board th .col { font-weight: 400; text-transform: none; letter-spacing: 0 }

/* ── 페이지 옆 이동 버튼 ── */
.sidenav { position: fixed; left: 12px; top: 50%; transform: translateY(-50%);
  z-index: 50; display: flex; flex-direction: column; gap: 8px }
.sidenav a { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  width: 54px; min-height: 54px; padding: 8px 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink-mid); text-decoration: none; font-size: 11px; line-height: 1.2;
  text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: border-color .12s, color .12s, box-shadow .12s }
.sidenav a:hover { border-color: var(--accent); color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,.10) }
.sidenav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.sidenav .ico { font-size: 18px; line-height: 1 }
.sidenav .lb { font-weight: 700 }

/* 화면이 좁으면 아래쪽 가로 막대로 */
@media (max-width: 1180px) {
  .sidenav { left: 0; right: 0; top: auto; bottom: 0; transform: none;
    flex-direction: row; justify-content: center; gap: 0;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -2px 10px rgba(0,0,0,.06); padding: 4px 0 max(4px, env(safe-area-inset-bottom)) }
  .sidenav a { flex-direction: row; gap: 6px; width: auto; min-height: 40px;
    padding: 8px 16px; border: 0; border-radius: 0; box-shadow: none; font-size: 13px }
  .sidenav .lb br { display: none }
  body { padding-bottom: 56px }
}

/* ── 시트의 원칙 점검 표 ──
 * 열 너비를 잡아 주지 않으면 긴 값이 다른 열을 밀어내 글자가 한 자씩 쌓인다. */
.ptable:not(.board) { table-layout: fixed; min-width: 720px }
.ptable:not(.board) th:nth-child(1), .ptable:not(.board) td:nth-child(1) { width: 72px }
.ptable:not(.board) th:nth-child(2), .ptable:not(.board) td:nth-child(2) { width: 34% }
.ptable:not(.board) th:nth-child(3), .ptable:not(.board) td:nth-child(3) { width: 120px }
.ptable:not(.board) th:nth-child(4), .ptable:not(.board) td:nth-child(4) { width: auto }
.ptable:not(.board) td { word-break: keep-all; overflow-wrap: anywhere }
.ptable:not(.board) td.std { white-space: normal }
.ptable:not(.board) td.now { white-space: normal }

/* 모델 고르기 */
.modelpick { display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-mid) }
.modelpick label { font-weight: 700 }
.modelpick select { max-width: 320px; padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink) }

/* 현황판 → 전공별 회의자료 */
.pill.link{display:inline-block;padding:3px 10px;border-radius:999px;
  border:1px solid var(--steel);color:var(--steel);text-decoration:none;
  font-size:12px;font-weight:700;white-space:nowrap}
.pill.link:hover{background:var(--steel);color:#fff}

/* 현황판 — 한 화면에 담기 */
.ptable.board th, .ptable.board td { padding: 7px 5px }
.ptable.board th:first-child, .ptable.board td:first-child { min-width: 0 }
.ptable.board td.mj { white-space: normal; line-height: 1.3 }
.ptable.board th.sym { width: 26px; font-size: 13px }
.ptable.board td.mk { font-size: 14px; padding: 7px 2px }
.ptable.board .col { font-size: 10.5px }
.pill.wait { display:inline-block; padding:2px 8px; border-radius:999px;
  background:rgba(0,0,0,.06); color:var(--ink-soft); font-size:11.5px; font-weight:700 }
.pill.link.strong { background:var(--steel,#35566d); color:#fff;
  border-color:var(--steel,#35566d); padding:4px 11px }
.pill.link.strong:hover { filter:brightness(1.12) }

/* 시트 맨 위 — 회의자료로 바로 가는 카드.
   홈으로 돌아가야 회의자료가 보이는 구조라 놓치는 분이 많았다. */
.readfirst { display: flex; gap: 16px; align-items: center;
  margin: 0 0 18px; padding: 14px 16px;
  border: 1px solid var(--accent, #35566d); border-radius: 12px;
  background: rgba(53,86,109,.045); text-decoration: none; color: inherit;
  transition: box-shadow .12s, background .12s }
.readfirst:hover { background: rgba(53,86,109,.09);
  box-shadow: 0 3px 12px rgba(0,0,0,.09) }
.readfirst img { width: 190px; flex: 0 0 190px; border-radius: 8px;
  border: 1px solid var(--line); display: block }
.rf-k { font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: var(--accent, #35566d); margin: 0 0 3px }
.rf-t { font-size: 17px; font-weight: 700; margin: 0 0 5px; line-height: 1.3 }
.rf-s { font-size: 13px; color: var(--ink-mid); margin: 0 0 8px; line-height: 1.6 }
.rf-go { display: inline-block; font-size: 13px; font-weight: 700;
  color: #fff; background: var(--accent, #35566d);
  padding: 7px 14px; border-radius: 999px }
@media (max-width: 620px) {
  .readfirst { flex-direction: column; align-items: stretch; gap: 12px }
  .readfirst img { width: 100%; flex: none }
  .rf-go { text-align: center }
}

/* 단추 줄의 회의자료 — 눈에 띄어야 한다 */
.btn.report { background: var(--accent, #35566d); color: #fff;
  border-color: var(--accent, #35566d); font-weight: 700 }
.btn.report:hover { filter: brightness(1.12); color: #fff }

/* 포털 — 시스템 설명 카드 (따로 공유할 수 있는 페이지) */
.howcard { display: flex; gap: 18px; align-items: center;
  margin: 0 0 22px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; text-decoration: none; color: inherit;
  transition: box-shadow .12s, border-color .12s }
.howcard:hover { border-color: var(--accent, #35566d);
  box-shadow: 0 3px 14px rgba(0,0,0,.09) }
.howcard img { width: 260px; flex: 0 0 260px; border-radius: 8px;
  border: 1px solid var(--line); display: block }
.hc-k { font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: var(--accent, #35566d); margin: 0 0 4px }
.hc-t { font-size: 19px; font-weight: 700; margin: 0 0 6px; line-height: 1.3 }
.hc-s { font-size: 13.5px; color: var(--ink-mid); margin: 0 0 10px; line-height: 1.7 }
.hc-go { display: inline-block; font-size: 13px; font-weight: 700;
  color: var(--accent, #35566d) }
@media (max-width: 620px) {
  .howcard { flex-direction: column; align-items: stretch; gap: 12px }
  .howcard img { width: 100%; flex: none }
}

/* 현황판 — 휴대폰에서는 카드로.
   열이 15개라 표 그대로 두면 옆으로 밀려 전공 이름이 화면 밖으로 나간다.
   행 하나를 격자로 다시 배치해 한 화면에 담는다. */
@media (max-width: 700px) {
  .boardwrap { overflow-x: visible }   /* 현황판만. 다른 표의 가로 스크롤은 살려 둔다 */
  .ptable.board { display: block; min-width: 0; border: 0 }
  .ptable.board thead { display: none }
  .ptable.board tbody { display: block }

  .ptable.board tr {
    display: grid; grid-template-columns: repeat(9, 1fr);
    gap: 9px 3px; align-items: center;
    border: 1px solid var(--line); border-radius: 12px;
    padding: 13px 12px; margin: 0 0 10px; background: #fff;
  }
  .ptable.board td { border: 0; padding: 0; white-space: nowrap }

  .ptable.board td.mj { grid-column: 1 / -1; order: 1;
    font-size: 16px; white-space: normal; line-height: 1.3 }
  .ptable.board td.mj .col { font-size: 12px; margin-top: 2px }

  /* ①~⑨ 아홉 칸이 한 줄을 채운다 */
  .ptable.board td.mk { order: 2; text-align: center; font-size: 16px;
    padding: 5px 0; border-radius: 6px }

  .ptable.board td.c-courses { grid-column: 1 / 5;  order: 3; text-align: left }
  .ptable.board td.c-modules { grid-column: 5 / 7;  order: 4; text-align: left }
  .ptable.board td.c-score   { grid-column: 7 / -1; order: 5; text-align: right }
  .ptable.board td.c-submit  { grid-column: 1 / 4;  order: 6; text-align: left }
  .ptable.board td.c-report  { grid-column: 4 / -1; order: 7; text-align: right }

  /* 숫자만 있으면 무엇인지 알 수 없다 — 이름을 붙인다 */
  .ptable.board td.c-modules::before { content: '모듈 '; color: var(--ink-soft); font-weight: 400 }
  .ptable.board td.c-score::before   { content: '충족 '; color: var(--ink-soft); font-weight: 400 }
  .ptable.board .c-courses .col, .ptable.board .c-score .col {
    display: inline; margin-left: 5px }

  .ptable.board td.c-report .pill.link { padding: 7px 14px; font-size: 13px }
  .legend { font-size: 12px; gap: 3px 14px }
}

/* 시트의 원칙 점검 표 — 휴대폰에서는 「영역」 칸을 접고 글자를 줄여 화면에 맞춘다 */
@media (max-width: 700px) {
  .ptable:not(.board) { min-width: 0; font-size: 12.5px }
  .ptable:not(.board) th:nth-child(1), .ptable:not(.board) td:nth-child(1) { display: none }
  .ptable:not(.board) th:nth-child(2), .ptable:not(.board) td:nth-child(2) { width: 38% }
  .ptable:not(.board) th:nth-child(3), .ptable:not(.board) td:nth-child(3) { width: 24% }
  .ptable:not(.board) th, .ptable:not(.board) td { padding: 8px 6px }
  .tblwrap { -webkit-overflow-scrolling: touch }
}

/* 옆으로 움직이는 표에 표시를 남긴다 (휴대폰) */
@media (max-width: 700px) {
  .ptable-wrap:not(.boardwrap), .tblwrap { position: relative }
  .ptable-wrap.scrolls:not(.boardwrap)::after, .tblwrap.scrolls::after {
    content: '옆으로 밀어 보세요 →';
    display: block; text-align: right;
    font-size: 11.5px; color: var(--ink-soft);
    padding: 3px 2px 0;
  }
}