/* ─────────────────────────────────────────────────────────────
   신규 합격예측(ipsi_2) — 대학별 비교 화면

   · 색·글자·검색창·조건 단추·대학 카드는 예측 화면(ipsi2.css)의 것을 그대로 쓴다.
     여기에는 이 화면에만 있는 것만 둔다.
   · 이 파일의 모든 클래스는 ip2c- 로 시작한다. 예외 없음.
   ───────────────────────────────────────────────────────────── */

/* ── 대학 카드 — 예측 화면 카드에 담기 표시를 더한다 ────────── */
/* 오른쪽 아래 : 예측 화면은 화살표, 이 화면은 담기·빼기 */
/* 2026-10-30 카드 → 한 줄 목록형: 담기·빼기는 줄 오른쪽 끝 칸 */
.ip2c-add{justify-self:end;font-size:1.35rem;color:var(--ip2-brand-d);white-space:nowrap;transition:color .14s}
.ip2-ucard:hover .ip2c-add{color:var(--ip2-brand)}
/* 담은 카드 — 청록으로 채워 한눈에 갈리게 */
.ip2-ucard.is-in{background:#E4F4F9;box-shadow:inset .3rem 0 0 var(--ip2-brand-d)}
.ip2-ucard.is-in .ip2-un{color:var(--ip2-brand-d)}
.ip2-ucard.is-in .ip2c-add{color:#C0392B}
/* 담은 차례 — 아래 담은 대학 딱지의 번호와 같은 번호다 */
.ip2c-no{width:2.2rem;height:2.2rem;margin-right:.6rem;border-radius:50%;vertical-align:.1rem;
  background:var(--ip2-brand-d);color:#fff;font-size:1.25rem;font-weight:normal;
  display:none;align-items:center;justify-content:center}
.ip2-ucard.is-in .ip2c-no{display:inline-flex}

/* ── 담은 대학 ─────────────────────────────────────────────
   머리줄과 목록을 위아래로 나눈다.
   대학이 늘어나도 단추가 밀리지 않도록 단추는 머리줄에만 둔다 */
/* 조건 단추 바로 아래에 붙는다. 예측 화면의 첫 화면 여백(아래 6.8rem)은
   이 상자 때문에 너무 벌어지므로 이 화면에서만 좁힌다 */
#ip2cPick .ip2-hero{padding-bottom:3.2rem}
.ip2-wrap.is-idle #ip2cPick .ip2-hero{padding-bottom:4.4rem}
.ip2c-bag{max-width:106rem;margin:2.2rem auto 0;background:#fff;text-align:left;
  border:1px solid var(--ip2-line);border-radius:.8rem;overflow:hidden}
.ip2c-bhd{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.6rem;
  background:var(--ip2-canvas);border-bottom:1px solid var(--ip2-line)}
.ip2c-bhd b{font-size:1.5rem;font-weight:normal;color:var(--ip2-ink);white-space:nowrap}
.ip2c-bn{font-size:1.5rem;color:var(--ip2-brand-d);white-space:nowrap}
.ip2c-bsp{flex:1 1 auto}
.ip2c-blist{display:flex;flex-wrap:wrap;gap:.6rem;padding:1.4rem 1.6rem}

.ip2c-bchip{display:inline-flex;align-items:center;gap:.7rem;padding:.6rem .8rem .6rem .6rem;
  background:#fff;border:1px solid var(--ip2-line2);border-radius:.6rem;
  font-size:1.45rem;color:var(--ip2-ink);max-width:24rem}
.ip2c-bchip i{flex:0 0 auto;width:2rem;height:2rem;border-radius:.4rem;background:var(--ip2-brand-d);
  color:#fff;font-style:normal;font-size:1.25rem;display:flex;align-items:center;justify-content:center}
.ip2c-bchip em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip2c-bchip button{flex:0 0 auto;border:0;background:transparent;color:var(--ip2-mut);
  font-size:1.4rem;cursor:pointer;font-family:inherit;padding:0}
.ip2c-bchip button:hover{color:#C0392B}

/* 단추 두 개 — 알약꼴로 맞추고 무게를 색으로만 가른다.
   비교하기는 채움, 비우기는 테두리 없는 고스트 */
.ip2c-bgo{flex:0 0 auto;display:inline-flex;align-items:center;gap:.7rem;height:4.2rem;
  padding:0 1.4rem 0 1.9rem;border:0;border-radius:999px;background:var(--ip2-brand-d);color:#fff;
  font-family:inherit;font-size:1.5rem;letter-spacing:-.02em;white-space:nowrap;cursor:pointer;
  transition:background .14s}
.ip2c-bgo svg{width:1.8rem;height:1.8rem;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .14s}
.ip2c-bgo:hover{background:var(--ip2-brand)}
.ip2c-bgo:hover svg{transform:translateX(.3rem)}
.ip2c-bgo:active{background:var(--ip2-brand2)}
/* 두 곳이 안 되면 — 흐리게 두지 않고 채운 색만 걷어 낸다 */
.ip2c-bgo.is-off{background:#fff;color:#8A9099;box-shadow:inset 0 0 0 1px var(--ip2-line2)}
.ip2c-bgo.is-off:hover{background:#fff}
.ip2c-bgo.is-off:hover svg{transform:none}
.ip2c-warn{font-size:1.35rem;color:#B45309;white-space:nowrap}

.ip2c-bx{flex:0 0 auto;display:inline-flex;align-items:center;gap:.6rem;height:4.2rem;
  padding:0 1.4rem;border:0;border-radius:999px;background:transparent;color:var(--ip2-ink2);
  font-family:inherit;font-size:1.45rem;letter-spacing:-.02em;white-space:nowrap;cursor:pointer;
  transition:background .14s,color .14s}
.ip2c-bx svg{width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ip2c-bx:hover{background:#FBECEA;color:#C0392B}

/* ── 두 번째 걸음 : 고른 대학의 산출등급 ───────────────────── */
/* 걸음 옮기는 줄 — 학년도 토글과 같은 모양으로 화면 위 가운데에 둔다.
   가운데 칸이 지금 보고 있는 걸음이고, 좌우가 앞뒤로 가는 칸이다.
   글자 길이가 달라도 칸 너비는 같게 둔다 */
.ip2c-nav{display:flex;justify-content:center;margin-bottom:3.2rem}
.ip2c-nav-in{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem;
  background:var(--ip2-canvas);border:1px solid var(--ip2-line);border-radius:999px;
  max-width:100%;flex-wrap:wrap;justify-content:center}
.ip2c-nav button,.ip2c-nav .is-on{display:inline-flex;align-items:center;justify-content:center;
  min-width:21rem;height:4rem;border:0;background:transparent;color:var(--ip2-ink2);
  font-family:inherit;font-size:1.5rem;font-weight:normal;letter-spacing:-.02em;
  padding:0 1.4rem;border-radius:999px;white-space:nowrap;transition:.12s}
.ip2c-nav button{cursor:pointer}
.ip2c-nav button:hover{color:var(--ip2-brand-d);background:#fff}
.ip2c-nav .is-on{background:var(--ip2-brand);color:#fff}

/* 카드는 줄을 바꾸지 않는다. 아홉 칸을 늘 두고 왼쪽부터 채우므로
   담은 곳이 둘이든 아홉이든 칸 크기가 달라지지 않는다.
   좌우로 밀어 보게 두면 위아래도 함께 잘리므로, 카드가 떠오를 자리만큼 여백을 둔다 */
/* 카드 줄만 본문 폭(150rem)을 넘어 화면 폭까지 넓힌다 — 칸이 넓어질수록 카드가 커진다.
   위아래 걸음 줄과 펼침 상자는 본문 폭 그대로 둔다 */
.ip2c-rings{display:grid;grid-template-columns:repeat(9,minmax(13rem,1fr));gap:1rem;
  width:min(calc(100vw - 12rem), 196rem);margin-left:50%;transform:translateX(-50%);
  overflow-x:auto;padding:.8rem .2rem 1.6rem}
.ip2c-ring{position:relative;overflow:hidden;background:#fff;border:1px solid #BFC7CF;
  padding:1.6rem .8rem 1.4rem;text-align:center;cursor:pointer;font:inherit;color:inherit;
  display:flex;flex-direction:column;
  /* 그림자는 안에서 밖으로 갈수록 옅어지게 여러 겹으로 쌓는다 */
  box-shadow:0 .1rem .2rem rgba(16,32,48,.16),
             0 .4rem .8rem rgba(16,32,48,.10),
             0 1rem 2rem rgba(16,32,48,.06),
             0 2rem 4rem rgba(16,32,48,.03);
  transition:border-color .14s,box-shadow .14s,background .14s}
.ip2c-ring:hover{border-color:var(--ip2-brand);background:#F4FBFD;
  box-shadow:0 .1rem .3rem rgba(16,32,48,.20),
             0 .6rem 1.2rem rgba(16,32,48,.13),
             0 1.4rem 2.8rem rgba(16,32,48,.08),
             0 2.8rem 5.6rem rgba(16,32,48,.04)}
/* 펼쳐 둔 카드 — 위로 떠올라 앞으로 나온 것처럼 보이게 한다.
   ① 위 모서리에 청록 막대 ② 두꺼운 테두리 ③ 깊은 그림자 ④ 한 단계 위로 */
.ip2c-ring.is-open{border:2px solid var(--ip2-brand-d);background:#fff;
  padding:1.5rem .7rem 1.3rem;z-index:2;
  box-shadow:0 .2rem .4rem rgba(21,94,117,.26),
             0 .8rem 1.6rem rgba(21,94,117,.18),
             0 1.8rem 3.6rem rgba(21,94,117,.11),
             0 3.4rem 6.8rem rgba(21,94,117,.05)}
.ip2c-ring.is-open:hover{background:#fff}
/* 위 모서리 막대 — 아래 펼쳐진 상자와 한 덩어리로 읽히게 하는 표시 */
.ip2c-ring.is-open::before{content:"";position:absolute;left:0;right:0;top:0;height:.6rem;
  background:linear-gradient(90deg,var(--ip2-brand),var(--ip2-brand-d))}
.ip2c-ring.is-open .ip2c-rn{margin-top:.4rem;color:var(--ip2-brand-d)}
.ip2c-ring.is-open .ip2c-jn{background:#E4F4F9}
.ip2c-ring.is-open .ip2c-gogo{color:#C0392B}

/* 대학 이름 — 카드에서 가장 먼저 읽혀야 하므로 한 단계 진하게. 두 줄까지 두고 넘치면 자른다 */
.ip2c-rn{font-size:1.75rem;font-weight:600;color:var(--ip2-ink);letter-spacing:-.035em;
  line-height:1.3;height:4.6rem;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* 대학 이름 아래 전형 — 산출식이 전형마다 다르므로 여기서 바꿔 본다 */
.ip2c-jn{display:flex;align-items:center;justify-content:center;gap:.2rem;margin-top:.4rem;
  height:2.8rem;border-radius:999px;background:#EDF1F5}
.ip2c-ja{width:2.2rem;height:2.2rem;flex:0 0 auto;border:0;border-radius:50%;background:transparent;
  color:var(--ip2-brand-d);font-family:inherit;font-size:1.5rem;line-height:1;cursor:pointer}
.ip2c-ja:hover{background:#fff}
.ip2c-ja:disabled{color:#B7BDC4;cursor:default}
.ip2c-ja:disabled:hover{background:transparent}
.ip2c-jn em{flex:1 1 auto;min-width:0;font-style:normal;font-size:1.2rem;color:var(--ip2-ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 반원 게이지 — 글자를 게이지 아래에 두므로 잘리거나 좁혀질 일이 없다 */
.ip2c-hf{width:100%;max-width:13.4rem;margin:1rem auto 0}
.ip2c-hf svg{width:100%;height:auto;display:block}
.ip2c-v{margin-top:-3.6rem}
.ip2c-v i{display:block;font-style:normal;font-size:1.15rem;color:var(--ip2-mut);line-height:1.2}
.ip2c-v b{display:block;font-size:3.4rem;font-weight:300;color:var(--ip2-brand-d);
  line-height:1.05;letter-spacing:-.03em}
.ip2c-v u{display:block;text-decoration:none;font-size:1.2rem;color:var(--ip2-mut);margin-top:.3rem}
.ip2c-nog{display:block;font-size:1.25rem;color:var(--ip2-ink2);line-height:1.5;margin-top:-2.4rem}

/* 판정 — 좁은 칸이라 세 칸으로 나눠 숫자만 색으로 가른다 */
/* 판정별 학과 수 — 판정 이름이 네 글자라 세 칸으로 나누면 줄이 꺾인다.
   카드가 좁으므로 한 줄에 하나씩 두고 이름은 왼쪽·수는 오른쪽에 붙인다 */
.ip2c-jd{display:grid;grid-template-columns:1fr;margin-top:1.2rem;
  border-top:1px solid var(--ip2-line)}
.ip2c-jd span{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.55rem .5rem;font-size:1.2rem;color:var(--ip2-ink2);line-height:1.3;
  white-space:nowrap}
.ip2c-jd span + span{border-top:1px solid var(--ip2-line)}
.ip2c-jd b{font-size:1.5rem;font-weight:normal;letter-spacing:-.02em}
.ip2c-jd .ok b{color:#15803D}
.ip2c-jd .mid b{color:#1D4ED8}
.ip2c-jd .risk b{color:#B45309}
.ip2c-jd .hard b{color:#991B1B}
/* 한 문장짜리 안내는 줄을 바꿔야 한다 — 위 판정 줄의 줄바꿈 금지를 되돌린다 */
.ip2c-jd .na{white-space:normal;grid-column:1 / -1;color:var(--ip2-mut);font-size:1.2rem;line-height:1.5;
  padding:1rem .4rem .4rem}
.ip2c-gogo{margin-top:1rem;font-size:1.2rem;color:var(--ip2-brand-d)}
.ip2c-ring:hover .ip2c-gogo{color:var(--ip2-brand)}

/* 아직 담지 않은 자리 */
.ip2c-ring.is-empty{border:1px dashed var(--ip2-line2);background:var(--ip2-canvas);
  box-shadow:none;justify-content:center;cursor:default}
.ip2c-ring.is-empty:hover{border-color:var(--ip2-brand);background:#F4FBFD;transform:none;
  box-shadow:none}
.ip2c-eno{width:100%;max-width:13.4rem;aspect-ratio:1/1;margin:0 auto;border-radius:50%;
  border:1.4rem solid #EDF1F5}
.ip2c-etx{margin-top:1.2rem;font-size:1.3rem;color:var(--ip2-mut)}

/* 카드를 고르기 전 안내 — 카드 줄과 펼침 자리 사이에 한 줄로 둔다.
   고르면 사라진다 */
.ip2c-hint{display:flex;align-items:center;justify-content:center;gap:.9rem;
  margin:2.4rem auto 0;padding:1.4rem 2.2rem;max-width:76rem;
  border:1px dashed var(--ip2-brand-b);border-radius:999px;background:#F4FBFD;
  font-size:1.5rem;color:var(--ip2-brand-d);letter-spacing:-.02em;text-align:center}
.ip2c-hint svg{flex:0 0 auto;width:2rem;height:2rem;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* display 를 준 요소는 hidden 표시만으로는 감춰지지 않는다 — 여기서 함께 걸어 준다 */
.ip2c-hint[hidden]{display:none}
@media (max-width:768px){
  .ip2c-hint{padding:1.2rem 1.4rem;font-size:1.35rem;border-radius:.8rem}
}

/* 카드를 누르면 아래에 붙는 05 합격예측 — 그 화면을 그대로 담는다 */
/* 펼쳐진 대학 상자 — 바탕을 옅은 청록으로 두어 안의 흰 상자들과 층을 나눈다.
   회색보다 이 화면의 청록 계열과 잘 붙는다 (창 안쪽 바탕도 같은 값이어야 한다) */
.ip2c-pane{margin-top:3.2rem;border:1px solid #BFDCE6;border-radius:.8rem;
  background:#ECF5F8;overflow:hidden}
.ip2c-phd{display:flex;align-items:center;gap:1rem;padding:1.4rem 1.8rem;
  background:var(--ip2-brand-d);color:#fff}
.ip2c-phd b{font-size:1.8rem;font-weight:normal;letter-spacing:-.02em}
.ip2c-phd span{font-size:1.45rem;color:rgba(255,255,255,.82)}
.ip2c-phd .ip2c-psp{flex:1}
.ip2c-phd button{height:3.4rem;padding:0 1.2rem;border:1px solid rgba(255,255,255,.5);
  border-radius:.6rem;background:transparent;color:#fff;font-family:inherit;font-size:1.35rem;
  cursor:pointer}
.ip2c-phd button:hover{background:rgba(255,255,255,.14)}
/* 다 그려지기 전에는 자리를 차지하지 않는다 — 빈 틀이 먼저 보이지 않게.
   높이는 창 안 내용에 맞춰 정해진다 */
.ip2c-pane iframe{display:block;width:100%;border:0;height:0;visibility:hidden}
.ip2c-pane iframe.is-on{visibility:visible}
.ip2c-pload{padding:6rem 0;text-align:center;color:var(--ip2-mut);font-size:1.45rem}
.ip2c-note{margin:2.4rem 0 0;font-size:1.4rem;line-height:1.7;color:var(--ip2-ink2)}
.ip2c-load{padding:6rem 0;text-align:center;color:var(--ip2-mut);font-size:1.45rem}

@media (max-width:768px){
  .ip2c-bag{margin-top:2rem}
  .ip2c-bhd{flex-wrap:wrap}
  .ip2c-bsp{flex-basis:100%;height:0}
  .ip2c-bgo,.ip2c-bx{flex:1 1 auto;justify-content:center}
  .ip2c-bchip{max-width:100%}
  .ip2c-nav-in{width:100%}
  .ip2c-nav button,.ip2c-nav .is-on{min-width:0;flex:1 1 auto}
}

/* 담은 대학 — 검색창 위에 늘어놓는다 */
.ip2c-dbag{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:0 auto 2rem;
  max-width:106rem}
.ip2c-dchip{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1.2rem .6rem .6rem;
  background:#fff;border:1px solid var(--ip2-line2);border-radius:999px;
  font-size:1.4rem;color:var(--ip2-ink)}
.ip2c-dchip i{flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;background:var(--ip2-brand-d);
  color:#fff;font-style:normal;font-size:1.2rem;display:flex;align-items:center;justify-content:center}

/* ── ③ 학과 비교 ──────────────────────────────────────────────
   한 줄이 「대학 + 학과 + 전형」 이라 산출식도 하나로 정해진다.
   그래서 줄마다 내 등급이 다르고, 판정도 그 줄의 등급으로 낸다 */
.ip2c-rhd{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:4rem 0 1.4rem;
  padding-bottom:1.2rem;border-bottom:1px solid var(--ip2-line)}
.ip2c-rhd h3{font-size:1.9rem;font-weight:normal;color:var(--ip2-ink);letter-spacing:-.02em}
.ip2c-rhd h3 em{font-style:normal;color:var(--ip2-brand-d)}
.ip2c-sp{flex:1 1 auto}
.ip2c-fl{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ip2c-fl b{font-size:1.3rem;font-weight:normal;color:var(--ip2-mut)}
/* 단추 — 고르지 않은 것도 제 색 테두리와 제 색 글자로 두어 무슨 단추인지 보이게 하고,
   고른 것은 그 색으로 꽉 채워 흰 글자로 낸다.
   못 누르는 단추만 색을 걷어 회색으로 두어, 안 고른 것과 헷갈리지 않게 한다 */
.ip2c-fchip{display:inline-flex;align-items:center;height:3.4rem;padding:0 1.4rem;
  border-radius:999px;border:1.5px solid #9AA6B2;background:#fff;font-family:inherit;
  font-size:1.35rem;color:var(--ip2-ink);cursor:pointer;transition:.12s}
.ip2c-fchip b{font-weight:normal;margin-left:.6rem;padding:0 .6rem;border-radius:999px;
  background:#EDF1F5;color:var(--ip2-ink2);font-size:1.2rem;line-height:1.8rem}
.ip2c-fchip:active:not(:disabled){transform:translateY(1px)}

/* 안 고른 상태 — 갈래마다 제 색 */
.ip2c-fchip.g{border-color:var(--ip2-brand);color:var(--ip2-brand-d)}
.ip2c-fchip.g b{background:#E2F1F7;color:var(--ip2-brand-d)}
.ip2c-fchip.g:hover:not(:disabled){background:#E2F1F7}
.ip2c-fchip.ok{border-color:#15803D;color:#136A34}
.ip2c-fchip.ok b{background:#E4F6EA;color:#136A34}
.ip2c-fchip.ok:hover:not(:disabled){background:#E4F6EA}
.ip2c-fchip.mid{border-color:#1D4ED8;color:#1A44B8}
.ip2c-fchip.mid b{background:#E6ECFC;color:#1A44B8}
.ip2c-fchip.mid:hover:not(:disabled){background:#E6ECFC}
.ip2c-fchip.risk{border-color:#B45309;color:#9A4708}
.ip2c-fchip.risk b{background:#FBF0DF;color:#9A4708}
.ip2c-fchip.risk:hover:not(:disabled){background:#FBF0DF}
.ip2c-fchip.hard{border-color:#991B1B;color:#7F1D1D}
.ip2c-fchip.hard b{background:#FEE2E2;color:#7F1D1D}
.ip2c-fchip.hard:hover:not(:disabled){background:#FEE2E2}
.ip2c-fchip.na{border-color:#5B6570;color:#4A535C}
.ip2c-fchip.na b{background:#ECEFF2;color:#4A535C}
.ip2c-fchip.na:hover:not(:disabled){background:#ECEFF2}

/* 고른 상태 — 그 색으로 채운다 */
.ip2c-fchip.is-on{color:#fff}
.ip2c-fchip.is-on b{background:rgba(255,255,255,.26);color:#fff}
.ip2c-fchip.g.is-on{background:var(--ip2-brand);border-color:var(--ip2-brand-d)}
.ip2c-fchip.g.is-on:hover{background:var(--ip2-brand2)}
.ip2c-fchip.ok.is-on{background:#15803D;border-color:#0F6330}
.ip2c-fchip.ok.is-on:hover{background:#126E35}
.ip2c-fchip.mid.is-on{background:#1D4ED8;border-color:#173FAD}
.ip2c-fchip.mid.is-on:hover{background:#1943BC}
.ip2c-fchip.risk.is-on{background:#B45309;border-color:#8F4207}
.ip2c-fchip.risk.is-on:hover{background:#9C4808}
.ip2c-fchip.hard.is-on{background:#991B1B;border-color:#7F1D1D}
.ip2c-fchip.hard.is-on:hover{background:#7F1D1D}
.ip2c-fchip.na.is-on{background:#5B6570;border-color:#454E57}
.ip2c-fchip.na.is-on:hover{background:#4E5761}

/* 못 누르는 단추 — 색을 걷는다 */
.ip2c-fchip:disabled{background:#F4F6F8;border-color:#DDE2E7;color:#98A0A8;cursor:default}
.ip2c-fchip:disabled b{background:#E9ECEF;color:#98A0A8}

/* 검색 결과 — 한 줄에 셋. 왼쪽은 대학 이름, 오른쪽은 그 학과 이야기.
   가운데 세로줄로 두 자리를 나누고 둘 다 왼쪽 정렬한다 */
/* 칸 높이는 내용과 상관없이 모두 같게 맞춘다 */
.ip2c-dlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:1.2rem}
.ip2c-ditem{position:relative;display:grid;grid-template-columns:15.5rem minmax(0,1fr);
  align-items:stretch;gap:0;padding:0;background:#fff;border:1px solid var(--ip2-line);
  box-shadow:0 .1rem .2rem rgba(16,32,48,.10),0 .4rem .8rem rgba(16,32,48,.05)}
.ip2c-dl{display:flex;align-items:center;padding:1.6rem 1.2rem 1.6rem 1.8rem;min-width:0}
.ip2c-dr{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
  padding:1.6rem 1.6rem;min-width:0;border-left:1px solid var(--ip2-line)}
.ip2c-ditem:before{content:"";position:absolute;left:0;top:0;bottom:0;width:.6rem}
.ip2c-ditem.ok:before{background:#15803D}
.ip2c-ditem.mid:before{background:#1D4ED8}
.ip2c-ditem.risk:before{background:#B45309}
.ip2c-ditem.hard:before{background:#991B1B}
.ip2c-ditem.na:before{background:#B7BDC4}
/* 대학 이름 — 길면 두 줄까지 접어 넣는다 (잘리지 않게 낱말 안에서도 꺾는다) */
.ip2c-ditem .u{font-size:1.65rem;font-weight:600;color:var(--ip2-ink);letter-spacing:-.035em;
  line-height:1.3;word-break:break-all;overflow-wrap:anywhere;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ip2c-ditem .d{max-width:100%;font-size:1.5rem;color:var(--ip2-brand2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ip2c-ditem .vd{display:block}
.ip2c-ditem .vd span{padding:.3rem 1rem;border-radius:.4rem;font-size:1.3rem;white-space:nowrap}
.ip2c-ditem .vd .ok{background:#DCFCE7;color:#15803D}
.ip2c-ditem .vd .mid{background:#DBEAFE;color:#1D4ED8}
.ip2c-ditem .vd .risk{background:#FEF3C7;color:#B45309}
.ip2c-ditem .vd .hard{background:#FEE2E2;color:#991B1B}
.ip2c-ditem .vd .na{background:#EDF1F5;color:var(--ip2-ink2)}
.ip2c-ditem .cut{max-width:100%;font-size:1.35rem;color:var(--ip2-ink2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ip2c-dnone{padding:6rem 0;text-align:center;color:var(--ip2-mut);font-size:1.45rem}

/* 차트 — 가운데 선이 70%컷 합격선이고 막대는 내 등급과의 차이다 */
.ip2c-chd{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin:4.4rem 0 1.4rem}
.ip2c-chd h3{font-size:1.9rem;font-weight:normal;color:var(--ip2-ink)}
.ip2c-chd span{font-size:1.35rem;color:var(--ip2-mut)}
.ip2c-chart{border:1px solid var(--ip2-line);background:#fff;padding:2.4rem 2rem 1.6rem;
  overflow-x:auto}
/* 왼쪽 눈금 자리를 넉넉히 둔다 — 「70%컷 합격선」 글자가 밖으로 나가지 않게 */
.ip2c-chart .plot{position:relative;height:26rem;margin-left:8.4rem;
  border-left:1px solid var(--ip2-line)}
/* 70%컷 합격선 — 촘촘한 빨간 점선. 그림 안에서만 긋는다 (왼쪽 눈금 자리로 넘어가지 않게) */
.ip2c-chart .zero{position:absolute;left:0;right:0;height:2px;border:0;
  background:repeating-linear-gradient(to right,#E11D48 0 4px,transparent 4px 8px)}
.ip2c-chart .zlab{position:absolute;left:-8.4rem;width:7.6rem;transform:translateY(-50%);
  text-align:right;font-size:1.2rem;color:#E11D48;line-height:1.3}
.ip2c-chart .gl{position:absolute;left:0;right:0;border-top:1px dashed #E3E8ED}
.ip2c-chart .gv{position:absolute;left:-8.4rem;width:7.6rem;transform:translateY(-50%);
  text-align:right;font-size:1.15rem;color:var(--ip2-mut)}
.ip2c-chart .bars{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:stretch}
.ip2c-chart .bar{flex:1 1 0;position:relative;min-width:8rem}
.ip2c-chart .bar i{position:absolute;left:50%;transform:translateX(-50%);width:3.4rem;
  border-radius:.3rem}
.ip2c-chart .bar i.up{background:var(--ip2-brand)}
.ip2c-chart .bar i.dn{background:#EA7B2C}
.ip2c-chart .bar em{position:absolute;left:50%;transform:translateX(-50%);font-style:normal;
  font-size:1.25rem;color:var(--ip2-ink2);white-space:nowrap}
.ip2c-chart .bar u{position:absolute;left:50%;top:0;bottom:0;width:1px;
  border-left:1px dashed #D6DDE4}
/* 차트 아래 딱지 — 대학 카드와 같은 규칙으로 담긴 자리와 빈 자리를 가른다.
   칸 높이는 서로 같게 맞추고, 글만 칸 위쪽에 붙여 세운다 */
.ip2c-chart .legs{display:flex;align-items:stretch;margin-left:8.4rem;margin-top:1rem}
.ip2c-chart .leg{flex:1 1 0;min-width:9rem;padding:1.4rem 1rem;margin:0 .3rem;
  border:1px solid #BFC7CF;background:#fff;text-align:center;
  box-shadow:0 .1rem .2rem rgba(16,32,48,.14),
             0 .4rem .8rem rgba(16,32,48,.08),
             0 1rem 2rem rgba(16,32,48,.04)}
/* 딱지 안 글자 — 한 단계씩 키운다 */
.ip2c-chart .leg b{display:block;font-size:1.55rem;font-weight:600;color:var(--ip2-ink);
  letter-spacing:-.03em;line-height:1.35}
.ip2c-chart .leg span{display:block;font-size:1.4rem;color:var(--ip2-brand2);margin-top:.3rem}
.ip2c-chart .leg em{display:inline-block;margin-top:.8rem;padding:.3rem .9rem;border-radius:.4rem;
  font-style:normal;font-size:1.3rem;background:#EDF1F5;color:var(--ip2-ink2)}
/* 내 등급과 70%컷은 위아래 두 줄로 적는다 */
.ip2c-chart .leg i{display:flex;flex-direction:column;gap:.2rem;margin-top:.6rem;font-style:normal;
  font-size:1.35rem;color:var(--ip2-brand-d);font-variant-numeric:tabular-nums}

@media (max-width:1200px){
  .ip2c-dlist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .ip2c-dlist{grid-template-columns:1fr}
  .ip2c-rhd{gap:.6rem}
}

/* 차트 — 대학 한 곳이 한 칸. 아홉 칸을 늘 두고 담은 차례대로 채운다 */
.ip2c-chart .bar.is-empty i,.ip2c-chart .bar.is-empty em{display:none}
.ip2c-chart .leg{display:flex;flex-direction:column;justify-content:flex-start;width:100%;
  font-family:inherit;cursor:pointer;
  transition:border-color .14s,box-shadow .14s,background .14s}
.ip2c-chart .leg:hover{border-color:var(--ip2-brand);background:#F4FBFD}
/* 펼쳐 둔 딱지 — 위 모서리 청록 막대와 두꺼운 테두리 (대학 카드와 같은 표시) */
.ip2c-chart .leg.is-open{position:relative;border:2px solid var(--ip2-brand-d);background:#fff;
  box-shadow:0 .2rem .4rem rgba(21,94,117,.26),
             0 .8rem 1.6rem rgba(21,94,117,.16),
             0 1.8rem 3.6rem rgba(21,94,117,.08)}
.ip2c-chart .leg.is-open:before{content:"";position:absolute;left:0;right:0;top:0;height:.5rem;
  background:linear-gradient(90deg,var(--ip2-brand),var(--ip2-brand-d))}
.ip2c-chart .leg.is-open b{color:var(--ip2-brand-d)}
/* 예측이 되는 대학 — 판정 색으로 테두리를 준다 */
.ip2c-chart .leg.ok{border-color:#15803D}
.ip2c-chart .leg.mid{border-color:#1D4ED8}
.ip2c-chart .leg.risk{border-color:#B45309}
.ip2c-chart .leg.hard{border-color:#991B1B}
.ip2c-chart .leg.ok i{color:#15803D}
.ip2c-chart .leg.mid i{color:#1D4ED8}
.ip2c-chart .leg.risk i{color:#B45309}
.ip2c-chart .leg.hard i{color:#991B1B}
/* 학과는 있는데 예측이 안 되는 대학 — 자리는 두고 판정만 미제공으로 적는다 */
.ip2c-chart .leg.is-na i{color:var(--ip2-ink2)}
/* 빈 자리 — 점선 테두리에 옅은 바탕, 그림자 없음 */
.ip2c-chart .leg.is-empty{border:1px dashed var(--ip2-line2);background:var(--ip2-canvas);
  box-shadow:none;cursor:default;display:flex;flex-direction:column;justify-content:center}
.ip2c-chart .leg.is-empty:hover{border-color:var(--ip2-line2);background:var(--ip2-canvas)}
.ip2c-chart .leg.is-empty b,.ip2c-chart .leg.is-empty span{color:var(--ip2-mut)}

/* 목록 줄 — 누르면 그 학과의 전형이 아래에 펼쳐진다 */
.ip2c-ditem{cursor:pointer;text-align:left;font-family:inherit;transition:.12s}
.ip2c-ditem:hover{border-color:var(--ip2-brand);background:#F4FBFD}
.ip2c-ditem.is-open{border:2px solid var(--ip2-brand-d);background:#E4F4F9}
/* 찾는 학과가 없는 대학 — 자리는 두되 눌러 볼 것이 없다 */
.ip2c-ditem.is-none{border-style:dashed;background:var(--ip2-canvas);box-shadow:none;cursor:default}
.ip2c-ditem.is-none:before{background:#B7BDC4}
.ip2c-ditem.is-none .u{color:var(--ip2-ink2)}
.ip2c-ditem.is-none .d{color:var(--ip2-mut)}
.ip2c-ditem.is-none .cut{color:var(--ip2-mut)}
.ip2c-ditem .vd .na{background:#EDF1F5;color:var(--ip2-ink2)}

/* 펼친 학과 — 한 줄에 둘씩.
   상자마다 전형 수가 달라도 옆 상자 높이에 맞춰 늘리지 않는다.
   늘리면 마지막 줄 아래가 비어 표가 끊긴 것처럼 보인다 */
.ip2c-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;
  gap:1.6rem;margin-top:3.2rem}
.ip2c-panel{border:1px solid var(--ip2-line);background:#fff;overflow:hidden}
.ip2c-phd2{display:flex;align-items:center;gap:.8rem;padding:1.2rem 1.4rem;
  background:var(--ip2-brand-d);color:#fff}
.ip2c-phd2 b{font-size:1.6rem;font-weight:normal;letter-spacing:-.02em}
.ip2c-phd2 em{font-style:normal;font-size:1.45rem;color:#BFE9F5}
.ip2c-phd2 .ip2c-psp{flex:1 1 auto}
.ip2c-phd2 .ip2c-pg{font-size:1.35rem;color:rgba(255,255,255,.9);white-space:nowrap}
.ip2c-phd2 .ip2c-pn{padding:.3rem .9rem;border-radius:999px;background:rgba(255,255,255,.18);
  font-size:1.25rem;white-space:nowrap}
.ip2c-phd2 .ip2c-px{height:3rem;padding:0 1rem;border:1px solid rgba(255,255,255,.5);
  border-radius:.5rem;background:transparent;color:#fff;font-family:inherit;font-size:1.25rem;
  cursor:pointer;white-space:nowrap}
.ip2c-phd2 .ip2c-px:hover{background:rgba(255,255,255,.14)}

/* 자리 바꾸기 — 머리 줄을 끌어 다른 표에 놓으면 두 표의 자리가 맞바뀐다.
   끌기는 머리 줄에서만 잡는다(touch-action) — 표 안에서는 화면이 그대로 넘어간다 */
.ip2c-phd2{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.ip2c-phd2:active{cursor:grabbing}
.ip2c-phd2 .ip2c-px{cursor:pointer}
/* 잡는 자리 표시 — 점 여섯 개 */
.ip2c-phd2 .ip2c-pgrip{flex:0 0 auto;width:.9rem;height:1.6rem;
  background-image:radial-gradient(#fff 1px,transparent 1.2px);
  background-size:.45rem .5rem;background-position:0 .2rem;opacity:.8}
/* 끄는 동안 — 잡은 표는 뒤로 물리고, 놓을 자리는 테두리와 ⇄ 로 알린다 */
.ip2c-panels.is-dragging{cursor:grabbing}
.ip2c-panel.is-drag{opacity:.5;position:relative;z-index:1}
.ip2c-panel.is-drag .ip2c-phd2{background:var(--ip2-brand)}
.ip2c-panel.is-drop{outline:3px solid var(--ip2-brand-d);outline-offset:-1px}
.ip2c-panel.is-drop .ip2c-phd2{background:var(--ip2-brand)}
.ip2c-pswap{display:none;font-size:1.6rem;line-height:1}
.ip2c-panel.is-drag .ip2c-pswap,.ip2c-panel.is-drop .ip2c-pswap{display:inline}
/* 자리가 바뀌는 동안 — 옛 자리에서 새 자리로 미끄러진다 */
.ip2c-panel.is-lift{position:relative;z-index:3}
/* 옮겨 온 표를 잠깐 짚어 준다 */
.ip2c-panel.is-moved{outline:3px solid transparent;outline-offset:-1px;
  animation:ip2cMoved 1.1s ease-out}
@keyframes ip2cMoved{
  0%{outline-color:var(--ip2-brand-d)}
  70%{outline-color:var(--ip2-brand-d)}
  100%{outline-color:transparent}
}

/* 칸을 세로줄로 끝까지 나눈다 — 줄 가운데만 짧게 그어지지 않게 칸 높이를 채운다 */
.ip2c-pax,.ip2c-prow2{display:grid;grid-template-columns:15rem 1fr 7rem 7rem 11rem;
  align-items:stretch;gap:0;padding:0}
.ip2c-pax > *,.ip2c-prow2 > *{min-width:0;display:flex;align-items:center;
  padding:1.4rem 1.2rem}
/* 자가 놓이는 칸은 좌우를 더 벌린다 — 1·9 눈금이 세로줄에 붙지 않게 */
.ip2c-pax > *:nth-child(2),.ip2c-prow2 > *:nth-child(2){padding-left:3.2rem;padding-right:3.2rem}
.ip2c-pax > * + *,.ip2c-prow2 > * + *{border-left:1px solid var(--ip2-line)}
.ip2c-pax > *:first-child,.ip2c-prow2 > *:first-child{padding-left:1.4rem}
.ip2c-pax > *:last-child,.ip2c-prow2 > *:last-child{padding-right:1.4rem}
.ip2c-pax{border-bottom:1px solid var(--ip2-line);background:var(--ip2-canvas);
  font-size:1.2rem;color:var(--ip2-mut)}
/* 자 눈금 — 자와 똑같은 자리에 놓는다.
   ※ 숫자는 칸이 아니라 이 안쪽 상자를 기준으로 놓아야 한다.
      칸을 기준으로 두면 칸의 안쪽 여백을 건너뛰어 세로줄에 붙는다 */
.ip2c-pax .t{align-items:center}
.ip2c-pax .tin{position:relative;flex:1 1 auto;height:1.8rem}
.ip2c-pax .tin b{position:absolute;top:50%;transform:translate(-50%,-50%);font-weight:normal;
  white-space:nowrap}
.ip2c-pax .tin b:first-child{transform:translate(-50%,-50%)}
.ip2c-pax .tin b:last-child{transform:translate(-50%,-50%)}
.ip2c-pax .v,.ip2c-pax .j{justify-content:center;text-align:center}
.ip2c-pax .c{justify-content:center;text-align:center}
.ip2c-prow2{border-bottom:1px solid var(--ip2-line)}
.ip2c-prow2:last-child{border-bottom:0}
.ip2c-prow2:hover{background:#FAFCFD}
.ip2c-prow2 .k{gap:.6rem;font-size:1.35rem;color:var(--ip2-ink);white-space:nowrap;overflow:hidden}
.ip2c-prow2 .k > span{overflow:hidden;text-overflow:ellipsis}
.ip2c-prow2 .k i{flex:0 0 auto;width:.8rem;height:.8rem;border-radius:50%}
.ip2c-prow2 .k i.ok{background:#15803D}
.ip2c-prow2 .k i.mid{background:#1D4ED8}
.ip2c-prow2 .k i.risk{background:#B45309}
.ip2c-prow2 .k i.hard{background:#991B1B}
.ip2c-prow2 .k i.na{background:#B7BDC4}
.ip2c-prow2 .v{justify-content:center;text-align:center;font-size:1.35rem;color:var(--ip2-ink);
  font-variant-numeric:tabular-nums}
.ip2c-prow2 .j{justify-content:center;text-align:center}
.ip2c-prow2 .j em{display:inline-block;padding:.2rem .7rem;border-radius:.4rem;font-style:normal;
  font-size:1.2rem}
.ip2c-prow2 .j em.ok{background:#DCFCE7;color:#15803D}
.ip2c-prow2 .j em.mid{background:#DBEAFE;color:#1D4ED8}
.ip2c-prow2 .j em.risk{background:#FEF3C7;color:#B45309}
.ip2c-prow2 .j em.hard{background:#FEE2E2;color:#991B1B}
.ip2c-prow2 .j em.na{background:#EDF1F5;color:var(--ip2-ink2)}
/* 합격선 — 50%·70% 를 위아래로 나눠 글자로만 적고 칸 가운데에 둔다 */
.ip2c-prow2 .c{flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  font-size:1.25rem;color:var(--ip2-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.ip2c-prow2 .c .bpv{color:#1D4ED8}
.ip2c-na2{font-style:normal;color:var(--ip2-mut)}

/* 자 위의 선이 무엇인지 알려 주는 범례 */
.ip2c-plgd{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;
  padding:.9rem 1.4rem;border-bottom:1px solid var(--ip2-line);background:#fff;
  font-size:1.2rem;color:var(--ip2-ink2)}
.ip2c-plgd span{display:inline-flex;align-items:center;gap:.5rem}
.ip2c-plgd i{display:inline-block;width:2px;height:1.4rem;border-radius:1px}
.ip2c-plgd i.c50{background:#505050}
.ip2c-plgd i.c70{width:3px;background:repeating-linear-gradient(#505050 0 3px,transparent 3px 6px)}
.ip2c-plgd i.bp{width:1rem;height:1rem;border-radius:2px;background:#1D4ED8}
.ip2c-plgd i.me{background:#E11D48}

/* 1~9 등급 자 — 작년 50%컷은 회색 선, 70%컷은 같은 색 점선, 참고용 배치점은 파란 네모, 내 등급은 빨간 선 (2026-09-22) */
.ip2c-prow2 .tc{display:flex;align-items:center}
.ip2c-tr{position:relative;display:block;flex:1 1 auto;height:2.2rem;border-radius:.3rem;
  background:#EEF2F6}
/* 전년도 입시결과가 없는 줄 — 자를 옅게 두고 표시를 그리지 않는다 */
.ip2c-tr.is-na{background:#F3F5F8}
.ip2c-tr.is-na i{background:#E7EBEF}
.ip2c-tr i{position:absolute;top:0;bottom:0;width:1px;background:#D6DDE4}
.ip2c-tr s{position:absolute;top:.4rem;height:1.4rem;border-radius:.2rem;background:var(--ip2-brand-b)}
.ip2c-tr b{position:absolute;top:-.3rem;height:2.8rem;width:2px;border-radius:1px}
.ip2c-tr b.c50{background:#505050}
.ip2c-tr b.c70{width:3px;background:repeating-linear-gradient(#505050 0 3px,transparent 3px 6px)}
.ip2c-tr b.bp{top:50%;width:1rem;height:1rem;transform:translate(-50%,-50%);border-radius:2px;background:#1D4ED8;z-index:2}
.ip2c-tr u{position:absolute;top:-.4rem;height:3rem;width:2px;background:#E11D48;border-radius:1px}

@media (max-width:1200px){
  .ip2c-panels{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:768px){
  .ip2c-pax{display:none}
  .ip2c-prow2{grid-template-columns:1fr auto;gap:.4rem .8rem}
  .ip2c-prow2 .ip2c-tr{grid-column:1 / -1}
}

/* ── 견줘 볼 학과 담기 ────────────────────────────────────────
   검색 결과에서 눌러 담은 것만 아래 차트에 오른다 */
.ip2c-ditem.is-in{border:2px solid var(--ip2-brand-d);background:#E4F4F9}
.ip2c-ditem .vd{display:flex;align-items:center}

.ip2c-pbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:4rem 0 1rem;
  padding-bottom:1rem;border-bottom:1px solid var(--ip2-line)}
.ip2c-pbar b{font-size:1.8rem;font-weight:normal;color:var(--ip2-ink);letter-spacing:-.02em}
.ip2c-pn2{font-size:1.5rem;color:var(--ip2-brand-d)}
.ip2c-plist{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
.ip2c-pchip{display:inline-flex;align-items:center;gap:.7rem;padding:.6rem 1rem .6rem .6rem;
  background:#fff;border:1px solid var(--ip2-line2);border-radius:.6rem;
  font-size:1.4rem;color:var(--ip2-ink);max-width:34rem}
.ip2c-pchip i{flex:0 0 auto;width:2rem;height:2rem;border-radius:.4rem;background:var(--ip2-brand-d);
  color:#fff;font-style:normal;font-size:1.2rem;display:flex;align-items:center;justify-content:center}
.ip2c-pchip em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip2c-pchip button{flex:0 0 auto;border:0;background:transparent;color:var(--ip2-mut);
  font-size:1.3rem;cursor:pointer;font-family:inherit;padding:0}
.ip2c-pchip button:hover{color:#C0392B}
.ip2c-phint{margin:0 0 1rem;padding:3.2rem 0;text-align:center;font-size:1.45rem;
  color:var(--ip2-mut);border:1px dashed var(--ip2-line2);background:var(--ip2-canvas)}

/* 차트 아래 안내 — 아직 아무 학과도 펼치지 않았을 때만 둔다 */
.ip2c-hint2{display:flex;align-items:center;justify-content:center;gap:.9rem;
  margin:2.4rem auto 0;padding:1.4rem 2.2rem;max-width:76rem;
  border:1px dashed var(--ip2-brand-b);border-radius:999px;background:#F4FBFD;
  font-size:1.5rem;color:var(--ip2-brand-d);letter-spacing:-.02em;text-align:center}
.ip2c-hint2 svg{flex:0 0 auto;width:2rem;height:2rem;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
@media (max-width:768px){
  .ip2c-hint2{padding:1.2rem 1.4rem;font-size:1.35rem;border-radius:.8rem}
}

/* ═══ 휴대폰 — 대학 카드 줄 · 담은 학과 · 차트 ══════════════════════════
   ① 카드 줄은 데스크톱에서 화면 폭까지 넓혀 아홉 칸을 한 줄에 늘어놓는다.
      휴대폰에서는 그 폭 셈(100vw − 12rem)이 오히려 통을 좁혀,
      좁은 통 안에서 아홉 칸을 옆으로 밀어 보게 만들었다.
      좌우 여백만 남기고 폭을 다 쓰고, 두 칸씩 줄을 바꿔 담는다.
      아직 담지 않은 빈 자리는 감춘다 — 담은 곳은 위 딱지 줄에서 세어 볼 수 있고,
      빈 카드 일곱 장을 세로로 쌓아 두면 정작 담은 대학이 화면에서 밀려난다.
   ② 차트는 왼쪽 눈금 자리(8.4rem)와 칸 최소 폭(8~9rem)이 커서
      옆으로 미는 길이가 900px 을 넘었다. 눈금 자리·칸·높이를 한 단계 줄인다.
      (빈 칸은 감추지 않는다 — 막대와 아래 딱지가 자리로 짝이 맞아야 한다) */
@media (max-width:768px){
  .ip2c-nav{margin-bottom:2.2rem}
  .ip2c-nav button,.ip2c-nav .is-on{height:3.6rem;font-size:1.4rem;padding:0 1rem}

  .ip2c-rings{width:calc(100vw - 2.4rem);gap:.8rem;padding:.6rem .2rem 1.2rem;
    grid-template-columns:repeat(2,minmax(0,1fr));overflow-x:visible}
  .ip2c-ring.is-empty{display:none}
  .ip2c-ring{padding:1.2rem .7rem 1.1rem}
  .ip2c-rn{font-size:1.5rem;height:4rem}
  .ip2c-hf{max-width:10.6rem;margin-top:.8rem}
  .ip2c-v{margin-top:-2.8rem}
  .ip2c-v b{font-size:2.6rem}
  .ip2c-jd{margin-top:.9rem}

  /* 차트 */
  .ip2c-chart{padding:1.8rem 1.2rem 1.2rem}
  .ip2c-chart .plot{height:20rem;margin-left:5.4rem}
  .ip2c-chart .zlab,.ip2c-chart .gv{left:-5.4rem;width:4.8rem;font-size:1.1rem}
  .ip2c-chart .bar{min-width:6rem}
  .ip2c-chart .bar i{width:2.4rem}
  .ip2c-chart .bar em{font-size:1.15rem}
  .ip2c-chart .legs{margin-left:5.4rem}
  .ip2c-chart .leg{min-width:6rem;padding:1rem .5rem;margin:0 .2rem}
  .ip2c-chart .leg b{font-size:1.35rem}
  .ip2c-chart .leg span{font-size:1.25rem}
  .ip2c-chart .leg em{margin-top:.6rem;padding:.2rem .6rem;font-size:1.2rem}
  .ip2c-chart .leg i{font-size:1.2rem}
}

/* 작은 폰 — 담은 학과 카드는 이름 칸(15.5rem)과 학과 칸을 나란히 두면 둘 다 좁다.
   위아래로 편다 */
@media (max-width:480px){
  .ip2c-ditem{grid-template-columns:minmax(0,1fr)}
  .ip2c-dl{padding:1.2rem 1.2rem .4rem 1.6rem}
  .ip2c-dr{padding:.4rem 1.4rem 1.2rem 1.6rem;border-left:0}
}