/* 상세 페이지 (2026-09-22 · B-115 1번) - partials/detail-modal.html 의 .dm-* 규칙을 페이지 꼴로 옮겼다.
   ⚠ 모달(.modal-bg · #detailModal) 규칙은 안 가져온다. 페이지라 배경·닫기·스크롤 잠금이 없다.
   ⚠ 값(색·크기)은 모달과 같다 - 화면이 같아야 옮긴 것이다. */
/* 09-22 운영 - 상단 메뉴와 본문 사이 공백을 줄이고(main 기본 32px → 10px), 위치줄·제목·전형줄 사이는 조금 넓힌다 */
.detail-page main{padding-top:10px;padding-bottom:10px}   /* 아래도 절반으로(09-22 운영) - 버튼~푸터 72px → 36px */
.dm-page{max-width:960px;margin:0 auto;padding:6px 28px 12px;background:#fff}
.dm-crumb{max-width:960px;margin:0 auto;padding:6px 28px 0;font-size:12.5px;color:var(--muted)}
.dm-page .dm-head{margin-top:10px}
.dm-page .dm-sub{margin-top:8px}
.dm-crumb a{color:var(--muted);text-decoration:none}
@media(hover:hover){.dm-crumb a:hover{color:var(--navy);text-decoration:underline}}
.dm-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dm-head h1{margin:0;font-size:20px;display:inline}
/* 대학 엠블럼 (09-22 · 대학 로고 · web/assets/img/univ/{uid}.png · 파일이 있는 대학만) */
.dm-top{display:flex;align-items:center;gap:14px;margin-top:10px}
.dm-top-txt{flex:1;min-width:0}
.dm-top .dm-head{margin-top:0}
.dm-emblem{width:64px;height:64px;object-fit:contain;border-radius:8px;background:#fff;flex:0 0 auto}
@media (max-width:640px){.dm-top{gap:10px}.dm-emblem{width:52px;height:52px}.dm-back-top{display:none}}   /* 좁은 화면은 위 「목록으로」를 뺀다(아래 큰 버튼만 · 09-22 운영) */
.dm-head .dm-dept{font-size:16px;font-weight:700;color:#333}
.dm-sub{font-size:13px;color:var(--muted);margin:4px 0 0}
.dm-nav{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.dm-nav>span{font-size:12px;color:var(--muted);font-weight:700;flex:0 0 auto}
.dm-nav a{font-size:12.5px;color:var(--navy);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:4px 11px;background:#fafafa;white-space:nowrap}
@media(hover:hover){.dm-nav a:hover{border-color:var(--orange);color:var(--orange);background:#fff}}
.dm-sec{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}
.dm-sec h2{margin:0 0 8px;font-size:14.5px;color:var(--navy);text-transform:none;letter-spacing:0}
.dm-note{font-size:13px;color:var(--muted);margin:6px 0 0}
.dm-narr{font-size:14px;line-height:1.7;margin:0 0 10px}
/* 그래프 아래 글 목록 - 캔버스는 검색엔진이 못 읽으므로 같은 값을 글로도 둔다(페이지에서 새로 둔 것 · 09-22) */
.dm-data{list-style:none;margin:6px 0 0;padding:0;font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:2px 14px}
.dm-gauge{position:relative;height:40px;background:#f4f4f2;border-radius:7px;margin:30px 4px 2px}
.dm-gauge .gz{position:absolute;top:0;bottom:0;background:#e8eef7;border-radius:7px 0 0 7px}
.dm-gauge .gmark{position:absolute;top:-3px;bottom:-3px;width:2px}
.dm-gauge .gmark-my{top:-9px}
.dm-gauge .glab{position:absolute;font-size:12.5px;white-space:nowrap}
.dm-axis{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin:2px 6px 0}
.dm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.dm-card{background:#f8f8f7;border-radius:8px;padding:10px 13px}
.dm-card .k{font-size:12.5px;color:var(--muted)}
.dm-card .v{font-size:15px;font-weight:700;margin-top:2px}
.dm-card .n{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45;word-break:keep-all}
.dm-card.bns{background:#F1F8F3;border-left:3px solid #1D9E75}
.dm-card.bns .k{color:#136B4A;font-weight:700}
.dm-card.bns .v{color:#136B4A}
.dm-card.bns .bdg{display:inline-block;margin-left:4px;padding:0 6px;border-radius:9px;background:#1D9E75;color:#fff;font-size:11px;font-weight:700;vertical-align:1px}
.dm-chart{position:relative;width:100%}
.dm-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.dm-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
table.dm-t{border-collapse:collapse;font-size:13px;min-width:1000px;width:100%}
.dm-t th{background:#f8f8f7;padding:7px 9px;white-space:nowrap;font-size:13.5px;color:#555;border-bottom:1px solid var(--line);text-align:center}
.dm-t td{padding:6px 9px;border-bottom:1px solid #f0f0ee;text-align:center;white-space:nowrap}
.dm-t td.l{text-align:left}
.dm-pair{display:grid;grid-template-columns:76px 1fr 40px;gap:5px;align-items:center;font-size:13.5px}
.dm-pair .bar{height:10px;border-radius:0 3px 3px 0}
.dm-cmp{position:relative}
.dm-cmp .row{display:grid;grid-template-columns:210px 1fr 44px;gap:6px;align-items:center;font-size:13.5px;margin:6px 0}
.dm-cmp .tr{position:relative;width:100%}
.dm-cmp .bar{height:12px;border-radius:0 3px 3px 0;background:#85B7EB}
.dm-cmp .me .bar{background:#378ADD}
.dm-cmp .sim{opacity:.75}
#dmCmpWrap .myline,#sdCmpWrap .myline{position:absolute;width:2px;background:#A32D2D;z-index:2}
#dmCmpWrap .mylab,#sdCmpWrap .mylab{position:absolute;font-size:12.5px;color:#A32D2D;font-weight:700;white-space:nowrap;z-index:2}
#dmCmpWrap:not([data-my=""]),#sdCmpWrap:not([data-my=""]){padding-top:20px}
.dm-back-top{margin-left:auto;font-size:12.5px;color:var(--navy);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:4px 11px;background:#fafafa;white-space:nowrap}
@media(hover:hover){.dm-back-top:hover{border-color:var(--orange);color:var(--orange);background:#fff}}
.dm-back{display:block;width:220px;margin:20px auto 2px;padding:12px 0;font-size:15px;font-weight:700;text-align:center;text-decoration:none;
  border:1px solid var(--line);border-radius:9px;background:#fff;font-family:inherit;color:#444}
@media(hover:hover){.dm-back:hover{border-color:var(--navy);color:var(--navy);background:#f7f9fc}}
@media (max-width:640px){
  .dm-page{padding:6px 14px 10px}
  .dm-crumb{padding:6px 14px 0}
  .dm-cmp .row{grid-template-columns:130px 1fr 36px}
  /* ★ B-115 4번 - 연도별 전체 표를 카드형으로. thead 를 감추고 칸마다 data-label 을 앞에 찍는다. */
  .dm-tablewrap{overflow:visible;border:none;border-radius:0}
  table.dm-t{min-width:0;display:block}
  .dm-t thead{display:none}
  .dm-t tbody{display:block}
  .dm-t tr{display:block;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:0 0 8px;background:#fff}
  .dm-t td{display:inline-block;border:none;padding:2px 10px 2px 0;white-space:normal;text-align:left;font-size:13px}
  .dm-t td::before{content:attr(data-label) " ";color:var(--muted);font-size:12px}
  .dm-t td:nth-child(1),.dm-t td:nth-child(2),.dm-t td:nth-child(3){font-weight:700}
  .dm-t td:nth-child(1)::before,.dm-t td:nth-child(2)::before,.dm-t td:nth-child(3)::before{content:""}
  .dm-t td:nth-child(2) .l{font-weight:700}
  .dm-t td:nth-child(11),.dm-t td:nth-child(12),.dm-t td:nth-child(13),.dm-t td:nth-child(14),.dm-t td:nth-child(15),.dm-t td:nth-child(16),.dm-t td:nth-child(17){font-size:12px;color:#666}
}

/* ── 수시 상세 (susi-detail-modal.html 에서 옮김 · 09-22) ── */
.sd-mr{background:#f8f8f7;border-radius:8px;padding:11px 14px;font-size:13.5px;line-height:1.65}
.sd-mr .o{color:#1b7e1b;font-weight:700}
.sd-mr .x{color:#888;font-weight:700}
.sd-cut2{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin-top:10px}
.sd-cut2 .b{background:#f8f8f7;border-radius:8px;padding:10px 13px}
.sd-cut2 .b .k{font-size:12.5px;color:var(--muted)}
.sd-cut2 .b .v{font-size:15px;font-weight:700;margin-top:2px}
.sd-cut2 .b .v small{font-weight:400;color:var(--muted);font-size:12px;margin-left:4px}
.cbadge{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;white-space:nowrap}
.c-gyo{background:#e3edf9;color:#1d5fae}
.c-jong{background:#e3f4e3;color:#1b7e1b}
.c-non{background:#d7f0ec;color:#0f766e}
.c-silgi{background:#fce7f0;color:#c2477e}
.c-etc{background:#f0f0f2;color:#666}

/* ── 전형계획 상세 둘 (plan-detail-modal.html · jeongsi-plan-detail-modal.html 에서 옮김 · 09-22 저녁) ──
   값은 모달과 같다. 절 제목만 h3 → h2 (페이지 규약 · 위 .dm-sec h2). */
/* 전년도 대비 상자 - 세 갈래를 색으로 갈라 둔다('달라졌다' 는 지원 가능 여부를 바꾸는 사실 · '비교하지 않는다' 는 회색) */
.pd-cmp{margin-top:9px;border-radius:8px;padding:10px 13px;font-size:13.5px;line-height:1.65}
.pd-cmp-same{background:#f1f1f3;color:#555}
.pd-cmp-diff{background:#fdecec;color:#8f2d21;font-weight:600}
.pd-cmp-na{background:#f7f7f8;color:#888}
/* 두 해 나란히 - 판정하지 않고 나란히 놓는 칸. `.pd-mr-two` 는 수능최저 절의 원문 상자(클래스를 나눠 둔다 - 검사가 반영방법 절을 집는다) */
.pd-two,.pd-mr-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.pd-mr-two{margin-top:9px}
/* 2027 = 흰 바탕 + 주황 테두리 + 진한 제목 · 2026 = 회색(주인공은 2027 · 네 면 같은 굵기) */
.pd-col{background:#f8f8f7;border-radius:8px;padding:10px 13px}
.pd-col:first-child{background:#fff;border:1.5px solid var(--orange);padding:9px 12px}
.pd-col-h{font-size:12.5px;font-weight:700;color:#6b6b6b;margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.pd-col:first-child .pd-col-h{color:var(--navy);font-size:13px}
.pd-col-item{margin:0 0 10px}
.pd-col-item:last-child{margin-bottom:0}
/* 2026 짝이 없어 한 칸일 때도 글자 크기·줄간은 두 칸일 때와 같다(09-02) */
.pd-col,.pd-one{font-size:13.5px;line-height:1.65;min-width:0;overflow-wrap:anywhere}
.pd-one{margin-top:4px}
/* 전년도 입결 참고 구간의 구분 머리말 - 이 아래는 2027 전형계획이 아니다(굵은 선) */
.pd-past-head{border-top:3px solid var(--navy);margin-top:26px;padding-top:14px}
.pd-past-head h2{font-size:15.5px}
.pd-past-head .dm-narr{margin-bottom:6px}   /* 글자 크기는 본문(.dm-narr 14px)과 같게 - 모달의 13.5px 은 안 가져온다(09-22 운영) */
/* 정시 전형계획에만 있는 것 */
.dm-card.cur{background:#fff;border:1.5px solid var(--orange)}
.dm-card.cur .k{color:#a34d00;font-weight:700}
.dm-head .gbadge{vertical-align:middle}
.gbadge.g-mu{background:#fff;color:#555;border:1px solid #999;box-sizing:border-box}   /* 군 무관 = jeongsi_plan/index.html 과 같은 값 */
.mvtag{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:4px;font-size:11.5px;font-weight:700;background:#fff4e5;color:#b26a00;white-space:nowrap;vertical-align:middle}
.jp-list{margin:0;padding-left:18px;font-size:13.5px;line-height:1.65}
.jp-list li{margin:0 0 4px}
.jp-list .k{color:var(--muted);font-size:12.5px}
table.dm-t.jp-nom,table.dm-t.jp-grade{min-width:0}
/* 2열 꼴(연도가 행)에서 2027 행 = 네 변을 칸 안쪽 inset 그림자로 닫는다(border 는 잘림선·머리 선과 싸운다 · 09-12) */
.jp-nom tr.cur27>td{box-shadow:inset 0 1.5px 0 var(--orange),inset 0 -1.5px 0 var(--orange)}
.jp-nom tr.cur27>td:first-child{box-shadow:inset 0 1.5px 0 var(--orange),inset 0 -1.5px 0 var(--orange),inset 1.5px 0 0 var(--orange);color:#a34d00;font-weight:700}
.jp-nom tr.cur27>td:last-child{box-shadow:inset 0 1.5px 0 var(--orange),inset 0 -1.5px 0 var(--orange),inset -1.5px 0 0 var(--orange)}
@media (max-width:640px){
  .pd-two,.pd-mr-two{grid-template-columns:1fr}
  /* 반영방법·등급표는 카드형으로 풀지 않는다 - 열이 적어 표 그대로가 읽기 좋다 */
  .dm-tablewrap:has(> .jp-nom),.dm-tablewrap:has(> .jp-grade){overflow-x:auto;border:1px solid var(--line);border-radius:8px}
  table.dm-t.jp-nom,table.dm-t.jp-grade{display:table;min-width:0}
  .jp-nom thead,.jp-grade thead{display:table-header-group}
  .jp-nom tbody,.jp-grade tbody{display:table-row-group}
  .jp-nom tr,.jp-grade tr{display:table-row;border:none;padding:0;margin:0;border-radius:0}
  .jp-nom td,.jp-grade td{display:table-cell;border-bottom:1px solid #f0f0ee;padding:6px 9px;text-align:center;white-space:nowrap;font-size:13px;color:inherit;font-weight:inherit}
  .jp-nom td.l,.jp-grade td.l{text-align:left;white-space:normal}
  .jp-nom td::before,.jp-grade td::before{content:none}
}

/* ── 「입시 분석」 카드 4장 (09-22 · 꼬리말 세 편을 여기로 옮겼다) - 카드 꼴은 style.css .blog-card 그대로 · 상세에선 두 열 · 이미지 없음(운영) ── */
.dm-blog h2 a{color:var(--navy);text-decoration:none}
@media(hover:hover){.dm-blog h2 a:hover{color:var(--orange)}}
.dm-blog .blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dm-blog .blog-card{display:flex;flex-direction:column}
.dm-blog .blog-cardbody{padding:10px 14px 12px}
.dm-blog .blog-card h3{margin:0 0 4px;font-size:14px;line-height:1.45;word-break:keep-all}
.dm-blog .blog-card h3 a{color:#23272f;text-decoration:none}
@media(hover:hover){.dm-blog .blog-card h3 a:hover{color:var(--orange)}}
.dm-blog .blog-sum{font-size:12.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:640px){.dm-blog .blog-grid{grid-template-columns:1fr}}