/* 대학ON 공통 스타일 - 브랜드: 네이비 #243447 / 오렌지 #f57c00 */
:root {
  --navy: #243447;
  --orange: #f57c00;
  --text: #1c1c1c;
  --muted: #777;
  --line: #e5e5e5;
  --header-h: 52px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: var(--text); padding-top: var(--header-h); }

/* ★★★ 버튼 글자는 낱말 중간에서 쪼개지지 않는다 (2026-08-05)
   브라우저는 한국어를 **아무 글자에서나** 끊는다. 그래서 버튼이 조금만 눌리면
   '이 전 그 룹' · '닫 기' 처럼 글자가 세로로 쌓인다. 실기기(430px 안팎)에서 두 건 났다.
   ★ 폭이 '좁아서'가 아니라 **'겨우 한 줄에 들어가서'** 생긴다 -
     좁으면 컨테이너가 줄바꿈되어 오히려 안전하다. 390px 검수로는 구조적으로 안 잡힌다.
   `keep-all` 은 **띄어쓰기에서는 끊고 낱말 안에서는 안 끊는다.** 버튼 문구는 짧아서
   넘칠 위험이 없다. 버튼 하나씩 고치는 대신 성질로 막는다(hover 규칙을 그렇게 처리한 것과 같다).
   ⚠ body 전체에 걸면 안 된다 - 학과명은 띄어쓰기가 없어(`국어국문학과`) 좁은 칸에서 넘친다. */
button { word-break: keep-all; }

/* ── 상단 고정 헤더 (좁게, 스크롤해도 고정) ── */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h); background: #fff; border-bottom: 1px solid var(--line); }
.header-inner { max-width: 1140px; height: 100%; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 28px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.logo img { height: 36px; display: block; }
.logo-text { font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; line-height: 1; }
.logo-text b { color: var(--orange); }
.menus { display: flex; flex: 1; align-items: center; gap: 28px; min-width: 0; }
.menu-btn { display: none; }
.gnb { display: flex; gap: 20px; }
.gnb a { position: relative; text-decoration: none; color: var(--navy); font-size: 14.5px;
  font-weight: 600; padding: 15px 2px; }
/* ★★ 터치에는 '떠난다' 가 없다 - 마지막에 누른 것에 hover 가 눌어붙는다 (2026-08-05).
   그래서 그룹 전체선택(☑)·해제(↺) 를 누르면 **누른 표시가 그대로 남았다.**
   버튼 하나를 고치는 대신 hover 규칙 전부를 `@media(hover:hover)` 안으로 넣었다 -
   같은 병이 다른 버튼에서 또 나오지 않게 **성질로** 막는다. 마우스 동작은 그대로다. */
@media(hover:hover){.gnb a:hover { color: var(--orange); }}
.gnb a.active { color: var(--orange); box-shadow: inset 0 -2px 0 var(--orange); }
.gnb-right { margin-left: auto; display: flex; gap: 14px; }
.gnb-right a { text-decoration: none; color: var(--muted); font-size: 13px; padding: 15px 2px; }
@media(hover:hover){.gnb-right a:hover, .gnb-right a.active { color: var(--navy); }}

/* 말풍선: '내 위치 확인'
   ★ 세로 위치는 **활성 밑줄(`.gnb a.active` 의 inset 그림자, 링크 박스 하단 = 100%)** 기준으로
     잡는다 (2026-08-03 검수). 종전 `100% - 6px` 은 밑줄과 말풍선 사이가 떠 보여서
     5px 더 올렸다 - 화살표 꼭짓점이 밑줄에 닿아 '밑줄에서 나온 말풍선' 으로 읽힌다.
   ※ 좁은 화면(560px 이하)에서는 아래 미디어쿼리가 `position:static` 으로 바꾸므로 무관하다. */
.has-balloon { overflow: visible; }
.balloon { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% - 11px);
  background: var(--orange); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.balloon::before { content: ""; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-bottom-color: var(--orange); border-top: none; }

/* ── PC 안내 한 줄 (2026-08-05) ─────────────────────────────────────────────
   ★ `position` 을 주지 않는다. 본문을 덮는 순간 '침입형 안내' 가 되어 검색 순위를 깎는다.
     흐름 안에서 제 줄을 차지하고, 본문을 아래로 밀 뿐이다.
   ★ 넓은 화면에서는 아예 안 뜬다(할 말이 아니다) - 보이는 조건은 common.js 가 정한다. */
.pc-hint{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;
  background:#fff8f1;border-bottom:1px solid color-mix(in srgb,var(--orange) 30%,transparent);
  font-size:12.5px;line-height:1.5;color:#6b4a2c}
.pc-hint[hidden]{display:none}
.pc-hint span{flex:1}
.pc-hint b{color:var(--orange)}
.pc-hint button{flex:0 0 auto;border:none;background:none;cursor:pointer;font-size:14px;
  color:#a9825e;padding:2px 4px;font-family:inherit}
main { max-width: 1140px; margin: 0 auto; padding: 32px 20px; min-height: 60vh; }

/* ── 광고 슬롯 자리 (목업: 회색 박스 / 실서비스: 애드센스 코드로 교체) ── */
.ad-slot { display: flex; align-items: center; justify-content: center;
  background: #f4f4f4; border: 1px dashed #ccc; border-radius: 6px;
  color: #aaa; font-size: 12px; letter-spacing: 0.1em; }
.ad-horizontal { min-height: 90px; margin: 24px 0; }
.ad-box { min-height: 250px; }

/* ── 오류신고 + 푸터 ── */
.pre-footer { max-width: 1140px; margin: 40px auto 0; padding: 0 20px;
  display: flex; justify-content: flex-end; }
.report-btn { border: 1px solid var(--line); background: #fff; color: var(--muted);
  font-size: 12.5px; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-family: inherit; }
@media(hover:hover){.report-btn:hover { color: #c0392b; border-color: #c0392b; }}
.site-footer { border-top: 1px solid var(--line); background: #fafafa; margin-top: 12px; }
.footer-inner { max-width: 1140px; margin: 0 auto; padding: 22px 20px; font-size: 13px; color: var(--muted); }
.footer-links { display: flex; gap: 18px; margin-bottom: 10px; }
.footer-links a { color: #555; text-decoration: none; }
@media(hover:hover){.footer-links a:hover { text-decoration: underline; }}
.footer-inner p { margin: 4px 0; }
.copy { font-size: 12px; color: #aaa; }

/* ── 모바일 (햄버거 드로어) ── */
@media (max-width: 900px) {
  /* ★ 손가락 표적 - 글자는 그대로 두고 **누를 자리만** 넓힌다 (2026-08-05 실측 24×42).
     패딩으로 넓히고 음수 여백으로 되돌리면 **보이는 배치는 한 픽셀도 안 바뀐다.**
     여기는 대안 경로가 없다 - 메뉴를 여는 길이 이 버튼 하나뿐이라 빗나가면 막힌다. */
  .menu-btn { display: block; margin-left: auto; border: none; background: none;
    font-size: 22px; color: var(--navy); cursor: pointer;
    padding: 6px 12px; margin-right: -10px; }
  .menus { display: none; position: fixed; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; background: #fff;
    border-bottom: 1px solid var(--line); box-shadow: 0 8px 16px rgba(0,0,0,0.08); }
  .menus.open { display: flex; }
  .gnb, .gnb-right { flex-direction: column; gap: 0; margin: 0; }
  .gnb a, .gnb-right a { padding: 13px 20px; border-top: 1px solid #f2f2f2; font-size: 15px; }
  .gnb a.active { box-shadow: inset 3px 0 0 var(--orange); }
  .gnb-right a { font-size: 13.5px; color: var(--muted); }
  .balloon { position: static; transform: none; display: inline-block; margin-left: 8px; }
  .balloon::before { display: none; }
  main { padding: 24px 16px; }
}

/* ── 커스텀 툴팁 (data-tip) ── */
.tip-pop { position: fixed; z-index: 1000; max-width: 300px;
  background: #23272f; color: #fff; font-size: 12px; line-height: 1.55;
  padding: 7px 11px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.25);
  pointer-events: none; visibility: hidden; opacity: 0; transform: translateY(4px);
  transition: opacity .13s ease, transform .13s ease; }
.tip-pop.show { visibility: visible; opacity: 1; transform: none; }

/* ── 맨 위로 버튼 (스크롤 시 좌하단 표시) ── */
.top-btn { position: fixed; bottom: 24px; z-index: 90;
  right: max(16px, calc((100vw - 1140px) / 2 - 56px));
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.14); cursor: pointer;
  font-size: 18px; color: var(--navy); display: none; align-items: center; justify-content: center; }
.top-btn.show { display: flex; }
@media(hover:hover){.top-btn:hover { color: var(--orange); border-color: var(--orange); }}

/* ── 모달 공통 기반 (성적·상세 모달 공유 - partial 을 쓰는 모든 페이지, 2026-08-01) ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:30px 12px}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:14px;max-width:560px;width:100%;padding:22px}
.modal h2{margin:0 0 4px;font-size:17px;text-transform:none;letter-spacing:0;color:var(--text)}

/* ── 배지·계열 표시 공통 (리스트·상세 모달·배치표 공유, 2026-08-01 정시 페이지에서 이동) ── */
.cut70{font-weight:700;color:var(--orange)}
.myscore-pill{display:inline-block;border:1px solid #c8d3e6;border-radius:8px;padding:2px 9px;background:#f5f7fb;
  box-shadow:0 1px 2px rgba(0,0,0,.06);font-weight:700;color:#2b3a55;font-size:12.5px}
.myscore-pill.na{color:#bbb;text-align:center}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.b-down{background:#e3edf9;color:#1d5fae}.b-safe{background:#e3f4e3;color:#1b7e1b}.b-fit{background:#fff3d6;color:#8a6100}
.b-risky{background:#ffe8d9;color:#b35410}.b-danger{background:#fde1e1;color:#c22}
.b-none{background:#f0f0ee;color:#999}
.b-noapply{background:#f0f0ee;color:#c22}
.info{display:inline-block;cursor:help;color:var(--muted);font-size:11px;border:1px solid #ccc;border-radius:50%;
  width:14px;height:14px;line-height:13px;text-align:center;margin-left:3px}
.gbadge{display:inline-flex;width:22px;height:22px;border-radius:50%;background:#23272f;color:#fff;
  font-size:11px;font-weight:700;align-items:center;justify-content:center}
.gbadge.g-na{background:#71767e}
.gbadge.g-da{background:#dfe2e6;color:#43474e;border:1px solid #c4c8ce;box-sizing:border-box}
.tdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:0}
.t-인문{background:#3b7ff2}
.t-자연{background:#17a57b}
.t-예체능{background:#ec6aa0}
.t-공통{background:#8b5cf6}

/* ── 오류신고 모달 (2026-08-03 신설 - 종전 mailto: 대체) ────────────────────
   ★ 모달 골격은 공용 `.modal-bg/.modal` 을 그대로 쓴다. 아래는 폼 전용 규칙만. */
/* ★ 폭 780px 은 눈대중이 아니라 **가장 긴 한 문장에서 잰 값**이다.
   브라우저 실측 - 머리말(`.rp-lead`) 한 줄 = 747px, 하단 안내(`.rp-auto .rp-help`) = 694px.
   둘 중 큰 쪽에 글꼴 차이를 감안해 33px 을 얹었다.
   ★ 왜 신경 쓰나 - 문장이 아슬아슬하게 넘치면 **마지막 줄에 '니다.' 두 글자만 남아**
     글이 잘린 것처럼 보인다. 폭이 모자란 게 아니라 넘친 자리가 나쁜 것이다.
   ⚠ 이 두 문구를 고치면 **다시 재야 한다** - 길어지면 같은 증상이 돌아온다. */
.rp-modal{max-width:780px;padding:24px 32px 22px}
.rp-head{display:flex;align-items:center;gap:8px}
.rp-head h2{margin:0;font-size:17px}
/* ★ 닫기 표적 24×30 → 40×46 (2026-08-05 실측). **패딩으로 넓히지 않는다** -
   패딩을 주면 머리말 줄 높이가 8px 늘어 배치가 바뀐다(실측). 가짜 요소를 덮어
   **누를 자리만** 넓히면 레이아웃은 한 픽셀도 안 움직인다.
   ※ 배경 클릭·`취소` 버튼이라는 다른 길이 있어 여기는 '막힘' 이 아니라 '빗나감' 문제다. */
.rp-x{position:relative;margin-left:auto;border:none;background:none;font-size:19px;cursor:pointer;color:#999;padding:2px 4px;font-family:inherit}
.rp-x::after{content:"";position:absolute;inset:-8px}
@media(hover:hover){.rp-x:hover{color:#333}}
.rp-lead{margin:6px 0 14px;font-size:13px;color:var(--muted);line-height:1.65}
.rp-field{margin:0 0 13px}
.rp-lab{display:block;font-size:13px;font-weight:700;color:var(--navy);margin:0 0 5px}
.rp-req{color:var(--orange)}
.rp-opt{font-weight:400;font-size:11.5px;color:var(--muted);background:#f0f0ee;border-radius:999px;padding:1px 7px;margin-left:4px}
.rp-kinds{display:flex;gap:14px}
.rp-kinds label{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;cursor:pointer}
.rp-modal textarea,.rp-modal input[type=email]{width:100%;box-sizing:border-box;border:1px solid var(--line);
  border-radius:8px;padding:9px 11px;font-size:13.5px;font-family:inherit;line-height:1.6;color:var(--text)}
.rp-modal textarea{resize:vertical;min-height:96px}
.rp-modal textarea:focus,.rp-modal input[type=email]:focus{outline:none;border-color:var(--navy)}
.rp-count{text-align:right;font-size:11.5px;color:var(--muted);margin-top:3px}
.rp-help{margin:5px 0 0;font-size:11.5px;color:var(--muted);line-height:1.6}
.rp-auto{background:#f8f8f7;border-radius:8px;padding:10px 12px;margin:0 0 12px}
.rp-auto-h{font-size:12px;font-weight:700;color:#555;margin-bottom:6px}
.rp-auto-r{display:flex;gap:8px;font-size:12px;color:var(--muted);line-height:1.7}
.rp-auto-r span{flex:0 0 128px}   /* '화면 크기·브라우저'가 96px 에서 두 줄로 깨졌다 */
.rp-auto-r b{color:#444;font-weight:600;word-break:break-all}
/* 허니팟 - `display:none` 은 일부 봇이 걸러낸다. 화면 밖으로 밀어 사람 눈에서만 감춘다. */
.rp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rp-msg{margin:0 0 10px;font-size:13px;line-height:1.6;min-height:1px}
.rp-msg.bad{color:#A32D2D}
.rp-msg.good{color:#1b7e1b;font-weight:700}
.rp-btns{display:flex;gap:8px;justify-content:flex-end}
.rp-btns button{padding:10px 20px;border-radius:8px;font-size:13.5px;font-family:inherit;font-weight:700;cursor:pointer}
.rp-cancel{border:1px solid var(--line);background:#fff;color:#555}
.rp-send{border:1px solid var(--orange);background:var(--orange);color:#fff}
.rp-btns button:disabled{opacity:.55;cursor:default}
@media (max-width:640px){
  .rp-modal{padding:18px 18px 16px}
  .rp-auto-r{flex-direction:column;gap:0}
  .rp-auto-r span{flex:none}
  /* 모바일에서는 두 버튼을 같은 폭으로 - 엄지로 누르기 쉬운 크기를 확보한다 */
  .rp-btns button{flex:1;padding:12px 0}
}

/* ── 정적 문서 페이지 (서비스 안내·FAQ·약관·개인정보처리방침) ────────────────
   2026-08-03 신설. 본문이 길고 읽으라고 만든 화면이라 **폭을 좁힌다** -
   1140px 전폭으로 글을 흘리면 한 줄이 너무 길어 눈이 줄을 놓친다. */
.doc{max-width:820px;margin:0 auto}
.doc h1{font-size:25px;margin:0 0 6px;color:var(--navy);letter-spacing:-0.02em}
.doc .doc-date{font-size:12.5px;color:var(--muted);margin:0 0 26px}
.doc h2{font-size:17.5px;color:var(--navy);margin:34px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.doc h2:first-of-type{border-top:none;padding-top:0}
.doc h3{font-size:14.5px;color:#333;margin:20px 0 6px}
.doc p,.doc li{font-size:14.5px;line-height:1.85;color:#333}
.doc p{margin:0 0 10px}
.doc ul,.doc ol{margin:0 0 12px;padding-left:20px}
.doc li{margin:0 0 5px}
.doc a{color:var(--navy);font-weight:700}
.doc b,.doc strong{color:#111}
.doc .lead{font-size:15.5px;line-height:1.85;color:#444;background:#f8f8f7;border-radius:10px;padding:16px 18px;margin:0 0 26px}
.doc table{border-collapse:collapse;width:100%;font-size:13.5px;margin:0 0 14px}
.doc th,.doc td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top;line-height:1.7}
.doc th{background:#f8f8f7;font-weight:700;color:#444;white-space:nowrap}
.doc .note{background:#fdf7f0;border-left:3px solid var(--orange);border-radius:0 8px 8px 0;padding:12px 15px;margin:0 0 14px}
.doc .note p:last-child{margin-bottom:0}
/* FAQ - 접었다 펴는 목록. details 로 만들어 **스크립트 없이** 동작한다
   (검색엔진도 안쪽 글을 읽는다 - 감춰도 색인된다) */
.doc details{border:1px solid var(--line);border-radius:9px;margin:0 0 8px;background:#fff}
.doc details[open]{border-color:#d6d6d2}
.doc summary{cursor:pointer;padding:13px 16px;font-size:14.5px;font-weight:700;color:var(--navy);
  list-style:none;display:flex;align-items:flex-start;gap:9px;line-height:1.6}
.doc summary::-webkit-details-marker{display:none}
.doc summary::before{content:"Q";flex:0 0 auto;color:var(--orange);font-weight:800}
@media(hover:hover){.doc summary:hover{background:#fafafa}}
.doc details > div{padding:0 16px 14px 41px;border-top:1px solid #f2f2f0;margin-top:-1px}
.doc details > div p:first-child{margin-top:12px}
.doc .faq-cat{font-size:13px;font-weight:700;color:var(--muted);margin:26px 0 8px}
@media (max-width:640px){
  .doc h1{font-size:21px}
  .doc h2{font-size:16px}
  .doc p,.doc li{font-size:14px}
  .doc .lead{font-size:14.5px;padding:13px 14px}
  .doc details > div{padding-left:16px}
  /* 표는 좁은 화면에서 가로로 넘친다 - 감싸는 상자에 스크롤을 준다 */
  .doc .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .doc .tw table{min-width:520px}
}