/* 전문대 전용 디자인 — 4년제(ipsi2.css)를 복사해 이름을 ip2j- 로 바꾸고 강조색을 진초록으로 덮은 것이다. 4년제 파일은 고치지 않는다. 판정 색(합격확실 초록 · 합격가능 파랑 · 소신도전 주황)은 뜻이 붙은 색이라 그대로 둔다. */ /* ───────────────────────────────────────────────────────────── 신규 합격예측(ipsi_2) 전용 스타일 · 공용(resources/css)에 의존하지 않는다. 화면 안쪽은 이 파일만 쓴다. · 공용 CSS 가 머리말과 함께 같이 실려 오므로 이름이 겹치면 서로 밀어낸다. 이 서비스의 모든 클래스에는 ip2j- 접두사를 붙인다. 예외 없음. · html·body 등 문서 전체 규칙은 절대 손대지 않는다 (사이트 전체에 영향). 글자 크기는 사이트 기준을 그대로 따른다 — html 10px, 본문 1.6rem. ───────────────────────────────────────────────────────────── */ .ip2j-wrap{ --ip2-brand:#065F46; --ip2-brand2:#047857; --ip2-brand-d:#064E3B; --ip2-brand-b:#A7C9BC; --ip2-ink:#111111; /* 본문 기본 — 진하게 */ --ip2-ink2:#333333; /* 보조 글자 */ --ip2-mut:#5A5A5A; /* 가장 옅게 쓸 때도 이 이상 옅게 쓰지 않는다 */ --ip2-line:#C9CFD6; /* 카드·표 선 — 눈에 보이게 */ --ip2-line2:#A9B2BB; /* 단추·입력칸 테두리 */ --ip2-canvas:#F8F9FB; --ip2-gong:#0E7490; --ip2-gong-b:#E0F2F7; --ip2-sa:#4E606E; /* 사립 — 청록 옆에서 튀지 않게 회청색으로 */ --ip2-sa-b:#E5EAEE; color:var(--ip2-ink); letter-spacing:-.01em; word-break:keep-all; } .ip2j-wrap{padding-top:4rem;box-sizing:border-box} .ip2j-wrap *{box-sizing:border-box} .ip2j-wrap button, .ip2j-wrap input{font-family:inherit} /* 페이지 머리 설명 ※ 사이트 글꼴(PretendardGOV)은 300 을 SemiBold 파일에 물려 두었다. 즉 300 을 주면 오히려 두꺼워진다. 가장 얇은 것은 normal(Medium) 이다. 숫자 대신 normal 을 쓰고, 색을 옅게 해서 가볍게 보이도록 한다. */ /* ─── 학년도 토글 ───────────────────────────────────────────── 검색창·조건 단추와 같은 둥근 모양으로 맞춰 한 덩어리로 보이게 한다. 옅은 통 안에서 고른 쪽만 청록으로 채운다. */ .ip2j-ytab{display:flex;justify-content:center} .ip2j-ytab .ip2j-ytab-in{display:inline-flex;gap:.4rem;padding:.4rem; background:var(--ip2-canvas);border:1px solid var(--ip2-line);border-radius:999px} .ip2j-ytab button{border:0;background:transparent;color:var(--ip2-ink2);cursor:pointer; font-size:1.5rem;font-weight:normal;letter-spacing:-.02em; padding:.9rem 2.4rem;border-radius:999px;white-space:nowrap;transition:.12s} .ip2j-ytab button:hover{color:var(--ip2-brand-d)} .ip2j-ytab button.is-on{background:var(--ip2-brand);color:#fff} /* ─── 첫 화면 ─────────────────────────────────────────────── 페이지 머리를 따로 두지 않는다. 제목이 검색창 위 가운데에 있다 */ .ip2j-hero{text-align:center;padding:3rem 0 6.8rem} /* 자료가 뜨기 전에는 아래가 비어 꼬리말과 붙어 보인다. 여백만으로는 화면 높이에 따라 모자랄 수 있으므로 최소 높이까지 함께 준다 */ /* 위 여백은 늘 같게 둔다 — 학년도 토글과 안내 글 사이가 벌어졌다 좁아지지 않도록. 자료가 뜨기 전 빈 느낌은 아래 여백과 최소 높이로만 채운다 */ .ip2j-wrap.is-idle .ip2j-hero{padding-bottom:8rem} /* 꼬리말이 첫 화면에 보이지 않게 — 결과가 적어도 본문이 화면 높이를 채운다. 감추는 것이 아니라 밀어내는 것이라, 조금만 내리면 바로 꼬리말이 나온다. 빼는 값 = 사이트 머리말(8.4rem) + 본문 위아래 여백(3rem + 12rem) */ .ip2j-wrap{min-height:calc(100vh - 23.4rem)} .ip2j-wrap.is-idle{padding-bottom:4rem} .ip2j-hero h2{margin:0 0 2.4rem;font-size:2.2rem;font-weight:normal;color:var(--ip2-ink); letter-spacing:-.04rem;line-height:1.45} .ip2j-hero h2 em{font-style:normal} .ip2j-acc-univ{color:#006fff} .ip2j-acc-voc{color:#065F46} .ip2j-srchrow{display:flex;justify-content:center} .ip2j-srch{flex:0 1 62rem;display:flex;align-items:center;gap:1.1rem;height:5.2rem; padding:0 2.2rem;border-radius:999px;border:1px solid var(--ip2-brand);background:#fff; box-shadow:0 .2rem .5rem rgba(6,78,59,.10),0 .8rem 2.2rem rgba(6,78,59,.16)} .ip2j-srch:hover{border-color:var(--ip2-brand2); box-shadow:0 .3rem .7rem rgba(6,78,59,.13),0 1.2rem 2.8rem rgba(6,78,59,.20)} .ip2j-srch:focus-within{border-color:var(--ip2-brand-d); box-shadow:0 .3rem .8rem rgba(6,78,59,.16),0 1.4rem 3.2rem rgba(6,78,59,.24)} .ip2j-srch input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent; font-size:1.6rem;color:var(--ip2-ink);letter-spacing:-.02em;height:auto;padding:0} /* 돋보기 — 눌러도 찾는다 (엔터와 같은 동작) */ .ip2j-srch .ip2j-qgo{flex:0 0 auto;width:3rem;height:3rem;padding:0;border:0;border-radius:50%; background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center; transition:.12s} .ip2j-srch .ip2j-qgo svg{width:2rem;height:2rem;fill:none;stroke:var(--ip2-brand);stroke-width:2; stroke-linecap:round} .ip2j-srch .ip2j-qgo:hover{background:#E6F4F9} .ip2j-srch .ip2j-qgo:hover svg{stroke:var(--ip2-brand-d)} /* ─── 조건 단추 ───────────────────────────────────────────── */ .ip2j-chips{max-width:106rem;margin:4rem auto 0;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center} .ip2j-chips button{position:relative;border:1px solid var(--ip2-line2);background:#EDF1F5;color:var(--ip2-ink); font-size:1.5rem;font-weight:normal;padding:.9rem 1.8rem;border-radius:999px;cursor:pointer; display:inline-flex;align-items:center;gap:.5rem;letter-spacing:-.02em; transition:background .12s,color .12s,border-color .12s,transform .12s} .ip2j-chips button:hover{background:#DCEAF1;border-color:var(--ip2-brand-b);color:var(--ip2-brand-d)} .ip2j-chips button:active{transform:scale(.97)} /* 고른 것 — 옅은 청록 바탕에 두꺼운 청록 테두리 */ .ip2j-chips button.is-on{background:#DCEBE4;border-color:var(--ip2-brand);border-width:2px; color:var(--ip2-brand-d);padding:calc(.9rem - 1px) calc(1.8rem - 1px)} .ip2j-chips button.is-on:hover{background:#CDE7DA;border-color:var(--ip2-brand-d);color:var(--ip2-brand-d)} /* 고를 수 없는 것 — 흐리게 두지 않고 색으로 구분한다 */ .ip2j-chips button.is-zero{background:#fff;border-color:var(--ip2-line);color:#A9AEB6;cursor:default} .ip2j-chips button.is-zero:hover{background:#fff;border-color:var(--ip2-line);color:#A9AEB6} /* 지역 줄은 앞의 구분과 갈래가 다르므로 가로줄로 나눈다 */ .ip2j-chips.ip2j-line{position:relative;max-width:90rem;margin-top:1.4rem;padding-top:1.5rem} .ip2j-chips.ip2j-line::before{content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,rgba(203,210,218,0),rgba(203,210,218,.9) 22%, rgba(203,210,218,.9) 78%,rgba(203,210,218,0))} /* 초기화 — 검색창 안 오른쪽 끝. 왼쪽에 옅은 세로선으로 입력칸과 나눈다 */ .ip2j-srch .ip2j-qreset{flex:0 0 auto;display:inline-flex;align-items:center;gap:.6rem; height:3.2rem;margin-left:1rem;padding:0 .4rem;border:0;background:transparent;color:var(--ip2-ink2);font-family:inherit;font-size:1.45rem; font-weight:normal;letter-spacing:-.02em;cursor:pointer;transition:.12s} .ip2j-srch .ip2j-qreset svg{width:1.7rem;height:1.7rem;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;transition:transform .25s} .ip2j-srch .ip2j-qreset:hover{color:var(--ip2-brand-d)} .ip2j-srch .ip2j-qreset:hover svg{transform:rotate(-180deg)} /* 쪽 나누기 — 테두리 없이 가볍게, 지금 쪽만 채워서 보여 준다 */ /* 쪽 단추 — 숫자는 테두리 없이, 지금 쪽만 청록 글자에 밑줄. 앞뒤는 네모 단추 */ .ip2j-pager{margin-top:3.2rem;display:flex;justify-content:center;align-items:center;gap:.2rem} .ip2j-pager .ip2j-pnum{min-width:3.4rem;height:3.6rem;padding:0 .8rem;border:0;background:transparent; color:var(--ip2-ink2);font-family:inherit;font-size:1.5rem;letter-spacing:-.02em;cursor:pointer; border-bottom:2px solid transparent;transition:.12s} .ip2j-pager .ip2j-pnum:hover{color:var(--ip2-brand-d)} .ip2j-pager .ip2j-pnum.is-on{color:var(--ip2-brand);border-bottom-color:var(--ip2-brand)} .ip2j-pager .ip2j-parr{width:3.6rem;height:3.6rem;padding:0;margin:0 .6rem; border:1px solid var(--ip2-line2);border-radius:.6rem;background:#fff;color:var(--ip2-ink2); display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.12s} .ip2j-pager .ip2j-parr:hover:not(:disabled){border-color:var(--ip2-brand);color:var(--ip2-brand)} .ip2j-pager .ip2j-parr svg{width:1.8rem;height:1.8rem;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .ip2j-pager .ip2j-parr:disabled{color:#C2C9D0;border-color:var(--ip2-line);cursor:default} .ip2j-pgap{min-width:2rem;height:3.6rem;display:flex;align-items:flex-end;justify-content:center; padding-bottom:.6rem;color:#909090;font-size:1.5rem;user-select:none} /* ─── 결과 갈래 전환 ─────────────────────────────────────── 왼쪽은 무엇을 찾은 결과인지, 오른쪽은 글처럼 읽히는 전환 단추 */ .ip2j-rbar{display:flex;align-items:baseline;justify-content:space-between;gap:1.6rem; flex-wrap:wrap;margin-bottom:2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--ip2-line)} .ip2j-rtitle{font-size:1.9rem;color:var(--ip2-ink);letter-spacing:-.02em} .ip2j-rsw{display:inline-flex;align-items:baseline;gap:1rem} .ip2j-rsep{color:var(--ip2-line2)} .ip2j-rtab{border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:1.75rem; color:var(--ip2-mut);letter-spacing:-.02em;padding:.2rem .2rem .6rem; border-bottom:3px solid transparent;transition:.12s} .ip2j-rtab em{font-style:normal;color:inherit} /* 두 갈래를 색 점으로 갈라 둔다 — 대학은 청록, 학과는 주황 */ .ip2j-rtab::before{content:'';display:inline-block;width:.9rem;height:.9rem; margin-right:.7rem;border-radius:50%;vertical-align:.08em} .ip2j-rtab[data-tab="univ"]::before{background:#155E75} .ip2j-rtab[data-tab="dept"]::before{background:#C2410C} .ip2j-rtab:disabled::before{background:#B7BDC4} .ip2j-rtab:hover:not(:disabled){color:var(--ip2-ink)} .ip2j-rtab.is-on{color:var(--ip2-ink);border-bottom-color:var(--ip2-brand)} .ip2j-rtab.is-on em{color:var(--ip2-brand-d)} .ip2j-rtab:disabled{color:#B7BDC4;cursor:default} @media (max-width:768px){ .ip2j-rbar{gap:.8rem} .ip2j-rtitle{font-size:1.6rem} .ip2j-rtab{font-size:1.5rem} } /* ─── 대학 목록 (2026-10-30 카드 → 한 줄 목록형, 사용자 지시) ───────── 한 줄 = [설립][지역][대학 이름][› 또는 표시] 칸. 칸 폭을 같게 두어 위아래로 줄이 맞는다. 3열(1000px 이하 2열 · 560px 이하 1열), 열마다 맨 위 칸 제목 줄(ip2j-uhd, 칸 제목은 가운데) */ .ip2j-ugrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:4rem;row-gap:0;margin-top:.8rem} .ip2j-uhd, .ip2j-ucard{display:grid;grid-template-columns:7.2rem 5.6rem minmax(0,1fr) auto;align-items:center; column-gap:1.2rem;min-height:5.6rem;padding:0 .8rem;border-bottom:1px solid var(--ip2-line)} .ip2j-uhd{min-height:4.4rem;border-top:2px solid var(--ip2-ink);background:var(--ip2-canvas); font-size:1.4rem;color:var(--ip2-ink);text-align:center;white-space:nowrap} .ip2j-ucard{position:relative;width:100%;margin:0;background:#fff;border-top:0;border-left:0;border-right:0; border-radius:0;cursor:pointer;font:inherit;color:inherit;text-align:center;transition:background .14s} .ip2j-ucard:hover{background:#E7F3EE} .ip2j-ucard:focus-visible{outline:2px solid var(--ip2-brand);outline-offset:-2px} /* 지역 */ .ip2j-ucard .ip2j-ul{font-size:1.4rem;color:var(--ip2-ink2);white-space:nowrap} /* 대학 이름 — 왼쪽 정렬, 길면 줄임(전체 이름은 title). ※ 이 사이트 글꼴은 굵기 값이 뒤집혀 물려 있다 (normal=Medium, 300=SemiBold, 600/700=Bold). Bold 는 너무 두꺼워 그 사이인 SemiBold 를 쓰려고 300 을 준다. 오타가 아니다. */ .ip2j-ucard .ip2j-un{min-width:0;text-align:left;font-size:1.6rem;font-weight:300;color:var(--ip2-ink); letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ip2j-ucard:hover .ip2j-un{color:var(--ip2-brand-d)} /* 오른쪽 화살표 — 눌러서 들어가는 줄임을 알린다 */ .ip2j-ucard .ip2j-uarr{justify-self:end;font-size:2rem;line-height:1;color:var(--ip2-ink2);transition:color .14s} .ip2j-ucard:hover .ip2j-uarr{color:var(--ip2-brand)} /* 설립 — 같은 폭 표시로 칸 가운데 */ .ip2j-est{padding:.2rem .7rem;border-radius:.3rem;font-size:1.2rem;font-weight:normal;letter-spacing:-.02em} .ip2j-ucard .ip2j-est{justify-self:center;width:5.6rem;padding:.3rem 0;font-size:1.3rem;text-align:center} .ip2j-est.ip2j-g{background:var(--ip2-gong-b);color:var(--ip2-gong)} .ip2j-est.ip2j-s{background:var(--ip2-sa-b);color:var(--ip2-sa)} /* 자료가 아직 없는 대학 — 줄은 두되 누르지 못한다. 빛깔을 걷고 화살표 대신 「준비 중」 */ .ip2j-ucard.is-wait{cursor:default;background:#F7F8F9} .ip2j-ucard.is-wait:hover{background:#F7F8F9} .ip2j-ucard.is-wait .ip2j-un,.ip2j-ucard.is-wait .ip2j-ul{color:#8A929A} .ip2j-ucard .ip2j-wait{justify-self:end;padding:.3rem .9rem;border:1px solid #C6CDD4;border-radius:999px;background:#fff; font-size:1.2rem;color:#6B747C;white-space:nowrap} /* 열이 줄면 남는 칸 제목을 감춘다 */ @media (max-width:1000px){ .ip2j-ugrid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3.2rem} .ip2j-ugrid .ip2j-uhd:nth-child(3){display:none} } @media (max-width:560px){ .ip2j-ugrid{grid-template-columns:minmax(0,1fr)} .ip2j-ugrid .ip2j-uhd:nth-child(2){display:none} .ip2j-uhd,.ip2j-ucard{grid-template-columns:6.4rem 4.8rem minmax(0,1fr) auto;column-gap:1rem;padding:0 .4rem} .ip2j-ucard .ip2j-est{width:5.2rem;font-size:1.2rem} .ip2j-ucard .ip2j-ul{font-size:1.3rem} } /* ─── 학과 표 ─────────────────────────────────────────────── */ .ip2j-sect{margin-top:2.8rem} .ip2j-tblwrap{overflow-x:auto;box-shadow:0 .2rem .5rem rgba(16,32,48,.12)} .ip2j-tbl{width:100%;border-collapse:collapse;font-size:1.55rem} /* 머리글 — 글자 크기를 칸 내용과 같게 맞추고 가운데로, 색은 또렷하게 */ .ip2j-tbl th{padding:1.3rem;background:var(--ip2-brand-d);border-bottom:0; font-size:1.55rem;color:#fff;font-weight:normal;text-align:center;white-space:nowrap} .ip2j-tbl td{padding:1.4rem 1.3rem;border-bottom:1px solid var(--ip2-line);text-align:center} /* 세로줄 — 칸을 나눈다 */ .ip2j-tbl th + th, .ip2j-tbl td + td{border-left:1px solid var(--ip2-line)} .ip2j-tbl th + th{border-left-color:rgba(255,255,255,.28)} .ip2j-tbl tr:hover td{background:#FAFCFD} /* 표 위 고르개 — 선발 방법·전형을 좁혀 본다 */ .ip2j-fbar{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.2rem} .ip2j-fwrap{position:relative} .ip2j-fbtn{display:inline-flex;align-items:center;gap:.7rem;height:4rem;padding:0 1.4rem; border:1px solid var(--ip2-line2);border-radius:.6rem;background:#fff;color:var(--ip2-ink2); font-family:inherit;font-size:1.45rem;letter-spacing:-.02em;cursor:pointer;transition:.12s} .ip2j-fbtn:hover{border-color:var(--ip2-brand);color:var(--ip2-brand-d)} .ip2j-fbtn svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;transition:transform .15s} .ip2j-fwrap.is-open .ip2j-fbtn{border-color:var(--ip2-brand);color:var(--ip2-brand-d)} .ip2j-fwrap.is-open .ip2j-fbtn svg{transform:rotate(180deg)} .ip2j-fwrap.has-pick .ip2j-fbtn{border-color:var(--ip2-brand);background:#E7F3EE;color:var(--ip2-brand-d)} .ip2j-fval{max-width:22rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; padding-left:.7rem;border-left:1px solid var(--ip2-line2);color:var(--ip2-brand-d)} /* 고르개 줄의 필터 초기화 */ .ip2j-freset{display:inline-flex;align-items:center;gap:.6rem;height:4rem;padding:0 1.4rem; border:0;background:transparent;color:var(--ip2-ink2);font-family:inherit;font-size:1.45rem; letter-spacing:-.02em;cursor:pointer;transition:.12s} .ip2j-freset svg{width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;transition:transform .25s} .ip2j-freset:hover:not(:disabled){color:var(--ip2-brand-d)} .ip2j-freset:hover:not(:disabled) svg{transform:rotate(-180deg)} .ip2j-freset:disabled{color:#A9AEB6;cursor:default} /* 눌렀을 때 펼쳐지는 고르개 */ .ip2j-fpop{position:absolute;top:100%;left:0;z-index:30;min-width:28rem;max-width:38rem; margin-top:.4rem;padding:1rem;background:#fff;border:2px solid var(--ip2-brand-d); border-radius:.6rem;text-align:left;cursor:default;box-shadow:0 .4rem 1rem rgba(16,32,48,.20)} .ip2j-fq{width:100%;height:3.4rem;margin-bottom:.8rem;padding:0 1rem;border:1px solid var(--ip2-line2); border-radius:.4rem;background:#fff;color:var(--ip2-ink);font-family:inherit;font-size:1.4rem} .ip2j-fq:focus{outline:0;border-color:var(--ip2-brand)} .ip2j-flist{max-height:30rem;overflow-y:auto} .ip2j-fopt{display:flex;align-items:center;gap:.8rem;padding:.7rem .8rem;border-radius:.4rem; font-size:1.45rem;color:var(--ip2-ink);white-space:normal;cursor:pointer} .ip2j-fopt:hover{background:#E4EEF3} .ip2j-fopt.is-on{background:#DCEBE4;color:var(--ip2-brand-d)} /* 상대 조건 때문에 고를 수 없는 값 — 숨기지 않고 흐리게 둔다 */ .ip2j-fopt.is-off{color:#A9AEB6;cursor:default} .ip2j-fopt.is-off:hover{background:transparent} .ip2j-fopt.is-off input{cursor:default} .ip2j-fopt input{width:1.6rem;height:1.6rem;flex:0 0 auto;accent-color:var(--ip2-brand);cursor:pointer} .ip2j-fnone{margin:0;padding:1.4rem .8rem;font-size:1.4rem;color:var(--ip2-mut)} /* 고르개 아래 — 모두 풀기 · 닫기 */ .ip2j-ffoot{display:flex;gap:.6rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--ip2-line)} .ip2j-fclear,.ip2j-fapply{flex:1 1 0;height:3.6rem;border-radius:.4rem;font-family:inherit; font-size:1.4rem;cursor:pointer;transition:.12s} .ip2j-fclear{border:1px solid #C0392B;background:#fff;color:#C0392B} .ip2j-fclear:hover{background:#C0392B;color:#fff} .ip2j-fapply{border:1px solid var(--ip2-brand-d);background:var(--ip2-brand-d);color:#fff} .ip2j-fapply:hover{background:var(--ip2-brand);border-color:var(--ip2-brand)} /* 세로줄 — 칸을 나눈다 */ .ip2j-tbl th + th, .ip2j-tbl td + td{border-left:1px solid var(--ip2-line)} .ip2j-tbl th + th{border-left-color:rgba(255,255,255,.28)} .ip2j-tbl tr:hover td{background:#FAFCFD} .ip2j-tbl .ip2j-r{text-align:right} .ip2j-tbl .ip2j-c{text-align:center;white-space:nowrap} .ip2j-tu{font-weight:normal;color:var(--ip2-ink)} .ip2j-td{color:var(--ip2-brand2);font-weight:normal} /* 학제(2년 · 3년) — 전문대에만 있는 값이라 학과 이름 옆에 작게 붙인다 */ .ip2j-ty{font-style:normal;margin-left:.5rem;padding:.1rem .5rem;border-radius:.4rem; background:var(--ip2-brand-b);color:var(--ip2-brand-d);font-size:1.35rem} /* 합격예측 — 표 안의 단추 */ .ip2j-go{display:inline-flex;align-items:center;justify-content:center;height:3.2rem;padding:0 1.6rem; border:1px solid var(--ip2-brand);border-radius:.4rem;background:#fff;color:var(--ip2-brand-d); font-family:inherit;font-size:1.4rem;font-weight:normal;letter-spacing:-.02em;white-space:nowrap; cursor:pointer;transition:.12s} .ip2j-go:hover{background:var(--ip2-brand);color:#fff} .ip2j-tbl b{font-weight:normal} .ip2j-empty{padding:6rem 0;text-align:center;color:var(--ip2-mut);font-size:1.45rem} /* ─── PC — 지역 17개를 한 줄에 담는다 ─────────────────────── */ @media (min-width:769px){ .ip2j-chips.ip2j-line{max-width:none;flex-wrap:nowrap;gap:.6rem} .ip2j-chips.ip2j-line button{padding:.9rem 1.6rem;font-size:1.5rem;white-space:nowrap;flex:0 0 auto} } @media (max-width:768px){ .ip2j-hero{padding-top:2.4rem} .ip2j-wrap{min-height:calc(100vh - 17.4rem)} .ip2j-wrap.is-idle{padding-bottom:3rem} .ip2j-hero h2{font-size:1.7rem} .ip2j-ytab button{padding:.8rem 1.6rem;font-size:1.35rem} .ip2j-srch{height:4.8rem;padding:0 .8rem 0 1.8rem} .ip2j-srch .ip2j-qgo{width:2.6rem;height:2.6rem} .ip2j-srch .ip2j-qgo svg{width:1.8rem;height:1.8rem} .ip2j-srchrow{gap:.6rem} .ip2j-srch .ip2j-qreset{font-size:1.3rem;margin-left:.6rem;gap:.4rem} } /* ═══ 대학 화면 ═══════════════════════════════════════════════ 대학 카드를 누르면 나오는 화면. 요약 · 전형 · 학과 · 수능최저 · 합격예측 (학년도 탭은 검색 화면에만 둔다) */ .ip2j-uhead{padding-top:1rem} .ip2j-uback{display:inline-flex;align-items:center;gap:.6rem;border:0;background:transparent; color:var(--ip2-ink2);font-family:inherit;font-size:1.45rem;cursor:pointer;padding:.6rem 0} .ip2j-uback:hover{color:var(--ip2-brand-d)} .ip2j-utop{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap;margin-top:.8rem} .ip2j-utop h2{margin:0;font-size:3rem;font-weight:normal;color:var(--ip2-ink);letter-spacing:-.05rem} .ip2j-utag{display:inline-flex;align-items:center;gap:.6rem;font-size:1.4rem;color:var(--ip2-ink)} /* 메뉴줄 */ .ip2j-umenu{display:flex;gap:3rem;margin-top:2.4rem;border-bottom:1px solid var(--ip2-line); overflow-x:auto} .ip2j-umenu button{border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:1.7rem; color:var(--ip2-mut);letter-spacing:-.02em;padding:0 .2rem 1.2rem;white-space:nowrap; border-bottom:3px solid transparent;margin-bottom:-1px;transition:.12s} .ip2j-umenu button:hover{color:var(--ip2-ink)} .ip2j-umenu button.is-on{color:var(--ip2-brand-d);border-bottom-color:var(--ip2-brand)} .ip2j-upane{padding-top:3.2rem} /* 묶음 제목 */ /* 숫자 상자 */ /* 뽑는 방법 막대 */ /* 대학 화면 안의 표 — 칸별 정렬 */ .ip2j-tbl .ip2j-l{text-align:left} .ip2j-tnone{padding:4rem;text-align:center;color:var(--ip2-ink2)} .ip2j-uctrl{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.2rem} .ip2j-uctrl select,.ip2j-uctrl input{height:4rem;padding:0 1.2rem;border:1px solid var(--ip2-line2); border-radius:.6rem;background:#fff;color:var(--ip2-ink);font-family:inherit;font-size:1.45rem} .ip2j-uctrl input{min-width:24rem} .ip2j-uctrl select:hover,.ip2j-uctrl input:hover{border-color:var(--ip2-brand)} /* 합격예측 */ .ip2j-myline{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;border:1px solid var(--ip2-line); padding:1.6rem 2rem;margin-bottom:2rem;background:#fff;font-size:1.5rem; box-shadow:0 .2rem .4rem rgba(16,32,48,.10)} .ip2j-myline b{font-size:2.2rem;color:var(--ip2-brand-d);font-weight:normal} .ip2j-myline span{font-size:1.42rem;color:var(--ip2-ink2)} .ip2j-mybtn{margin-left:auto;display:inline-flex;align-items:center;height:4rem;padding:0 2rem; border-radius:999px;background:var(--ip2-brand-d);color:#fff;font-size:1.45rem;text-decoration:none} .ip2j-mybtn:hover{background:var(--ip2-brand)} .ip2j-gw{min-width:20rem} .ip2j-gauge{position:relative;height:1.6rem;background:#EDF1F5;border-radius:.3rem;min-width:16rem} .ip2j-rg{position:absolute;top:0;bottom:0;background:var(--ip2-brand-b);border-radius:.3rem} .ip2j-mk{position:absolute;top:-.3rem;bottom:-.3rem;width:.3rem;background:#D33} .ip2j-nodata{color:var(--ip2-ink2);font-size:1.38rem} .ip2j-jd{display:inline-block;min-width:5.4rem;padding:.4rem .9rem;border-radius:.4rem;font-size:1.35rem} .ip2j-ok{background:#DCFCE7;color:#166534} .ip2j-mid{background:#DBEAFE;color:#0050CC} .ip2j-risk{background:#FEF3C7;color:#92400E} .ip2j-no{background:#EEF0F2;color:#505050} @media (max-width:768px){ .ip2j-utop h2{font-size:2.2rem} .ip2j-umenu{gap:1.8rem} .ip2j-umenu button{font-size:1.5rem} .ip2j-uctrl input{min-width:100%} } /* ═══ 대학 화면 — 요약 ═════════════════════════════════════════ 생김새는 2027susi-hap-test 의 화면을 그대로 옮긴 것이다. 그쪽 style.css 의 값을 px → rem(÷10) 으로만 바꾸고 이름 앞에 ip2j- 를 붙였다. */ .ip2j-upane{ --gyo:#0E7490; --jong:#4A5568; --silg:#909090; --nons:#202020; --edge2:#BCC6CE; --card-sh:0 .2rem .4rem rgba(16,32,48,.10),0 .6rem 1.6rem rgba(16,32,48,.13); } /* 화면 머리 */ .ip2j-phead{padding:2.4rem 0 .6rem} .ip2j-phead .ip2j-eb{font-size:1.4rem;font-weight:600;color:var(--ip2-brand2);margin:0 0 .8rem} .ip2j-phead .ip2j-ptit{margin:0;font-size:2.5rem;font-weight:700;color:var(--ip2-ink);letter-spacing:-.025em} .ip2j-phead p{margin:1.1rem 0 0;font-size:1.6rem;color:var(--ip2-ink2);line-height:1.62} .ip2j-pnote{margin-top:1.4rem} .ip2j-pnote mark{display:block;background:#FFF8E1;color:#5A4A16;padding:1.2rem 1.6rem; border:1px solid #E8D9A0;font-size:1.45rem;line-height:1.7} .ip2j-pnote mark b{font-weight:700;color:#7A5A00} /* 입시 용어 띠 */ .ip2j-gloss{margin-top:2rem;border:1px solid var(--ip2-brand);background:#fff;overflow:hidden; box-shadow:var(--card-sh)} .ip2j-gloss > i{display:flex;align-items:center;justify-content:space-between;font-style:normal; font-weight:700;font-size:1.5rem;color:var(--ip2-ink2);background:var(--ip2-canvas); border-bottom:1px solid var(--ip2-line);padding:.9rem 1.2rem .9rem 2rem;cursor:pointer} .ip2j-gloss > i u{text-decoration:none;flex:none;width:3rem;height:3rem;border:0; background:var(--ip2-brand);color:#fff;font-size:1.9rem;font-weight:800; display:inline-flex;align-items:center;justify-content:center;line-height:1} .ip2j-gloss > i:hover u{background:var(--ip2-brand-d)} .ip2j-gloss.is-closed > i{border-bottom:0} .ip2j-gloss.is-closed .ip2j-gits{display:none} .ip2j-gits{display:grid;grid-template-columns:repeat(auto-fill,minmax(33rem,1fr));grid-auto-rows:1fr; gap:0;padding:0;margin:0 -1px -1px 0} .ip2j-gits span{display:block;font-size:1.5rem;color:var(--ip2-ink);line-height:1.55; padding:1.6rem 2rem;border-right:1px solid var(--ip2-line);border-bottom:1px solid var(--ip2-line)} .ip2j-gits span u{display:block;text-decoration:none;font-size:1.6rem;font-weight:700; color:var(--ip2-brand2);margin-bottom:.3rem} .ip2j-gits span b{font-weight:inherit;color:var(--ip2-ink);text-shadow:0 0 .06rem currentColor} /* 구역 */ .ip2j-sec{padding-top:4rem} .ip2j-sec > h3{margin:0;font-size:2.1rem;font-weight:700;color:var(--ip2-ink)} .ip2j-sec > h3 i{display:inline-flex;align-items:center;justify-content:center;min-width:2.8rem;height:2.8rem; padding:0 .8rem;margin-right:1rem;border-radius:.8rem;background:var(--ip2-brand);color:#fff; font-style:normal;font-size:1.5rem;font-weight:800;vertical-align:.2rem} .ip2j-sec > p.ip2j-d{margin:.8rem 0 0;font-size:1.6rem;color:var(--ip2-ink2);line-height:1.6} /* 큰 문장 */ .ip2j-say{margin:2.6rem 0 0;padding:2.6rem 2.8rem;background:var(--ip2-canvas)} .ip2j-say p{margin:0;font-size:2.2rem;line-height:1.55;color:var(--ip2-ink);font-weight:600; letter-spacing:-.025em} .ip2j-say p + p{margin-top:1.2rem} .ip2j-say b{color:var(--ip2-brand);font-weight:800} .ip2j-say .ip2j-sm{font-size:1.6rem;font-weight:400;color:var(--ip2-ink2);margin-top:1.4rem} /* 숫자 칸 */ .ip2j-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.2rem;margin:2.2rem 0 0} .ip2j-kpi div{border:1px solid var(--edge2);padding:1.5rem 1.7rem;display:flex;flex-direction:column; background:#fff;box-shadow:var(--card-sh)} .ip2j-kpi dt{margin:0 0 .7rem;font-size:1.6rem;color:var(--ip2-ink2);font-weight:600} .ip2j-kpi dd{margin:auto 0 0;font-size:2.6rem;font-weight:800;color:var(--ip2-ink);line-height:1.15; font-variant-numeric:tabular-nums} .ip2j-kpi dd small{font-size:1.5rem;font-weight:500;color:var(--ip2-ink2)} /* 비율 막대 */ .ip2j-bar{display:flex;height:4.6rem;border-radius:.8rem;overflow:hidden;margin-top:2.2rem} .ip2j-bar span{display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700; color:#fff;overflow:hidden;white-space:nowrap;padding:0 .6rem;cursor:default;min-width:0} .ip2j-b1{background:var(--gyo)} .ip2j-b2{background:var(--jong)} .ip2j-b3{background:var(--nons)} .ip2j-b4{background:var(--silg)} .ip2j-blegend{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:1.2rem;font-size:1.5rem;color:var(--ip2-ink2)} .ip2j-blegend i{width:1.1rem;height:1.1rem;border-radius:.2rem;display:inline-block;margin-right:.7rem; vertical-align:-.1rem} /* 선발 방법 묶음 */ .ip2j-how{display:grid;grid-template-columns:repeat(auto-fit,minmax(26.8rem,1fr));gap:1.2rem;margin-top:1.6rem} .ip2j-hrow{background:#fff;border:1px solid var(--edge2);border-left:3px solid var(--ip2-brand); padding:1.6rem 2rem;box-shadow:var(--card-sh)} .ip2j-hhead{display:block} .ip2j-hhead b{display:block;font-size:1.9rem;font-weight:700;color:var(--ip2-ink)} .ip2j-hhead b i{display:inline-flex;align-items:center;justify-content:center;min-width:2.4rem;height:2.2rem; padding:0 .7rem;margin-right:.8rem;border-radius:.6rem;background:var(--ip2-brand-l); color:var(--ip2-brand-d);font-style:normal;font-size:1.4rem;font-weight:800;vertical-align:.1rem} .ip2j-hhead span{display:block;margin-top:.2rem;font-size:1.5rem;font-weight:600;color:var(--ip2-mut)} .ip2j-hrow > p{margin:.8rem 0 0;font-size:1.4rem;color:var(--ip2-ink2);line-height:1.65} .ip2j-hrow > p b{font-weight:700;color:var(--ip2-ink)} .ip2j-hdet{display:grid;grid-template-columns:1fr;gap:1.3rem 0;margin:1.4rem 0 0;padding-top:1.3rem; border-top:1px solid var(--ip2-line)} .ip2j-hdet div{display:block} .ip2j-hdet dt{display:flex;align-items:center;gap:.6rem;font-size:1.6rem;font-weight:700; color:var(--ip2-brand2);margin-bottom:.5rem} .ip2j-hdet dd{margin:0;font-size:1.4rem;color:var(--ip2-ink);line-height:1.55} /* 카드 */ .ip2j-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(27.6rem,1fr));gap:1.2rem;margin-top:1.6rem} .ip2j-cards > div{border:1px solid var(--edge2);border-left:3px solid var(--ip2-brand); padding:1.6rem 1.8rem;display:flex;flex-direction:column;background:#fff;box-shadow:var(--card-sh)} .ip2j-cards h4{margin:0 0 .6rem;font-size:1.7rem;font-weight:700;color:var(--ip2-ink)} .ip2j-cards h4 i{display:inline-flex;align-items:center;justify-content:center;min-width:2.4rem;height:2.2rem; padding:0 .7rem;margin-right:.8rem;border-radius:.6rem;background:var(--ip2-brand-l); color:var(--ip2-brand-d);font-style:normal;font-size:1.4rem;font-weight:800;vertical-align:.1rem} .ip2j-cards p{margin:0 0 1.6rem;font-size:1.5rem;color:var(--ip2-ink2);line-height:1.65} .ip2j-cards p b{font-weight:700;color:var(--ip2-ink)} .ip2j-cards > div .ip2j-gobtn{margin-top:auto;margin-bottom:0;align-self:flex-end} /* 다른 메뉴로 가는 단추 */ .ip2j-gobtn{display:block;margin-top:.8rem;background:#fff;border:1px solid var(--ip2-line2); padding:.7rem 1.2rem;font-family:inherit;font-size:1.4rem;font-weight:700;color:var(--ip2-brand2); cursor:pointer} .ip2j-gobtn:hover{border-color:var(--ip2-brand);background:var(--ip2-brand-l)} .ip2j-gobtn.sm{display:inline-block;margin:.6rem 0 0} /* 자료 출처 */ .ip2j-ft{margin:4.6rem 0 0;padding:2.2rem 0 0;border-top:1px solid var(--ip2-line);font-size:1.4rem; color:var(--ip2-mut);line-height:1.85;text-align:right} .ip2j-ft::before{content:"※ ";color:var(--ip2-mut)} .ip2j-ft b{color:var(--ip2-ink2);font-weight:700} @media (max-width:768px){ .ip2j-phead{padding:2rem 0 .4rem} .ip2j-phead .ip2j-eb{font-size:1.3rem;margin-bottom:.6rem} .ip2j-phead .ip2j-ptit{font-size:2.2rem;letter-spacing:-.03em} .ip2j-phead p{margin-top:.9rem;font-size:1.5rem;line-height:1.62} .ip2j-sec > p.ip2j-d{font-size:1.45rem;line-height:1.6} .ip2j-say{padding:2rem} .ip2j-say p{font-size:1.8rem} } /* 학과 표 안에서 다시 찾기 — 위 검색으로 좁혀 둔 결과 안에서만 걸러 본다 */ .ip2j-fin{display:flex;align-items:center;gap:.6rem;margin-left:auto} .ip2j-fin input{height:3.6rem;min-width:34rem;padding:0 1.2rem;border:1px solid var(--ip2-line2); border-radius:.6rem;background:#fff;color:var(--ip2-ink);font-family:inherit;font-size:1.45rem; letter-spacing:-.02em} /* 안내 문구는 입력한 글자보다 작고 옅게 둔다 — 입력한 글자와 헷갈리지 않게. 옅은 색은 이 안내 문구에만 쓴다 (본문 글자는 규칙대로 또렷하게) */ .ip2j-fin input::placeholder{font-size:1.3rem;color:#8A9099} /* 칸을 누르면 안내 문구를 감춘다 — 입력하는 동안 방해가 되지 않게 */ .ip2j-fin input:focus::placeholder{color:transparent} .ip2j-fin input:focus{border-color:var(--ip2-brand);outline:none; box-shadow:0 0 0 .3rem rgba(6,95,70,.14)} .ip2j-fin button{height:3.6rem;padding:0 1.4rem;border-radius:.6rem;cursor:pointer; font-family:inherit;font-size:1.4rem;letter-spacing:-.02em;transition:.12s} .ip2j-fingo{background:var(--ip2-brand2);border:1px solid var(--ip2-brand2);color:#fff} .ip2j-fingo:hover{background:var(--ip2-brand-d);border-color:var(--ip2-brand-d)} .ip2j-finx{background:#fff;border:1px solid var(--ip2-line2);color:var(--ip2-ink2)} .ip2j-finx:hover{border-color:var(--ip2-brand);color:var(--ip2-brand-d)} @media (max-width:768px){ .ip2j-fin{flex:1 1 100%;margin:0} .ip2j-fin input{min-width:0;flex:1 1 auto} } /* 자료·창구를 싣지 못했을 때 — 빈 화면 대신 까닭을 보여 준다 */ .ip2j-none{margin:4rem 0;padding:2rem;border:1px solid #E0B764;background:#FFF7E6; font-size:1.5rem;line-height:1.7;color:var(--ip2-ink)} .ip2j-none code{font-family:ui-monospace,Consolas,monospace;font-size:1.35rem;color:#8A4B00} /* ═══ 휴대폰 — 학과 표를 카드로 편다 ════════════════════════════════════ 칸이 열한 개라 휴대폰에서는 표를 옆으로 한참 밀어야 다 볼 수 있었다. 한 줄이 한 모집단위이므로 줄을 카드 한 장으로 바꿔 세로로 푼다. 머리줄이 사라지는 숫자 칸에는 무슨 값인지 이름을 앞에 적는다 (검색 JS 가 data-th 로 붙여 둔다). 칸 차례 — 1 구분 · 2 지역 · 3 대학 · 4 모집시기 · 5 전형구분 · 6 전형 · 7 학과 · 8 모집인원 · 9 작년 평균등급 · 10 작년 최저등급 · 11 합격예측 */ @media (max-width:768px){ .ip2j-tblwrap{overflow:visible;box-shadow:none;background:transparent} .ip2j-tbl{display:block;width:100%;font-size:1.45rem} .ip2j-tbl thead{display:none} .ip2j-tbl tbody{display:block} .ip2j-tbl tr{display:grid;gap:.5rem 1.2rem;align-items:baseline; grid-template-columns:minmax(0,auto) minmax(0,auto) minmax(0,1fr); grid-template-areas: "dept dept dept" "univ sido estab" "time gbn gbn" "jeon jeon jeon" "num avg min" "go go go"; background:#fff;padding:1.3rem 1.4rem;border:1px solid var(--ip2-line);border-top:0; box-shadow:0 .2rem .4rem rgba(16,32,48,.10)} .ip2j-tbl tr:first-child{border-top:1px solid var(--ip2-line)} .ip2j-tbl tr:hover td{background:transparent} .ip2j-tbl td,.ip2j-tbl td.ip2j-c{display:block;padding:0;border:0;line-height:1.5; text-align:left;white-space:normal} .ip2j-tbl td:nth-child(1){grid-area:estab;text-align:right} .ip2j-tbl td:nth-child(2){grid-area:sido} .ip2j-tbl td:nth-child(3){grid-area:univ} .ip2j-tbl td:nth-child(4){grid-area:time} .ip2j-tbl td:nth-child(5){grid-area:gbn} .ip2j-tbl td:nth-child(6){grid-area:jeon} .ip2j-tbl td:nth-child(7){grid-area:dept} .ip2j-tbl td:nth-child(8){grid-area:num} .ip2j-tbl td:nth-child(9){grid-area:avg} .ip2j-tbl td:nth-child(10){grid-area:min} .ip2j-tbl td:nth-child(11){grid-area:go} /* 학과 — 카드 제목. 아래 선으로 나머지와 가른다 */ .ip2j-tbl td.ip2j-td{font-size:1.7rem;color:var(--ip2-brand2);letter-spacing:-.03em; padding-bottom:.7rem;border-bottom:1px solid var(--ip2-line)} /* 대학 · 지역 · 설립 구분 */ .ip2j-tbl td.ip2j-tu{font-size:1.5rem;color:var(--ip2-ink)} .ip2j-tbl td:nth-child(1),.ip2j-tbl td:nth-child(2){font-size:1.3rem;color:var(--ip2-ink2)} /* 모집시기 · 전형구분 · 전형 */ .ip2j-tbl td:nth-child(4),.ip2j-tbl td:nth-child(5), .ip2j-tbl td:nth-child(6){font-size:1.35rem;color:var(--ip2-ink2)} /* 숫자 칸 — 값 위에 이름을 적는다 */ .ip2j-tbl td[data-th]{font-size:1.5rem;color:var(--ip2-ink);padding-top:.4rem} .ip2j-tbl td[data-th]:before{content:attr(data-th);display:block; font-size:1.2rem;color:var(--ip2-mut);letter-spacing:-.02em} /* 합격예측 — 손가락으로 누르기 쉽게 한 줄을 다 쓴다 */ .ip2j-tbl td.ip2j-c .ip2j-go{width:100%;height:4.2rem;font-size:1.5rem;margin-top:.5rem} } /* 휴대폰 — 입력칸 글자는 1.6rem(16px) 아래로 내리지 않는다. 아이폰 사파리가 그보다 작은 입력칸을 누르면 화면을 저절로 확대한다 */ @media (max-width:768px){ .ip2j-srch input,.ip2j-fin input,.ip2j-fq,.ip2j-uctrl input{font-size:1.6rem} } /* ═══ 작은 폰(≤560px) — 첫 화면을 촘촘하게 ════════════════════════════ 지역 칩이 17개나 되어 글자·여백이 크면 결과까지 한참 내려야 한다. 대학 카드는 두 칸으로 두면 긴 이름이 넉 줄로 접히므로 한 줄에 한 곳씩 놓는다. ※ 검색창 글자는 1.6rem 그대로 둔다 — 더 줄이면 아이폰이 화면을 확대한다 */ @media (max-width:560px){ .ip2j-hero{padding:2rem 0 4.4rem} .ip2j-wrap.is-idle .ip2j-hero{padding-bottom:5.4rem} .ip2j-hero h2{margin-bottom:1.8rem;font-size:1.6rem;line-height:1.5} .ip2j-ytab button{padding:.7rem 1.4rem;font-size:1.35rem} .ip2j-srch{height:4.6rem;padding:0 .8rem 0 1.4rem;gap:.8rem} .ip2j-srch .ip2j-qreset{margin-left:.4rem;font-size:1.3rem} /* 조건 칩 — 한 줄에 더 많이 담는다 */ .ip2j-chips{margin-top:2.2rem;gap:.5rem} .ip2j-chips button{padding:.65rem 1.2rem;font-size:1.35rem} .ip2j-chips button.is-on{padding:calc(.65rem - 1px) calc(1.2rem - 1px)} .ip2j-chips.ip2j-line{margin-top:1rem;padding-top:1.1rem} /* 대학 카드 — 한 줄에 한 곳. 화살표는 가운데로 옮겨 이름 자리를 넓힌다 */ /* 쪽 넘김 */ .ip2j-pager{margin-top:2.4rem} .ip2j-pager .ip2j-pnum{min-width:2.8rem;height:3.2rem;padding:0 .4rem;font-size:1.4rem} .ip2j-pager .ip2j-parr{width:3.2rem;height:3.2rem;margin:0 .3rem} .ip2j-pgap{min-width:1.4rem;height:3.2rem} }