/* 앱 모양(2026-10-29 시안 → 사이트 반영 2026-10-28): 기본 생김새(app.css) 위에 덮는다. 숫자·문구·동작은 그대로. 색은 토큰으로(다크 모드) */
:root{
  --bg:#eef1f6; --card:#ffffff; --ink:#0f172a; --sub:#64708a; --line:#e6eaf1; --soft:#f1f4fa;
  --blue:#2a63ff; --blue-soft:rgba(42,99,255,.10); --blue-band:rgba(42,99,255,.08);
  --r:22px; --r2:16px; --r3:12px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 6px 20px rgba(15,23,42,.06);
  --lift:0 2px 4px rgba(15,23,42,.05),0 14px 32px rgba(15,23,42,.10);
  --rail:248px; --abh:64px;
}
html body{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;background:var(--bg);letter-spacing:-.15px;-webkit-font-smoothing:antialiased}
button{letter-spacing:inherit}

/* ───────── 위 앱바 ───────── */
.appbar{position:sticky;top:0;z-index:8;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.ab-in{max-width:1040px;margin:0 auto;min-height:var(--abh);display:flex;align-items:baseline;gap:10px;padding:18px 24px 0}
.ab-t{font-size:24px;font-weight:800;letter-spacing:-.6px}
.ab-s{font-size:14px;color:var(--sub);font-weight:600;min-width:0;line-height:1.45}
body[data-tab="result"] .ab-s{max-width:calc(100% - 380px)}
.ab-s b{color:var(--ink)}
body.dxon .appbar{display:none}

/* 각 화면 머리글(h1)은 앱바 제목과 겹치니 부제만 남김 */
html body main .res-head{margin:2px 0 14px;align-items:center}
html body main .res-head h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html body main .res-head .lead{margin:0;font-size:14.5px}
html body .btn.line.sm,html body .dbtn.sm{border-radius:999px}

/* ───────── PC: 왼쪽 메뉴 레일 ───────── */
@media (min-width:768px){
  html body{padding-left:var(--rail)}
  html body .top{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:9;background:var(--card);border:0;box-shadow:1px 0 0 var(--line)}
  html body .top-in{flex-direction:column;align-items:stretch;justify-content:flex-start;height:100%;max-width:none;padding:26px 16px;gap:26px}
  html body .brand{padding:0 6px;display:flex;align-items:center;gap:10px;white-space:nowrap}
  html body .brand .vtag{display:table;margin:8px 0 0}
  .appbar{position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .ab-in{padding:22px 24px 0}
  html body main .res-head{margin-top:-52px!important;margin-bottom:8px!important;min-height:44px;justify-content:flex-end;position:relative;z-index:2;pointer-events:none}
  html body main .res-head>*{pointer-events:auto}
  html body main .res-head>div:first-child{display:none}
  html body .top-nav{flex-direction:column;gap:4px;background:none;padding:0;border-radius:0}
  html body .top-nav button,html body .top-nav a{height:48px;padding:0 14px;border-radius:14px;font-size:15.5px;font-weight:700;gap:12px;color:var(--sub)}
  html body .top-nav .ni{width:22px;height:22px}
  html body .top-nav button:hover,html body .top-nav a:hover{background:var(--soft)}
  html body .top-nav .on,html body .top-nav [aria-current="page"]{background:var(--blue-soft);color:var(--blue);box-shadow:none}
  html body .top-nav .fav-n{margin-left:auto;font-size:12px;line-height:20px;min-width:22px;padding:0 7px}
  html body .top-nav a{margin-top:6px;position:relative}
  html body .top-nav a::before{content:"";position:absolute;left:14px;right:14px;top:-6px;height:1px;background:var(--line)}
  html body .wrap,html body .wrap.wide{max-width:1040px;padding:6px 24px 140px}
  html body .cmpbar{left:var(--rail)}
  html body .foot{padding-left:24px;padding-right:24px}
}
@media (min-width:768px) and (max-width:1099px){
  :root{--rail:92px}
  html body .brand{padding:0;justify-content:center} html body .brand .bt,html body .brand .vtag{display:none} html body .brand .bi{width:42px;height:42px}
  html body .top-nav button,html body .top-nav a{flex-direction:column;height:auto;padding:10px 4px;font-size:11.5px;gap:4px;text-align:center}
  html body .top-nav .fav-n{position:absolute;margin:0;transform:translate(14px,-6px)}
  html body .top-nav button{position:relative}
}
/* 세로 태블릿(768~1023, 2026-10-28 사용자 "세로모드일 때는 왼쪽으로 통일"): app.css 는 1024 미만에 아래 탭을 쓰므로 왼쪽 메뉴에 이동 버튼을 보이고 아래 탭은 숨김. 메뉴가 화면보다 길면 메뉴만 스크롤 */
@media (min-width:768px) and (max-width:1023px){
  html body .top-nav{display:flex}
  html body .tabbar{display:none}
  html body .foot{padding-bottom:32px}
  html body .top{overflow-y:auto;overscroll-behavior:contain}
  html body .top-in{height:auto;min-height:100%}
}

/* ───────── 모바일: 위 앱바 + 떠 있는 아래 탭 ───────── */
@media (max-width:767px){
  html body .top{display:none}
  :root{--abh:56px}
  .ab-in{padding:14px 16px 0;justify-content:space-between}
  .ab-t{font-size:22px}
  .ab-s{display:none}
  html body .wrap,html body .wrap.wide{padding:4px 16px 170px}
  html body .tabbar{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));border:0;border-radius:24px;padding:6px 6px;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 30px rgba(15,23,42,.16),0 0 0 1px rgba(15,23,42,.04)}
  html body .tabbar button,html body .tabbar a{border-radius:18px;padding:7px 0 6px;font-size:10.5px}
  html body .tabbar .ni{width:22px;height:22px}
  html body .tabbar .on,html body .tabbar [aria-current="page"]{background:var(--blue-soft)}
  html body .tabbar .on::before,html body .tabbar [aria-current="page"]::before{display:none}
  html body .tabbar .tbn{top:3px}
  html body .cmpbar{bottom:calc(84px + env(safe-area-inset-bottom));padding:0 12px}
  html body .foot{padding-bottom:120px}
}

/* ───────── 공통 카드 느낌 ───────── */
html body .card,html body .dg .sec{border:0;border-radius:var(--r);box-shadow:var(--shadow);padding:20px}
html body .dg .sec.tbar{padding:12px 14px}
html body .dg .sh h2{font-size:19px;letter-spacing:-.4px}
html body .dg .sh i{border-radius:10px}
html body .tbl th{border:0}
html body .ib{border-radius:50%}

/* 비교함 막대: 떠 있는 알약 */
html body .cmpbi{border-radius:22px;box-shadow:0 12px 30px rgba(15,23,42,.28)}
html body .cmpch span{border-radius:999px}

/* ───────── 학과 찾기 ───────── */
html body .dg .xcon{font-size:17px;font-weight:600;background:var(--card);border:0;border-radius:var(--r);box-shadow:var(--shadow);padding:16px 20px}
html body .dg .xcon b{color:var(--blue)}
html body .dg .dxtip{border:0;border-radius:var(--r2);background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 10%,var(--card)),color-mix(in srgb,#8b5fd6 8%,var(--card)))}
html body .dg .dxtip .tl{border-radius:8px}
html body .dg .xnc{border-radius:999px;display:inline-flex;padding:6px 14px}
html body .dg .xtop .me,html body .dg .xtop .cnd{border-radius:var(--r2)}
html body .dg .gp3>div{border:0;border-radius:var(--r3);background:var(--soft)}
html body .dg .itabs{border:0;background:var(--soft);padding:4px;border-radius:14px;display:inline-flex;gap:2px;width:auto}
html body .dg .itabs button{border:0;border-radius:11px;padding:8px 14px;font-weight:700}
html body .dg .seg2{border:0;background:var(--soft);border-radius:12px;padding:3px}
html body .dg .seg2 button{border-radius:9px}

/* 학과 목록 '표' 보기: 표(행·칸)는 그대로, 둥근 상자·여백·행 구분만 앱 느낌으로 ('카드' 보기는 아래 .cards) */
html body .dg table.xlt2{border-collapse:separate;border-spacing:0;width:100%;border:0;border-radius:var(--r2);box-shadow:0 0 0 1px var(--line);overflow:hidden;background:var(--card)}
html body .dg table.xlt2 thead th{background:var(--soft);border:0;padding:11px 14px;font-size:12.5px;font-weight:700;color:var(--sub)}
html body .dg table.xlt2 tbody td{border:0;border-top:1px solid var(--line);padding:14px;background:var(--card);transition:background .12s}
html body .dg table.xlt2 tbody tr:hover td{background:color-mix(in srgb,var(--blue) 5%,var(--card))}
html body .dg table.xlt2 td.u{font-size:15.5px;font-weight:700;line-height:1.4}
html body .dg table.xlt2 td.u b{font-weight:800}
html body .dg table.xlt2 td.u small{font-size:12.5px;font-weight:500}
html body .dg table.xlt2 td.f{font-size:13px;line-height:1.45;color:var(--sub)}
html body .dg table.xlt2 td.n b{font-size:18px;font-weight:800}
html body .dg table.xlt2 td.n.d{font-weight:800;font-size:15px;white-space:nowrap}
html body .dg table.xlt2 td.h .rbt{display:flex;flex-direction:column;gap:6px;align-items:center}
html body .heart{border-radius:50%;width:38px;height:38px;display:inline-grid;place-items:center;background:var(--soft);border:0;font-size:18px}
html body .heart[aria-pressed="true"]{background:color-mix(in srgb,#e0245e 12%,var(--card));color:#e0245e}
html body .cmpb{border-radius:999px}

/* 카드 보기 */
html body .dg .cards{gap:12px}
html body .dg .cd.xcd{border:0;border-radius:var(--r2);box-shadow:0 0 0 1px var(--line);padding:16px}
html body .dg .cd.xcd:hover{box-shadow:var(--lift)}
html body .dg .xcd .btns .dbtn{border-radius:999px}

/* 대학 분포 그림 */
html body .dg .xdist .xdv{border-radius:var(--r2)}
html body .dg .dpg .dbtn{border-radius:999px}

/* ───────── 학과 진단 ───────── */
html body main .navbk.dxbk{position:sticky;top:0;z-index:8;margin:0 -24px 10px;padding:12px 24px;min-height:var(--abh);gap:12px;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
html body main .navbk.dxbk .qret{border-radius:999px;background:var(--card);box-shadow:var(--shadow);border:0;padding:8px 14px;font-weight:800}
html body main .navbk.dxbk .dxnm{font-size:18px;font-weight:800;letter-spacing:-.4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .dg .sec.tbar{background:none;box-shadow:none;padding:0 0 4px}
html body .dg .sec.tbar .mpick:not([open]){flex:none}
html body .dg .sec.tbar .mpick>summary{display:inline-flex;list-style:none}
html body .dg .sec.tbar>.dbtn,html body .dg .sec.tbar .mpick>summary{border-radius:999px;box-shadow:var(--shadow);border:0;padding:9px 16px;font-weight:700}
html body .dg .sec.tbar>.dbtn:not([aria-pressed="true"]),html body .dg .sec.tbar .mpick>summary{background:var(--card)}
html body .dg .sec.tgh{padding:24px;background:linear-gradient(160deg,var(--card) 0%,var(--card) 55%,color-mix(in srgb,var(--blue) 8%,var(--card)) 100%)}
html body .dg .tgey{display:inline-block;background:var(--blue-soft);color:var(--blue);border-radius:999px;padding:3px 10px;font-weight:800;font-size:12px}
html body .dg .dtitle{font-size:26px;letter-spacing:-.7px}
html body .dg .dxh{gap:10px}
html body .dg .dxh>div{border:0;border-radius:18px;background:var(--soft);padding:14px 16px}
html body .dg .dxh>div b,html body .dg .dxh>div strong{font-size:30px;letter-spacing:-.8px}
html body .dg .dxg{gap:12px}
html body .dg .dxc{border:0;border-radius:18px;box-shadow:0 0 0 1px var(--line);border-left:0;position:relative;overflow:hidden;padding-left:20px}
html body .dg .dxc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:currentColor;opacity:.0}
html body .dg .dxc.t-good{background:linear-gradient(180deg,color-mix(in srgb,var(--gup) 7%,var(--card)),var(--card) 60%)}
html body .dg .dxc.t-bad{background:linear-gradient(180deg,color-mix(in srgb,var(--gdn) 7%,var(--card)),var(--card) 60%)}
html body .dg .dxc.t-info{background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 7%,var(--card)),var(--card) 60%)}
html body .dg .dxc.t-warn{background:linear-gradient(180deg,color-mix(in srgb,#f0a648 9%,var(--card)),var(--card) 60%)}
html body .dg .dxtry,html body .dg .dxchk{border:0;border-radius:18px;background:var(--soft)}
html body .dg .kvg>div{border:0;border-radius:14px;background:var(--soft)}
html body .dg .doc{border-radius:999px}
html body .dg details.ev{border:0;border-radius:14px;background:var(--soft)}
html body .dg .rv{border:0;border-radius:16px;background:var(--soft)}
html body .dg table.xyt{border-collapse:separate;border-spacing:0 6px}
html body .dg table.xyt tbody td{background:var(--soft);border:0}
html body .dg table.xyt tbody td:first-child{border-radius:12px 0 0 12px}
html body .dg table.xyt tbody td:last-child{border-radius:0 12px 12px 0}
html body .dg .xsteps li{border-radius:12px}
html body .dg .dxfav .dxfr{border-radius:14px}

/* ───────── 관심 목록 ───────── */
html body .dg .dxfav{gap:8px}
html body .dg .dxfav .dxfr{background:var(--soft);border:0;padding:12px 14px}
html body .fdist .fstrip{border:0;border-radius:18px;background:var(--soft)}
html body .gunb{gap:12px}
html body .gunb .gcol{border:0;border-radius:18px;background:var(--soft);padding:14px}
html body .gunb .gcol li button{border-radius:12px;background:var(--card);border:0;box-shadow:0 0 0 1px var(--line)}
/* 상세 목록 표 → 카드 */
html body table.fvt{display:block;border:0}
html body table.fvt thead{display:none}
html body table.fvt tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
html body table.fvt tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;background:var(--card);border-radius:var(--r2);padding:14px;box-shadow:0 0 0 1px var(--line)}
html body table.fvt td{display:block;padding:8px 10px;border:0;background:var(--soft);border-radius:12px;min-width:0!important;text-align:left!important;white-space:normal!important;font-size:14px}
html body table.fvt td[data-l]:not([data-l=""])::before{content:attr(data-l);display:block;font-size:11.5px;font-weight:700;color:var(--sub);margin-bottom:1px}
html body table.fvt td.u{grid-column:1/-1;background:none;padding:0 0 4px}
html body table.fvt td.u .fvn{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;background:none;border:0;padding:0;font-size:16px;font-weight:700}
html body table.fvt td.u .fvn b{display:block;font-size:13px;color:var(--sub)}
html body table.fvt td.u .fvn small{display:block;font-size:12.5px;color:var(--sub);font-weight:500}
html body table.fvt td.u .go{width:32px;height:32px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:20px;color:var(--sub)}
html body table.fvt td.n:not(.fva){order:1;font-size:19px;font-weight:800;min-height:62px}
html body table.fvt td.gap b{font-size:19px}
html body table.fvt td.gap small{display:block;font-size:11.5px;font-weight:600}
html body table.fvt td[data-l="구분"],html body table.fvt td[data-l="기준"],html body table.fvt td[data-l="상태"]{order:2;background:none;box-shadow:inset 0 0 0 1px var(--line);font-size:13px;padding:6px 10px}
html body table.fvt td[data-l="구분"]::before,html body table.fvt td[data-l="기준"]::before,html body table.fvt td[data-l="상태"]::before{font-size:11px}
html body table.fvt td.fva{order:3}
html body table.fvt td.fva{grid-column:1/-1;background:none;padding:4px 0 0;display:flex;gap:6px;flex-wrap:wrap}
html body table.fvt td.fva .btn,html body table.fvt td.fva .cmpb{margin:0!important;border-radius:999px;flex:1}

/* ───────── 비교함 ───────── */
html body main > .seg{border:0;background:var(--card);box-shadow:var(--shadow);border-radius:16px;padding:4px;display:inline-flex}
html body main > .seg button{border-radius:12px;border:0;padding:9px 18px;font-weight:800}
html body .dg .cmpcols{gap:12px}
html body .dg .cmpc{border:0;border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
html body .dg .cmpc .cl i{border-radius:10px}
html body .dg .cmpc dl{display:grid;gap:4px}
html body .dg .cmpc dl>div{border:0!important;border-radius:10px;background:var(--soft);padding:6px 10px}
html body .dg .cmpc .cb .btn{border-radius:999px}
html body .dg .cmpt thead th[scope="col"]{border-radius:16px 16px 0 0}
html body .dg .cpos{border-radius:18px;background:var(--soft);border:0}


/* 모바일 학과 목록(ul.jml): 한 학과 = 한 카드, 배경 위에 떠 있게 */
@media (max-width:767px){
  html body .dg #dg-s2.sec{background:none;box-shadow:none;padding:0}
  html body .dg #dg-s2 .itabs{display:grid;grid-template-columns:repeat(3,auto);width:100%;background:var(--card);box-shadow:var(--shadow)}
  html body .dg #dg-s2 .itabs button{padding:9px 6px;font-size:13px}
  html body .dg #dg-s2 .itabs .ibr{grid-column:1/-1;justify-self:end;font-size:12px}
  html body .dg #dg-s2 .lhead{gap:6px;flex-wrap:wrap;margin-top:10px}
  html body .dg #dg-s2 .lhead .seg2{background:var(--card);box-shadow:var(--shadow)}
  html body .dg ul.jml{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;border:0}
  html body .dg ul.jml>li{position:relative;display:block;background:var(--card);border:0;border-radius:20px;box-shadow:var(--shadow);padding:14px 14px 12px;margin:0}
  html body .dg ul.jml>li .r{padding:0 86px 0 0;display:block}
  html body .dg ul.jml .l1{margin:0;font-size:16.5px;font-weight:800;line-height:1.3;letter-spacing:-.3px}
  html body .dg ul.jml .l1 b{display:block;font-size:12.5px;color:var(--sub);font-weight:700;margin-bottom:1px}
  html body .dg ul.jml .l2{margin:10px -86px 0 0;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--soft);border-radius:14px;padding:10px 12px;font-size:13px;color:var(--sub)}
  html body .dg ul.jml .l2 span b{font-size:19px;color:var(--ink);font-weight:800;margin:0 2px}
  html body .dg ul.jml .l2 .d{font-size:14px;font-weight:800;background:var(--card);border-radius:999px;padding:4px 12px;white-space:nowrap}
  html body .dg ul.jml .l3{margin:8px -86px 0 0;font-size:12.5px;color:var(--sub)}
  html body .dg ul.jml .l4{margin:2px -86px 0 0;font-size:12px;color:var(--sub);line-height:1.45}
  html body .dg ul.jml .rbt{position:absolute;right:12px;top:12px;display:flex;flex-direction:row;gap:6px;align-items:center}
  html body .dg ul.jml .rbt .cmpb{height:34px;padding:0 10px;font-size:12.5px}
  html body .dg ul.jml .rbt .heart{width:34px;height:34px;font-size:16px}
}

/* 모바일 전용 배치 */
@media (max-width:767px){
  html body main .navbk.dxbk{margin:0 -16px 8px;padding:8px 16px;min-height:var(--abh)}
  html body main .navbk.dxbk .dxnm{font-size:16px}
  html body table.fvt tbody{grid-template-columns:minmax(0,1fr)}
  html body .card,html body .dg .sec{padding:16px;border-radius:20px}
  html body .dg .sec.tgh{padding:18px}
  html body .dg .dtitle{font-size:22px}
  html body .dg .dxh>div b,html body .dg .dxh>div strong{font-size:24px}
  html body table.fvt td.n:not(.fva),html body table.fvt td.gap b{font-size:17px}
  html body table.fvt tr{grid-template-columns:repeat(6,minmax(0,1fr))}
  html body table.fvt td.n:not(.fva){grid-column:span 3;min-height:0}
  html body table.fvt td.n.gap{grid-column:1/-1;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
  html body table.fvt td.n.gap::before{display:inline;margin:0;align-self:center}
  html body table.fvt td.n.gap small{display:inline}
  html body table.fvt td[data-l="구분"],html body table.fvt td[data-l="기준"],html body table.fvt td[data-l="상태"]{grid-column:span 2;font-size:12.5px;padding:6px 8px}
  html body .dg .dxfav .dxfr{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm v" "tr tr";gap:8px 10px;align-items:center;padding:12px 14px}
  html body .dg .dxfav .dxfr .nm{grid-area:nm;font-size:14px;line-height:1.35}
  html body .dg .dxfav .dxfr .nm b{display:block;font-size:12px;color:var(--sub)}
  html body .dg .dxfav .dxfr .v{grid-area:v;text-align:right;font-size:15px}
  html body .dg .dxfav .dxfr .v small{display:block;font-size:11px;max-width:130px;margin-left:auto}
  html body .dg .dxfav .dxfr .tr{grid-area:tr;width:100%!important;background:linear-gradient(90deg,transparent calc(50% - 1px),var(--sub) calc(50% - 1px),var(--sub) calc(50% + 1px),transparent calc(50% + 1px)),var(--card);border-radius:6px}
  html body .dg .cmpc{padding:12px;border-radius:18px}
  html body .dg .cmpc .cl{font-size:14px}
  html body .dg .cmpc .cb{display:flex;flex-wrap:nowrap;gap:4px}
  html body .dg .cmpc .cb .btn{padding:6px 9px;font-size:12.5px;white-space:nowrap}
  html body .dg .cmpc .cb .btn.line{flex:1}
  html body .dg .cmpc dl>div{padding:5px 8px;font-size:12.5px}
  html body .dg .cmpc dl>div dd{font-size:16px}
  html body .dg .cmpc dl>div:first-child dd{font-size:12.5px}
}

/* PC 항목별 비교: 학교마다 세로 한 장의 색 카드처럼 */
@media (min-width:768px){
  html body .dg .cmpt{border-spacing:8px 0}
  html body .dg .cmpt tbody td{background:color-mix(in srgb,var(--t) 55%,transparent);border-bottom:2px solid var(--card)}
  html body .dg .cmpt tbody tr:last-child td{border-radius:0 0 16px 16px}
  html body .dg .cmpt tbody th{border-bottom:1px solid var(--line)}
}

/* 해·달 버튼 자리: PC는 왼쪽 메뉴 맨 아래, 모바일은 위 앱바 오른쪽 */
.ab-in .thm{display:none;margin-left:auto;align-self:center}
@media (max-width:767px){ .ab-in .thm{display:grid} }
@media (min-width:768px){ html body .top-in>.thm{margin:-14px 0 0} } /* 메뉴 바로 아래(맨 아래에 두니 안 보임 — 사용자 2026-10-28) */
@media (min-width:768px) and (max-width:1099px){ html body .top-in>.thm{align-self:center} }
/* 학교별 입결: 첫 화면 제목은 앱바 제목과 겹치니 숨김(읽기 도구에는 남김) */
.sc-ab ~ #sc .sc-hero h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (min-width:768px){ .sc-ab ~ #sc{padding-top:6px} }

/* 해·달 버튼을 눈에 띄게(2026-10-28 사용자: 다크 모드가 안 보임) — PC 왼쪽 메뉴에서는 글자까지 */
.thm em{display:none;font-style:normal}
@media (min-width:1100px){ html body .top-in>.thm{width:auto;height:44px;padding:0 14px;border-radius:14px;justify-content:flex-start;gap:8px;font-size:15px;font-weight:700;color:var(--sub);display:flex;align-items:center}
  html body .top-in>.thm .i-moon,html body .top-in>.thm .i-sun{align-items:center;gap:10px}
  html body .top-in>.thm .i-moon{display:inline-flex} html body .top-in>.thm em{display:inline;font-size:15px} }
@media (min-width:1100px){ html body .top-in>.thm em{margin-left:8px} html body .top-in>.thm .i-moon{gap:0} }
/* 왼쪽 메뉴 위치를 화면마다 같게(2026-10-28 사용자: 화면마다 조금씩 다름) — 위 머리글용 오른쪽 정렬을 풀고, 구분선은 마지막(학교별 입결) 위에만 */
@media (min-width:768px){
  html body .top-nav{margin-left:0;width:100%}
  html body .top-nav a{margin-top:0}
  html body .top-nav a::before{display:none}
  html body .top-nav>:last-child{margin-top:6px}
  html body .top-nav>:last-child::before{display:block;content:"";position:absolute;left:14px;right:14px;top:-6px;height:1px;background:var(--line)}
  html body .top-in>.thm{width:100%}
  .sc-ab .ab-in{max-width:1280px;padding-left:16px;padding-right:16px}
}
/* 본문 폭을 모든 화면에서 같게(2026-10-28 사용자: 페이지마다 오른쪽 폭이 다름) — 성적 입력(960)·학교별 입결(1280)도 1040, 제목 줄과 같은 시작선 */
@media (min-width:768px){
  html body .wrap.wstep{max-width:1040px;padding-left:24px;padding-right:24px}
  html body .sc-ab ~ #sc{max-width:1040px;padding-left:24px;padding-right:24px}
  html body .sc-ab .ab-in{max-width:1040px;padding-left:24px;padding-right:24px}
}
/* 스크롤 막대가 있든 없든 본문 위치가 같게 */
html{scrollbar-gutter:stable}

/* ───────── 로고(입시 길잡이 · 길을 그리는 연필, 2026-10-29) ───────── */
.brand .bi{width:38px;height:38px;flex:none;display:block;--lg-t:#ffffff;--lg-te:#e1e6f0;--lg-a:#1f5eff;--lg-a2:#1747c9;--lg-b:#13235c;--lg-w:#ffd27a;--lg-n:#13235c}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .brand .bi{--lg-t:#273049;--lg-te:#333d57;--lg-a:#5b8cff;--lg-a2:#4675e6;--lg-b:#c9d6ff;--lg-n:#e8ecf3} }
:root[data-theme="dark"] .brand .bi{--lg-t:#273049;--lg-te:#333d57;--lg-a:#5b8cff;--lg-a2:#4675e6;--lg-b:#c9d6ff;--lg-n:#e8ecf3}
html body .brand{text-decoration:none;color:var(--ink)}
.brand .bt{display:grid;line-height:1.2}
.brand .bn{font-size:20px;font-weight:800;letter-spacing:-.5px}
.brand .bs{font-size:11.5px;font-weight:600;color:var(--sub);letter-spacing:-.2px}
/* 맨 아래 이용 안내·개인정보 처리방침·문의 링크(2026-10-28) */
.foot .foot-links{display:block;margin-top:6px}
.foot .foot-links a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* 요청하기(2026-10-28): PC 왼쪽 메뉴 아래·모바일 앱바 버튼, 학과 진단·학교별 입결 끝 줄, 요청 창(request.js) */
.side-links{display:none}
.side-rq .ni,.ab-rq .ni{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media (min-width:768px){
  html body .top-in>.side-links{display:grid;gap:8px;margin-top:-16px}
  .side-rq{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--sub);font:inherit;font-size:15px;font-weight:700;cursor:pointer;width:100%}
  .side-rq:hover{border-color:var(--blue);color:var(--blue)}
  .side-rq .ni{width:22px;height:22px}
  .side-links p{margin:0;padding:0 6px;font-size:12px;color:var(--sub);line-height:1.5}
  .side-links a{color:inherit}
}
@media (min-width:768px) and (max-width:1099px){ .side-rq{justify-content:center;padding:0;width:44px;margin:0 auto} .side-rq span,.side-links p{display:none} }
.ab-rq{display:none}
@media (max-width:767px){
  .ab-in .ab-rq{display:grid;place-items:center;margin-left:auto;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--sub);padding:0;cursor:pointer;align-self:center}
  .ab-in .ab-rq .ni{width:20px;height:20px}
  .ab-in .ab-rq + .thm{margin-left:8px}
}
.foot .foot-rq{border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.rq-inline{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin-top:14px;padding:14px 18px;border-radius:16px;background:var(--soft);color:var(--sub);font-size:14px}
.rq-inline .rq-open{height:38px;padding:0 16px;border-radius:12px;border:1px solid var(--blue);background:var(--card);color:var(--blue);font:inherit;font-weight:700;cursor:pointer}
dialog.rq{border:0;padding:0;border-radius:22px;background:var(--card);color:var(--ink);width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 20px 60px rgba(15,23,42,.3)}
dialog.rq::backdrop{background:rgba(15,23,42,.45)}
.rq [hidden]{display:none!important}
.rq-in,.rq-done{padding:22px 22px 18px;display:grid;gap:10px}
.rq-h{display:flex;align-items:center;justify-content:space-between}
.rq h2{margin:0;font-size:20px;font-weight:800}
.rq-x{border:0;background:none;color:var(--sub);font-size:18px;cursor:pointer;width:36px;height:36px;border-radius:10px}
.rq-lead{margin:0;font-size:14px;color:var(--sub);line-height:1.6}
.rq-kinds{display:flex;flex-wrap:wrap;gap:6px}
.rq-kinds button{height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--sub);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.rq-kinds button[aria-checked="true"]{background:var(--blue);border-color:var(--blue);color:var(--blue-ink)}
.rq-l{font-size:13.5px;font-weight:700;margin-top:4px}
.rq-l b{color:var(--blue);font-size:12px;margin-left:4px}
.rq-l span{color:var(--sub);font-weight:600;font-size:12px;margin-left:4px}
.rq textarea,.rq input[type=email]{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;font-size:15px;background:var(--bg);color:var(--ink)}
.rq textarea{resize:vertical;min-height:110px}
.rq textarea[aria-invalid=true]{border-color:var(--err)}
.rq-err{margin:0;color:var(--err);font-size:13px}
.rq-ctx{margin:0;font-size:12.5px;color:var(--sub);background:var(--soft);border-radius:10px;padding:8px 10px}
.rq-note{margin:0;font-size:12px;color:var(--sub);line-height:1.6}
.rq-note a{color:var(--blue)}
.rq-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.rq-f{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.rq-f button,.rq-done button{height:44px;padding:0 18px;border-radius:12px;font:inherit;font-weight:800;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.rq-f .rq-send{background:var(--blue);border-color:var(--blue);color:var(--blue-ink);min-width:120px}
.rq-f .rq-send:disabled{opacity:.6}
.rq-done p{margin:0;color:var(--sub)}
.rq-done button{justify-self:end}

/* 세로 태블릿 표·분포(2026-10-29 사용자 태블릿 캡처): 숫자 칸 작은 글씨가 줄바꿈 없이 길어 표가 카드 밖으로 넘치고(→ 크롬이 화면을 넓혀 왼쪽 메뉴까지 같이 밀림), 글이 많은 반영 방식 칸은 너무 좁던 것 */
html body .dg table.xlt2 td.n small{white-space:normal}
@media (min-width:768px) and (max-width:1099px){
  html body .dg table.xlt2 thead th{white-space:normal}
  html body .dg table.xlt2 thead th,html body .dg table.xlt2 tbody td{padding-left:10px;padding-right:10px}
  html body .dg table.xlt2 td.u{min-width:150px}
  html body .dg table.xlt2 td.f{min-width:130px}
  html body .dg table.xlt2 td.n small{min-width:7em}
  html body .dg table.xlt2 td.n.d{white-space:normal;min-width:6.5em}
}
/* 분포: 모바일처럼 조절바 숫자(±3점)를 손잡이 위·아래에 두고 오른쪽 칸을 줄여 그래프를 넓게 */
@media (min-width:641px) and (max-width:1023px){
  html body .dg .xdv{grid-template-columns:44px minmax(0,1fr) 48px;gap:0 6px}
  html body .dg .xdv .hv{left:50%;padding:0 2px}
  html body .dg .xdv .hv.t{transform:translate(-50%,calc(-100% - 10px))}
  html body .dg .xdv .hv.b{transform:translate(-50%,10px)}
  html body .dg .xdv .rhint{left:50%;transform:translateX(-50%);width:60px;text-align:center}
}