/* ============================================================
   2028 미대입시 상담카드 — 켄트지 · 흑연 · 울트라마린
   미대 입시의 재료에서 왔다: 켄트지(바탕) 위 흑연(글자), 화판 회색(묶음), 포스터컬러 울트라마린 한 점(강조).
   원칙: 묶음은 선이 아니라 화판 톤과 여백으로 · 굵은 것은 한 곳(내 지원 설계 9장 보드)만 · 왼쪽 정렬
   변수명은 기존 JS·마크업 호환을 위해 유지 (--coral = 강조색, --mist = 화판)
   ============================================================ */
:root{
  /* 60 — 바탕: 켄트지(흰 종이, 크림 아님)와 화판 회색 */
  --bg:#FFFFFF; --paper:#FFFFFF; --mist:#EEEFF1; --mist2:#F5F6F7;
  --line:#D5D7DC; --line2:#E4E6EA;
  /* 30 — 글자: 흑연 */
  --ink:#24262B; --ink2:#2C2F35; --ink3:#3D414A;
  --body:#30333A; --slate:#474B53; --sub:#5C6068;
  /* 10 — 강조는 하나만. 포스터컬러 울트라마린 */
  --coral:#2C46C4; --coralDk:#2338A0; --coralSoft:#E9ECFA; --coralLine:#C9D0F2;
  /* 의미색 — 안정=ok · 적정/주의=warn · 도전/위험=danger · 정보=info */
  --ok:#3C7A57; --okSoft:#EAF3EE; --okLine:#C8DDD0;
  --warn:#A06A12; --warnSoft:#F7EFDF; --warnLine:#E6D3AD;
  --danger:#B03F33; --dangerSoft:#F8E8E5; --dangerLine:#E8C6C0;
  --info:#3A5A94; --infoSoft:#EBF0F8; --infoLine:#CCD7EA;
  /* 기존 마크업·JS 가 부르는 이름은 의미색으로 연결 */
  --teal:#3C7A57; --blue:#3A5A94; --amber:#A06A12;
  --red:#B03F33; --redDk:#B03F33; --redSoft:#F8E8E5;
  --shadow:none;
  --pop:0 8px 24px rgba(36,38,43,.12);   /* 떠 있는 요소(메뉴·모달)에만 */
  /* 모서리는 위계로: 화판(묶음) 14 · 입력·버튼 8 · 배지 둥글게 */
  --r-board:14px; --r-ctl:8px;
  /* 글자 크기는 이 일곱 단계뿐 — 12.5px 아래로 내리지 않는다(작은 회색 글씨가 안 읽힌다는 피드백)
     xs 배지·각주 · sm 보조문·표 머리 · md 표 본문·입력 · base 본문 · lg 소제목 · xl 섹션 제목 · 2xl 화면 제목 */
  --fs-xs:12.5px; --fs-sm:13.5px; --fs-md:14.5px; --fs-base:16px; --fs-lg:18px; --fs-xl:21px; --fs-2xl:28px;
  /* 글자의 역할 — 크기 단계를 자리마다 고르지 않고 이 위계로 쓴다(굵기는 400 · 500 · 600 · 700 넷뿐 — 650·760·800·900 같은 사이 값은 쓰지 않는다)
     화면 제목(.topbar .who)        xl  700   (첫 화면 소개 제목 .about h1 만 2xl, 폰 xl)   — 학생 카드 · 입시 자료 · 한눈에 보기 · 교사 콘솔
     섹션 제목(.sec-title)          lg  700   — 1~9 입력 칸 · 콘솔 묶음 · 자료실 칸
     소제목(카드·대학 이름·h3)       base 700
     본문                           base 400 · 표 본문·입력 md · 보조문·표 머리·버튼 sm 600 · 배지·각주 xs
     표시 숫자(내신 결과 등)         2xl 700  — 제목이 아니라 값이라 제목보다 커도 된다 */
  --fs-page:var(--fs-xl); --fs-sec:var(--fs-lg); --fs-sub:var(--fs-base);
  /* 격자: 본문 폭 하나 + 여백 단위(4의 배수). breakpoint 는 1000 · 900 · 760 · 520 넷뿐
     --w-cur 는 지금 화면의 폭 — 공통 내비·바닥글이 이 값을 따라가 본문과 같은 왼쪽 선에 선다(입시 자료만 넓다).
     --gut 는 좌우 여백 하나(760 이하 14) — 화면 끝까지 닿는 고정 띠는 calc(-1 * var(--gut)) 로 여백을 되돌린다. */
  --w-page:1200px; --w-wide:1440px; --w-cur:var(--w-page); --gut:20px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  /* 스크롤 막대 — 숨기지 않고 얇게. 막대가 보여야 '옆으로 더 있다'를 안다 */
  scrollbar-color:#C3C6CD transparent;
}
@media(max-width:760px){ :root{ --gut:14px; } }
body:has(#database:not(.hidden)){ --w-cur:var(--w-wide); }
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{ margin:0; background:var(--bg); font-size:var(--fs-base);
  font-family:'Wanted Sans Variable','Wanted Sans','Pretendard Variable',Pretendard,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,-apple-system,sans-serif;
  color:var(--body); line-height:1.55; letter-spacing:-0.01em;
  /* 한글은 어절 단위로 끊는다 — 낱말 중간에서 잘리면 제목이 두 줄로 흩어진다 */
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;}
/* 제목은 자간·행간을 더 좁혀 한 덩어리로 읽히게 한다 */
b,strong{ font-weight:700; }   /* 기본값 bolder 는 600 글 안에서 900 이 된다 — 굵기 단계 밖 */
h1,h2,h3,.sec-title,.sum-h h2,.login-card .lc-title,details.fold>summary{ letter-spacing:-0.035em; line-height:1.18; }
.wrap{ max-width:var(--w-page); margin:0 auto; padding:var(--sp-5) var(--gut) 72px; }
.hidden{ display:none !important; }
/* 브라우저 기본 small(=smaller)은 표 안에서 11px 아래로 떨어진다 — 바닥은 xs */
small{ font-size:var(--fs-xs); }
/* 입시 자료는 열이 많은 표 화면이라 본문 폭보다 넓게 쓴다(1366 화면에서 마지막 열이 잘리지 않게) */
#database.wrap{ max-width:var(--w-wide); }

/* ---------- Login — 가운데 정렬 대신 비대칭 2단 ----------
   DOM 순서: 소개(.about) → 로그인 카드 → 여정·바로가기(.landing) → 만든 사람(.site-foot).
   좁은 화면은 이 순서대로 쌓이고(소개가 먼저), 넓은 화면은 카드가 왼쪽 열을 차지한다. */
.login-bg{ min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr); align-content:start; justify-items:start; gap:26px;
  padding:clamp(40px,9vh,96px) max(var(--gut), calc((100% - var(--w-page)) / 2 + var(--gut))) 56px; background:var(--bg); }
.login-card{ width:100%; max-width:412px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:28px 28px 24px; }
.login-card h1{ font-size:var(--fs-xl); margin:0 0 4px; color:var(--ink); font-weight:700; }   /* 홍익컨설팅 로그인 — 브라우저 기본 h1(32px) 대신 같은 단계 */
.login-card .lc-title{ font-size:var(--fs-xl); margin:0 0 4px; color:var(--ink); font-weight:700; }
.login-card .sub{ font-size:var(--fs-md); color:var(--slate); margin:0 0 20px; max-width:34ch; }
.login-card .field{ margin-bottom:12px; }
.login-card label{ display:block; font-size:var(--fs-sm); font-weight:600; color:var(--slate); margin-bottom:5px;}
.login-card .lab-sub{ font-weight:500; color:var(--sub); }
.login-card .err{ color:var(--danger); font-size:var(--fs-sm); font-weight:600; min-height:18px; margin:4px 0 2px;}
.login-card a{ color:var(--coralDk); text-decoration:underline; text-underline-offset:2px; }
.login-card label.consent{ display:flex; gap:8px; align-items:flex-start; font-size:var(--fs-sm); font-weight:500; color:var(--sub); margin:2px 0 10px; }
.login-card label.consent input{ margin-top:3px; flex:none; }
/* 학생: 들어가기 / 처음 왔어요 — 가입 전용 칸(.join-only)은 처음 왔어요에서만 보인다 */
.stu-mode{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:8px; padding:3px; margin:0 0 16px; background:var(--mist2); }
.stu-mode button{ border:0; background:transparent; padding:8px 6px; border-radius:6px; font:inherit; font-size:var(--fs-md); font-weight:600; color:var(--slate); cursor:pointer; }
.stu-mode button.on{ background:var(--paper); color:var(--ink); box-shadow:0 0 0 1px var(--line); }
.stu-mode button:focus-visible{ outline:2px solid var(--coral); outline-offset:1px; }
#stuForm[data-mode="in"] .join-only{ display:none; }
#stuForm[data-mode="in"].need-t .need-teacher{ display:block; }
.lc-back{ margin:0 0 14px; font-size:var(--fs-sm); }
.lc-back a{ color:var(--slate); text-decoration:none; }
.lc-back a:hover{ color:var(--ink); }
.lc-alt{ font-size:var(--fs-sm); color:var(--slate); margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line); }
.lc-alt .nw{ white-space:nowrap; }
.lc-lead{ font-size:var(--fs-sm); color:var(--slate); margin:0 0 12px; }
.tabs{ display:flex; gap:2px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.tabs button{ flex:0 0 auto; border:0; background:transparent; padding:9px 14px; border-radius:0; font-weight:600; font-size:var(--fs-md); color:var(--sub); cursor:pointer; font-family:inherit; border-bottom:2px solid transparent; margin-bottom:-1px;}
.tabs button.active{ color:var(--ink); border-bottom-color:var(--coral); }
.login-note{ font-size:var(--fs-xs); color:var(--sub); line-height:1.5; margin-top:16px; border-top:1px solid var(--line); padding-top:13px;}

/* 사이트 소개 — 목적·원칙·원문 확인 */
.about{ width:100%; max-width:680px; }
.about .eyebrow{ display:block; font-size:var(--fs-xs); font-weight:600; color:var(--sub); letter-spacing:.06em; }
.about h1{ font-size:var(--fs-2xl); color:var(--ink); font-weight:700; margin:10px 0 10px; max-width:20ch; }
@media(max-width:760px){ .about h1{ font-size:var(--fs-xl); } }
.about .lead{ font-size:var(--fs-base); color:var(--body); line-height:1.6; margin:0; max-width:46ch; }
.tenets{ list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--ink3); }
.tenets li{ padding:13px 16px 2px; border-left:1px solid var(--line); }
.tenets li:first-child{ border-left:0; padding-left:0; }
.tenets b{ display:block; font-size:var(--fs-md); color:var(--ink); letter-spacing:-.03em; }
.tenets span{ display:block; font-size:var(--fs-sm); color:var(--slate); line-height:1.5; margin-top:4px; }
.verify{ margin:20px 0 0; padding:11px 14px; border-left:2px solid var(--warn); background:var(--warnSoft); font-size:var(--fs-sm); color:var(--body); line-height:1.55; border-radius:0 6px 6px 0; }
.verify b{ color:var(--ink); }
@media(max-width:760px){
  .tenets{ grid-template-columns:1fr; }
  .tenets li{ border-left:0; border-top:1px solid var(--line); padding:11px 0 10px; }
  .tenets li:first-child{ border-top:0; }
}

/* 만든 사람 · 문의 */
.site-foot{ width:100%; max-width:680px; display:flex; flex-wrap:wrap; gap:6px 20px; padding-top:14px; border-top:1px solid var(--line); font-size:var(--fs-sm); color:var(--sub); }
.site-foot b{ color:var(--slate); font-weight:600; margin-right:4px; }
.site-foot a{ color:var(--coralDk); text-decoration:none; border-bottom:1px solid var(--coralLine); }
.site-foot a:hover{ color:var(--ink); border-bottom-color:var(--coral); }

/* ? 도움말 — 본문에서 뺀 부연 설명. 누르면 그 줄(.qh-host) 아래에 뜬다. 바깥을 누르거나 Esc 로 닫힌다(app.js) */
.qh-host{ position:relative; }
details.qh{ display:inline; }
details.qh>summary{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--slate); font-size:var(--fs-xs); font-weight:600; line-height:1; cursor:pointer; list-style:none; vertical-align:1px; margin-left:2px; user-select:none; }
details.qh>summary::-webkit-details-marker{ display:none; }
details.qh>summary:hover, details.qh[open]>summary{ border-color:var(--coral); color:var(--coralDk); }
details.qh>summary:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }
.qh-body{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; max-width:360px; background:var(--paper); border:1px solid var(--line); border-radius:8px; box-shadow:var(--pop); padding:11px 13px; font-size:var(--fs-sm); font-weight:500; color:var(--body); line-height:1.55; letter-spacing:-.018em; text-align:left; }
.qh-body b{ color:var(--ink); }
.tenets .qh-body{ right:auto; width:min(340px, calc(100vw - 48px)); }
.tenets li:last-child .qh-body{ left:auto; right:0; }
.tenets li:nth-child(2) .qh-body{ left:auto; right:-40px; }
@media(max-width:760px){ .tenets .qh-body, .tenets li:nth-child(2) .qh-body, .tenets li:last-child .qh-body{ left:0; right:0; width:auto; } }

@media(min-width:1000px){
  .login-bg{ grid-template-columns:412px minmax(0,1fr); column-gap:clamp(40px,7vw,84px); align-items:start; }
  .login-card{ grid-column:1; grid-row:1 / span 3; }
  .about{ grid-column:2; grid-row:1; }
  .landing{ grid-column:2; grid-row:2; margin-top:0; }
  .site-foot{ grid-column:2; grid-row:3; }
}
/* 폰: 소개·원칙·경고문이 먼저 나와 로그인 칸이 두 번째 화면(≈730px 아래)에 있었다 — 매일 들어오는 학생을 위해 로그인 칸을 맨 위로 */
@media(max-width:760px){ .login-card{ order:-1; } .login-bg{ padding-top:20px; } }   /* 폰: 내비 아래 76px 빈 띠를 줄여 로그인 칸이 첫 화면 위쪽에 */

/* shared inputs */
/* type 을 적지 않은 칸(교사 콘솔·산출설정)과 email·date 칸도 같은 모양 — 예전엔 교사 로그인 이메일 칸이 브라우저 기본 모양이었다 */
input[type=text], input[type=password], input[type=number], input[type=email], input[type=date], input[type=search], input[type=tel], input[type=url], .field > input:not([type]), select, textarea{
  width:100%; font-family:inherit; font-size:var(--fs-base); color:var(--body); letter-spacing:-0.015em;
  border:1px solid var(--line); border-radius:var(--r-ctl); padding:9px 11px; background:var(--paper);
  transition:border-color .15s ease, box-shadow .15s ease;}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px var(--coralSoft); }
input::placeholder, textarea::placeholder{ color:var(--sub);}
input:disabled, select:disabled, textarea:disabled{ background:var(--mist2); color:var(--slate); cursor:default; }
textarea{ resize:vertical; min-height:42px; }

.btn{ cursor:pointer; border:0; border-radius:var(--r-ctl); padding:10px 15px; font-size:var(--fs-md); font-weight:600; font-family:inherit; letter-spacing:-0.02em;
  transition:background .15s, border-color .15s, color .15s;}
.btn:active{ transform:translateY(1px);}
.btn-primary{ background:var(--coral); color:#fff; width:100%; border:1px solid transparent; }   /* 테두리 1px — 옆 btn-line·btn-ghost 와 높이를 맞춘다 */
.btn-primary:hover{ background:var(--coralDk); }
.btn-ghost{ background:transparent; color:var(--slate); border:1px solid var(--line);}
.btn-ghost:hover{ background:var(--mist); color:var(--ink);}
/* 보조 버튼은 테두리 대신 화판 톤 — 주 버튼(울트라마린)만 색을 가진다 */
.btn-line{ background:var(--mist); color:var(--ink); border:1px solid transparent; }
.btn-line:hover{ background:var(--line2); color:var(--ink); }
.btn-sm{ padding:7px 12px; font-size:var(--fs-sm); }

/* ---------- Topbar ---------- */
.topbar{ background:transparent; color:var(--ink); border:0; border-radius:0; padding:4px 0 12px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; box-shadow:var(--shadow); }
.topbar .who{ font-weight:700; letter-spacing:-0.035em; line-height:1.2; color:var(--ink); }
.topbar .who small{ font-weight:500; color:var(--sub); font-size:var(--fs-sm); margin-left:6px;}
.topbar .sp{ flex:1; }
.topbar .who{ font-size:var(--fs-page); }
/* 화면 머리 띠 — 공통 내비(--navH, nav.js 가 잰다) 바로 아래에 붙는다. 폰에서 내비가 접히면 따라 올라간다 */
#stickyHead, #dbStickyHead{ position:sticky; top:var(--navH,0px); z-index:40; background:var(--bg); margin:0 calc(-1 * var(--gut)); padding:12px var(--gut) 6px; transition:top .2s ease; }
#dbStickyHead{ padding:10px var(--gut) 4px; }
/* 폰: 성적 비교 띠까지 붙으면 화면 위 300px 를 덮는다 — 띠는 흘러가고 찾기 머리(.db-find)만 붙는다 */
@media(max-width:760px){ #dbStickyHead{ position:static !important; } }
/* ---------- 내 지원 설계 — 화판 위에 테이프로 붙인 9장(수시 6 · 정시 3). 사이트에서 유일하게 굵은 요소 ---------- */
.plan-sec .pb-sub{ font-size:var(--fs-md); color:var(--sub); font-weight:500; }
.plan-board{ background:var(--mist); border-radius:var(--r-board); padding:22px 22px 18px; margin-top:12px; }
.pb-row{ display:grid; grid-template-columns:48px minmax(0,1fr); gap:10px; align-items:start; }
.pb-row+.pb-row{ margin-top:16px; }
.pb-lab{ font-weight:700; font-size:var(--fs-base); color:var(--slate); padding-top:14px; }
.pb-slots{ display:grid; gap:10px; }
.pb-6{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.pb-3{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.pb-slot{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; font:inherit; cursor:pointer;
  background:var(--paper); border:0; border-radius:10px; padding:13px 14px 12px; min-height:94px; color:var(--ink); box-shadow:0 1px 0 var(--line2); }
.pb-slot::before{ content:""; position:absolute; top:-5px; left:50%; width:34px; height:11px; margin-left:-17px; background:#D8DBE2; transform:rotate(-2deg); }
.pb-slot:hover{ box-shadow:0 0 0 2px var(--coralLine); }
.pb-slot b{ font-size:var(--fs-base); font-weight:700; letter-spacing:-.03em; line-height:1.25; }
.pb-dp{ font-size:var(--fs-sm); color:var(--sub); line-height:1.35; }
.pb-gun{ position:absolute; right:12px; top:11px; font-size:var(--fs-md); font-weight:700; color:var(--coral); }
.pb-fit{ margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:600; }
.pb-fit i{ width:8px; height:8px; border-radius:50%; background:currentColor; }
.pb-s{ color:var(--ok); } .pb-f{ color:var(--warn); } .pb-r{ color:var(--danger); } .pb-none{ color:var(--sub); font-weight:500; }
.pb-empty{ background:transparent; border:1.5px dashed #BFC3CB; box-shadow:none; align-items:center; justify-content:center; color:var(--slate); font-weight:600; font-size:var(--fs-md); }
.pb-empty::before{ display:none; }
.pb-empty:hover{ border-color:var(--coral); color:var(--coral); box-shadow:none; }
.pb-tally{ margin:16px 0 0 58px; font-size:var(--fs-md); color:var(--slate); }
.pb-tally b{ color:var(--ink); }
/* 태블릿(768 등) — 6열이면 종이 폭이 95px 로 좁아 '합격선 입력 전'의 '전'만 다음 줄로 떨어지고 대학 이름이 꺾였다 */
@media (max-width:900px){ .pb-6,.pb-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){
  .pb-row{ grid-template-columns:1fr; gap:6px; } .pb-lab{ padding-top:0; }
  .pb-6,.pb-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pb-tally{ margin-left:0; }
}
/* 폰: 3열이면 '서울과학기술대'·'커뮤니케이션디자인'이 종이 밖으로 넘쳤다 — 2열로, 띄어쓰기 없는 긴 이름도 종이 안에서 줄을 바꾼다 */
.pb-slot b, .pb-dp{ max-width:100%; overflow-wrap:anywhere; }
@media (max-width:520px){ .pb-6,.pb-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media print{ .pb-slot::before{ display:none; } .pb-empty{ display:none; } }
.profbar{ margin-top:7px; background:var(--mist); border:0; border-radius:var(--r-board); padding:12px 18px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; box-shadow:var(--shadow); }
.stepnav{ margin-top:6px; display:flex; gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch; border-bottom:1px solid var(--line); padding:0 2px; }
/* 폰: 가로 스크롤로 6~9단계를 숨기지 않고 두 줄(5+4)로 접는다 */
@media(max-width:520px){ .stepnav{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); overflow:visible; gap:0; padding:0; } .stepnav a{ padding:7px 2px; text-align:center; font-size:var(--fs-xs); white-space:normal; word-break:keep-all; overflow-wrap:anywhere; min-width:0; } .stepnav{ overflow:hidden; } .stepnav a.done::after{ content:'✓'; margin-left:1px; } }
.stepnav{ scrollbar-width:none; }
.stepnav::-webkit-scrollbar{ height:0; }
.stepnav a{ color:var(--sub); font-size:var(--fs-sm); font-weight:600; white-space:nowrap; padding:8px 10px; cursor:pointer; flex:0 0 auto; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s; }
.stepnav a:hover{ color:var(--ink); }
.stepnav a.cur{ color:var(--ink); border-bottom-color:var(--coral); }
.howto{ margin-top:12px; border-left:2px solid var(--coralLine); padding:2px 0 2px 13px; display:flex; align-items:center; gap:10px; font-size:var(--fs-sm); color:var(--slate); }
.howto .howto-x{ margin-left:auto; border:0; background:transparent; color:var(--sub); font-size:var(--fs-lg); cursor:pointer; line-height:1; padding:0 4px; }
details.fold > summary{ cursor:pointer; font-weight:700; font-size:var(--fs-lg); color:var(--ink); list-style:none; display:flex; align-items:center; gap:10px; }
details.fold > summary::-webkit-details-marker{ display:none; }
details.fold > summary::after{ content:'▾'; margin-left:4px; color:var(--sub); font-size:var(--fs-md); transition:transform .2s; }
details.fold[open] > summary::after{ transform:rotate(180deg); }
/* 교사 콘솔 — 파일 가져오기는 접힌 묶음, 파일 고르기 단추는 .btn-line 과 같은 모양 */
.imp-fold>summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; }
.imp-fold>summary::-webkit-details-marker{ display:none; }
.imp-fold>summary .sec-title{ margin:0; }
.imp-fold>summary::after{ content:'펼치기 ▾'; margin-left:auto; font-size:var(--fs-sm); font-weight:600; color:var(--slate); }
.imp-fold[open]>summary::after{ content:'접기 ▴'; }
.imp-fold[open]>summary{ margin-bottom:10px; }
input[type=file]{ font:inherit; font-size:var(--fs-sm); color:var(--slate); }
input[type=file]::file-selector-button{ font:inherit; font-size:var(--fs-sm); font-weight:600; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-ctl); padding:6px 12px; margin-right:8px; cursor:pointer; }
input[type=file]::file-selector-button:hover{ border-color:var(--ink); }
.sec2-opt{ margin-top:14px; }
.sec2-opt>summary{ cursor:pointer; font-size:var(--fs-sm); font-weight:600; color:var(--slate); list-style:none; display:inline-flex; gap:6px; align-items:center; }
.sec2-opt>summary::-webkit-details-marker{ display:none; }
.sec2-opt>summary::after{ content:'▾'; color:var(--sub); }
.sec2-opt[open]>summary::after{ content:'▴'; }
.sec2-opt>.grid{ margin-top:10px; }
.fold-tag{ font-size:var(--fs-xs); font-weight:600; color:var(--sub); background:var(--mist); padding:3px 9px; border-radius:99px; }
.admin-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.admin-how{ background:var(--mist2); border:1px solid var(--line); border-radius:8px; padding:12px 14px; font-size:var(--fs-sm); color:var(--slate); line-height:1.5; }
.admin-row-form{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:10px; }
.admin-dslist{ margin-top:8px; display:flex; flex-direction:column; }
.admin-dsrow{ display:flex; align-items:center; gap:8px; background:transparent; border:0; border-top:1px solid var(--line2); border-radius:0; padding:9px 2px; font-size:var(--fs-md); }
.admin-dsrow:first-child{ border-top:0; }
.admin-dsrow .sp{ flex:1; }
.admin-extra{ margin-top:18px; background:transparent; color:var(--body); border:0; border-top:1px solid var(--line); border-radius:0; padding:13px 0 0; }
.admin-extra .btn{ margin:6px 6px 0 0; }
.fitfilter{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:10px 0 0; }
.fitfilter button{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--paper); color:var(--slate); font-size:var(--fs-sm); font-weight:600; padding:6px 12px; border-radius:99px; cursor:pointer; font-family:inherit; }
.fitfilter button:hover{ border-color:var(--coral); }
.fitfilter button.active{ background:var(--coral); color:#fff; border-color:var(--coral); }
/* 이모지 대신 상태 점 — 색이 뜻을 나르고, 글자는 글자대로 읽힌다 */
.fitfilter button[data-f]:not([data-f=""])::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; }
.fitfilter button[data-f="s"]::before{ background:var(--ok); }
.fitfilter button[data-f="f"]::before{ background:var(--warn); }
.fitfilter button[data-f="r"]::before{ background:var(--danger); }
.fitfilter button.active::before{ background:#fff !important; }
#appMsg{ color:var(--ok); font-size:var(--fs-sm); }
@media(max-width:760px){ .admin-grid,.admin-row-form{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px){ .admin-grid,.admin-row-form{ grid-template-columns:minmax(0,1fr); } }
@media(max-width:760px){ .profbar{ gap:11px; padding:8px 12px; } .pb-bar{ width:64px; } .pb-k{ font-size:var(--fs-xs); } .howto{ font-size:var(--fs-xs); } }
#app section.section, #app details.fold{ scroll-margin-top:calc(var(--stickyH,170px) + var(--navH,0px)); }
@media(max-width:760px){
  .wrap{ padding:16px var(--gut) 90px; }
  #stickyHead{ padding-top:9px; padding-bottom:5px; }
  .topbar .who{ font-size:var(--fs-lg); }
  /* 모바일 머리: 가로 스크롤 대신 이름·상태 한 줄 + 버튼 넷을 2×2 로(상담 모드·로그아웃은 더보기 안) */
  .topbar{ flex-wrap:wrap; overflow:visible; gap:6px; padding:6px 0 10px; background:none; }
  .topbar .sp{ display:block; flex:0 0 100%; height:0; }
  .topbar .who{ font-size:var(--fs-base); flex:0 0 auto; }
  .topbar .btn-sm, .topbar .tb-more{ flex:1 1 40%; padding:9px 6px; font-size:var(--fs-sm); text-align:center; justify-content:center; }
  .topbar .tb-more{ padding:0; } .topbar .tb-more > summary{ width:100%; }
  /* 모바일 저장·제출 피드백: 숨기는 대신 하단 토스트로 표시(flash()가 2.8초 뒤 비우면 :empty로 자동 소멸) */
  #appMsg{ position:fixed; left:50%; bottom:78px; transform:translateX(-50%); z-index:120; background:var(--ink); color:#fff; font-size:var(--fs-sm); font-weight:600; padding:9px 18px; border-radius:99px; box-shadow:var(--pop); max-width:88vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #appMsg:empty{ display:none; }
  /* 폰: 고정 위치(아래쪽)로 띄우면 고정 머리(#stickyHead) 안에서 높이가 0으로 접혀 배경 없이 글자만 겹쳐 보였다 — 단추 아래로 펼친다 */
  .tb-menu{ position:absolute; left:auto; right:0; top:calc(100% + 6px); bottom:auto; min-width:min(260px, calc(100vw - 28px)); }
  /* 요약 띠도 가로 스크롤 대신 2열 격자 — 잘린 칸이 없게 */
  .profbar{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
  .profbar .pb-item:first-child{ grid-column:1 / -1; }  /* 내신 값(2.85 → 4.50 · 상위 46.1%)이 반 칸에서 세 줄로 꺾이던 것 */
  .profbar::-webkit-scrollbar{ height:0; }
  .pb-item{ flex:0 0 auto; }
  .pb-sp{ display:none; }
  .pb-prog{ grid-column:1 / -1; }
  #app section.section, #app details.fold{ scroll-margin-top:calc(var(--stickyH,140px) + var(--navH,0px)); }
}
.pb-item{ display:flex; flex-direction:column; gap:1px; }
.pb-k{ font-size:var(--fs-xs); color:var(--sub); font-weight:600; letter-spacing:.01em; }
.pb-v{ font-size:var(--fs-md); color:var(--ink); font-weight:700; }
.pb-sp{ flex:1; }
.pb-prog{ display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--slate); font-weight:700; }
.pb-bar{ width:96px; height:4px; background:var(--mist); border-radius:99px; overflow:hidden; }
.pb-bar i{ display:block; height:100%; background:var(--coral); border-radius:99px; transition:width .35s; }
.bottom-actions{ margin-top:26px; background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; padding:18px 0 0; }
.ba-inner{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bottom-actions .btn{ width:auto; font-size:var(--fs-base); padding:13px 20px; }
.bottom-actions #btnSubmit2{ flex:0 1 auto; min-width:200px; }
.bottom-actions #btnDraft2{ flex:0 0 auto; min-width:120px; }
.ba-note{ color:var(--sub); font-size:var(--fs-xs); margin:11px 0 0; line-height:1.5; max-width:62ch; }
.ba-note b{ color:var(--ink); } .ba-note #appMsg2{ color:var(--ok); font-weight:600; }
@media(max-width:520px){ .bottom-actions .btn{ flex:1 1 100%; } }
.status{ font-size:var(--fs-xs); font-weight:600; padding:3px 10px; border-radius:99px; }
.status.draft{ background:var(--warnSoft); color:var(--warn);}
.status.submitted{ background:var(--okSoft); color:var(--ok);}
.status.none{ background:var(--mist); color:var(--sub);}
.ro-banner{ background:var(--warnSoft); color:var(--warn); border:0; border-left:2px solid var(--warnLine); border-radius:0; padding:9px 14px; margin-top:12px; font-size:var(--fs-sm); font-weight:500; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}

/* ---------- Sections ---------- */
/* 섹션은 종이 위 문단 — 상자 대신 위쪽 한 줄과 여백으로 나눈다. 묶어 보여야 하는 것만 화판(--mist) 톤 */
.section{ background:transparent; border-radius:0; padding:30px 2px 12px; margin-top:6px; box-shadow:none; border:0; border-top:1px solid var(--line2);}
.sec-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:4px;}
#app .sec-head{ cursor:pointer; user-select:none; }
/* 접기·펴기 토글 — 예전엔 .sec-head::after 로 그린 장식이라 글쇠로 누를 수 없었다(app.js buildAccordions 가 만든다) */
.sec-toggle{ margin-left:auto; flex:0 0 auto; white-space:nowrap; }
#app .sec-head:has(> .sec-toggle){ cursor:pointer; }
#app section.collapsed .sec-head{ margin-bottom:0; }
#app section.collapsed .sec-body{ display:none; }
@media print{ #app section.collapsed .sec-body{ display:block !important; } .sec-toggle{ display:none !important; } }
/* 번호는 색 칩이 아니라 작은 편집용 숫자로 — 반복되는 알록달록한 배지가 화면을 덮지 않게 */
.sec-no{ width:auto; height:auto; background:none; border-radius:0; color:var(--sub); display:inline-block;
  font-weight:600; font-size:var(--fs-xs); letter-spacing:.08em; font-variant-numeric:tabular-nums; flex:0 0 auto;}
.sec-title{ font-size:var(--fs-sec); font-weight:700; color:var(--ink);}
h2.sec-title{ margin:0; }
.sec-desc{ font-size:var(--fs-sm); color:var(--sub); margin:3px 0 16px 0; max-width:78ch; line-height:1.55;}

.grid{ display:grid; gap:12px; }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr));} .g3{ grid-template-columns:repeat(3,minmax(0,1fr));} .g4{ grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:760px){ .g2,.g3,.g4{ grid-template-columns:1fr;} }
.field label{ display:block; font-size:var(--fs-sm); font-weight:600; color:var(--slate); margin-bottom:5px;}
.hint{ font-size:var(--fs-xs); color:var(--sub); line-height:1.5;}
.linklike{ color:var(--coralDk); font-weight:600; text-decoration:none; }

/* tables */
.scrollx{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; min-width:640px; }
.tbl th{ background:transparent; color:var(--sub); font-size:var(--fs-xs); font-weight:600; padding:8px; text-align:left; white-space:nowrap; border-bottom:1px solid var(--line);}
.tbl td{ padding:5px; border-bottom:1px solid var(--line2); vertical-align:middle;}
.tbl tr:nth-child(even) td{ background:transparent;}
.tbl tbody tr:hover td{ background:var(--mist2);}
.tbl input, .tbl select{ border:1px solid var(--line); padding:7px 8px; font-size:var(--fs-sm);}
/* 전형요소는 '1단계(3배수) 교과20+서류80 / 2단계 …'처럼 길다 — 한 줄 입력칸에서 잘리던 것을 내용만큼 늘어나는 칸으로 */
.tbl textarea.s_elem{ border:1px solid var(--line); padding:7px 8px; font-size:var(--fs-sm); line-height:1.4; min-height:0; resize:none; field-sizing:content; overflow:hidden; }
.row-actions{ display:flex; gap:8px; margin-top:11px; align-items:center; flex-wrap:wrap;}
.mini{ cursor:pointer; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:6px; padding:6px 12px; font-size:var(--fs-sm); font-weight:600; font-family:inherit;}
.mini:hover{ border-color:var(--coral); color:var(--coralDk);}
.rowdel{ padding:3px 8px; font-size:var(--fs-sm); line-height:1; color:var(--sub); border-radius:6px;}
.rowdel:hover{ border-color:var(--danger); color:var(--danger); background:var(--dangerSoft);}
/* 지망 ↔ 과거입결·2028 연결 펼침 카드 */
.hist-card{ border:0; border-top:1px solid var(--line); border-radius:0; margin:0; overflow:hidden; background:transparent;}
.hist-head{ display:flex; align-items:center; gap:8px; padding:10px 2px; cursor:pointer; user-select:none; background:transparent;}
.hist-head:hover{ background:var(--mist2);}
.hist-head b{ font-size:var(--fs-md); color:var(--ink);}
.hist-sub{ display:inline-block; margin-left:8px; font-size:var(--fs-xs); font-weight:700; color:var(--coralDk);}
.hist-28{ display:inline-block; margin-left:6px; font-size:var(--fs-xs); font-weight:700; padding:2px 8px; border-radius:99px; background:var(--okSoft); color:var(--ok); white-space:nowrap;}
.hist-28.unk{ background:var(--warnSoft); color:var(--warn);}
.hist-28.s27{ background:var(--coralSoft); color:var(--coralDk);}
/* 여정 안내(로그인 화면) — 기능 나열이 아니라 '무엇을 순서대로 하나'로 읽히게 */
/* 여정은 화판 위 순서 — 번호만 울트라마린 */
.journey{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; background:var(--mist); border-radius:var(--r-board); padding:6px 8px; }
.journey .js{ background:transparent; border:0; border-left:1px solid var(--line2); border-radius:0; padding:14px 14px 16px; text-align:left; position:relative; }
.journey .js:first-child{ border-left:0; }
.journey .js i{ display:block; font-style:normal; font-size:var(--fs-md); font-weight:700; color:var(--coral); background:none; border-radius:0; padding:0; margin-bottom:7px; letter-spacing:0; }
.journey .js b{ display:block; font-size:var(--fs-md); color:var(--ink); letter-spacing:-.03em; line-height:1.2; }
.journey .js small{ display:block; font-size:var(--fs-xs); color:var(--sub); margin-top:4px; line-height:1.4; }
.journey .js a{ color:var(--coralDk); text-decoration:none; font-weight:600; }
@media(max-width:520px){ .journey{ grid-template-columns:1fr 1fr; } .journey .js{ border-left:0; border-top:1px solid var(--line); padding-left:0; } .journey .js:first-child{ border-top:0; } }
.hist-arrow{ margin-left:auto; color:var(--sub); font-size:var(--fs-sm); flex:0 0 auto;}
.hist-body{ display:none; padding:2px 2px 14px; border-top:0;}
.hist-card.open .hist-body{ display:block;}
@media print{ .hist-body{ display:block !important;} .hist-arrow{ display:none;} .hist-head{ cursor:default;} }
.del-btn{ cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--sub); border-radius:6px; width:28px; height:28px; font-weight:600; font-size:var(--fs-base);}
.del-btn:hover{ border-color:var(--danger); color:var(--danger); background:var(--dangerSoft); }

/* result — 카드 안에 또 카드를 겹치지 않는다. 구분은 선과 여백으로. */
.result{ background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; padding:18px 0 0; color:var(--body); margin-top:20px;}
.result .row1{ display:flex; flex-wrap:wrap; gap:0;}
.stat{ flex:1 1 130px; background:transparent; border:0; border-left:1px solid var(--line); border-radius:0; padding:2px 16px 4px;}
.stat:first-child{ border-left:0; padding-left:0; }
.stat .lab{ font-size:var(--fs-xs); color:var(--sub); font-weight:600;}
.stat .val{ font-size:var(--fs-2xl); font-weight:700; margin-top:4px; letter-spacing:-0.045em; line-height:1.1; color:var(--ink);}
.stat .val small{ font-size:var(--fs-md); font-weight:500; color:var(--sub);}
.stat.accent{ background:transparent; border-color:var(--line);}
.stat.accent .lab{ color:var(--sub);} .stat.accent .val{ color:var(--coralDk);}
.val-type{ font-size:var(--fs-lg) !important; line-height:1.2; }
.band-sub{ font-size:var(--fs-xs); color:var(--sub); font-weight:500; margin-top:4px; }
.basis{ margin-top:16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:var(--fs-sm); color:var(--slate);}
.basis select{ width:auto; padding:6px 9px;}

.bandbar{ position:relative; display:flex; height:46px; border-radius:6px; overflow:hidden; border:1px solid var(--line); background:var(--paper);}
.bandbar-wrap{ position:relative; margin-top:30px; }
.seg{ display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:600; font-size:var(--fs-md); border-right:1px solid rgba(26,27,25,.06); transition:background .2s;}
.seg:last-child{ border-right:0;}
.seg span{ font-size:var(--fs-xs); font-weight:500; opacity:.7; margin-top:2px;}
.seg.s-a{ background:var(--okSoft); color:var(--ok);} .seg.s-b{ background:var(--infoSoft); color:var(--info);}
.seg.s-c{ background:var(--warnSoft); color:var(--warn);} .seg.s-d{ background:var(--dangerSoft); color:var(--danger);}
.seg.active{ background:var(--coral); color:#fff;}
.marker{ position:absolute; top:-31px; transform:translateX(-50%); transition:left .3s cubic-bezier(.2,.7,.3,1); z-index:3; display:none;}
.marker .pin{ width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--ink);margin:0 auto;}
.marker .lab{ background:var(--ink);color:#fff;font-size:var(--fs-xs);font-weight:600;padding:2px 7px;border-radius:5px;white-space:nowrap;margin-bottom:2px;}
.bandscale{ display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--sub); margin-top:6px;}
/* 표식(2.85)은 막대 위 여백(30px)에 서고 바늘 끝만 막대에 닿는다 — 예전엔 막대 안으로 내려와 '실기·활동형' 글자를 덮었다.
   폰: 앞의 두 구간은 폭이 40px 남짓이라 이름이 잘렸다 — 글자를 줄이고 음절 단위로 접는다(범위 숫자는 아래 눈금이 대신한다) */
@media (max-width:520px){
  .seg{ font-size:var(--fs-xs); line-height:1.2; text-align:center; padding:0 2px; word-break:normal; overflow-wrap:anywhere; }
  .seg span{ display:none; }
}
.bandinfo{ margin-top:20px; display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
@media (max-width:760px){ .bandinfo{ grid-template-columns:1fr;} }
.binfo{ background:transparent; border:0; border-left:1px solid var(--line); border-radius:0; padding:2px 16px;}
.binfo:first-child{ border-left:0; padding-left:0; }
.binfo .t{ font-size:var(--fs-xs); font-weight:600; color:var(--sub); margin-bottom:5px;}
.binfo .d{ font-size:var(--fs-sm); color:var(--body); line-height:1.5;}
@media (max-width:760px){ .binfo{ border-left:0; border-top:1px solid var(--line); padding:12px 0 0; } .binfo:first-child{ border-top:0; padding-top:2px; } }

/* metric grid */
.mgrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; margin-top:8px; border-top:1px solid var(--line); background:var(--line2);}
@media (max-width:900px){ .mgrid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:520px){ .mgrid{ grid-template-columns:repeat(2,1fr);} }
.mc{ background:var(--paper); border:0; border-radius:0; padding:11px 14px; text-align:left;}
.mc span{ display:block; font-size:var(--fs-xs); font-weight:600; color:var(--sub);}
.mc b{ font-size:var(--fs-xl); color:var(--ink); display:block; margin-top:3px; font-weight:700; letter-spacing:-.04em;}
.mc.hl{ background:var(--mist2); }
.mc.hl b{ color:var(--coralDk); }
.mc.wide{ grid-column:span 2; }
.mgrid3{ grid-template-columns:repeat(3,1fr);}
@media (max-width:520px){ .mgrid3{ grid-template-columns:1fr;} }
.mc i{ display:block; font-style:normal; font-size:var(--fs-xs); color:var(--sub); margin-top:4px; line-height:1.3; }
.mc.hl i{ color:var(--coralDk); opacity:.8; }
@media (max-width:520px){ .mc.wide{ grid-column:span 2; } }

/* achievement summary */
.achsum{ margin-top:14px; background:transparent; color:var(--body); border:0; border-top:1px solid var(--line); border-radius:0; padding:12px 0 0; display:flex; gap:18px; flex-wrap:wrap; align-items:center;}
.achsum .d{ font-size:var(--fs-md); font-weight:600; }
.achsum .d small{ color:var(--sub); font-weight:500; }
.achsum b{ color:var(--coralDk); }

/* 수능·모의고사 카드 */
.mock-list{ display:flex; flex-direction:column; }
.mock-card{ border:0; border-top:1px solid var(--line); border-radius:0; padding:14px 0; background:transparent; }
.mock-list .mock-card:first-child{ border-top:0; padding-top:2px; }
.mc-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.mc-head select{ width:auto; padding:7px 11px; min-width:78px; }
.mc-sum{ flex:1; min-width:200px; font-size:var(--fs-sm); color:var(--slate); font-weight:500; background:transparent; border:0; border-radius:0; padding:0 2px; }
.mc-sum b{ color:var(--ink); }
.minigrid{ width:100%; border-collapse:collapse; min-width:430px; }
.minigrid th,.minigrid td{ border:1px solid var(--line2); padding:3px; text-align:center; }
.minigrid thead th{ background:var(--mist2); font-size:var(--fs-xs); font-weight:600; color:var(--slate); padding:6px 3px; }
.minigrid tbody td:first-child, .minigrid thead th:first-child{ background:var(--mist2); font-size:var(--fs-xs); font-weight:600; color:var(--slate); white-space:nowrap; text-align:left; padding-left:9px; width:78px; }
.minigrid input{ width:100%; border:0; background:transparent; text-align:center; font-size:var(--fs-sm); padding:5px 2px; color:var(--ink); }
.minigrid input::placeholder{ color:#C9CAC6; }
.minigrid input:focus{ outline:1.5px solid var(--coral); border-radius:4px; background:var(--paper); }
.mock-card .del-btn{ flex:0 0 auto; }
/* 폰: 430px 최소 폭 때문에 표가 옆으로 밀려 한국사 칸이 화면 밖에 있었다 — 고정 칸 폭으로 한 화면에 */
@media (max-width:520px){
  .mock-card .scrollx{ overflow:visible; }
  .minigrid{ min-width:0; table-layout:fixed; }
  .minigrid tbody td:first-child, .minigrid thead th:first-child{ width:58px; padding-left:5px; white-space:normal; word-break:keep-all; }
  .minigrid thead th{ padding:6px 1px; }
  .minigrid th,.minigrid td{ padding:2px 1px; }
  .minigrid input{ padding:7px 0; font-size:var(--fs-xs); }
}

.notice{ background:transparent; border-left:2px solid var(--coralLine); border-radius:0; padding:2px 0 2px 13px; font-size:var(--fs-sm); color:var(--slate); font-weight:400; margin-top:16px; line-height:1.55;}
.notice b{ color:var(--ink); font-weight:600; }
.note-soft{ border-left-color:var(--line); color:var(--slate); }

.tally{ display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; font-size:var(--fs-sm); font-weight:600;}
.tally .pill{ background:transparent; border:1px solid var(--line); padding:5px 11px; border-radius:99px; color:var(--slate);}
.tally .pill b{ color:var(--ink);}
.tally .ok{ background:var(--okSoft); border-color:var(--okLine); color:var(--ok);}
.tag-stable{ color:var(--ok);} .tag-fit{ color:var(--info);} .tag-reach{ color:var(--danger);}

.chk{ display:grid; grid-template-columns:1fr 1fr; gap:10px 26px;}
@media (max-width:760px){ .chk{ grid-template-columns:1fr;} }
.chk label{ display:flex; gap:10px; align-items:flex-start; font-size:var(--fs-md); cursor:pointer;}
.chk input{ width:17px; height:17px; margin-top:1px; accent-color:var(--coral); flex:0 0 auto;}

/* roster */
.roster{ display:grid; gap:0; }
.rcard{ display:flex; align-items:center; gap:14px; background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; padding:13px 2px; }
.roster .rcard:first-child{ border-top:0; }
.rcard:hover{ background:var(--mist2); }
.rcard .nm{ font-weight:700; color:var(--ink); font-size:var(--fs-base); letter-spacing:-.03em; }
.rcard .meta{ font-size:var(--fs-sm); color:var(--sub); }
.rcard .sp{ flex:1; }
.rcard .bandtag{ font-weight:700; color:var(--coralDk); background:var(--coralSoft); border-radius:6px; padding:4px 10px; font-size:var(--fs-sm); }

.foot{ text-align:left; color:var(--sub); font-size:var(--fs-xs); margin-top:36px; padding-top:16px; border-top:1px solid var(--line); line-height:1.6; max-width:78ch;}
.badge-est{ display:inline-block; background:var(--mist); color:var(--slate); font-weight:600; font-size:var(--fs-xs); padding:2px 8px; border-radius:99px;}

details.ref{ margin-top:20px; background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; padding:2px 0;}
details.ref summary{ cursor:pointer; font-weight:600; color:var(--slate); padding:12px 0; font-size:var(--fs-md); list-style:none;}
details.ref summary:hover{ color:var(--ink); }
details.ref summary::-webkit-details-marker{ display:none;}
details.ref summary::before{ content:"＋ "; color:var(--sub);}
details.ref[open] summary::before{ content:"－ ";}
.ref table{ font-size:var(--fs-sm); margin:6px 0 14px; min-width:auto;}
.ref th{ background:transparent;}

/* database view
   글자 단계는 셋뿐이다 — ① 페이지 제목(.topbar .who 14.5/700) ② 섹션·탭(13/600) ③ 본문·필터(12.5/500).
   묶음 이름·탭 아래 학년도·배지·한 줄 설명·필터·버튼은 모두 ③, 탭 이름·패널 제목은 ②. 새 크기를 만들지 않는다. */
#database{ position:relative; }
/* 탭: 묶음(일반 전형 / 특별 전형 / 참고 자료)을 한 줄에 — 좁은 화면에선 줄을 바꾸지 않고 가로로 밀어 본다 */
.dbtabs{ display:flex; flex-wrap:nowrap; align-items:flex-end; column-gap:22px; background:transparent; padding:0; border-bottom:1px solid var(--line); margin-bottom:12px;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.dbtabs::-webkit-scrollbar{ height:0; }
.dbtabs button{ flex:0 0 auto; border:0; background:transparent; padding:9px 14px; border-radius:0; font-weight:600; font-size:var(--fs-md); color:var(--sub); cursor:pointer; font-family:inherit; border-bottom:2px solid transparent; margin-bottom:-1px; text-align:left; white-space:nowrap; }
.dbtabs button:hover{ color:var(--ink); }
.dbtabs button.active{ background:transparent; color:var(--ink); border-bottom-color:var(--coral);}
.dbtab-grp{ display:flex; flex-direction:row; align-items:center; flex:0 0 auto; }
.dbtab-gl{ display:flex; align-items:center; font-size:var(--fs-xs); font-weight:600; color:var(--sub); letter-spacing:0; padding:0 4px 0 0; white-space:nowrap; }
/* 학년도는 탭마다 되풀이하지 않고 줄 끝에 한 번 */
.dbtab-yr{ margin-left:auto; align-self:center; font-size:var(--fs-sm); font-weight:600; color:var(--slate); white-space:nowrap; font-variant-numeric:tabular-nums; }
#dbFind .dbtabs{ margin-bottom:8px; column-gap:18px; flex-wrap:wrap; row-gap:2px; }
#dbFind .dbtabs button{ padding:8px 10px; }
.dbtab-row{ display:flex; gap:2px; }
/* 특별 전형·참고 자료 — 해당하는 사람만의 자료라 구분선 뒤에서 한 단계 조용하게(크기는 같고 색만 낮춘다) */
.dbtab-spe{ border-left:1px solid var(--line); padding-left:8px; }
.dbtab-ref{ border-left:1px solid var(--line); padding-left:8px; }
.dbtabs .dbtab-spe button:not(.active), .dbtabs .dbtab-ref button:not(.active){ color:var(--sub); }
/* 대상 제한 배지 — 자물쇠 + 짧은 글자. 탭 아래 학년도와 섞지 않는다 */
.db-badge{ display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-sm); font-weight:500; color:var(--slate); background:var(--mist); border-radius:99px; padding:0 8px; line-height:1.6; }
.db-badge svg{ flex:none; }
/* 탭 아래 작은 글씨는 기준 학년도 하나만 */
.dbtabs .dbtab-sub{ display:block; margin-top:1px; font-size:var(--fs-sm); font-weight:500; color:var(--sub); letter-spacing:0; font-variant-numeric:tabular-nums; }
.dbtabs button.active .dbtab-sub{ color:var(--slate); }
/* 안내는 한 자리 — 탭 한 줄 설명 또는 학생 카드 배너 중 하나만 보인다(JS dbNoteSync) */
.db-tabnote{ margin:8px 0 10px; font-size:var(--fs-sm); font-weight:500; color:var(--slate); line-height:1.5; }
.db-tabnote a{ color:var(--coralDk); font-weight:500; }
.db-banner{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:-2px 0 10px; padding:6px 6px 6px 12px; border-left:2px solid var(--coralLine); background:var(--coralSoft); font-size:var(--fs-sm); font-weight:500; color:var(--coralDk); }
.db-banner .db-banner-t{ flex:1 1 220px; min-width:0; }
.db-banner .btn{ width:auto; }
.db-banner .db-x{ border:0; background:transparent; color:var(--sub); font-size:var(--fs-sm); font-weight:500; cursor:pointer; padding:4px 6px; font-family:inherit; }
.db-banner .db-x:hover{ color:var(--ink); }
/* 전문 용어 — 처음 나오는 자리에 짧은 풀이(title) */
.term{ border-bottom:1px dotted currentColor; cursor:help; }
/* 제목 옆 (?) 도움말 — 떠 있는 요소라 --pop 그림자를 쓴다 */
.db-help-btn{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--slate); font-size:var(--fs-sm); font-weight:600; line-height:1; cursor:pointer; font-family:inherit; padding:0; }
.db-help-btn:hover, .db-help-btn[aria-expanded="true"]{ border-color:var(--coral); color:var(--coralDk); }
.db-pop{ position:absolute; z-index:80; left:20px; top:72px; width:min(620px, calc(100% - 40px)); max-height:min(72vh, 640px); overflow:auto;
  background:var(--paper); border:1px solid var(--line); border-radius:10px; box-shadow:var(--pop); padding:14px 16px; font-size:var(--fs-sm); color:var(--body); line-height:1.55; }
.db-pop[hidden]{ display:none; }
.db-pop-h{ display:flex; align-items:center; gap:8px; margin:0 0 6px; }
.db-pop-h h3{ margin:0; font-size:var(--fs-md); font-weight:600; color:var(--ink); }
.db-pop-h .db-x{ margin-left:auto; border:0; background:transparent; color:var(--sub); font-size:var(--fs-sm); font-weight:500; cursor:pointer; font-family:inherit; padding:2px 4px; }
.db-pop dl{ margin:0; }
.db-pop dt{ font-size:var(--fs-md); font-weight:600; color:var(--ink); margin:10px 0 2px; }
.db-pop dd{ margin:0; color:var(--slate); }
.db-pop dd b{ font-weight:600; color:var(--body); }
.db-pop ol{ margin:2px 0 0; padding-left:18px; }
.db-pop a{ color:var(--coralDk); }
/* 재외국민 패널의 사용법 문단은 (?) 도움말로 옮겼다 — 안내가 두 곳에 동시에 보이지 않게 */
#abPanel > p.hint{ display:none; }
#abPanel .ab-h, #vocPanel .voc-who h3{ font-size:var(--fs-md); font-weight:600; }
#vocPanel .voc-pin, #vocPanel .voc-src{ font-size:var(--fs-sm); font-weight:500; }
/* 특성화고 탭 안내 */
.voc-panel{ margin:0 0 14px; border-top:1px solid var(--line); padding-top:12px; }
.voc-who{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.voc-who>div{ background:var(--paper); padding:12px 16px; }
.voc-who h3{ margin:0 0 6px; font-size:var(--fs-md); color:var(--ink); font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.voc-who ul{ margin:0; padding-left:17px; font-size:var(--fs-sm); color:var(--slate); line-height:1.65; }
.voc-pin{ font-size:var(--fs-xs); font-weight:700; padding:1px 8px; border-radius:999px; }
.voc-grad{ background:var(--okSoft); color:var(--ok); }
.voc-work{ background:var(--warnSoft); color:var(--warn); }
.voc-chk{ margin:10px 0 0; }
.voc-notes{ margin:8px 0 0; padding-left:17px; font-size:var(--fs-sm); color:var(--slate); line-height:1.65; }
.voc-notes li{ margin-bottom:4px; }
.voc-notes li.voc-warn{ color:var(--warn); }
.voc-src{ margin:8px 0 0; font-size:var(--fs-xs); color:var(--sub); }
@media (max-width:760px){ .voc-who{ grid-template-columns:1fr; } }
.dbfilters{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin:8px 0 8px;}
.dbfilters input, .dbfilters select{ width:auto; flex:0 0 auto; max-width:100%; padding:7px 10px; font-size:var(--fs-sm); font-weight:500;}
/* 검색은 필터 줄 맨 왼쪽 고정 */
.dbfilters input{ order:-1; flex:1 1 220px; min-width:150px;}
/* 상세 필터 접기 — 적용 중인 개수를 이름에 붙인다(JS dbMoreSync) */
.db-more-btn{ flex:0 0 auto; border:1px solid var(--line); background:var(--paper); color:var(--slate); border-radius:7px; padding:7px 10px; font-size:var(--fs-sm); font-weight:500; font-family:inherit; cursor:pointer; }
.db-more-btn:hover, .db-more-btn[aria-expanded="true"]{ border-color:var(--coral); color:var(--coralDk); }
.db-more-btn.on{ color:var(--coralDk); border-color:var(--coralLine); background:var(--coralSoft); }
.db-more-btn::after{ content:' ▾'; color:var(--sub); }
.db-more-btn[aria-expanded="true"]::after{ content:' ▴'; }
.db-more{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin:0 0 8px; padding:8px 0 0; border-top:1px solid var(--line2); }
.db-more[hidden]{ display:none; }
.db-more select{ width:auto; flex:0 0 auto; max-width:100%; padding:7px 10px; font-size:var(--fs-sm); font-weight:500; }
.db-more .fitfilter{ margin:0; }
.db-more .fitfilter > span:first-child{ font-size:var(--fs-sm) !important; font-weight:500 !important; }
.db-more .fitfilter button{ font-weight:500; }
/* 정렬은 필터가 아니라 오른쪽 따로 */
.db-sort{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:500; color:var(--sub); white-space:nowrap; max-width:100%; }
.db-sort select{ min-width:0; }
/* 하단 버튼 두 묶음 — 왼쪽 보기 전환 · 오른쪽 작업(맞춤 추천 · 내려받기) */
.db-actions{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:0 0 10px; }
/* 「필터」 — 드롭다운·칩·분포는 누를 때만(모든 폭). 닫혀 있으면 적용 중인 조건 줄만 보인다 */
/* 찾기 머리 — 스크롤해도 붙는다: 공통 메뉴(--navH) 아래, 성적 비교 띠가 붙어 있으면 그 아래(--dbTop) */
.db-find{ position:sticky; top:calc(var(--navH,0px) + var(--dbTop,0px)); z-index:35; background:var(--bg); margin:0 calc(-1 * var(--gut)); padding:8px var(--gut) 8px; border-bottom:1px solid var(--line2); }
.db-searchrow{ display:flex; gap:8px; align-items:center; }
.db-searchrow #dbq{ flex:1 1 auto; min-width:0; height:36px; padding:0 10px; font-size:var(--fs-sm); }   /* 옆 「필터」 단추와 같은 높이 */
.db-cond-btn{ display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; height:36px; line-height:1.2; padding:0 14px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--paper); font:inherit; font-size:var(--fs-sm); font-weight:600; color:var(--ink); cursor:pointer; }
.db-cond-btn b{ color:var(--coral); }
#database.db-cond-open .db-cond-btn{ border-color:var(--ink); }
#database:not(.db-cond-open) #dbPanel, #database:not(.db-cond-open) #dbFacets .dbc-row:not(.dbc-act){ display:none !important; }
.db-panel{ padding-top:10px; }
#dbRegion{ display:none !important; }   /* 지역은 위 칩으로 고른다(값은 이 select 가 그대로 가진다) */
#dbFacets .dbc-hint{ display:none; }
#dbFind .db-area{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }   /* 칩 사이 간격 — 예전엔 붙어 있었다 */
/* 접힌 지역 칸(「지역: 전체 ▾」)은 검색 줄 왼쪽에 — 고정 머리가 한 줄 줄어든다(폰에서 화면 위 1/4 을 덮던 것). 펼치면 지역 줄이 한 줄을 다 쓴다 */
#dbFind{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:8px; align-items:center; }
#dbFind > .dbtabs{ grid-column:1 / -1; }
#dbFind > .db-area{ grid-column:1; margin-bottom:0; }
#dbFind > .db-searchrow{ grid-column:2; }
#dbFind > .db-area:has([aria-expanded="true"]){ grid-column:1 / -1; margin-bottom:8px; }
#dbFind:has(> .db-area [aria-expanded="true"]) > .db-searchrow, #dbFind:has(> .db-area:empty) > .db-searchrow{ grid-column:1 / -1; }
#dbFind .db-area-tog{ height:36px; white-space:nowrap; }
/* 보기 전환(카드/표)은 「필터」 안 — 닫혀 있으면 적용 중인 조건이 있을 때만 그 줄이 보인다 */
#database:not(.db-cond-open) #dbFacets .dbc-act:not(:has(.chip-on)){ display:none !important; }
#database:not(.db-cond-open) #dbFacets .dbc-view{ display:none; }
#database:not(.db-cond-open) #dbFacets:not(:has(.chip-on)){ display:none !important; }
/* 폰: 「돌아가기」가 한 줄을 다 차지하지 않게 */
@media(max-width:760px){ #database > .topbar .btn-sm{ flex:0 0 auto; } }
/* 입시 자료 머리는 단추가 「돌아가기」 하나 — 좁은 화면에서도 제목 줄 오른쪽에 둔다(예전엔 혼자 다음 줄로 내려가 한 줄을 차지했다) */
#database > .topbar .sp{ flex:1 1 0; }
/* 재외국민 「내 자격 맞춰 보기」 — 제목 한 줄로 접힌다 */
.ab-tog{ display:flex; align-items:center; gap:6px; width:100%; border:0; background:none; padding:4px 0; font:inherit; font-size:var(--fs-base); font-weight:700; color:var(--ink); cursor:pointer; text-align:left; }
.ab-tog::after{ content:'펼치기 ▾'; margin-left:auto; font-size:var(--fs-sm); font-weight:600; color:var(--slate); }
#abPanel.ab-open .ab-tog::after{ content:'접기 ▴'; }
#abPanel:not(.ab-open) > :not(.ab-tog){ display:none !important; }
.db-foot{ margin:18px 0 0; font-size:var(--fs-xs); color:var(--sub); line-height:1.6; }
.db-foot:empty{ display:none; }
/* 탭 줄 — 묶음 이름 대신 묶음 사이 세로선 하나 */
#dbFind .dbtab-gl{ display:none; }
#dbFind .dbtab-grp + .dbtab-grp{ border-left:1px solid var(--line); padding-left:12px; }
#dbFind .db-area-lab{ display:none; }
.db-actions .db-act-work{ margin-left:auto; display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
#database .db-actions .btn, #database .dbfilters .btn{ font-weight:500; }
/* 보조 버튼 — 테두리 없는 글자 단추 */
.btn-quiet{ background:transparent; color:var(--slate); border:0; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
.btn-quiet:hover{ color:var(--ink); text-decoration-color:var(--slate); }
@media (max-width:760px){
  .dbfilters input{ flex-basis:100%; }
  .db-sort{ margin-left:0; }
}
.dbstats{ display:flex; gap:18px; flex-wrap:wrap; background:transparent; color:var(--body); border:0; border-top:1px solid var(--line); border-radius:0; padding:10px 0; margin-bottom:6px; font-size:var(--fs-sm); align-items:center;}
.dbstat{ color:var(--sub);} .dbstat b{ color:var(--ink); font-size:var(--fs-base);}
#dbTable td{ font-size:var(--fs-sm); }
/* 대학 칸 — 표 자동 폭이 212px 까지 벌려 유형 칸과 사이가 비었다. 대학 이름 폭만 */
#dbTable :is(th,td):first-child{ width:120px; min-width:104px; max-width:128px; white-space:normal; overflow-wrap:anywhere; }
#dbTable .mini{ padding:5px 9px; font-size:var(--fs-xs); white-space:nowrap;}
/* 탭별 열 폭 — 자동 폭은 가장 긴 한 칸에 맞춰 열을 벌려, 짧은 값('도예학과'·'없음'·'–')만 있는 열 오른쪽이 휑하게 비었다.
   글이 긴 열(전형방법·비고, 실기·면접)에 폭을 넘기고 짧은 열은 이 폭에서 줄을 접는다 */
#dbTable[data-kind="voc"] :is(th,td):nth-child(4){ width:96px; }
#dbTable[data-kind="voc"] :is(th,td):nth-child(5){ width:220px; }
#dbTable[data-kind="voc"] :is(th,td):nth-child(6){ width:250px; }
#dbTable[data-kind="abroad"] :is(th,td):nth-child(6){ width:150px; }
#dbTable[data-kind="abroad"] :is(th,td):nth-child(8){ width:100px; }
#dbTable[data-kind="abroad"] :is(th,td):nth-child(9){ width:110px; }
#dbTable[data-kind="abroad"] :is(th,td):nth-child(10){ width:90px; }
#dbTable[data-kind="abroad"] th:is(:nth-child(2),:nth-child(3),:nth-child(5),:nth-child(10)){ text-align:center; }   /* 값이 가운데인 열은 머리글도 가운데 */
@media (max-width:760px){ #dbTable .mini{ padding:8px 10px; } }   /* 폰에서 행 단추(담기·4개년)를 손가락으로 누를 높이(27→33px) */
.fit{ display:inline-block; font-size:var(--fs-xs); font-weight:700; padding:2px 8px; border-radius:99px; }
.fit-s{ background:var(--okSoft); color:var(--ok); } .fit-f{ background:var(--warnSoft); color:var(--warn); } .fit-r{ background:var(--dangerSoft); color:var(--danger); }
.dbchart{ border:1px solid var(--line); border-radius:8px; padding:14px 16px; background:var(--paper); }
.dbreco{ border:0; border-top:1px solid var(--line); border-radius:0; padding:14px 0; background:transparent; }
.flash-sec{ animation:flashsec 1.5s ease; border-radius:10px; }
@keyframes flashsec{ 0%{ background:var(--coralSoft); } 70%{ background:var(--coralSoft); } 100%{ background:var(--paper); } }
.reco-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.reco-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.reco-col{ background:transparent; border:0; border-left:1px solid var(--line); border-radius:0; padding:2px 14px; }
.reco-col:first-child{ border-left:0; padding-left:0; }
.reco-h{ font-weight:700; font-size:var(--fs-sm); padding:3px 9px; border-radius:99px; margin-bottom:8px; display:inline-block; }
.reco-item{ font-size:var(--fs-sm); padding:8px 0; border-bottom:1px solid var(--line2); }
.reco-item:last-child{ border-bottom:0; }
.reco-sub{ font-size:var(--fs-xs); color:var(--sub); margin-top:2px; }
.reco-note{ font-size:var(--fs-xs); color:var(--sub); margin-top:10px; }
@media(max-width:760px){ .reco-grid{ grid-template-columns:1fr; } .reco-col{ border-left:0; border-top:1px solid var(--line); padding:12px 0 0; } }
/* summary view */
.sum-h{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:10px; border-bottom:1px solid var(--ink); padding-bottom:10px;}
.sum-h h2{ margin:0; color:var(--ink); font-size:var(--fs-xl); font-weight:700;}
.sum-h .meta{ font-size:var(--fs-sm); color:var(--sub);}
.sum-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:16px 0; border-top:1px solid var(--line); background:var(--line2);}
@media (max-width:760px){ .sum-grid{ grid-template-columns:repeat(2,1fr);} }
.sum-card{ border:0; border-radius:0; padding:11px 14px; background:var(--paper);}
.sum-card .l{ font-size:var(--fs-xs); color:var(--sub); font-weight:600;}
.sum-card .v{ font-size:var(--fs-lg); font-weight:700; color:var(--ink); margin-top:2px; letter-spacing:-.04em;}
.sum-card.accent{ background:var(--paper);} .sum-card.accent .l{color:var(--sub);} .sum-card.accent .v{color:var(--coralDk);}
.sumtbl{ width:100%; border-collapse:collapse; min-width:auto; margin:6px 0 4px; font-size:var(--fs-sm);}
.sumtbl th{ background:transparent; color:var(--sub); padding:6px 7px; text-align:left; font-size:var(--fs-xs); font-weight:600; white-space:nowrap; border-bottom:1px solid var(--line);}
.sumtbl td{ border-bottom:1px solid var(--line2); padding:6px 7px; vertical-align:top;}
.sumtbl tr:nth-child(even) td{ background:transparent;}
.sum-sec{ margin-top:20px;} .sum-sec h3{ font-size:var(--fs-md); color:var(--slate); margin:0 0 8px; border-left:0; padding-left:0; font-weight:700; letter-spacing:.02em; text-transform:none;}
.sum-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.sum-pill{ font-size:var(--fs-sm); padding:4px 10px; border-radius:99px; border:1px solid var(--line); background:transparent;}
.sum-pill.on{ background:var(--okSoft); border-color:var(--okLine); color:var(--ok); font-weight:600;}
.sum-pill.off{ color:var(--sub);}
.sum-note{ background:var(--mist2); border:1px solid var(--line); border-radius:7px; padding:9px 12px; font-size:var(--fs-sm); white-space:pre-wrap; min-height:20px;}

/* 상담 리포트 분포도 — report.js 가 캔버스로 그린 PNG. 화면·인쇄·PDF·DOCX 가 같은 이미지를 쓴다 */
.rp-charts{ margin-top:20px; }
.rp-fig{ margin:10px 0 18px; padding:0; break-inside:avoid; page-break-inside:avoid; }
/* 차트 PNG 는 논리 폭 760px(report.js RP_W) — 본문 폭(1156px)까지 늘리면 차트 글자가 본문보다 커진다. 1.2배(912px)까지만: 차트 10.5~15px → 12.6~18px 로 글자 단계에 맞는다 */
.rp-fig img{ width:100%; max-width:912px; height:auto; display:block; border:1px solid var(--line); border-radius:6px; background:var(--paper); }
.rp-fig figcaption{ font-size:var(--fs-xs); color:var(--sub); line-height:1.5; margin-top:6px; }
@media print{ .rp-fig img{ border-color:#ccc; } }

/* 명단 행의 리포트 내려받기 버튼 */
.rcard .rb-rep{ display:inline-flex; gap:4px; margin-left:10px; flex:0 0 auto; }
.rcard .rb-rep .btn{ width:auto; white-space:nowrap; }
@media (max-width:760px){ .rcard{ flex-wrap:wrap; } .rcard .rb-rep{ margin-left:0; } }

/* 명단 행의 '학생 도움' 메뉴 — 잠금·비밀번호 초기화·별명 지우기·삭제 (교사 전용, 인쇄 제외) */
.rcard .rb-more{ position:relative; flex:0 0 auto; margin-left:6px; }
.rcard .rb-more>summary{ list-style:none; cursor:pointer; user-select:none; white-space:nowrap; }
.rcard .rb-more>summary::-webkit-details-marker{ display:none; }
.rb-menu{ position:absolute; right:0; top:calc(100% + 6px); z-index:70; min-width:246px; background:var(--paper); border:1px solid var(--line); border-radius:8px; box-shadow:var(--pop); padding:5px; display:flex; flex-direction:column; gap:1px; }
.rb-menu .btn{ width:100%; text-align:left; border:0; background:transparent; white-space:normal; }
.rb-menu .btn:hover{ background:var(--mist); color:var(--ink); }
.rb-menu .rb-hint{ font-size:var(--fs-xs); color:var(--sub); padding:5px 9px 6px; border-bottom:1px solid var(--line); margin-bottom:3px; }
.rb-menu .rb-sep{ border-top:1px solid var(--line); margin:3px 0; }
/* 방금 초기화해 준 비밀번호 — 선생님이 학생에게 불러 줄 동안만 이 화면에 남는다 */
.rcard .bandtag.pwnew{ background:var(--okSoft); color:var(--ok); font-variant-numeric:tabular-nums; }
@media (max-width:760px){ .rcard .rb-more{ margin-left:0; } .rb-menu{ left:0; right:auto; } }

@media print{
  #summary .no-print{ display:none !important; }
  #summary .sum-card,#summary .sumtbl th,#summary .sum-card.accent{ -webkit-print-color-adjust:exact; print-color-adjust:exact;}
}
@media print{
  body{ background:#fff;} .wrap{ max-width:none; padding:0;}
  .no-print{ display:none !important;}
  .section,.result,.topbar{ box-shadow:none; border:1px solid #ccc; break-inside:avoid;}
  .result{ border:0; border-top:1px solid #ccc; }
  .topbar,.result,.seg,.stat,.sec-no,.notice,.binfo,.tbl th,.pill,.status,.achsum,.mc.hl{ -webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .section{ margin-top:12px; page-break-inside:avoid;}
  details.ref{ display:none;}
  .scrollx{ overflow:visible;} table{ min-width:auto;}
  @page{ margin:11mm;}
}

/* ===== 화면 캡처·복제 억제 =====
   선택 차단 · 식별 워터마크 · 가림막의 규칙과 스타일은 js/anti-capture.js 한 곳에 있다
   (app.css 없이 도는 naesin-converter.html 에서도 같게 동작해야 해서 모듈이 직접 넣는다).
   여기에 다시 만들지 말 것 — 예전엔 이 블록이 #database 에만 걸려 다른 화면은 그냥 뚫렸다. */

/* ===== 기본기: 숫자 정렬 · 포커스 링 · 모션 감축 · 터치 타깃 ===== */
.tbl td,.tbl th,.stat .val,.pb-v,.mgrid b,.minigrid input,.sum-card .v,.bandscale,.dbstat b{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum'; }
:is(.btn,.mini,.tabs button,.dbtabs button,.fitfilter button,.stepnav a,summary,.hist-head,.rowdel,.del-btn,.sec-toggle):focus-visible{ outline:2px solid var(--coral); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition-duration:.01ms!important; animation-duration:.01ms!important; scroll-behavior:auto!important; } }
.rowdel,.del-btn,.howto-x{ min-width:36px; min-height:36px; display:inline-grid; place-items:center; }

/* ===== 가로 스크롤 힌트 · 표 첫 열 고정 ===== */
.scrollx{ background:linear-gradient(90deg,#fff 30%,transparent) left/48px 100% no-repeat local, linear-gradient(270deg,#fff 30%,transparent) right/48px 100% no-repeat local, radial-gradient(farthest-side at 0 50%,rgba(26,27,25,.10),transparent) left/16px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%,rgba(26,27,25,.10),transparent) right/16px 100% no-repeat scroll; }
.tbl-stick tbody :is(th,td):first-child{ position:sticky; left:0; z-index:1; background:var(--paper); box-shadow:1px 0 0 var(--line); }
.tbl-stick thead tr:first-child th:first-child{ position:sticky; left:0; z-index:2; background:var(--paper); box-shadow:1px 0 0 var(--line); }
.tbl-stick tbody tr:nth-child(even) td:first-child{ background:var(--paper); }

/* ===== 지망 표(수시 6장 · 정시 3장) =====
   인라인 style 로 흩어져 있던 폭·색을 여기로 모은다 — 좁은 화면에서 덮어쓸 수 있어야 한다. */
.s_hint, .j_hint{ font-size:var(--fs-xs); color:var(--slate); margin-top:3px; line-height:1.3; }
.s_prevbox{ display:flex; gap:4px; align-items:center; }
.s_prevbox .s_prev{ width:60px; }
.s_prevbox .s_prevScale{ width:48px; padding:6px 3px; }
.s_prevpct{ font-size:var(--fs-xs); color:var(--coralDk); font-weight:700; margin-top:2px; }
.s_minhint, .j_calchint{ font-size:var(--fs-xs); margin-top:3px; line-height:1.3; }
/* .tbl select 의 padding 보다 특이도가 높아야 한다(인라인 style 에서 옮겨온 값이라 전과 같아야 함) */
.tbl .j_gun{ font-weight:700; text-align:center; padding:6px 2px; width:100%; color:var(--ink); }

/* ===== 폰·좁은 화면의 지망 표 — 행을 한 장씩 쌓는다 (인쇄는 표 그대로) =====
   수시 9열·정시 8열은 table{min-width:640px} 위에서 가로로 밀려, 폰에서 메모를 적는 동안
   어느 대학 줄인지 보이지 않았다. 카드의 입력 격자(.g4)가 1열로 접히는 760px 과 같은 지점에서
   지망 표도 '칸 이름 + 입력' 묶음으로 쌓는다.
   @media screen 으로 묶는 까닭: A4 인쇄 폭은 794px 라 폭 조건만으로는 걸러지지 않는다 —
   print 는 이 블록을 아예 읽지 않아야 인쇄·PDF·DOCX 가 지금의 표 그대로 나간다.
   디자인 규칙대로 테두리 상자(카드 중첩)를 만들지 않고 1px 헤어라인과 여백으로만 나눈다. */
@media screen and (max-width:900px){   /* 768 태블릿에서도 — 9열 표를 728px 에 넣으면 구분·대학·전형명·메모 칸이 글자 두세 개 폭으로 잘렸다 */
  #secSusi .scrollx, #secJeongsi .scrollx{ overflow:visible; background:none; }
  #secSusi .tbl, #secJeongsi .tbl{ display:block; min-width:0; }
  #secSusi .tbl thead, #secJeongsi .tbl thead{ display:none; }
  #susi, #jeongsi{ display:block; }
  #susi{ counter-reset:srow; }
  #susi tr, #jeongsi tr{ display:block; border-top:1px solid var(--line); padding:13px 0 7px; }
  #susi tr:first-child, #jeongsi tr:first-child{ border-top:0; padding-top:2px; }
  #susi tr{ counter-increment:srow; }
  #susi tr:hover td, #jeongsi tr:hover td{ background:transparent; }   /* #susi 가 곧 tbody 다 */

  /* 칸 이름(왼쪽 고정폭) + 값(오른쪽) — 한 칸에 힌트·판정 줄이 여럿 와도 값 쪽에 쌓인다 */
  #susi td, #jeongsi td{ display:grid; grid-template-columns:78px minmax(0,1fr); column-gap:10px; align-items:start; padding:4px 0; border:0; }
  #susi td::before, #jeongsi td::before{ content:attr(data-l); grid-column:1; grid-row:1; padding-top:9px; font-size:var(--fs-xs); font-weight:600; color:var(--sub); }
  #susi td > *, #jeongsi td > *{ grid-column:2; min-width:0; }
  #susi td input, #susi td select, #jeongsi td input, #jeongsi td select{ width:100%; box-sizing:border-box; }

  /* 머리줄 — 수시는 '몇 번째 칸 + 구분', 정시는 '모집군' */
  #susi td.c-head, #jeongsi td.c-head{ display:flex; align-items:center; gap:9px; padding:0 0 9px; margin-bottom:5px; border-bottom:1px solid var(--line2); }
  #susi td.c-head::before{ content:counter(srow)'번 칸'; padding:0; font-size:var(--fs-sm); font-weight:700; color:var(--ink); }
  #jeongsi td.c-head::before{ padding:0; }
  #susi td.c-head select, #jeongsi td.c-head select{ width:auto; min-width:98px; }

  /* 합격선 입력 + 척도는 값 쪽에서 나란히 */
  #susi td .s_prevbox{ gap:6px; }
  #susi td .s_prevbox .s_prev{ flex:1 1 auto; width:auto; }
  #susi td .s_prevbox .s_prevScale{ flex:0 0 auto; width:auto; min-width:74px; }

  /* 삭제(✕) — 기본 6칸·3칸에는 없는 단추라 그 행에서는 자리까지 접는다 */
  #susi td.c-del, #jeongsi td.c-del{ display:block; padding:4px 0 0; text-align:right; }
  #susi td.c-del::before, #jeongsi td.c-del::before{ content:none; }
  #susi tr.fixed-row td.c-del, #jeongsi tr.fixed-row td.c-del{ display:none; }
}
.tbl-stick tbody tr:hover td:first-child{ background:var(--mist2); }

/* ===== 상단바 ⋯ 더보기 메뉴 ===== */
.tb-more{ position:relative; flex:0 0 auto; }
.tb-more>summary{ list-style:none; cursor:pointer; user-select:none; line-height:normal; }   /* summary 는 본문 행간(1.55)을 물려받아 옆 단추보다 5px 컸다 */
.tb-more>summary::-webkit-details-marker{ display:none; }
.tb-menu{ position:absolute; right:0; top:calc(100% + 6px); z-index:70; min-width:210px; background:var(--paper); border:1px solid var(--line); border-radius:8px; box-shadow:var(--pop); padding:5px; display:flex; flex-direction:column; gap:1px; }
.tb-menu .btn{ width:100%; text-align:left; border:0; background:transparent; }
.tb-menu .btn:hover{ background:var(--mist); color:var(--ink); }
.tb-menu .tb-out{ margin-top:4px; border-top:1px solid var(--line2); border-radius:0 0 6px 6px; }

/* ===== 수능 D-day 칩 ===== */
.dday-chip{ display:inline-flex; gap:5px; align-items:center; font-size:var(--fs-xs); font-weight:600; font-variant-numeric:tabular-nums; color:var(--slate); background:transparent; border:1px solid var(--line); padding:3px 10px; border-radius:99px; white-space:nowrap; }
.dday-chip:empty{ display:none; }
.dday-chip.near{ color:var(--danger); background:var(--dangerSoft); border-color:var(--dangerLine); }
.dday-login{ margin:2px 0 16px; } /* 로그인 카드용 — 칩이 비면 :empty 로 여백까지 사라진다 */

/* ===== 메인(로그인) 랜딩 — 로그인 카드 옆 소개·바로가기 ===== */
.landing{ width:100%; max-width:680px; }
/* 로그인 없이 쓰는 것 세 가지 — 여정 격자와 같은 헤어라인 문법(배경 없음·왼쪽 정렬) */
.guest-tools{ margin-top:18px; border-top:1px solid var(--ink3); display:grid; grid-template-columns:auto 1fr 1fr; gap:0; align-items:stretch; }
.guest-tools .gt-head{ font-size:var(--fs-xs); font-weight:700; color:var(--sub); letter-spacing:.08em; padding:14px 16px 0 0; white-space:nowrap; }
.guest-tools .gt{ display:block; text-decoration:none; border-left:1px solid var(--line); padding:14px 14px 16px; color:var(--ink); }
.guest-tools .gt b{ display:block; font-size:var(--fs-md); letter-spacing:-.03em; line-height:1.2; color:var(--coralDk); }
.guest-tools .gt small{ display:block; font-size:var(--fs-xs); color:var(--sub); margin-top:4px; line-height:1.4; }
.guest-tools .gt:hover b{ color:var(--ink); }
@media(max-width:520px){ .guest-tools{ grid-template-columns:1fr; } .guest-tools .gt-head{ padding:12px 0 0; } .guest-tools .gt{ border-left:0; border-top:1px solid var(--line); padding-left:0; } }
/* 로그인 전 둘러보기 — 카드에 담는 버튼은 뜻이 없으므로 감춘다(카드가 없다) */
#database.db-guest td.no-print .mini, #database.db-guest th.no-print, #database.db-guest .dbc-add{ display:none; }
.landing-links{ text-align:left; margin:18px 0 0; font-size:var(--fs-sm); color:var(--sub); line-height:2; }
.landing-links a{ color:var(--coralDk); font-weight:600; text-decoration:none; border-bottom:1px solid var(--coralLine); padding-bottom:1px; }
.landing-links a:hover{ border-bottom-color:var(--coral); color:var(--ink); }

/* ===== 대학별 산출설정 편집(univ-calc.js · 관리자) ===== */
.uc-fieldset{ border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-top:10px; }
.uc-fieldset legend{ padding:0 6px; font-size:var(--fs-sm); color:var(--slate); }
.uc-checks{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; font-size:var(--fs-sm); color:var(--body); }
.uc-checks label{ display:inline-flex; gap:5px; align-items:center; white-space:nowrap; }
.uc-checks input[type=number], .uc-checks select{ padding:4px 6px; border:1px solid var(--line); border-radius:6px; font-size:var(--fs-sm); }
.uc-tag{ display:inline-block; font-size:var(--fs-xs); font-weight:700; color:var(--coralDk); background:var(--coralSoft); border:1px solid var(--coralLine); border-radius:99px; padding:1px 7px; margin-left:3px; vertical-align:middle; }

/* ===== 입시DB 범례 ===== */
.db-legend{ display:grid; gap:7px; font-size:var(--fs-sm); color:var(--slate); background:transparent; border:0; border-left:1px solid var(--line); border-radius:0; padding:2px 0 2px 14px; margin:10px 0 6px; }
.lg-keep{ color:var(--ok); font-weight:700; } .lg-move{ color:var(--danger); font-weight:700; } .lg-unk{ color:var(--warn); font-weight:700; }

/* ===== 미대입시 용어 사전 ===== */
.gloss{ margin:10px 0 14px; }
.gloss dt{ font-weight:700; font-size:var(--fs-md); color:var(--ink); margin-top:12px; letter-spacing:-.03em; }
.gloss dd{ margin:3px 0 0; font-size:var(--fs-sm); color:var(--slate); line-height:1.55; max-width:74ch; }

/* 동적 삽입 섹션(지망↔입결 패널) 헤더: 접기 기능이 없으므로 화살표·손가락 커서 제거(고장난 것처럼 보임 방지) */
#susiHist .sec-head, #jeongsiHist .sec-head{ cursor:default; }
#susiHist .sec-toggle, #jeongsiHist .sec-toggle{ display:none; }

/* ===== 요약 리포트 서명란 ===== */
.sum-sign{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; break-inside:avoid; page-break-inside:avoid; }
.sum-sign>div{ font-size:var(--fs-xs); color:var(--sub); font-weight:600; }
.sum-sign i{ display:block; border-bottom:1px solid var(--ink3); height:34px; margin-top:6px; }

/* ===== 인쇄 보강: 출력일 머리글 · 표 페이지 깨짐 방지 ===== */
@media print{
  #app.wrap::before, #summary.wrap::before{ content:'2028 미대입시 상담카드 — 출력일 ' attr(data-printdate); display:block; font-size:10px; color:#444; letter-spacing:.02em; border-bottom:1.2pt solid #000; padding-bottom:4pt; margin-bottom:10pt; }
  .sumtbl tr,.mock-card{ break-inside:avoid; page-break-inside:avoid; }
  .sum-sign i{ border-bottom:1px solid #000; }
  .tb-menu,.rb-menu,.rb-more{ display:none; }
}

/* ===== 재외국민 특례 탭 — 자격 맞춰 보기(#abPanel) =====
   카드 안에 카드를 겹치지 않는다: 패널은 위아래 헤어라인으로만 나누고, 학년 버튼은 선택된 것만 강조색. */
.ab-panel{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0 12px; margin:0 0 12px; }
.ab-h{ font-size:var(--fs-base); letter-spacing:-.035em; margin:0; color:var(--ink); }
.ab-h4{ font-size:var(--fs-sm); margin:12px 0 4px; color:var(--ink); letter-spacing:-.03em; }
.ab-grades{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin:0 0 12px; }
.ab-gr{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.ab-gl{ font-size:var(--fs-xs); font-weight:600; color:var(--sub); margin-right:2px; }
.ab-g{ border:1px solid var(--line); background:var(--paper); color:var(--slate); font:inherit; font-size:var(--fs-sm); font-weight:600; padding:5px 9px; border-radius:6px; cursor:pointer; font-variant-numeric:tabular-nums; }
.ab-g:hover{ border-color:var(--coral); }
.ab-g.on{ background:var(--coral); border-color:var(--coral); color:#fff; }
.ab-sel{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin:0 0 12px; }
.ab-sel label{ background:var(--paper); padding:8px 10px; font-size:var(--fs-sm); font-weight:600; color:var(--ink); display:flex; flex-direction:column; gap:3px; }
.ab-sel label small{ font-weight:500; color:var(--sub); font-size:var(--fs-xs); }
.ab-sel select, .ab-sel input{ width:100%; font-size:var(--fs-sm); }
@media(max-width:900px){ .ab-sel{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px){ .ab-sel{ grid-template-columns:1fr; } }
.ab-verdict{ display:flex; flex-wrap:wrap; gap:10px 0; margin:0 0 6px; }
.ab-verdict .binfo{ flex:1 1 220px; }
.ab-why{ margin:4px 0 0; padding-left:16px; font-size:var(--fs-sm); color:var(--slate); line-height:1.5; }
.ab-sp{ display:inline-block; font-size:var(--fs-xs); font-weight:700; padding:1px 7px; border-radius:99px; background:var(--infoSoft); color:var(--info); }
.ab-sp.ab-sp12{ background:var(--okSoft); color:var(--ok); }
.ab-none{ flex-basis:100%; font-size:var(--fs-sm); color:var(--slate); margin-top:4px; }
.ab-none summary{ cursor:pointer; font-weight:600; }
.ab-none div{ display:flex; flex-direction:column; gap:3px; margin-top:6px; }
.ab-detail{ font-size:var(--fs-sm); line-height:1.55; color:var(--body); }
.ab-rules{ margin-top:12px; }
/* 재외국민 — 준비할 것(포트폴리오·면접·실기 세부)과 판단 보류 행 */
.ab-chips{ display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; }
.ab-chips span{ font-size:var(--fs-xs); font-weight:600; color:var(--info); background:var(--infoSoft); border-radius:4px; padding:1px 6px; }
.ab-chips .ab-base, .ab-base{ font-size:var(--fs-xs); font-weight:600; color:var(--warn); background:var(--warnSoft); border-radius:4px; padding:1px 6px; }
.ab-det{ margin-top:8px; }
.ab-det-h{ font-size:var(--fs-sm); font-weight:700; color:var(--ink); margin-bottom:4px; }
.ab-dtbl{ font-size:var(--fs-sm); background:var(--paper); }
.ab-dtbl th{ width:84px; text-align:left; vertical-align:top; color:var(--slate); white-space:nowrap; }
.ab-dtbl td div{ line-height:1.5; }
.ab-dtbl td b{ color:var(--slate); font-weight:600; margin-right:4px; }
.ab-pd{ background:var(--mist); color:var(--slate); }
.ab-pdrow td{ background:var(--mist2); color:var(--slate); }
.ab-prev{ border-top:1px solid var(--line); padding:8px 0 4px; margin-top:6px; }

/* ===== 문의 게시판 (js/inquiry.js) — 보내는 창 · 관리자 목록 ===== */
.inq-modal{ position:fixed; inset:0; z-index:9999; background:rgba(26,27,25,.45); display:flex; align-items:center; justify-content:center; padding:16px; }
.inq-box{ background:var(--paper); width:100%; max-width:520px; max-height:88vh; overflow:auto; border:1px solid var(--line); border-radius:10px; box-shadow:var(--pop); padding:22px 22px 16px; }
.inq-box h2{ margin:0 0 4px; font-size:var(--fs-lg); color:var(--ink); }
.inq-lead{ margin:0 0 14px; font-size:var(--fs-sm); color:var(--slate); }
.inq-box .field{ margin-bottom:11px; }
.inq-box .lab-sub{ font-weight:500; color:var(--sub); }
.inq-box textarea{ min-height:110px; }
.inq-hp{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0; }
.inq-act{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:4px; }
#inq_msg{ font-size:var(--fs-sm); font-weight:600; }
.inq-foot{ margin:12px 0 0; padding-top:10px; border-top:1px solid var(--line); font-size:var(--fs-sm); color:var(--sub); }
.inq-foot a{ color:var(--coralDk); }
.verify a{ color:var(--coralDk); }
.inq-count{ font-size:var(--fs-sm); font-weight:600; color:var(--danger); margin-left:6px; letter-spacing:-.018em; }
.inq-row{ padding:12px 0; border-top:1px solid var(--line); }
.inq-row:first-child{ border-top:0; }
.inq-row.done{ opacity:.6; }
.inq-meta{ font-size:var(--fs-sm); color:var(--sub); }
.inq-meta b{ color:var(--ink); }
.inq-text{ font-size:var(--fs-md); color:var(--body); line-height:1.6; margin:5px 0 6px; white-space:pre-wrap; }
.inq-row .inq-act{ margin-top:8px; }

/* ===== 실기·전공 상담 가이드 (js/silgi-guide.js) ===== */
.sg-inline{ font-size:var(--fs-sm); color:var(--body); line-height:1.6; }
.sg-inline .t{ font-size:var(--fs-md); font-weight:700; color:var(--ink); margin-bottom:4px; }
.sg-inline p{ margin:0 0 6px; }
.sg-inline ul{ margin:4px 0 8px; padding-left:18px; }
.sg-cols{ display:grid; grid-template-columns:1fr 1fr; gap:4px 24px; }
.sg-stat{ color:var(--slate); }
.sg-stat b{ color:var(--ink); }
.sg-muted{ color:var(--sub); }
.s_silgi{ font-size:var(--fs-xs); color:var(--slate); margin-top:3px; line-height:1.45; }
.s_silgi a, .sg-links a{ color:var(--coralDk); }
body.sg-open{ overflow:hidden; }
.sg-modal{ position:fixed; inset:0; z-index:200; background:rgba(36,38,43,.42); display:flex; align-items:flex-start; justify-content:center; padding:4vh 16px; overflow:auto; }
.sg-modal[hidden]{ display:none; }
.sg-box{ background:var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow:var(--pop); width:100%; max-width:1080px; padding:22px 24px 18px; outline:none; }
.sg-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sg-head h2{ margin:0; font-size:var(--fs-xl); color:var(--ink); }
.sg-tabs{ display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin:14px 0 16px; }
.sg-tabs button{ border:0; background:transparent; padding:10px 14px; font:inherit; font-size:var(--fs-md); font-weight:600; color:var(--sub); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.sg-tabs button.on{ color:var(--ink); border-bottom-color:var(--coral); }
.sg-split{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:0 26px; }
.sg-list{ display:flex; flex-direction:column; border-right:1px solid var(--line); padding-right:12px; }
.sg-list button{ text-align:left; border:0; background:transparent; font:inherit; font-size:var(--fs-sm); color:var(--slate); padding:8px 10px; border-radius:6px; cursor:pointer; }
.sg-list button small{ display:block; color:var(--sub); font-size:var(--fs-xs); }
.sg-list button.on{ background:var(--coralSoft); color:var(--ink); font-weight:700; }
.sg-detail h3{ margin:0 0 6px; font-size:var(--fs-lg); color:var(--ink); }
.sg-detail p{ margin:0 0 8px; font-size:var(--fs-sm); color:var(--body); line-height:1.65; }
.sg-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:10px; }
.sg-grid section, .sg-majors section{ background:var(--paper); padding:12px 14px; }
.sg-grid h4, .sg-majors h4{ margin:0 0 6px; font-size:var(--fs-sm); color:var(--ink); font-weight:700; }
.sg-grid ul, .sg-majors ul{ margin:0; padding-left:18px; font-size:var(--fs-sm); color:var(--body); line-height:1.65; }
.sg-steps{ margin:0; padding-left:20px; font-size:var(--fs-sm); color:var(--body); line-height:1.65; }
.sg-steps b{ color:var(--ink); }
.sg-majors{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:10px; }
.sg-majors p{ font-size:var(--fs-sm); margin:0 0 6px; }
.sg-note{ color:var(--slate); border-left:2px solid var(--coralLine); padding-left:10px; }
.sg-univs{ margin-top:12px; font-size:var(--fs-sm); color:var(--slate); }
.sg-univs summary{ cursor:pointer; color:var(--ink2); font-weight:600; }
.sg-foot{ margin:14px 0 0; font-size:var(--fs-xs); color:var(--sub); }
@media (max-width:900px){ .sg-majors{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .sg-split{ grid-template-columns:1fr; } .sg-list{ flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--line); padding:0 0 10px; margin-bottom:12px; } .sg-grid,.sg-cols,.sg-majors{ grid-template-columns:1fr; } }
@media print{ .sg-modal{ display:none!important; } }

/* ===== 상담 모드 · 성적 추이 (js/consult-view.js) — 상담실 모니터를 함께 볼 때 글자 단계를 하나씩 올린다 ===== */
body.coview{ --fs-xs:14.5px; --fs-sm:16px; --fs-md:18px; --fs-base:18px; --fs-lg:21px; --fs-xl:24px; --fs-2xl:32px; }
.cv-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.cv-grid.cv-one{ grid-template-columns:minmax(0,1fr); max-width:calc(50% - 1px); }
.cv-grid figure{ margin:0; background:var(--paper); padding:12px 14px; }
.cv-grid figcaption{ font-size:var(--fs-sm); font-weight:700; color:var(--ink); margin-bottom:4px; }
.cv-grid figcaption small{ font-weight:500; color:var(--sub); margin-left:6px; }
.cv-svg{ display:block; width:100%; max-width:460px; height:auto; }
.cv-note{ margin:4px 0 0; font-size:var(--fs-sm); color:var(--slate); }
.cv-note b{ color:var(--ink); }
@media (max-width:760px){ .cv-grid{ grid-template-columns:1fr; } .cv-grid.cv-one{ max-width:none; } }

/* ===== 표준 배지 · 비율 막대 (js/admission-model.js) — 색이 아니라 모양으로 종류를 가른다 ===== */
.bdg{ display:inline-flex; align-items:center; gap:5px; min-height:24px; padding:1px 8px; border-radius:4px; font-size:var(--fs-sm); font-weight:600; line-height:1.2; white-space:nowrap; font-variant-numeric:tabular-nums; vertical-align:middle; }
.bdg-kind{ border:1px solid var(--line); color:var(--ink2); background:transparent; }
.bdg-num{ background:var(--mist2); color:var(--ink); }
.bdg-num i{ display:inline-block; width:28px; height:6px; border-radius:3px; background-color:var(--line); background-image:linear-gradient(var(--coral),var(--coral)); background-repeat:no-repeat; background-size:var(--p,0%) 100%; }
.bdg-cond{ background:var(--warnSoft); color:var(--warn); border:1px solid var(--warnLine); }
.tag-silgi{ display:inline-flex; align-items:center; min-height:24px; padding:1px 10px; border-radius:999px; background:var(--coralSoft); color:var(--coralDk); border:1px solid var(--coralLine); font-size:var(--fs-sm); font-weight:600; text-decoration:none; white-space:nowrap; vertical-align:middle; }
.tag-silgi:hover{ border-color:var(--coral); }
.leaf-badges, .s_badges{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.am-ratio{ display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--line2); margin-top:2px; }
.am-ratio > span{ height:100%; }
.am-ratio .r-silgi{ background:var(--coral); } .am-ratio .r-gyo{ background:var(--ink3); } .am-ratio .r-doc{ background:var(--slate); } .am-ratio .r-int{ background:var(--sub); } .am-ratio .r-sn{ background:var(--coralLine); }
.am-legend{ font-size:var(--fs-sm); color:var(--slate); font-variant-numeric:tabular-nums; }
.am-stage, .am-raw{ color:var(--sub); font-size:var(--fs-sm); }

/* ===== 국내 입시 — 질문 순서 칩 · 카드 보기 · 대학 상세 (js/db-cards.js) ===== */
.db-facets{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:10px 0 4px; margin:4px 0 12px; }
.dbc-row{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-bottom:8px; }
/* 묶음 한 줄 = 이름표 열(고정 폭) + 칩. 이름표가 같은 세로선에 서야 훑어 내려가며 읽힌다 */
.dbc-row:not(.dbc-act){ display:grid; grid-template-columns:104px minmax(0,1fr); align-items:start; gap:6px 10px; }
.dbc-row:not(.dbc-act) > .dbc-lab{ padding-top:7px; }
.dbc-row:not(.dbc-act) > .dbc-sel{ justify-self:start; max-width:100%; }
.dbc-lab{ font-size:var(--fs-sm); font-weight:700; color:var(--slate); min-width:64px; }
.dbc-hint, .dbc-meta{ font-size:var(--fs-sm); color:var(--sub); }
.dbc-sp{ flex:1 1 auto; }
.dbc-sel{ width:auto; padding:6px 10px; font-size:var(--fs-sm); }
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ min-height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:var(--paper); font:inherit; font-size:var(--fs-sm); font-weight:600; color:var(--slate); cursor:pointer; }
.chip b{ margin-left:6px; color:var(--sub); font-weight:600; font-variant-numeric:tabular-nums; }
.chip:hover:not(:disabled){ border-color:var(--coral); }
.chip[aria-pressed="true"], .chip-on{ background:var(--coral); border-color:var(--coral); color:#fff; }
.chip[aria-pressed="true"] b{ color:#fff; }
.chip:disabled{ opacity:.45; cursor:default; }
.chip-pre{ border-style:dashed; }
.dbc-cards{ margin-top:6px; }
.dbc-univ{ margin:0 0 22px; }
.dbc-gh{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 8px; }
.dbc-uname{ border:0; background:transparent; padding:0; font:inherit; font-size:var(--fs-lg); font-weight:700; color:var(--ink); cursor:pointer; letter-spacing:-.03em; }
.dbc-uname:hover{ color:var(--coralDk); }
/* 칸 수가 모자란 마지막 줄이 회색으로 차지 않게 — 격자 배경 대신 칸마다 오른쪽·아래 선 */
.leaf-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.leaf{ background:var(--paper); border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:12px 14px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.leaf h3{ margin:0; font-size:var(--fs-base); color:var(--ink); letter-spacing:-.025em; line-height:1.3; }
.leaf-sub{ font-size:var(--fs-sm); color:var(--sub); margin-top:-4px; }
.leaf-dl{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 12px; margin:0; font-size:var(--fs-sm); }
.leaf-dl dt{ color:var(--sub); font-weight:600; white-space:nowrap; }
.leaf-dl dd{ margin:0; color:var(--body); overflow-wrap:anywhere; }
.dbc-min{ color:var(--coralDk); font-weight:600; }
.leaf-teacher{ border-top:1px dashed var(--line); padding-top:8px; font-size:var(--fs-sm); color:var(--slate); }
.leaf-teacher b{ color:var(--ink); }
.leaf-acts{ display:flex; align-items:flex-start; gap:8px; margin-top:auto; padding-top:4px; }
.dbc-raw{ font-size:var(--fs-sm); color:var(--slate); }
.dbc-raw summary{ cursor:pointer; color:var(--coralDk); font-weight:600; }
.dbc-raw dl{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 10px; margin:6px 0 0; }
.dbc-raw dt{ color:var(--sub); font-weight:600; } .dbc-raw dd{ margin:0; }
.dbc-more{ margin:4px 0 20px; }
.dbc-empty{ color:var(--sub); font-size:var(--fs-md); padding:28px 0; }
.dbc-detail-head{ border-bottom:1px solid var(--line); padding:0 0 14px; margin:0 0 16px; }
.dbc-dh-top{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.dbc-dh-top h2{ margin:0; font-size:var(--fs-page); color:var(--ink); }
.dbc-dh-tabs{ display:flex; gap:6px; margin:12px 0 0; }
.dbc-chg{ margin-top:12px; font-size:var(--fs-sm); }
.dbc-chg summary{ cursor:pointer; font-weight:700; color:var(--warn); }
.dbc-src{ margin:10px 0 0; font-size:var(--fs-xs); color:var(--sub); }
@media (max-width:1000px){ .leaf-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px){ .leaf-grid{ grid-template-columns:1fr; } .dbc-row:not(.dbc-act){ grid-template-columns:minmax(0,1fr); gap:4px; } .dbc-row:not(.dbc-act) > .dbc-lab{ padding-top:0; } .dbc-lab{ min-width:0; width:100%; } }
@media print{ .db-facets, .leaf-acts{ display:none!important; } }

/* ===== 카드 수시·정시 줄의 표준 배지 · 입력 칸 접기 (js/silgi-guide.js · consult-view.js) ===== */
.s_badges{ margin-top:4px; }
.s_badges .bdg, .s_badges .tag-silgi{ min-height:22px; }
.sec-cap{ display:inline-block; margin-left:10px; font-size:var(--fs-sm); font-weight:500; color:var(--sub); letter-spacing:-.01em; }
.sec-done{ font-size:var(--fs-sm); font-weight:700; color:var(--ok); margin-left:8px; }
.stepnav a.done::after{ content:' ✓'; color:var(--ok); }

/* ===== 기기별 맞춤 — 폰(360~430) · 접는 폰·태블릿(600~1024) · 노트북(1280~1536) · 큰 모니터 =====
   2026-10 전체 화면을 기기 폭 11가지로 렌더해 점검한 결과를 한곳에 모았다. breakpoint 는 1000 · 900 · 760 · 520 넷뿐.
   원칙: 폰에서 가로 스크롤로 숨기지 않고 줄을 접는다(탭·필터·요약 수치) · 인쇄는 @media screen 으로 걸러 표 그대로. */

/* 열 수가 바뀌는 격자는 내용 최소폭에 밀려 넘치지 않게 minmax(0,…) */
.mgrid{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.mgrid.mgrid3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.bandinfo{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.reco-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.sum-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){
  .mgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  /* 태블릿 세로(768 등) — 머리 버튼 여섯 개가 이름 옆에 다 안 들어가 '로그아웃'만 홀로 떨어졌다. 이름 한 줄 · 버튼 한 줄로 */
  .topbar .sp{ flex:0 0 100%; height:0; }
}
@media (max-width:760px){
  .bandinfo, .reco-grid{ grid-template-columns:minmax(0,1fr); }
  .sum-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* 내신 결과 수치 — 접힌 둘째 줄이 세로선으로 시작하지 않게 2열 격자 */
  .result .row1{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:14px; }
  .stat{ padding:2px 12px 4px; }
  .stat:nth-child(odd){ border-left:0; padding-left:0; }
  .stat .val{ font-size:var(--fs-xl); }
}
@media (max-width:520px){ .mgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .mgrid.mgrid3{ grid-template-columns:minmax(0,1fr); } }

/* 폰의 내신·성취도 표 — 640px 표를 가로로 밀던 것을 한 과목 두 줄(학기·과목군·과목명 / 단위·등급·삭제)로 접는다 */
@media screen and (max-width:760px){
  #sec2 .scrollx, #sec3 .scrollx{ overflow:visible; background:none; }
  #sec2 .tbl, #sec3 .tbl{ display:block; min-width:0; }
  #sec2 .tbl thead, #sec3 .tbl thead{ display:none; }
  #subjects, #achieve{ display:block; }
  #subjects tr, #achieve tr{ display:grid; gap:6px; padding:10px 0; border-top:1px solid var(--line2); }
  #subjects tr:first-child, #achieve tr:first-child{ border-top:0; }
  #subjects td, #achieve td{ display:block; padding:0; border:0; min-width:0; }
  #subjects tr:hover td, #achieve tr:hover td{ background:transparent; }
  #subjects tr{ grid-template-columns:84px 92px minmax(0,1fr) 36px; }
  #subjects td:nth-child(3){ grid-column:3 / 5; }
  #subjects td:nth-child(4), #subjects td:nth-child(5){ display:flex; align-items:center; gap:6px; }
  #subjects td:nth-child(4){ grid-column:1; } #subjects td:nth-child(5){ grid-column:2; }
  #subjects td:nth-child(6){ grid-column:4; }
  #subjects td:nth-child(4)::before{ content:'단위'; }
  #subjects td:nth-child(5)::before{ content:'등급'; }
  #subjects td:nth-child(4)::before, #subjects td:nth-child(5)::before{ flex:none; font-size:var(--fs-xs); font-weight:600; color:var(--sub); }
  #achieve tr{ grid-template-columns:minmax(0,1fr) 64px 86px 36px; align-items:center; }
  #subjects td:last-child, #achieve td:last-child{ display:flex; justify-content:flex-end; align-items:center; }
  #subjects input, #subjects select, #achieve input, #achieve select{ width:100%; min-width:0; padding-left:8px; padding-right:6px; }
}

/* 한눈에 보기 표 — 폰에서는 머리글 줄바꿈을 허용하고, 그래도 넓으면 그 표만 옆으로 민다 */
@media screen and (max-width:760px){
  .sumtbl th{ white-space:normal; }
  .sum-sec{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .sum-h .meta{ width:100%; }
}

/* 입시 자료 — 폰·태블릿 세로에선 탭 묶음을 줄 바꿈으로 접어 특별 전형·참고 자료가 화면 밖으로 숨지 않게 */
@media (max-width:760px){
  .dbtabs{ flex-wrap:wrap; overflow:visible; column-gap:6px; row-gap:6px; }
  .dbtabs button{ padding:8px 10px; }
  .dbtab-gl{ padding:0 10px 1px; }
  .dbtab-spe, .dbtab-ref{ border-left:0; padding-left:0; }
}
@media (max-width:520px){
  /* 필터는 두 칸씩 고르게 — 폭이 제각각인 드롭다운이 들쭉날쭉 쌓이지 않게 */
  .dbfilters select, .dbfilters .db-more-btn{ flex:1 1 calc(50% - 4px); min-width:0; }
  .db-sort{ flex:1 1 100%; }
  .db-sort select{ flex:1 1 auto; }
  .db-more select{ flex:1 1 100%; }
  .db-pop{ left:0; width:100%; }
}

/* 교사 콘솔 — 폰에서 산출설정 체크 묶음이 한 줄로 늘어져 넘치던 것 */
@media (max-width:520px){
  .uc-checks label{ white-space:normal; flex-wrap:wrap; }
  .uc-fieldset{ padding:10px 10px; min-width:0; }
}

/* 손가락으로 누르는 기기 — 작은 단추의 누르는 면적만 키운다(보이는 크기는 거의 그대로) */
@media (pointer:coarse){
  .sec-toggle{ min-height:40px; }
  .db-help-btn{ width:30px; height:30px; }
  details.qh>summary{ width:24px; height:24px; }
  .del-btn{ width:36px; height:36px; }
  .mini{ padding:8px 12px; }
  .howto .howto-x{ padding:8px 10px; }
  .lc-alt a, .site-foot a{ display:inline-block; padding:4px 0; }
}

#teacherAdminPanel label > input[type=checkbox]{ margin-top:4px; flex:none; }

/* ===== 고정 머리 · 스크롤 상자 · 스크롤 막대 =====
   위에 붙는 것은 세 층뿐이다: 공통 내비(.gnav, --navH) → 화면 머리 띠(#stickyHead · #dbStickyHead) → 입시 자료 찾기 머리(.db-find).
   긴 표는 '상자(.scroll-box)' 안에서 가로·세로로 스크롤한다 — 머리 줄과 첫 열이 붙어 있고, 가로 막대가 표 맨 아래(수백 줄 밑)가 아니라
   화면 안에 있다. 표가 짧으면 상자는 내용만큼만 커져 막대가 생기지 않는다. 인쇄는 상자를 풀어 표 전체가 나간다. */
.scrollx, .scroll-box, .db-pop, .inq-box, .sg-modal, .tb-menu, .rb-menu, .sg-list{ scrollbar-width:thin; }
@media screen{
  .scroll-box{ max-height:calc(100dvh - var(--navH,0px) - var(--boxOff,96px)); min-height:240px; overflow:auto; overscroll-behavior-x:contain;
    border:1px solid var(--line2); border-radius:var(--r-ctl); }
  .scroll-box:not(:has(tr)){ min-height:0; }
  /* 입시 자료 — 성적 비교 띠·찾기 머리가 위에 붙어 있으니 그만큼 뺀다(--dbTop · --dbFindH 는 app.js 가 잰다) */
  #database .scroll-box{ --boxOff:calc(var(--dbTop,0px) + var(--dbFindH,120px) + 24px); }
  .scroll-box > table thead th{ position:sticky; top:0; z-index:2; background:var(--paper); box-shadow:inset 0 -1px 0 var(--line); }
  .scroll-box > .tbl-stick thead tr:first-child th:first-child{ z-index:3; }
  .scroll-box > table{ border-collapse:separate; border-spacing:0; }
}
@media print{ .scroll-box{ max-height:none; overflow:visible; border:0; } }
/* 떠 있는 메뉴가 화면보다 길면 메뉴 안에서 스크롤 */
.tb-menu, .rb-menu{ max-height:calc(100dvh - var(--navH,0px) - 120px); overflow-y:auto; overscroll-behavior:contain; }
/* 실기 가이드 — 왼쪽 종목 목록은 오른쪽 설명을 내려 읽는 동안 제자리에 */
@media (min-width:761px){
  .sg-list{ position:sticky; top:0; align-self:start; max-height:calc(92vh - 140px); overflow-y:auto; }
}

/* ===== 폰·태블릿 세로(≤900px) — 학생 카드 고정 머리는 단계 내비 한 줄만 =====
   이름·단추·요약 띠·단계 내비를 통째로 붙이면 폰에서 433px(화면의 51%), 768px 에서 333px(37%)를 가려
   입력 칸이 화면 아래 절반에만 보였다. 머리(이름·단추·요약 띠)는 맨 위에서 한 번 보고 지나가게 두고,
   섹션 이동용 단계 내비만 붙인다. #stickyHead 는 display:contents 로 풀어 단계 내비가 #app 높이 전체에서 붙는다. */
@media screen and (max-width:900px){
  #stickyHead{ display:contents; }
  #stickyHead > .topbar{ padding-top:12px; }
  #stepNav{ position:sticky; top:var(--navH,0px); z-index:40; background:var(--bg); transition:top .2s ease;
    margin-left:calc(-1 * var(--gut)); margin-right:calc(-1 * var(--gut)); padding-left:calc(var(--gut) + 2px); padding-right:calc(var(--gut) + 2px); }
  #app section.section, #app details.fold{ scroll-margin-top:calc(var(--navH,0px) + 56px); }
}
@media screen and (max-width:520px){
  #app section.section, #app details.fold{ scroll-margin-top:calc(var(--navH,0px) + 80px); }
}