/* ============================================================
   수시로 수시검색 — styles.css
   참고 디자인: 수시로 프로그램 (파스텔 계열, 테이블 중심 UI)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:        #9bbcf5;
  --blue-light:  #b9d2fb;
  --blue-pale:   #edf5ff;
  --blue-header: #a5aeea;
  --blue-dark:   #6f83d9;
  --gray-50:     #fbfaff;
  --gray-100:    #f7f4ff;
  --gray-200:    #e9e6f6;
  --gray-300:    #d8d2eb;
  --gray-400:    #a69fc5;
  --gray-500:    #716b8f;
  --gray-700:    #4e496d;
  --gray-900:    #2f2a4a;
  --white:       #ffffff;
  --red:         #e78a9c;
  --green:       #7dcfb6;
  --amber:       #f3b77c;
  --font:        'Malgun Gothic', '맑은 고딕', -apple-system, sans-serif;
  --sidebar-w:   120px;
  --header-h:    88px;
  --row-h:       32px;
}

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 13px;
  color: var(--gray-900);
  background: var(--gray-100);
  overflow: hidden;
}

/* ─── 앱 셸 ─── */
#app-root {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ─── 로그인 화면 ─── */
/* ═══════════════════════════════════════════════════════════
   로그인 화면 — PC-first Glassmorphism 디자인
═══════════════════════════════════════════════════════════ */

/* Pretendard 웹폰트 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

.login-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  padding: 24px 16px 32px;
  background: #f0f3fc;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* ── Ambient Orbs ── */
.login-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.42;
  z-index: 0;
  pointer-events: none;
  transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.login-orb-1 {
  width: 500px; height: 500px;
  background: #c4b5fd;
  top: -12%; left: -10%;
}
.login-orb-2 {
  width: 600px; height: 600px;
  background: #bfdbfe;
  bottom: -18%; right: -10%;
}
.login-orb-3 {
  width: 400px; height: 400px;
  background: #fbcfe8;
  top: 38%; left: 50%;
  transform: translate(-50%, -50%);
}

/* ── 메인 콘텐츠 래퍼 ── */
.login-main-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
  padding: 16px 0;
}
@media (min-width: 1024px) {
  .login-main-wrap {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

/* ── 좌측: 브랜드 소개 (PC만 표시) ── */
.login-brand-col {
  display: none;
  flex-direction: column;
  gap: 36px;
  text-align: left;
  /* 모바일에서 grid 공간 차지 안 함 */
  grid-row: 1;
  grid-column: 1;
}
@media (min-width: 1024px) {
  .login-brand-col {
    display: flex;
  }
}

/* NEW 배지 */
.login-new-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(to right, #fbbf24, #f59e0b);
  color: #1e1b4b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 7px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(245,158,11,0.35);
  animation: loginBadgeBounce 1.8s ease-in-out infinite;
  width: fit-content;
}
@keyframes loginBadgeBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.login-new-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #1e1b4b;
  opacity: 0.6;
}

/* 브랜드 타이틀 */
.login-brand-title {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.18;
  color: #1e293b;
}
.login-brand-title .brand-gradient {
  background: linear-gradient(135deg, #657fe6, #3730a3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.login-brand-sub {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
  line-height: 1.75;
  max-width: 400px;
}

/* 기능 카드 그리드 */
.login-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 420px;
}
.login-feature-card {
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 16px;
  padding: 16px;
}
.login-feature-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.login-feature-label.blue  { color: #657fe6; }
.login-feature-label.amber { color: #f59e0b; }
.login-feature-name {
  font-size: 13px;
  font-weight: 900;
  color: #1e293b;
  margin-bottom: 3px;
}
.login-feature-desc {
  font-size: 11px;
  color: #94a3b8;
}

/* ── 우측: 폼 카드 ── */
.login-form-col {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .login-form-col {
    margin: 0 0 0 auto;
  }
}

/* 수시로 상표 로고 (폼 카드 위, PC/모바일 공통) */
.login-brand-logo-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}
.login-brand-logo-year {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #1e3a6e;
}
.login-brand-logo-name {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #1e3a6e;
}

/* Glassmorphism 카드 */
.login-glass-card {
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 28px;
  padding: 28px 28px 24px;
  box-shadow: 0 20px 50px -12px rgba(101, 127, 230, 0.15);
  position: relative;
  overflow: hidden;
}
@media (min-width: 640px) {
  .login-glass-card {
    padding: 32px 36px 28px;
  }
}

/* ── 탭 ── */
.login-tabs {
  display: flex;
  border-bottom: 1px solid rgba(203,213,225,0.5);
  margin-bottom: 22px;
  gap: 0;
}
.login-tab-btn {
  flex: 1;
  padding: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  transition: all 0.25s ease;
  color: #94a3b8;
  letter-spacing: -0.2px;
}
.login-tab-btn.active {
  color: #657fe6;
  border-bottom-color: #657fe6;
  font-weight: 900;
}
.login-tab-btn:hover:not(.active) { color: #475569; }

/* ── 탭 패널 ── */
.login-tab-panel { display: none; }
.login-tab-panel.active { display: block; }

/* ── 폼 그룹 ── */
.form-group { margin-bottom: 14px; }
.form-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px;
  margin-bottom: 6px;
}
.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.form-group-header label { margin-bottom: 0; }
.form-group-err {
  font-size: 10px;
  color: #f43f5e;
  font-weight: 700;
  display: none;
}
.form-group-err.show { display: inline; }
.form-pw-toggle {
  font-size: 10px;
  font-weight: 800;
  color: #657fe6;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.form-pw-toggle:hover { color: #3730a3; }
.form-pw-toggle.active { color: #1e1b4b; }

.form-group input {
  width: 100%;
  padding: 13px 16px;
  background: rgba(248,250,252,0.65);
  border: 1px solid rgba(203,213,225,0.8);
  border-radius: 16px;
  font-size: 14px;
  color: #1e293b;
  font-family: inherit;
  outline: none;
  transition: all 0.25s ease;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.025);
}
.form-group input::placeholder { color: rgba(148,163,184,0.8); }
.form-group input:hover { background: rgba(248,250,252,0.9); }
.form-group input:focus {
  background: #fff;
  border-color: #657fe6;
  box-shadow: 0 0 0 3px rgba(101,127,230,0.15), inset 0 2px 4px rgba(0,0,0,0.02);
}

/* ── 버튼 ── */
.btn-primary {
  width: 100%;
  padding: 15px;
  background: linear-gradient(to right, #657fe6, #5067cf);
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 900;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(101,127,230,0.3);
  margin-top: 6px;
  letter-spacing: -0.2px;
}
.btn-primary:hover {
  background: linear-gradient(to right, #5067cf, #4359be);
  box-shadow: 0 6px 20px rgba(101,127,230,0.4);
}
.btn-primary:active { transform: scale(0.985); }
.btn-primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* ── 에러 메시지 ── */
.login-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  border-radius: 12px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 14px;
  text-align: center;
}

/* ── OR 구분선 ── */
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(203,213,225,0.6);
}

/* ── 네이버 로그인 버튼 ── */
.btn-naver {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  background: #03C75A;
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 900;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 10px rgba(3,199,90,0.2);
  letter-spacing: -0.2px;
}
.btn-naver:hover { background: #02b350; box-shadow: 0 4px 16px rgba(3,199,90,0.3); }
.btn-naver:active { background: #029e49; transform: scale(0.985); }

.btn-kakao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  background: #FEE500;
  color: #3A1D1D;
  border: none;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 900;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 10px rgba(254,229,0,0.35);
  letter-spacing: -0.2px;
  margin-top: 10px;
}
.btn-kakao:hover { background: #f5dc00; box-shadow: 0 4px 16px rgba(254,229,0,0.45); }
.btn-kakao:active { background: #ecd000; transform: scale(0.985); }

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 20px;
  background: #fff;
  color: #3c4043;
  border: 1.5px solid #dadce0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  margin-top: 10px;
}
.btn-google:hover { background: #f8f9fa; box-shadow: 0 4px 16px rgba(60,64,67,0.15); border-color: #c6c9cc; }
.btn-google:active { background: #f1f3f4; transform: scale(0.985); }

/* ── 로그인 하단 링크 ── */
.login-footer {
  text-align: center;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}
.login-footer a { color: #657fe6; cursor: pointer; text-decoration: none; font-weight: 800; }
.login-footer a:hover { text-decoration: underline; }

/* ── 약관 동의 체크박스 ── */
.reg-terms-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin: 6px 0 4px;
  padding: 0 2px;
}
.reg-terms-wrap input[type="checkbox"] {
  margin-top: 2px;
  width: 15px;
  height: 15px;
  accent-color: #657fe6;
  cursor: pointer;
  flex-shrink: 0;
}
.reg-terms-text {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  line-height: 1.55;
  user-select: none;
}
.reg-terms-text a {
  color: #657fe6;
  font-weight: 900;
  text-decoration: none;
}
.reg-terms-text a:hover { text-decoration: underline; }
.reg-terms-required {
  color: #f43f5e;
  font-weight: 900;
}

/* ── 방문자 카운터 배지 ── */
.login-visitor-wrap {
  margin-top: 14px;
}
.login-visitor-card {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 16px;
  padding: 12px 20px;
  box-shadow: 0 20px 50px -12px rgba(101,127,230,0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.2s;
}
.login-visitor-card:hover { background: rgba(255,255,255,0.9); }
.login-visitor-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.login-visitor-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff4a4a;
  animation: loginVisitorPulse 1.5s ease-in-out infinite;
}
@keyframes loginVisitorPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
.login-visitor-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}
.visitor-num {
  font-size: 15px;
  font-weight: 900;
  color: #5067cf;
  letter-spacing: 0.02em;
  transition: all 0.5s;
}

/* ── 하단 Footer ── */
.login-biz-footer {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  margin-top: 28px;
  text-align: center;
}
/* 모바일: 펼치기 토글 버튼 - 숨김 처리 */
.login-footer-toggle {
  display: none;
}

/* 사업자 상세 블록 */
.login-biz-detail {
  display: block;
  font-size: 11px;
  color: rgba(100,116,139,0.9);
  font-weight: 600;
  line-height: 1.7;
  padding: 0 8px;
  space-y: 8px;
}
@media (min-width: 1024px) {
  .login-biz-detail { display: block; }
}
.login-biz-row {
  margin: 0 0 4px 0;
  font-size: 11px;
  color: #64748b;
  line-height: 1.6;
  word-break: keep-all;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 12px;
}
.login-biz-item {
  display: flex;
  gap: 3px;
  align-items: center;
}
.login-biz-key { color: #94a3b8; }
.login-biz-val { color: #475569; }
.login-biz-sep-v {
  display: none;
  color: #cbd5e1;
  font-size: 11px;
}
@media (min-width: 1024px) {
  .login-biz-sep-v { display: inline; }
}
.login-biz-copy {
  margin: 8px 0 0 0;
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 500;
}
/* 모바일 저작권 중복 제거 - 항상 숨김 */
.login-biz-copy-mobile {
  display: none;
}

/* ── 모바일 전용 브랜드 소개 (로그인 카드 아래) ── */
.login-mobile-brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 440px;
  margin: 24px auto 0;
  padding: 0 4px;
  text-align: left;
}
@media (min-width: 1024px) {
  .login-mobile-brand { display: none; }
}
.login-mobile-brand-title {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #1e293b;
  margin-top: 4px;
}
.login-mobile-brand-sub {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
  line-height: 1.75;
}

/* ── 약관 링크 ── */
.login-biz-policy {
  margin-bottom: 8px;
}
.login-biz-policy a {
  color: #657fe6;
  font-weight: 700;
  text-decoration: none;
  font-size: 11px;
}
.login-biz-policy a:hover { text-decoration: underline; }
.login-biz-policy .login-biz-sep { color: #cbd5e1; margin: 0 6px; font-size: 11px; }

/* ── 모바일 반응형 보조 ── */
@media (max-width: 640px) {
  .login-biz-footer { max-width: 100%; }
  .login-glass-card { padding: 24px 20px 20px; border-radius: 24px; }
}
.test-account-box {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--blue-pale);
  border-radius: 8px;
  background: #fcf8ff;
  color: var(--gray-700);
  font-size: 11px;
  line-height: 1.6;
}
.test-account-box strong { display: block; color: var(--blue-dark); font-size: 12px; margin-bottom: 4px; }
.test-account-box code {
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--blue-pale);
  color: var(--blue-dark);
  font-family: Consolas, monospace;
  font-size: 10px;
}
.test-account-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.btn-test-account {
  flex: 1;
  min-height: 28px;
  border: 1px solid var(--blue-pale);
  border-radius: 5px;
  background: var(--white);
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.btn-test-account:hover { background: var(--blue-pale); }
.admin-screen-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-top: 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: var(--white);
  color: var(--gray-700);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.admin-screen-link:hover {
  background: var(--blue-pale);
  color: var(--blue-dark);
}
/* (login-footer, btn-naver, login-divider: 새 로그인 디자인 CSS로 상단 통합) */

.refine-label {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 700;
}
.refine-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 2px 7px;
  border: 1px solid var(--blue-pale);
  border-radius: 999px;
  background: var(--blue-pale);
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 700;
}
.btn-refine-pop {
  margin-left: 6px;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #475569;
  font-size: 10.5px;
  font-weight: 800;
  font-family: var(--font);
  cursor: pointer;
}
.btn-refine-pop:hover { background: #f8fafc; }

#floating-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  z-index: 3000;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .9);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#floating-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#floating-toast.success { background: rgba(5, 150, 105, .95); }
#floating-toast.error { background: rgba(220, 38, 38, .95); }

.interest-check { cursor: pointer; }
.btn-interest-toggle {
  min-width: 28px;
  min-height: 23px;
  padding: 2px 7px;
  border: 1px solid #f0c86b;
  border-radius: 999px;
  background: #fffaf0;
  color: #a16207;
  font-size: 10.5px;
  font-weight: 800;
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
}
.btn-interest-toggle:hover { background: #fef3c7; }
.btn-interest-toggle.active {
  border-color: #f59e0b;
  background: #f59e0b;
  color: #fff;
}
.btn-interest-toggle:disabled { opacity: .6; cursor: wait; }
.th-interest,
.td-check {
  width: 44px;
  min-width: 44px;
  text-align: center;
}
.interest-filter-group {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.btn-interest-only {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #f0c86b;
  border-radius: 999px;
  background: #fffaf0;
  color: #a16207;
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
}
.btn-interest-only.active {
  border-color: #f59e0b;
  background: #f59e0b;
  color: #fff;
}
.interest-count-mini {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #f0c86b;
  border-radius: 999px;
  background: #fff;
  color: #a16207;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

/* ─── 메인 레이아웃: 헤더 + 사이드바 + 컨텐츠 ─── */
.app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* 헤더 */
.app-header {
  flex-shrink: 0;
  background: var(--white);
  border-bottom: 2px solid var(--blue);
  display: flex;
  align-items: stretch;
  height: var(--header-h);
  z-index: 100;
}
.header-left {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--blue-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.header-logo {
  color: var(--white);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.header-logo span { color: #eef6ff; font-size: 11px; display: block; font-weight: 400; margin-top: 2px; }
.header-user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 12px 4px;
  overflow: hidden;
}
.user-greeting {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 4px;
}
.user-greeting strong { color: var(--blue-dark); }

/* 내신 등급 요약 표 */
.grade-summary-wrap {
  flex: 1;
  overflow-x: auto;
  display: flex;
  align-items: center;
}
.grade-summary-table {
  border-collapse: collapse;
  font-size: 11px;
  white-space: nowrap;
  min-width: 600px;
}
.grade-summary-table th {
  background: var(--blue-dark);
  color: var(--white);
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,.2);
  font-weight: 600;
  text-align: center;
}
.grade-summary-table td {
  background: var(--white);
  padding: 3px 8px;
  border: 1px solid var(--gray-200);
  text-align: center;
  font-weight: 700;
  color: var(--blue-dark);
}
.grade-summary-table td.grade-empty { color: var(--gray-400); font-weight: 400; }

/* 대학 로고 (전과목 등급표 ~ 진로선택 과목수 사이) */
.header-univ-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  flex-shrink: 0;
  border-left: 1px solid var(--gray-200);
  border-right: 1px solid var(--gray-200);
  overflow: hidden;
  width: 260px;
  align-self: stretch;
}
.univ-logo-img {
  height: 100%;
  max-height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center center;
  opacity: 0.85;
  filter: saturate(0.85);
}

/* 진로선택 성취도 */
.achievement-box {
  width: 280px;
  flex-shrink: 0;
  padding: 6px 10px;
  border-left: 1px solid var(--gray-200);
  overflow-y: auto;
  font-size: 11px;
}
.achievement-box .ach-title { font-weight: 700; color: var(--gray-700); margin-bottom: 3px; font-size: 11px; }
.achievement-row { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 2px; }
.ach-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}
.ach-badge.A { background: #dcfce7; color: #166534; }
.ach-badge.B { background: #fef9c3; color: #854d0e; }
.ach-badge.C { background: #fee2e2; color: #991b1b; }
.ach-subjects { color: var(--gray-600); font-size: 10px; line-height: 1.5; white-space: normal; word-break: keep-all; }

/* 우측 상단 (사용자명 크게) */
.header-right {
  width: 96px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-left: 1px solid var(--gray-200);
  padding: 8px;
}
.admin-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 22px;
  border-radius: 999px;
  background: var(--amber);
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}
.admin-link:hover { background: #b45309; }
.header-username {
  font-size: 20px;
  font-weight: 800;
  color: var(--blue-dark);
  text-align: center;
  cursor: pointer;
}
.header-username small { display: block; font-size: 10px; font-weight: 400; color: var(--gray-500); }

/* 바디 (사이드바 + 컨텐츠) */
.app-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 사이드바 */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--blue-dark);
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  overflow-y: auto;
}
.sidebar-btn {
  display: block;
  width: 100%;
  padding: 11px 8px;
  background: transparent;
  border: none;
  color: #eef6ff;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  text-align: center;
  transition: background .15s, color .15s;
  line-height: 1.3;
}
.sidebar-btn:hover { background: rgba(255,255,255,.08); color: var(--white); }
.sidebar-btn.active { background: var(--blue-light); color: var(--white); }
/* 수시검색 active 전용 스타일 */
.sidebar-btn[data-tab="search"].active {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}
.sidebar-spacer { flex: 1; }

/* 모바일: 공지사항 탭 아래 버튼 영역 (데스크톱 숨김) */
.sidebar-mobile-actions { display: none; }
/* 데스크톱: 사이드바 하단 버튼 영역 (모바일 숨김) */
.sidebar-desktop-actions { display: contents; }

.sidebar-bottom-btn {
  display: block;
  width: calc(100% - 16px);
  margin: 4px 8px;
  padding: 8px 4px;
  background: var(--blue-light);
  border: none;
  border-radius: 4px;
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  text-align: center;
  transition: background .15s;
}
.sidebar-bottom-btn:hover { background: var(--blue); }

/* 컨텐츠 영역 */
.app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
}

/* ─── 수시검색 탭 공지 배너 ─── */
.search-notice-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
  flex-shrink: 0;
  position: relative;
}
.snb-icon {
  font-size: 15px;
  line-height: 1.6;
  flex-shrink: 0;
}
.snb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.snb-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.snb-title-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: #92400e;
  cursor: pointer;
  text-align: left;
  line-height: 1.5;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.snb-title-btn:hover { text-decoration: underline; color: #78350f; }
.snb-priority-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 2px;
}
.snb-priority-dot.urgent    { background: #dc2626; }
.snb-priority-dot.important { background: #d97706; }
.snb-priority-dot.normal    { background: #2563eb; }
.snb-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: #b45309;
  padding: 0 2px;
  line-height: 1;
  border-radius: 4px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity .12s;
}
.snb-close-btn:hover { opacity: 1; color: #dc2626; }

/* 일괄 닫기 버튼 */
.snb-dismiss-all-btn {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.6;
  transition: background .12s, color .12s;
}
.snb-dismiss-all-btn:hover {
  background: #fbbf24;
  color: #78350f;
  border-color: #d97706;
}
@media (max-width: 600px) {
  .snb-dismiss-all-btn { font-size: 10px; padding: 2px 7px; }
}

/* ─── 수시검색 패널 ─── */
.search-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* 검색 바 */
.search-bar {
  flex-shrink: 0;
  background: var(--blue);
  padding: 10px 14px;
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto auto;
  grid-template-areas:
    "title keyword checkbox actions"
    "filters filters filters filters";
  align-items: center;
  gap: 8px 12px;
  overflow: visible;
}
.search-bar-title {
  grid-area: title;
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.search-input-wrap {
  grid-area: keyword;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.search-input-wrap label { color: #f7fbff; font-size: 11px; white-space: nowrap; }
.search-input {
  flex: 1;
  min-width: 0;
  height: 28px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 4px;
  padding: 0 8px;
  font-size: 12px;
  background: rgba(255,255,255,.95);
  outline: none;
  font-family: var(--font);
}
.search-filters {
  grid-area: filters;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, max-content));
  align-items: center;
  justify-content: start;
  gap: 6px 10px;
  min-width: 0;
}
/* 데스크톱에서 발표등급 두 번째 줄은 숨김 (search-filters 안에 이미 있음) */
.search-filters-grade { display: none; }
.filter-group {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.filter-label { color: #f7fbff; font-size: 11px; white-space: nowrap; }
.filter-select {
  height: 28px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 4px;
  padding: 0 6px;
  font-size: 11px;
  background: rgba(255,255,255,.95);
  font-family: var(--font);
  outline: none;
  cursor: pointer;
}
.filter-group-region {
  align-items: flex-start;
}
.search-region-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 520px;
}
.search-region-chip {
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.search-region-chip.active {
  border-color: #1d4ed8;
  background: #2563eb;
  color: #fff;
  box-shadow: 0 2px 7px rgba(37, 99, 235, .24);
}
.grade-range-filter {
  gap: 5px;
}
.grade-range-input {
  width: 58px;
  height: 28px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 4px;
  padding: 0 6px;
  background: rgba(255,255,255,.95);
  color: var(--gray-800);
  font-size: 11px;
  font-family: var(--font);
  text-align: center;
  outline: none;
}
.grade-range-sep {
  color: #fff;
  font-weight: 800;
}
.fixed-filter-value {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 4px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  color: #1e3a8a;
  background: rgba(255,255,255,.95);
  white-space: nowrap;
}
.search-checkbox-wrap {
  grid-area: checkbox;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #f7fbff;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.search-checkbox-wrap input { cursor: pointer; }
.search-actions {
  grid-area: actions;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  min-width: max-content;
}
.btn-search {
  height: 28px;
  padding: 0 16px;
  background: #1e40af;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: background .15s;
}
.btn-search:hover { background: #1e3a8a; }
.btn-reset {
  height: 28px;
  padding: 0 12px;
  background: rgba(255,255,255,.2);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
  transition: background .15s;
}
.btn-reset:hover { background: rgba(255,255,255,.3); }
.btn-recommend {
  height: 28px;
  padding: 0 12px;
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--font);
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
}
.btn-recommend:hover { opacity: .88; transform: translateY(-1px); }
.btn-recommend:active { transform: translateY(0); }

/* 검색 결과 카운트 바 */
.result-info-bar {
  flex-shrink: 0;
  padding: 5px 14px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--gray-700);
}
.result-count { font-weight: 700; color: var(--blue-dark); }
.result-loading { color: var(--blue); }

/* 결과 테이블 컨테이너 */
.mobile-table-scroll-hint {
  display: none;
}
.result-table-wrap {
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
}
.result-table {
  border-collapse: collapse;
  width: auto;
  font-size: 11.5px;
  /* width:auto + 셀 내부 cell-clip(div) 고정폭으로 컬럼 너비 강제.
     min-width를 컬럼 합(~1050px)로 두어 좁은 화면에서 가로 스크롤은 유지하되
     넓은 화면에서 텍스트 컬럼이 남는 공간을 흡수하지 않도록 함 */
  min-width: 1240px;
}
.result-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}
.result-table thead th {
  background: var(--blue-header);
  color: var(--white);
  padding: 6px 6px;
  border: 1px solid rgba(255,255,255,.15);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  font-size: 11px;
}
.result-table thead th.th-sub {
  background: #8fb4f4;
  font-size: 10px;
  font-weight: 400;
}
.result-table tbody tr:nth-child(even) { background: #f8faff; }
.result-table tbody tr:hover { background: var(--blue-pale); }
.result-table tbody tr.selected { background: #e3ecff !important; }
.result-table td {
  padding: 5px 6px;
  border: 1px solid var(--gray-200);
  vertical-align: middle;
  line-height: 1.3;
}
.result-table td.td-num { text-align: center; color: var(--gray-500); width: 32px; }
.result-table td.td-region { text-align: center; width: 72px; }   /* 지역: 조금 늘림 (60 → 72) */
/* 대학명: 말줄임 없이 모든 글자 표시 (내용에 맞춰 한 줄로 늘어남) */
.result-table td.td-univ { font-weight: 600; color: var(--blue-dark); white-space: nowrap; }
.result-table td.td-dept { }
.result-table td.td-type { text-align: center; width: 48px; }   /* 계열: 조금 늘림 (36 → 48) */
.result-table td.td-adm-type { text-align: center; width: 44px; }
/* 세부유형: 말줄임 없이 모든 글자 표시 (내용에 맞춰 한 줄로 늘어남) */
.result-table td.td-detail { font-size: 10.5px; color: var(--gray-600); white-space: nowrap; }
.result-table .cell-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-table .cell-clip-dept   { width: 120px; }   /* 모집단위: 줄임 */
.result-table td.td-count { text-align: center; width: 44px; color: var(--gray-700); }   /* 모집인원/충원: 유지 */
/* 대학별 환산점수: 늘림 (70 → 82) */
.result-table td.td-score { text-align: center; width: 82px; }
.result-table td.td-grade { text-align: center; width: 50px; font-weight: 700; }
/* 최종등록자 학생부 등급: 늘림 (60 → 72) */
.result-table td.td-grade-final { text-align: center; width: 72px; font-weight: 700; }
/* 내등급: 늘림 (50 → 66) */
.result-table td.td-my-grade-cell { width: 66px; }
/* 내점수: 늘림 (64 → 74) */
.result-table td.td-my-score { text-align: center; width: 74px; font-weight: 700; color: var(--blue-dark); }
.result-table td.td-reflect { font-size: 10px; color: var(--gray-600); max-width: 180px; }
.result-table td.td-check { text-align: center; width: 74px; }
.result-table td.td-detail-action { text-align: center; width: 62px; }   /* 상세결과: 살짝 키움 */
.btn-track-detail {
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--blue);
  border-radius: 4px;
  background: var(--blue-pale);
  color: var(--blue-dark);
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
}
.btn-track-detail:hover { background: var(--blue); color: var(--white); }

/* ═══════════════════════════════════════════════
   VB 스타일 전형 상세보기 모달 (새 디자인)
   ═══════════════════════════════════════════════ */

/* 오버레이 & 래퍼 */
.detail-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(10, 20, 40, .60);
}

.vb-modal-wrap {
  width: min(820px, 98vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #9fb8dc;
  border-radius: 0;
  box-shadow: 0 8px 40px rgba(15,23,42,.4);
  overflow: hidden;
  font-family: '맑은 고딕', 'Malgun Gothic', '나눔고딕', sans-serif;
  font-size: 12px;
}
.vb-modal-wrap.loading { min-height: 200px; }

/* ① 타이틀 바 */
.vb-title-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: linear-gradient(90deg, #0b3875 0%, #1a5099 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  border-bottom: 2px solid #0a2d60;
}
.vb-title-univ { font-size: 15px; font-weight: 700; letter-spacing: 0.3px; }
.vb-title-dept { font-size: 13px; font-weight: 400; color: #b8d4f5; margin-left: 6px; }
.vb-my-calc-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
}
.vb-my-calc-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 4px;
  background: #fff;
  color: #234f86;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15,23,42,.16);
}
.vb-my-calc-badge strong { color: #0b3875; font-size: 14px; font-weight: 900; }
.vb-title-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* 닫기 버튼 */
.vb-modal-close {
  width: 28px; height: 28px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 3px;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.vb-modal-close:hover { background: rgba(255,255,255,.3); }

/* ② 스크롤 바디 */
.vb-modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px 12px;
  background: #ffffff;
}

/* 섹션 공통 */
.vb-section {
  margin: 0 0 16px;
  padding: 0;
  border-bottom: none;
  background: #ffffff;
}
.vb-section:last-child { margin-bottom: 0; }

/* 섹션 타이틀 (짙은 남색 배경 바) */
.vb-section-title {
  background: #183f78;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 20px;
  border: 1px solid #183f78;
  margin: 0 0 5px;
  letter-spacing: 0.3px;
}

/* 안내 문구 */
.vb-section-note {
  background: #ffffff;
  color: #334155;
  font-size: 11.5px;
  padding: 4px 2px 10px;
  border-bottom: none;
  line-height: 1.55;
}

/* 공통 테이블 */
.vb-table-wrap {
  width: 100%;
  overflow-x: visible;
}
.vb-table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
}
.vb-table th {
  background: #c6d8ef;
  color: #0b2445;
  text-align: center;
  padding: 7px 8px;
  border: 1px solid #aebfd6;
  font-weight: 700;
  white-space: nowrap;
}
.vb-table td {
  padding: 8px 10px;
  border: 1px solid #c9cdd3;
  background: #fff;
  vertical-align: middle;
}
.vb-table tbody tr:nth-child(even) td { background: #ffffff; }
.vb-center { text-align: center; }

/* 연도별 결과 테이블 */
.vb-yearly-table { font-size: 11.5px; }
.vb-yearly-table th,
.vb-yearly-table td { padding: 5px 7px; }
.vb-year-cell { font-weight: 700; background: #eaf0fa !important; color: #0b3875; }
.vb-source-cell { font-weight: 700; white-space: pre-line; text-align: center; }
.vb-memo { font-size: 10.5px; color: #334; word-break: break-all; min-width: 120px; }
.vb-cutline-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
}
.vb-cutline-value { color: #334155; }
.vb-cutline-comparison {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.25;
}
.vb-cutline-comparison.favorable { background: #ecfdf5; color: #047857; }
.vb-cutline-comparison.unfavorable { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.vb-cutline-comparison.same { background: #f1f5f9; color: #64748b; }

/* 기본 정보 테이블 */
.vb-info-table th { background: #e7eef8; color: #0b2445; font-size: 12px; }
.vb-info-table td { font-size: 12px; }

/* 키-값 테이블 (전형방법 등) */
.vb-kv-table tbody th {
  width: 88px;
  background: #d9e6f7;
  color: #0b2445;
  border: 1px solid #b0c4de;
  font-weight: 700;
  text-align: center;
  vertical-align: top;
  padding: 8px 10px;
}
.vb-kv-table tbody td {
  white-space: pre-wrap;
  line-height: 1.6;
  vertical-align: top;
}

/* 탭 네비게이션 */
.vb-tab-nav {
  display: flex;
  gap: 0;
  padding: 6px 8px 0;
  background: #e8edf6;
  border-bottom: 2px solid #4682b4;
}
.vb-tab-btn {
  min-width: 62px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid #a7b8d6;
  border-bottom: none;
  background: #dde5f0;
  color: #334155;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 3px 3px 0 0;
  margin-right: 2px;
  transition: background .1s;
}
.vb-tab-btn.active {
  background: #fff;
  color: #0f172a;
  font-weight: 700;
  border-bottom: 2px solid #fff;
  margin-bottom: -2px;
}
.vb-tab-btn:hover:not(.active) { background: #c8d8ea; }

/* 탭 컨텐츠 */
.vb-tab-content { padding: 0; background: #fff; }
.vb-tab-empty {
  padding: 20px;
  color: #94a3b8;
  text-align: center;
  font-size: 12px;
}

/* 첨부파일 (기존 스타일 그대로) */
.track-attachment-list { padding: 6px 8px; }

/* 인쇄 버튼 */
.btn-print-detail {
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 3px;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.btn-print-detail:hover { background: rgba(255,255,255,.35); }

/* 반응형 - 모바일 최적화 (드래그 없이) */
@media (max-width: 600px) {
  /* 모달 전체 */
  .vb-modal-wrap { width: 100vw; max-height: 100dvh; border-radius: 0; font-size: 11px; }
  .vb-modal-body { overflow-x: hidden; padding: 8px 8px 12px; }
  .vb-title-bar { padding: 8px 10px; gap: 4px; flex-wrap: wrap; }
  .vb-title-univ { font-size: 13px; }
  .vb-title-dept { font-size: 11px; margin-left: 4px; }
  .vb-my-calc-badges { order: 3; flex-basis: 100%; margin: 4px 0 0; gap: 5px; }
  .vb-my-calc-badge { padding: 4px 8px; font-size: 10px; }
  .vb-my-calc-badge strong { font-size: 12px; }
  .vb-section-title { padding: 6px 8px; font-size: 11px; letter-spacing: 0; }
  .vb-section-note { font-size: 10.5px; }

  /* 스크롤 래퍼 — 모바일에선 스크롤 없이 꽉 채움 */
  .vb-table-wrap { overflow-x: visible; width: 100%; }

  /* 공통 테이블 압축 */
  .vb-table { min-width: 0; width: 100%; font-size: 11px; }
  .vb-table th { padding: 5px 5px; white-space: normal; word-break: keep-all; font-size: 10.5px; }
  .vb-table td { padding: 5px 6px; font-size: 11px; word-break: break-all; }

  /* 기본정보 테이블: 4컬럼 → 2×2 그리드처럼 */
  .vb-info-table th, .vb-info-table td { font-size: 10.5px; }

  /* kv 테이블(전형방법/학생부반영): th 너비 줄임 */
  .vb-kv-table tbody th { width: 68px; font-size: 10.5px; padding: 5px 5px; }
  .vb-kv-table tbody td { font-size: 10.5px; padding: 5px 6px; }

  /* ── 연도별 컷 테이블: 카드형 변환 ── */
  /* thead 숨기고 각 td를 레이블+값 형태로 표시 */
  .vb-yearly-table { width: 100%; }
  .vb-yearly-table thead { display: none; }
  .vb-yearly-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border: 1px solid #b0c4de;
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
    background: #fff;
  }
  .vb-yearly-table tbody td {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 4px;
    border: none;
    border-right: 1px solid #d8e4f0;
    border-bottom: 1px solid #d8e4f0;
    font-size: 11px;
    text-align: center;
    min-height: 40px;
  }
  .vb-yearly-table tbody td:nth-child(3n) { border-right: none; }
  /* 연도셀 강조 — 3열 전체 차지 */
  .vb-yearly-table tbody td.vb-year-cell {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 10px;
    background: #eaf0fa !important;
    border-bottom: 1px solid #b0c4de;
    border-right: none;
    min-height: unset;
  }
  /* 비고셀 — 3열 전체 차지 */
  .vb-yearly-table tbody td.vb-memo {
    grid-column: 1 / -1;
    text-align: left;
    align-items: flex-start;
    font-size: 10px;
    min-width: 0;
    border-right: none;
    border-bottom: none;
    background: #f8fafc;
    padding: 4px 8px;
  }
  /* 각 td 앞에 레이블 표시 (data-label 속성 활용) */
  .vb-yearly-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 9.5px;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 2px;
    text-transform: uppercase;
  }
  .vb-yearly-table tbody td.vb-year-cell::before,
  .vb-yearly-table tbody td.vb-memo::before { display: none; }

  /* 탭 버튼 */
  .vb-tab-btn { font-size: 10.5px; padding: 5px 8px; }
}

/* 인쇄 */
@media print {
  .vb-modal-close, .btn-print-detail, .vb-tab-nav { display: none !important; }
  .vb-modal-wrap { border: none !important; box-shadow: none !important; max-height: none !important; overflow: visible !important; }
  .vb-modal-body { overflow: visible !important; }
}

/* 전형 상세 / 결과보기 모달 (기존 - 하위 호환) */
.detail-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, .55);
}
.track-detail-modal {
  width: min(1120px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--blue-pale);
  border-radius: 10px;
  box-shadow: 0 22px 70px rgba(15, 23, 42, .35);
}
.track-detail-modal.loading { min-height: 180px; }
.detail-modal-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #a5aeea, #9bbcf5);
  color: var(--white);
}
.detail-kicker {
  margin-bottom: 5px;
  font-size: 11px;
  color: #f7fbff;
  font-weight: 700;
}
.detail-modal-header h2 {
  font-size: 19px;
  line-height: 1.35;
  margin-bottom: 4px;
}
.detail-modal-header p { font-size: 12px; color: #f7fbff; }
.detail-header-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.modal-close,
.btn-print-detail {
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 5px;
  background: rgba(255,255,255,.16);
  color: var(--white);
  font-family: var(--font);
  cursor: pointer;
}
.modal-close {
  width: 30px;
  height: 30px;
  font-size: 22px;
  line-height: 1;
}
.btn-print-detail {
  height: 30px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 700;
}
.modal-close:hover,
.btn-print-detail:hover { background: rgba(255,255,255,.28); }
.detail-modal-body {
  overflow: auto;
  padding: 14px 16px 18px;
  background: var(--gray-50);
}
.detail-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.detail-summary-grid article {
  padding: 9px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 7px;
  background: var(--white);
}
.detail-summary-grid span {
  display: block;
  margin-bottom: 3px;
  color: var(--gray-500);
  font-size: 10.5px;
  font-weight: 700;
}
.detail-summary-grid strong {
  color: var(--gray-900);
  font-size: 13px;
}
.detail-block {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
}
.detail-block h3 {
  margin-bottom: 10px;
  color: var(--blue-dark);
  font-size: 14px;
  border-bottom: 2px solid var(--blue-pale);
  padding-bottom: 6px;
}
.legacy-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 8px;
}
.legacy-section-card {
  min-height: 76px;
  padding: 10px;
  border: 1px solid var(--gray-200);
  border-radius: 7px;
  background: #fcf8ff;
}
.legacy-section-card h4 {
  margin-bottom: 6px;
  color: var(--blue-header);
  font-size: 12px;
}
.legacy-section-card p {
  white-space: pre-wrap;
  color: var(--gray-700);
  font-size: 11.5px;
  line-height: 1.55;
}
.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.2px;
}
.detail-table th {
  padding: 6px 7px;
  border: 1px solid rgba(255,255,255,.2);
  background: var(--blue-header);
  color: var(--white);
  text-align: center;
}
.detail-table td {
  padding: 6px 7px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  vertical-align: top;
}
.detail-table tbody tr:nth-child(even) td { background: #f8faff; }
.key-value-detail-table th {
  width: 150px;
  background: #eef5ff;
  color: var(--blue-dark);
  border: 1px solid var(--gray-200);
  vertical-align: middle;
}
.form16-detail-modal {
  width: min(760px, 96vw);
}
.form16-detail-body {
  background: #ffffff;
  padding: 10px;
}
.form16-title-bar {
  margin-bottom: 6px;
  background: #4682b4;
  color: #fff;
  border: 1px solid #3f78a8;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  padding: 10px;
}
.form16-grid-block {
  margin-top: 6px;
  padding: 6px;
  border-radius: 0;
}
.form16-section-title {
  margin-bottom: 4px;
  background: #4682b4;
  border: 1px solid #3f78a8;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700;
  padding: 6px 10px;
  border-bottom: 0 !important;
}
.form16-tab-nav {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  margin-bottom: 0;
}
.form16-tab-btn {
  min-width: 58px;
  height: 26px;
  border: 1px solid #a7b8d6;
  border-bottom: 0;
  background: #e8edf6;
  color: #334155;
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
}
.form16-tab-btn.active {
  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
}
.form16-tab-btn:hover { background: #f8fafc; }
.form16-grid-table { margin-bottom: 6px; }
.form16-grid-table td { text-align: center; white-space: pre-wrap; }
.form16-two-col-table {
  border-top: 0;
}
.form16-two-col-table tbody th {
  width: 78px;
  text-align: center;
  background: #f4f7fc;
  color: #1e293b;
  border: 1px solid #d9e2f0;
  font-weight: 700;
}
.form16-two-col-table tbody td {
  white-space: pre-wrap;
  line-height: 1.45;
}
.vb-form16-block .detail-table th { background: #5f89b4; }
.legacy-tab-grid .legacy-section-card { background: #fffdf7; }
.my-calc-detail-block .my-calc-table td:last-child {
  max-width: 280px;
  white-space: pre-wrap;
}
.detail-note {
  margin-bottom: 8px;
  color: var(--gray-600);
  font-size: 11.5px;
}
.detail-legacy-source dl {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 10px;
  font-size: 11.5px;
}
.detail-legacy-source dt {
  color: var(--gray-500);
  font-weight: 700;
}
.detail-legacy-source dd {
  color: var(--gray-900);
  word-break: break-word;
}
.detail-loading,
.detail-error {
  padding: 70px 30px;
  text-align: center;
  color: var(--gray-700);
  font-size: 14px;
}
.detail-error { color: var(--red); }

@media (max-width: 820px) {
  .detail-summary-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .legacy-section-grid { grid-template-columns: 1fr; }
  .track-detail-modal { width: 98vw; max-height: 95vh; }
}

@media print {
  @page { size: A4 landscape; margin: 5mm; }
  html, body { width: 100% !important; height: auto !important; overflow: visible !important; background: #fff !important; }
  body > :not(#track-detail-modal):not(#counsel-print-modal) { display: none !important; }
  #track-detail-modal, #track-detail-modal *,
  #counsel-print-modal, #counsel-print-modal * { visibility: visible !important; }
  #track-detail-modal,
  #counsel-print-modal {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }
  .track-detail-modal {
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
  }
  .detail-modal-body { overflow: visible !important; background: #fff !important; padding: 0 !important; }
  .modal-close, .btn-print-detail, .no-print { display: none !important; }
  .detail-block { break-inside: avoid; page-break-inside: avoid; }
  .counsel-report-section,
  .counsel-interest-table tr { break-inside: auto; page-break-inside: auto; }
}

/* ─── 성적 입력/내신등급 계산 ─── */
.grade-input-table select:disabled,
.grade-input-table input:disabled,
.grade-input-table .grade-cell-disabled {
  background: #e5e7eb !important;
  color: #94a3b8 !important;
  cursor: not-allowed;
  border-color: #cbd5e1;
}
.grade-calc-panel {
  height: 100%;
  padding: 16px;
  overflow: auto;
  background: linear-gradient(180deg, #ffffff, #fbfaff);
}
.grade-calc-toolbar,
.grade-calc-selectors {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: #f8fafc;
}
.calc-student-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--blue-pale);
  color: var(--gray-700);
}
.calc-student-box strong { color: var(--blue-dark); }
.calc-fieldset {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  background: var(--white);
}
.calc-fieldset legend {
  padding: 0 4px;
  color: var(--gray-500);
  font-weight: 700;
  font-size: 11px;
}
.calc-fieldset label,
.calc-group-checks label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gray-700);
  font-size: 12px;
  font-weight: 700;
}
.calc-expected-fieldset input[type="number"] {
  width: 70px;
  height: 26px;
  margin-left: 4px;
  border: 1px solid var(--gray-300);
  border-radius: 5px;
  padding: 0 6px;
}
.calc-group-checks,
.calc-quick-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* 계산기 버튼 영역: margin-top 제거하여 높이 정렬 */
.calc-quick-actions .btn-add-row,
.calc-quick-actions .btn-grade-action {
  margin-top: 0;
}
.grade-calc-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(320px, 420px);
  gap: 12px;
  align-items: stretch;
}
.grade-calc-table-wrap {
  min-height: 360px;
  overflow: auto;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--white);
}
.grade-calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.grade-calc-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 7px 6px;
  border-bottom: 1px solid var(--gray-300);
  background: #6f83d9;
  color: #fff;
  text-align: center;
}
.grade-calc-table td {
  padding: 6px;
  border-bottom: 1px solid var(--gray-200);
  text-align: center;
}
.grade-calc-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.grade-calc-table tbody tr:hover { background: #f7fbff; }
.grade-calc-result {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fffdf7;
  overflow: hidden;
}
.grade-calc-result h3 {
  margin: 0;
  padding: 10px 12px;
  background: #475569;
  color: #fff;
  font-size: 13px;
}
.grade-calc-result pre {
  min-height: 330px;
  margin: 0;
  padding: 12px;
  white-space: pre-wrap;
  line-height: 1.65;
  font-family: 'Malgun Gothic', '맑은 고딕', Consolas, monospace;
  color: #1e293b;
  background: #fffdf7;
}
.empty-cell { padding: 24px !important; color: var(--gray-500); text-align: center !important; }

@media (max-width: 1100px) {
  .grade-calc-grid { grid-template-columns: 1fr; }
}

/* 배지 */
.badge-susi { background: #e8f2ff; color: #6177c7; border-radius: 3px; padding: 1px 5px; font-size: 10px; font-weight: 600; }
.badge-jeong { background: #fef9c3; color: #92400e; border-radius: 3px; padding: 1px 5px; font-size: 10px; font-weight: 600; }
.badge-art { background: #fce7f3; color: #9d174d; border-radius: 3px; padding: 1px 5px; font-size: 10px; font-weight: 600; }
.badge-good { background: #dcfce7; color: #166534; border-radius: 3px; padding: 1px 5px; font-size: 10.5px; font-weight: 700; }
.badge-warn { background: #fef3c7; color: #92400e; border-radius: 3px; padding: 1px 5px; font-size: 10.5px; font-weight: 700; }
.badge-danger { background: #fee2e2; color: #991b1b; border-radius: 3px; padding: 1px 5px; font-size: 10.5px; font-weight: 700; }

/* 내 점수 비교 색상 */
.my-score-above { color: var(--green); font-weight: 700; }
.my-score-below { color: var(--red); font-weight: 700; }
.my-score-close { color: var(--amber); font-weight: 700; }

/* 빈 결과 */
.empty-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--gray-400);
  text-align: center;
}
.empty-result .icon { font-size: 40px; margin-bottom: 12px; }
.empty-result p { font-size: 14px; }
.empty-result small { font-size: 12px; color: var(--gray-300); margin-top: 6px; }

/* ─── 내 성적보기 패널 ─── */
.my-grades-panel {
  padding: 16px;
  overflow-y: auto;
  height: 100%;
}
.panel-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--blue-dark);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--blue-pale);
}
.grade-combo-summary-section,
.achievement-summary-section {
  margin-bottom: 16px;
}
.grade-section-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.grade-section-heading h3,
.achievement-summary-section h3 {
  margin: 0;
  color: #334155;
  font-size: 13px;
}
.grade-section-heading span {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
}
.grade-combo-strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  overflow-x: auto;
  padding: 8px;
  border: 1px solid #dbe7fb;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  scrollbar-width: thin;
}
.grade-combo-item {
  flex: 1 0 74px;
  min-width: 74px;
  max-width: 120px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(30, 58, 138, .06);
  overflow: hidden;
}
.grade-combo-label,
.grade-combo-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 6px;
  text-align: center;
}
.grade-combo-label {
  background: #1e3a8a;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -.2px;
  white-space: nowrap;
}
.grade-combo-value {
  color: #1e3a8a;
  font-size: 13px;
  font-weight: 900;
}
.grade-combo-empty {
  color: #94a3b8;
  font-weight: 700;
}

/* ─── 2022 교육과정 5등급→9등급 변환 표시 (교과 등급 요약 카드) ─── */
.grade-combo-item.has-2022-conv {
  border-color: #ddd6fe;          /* 보라 계열 테두리로 2022 구분 */
}
.grade-combo-item.has-2022-conv .grade-combo-label {
  background: #5b21b6;            /* 2022 카드 헤더: 보라색 */
}
.grade-combo-item.has-2022-conv .grade-combo-value {
  flex-direction: column;
  padding: 5px 4px;
  gap: 1px;
}
.grade-combo-conv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex-wrap: nowrap;
  font-size: 11px;
}
.grade-combo-raw5 {
  color: #7c3aed;
  font-weight: 800;
  font-size: 12px;
}
.grade-combo-raw5 sub {
  font-size: 8px;
  color: #a78bfa;
  vertical-align: baseline;
  margin-left: 1px;
}
.grade-combo-arrow {
  color: #94a3b8;
  font-size: 10px;
}
.grade-combo-conv9 {
  color: #1e3a8a;
  font-weight: 900;
  font-size: 13px;
}
.grade-combo-conv9 sub {
  font-size: 8px;
  color: #60a5fa;
  vertical-align: baseline;
  margin-left: 1px;
}

/* ─── 학년별 내신표: 5등급/9등급 분리 표시 ─── */
.yearly-grade-card .grade-mode-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 9px;
  font-weight: 700;
  vertical-align: middle;
}
.yearly-grade-card.has-5-9 thead th { font-size: 10px; }

/* ─── 상담판 내신 요약: 5등급/9등급 두 줄 표시 ─── */
.counsel-grade-table-5-9 .grade-mode-col {
  background: #f1f5f9;
  font-size: 10px;
  white-space: nowrap;
}
.counsel-grade-table-5-9 tr.grade-row-5 td,
.counsel-grade-table-5-9 tr.grade-row-5 th { color: #92400e; }
.counsel-grade-table-5-9 tr.grade-row-5 th.grade-mode-col { background: #fef3c7; color: #92400e; }
.counsel-grade-table-5-9 tr.grade-row-9 td,
.counsel-grade-table-5-9 tr.grade-row-9 th { color: #1e3a8a; font-weight: 800; }
.counsel-grade-table-5-9 tr.grade-row-9 th.grade-mode-col { background: #dbeafe; color: #1e3a8a; }

/* ─── 헤더 상태바: 2022 변환값 셀 ─── */
.grade-summary-table td.grade-has-conv {
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.3;
}
.hdr-raw5 {
  color: #a78bfa;
  font-size: 10px;
  font-weight: 700;
}
.hdr-arrow {
  color: #94a3b8;
  font-size: 9px;
  margin: 0 1px;
}
.achievement-summary-table-wrap {
  max-width: 720px;
  overflow-x: auto;
}
.achievement-summary-table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
}
.achievement-summary-table th {
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.2);
  background: #1e3a8a;
  color: #fff;
  text-align: left;
}
.achievement-summary-table td {
  padding: 6px 12px;
  border-bottom: 1px solid #e2e8f0;
}

@media (max-width: 760px) {
  .grade-section-heading {
    display: block;
  }
  .grade-section-heading span {
    display: block;
    margin-top: 4px;
    line-height: 1.45;
  }
  .grade-combo-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow-x: visible;
    padding: 8px;
  }
  .grade-combo-item {
    min-width: 0;
    max-width: none;
  }
  .grade-combo-label,
  .grade-combo-value {
    min-height: 30px;
  }
}

@media (max-width: 420px) {
  .grade-combo-strip {
    grid-template-columns: 1fr;
  }
}

/* ─── 상담후보 / 관심전형 패널 ─── */
.interest-panel {
  height: 100%;
  padding: 16px;
  overflow: auto;
  background: linear-gradient(180deg, #fff, #fbfaff);
}
.interest-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--gray-200);
  border-radius: 9px;
  background: var(--blue-pale);
}
.interest-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-700);
  font-size: 12px;
  font-weight: 700;
}
.interest-toolbar select {
  height: 28px;
  min-width: 120px;
  border: 1px solid var(--gray-300);
  border-radius: 5px;
  padding: 0 8px;
  background: var(--white);
  color: var(--gray-900);
  font-family: var(--font);
  font-size: 12px;
}
.btn-interest-refresh,
.btn-counsel-print,
.btn-interest-memo-save,
.btn-interest-detail,
.btn-interest-remove {
  min-height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 5px;
  color: var(--white);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.btn-interest-refresh { background: var(--blue-dark); }
.btn-counsel-print { background: #0f766e; }
.btn-interest-memo-save { background: var(--green); }
.btn-interest-detail { background: var(--blue); }
.btn-interest-remove { background: var(--red); }
.btn-interest-refresh:hover,
.btn-counsel-print:hover,
.btn-interest-memo-save:hover,
.btn-interest-detail:hover,
.btn-interest-remove:hover { filter: brightness(.94); }
.btn-interest-memo-save:disabled { opacity: .65; cursor: wait; }
.interest-count {
  margin-left: auto;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 800;
}
.interest-help {
  margin: 4px 0 12px;
  color: var(--gray-500);
  font-size: 12px;
  line-height: 1.55;
}
.interest-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  font-size: 11.5px;
  background: var(--white);
}
.interest-table th {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.2);
  background: var(--blue-dark);
  color: var(--white);
  text-align: center;
  white-space: nowrap;
}
.interest-table td {
  padding: 7px 8px;
  border: 1px solid var(--gray-200);
  vertical-align: top;
  line-height: 1.45;
}
.interest-table tbody tr:nth-child(even) td { background: #f8faff; }
.interest-table tbody tr:hover td { background: var(--blue-pale); }
.interest-table small { color: var(--gray-500); }
.interest-compare { min-width: 190px; white-space: normal; }
.interest-memo {
  display: block;
  width: 240px;
  min-height: 58px;
  resize: vertical;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 7px;
  color: var(--gray-900);
  font-family: var(--font);
  font-size: 11.5px;
  line-height: 1.45;
  background: var(--white);
}
.interest-memo:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(155,188,245,.18);
}
.interest-memo-status {
  display: block;
  min-height: 15px;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 800;
}
.interest-memo-status.success { color: var(--green); }
.interest-memo-status.error { color: var(--red); }
.interest-actions {
  min-width: 82px;
  text-align: center;
}
.interest-actions button {
  display: block;
  width: 100%;
  margin-bottom: 5px;
}

.interest-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.8fr) repeat(3, minmax(160px, 1fr));
  gap: 12px;
  margin: 12px 0 14px;
}
.interest-hero-card,
.interest-summary-card,
.interest-list-card,
.interest-peer-card {
  border: 1px solid #e4e9f7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(42, 70, 130, .07);
}
.interest-hero-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  color: #fff;
  background: linear-gradient(135deg, #6f8ee8, #a8befa);
  overflow: hidden;
  position: relative;
}
.interest-hero-card::after {
  content: "★";
  position: absolute;
  right: 24px;
  top: -14px;
  color: rgba(255,255,255,.18);
  font-size: 104px;
  line-height: 1;
}
.interest-hero-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(255,255,255,.22);
  color: #fff7cc;
  font-size: 24px;
  flex: 0 0 auto;
}
.interest-hero-card strong {
  display: block;
  font-size: 17px;
  margin-bottom: 5px;
}
.interest-hero-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  opacity: .92;
}
.interest-summary-card {
  padding: 16px;
}
.interest-summary-card span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 8px;
}
.interest-summary-card strong {
  display: block;
  color: #233876;
  font-size: 20px;
  line-height: 1.15;
}
.interest-summary-card small {
  display: block;
  margin-top: 6px;
  color: #8391a8;
  font-size: 11px;
}
.interest-split {
  display: grid;
  grid-template-columns: minmax(520px, 1.35fr) minmax(340px, .85fr);
  gap: 14px;
  align-items: start;
}
.interest-list-card,
.interest-peer-card {
  padding: 14px;
}
.interest-section-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.interest-section-head h3 {
  margin: 0 0 4px;
  color: #1e3a8a;
  font-size: 15px;
}
.interest-section-head p {
  margin: 0;
  color: #64748b;
  font-size: 11.5px;
}
.interest-row-list {
  display: grid;
  gap: 8px;
}
.interest-row {
  display: grid;
  grid-template-columns: 34px minmax(170px, 1fr) minmax(250px, .9fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #f8faff;
  cursor: pointer;
  text-align: left;
}
.interest-row:hover,
.interest-row.active {
  border-color: #8da8f4;
  background: #eef4ff;
}
.interest-row.active {
  box-shadow: inset 3px 0 0 #5b7ee5;
}
.interest-row-star {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #6f8ee8;
  color: #fff7cc;
  font-size: 16px;
}
.interest-row-main strong,
.interest-row-main em,
.interest-row-main small {
  display: block;
  font-style: normal;
}
.interest-row-main strong {
  color: #1f2a55;
  font-size: 13px;
}
.interest-row-main em {
  color: #334155;
  font-size: 12px;
  margin-top: 2px;
}
.interest-row-main small {
  color: #74819a;
  font-size: 11px;
  margin-top: 3px;
}
.interest-row-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  gap: 8px;
}
.interest-row-stats span {
  display: block;
  min-width: 0;
}
.interest-row-stats b {
  display: block;
  color: #4059b8;
  font-size: 13px;
}
.interest-row-stats small {
  color: #8a96ad;
  font-size: 10px;
}
.interest-row-actions {
  display: flex;
  gap: 5px;
}
.interest-row-actions .btn-interest-remove {
  min-width: 32px;
  padding: 0 8px;
  border: 1px solid #f9a8b7;
  background: #fff1f4;
  color: #e11d48;
}
.interest-peer-selected {
  padding: 14px;
  border-radius: 12px;
  background: #fbfcff;
  border: 1px solid #e8edf9;
  margin-bottom: 12px;
}
.interest-peer-selected small {
  display: block;
  color: #6f8ee8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.interest-peer-selected strong,
.interest-peer-selected span {
  display: block;
}
.interest-peer-selected strong {
  color: #1f2a55;
  font-size: 17px;
}
.interest-peer-selected span {
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
}
.interest-peer-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.interest-peer-metrics div {
  padding: 10px;
  border: 1px solid #e7ecf7;
  border-radius: 10px;
  background: #fff;
}
.interest-peer-metrics span,
.interest-source-badge {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 800;
}
.interest-peer-metrics strong {
  display: block;
  margin-top: 4px;
  color: #233876;
  font-size: 16px;
}
.interest-source-badge {
  padding: 5px 8px;
  border: 1px solid #d9e4ff;
  border-radius: 999px;
  background: #f3f7ff;
  color: #4164c8;
  white-space: nowrap;
}
.interest-privacy-gate {
  padding: 18px;
  border: 1px dashed #c8d5f8;
  border-radius: 12px;
  background: #f8fbff;
  text-align: center;
}
.interest-privacy-gate strong {
  color: #1e3a8a;
  font-size: 14px;
}
.interest-privacy-gate p,
.interest-footnote {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.55;
}
.interest-distribution h4 {
  margin: 14px 0 8px;
  color: #1f2a55;
  font-size: 12px;
}
.interest-dist-row {
  display: grid;
  grid-template-columns: 64px 1fr 34px;
  align-items: center;
  gap: 8px;
  margin: 7px 0;
  color: #64748b;
  font-size: 11px;
}
.interest-bar {
  height: 7px;
  border-radius: 999px;
  background: #edf1f8;
  overflow: hidden;
}
.interest-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #7895e7;
}
.interest-grade-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.interest-grade-chip {
  padding: 5px 8px;
  border-radius: 8px;
  background: #edf3ff;
  color: #4164c8;
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .interest-dashboard-grid,
  .interest-split {
    grid-template-columns: 1fr;
  }
  .interest-row {
    grid-template-columns: 34px 1fr;
  }
  .interest-row-stats,
  .interest-row-actions {
    grid-column: 2;
  }
}

/* ─── 학생별 관심전형 상담표 출력 ─── */
.counsel-print-dialog {
  width: min(1180px, 97vw);
}
.counsel-print-body {
  background: #fff;
}
.form17-page-setup-panel {
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}
.form17-page-setup-panel h3 {
  margin-bottom: 8px;
  color: #1e3a8a;
  font-size: 13px;
}
.form17-page-setup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 8px;
}
.form17-page-setup-grid label {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
}
.form17-page-setup-grid select {
  height: 30px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0 8px;
  background: #fff;
  color: #0f172a;
  font-family: var(--font);
  font-size: 12px;
}
.form17-preview-sheet {
  width: 100%;
}
.form17-preview-open {
  display: flex;
  justify-content: center;
  background: #e2e8f0;
}
.form17-preview-open .form17-preview-sheet {
  width: min(1120px, 100%);
  padding: 8px;
  border: 1px dashed #94a3b8;
  border-radius: 6px;
  background: #fff;
}
.counsel-report {
  padding: 18px;
  color: #111827;
  background: #fff;
  font-family: var(--font);
  font-size: var(--form17-font-scale, 100%);
}
.counsel-report-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 3px solid #1e3a8a;
  margin-bottom: 12px;
}
.counsel-report-title p {
  margin-bottom: 4px;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}
.counsel-report-title h1 {
  color: #0f172a;
  font-size: 24px;
  letter-spacing: -0.5px;
}
.counsel-report-title dl {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 4px 8px;
  min-width: 250px;
  font-size: 11px;
}
.counsel-report-title dt { color: #64748b; font-weight: 800; }
.counsel-report-title dd { color: #0f172a; font-weight: 700; }
.counsel-report-section {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
}
.counsel-report-section h2 {
  margin-bottom: 8px;
  color: #1e3a8a;
  font-size: 14px;
  border-bottom: 1px solid #dbeafe;
  padding-bottom: 5px;
}
.counsel-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}
.counsel-info-grid article {
  border: 1px solid #dbeafe;
  border-radius: 6px;
  padding: 8px;
  background: #f8fafc;
}
.counsel-info-grid span {
  display: block;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 800;
  margin-bottom: 3px;
}
.counsel-info-grid strong { color: #0f172a; font-size: 13px; }
.counsel-mini-table,
.counsel-interest-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
}
.counsel-mini-table caption {
  caption-side: top;
  text-align: left;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px;
}
.counsel-mini-table th,
.counsel-mini-table td,
.counsel-interest-table th,
.counsel-interest-table td {
  padding: 5px 6px;
  border: 1px solid #cbd5e1;
  vertical-align: top;
}
.counsel-mini-table th,
.counsel-interest-table th {
  background: #dbeafe;
  color: #1e3a8a;
  text-align: center;
  font-weight: 800;
}
.counsel-mini-table td,
.counsel-interest-table td { background: #fff; }
.counsel-interest-table tbody tr:nth-child(even) td { background: #f8fafc; }
.counsel-grade-table td { text-align: center; font-weight: 700; }
.counsel-grade-subgrid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.counsel-interest-table small { color: #64748b; }
.counsel-empty { color: #64748b; font-size: 12px; }
.counsel-blank-lines span {
  display: block;
  height: 28px;
  border-bottom: 1px solid #cbd5e1;
}

/* ─── 학생부 입력수정 ─── */
.grade-input-panel {
  padding: 16px;
  overflow-y: visible;
  overflow-x: hidden;
  height: auto;
  min-height: 100%;
}
/* 테이블 가로 스크롤 래퍼: 항상 활성 (성적 없을 때도 포함) */
.grade-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overflow-y: visible;
  width: 100%;
}
.grade-input-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  margin-top: 12px;
}
.grade-input-table th {
  background: var(--blue-dark);
  color: var(--white);
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.2);
  text-align: center;
  font-weight: 600;
  font-size: 11px;
}
.grade-input-table td {
  padding: 4px 6px;
  border: 1px solid var(--gray-200);
  vertical-align: middle;
}
.grade-input-table tr:nth-child(even) td { background: var(--gray-50); }
.grade-input-table input[type="number"],
.grade-input-table input[type="text"],
.grade-input-table select {
  width: 100%;
  height: 26px;
  border: 1px solid var(--gray-300);
  border-radius: 3px;
  padding: 0 6px;
  font-size: 11px;
  font-family: var(--font);
  outline: none;
}
.grade-input-table input:focus,
.grade-input-table select:focus {
  border-color: var(--blue);
}
.btn-add-row {
  margin-top: 8px;
  height: 30px;
  padding: 0 14px;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
}
.btn-add-row:hover { background: var(--blue-header); }
/* 빠른 입력 칩 - 선택된 항목 강조 */
.quick-chip {
  background: #cbd5e1;
  color: #334155;
  border: 2px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.quick-chip:hover { background: #94a3b8; color: #1e293b; }
.quick-chip.active {
  background: #1d4ed8 !important;
  color: #fff !important;
  border-color: #1e40af !important;
  box-shadow: 0 0 0 2px #bfdbfe;
  font-weight: 700;
}
/* ─── PC: 빠른입력 qi-row — 원래 수평 한 줄 스타일 ─── */
/* 모바일(@media max-width:768px) 밖에서는 테이블형 수평 배치 */
.qi-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 6px;
  padding: 4px 0;
}
.qi-label {
  font-size: 12px;
  font-weight: 700;
  color: #1e3a8a;
  min-width: 54px;
  flex-shrink: 0;
  white-space: nowrap;       /* PC: 레이블 한 줄 강제 */
}
.qi-label-sep {
  margin-left: 8px;
}
/* PC에서는 레이블 줄바꿈(qi-br)을 공백으로 처리 → "교육 과정" 한 줄 */
.qi-br {
  display: inline;
}
.qi-br::before {
  content: " ";
}
/* 이수구분 레이블이 학기 뒤에 오므로 폭 줄여 한 줄 유지 */
.qi-label-ctype {
  min-width: auto;
}
/* PC에서는 모바일 줄바꿈 요소 숨김 (한 줄 유지) */
.qi-rowbreak-mobile {
  display: none;
}
.qi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: none;
}
/* PC에서 교과군 줄: flex-wrap으로 자연스럽게 */
.qi-chips-sgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
/* PC에서 선택값으로 행 추가 버튼: 인라인 */
.qi-chips-sgroup .qi-add-btn,
.qi-chips-sgroup #btn-add-row-quick {
  margin-left: 4px;
}
/* PC 기본: long 보임, short 숨김 */
.qi-btn-short { display: none; }
.qi-btn-long  { display: inline; }

/* PC 기본: 모바일 드롭다운/모바일 행추가 버튼 숨김 (칩 버튼 사용) */
.qi-select-mobile { display: none !important; }
.qi-add-mobile { display: none !important; }

/* 성적 입력 패널 액션 버튼 - 4개 크기 완전 통일 */
.btn-grade-action {
  height: 36px;
  padding: 0 18px;
  color: var(--white);
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s;
}
.btn-grade-action:hover { filter: brightness(0.88); }
/* 기존 클래스 하위 호환 유지 (다른 곳에서 사용 중인 경우 대비) */
.btn-save-grades {
  margin-top: 12px;
  height: 36px;
  padding: 0 24px;
  background: var(--green);
  color: var(--white);
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
}
.btn-save-grades:hover { background: #15803d; }
.btn-calc-nesin {
  margin-top: 12px;
  margin-left: 8px;
  height: 36px;
  padding: 0 24px;
  background: var(--amber);
  color: var(--white);
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
}
.btn-calc-nesin:hover { background: #b45309; }

/* 페이징 */
.pagination {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.page-btn {
  height: 28px;
  min-width: 28px;
  padding: 0 8px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  background: var(--white);
  color: var(--gray-700);
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
  transition: all .15s;
}
.page-btn:hover { background: var(--blue-pale); border-color: var(--blue); color: var(--blue); }
.page-btn.active { background: var(--blue); border-color: var(--blue); color: var(--white); font-weight: 700; }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* 공통 유틸 */
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.text-blue { color: var(--blue); }
.text-gray { color: var(--gray-500); }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.hidden { display: none !important; }
.flex { display: flex; }
.gap-8 { gap: 8px; }
.items-center { align-items: center; }

/* 스피너 */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(155,188,245,.28);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 공지사항 / 첨부자료 */
/* ── 공지사항 게시판 ─────────────────────────────────────── */
.user-notice-panel {
  margin-bottom: 14px;
}
.notice-board-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.notice-board-header h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-700);
  margin: 0;
}
.notice-hidden-badge {
  font-size: 11px;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 2px 8px;
}
/* 게시판 래퍼 — 공지사항 탭 전용, 스크롤 제한 없음 */
.notice-board-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(47,42,74,.06);
}
.notice-board-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.notice-board-table thead th {
  background: #f8fafc;
  color: #64748b;
  font-weight: 600;
  font-size: 11px;
  padding: 6px 8px;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
}
.notice-board-row {
  border-bottom: 1px solid #f1f5f9;
  transition: background .12s;
}
.notice-board-row:last-child { border-bottom: none; }
.notice-board-row:hover { background: #f8fafc; }
.notice-board-row.notice-dismissed { opacity: 0.45; }
.notice-board-row td {
  padding: 8px 8px;
  vertical-align: middle;
}
.nb-num {
  color: #94a3b8;
  font-size: 11px;
  text-align: center;
  min-width: 28px;
}
.nb-badge-cell { text-align: center; }
.nb-priority {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
}
.nb-priority.urgent   { background: #fee2e2; color: #dc2626; }
.nb-priority.important{ background: #fef3c7; color: #d97706; }
.nb-priority.normal   { background: #eff6ff; color: #2563eb; }
.nb-title-cell { width: 100%; }
.nb-title-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: #1e293b;
  cursor: pointer;
  text-align: left;
  font-weight: 500;
  line-height: 1.4;
}
.nb-title-btn:hover { color: var(--blue); text-decoration: underline; }
.nb-attach-icon { margin-left: 4px; font-size: 11px; }
.nb-dismiss-cell { text-align: center; }
.nb-dismiss-btn, .nb-restore-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
}
.nb-dismiss-btn { color: #94a3b8; }
.nb-dismiss-btn:hover { background: #fee2e2; color: #dc2626; }
.nb-restore-btn { color: #94a3b8; font-size: 13px; }
.nb-restore-btn:hover { background: #eff6ff; color: #2563eb; }

/* 공지 페이지네이션 */
.nb-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 0 4px;
}
.nb-page-btn {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.nb-page-btn:hover:not(:disabled) {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.nb-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.nb-page-info {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
  min-width: 50px;
  text-align: center;
}

/* 공지 상세 모달 */
.notice-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.notice-modal-overlay.hidden { display: none; }
.notice-modal-box {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
  overflow: hidden;
}
.notice-modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}
.notice-modal-header strong {
  flex: 1;
  font-size: 15px;
  color: #1e293b;
  line-height: 1.4;
}
#notice-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
#notice-modal-close:hover { color: #475569; }
.notice-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  font-size: 13px;
  color: #374151;
  line-height: 1.7;
  word-break: break-word;
}
.notice-modal-footer {
  padding: 10px 16px 14px;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
}
.nb-dismiss-btn-lg {
  width: 100%;
  padding: 9px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.nb-dismiss-btn-lg:hover { background: #fee2e2; color: #dc2626; border-color: #fecaca; }
.notice-attachments,
.track-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.notice-attachments a,
.track-attachment-link {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 7px 10px;
  background: #eff6ff;
  color: #1d4ed8;
  text-decoration: none;
  font-size: 12px;
}
.track-attachment-link span {
  color: #64748b;
  font-size: 11px;
}

/* 반응형 */
@media (max-width: 900px) {
  :root { --sidebar-w: 80px; }
  .sidebar-btn { font-size: 10px; padding: 10px 4px; }
  .header-username { font-size: 15px; }
  .achievement-box { width: 180px; }
}

/* R2 자료실 / 인증 다운로드 */
.inline-file-link {
  border: 0;
  background: transparent;
  color: #1d4ed8;
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
  padding: 0;
  margin-right: 10px;
}
.track-attachment-link {
  text-align: left;
}
.library-panel {
  padding: 18px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.library-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  background: #f8fafc;
}
.library-card strong { color: #0f172a; }
.library-card p { margin: 0; color: #475569; font-size: 12px; line-height: 1.5; }
.library-card span { color: #64748b; font-size: 11px; }

/* ───────────────────────────────────────────────
   간편 성적 입력 패널 (수시검색)
─────────────────────────────────────────────── */
#quick-grade-panel {
  flex-shrink: 0;
}
.quick-grade-box {
  margin: 8px 0 4px;
  padding: 10px 14px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #f8fbff;
}
.quick-grade-box.active {
  border-color: #93c5fd;
  background: #eff6ff;
  box-shadow: 0 1px 4px rgba(59,130,246,.12);
}
/* 접힌 상태: 패딩 살짝 줄여 compact하게 */
.quick-grade-box.qg-collapsed {
  padding-bottom: 10px;
}
.quick-grade-box .qg-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
/* 1행: 체크박스+제목 / 접기버튼 */
.qg-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #1e3a8a;
  flex: 1;          /* 남은 너비 차지해서 접기버튼을 오른쪽 끝으로 */
}
.qg-toggle input { width: 16px; height: 16px; cursor: pointer; }
/* 2행: 설명 텍스트 (항상 전체 너비) */
.qg-desc {
  font-size: 12px;
  color: #64748b;
  flex-basis: 100%;   /* 항상 새 줄 */
  order: 3;           /* 접기버튼 다음에 배치 */
  margin-top: 2px;
}
.qg-desc b { color: #2563eb; }
.qg-desc-sub { color: #7c3aed; font-size: 11px; display: inline-block; margin-top: 2px; }

/* 접기/열기 버튼 */
.qg-collapse-btn {
  flex-shrink: 0;
  order: 2;           /* qg-toggle(order:기본1) 다음, qg-desc(order:3) 앞 */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #fff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.qg-collapse-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}
.qg-collapse-icon { pointer-events: none; }

/* 바디 접힘 상태 */
.qg-body {
  margin-top: 10px;
  overflow: hidden;
  transition: max-height .25s ease, opacity .2s ease, margin-top .25s ease;
  max-height: 600px;
  opacity: 1;
}
.qg-body.qg-body-hidden {
  max-height: 0 !important;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}
.qg-body.qg-disabled { opacity: .55; }
.qg-body.qg-body-hidden.qg-disabled { opacity: 0; }

.qg-curriculum {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.qg-cur-label { font-size: 12px; font-weight: 600; color: #334155; }
.qg-cur-btns { display: inline-flex; gap: 6px; }
.qg-cur-btn {
  padding: 5px 12px;
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 999px;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
  transition: all .15s;
}
.qg-cur-btn:hover:not(:disabled) { border-color: #60a5fa; }
.qg-cur-btn.on {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  font-weight: 600;
}
.qg-cur-btn:disabled { cursor: not-allowed; }

.qg-fields {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.qg-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qg-label { font-size: 12px; font-weight: 600; color: #334155; }
.qg-input-row { display: flex; align-items: center; gap: 6px; }
.qg-input {
  width: 88px;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
}
.qg-select { cursor: pointer; background: #fff; }
.qg-select:disabled { cursor: not-allowed; }
.qg-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.qg-input:disabled { background: #f1f5f9; }
.qg-conv {
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
  background: #fef3c7;
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
}
/* 평균 배지 */
.qg-avg-row {
  margin: 8px 0 2px 0;
  min-height: 24px;
}
.qg-avg-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: #1e40af;
}
.qg-avg-badge strong { font-size: 13px; color: #1d4ed8; }
.qg-avg-conv {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fef3c7;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  color: #b45309;
}
.qg-avg-conv strong { color: #92400e; }
.qg-foot {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.qg-note { font-size: 11px; color: #64748b; }
.qg-note b { color: #b45309; }
.qg-applied {
  font-size: 12px;
  font-weight: 700;
  color: #15803d;
  background: #dcfce7;
  padding: 3px 10px;
  border-radius: 999px;
}

/* ── 내등급 출처 배지 ─────────────────────────────────────── */
.grade-src-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 3px;
  vertical-align: middle;
  line-height: 1.4;
}
.grade-src-quick {
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde68a;
}
.grade-src-db {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}
.grade-src-note {
  color: #94a3b8;
  font-size: 10px;
  display: block;
  margin-top: 1px;
}
/* 헤더 출처 배지 */
.th-src-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.4;
}
.th-src-quick { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.th-src-db    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.th-src-none  { background: #f1f5f9; color: #94a3b8; border: 1px solid #e2e8f0; }
/* 합격컷 연도 배지 (내신50cut/70cut 헤더) */
.th-year-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #7dd3fc;
  line-height: 1.4;
}
/* 내등급 값 색상 */
.my-grade-val { font-weight: 700; }
.td-my-grade-cell { white-space: nowrap; }

/* 성적파일관리 모달 버튼 행 내 margin-top 제거 */
.grade-file-tab-content .btn-grade-action {
  margin-top: 0;
}

/* ─── 사이드바 토글 버튼 (모바일 전용) ─── */
.sidebar-toggle-btn {
  display: none; /* 데스크톱에서는 숨김 */
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 22px;
  cursor: pointer;
  padding: 6px 8px;
  line-height: 1;
  margin-top: 4px;
  border-radius: 4px;
  transition: background .15s;
}
.sidebar-toggle-btn:hover { background: rgba(255,255,255,.15); }

@media (max-width: 768px) {
  /* 토글 버튼 표시 */
  .sidebar-toggle-btn { display: block; }

  /* 모바일: 공지사항 탭 아래 버튼 표시, 데스크톱 하단 버튼 숨김 */
  .sidebar-mobile-actions { display: block; }
  .sidebar-desktop-actions { display: none; }

  /* 사이드바 기본값: 숨김 (오버레이 방식) */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 140px !important;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 16px rgba(0,0,0,.25);
  }

  /* sidebar-open 클래스가 붙으면 슬라이드인 */
  .sidebar.sidebar-open {
    transform: translateX(0);
  }

  /* 사이드바 열렸을 때 배경 오버레이 */
  .app-body.sidebar-expanded::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 299;
  }

  /* 사이드바 열려도 컨텐츠 영역은 밀리지 않음 */
  .app-body {
    position: relative;
  }

  /* header-left 크기 조정 */
  .header-left {
    width: 56px !important;
    min-width: 56px;
  }
  .header-logo span { display: none; }
  .header-logo { font-size: 13px; }

  /* 모바일 상단 헤더 간소화: 로그인 안내 문구, 가운데 성적 요약, 진로선택 과목수 숨김 */
  .header-user-info,
  .user-greeting,
  .achievement-box,
  .header-univ-logo {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────
   ✨ AI 추천대학 모달 스타일
   ───────────────────────────────────────────── */

/* 모달 wrapper — 기존 .track-detail-modal 상속 + 너비 확장 */
.recommend-modal {
  width: min(900px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

/* 요약 바 */
.rec-summary-bar {
  padding: 8px 16px;
  background: #f0f4ff;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  font-size: 12.5px;
  color: #3730a3;
  margin-bottom: 14px;
}
.rec-summary-bar strong { color: #1e1b4b; }

/* 티어 섹션 */
.rec-tier-section {
  margin-bottom: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

/* 티어 헤더 */
.rec-tier-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
}
.rec-tier-label { font-size: 14px; }
.rec-tier-count {
  background: rgba(0,0,0,.12);
  border-radius: 99px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
}
.rec-tier-desc {
  font-size: 11px;
  font-weight: 400;
  opacity: .75;
  margin-left: auto;
}

/* 티어 색상 */
.tier-stable    { background: #dcfce7; color: #14532d; border-bottom: 1px solid #bbf7d0; }
.tier-moderate  { background: #fef9c3; color: #713f12; border-bottom: 1px solid #fde68a; }
.tier-challenge { background: #ffedd5; color: #7c2d12; border-bottom: 1px solid #fed7aa; }
.tier-reach     { background: #fee2e2; color: #7f1d1d; border-bottom: 1px solid #fecaca; }
.tier-unranked  { background: #f1f5f9; color: #475569; border-bottom: 1px solid #e2e8f0; }

/* 추천 테이블 */
.rec-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}
.rec-table thead th {
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.rec-table tbody tr { border-bottom: 1px solid #f1f5f9; }
.rec-table tbody tr:last-child { border-bottom: none; }
.rec-table tbody tr:hover { background: #f8fafc; }
.rec-table td {
  padding: 6px 10px;
  vertical-align: middle;
  color: #334155;
}

/* 컬럼별 */
.rec-univ  { font-weight: 700; color: #1e40af; white-space: nowrap; }
.rec-dept  { max-width: 160px; }
.rec-field { white-space: nowrap; color: #64748b; font-size: 11px; }
.rec-track { color: #64748b; font-size: 11px; white-space: nowrap; }
.rec-score { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-my    { font-weight: 600; color: #0f172a; }
.rec-cut   { color: #64748b; }
.rec-diff  { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-rate  { text-align: right; color: #64748b; white-space: nowrap; }

/* 점수 차이 색상 */
.score-diff-pos  { color: #15803d; }   /* 안정 — 녹색 */
.score-diff-near { color: #b45309; }   /* 근접 — 주황 */
.score-diff-neg  { color: #b91c1c; }   /* 부족 — 빨강 */

/* 스크롤 힌트 — PC에서는 기본 숨김 */
.rec-scroll-hint { display: none; }

/* 모바일 대응 — 가로 스크롤로 전체 컬럼 표시 */
@media (max-width: 768px) {
  .recommend-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 92vh;
    border-radius: 12px 12px 0 0;
    /* 화면 하단에서 올라오는 sheet 형태 */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
  }
  /* overlay 정렬을 하단으로 변경 */
  #recommend-modal.detail-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .rec-tier-desc { display: none; }
  /* 티어 섹션: 테이블 가로 스크롤 래퍼 */
  .rec-tier-section {
    overflow: hidden;
  }
  /* 테이블을 감싸는 스크롤 영역 */
  .rec-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 스크롤 힌트 바 */
  .rec-scroll-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 5px;
    font-size: 11px;
    color: #64748b;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
  }
  .rec-scroll-hint::before {
    content: '◀';
    font-size: 9px;
    animation: scrollHintPing 1.4s ease-in-out infinite;
  }
  .rec-scroll-hint::after {
    content: '▶';
    font-size: 9px;
    animation: scrollHintPing 1.4s ease-in-out infinite reverse;
  }
  @keyframes scrollHintPing {
    0%, 100% { opacity: .3; transform: translateX(0); }
    50%       { opacity: 1;  transform: translateX(3px); }
  }
  /* 모바일에서 모든 컬럼 표시 (숨김 해제) */
  .rec-field, .rec-track, .rec-rate { display: table-cell; }
  .rec-table thead th,
  .rec-table tbody td { display: table-cell; }
  /* 테이블 최소 너비: 전체 컬럼이 잘리지 않도록 */
  .rec-table {
    min-width: 520px;
    font-size: 11.5px;
  }
  .rec-table thead th,
  .rec-table td {
    padding: 5px 8px;
    white-space: nowrap;
  }
  .rec-dept { max-width: none; }
}

/* ────────────────────────────────────────────
   검색 제한 배너 (일반회원 안내)
──────────────────────────────────────────── */
.search-limit-banner {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.5;
  animation: bannerFadeIn 0.25s ease;
}
.search-limit-banner strong {
  font-weight: 700;
}
.search-limit-banner .banner-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.search-limit-banner .banner-text {
  flex: 1;
}
/* 경고(초과) 스타일 — JS에서 인라인으로도 적용하지만 클래스로도 제공 */
.search-limit-banner.exceeded {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}
/* 안내(사용중) 스타일 */
.search-limit-banner.warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
@keyframes bannerFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════
   사용자 정보 모달
═══════════════════════════════════════ */
.user-info-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-info-modal-overlay.hidden { display: none; }
.user-info-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  width: 340px;
  max-width: 94vw;
  overflow: hidden;
}
.user-info-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 14px;
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
}
.user-info-modal-close {
  background: none;
  border: none;
  font-size: 18px;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background .15s;
}
.user-info-modal-close:hover { background: #f1f5f9; color: #475569; }
.user-info-modal-body {
  padding: 14px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.uim-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.uim-label {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.uim-value {
  font-size: 14px;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.uim-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.uim-badge.naver   { background: #03C75A; color: #fff; }
.uim-badge.email   { background: #e2e8f0; color: #475569; }
.uim-badge.free    { background: #f1f5f9; color: #64748b; }
.uim-badge.basic   { background: #dbeafe; color: #1d4ed8; }
.uim-badge.premium { background: #fef9c3; color: #a16207; }
.uim-badge.admin   { background: #fee2e2; color: #b91c1c; }

.uim-academic-grade-row {
  padding: 12px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #f8fbff;
}
.uim-academic-grade-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.uim-academic-grade-select {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #1e293b;
  font: inherit;
}
.uim-academic-grade-save {
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.uim-academic-grade-save:disabled { opacity: .55; cursor: default; }
.uim-academic-grade-status {
  margin: 2px 0 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.5;
}
.uim-academic-grade-status[data-type="success"] { color: #15803d; }
.uim-academic-grade-status[data-type="error"] { color: #dc2626; }

.payment-phone-dialog { width: min(410px, 94vw); }
.payment-phone-form {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.payment-phone-icon { text-align: center; font-size: 42px; line-height: 1; }
.payment-phone-description {
  margin: 0 0 6px;
  color: #475569;
  font-size: 14px;
  line-height: 1.65;
  text-align: center;
}
.payment-phone-form label { color: #334155; font-size: 13px; font-weight: 700; }
.payment-phone-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 13px;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  color: #0f172a;
  background: #fff;
  font-size: 16px;
  outline: none;
}
.payment-phone-form input:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.payment-phone-status { min-height: 18px; margin: 0; color: #64748b; font-size: 12px; }
.payment-phone-status[data-type="error"] { color: #dc2626; }
.payment-phone-status[data-type="success"] { color: #15803d; }
.payment-phone-help {
  margin: 0;
  padding: 10px 11px;
  border-radius: 9px;
  background: #f5f3ff;
  color: #6d28d9;
  font-size: 12px;
  line-height: 1.55;
}
.payment-phone-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 9px; margin-top: 5px; }
.payment-phone-actions button { padding: 11px 12px; border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer; }
.payment-phone-cancel { border: 1px solid #cbd5e1; background: #fff; color: #475569; }
.payment-phone-submit { border: 1px solid #7c3aed; background: #7c3aed; color: #fff; }
.payment-phone-submit:disabled { opacity: .6; cursor: default; }

.academic-grade-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, .68);
  backdrop-filter: blur(5px);
}
.academic-grade-modal {
  width: min(430px, 100%);
  padding: 30px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
  text-align: center;
}
.academic-grade-modal-icon { font-size: 42px; line-height: 1; margin-bottom: 12px; }
.academic-grade-modal h2 { margin: 0; color: #172554; font-size: 22px; }
.academic-grade-modal-description {
  margin: 10px 0 20px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}
.academic-grade-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.academic-grade-option {
  min-height: 46px;
  padding: 10px 8px;
  border: 1.5px solid #dbe3f0;
  border-radius: 11px;
  background: #fff;
  color: #334155;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.academic-grade-option:last-child { grid-column: 1 / -1; }
.academic-grade-option:hover { border-color: #93c5fd; background: #eff6ff; }
.academic-grade-option.selected {
  border-color: #2563eb;
  background: #dbeafe;
  color: #1d4ed8;
  transform: translateY(-1px);
}
.academic-grade-modal-note {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  line-height: 1.5;
}
.academic-grade-modal-status { min-height: 18px; margin: 8px 0 0; color: #dc2626; font-size: 12px; }
.academic-grade-modal-save {
  width: 100%;
  margin-top: 4px;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.academic-grade-modal-save:disabled { background: #cbd5e1; cursor: default; }

@media (max-width: 480px) {
  .academic-grade-modal { padding: 24px 18px; }
  .academic-grade-option-grid { grid-template-columns: 1fr; }
  .academic-grade-option:last-child { grid-column: auto; }
}

.pdf-import-block .pdf-import-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}
.pdf-import-block .pdf-import-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}
.pdf-import-block input[type="file"] {
  min-height: 34px;
  padding: 5px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
}
.pdf-import-block .pdf-ocr-check {
  flex-direction: row;
  align-items: center;
  min-height: 34px;
}

/* ─── 모바일 세로 스크롤 보강 ─── */
.mobile-scroll-up-btn,
.mobile-scroll-down-btn {
  display: none;
}

@media (max-width: 768px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #app-root,
  .app-layout {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .app-header {
    position: sticky;
    top: 0;
    z-index: 220;
  }

  .app-body,
  .app-content,
  .search-panel {
    height: auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100vw;
    overflow: visible;
  }

  .app-content {
    display: block;
    padding-bottom: 88px;
    /* 자식 테이블이 가로로 튀어나오지 못하도록 강제 봉쇄 */
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .search-panel {
    display: block;
    /* 테이블 래퍼가 뷰포트 밖으로 나가지 못하도록 봉쇄 */
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .search-bar,
  .quick-grade-panel,
  .result-info-bar {
    flex-shrink: 0;
  }

  /* search-bar: grid 대신 flex column으로 변경 */
  .search-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    padding: 10px;
    overflow: visible;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* grid-area 해제 */
  .search-bar-title,
  .search-input-wrap,
  .search-checkbox-wrap,
  .search-filters,
  .search-actions {
    grid-area: unset !important;
  }

  .search-bar-title {
    display: block;
    min-width: 0;
    white-space: normal;
    line-height: 1.25;
  }

  .search-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    width: 100%;
  }

  .search-input-wrap label {
    white-space: normal;
    line-height: 1.2;
  }

  .search-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .search-checkbox-wrap {
    align-self: flex-start;
  }

  /* 1번째 줄: 조건1/2/3 가로 배치 */
  .search-filters {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100%;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .filter-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    gap: 3px;
  }

  .filter-label {
    font-size: 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1;
    color: #f7fbff;
  }

  .filter-select {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 11px !important;
    padding: 0 2px !important;
    height: 28px !important;
  }

  .filter-group #sq-detail {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 11px !important;
    height: 28px !important;
  }

  /* 2번째 줄: 발표등급 */
  .search-filters-grade {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100%;
    gap: 6px;
  }

  .grade-range-filter {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px;
    flex: none !important;
    width: auto !important;
  }

  .grade-range-input {
    width: 60px !important;
    min-width: 0 !important;
    font-size: 12px !important;
    padding: 0 4px !important;
    height: 28px !important;
    text-align: center;
  }

  .grade-range-sep {
    flex-shrink: 0;
    font-size: 12px;
    color: #fff;
  }

  .search-region-chip-row {
    width: 100%;
    max-width: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 1px 0 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .search-region-chip {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 5px 10px;
    font-size: 11px;
  }

  .search-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    width: 100%;
  }

  .btn-search,
  .btn-reset,
  .btn-recommend {
    width: 100%;
  }

  .btn-recommend {
    grid-column: 1 / -1;
  }

  .result-info-bar {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .mobile-table-scroll-hint {
    display: block;
    padding: 6px 12px;
    background: #eff6ff;
    color: #1d4ed8;
    border-top: 1px solid #dbeafe;
    border-bottom: 1px solid #dbeafe;
    font-size: 11px;
    font-weight: 700;
  }

  .result-table-wrap {
    max-height: min(62dvh, 560px);
    min-height: 320px;
    /* 가로 스크롤은 내부에서만, 절대로 뷰포트 밖으로 나가지 않도록 강제 */
    overflow-x: auto !important;
    overflow-y: auto !important;
    /* 래퍼 자체 너비를 뷰포트 안에 강제 고정 */
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    /* 부모로부터 width를 100% 이상 받지 않도록 */
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    border-bottom: 1px solid var(--gray-200);
    /* 컨테이닝 블록 명시 — 자식 table이 이 박스 안에서만 스크롤 */
    position: relative;
  }

  .result-table {
    /* 테이블은 내용만큼 늘어나되, 래퍼 안에서만 스크롤 */
    width: max-content !important;
    min-width: 1180px;
    /* 마지막 컬럼 오른쪽 여백: 플로팅 버튼(왼쪽 배치)과 무관하게 우측 여유 확보 */
    margin-right: 0;
  }

  /* 마지막 컬럼 오른쪽에 강제 여백 — 가로 스크롤 끝에서 내용이 잘리지 않도록 */
  .result-table thead tr th:last-child,
  .result-table tbody tr td:last-child {
    padding-right: 24px !important;
  }



  .result-table thead {
    top: 0;
  }

  .result-table td.td-univ,
  .result-table td.td-dept {
    min-width: 150px;
    white-space: nowrap;
  }

  /* 모바일 페이지네이션: 5페이지 이후 버튼 증가가 화면 전체 폭을 밀어
     상단 검색창이 오른쪽에서 잘리는 문제를 막는다. */
  .pagination {
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 4px;
    padding: 7px 10px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .pagination .page-btn,
  .pagination .page-ellipsis,
  .pagination .page-total-label {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .pagination .page-total-label {
    margin-left: 4px;
    color: #64748b;
    font-size: 10.5px;
  }
  .pagination .page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
  }

  .mobile-scroll-up-btn,
  .mobile-scroll-down-btn {
    position: fixed;
    left: 10px;
    z-index: 250;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 38px;
    padding: 0 10px;
    border: none;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    font-family: var(--font);
    cursor: pointer;
    opacity: 0.82;
  }

  .mobile-scroll-up-btn {
    bottom: calc(66px + env(safe-area-inset-bottom));
    background: #7c3aed;
    box-shadow: 0 4px 14px rgba(124, 58, 237, .32);
  }

  .mobile-scroll-down-btn {
    bottom: calc(16px + env(safe-area-inset-bottom));
    background: #2563eb;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .34);
  }
}

/* ─── 모바일 액션 바 (결제하기/문의하기/내정보/로그아웃) ─── */
.mobile-actions-bar {
  display: none; /* 데스크톱에서는 숨김 */
}

@media (max-width: 768px) {
  .mobile-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 10px 8px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
  }

  .mobile-action-btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 120px;
    padding: 9px 6px;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    text-align: center;
    transition: filter .15s;
  }

  .mobile-action-btn:hover:not(:disabled) {
    filter: brightness(1.1);
  }

  .mobile-action-btn:disabled {
    cursor: default;
    opacity: .95;
  }
}

/* ═══════════════════════════════════════════════════════════════
   모바일 레이아웃 개편 (max-width: 768px)
   ─ 수시검색 조건 2줄 / 간편성적 열 / 빠른입력 qi-row / 성적테이블
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── 1. 수시검색: 조건1+2 첫 줄 / 조건3+4 둘째 줄 / 조건5 셋째 줄 ─── */
  .search-filters {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 6px 4px !important;
  }
  /* 조건1, 조건2 → 첫 번째 줄 (각 50%) */
  .search-filters .filter-group:nth-child(1),
  .search-filters .filter-group:nth-child(2) {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
  }
  /* 조건3, 조건4(grade-range-filter) → 두 번째 줄 (각 50%) */
  .search-filters .filter-group:nth-child(3),
  .search-filters .filter-group.grade-range-filter {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
  }
  /* 조건4 내신등급 입력 필드 크기 조정 */
  .search-filters .grade-range-filter .grade-range-input {
    width: 44px !important;
    font-size: 13px !important;
  }
  /* 조건5 합격여부 → 세 번째 줄 (100%) */
  .search-filters .filter-group:nth-child(5) {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .search-filters .filter-group:nth-child(5) .filter-select {
    width: 100% !important;
  }
  .search-filters .filter-label {
    font-size: 11px !important;
    white-space: nowrap;
  }

  /* ─── 2. 간편성적 입력: 2015=2열 / 2022=2열 (모바일 모두 2열) ─── */
  /* 교육과정 선택 행: 라벨+버튼 한 줄 */
  .qg-curriculum {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    margin-bottom: 8px !important;
  }
  .qg-cur-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    background: #eff6ff;
    border-radius: 4px;
    padding: 3px 4px;
    color: #1e3a8a !important;
    flex-shrink: 0;
  }
  .qg-cur-btns {
    display: flex !important;
    gap: 4px !important;
    flex: 1;
    flex-wrap: nowrap;
  }
  .qg-cur-btn {
    flex: 1 1 0 !important;
    font-size: 10px !important;
    padding: 4px 4px !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* JS에서 qg-fields에 qg-fields-2015 / qg-fields-2022 클래스 부여 필요 */
  .qg-fields-2015 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .qg-fields-2022 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* 각 필드 라벨+입력 세트 정렬 */
  .qg-fields-2015 .qg-field,
  .qg-fields-2022 .qg-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    font-size: 13px;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
  }
  /* 라벨 */
  .qg-fields-2015 .qg-label,
  .qg-fields-2022 .qg-label {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 2px;
    width: 100%;
  }
  /* 입력행 */
  .qg-fields-2015 .qg-input-row,
  .qg-fields-2022 .qg-input-row {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    flex-wrap: nowrap;   /* 2022 환산값도 한 줄 유지 */
  }
  /* select 소형화 */
  .qg-fields-2015 .qg-select,
  .qg-fields-2022 .qg-select {
    flex: 1 1 0;
    min-width: 0;
    font-size: 12px !important;
    height: 28px !important;
    padding: 0 2px !important;
  }
  /* 직접입력 input 소형화 */
  .qg-fields-2015 .qg-text,
  .qg-fields-2022 .qg-text {
    width: 38px !important;
    min-width: 38px !important;
    flex-shrink: 0;
    font-size: 12px !important;
    height: 28px !important;
  }
  /* 2022 환산값: 한 줄 유지 + 소형 */
  .qg-fields-2022 .qg-conv {
    font-size: 10px;
    color: #7c3aed;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ─── 3. 빠른입력 qi-row 모바일 전용: 드롭다운(select) 방식 ─── */

  /* ★ 모바일: 칩 버튼 그룹 숨기고 드롭다운 표시 ★ */
  .qi-chips-pc { display: none !important; }
  .qi-select-mobile {
    display: block !important;
    flex: 1 1 0 !important;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    padding: 7px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #1e293b;
    appearance: auto;
  }
  /* 학년+학기는 한 줄에 두 드롭다운 → 각각 절반 */
  .qi-row-yearsem .qi-select-mobile { flex: 1 1 0 !important; }

  /* 모바일 행추가 버튼: 전체 너비 강조 버튼 */
  .qi-add-mobile {
    display: block !important;
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    background: #0f766e;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  .qi-add-mobile:active { background: #0c5e57; }

  .quick-input-section {
    padding: 8px !important;
    box-sizing: border-box;
    overflow-x: hidden;      /* ★ 카드 밖으로 삐져나옴 방지 */
    max-width: 100%;
  }
  .quick-input-section h3 {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }

  /* ─ 공통 행: flex nowrap, 라벨 고정 40px ─ */
  .qi-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    margin-bottom: 4px;
    width: 100%;
    box-sizing: border-box;
  }

  /* ★ 라벨 40px 고정 — 모든 줄 버튼 시작점 정렬 ★ */
  .qi-label,
  .qi-label-sep {
    flex: 0 0 40px;
    width: 40px;
    font-size: 9px;
    font-weight: 700;
    color: #1e3a8a;
    background: #eff6ff;
    border-radius: 4px;
    padding: 3px 2px;
    text-align: center;
    line-height: 1.3;
    white-space: normal;   /* 줄바꿈 허용 */
    word-break: keep-all;
  }
  .qi-label-sep { margin-left: 2px; }
  /* 모바일: 레이블 줄바꿈 마커(qi-br)를 실제 줄바꿈으로 */
  .qi-br { display: block !important; }
  .qi-br::before { content: "" !important; }

  /* ─ 학년+학기+이수구분: 모바일은 한 줄에 3개 드롭다운 균등 배치 (이수구분 칸 축소) ─ */
  .qi-row-yearsem {
    flex-wrap: nowrap;
    gap: 3px;
  }
  /* 모바일에서는 줄바꿈 요소 숨김 (한 줄 유지) */
  .qi-rowbreak-mobile {
    display: none !important;
  }

  /* ─ 공통 chips 컨테이너 ─ */
  .qi-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    flex: 1;
    min-width: 0;
    /* overflow: hidden 제거 — 버튼 잘림 방지 */
  }

  /* ─ 공통 버튼 소형화 ─ */
  .qi-chips button,
  .qi-chips .quick-chip {
    font-size: 10px !important;
    padding: 4px 5px !important;
    height: auto !important;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ★ 모바일: qi-btn-short 보이고 qi-btn-long 숨기기 ★ */
  .qi-btn-long  { display: none !important; }
  .qi-btn-short { display: inline !important; }

  /* ── 줄1 교육과정: 2버튼 균등 (크기 축소) ── */
  .qi-row-curriculum .qi-chips {
    flex-wrap: nowrap;
    flex: 1;
  }
  .qi-row-curriculum .qi-chips button {
    flex: 1 1 0 !important;
    min-width: 0;
    text-align: center;
    font-size: 9px !important;
    padding: 4px 2px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── 줄2 학년+학기+이수구분: 3개 드롭다운 한 줄 균등 (레이블 축소) ── */
  .qi-row-yearsem { gap: 3px; align-items: center; }
  /* 레이블 3개 모두 좁게 (28px) → 320px에서도 select 3개 균등 확보 */
  .qi-row-yearsem .qi-label,
  .qi-row-yearsem .qi-label-sep,
  .qi-row-yearsem .qi-label-ctype {
    flex: 0 0 26px;
    width: 26px;
    font-size: 8px;
    padding: 2px 1px;
    margin-left: 0;
    line-height: 1.2;
  }
  /* 학년/학기/이수구분 드롭다운: 균등 분할 */
  .qi-row-yearsem .qi-select-mobile {
    flex: 1 1 0 !important;
    min-width: 0;
    font-size: 11px;
    padding: 6px 2px;
  }

  /* ── 줄4 교과군: 3열 균등 그리드 (2015→4줄, 2022→3줄, 정렬 깔끔) ── */
  .qi-row-sgroup { align-items: center; }
  /* ★ 모바일에서 교과군은 드롭다운 사용 → 칩 그리드(qi-chips-pc) 완전 숨김 */
  .qi-chips-sgroup.qi-chips-pc {
    display: none !important;
  }

  /* ─── 4. 성적입력 테이블: 가로 스크롤 + 셀 확대 ─── */
  .grade-input-panel {
    overflow-x: hidden !important;
    overflow-y: visible;
  }
  .grade-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overflow-y: visible;
    width: 100%;
  }
  .grade-input-table {
    min-width: 820px !important;
    width: max-content;
    table-layout: auto;
  }
  /* 빈 테이블도 래퍼가 min-width를 확보하도록 */
  .grade-table-wrapper {
    min-width: 100%;
  }
  .grade-input-table th {
    padding: 8px 6px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
  .grade-input-table td {
    padding: 7px 5px !important;
    font-size: 12px !important;
  }
  .grade-input-table select {
    height: 32px !important;
    font-size: 12px !important;
    padding: 0 2px !important;
    min-width: 52px;
  }
  .grade-input-table input[type="text"],
  .grade-input-table input[type="number"] {
    height: 32px !important;
    font-size: 12px !important;
    padding: 0 4px !important;
  }
  /* 과목명 입력 칸은 조금 더 넓게 */
  .grade-input-table .subject-input {
    min-width: 90px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   로그인 페이지 방문자 카운트
───────────────────────────────────────────────────────────── */
/* (login-visitor-wrap, login-visitor, visitor-num, login-biz-footer, login-biz-row, login-biz-copy: 새 로그인 디자인 CSS로 상단 통합) */

/* ─────────────────────────────────────────────────────────────
   메인 앱 하단 사업자 정보 footer
───────────────────────────────────────────────────────────── */
.app-biz-footer {
  flex-shrink: 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 6px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.6;
  text-align: center;
}
.app-biz-sep {
  color: #cbd5e1;
}
/* app-layout 높이: footer 공간 확보 (PC 전용) */
@media (min-width: 769px) {
  .app-layout {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  /* app-body가 남은 공간 차지 (footer 제외) */
  .app-body {
    flex: 1;
    min-height: 0;
  }
}
/* 모바일: footer는 항상 콘텐츠 아래 자연스럽게 */
@media (max-width: 768px) {
  .app-biz-footer {
    position: static !important;
    width: 100%;
    margin-top: 8px;
  }
}

/* 모바일에서 footer 텍스트 더 작게 */
@media (max-width: 640px) {
  .app-biz-footer {
    font-size: 9px;
    padding: 4px 8px;
  }
}

/* ─────────────────────────────────────────────
   톡톡문의 고정 버튼 (사이드바/모바일 액션바)
───────────────────────────────────────────── */
/* 사이드바 내 톡톡문의 링크 버튼 — sidebar-bottom-btn과 동일 크기/여백 */
.sidebar-talk-btn {
  text-decoration: none;
  background: #03c75a;   /* 네이버 그린 */
}
.sidebar-talk-btn:hover { background: #02b350; }

/* 모바일 액션바 내 톡톡문의 링크 버튼 */
.mobile-talk-btn {
  text-decoration: none;
  background: #03c75a;   /* 네이버 그린 */
}
.mobile-talk-btn:hover { background: #02b350; }

/* ─────────────────────────────────────────────
   회원가입 약관 동의 체크박스
───────────────────────────────────────────── */
.reg-terms-wrap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: #f7f4ff;
  border: 1px solid #d8d2eb;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 2px;
}
.reg-terms-wrap input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: #6f83d9;
  cursor: pointer;
}
.reg-terms-text {
  font-size: 12.5px;
  color: #4e496d;
  line-height: 1.6;
  cursor: pointer;
}
.reg-terms-text a {
  color: #6f83d9;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.reg-terms-text a:hover { color: #2f2a4a; }
.reg-terms-required {
  color: #e78a9c;
  font-size: 11.5px;
  font-weight: 600;
}

/* ─────────────────────────────────────────────
   로그인 footer 약관 링크
───────────────────────────────────────────── */
.login-biz-policy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 0 4px;
  margin-bottom: 4px;
}
.login-biz-policy a {
  color: #6f83d9;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}
.login-biz-policy a:hover {
  color: #2f2a4a;
  text-decoration: underline;
}
.login-biz-sep {
  color: #d8d2eb;
  font-size: 12px;
}

/* ─────────────────────────────────────────────
   앱 footer 약관 링크
───────────────────────────────────────────── */
.app-biz-policy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.app-biz-policy-link {
  color: #9bbcf5;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}
.app-biz-policy-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* ─────────────────────────────────────────────
   개인정보처리방침 / 이용약관 전체화면 모달
───────────────────────────────────────────── */
.policy-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 16px;
  overflow-y: auto;
  animation: policyModalFadeIn 0.18s ease;
}
@keyframes policyModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.policy-modal-box {
  background: #fbfaff;
  border-radius: 16px;
  width: 100%;
  max-width: 860px;
  min-height: 200px;
  box-shadow: 0 8px 40px rgba(30,58,95,0.22);
  overflow: hidden;
  position: relative;
  animation: policyModalSlideUp 0.2s ease;
}
@keyframes policyModalSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.policy-modal-close {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 16px;
  background: #1e3a5f;
}
.policy-modal-close-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.policy-modal-close-btn:hover {
  background: rgba(255,255,255,0.28);
}

.policy-modal-body {
  padding: 0;
  font-family: 'Malgun Gothic', '맑은 고딕', -apple-system, sans-serif;
  color: #2f2a4a;
  line-height: 1.75;
}

/* 모달 내부 스타일 (privacy.html/terms.html 스타일 인라인) */
.policy-modal-body .pp-header {
  background: #1e3a5f;
  color: #fff;
  padding: 24px 24px 20px;
  text-align: center;
}
.policy-modal-body .pp-header .brand {
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.75;
  margin-bottom: 4px;
}
.policy-modal-body .pp-header h1 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}
.policy-modal-body .pp-header .meta {
  font-size: 11px;
  opacity: 0.7;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.policy-modal-body .pp-wrap {
  max-width: 100%;
  margin: 0;
  padding: 24px 20px 40px;
}
.policy-modal-body .pp-intro {
  background: #fff;
  border-left: 4px solid #6f83d9;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 13.5px;
  color: #4e496d;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.policy-modal-body .pp-section {
  background: #fff;
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}
.policy-modal-body .pp-section h2 {
  font-size: 14px;
  font-weight: 700;
  color: #1e3a5f;
  border-bottom: 2px solid #e9e6f6;
  padding-bottom: 8px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.policy-modal-body .pp-section h2 .num {
  background: #1e3a5f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.policy-modal-body .pp-section p,
.policy-modal-body .pp-section li {
  font-size: 13px;
  color: #4e496d;
  line-height: 1.8;
}
.policy-modal-body .pp-section ol,
.policy-modal-body .pp-section ul {
  padding-left: 18px;
  margin-top: 6px;
}
.policy-modal-body .pp-section li { margin-bottom: 3px; }
.policy-modal-body .pp-section li strong { color: #2f2a4a; }
.policy-modal-body .pp-section .sub-list {
  list-style: disc;
  padding-left: 18px;
  margin-top: 4px;
}
.policy-modal-body .pp-section .sub-list li {
  font-size: 12.5px;
  color: #4e496d;
}
.policy-modal-body .pp-table-wrap {
  overflow-x: auto;
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid #e9e6f6;
}
.policy-modal-body table.pp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 400px;
}
.policy-modal-body table.pp-table thead tr {
  background: #1e3a5f;
  color: #fff;
}
.policy-modal-body table.pp-table th {
  padding: 9px 12px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.policy-modal-body table.pp-table td {
  padding: 8px 12px;
  border-top: 1px solid #e9e6f6;
  color: #4e496d;
  vertical-align: top;
}
.policy-modal-body table.pp-table tbody tr:nth-child(even) {
  background: #fbfaff;
}
.policy-modal-body .pp-note {
  font-size: 12px;
  color: #92400e;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 9px 12px;
  margin-top: 10px;
  line-height: 1.6;
}
.policy-modal-body .pp-info {
  font-size: 12px;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 9px 12px;
  margin-top: 10px;
  line-height: 1.6;
}
.policy-modal-body .pp-warn {
  font-size: 12px;
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 9px 12px;
  margin-top: 10px;
  line-height: 1.6;
}
.policy-modal-body .pp-ul-plain {
  list-style: none;
  padding-left: 0 !important;
  margin-top: 8px;
}
.policy-modal-body .pp-ul-plain li {
  padding: 4px 0 4px 20px;
  position: relative;
}
.policy-modal-body .pp-ul-plain li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #6f83d9;
  font-weight: 700;
}
.policy-modal-body .pp-contact-box {
  background: #f7f4ff;
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 8px;
  font-size: 13px;
  color: #4e496d;
  line-height: 2;
}
.policy-modal-body .pp-contact-box strong { color: #2f2a4a; }
.policy-modal-body .pp-contact-box a { color: #6f83d9; text-decoration: none; }
.policy-modal-body .pp-contact-box a:hover { text-decoration: underline; }
.policy-modal-body .pp-ext-links {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.policy-modal-body .pp-ext-links a {
  font-size: 12px;
  color: #6f83d9;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  padding: 4px 10px;
  text-decoration: none;
}
.policy-modal-body .pp-ext-links a:hover { background: #e0e7ff; }
.policy-modal-body .pp-nav {
  background: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.policy-modal-body .pp-nav span {
  font-size: 11.5px;
  color: #716b8f;
}
.policy-modal-body .pp-nav a {
  font-size: 12px;
  color: #6f83d9;
  background: #f7f4ff;
  border: 1px solid #e9e6f6;
  border-radius: 6px;
  padding: 3px 9px;
  text-decoration: none;
  transition: background 0.12s;
}
.policy-modal-body .pp-nav a:hover { background: #e9e6f6; }
.policy-modal-body .pp-footer {
  text-align: center;
  font-size: 11.5px;
  color: #716b8f;
  padding: 18px 16px;
  border-top: 1px solid #e9e6f6;
  margin-top: 16px;
}
.policy-modal-body .pp-footer a {
  color: #6f83d9;
  text-decoration: none;
}

@media (max-width: 600px) {
  .policy-modal-overlay { padding: 0; align-items: flex-start; }
  .policy-modal-box { border-radius: 0; min-height: 100dvh; }
  .policy-modal-body .pp-section { padding: 16px 14px; }
  .policy-modal-body .pp-header h1 { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════════════
   진행 상태 모달 (저장 및 내신계산)
   ═══════════════════════════════════════════════════════════ */
.progress-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(30, 24, 60, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  animation: progressFadeIn 0.18s ease;
}
@keyframes progressFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.progress-modal-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(80, 60, 150, 0.22);
  padding: 36px 40px 32px;
  min-width: 340px;
  max-width: 420px;
  width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  animation: progressSlideUp 0.22s cubic-bezier(.22,1,.36,1);
}
@keyframes progressSlideUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.progress-modal-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6f83d9 0%, #9bbcf5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(111,131,217,0.25);
}
.progress-modal-icon.success {
  background: linear-gradient(135deg, #16a34a 0%, #7dcfb6 100%);
  box-shadow: 0 4px 16px rgba(22,163,74,0.25);
}
.progress-modal-icon.error {
  background: linear-gradient(135deg, #dc2626 0%, #e78a9c 100%);
  box-shadow: 0 4px 16px rgba(220,38,38,0.25);
}
.progress-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #2f2a4a;
  text-align: center;
  letter-spacing: -0.2px;
}
.progress-modal-subtitle {
  font-size: 13px;
  font-weight: 500;
  color: #5a54a0;
  text-align: center;
  margin-top: 4px;
  letter-spacing: -0.1px;
}
.progress-modal-message {
  font-size: 12px;
  color: #716b8f;
  text-align: center;
  line-height: 1.6;
  min-height: 20px;
}
/* 진행 바 트랙 */
.progress-modal-track {
  width: 100%;
  height: 10px;
  background: #e9e6f6;
  border-radius: 99px;
  overflow: hidden;
}
/* 진행 바 Fill */
.progress-modal-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #6f83d9 0%, #9bbcf5 100%);
  transition: width 0.45s cubic-bezier(.4,0,.2,1);
  width: 0%;
  position: relative;
}
.progress-modal-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45));
  border-radius: 99px;
  animation: progressShimmer 1.2s linear infinite;
}
@keyframes progressShimmer {
  from { opacity: 0; }
  50%  { opacity: 1; }
  to   { opacity: 0; }
}
.progress-modal-fill.done {
  background: linear-gradient(90deg, #16a34a 0%, #7dcfb6 100%);
}
.progress-modal-fill.done::after { display: none; }
.progress-modal-fill.error-fill {
  background: linear-gradient(90deg, #dc2626 0%, #e78a9c 100%);
}
.progress-modal-percent {
  font-size: 12px;
  color: #a69fc5;
  align-self: flex-end;
  margin-top: -10px;
}
/* 단계 목록 */
.progress-modal-steps {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.progress-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #a69fc5;
  transition: color 0.2s;
}
.progress-step-item.active  { color: #4e496d; font-weight: 600; }
.progress-step-item.done-step   { color: #16a34a; }
.progress-step-item.error-step  { color: #dc2626; }
.progress-step-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e9e6f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  transition: background 0.2s;
}
.progress-step-item.active  .progress-step-dot { background: #6f83d9; animation: stepPulse 1s ease-in-out infinite alternate; }
.progress-step-item.done-step .progress-step-dot { background: #16a34a; }
.progress-step-item.error-step .progress-step-dot { background: #dc2626; }
@keyframes stepPulse {
  from { box-shadow: 0 0 0 0 rgba(111,131,217,0.4); }
  to   { box-shadow: 0 0 0 6px rgba(111,131,217,0); }
}
/* 닫기 버튼 (완료/오류 시 표시) */
.progress-modal-close-btn {
  margin-top: 4px;
  padding: 9px 28px;
  border-radius: 10px;
  background: #6f83d9;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  display: none;
}
.progress-modal-close-btn:hover { background: #4e496d; }
.progress-modal-close-btn.visible { display: block; }

/* 회전 스피너 (아이콘 위에) */
.progress-spin {
  display: inline-block;
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── 대학별 검색 안내 팝업 (univ-notice-popup) ── */
.univ-notice-popup {
  display: flex;
  flex-direction: column;
  background: #fffbeb;
  border: 1.5px solid #f59e0b;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 8px 0 6px 0;
  box-shadow: 0 2px 8px rgba(245,158,11,0.15);
  transition: opacity 0.5s;
  gap: 6px;
}
.unp-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.unp-icon { font-size: 16px; }
.unp-title { font-size: 13px; font-weight: 700; color: #92400e; flex: 1; }
.unp-close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: #92400e; line-height: 1;
  padding: 0 2px; opacity: 0.7;
}
.unp-close:hover { opacity: 1; }
.unp-body { display: flex; flex-direction: column; gap: 4px; }
.unp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.unp-univ {
  font-weight: 600;
  color: #b45309;
  white-space: nowrap;
  flex-shrink: 0;
}
.unp-msg { color: #78350f; }

/* ── 지원 판정 뱃지 (admission-judge-badge) ── */
.admission-judge-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.judge-stable {
  background: #dbeafe;
  color: #1d4ed8;
}
.judge-moderate {
  background: #dcfce7;
  color: #15803d;
}
.judge-challenge {
  background: #ffedd5;
  color: #c2410c;
}
.judge-empty {
  color: #94a3b8;
  font-size: 12px;
}
.th-judge {
  background: #1e3a8a;
  color: #fff;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}
.th-judge-sub {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.85;
}
.td-judge {
  min-width: 62px;
  text-align: center;
}