/* jobsschool.css — 마이베스트 특성화중&고 서비스 레이어
   중앙 정본(eduverse.css) 뒤에 로드.
   2026-09-02 회장 지시로 이 서비스만 라이트 테마로 전환 — 다른 16개 자매 서비스는 계속 다크 스페이스 정본을 그대로 쓴다.
   방식: 정본 파일(eduverse.css)은 한 글자도 고치지 않고, 이 서비스 레이어에서 --ev-* 커스텀 프로퍼티 값만 다시 선언한다.
   (CSS 커스텀 프로퍼티는 나중에 로드되는 파일이 값을 덮어써도 되는 게 원래 용도 — 정본 셀렉터·구조는 그대로 재사용된다.)
   신규 hex 하드코딩은 이 파일의 :root 라이트 팔레트 선언 블록 안에서만 허용한다. */
:root {
  --ev-accent:   var(--pl-future);  /* #FF6B81 코랄 — 진로 전환·미래역량 */
  --ev-accent-2: var(--pl-book);    /* #FFC24B 골드 — 리포트·출판 상품 */
  --glow: 0 0 32px rgba(255,107,129,.28);

  /* ---------- 라이트 테마 팔레트 (정본 다크 토큰 재정의) ---------- */
  --ev-void:        #FFFFFF;
  --ev-deep:         #FFFFFF;
  --ev-nebula-1:    #FFE9EC;
  --ev-nebula-2:    #FFF3DC;
  --ev-nebula-3:    #E9F1FF;

  --ev-surface:      rgba(23,26,43,.035);
  --ev-surface-2:    rgba(23,26,43,.06);
  --ev-surface-3:    rgba(23,26,43,.09);
  --ev-line:         rgba(23,26,43,.10);
  --ev-line-strong:  rgba(23,26,43,.18);

  --ev-text:         #171A2B;
  --ev-text-2:       #565C71;
  --ev-text-3:       #8A90A3;

  --sh-1: 0 2px 10px rgba(23,26,43,.06);
  --sh-2: 0 16px 40px rgba(23,26,43,.10);

  --js-bg-rgb: 246,247,251; /* rgba() 계산용 — --ev-void 를 rgb 성분으로 */
}

/* ---------- 레이아웃 유틸 (정본 토큰만 사용) ---------- */
.js-section { padding: var(--sp-12) 0; }
.js-section--tight { padding: var(--sp-10) 0; }
.js-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-5); }

.js-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--ev-accent); text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: rgba(255,107,129,.12); border: 1px solid rgba(255,107,129,.28);
}

.js-h1 { font-size: clamp(32px,4.6vw,56px); line-height: 1.14; font-weight: 800; letter-spacing: -.01em; color: var(--ev-text); }
.js-h2 { font-size: clamp(24px,3vw,34px); line-height: 1.22; font-weight: 800; color: var(--ev-text); }
.js-lead { font-size: 18px; line-height: 1.65; color: var(--ev-text-2); }

.js-grad-text {
  background: linear-gradient(90deg, var(--pl-future), var(--pl-book));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- 카드 ---------- */
.js-card {
  background: var(--ev-surface); border: 1px solid var(--ev-line);
  border-radius: var(--r-lg); backdrop-filter: blur(var(--ev-blur));
  padding: var(--sp-6); transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.js-card:hover { border-color: var(--ev-line-strong); background: var(--ev-surface-2); transform: translateY(-2px); }

/* ---------- 12유형 타입 배지 (전부 정본 팔레트 재사용) ---------- */
.js-badge { display: inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--ev-line-strong); }
.js-badge--meister  { color: var(--ev-cyan);  background: rgba(76,201,240,.14); }
.js-badge--voc       { color: var(--ev-mint);  background: rgba(69,224,168,.14); }
.js-badge--alt       { color: var(--ev-coral); background: rgba(255,107,129,.14); }
.js-badge--special   { color: var(--pl-parent); background: rgba(255,143,177,.14); }
.js-badge--art       { color: var(--ev-accent-2); background: rgba(255,194,75,.14); }

/* ---------- 버튼 (정본 클래스 확장) ---------- */
.js-btn-primary {
  background: linear-gradient(135deg, var(--pl-future), var(--pl-book));
  color: var(--on-accent); font-weight: 800; border: none; border-radius: var(--r-pill);
  padding: 14px 28px; box-shadow: var(--glow); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.js-btn-primary:hover { transform: translateY(-1px) scale(1.015); box-shadow: 0 0 46px rgba(255,107,129,.5); }

/* ---------- 무료/락 콘텐츠 게이트 ---------- */
.js-gate {
  position: relative; overflow: hidden; border-radius: var(--r-lg); max-height: 640px;
}
.js-gate__veil {
  position: absolute; inset: 0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap: var(--sp-3);
  background: linear-gradient(180deg, rgba(var(--js-bg-rgb),0) 0%, rgba(var(--js-bg-rgb),.90) 40%, var(--ev-void) 78%);
  text-align:center; padding: var(--sp-6) var(--sp-6) var(--sp-8);
}

/* ---------- 진단 6축 프로그레스 ---------- */
.js-axis-bar { height: 8px; border-radius: var(--r-pill); background: var(--ev-surface-3); overflow: hidden; }
.js-axis-bar__fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--pl-future), var(--pl-book)); transition: width var(--dur-3) var(--ease); }

/* ---------- 에그머니 위젯 ---------- */
.js-egg { display:inline-flex; align-items:center; gap:6px; font-weight:800; color: var(--ev-gold); }
.js-egg::before { content:"🥚"; font-size: 14px; filter: saturate(1.1); }

/* ---------- 2단 레이아웃 (모바일에서 1단으로) ---------- */
.js-two-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-8); align-items: center; }
.js-two-col--even { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }

/* ---------- 문서 레벨 가로 오버플로 방지 ---------- */
html, body { max-width: 100%; overflow-x: hidden; }

/* ---------- 라이트 테마: 별 반짝임(정본 .ev-stars)은 낮 배경에 안 맞아 끈다 ---------- */
.ev-stars { display: none; }
.ev-space { opacity: .7; }

/* ---------- 히어로 일러스트 (사진 대체 — 실제 인물 사진 대신 오리지널 SVG 그래픽) ---------- */
.js-hero-visual {
  position: relative; width: 100%; aspect-ratio: 480 / 460; max-width: 460px; margin: 0 auto;
}
.js-hero-visual__art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: var(--r-lg); background: var(--ev-deep);
  border: 1px solid var(--ev-line); box-shadow: var(--sh-2);
}
.js-hero-visual__float {
  position: absolute; left: -8%; bottom: -10%; width: 62%; min-width: 210px;
  box-shadow: var(--sh-2);
}

/* 실제 공개 체험이 만드는 결과를 히어로에서 그대로 설명한다. */
.js-outcome-preview {
  width:100%; max-width:520px; margin:0 auto; padding:clamp(24px,4vw,38px);
  border:1px solid var(--ev-line-strong); border-radius:var(--r-lg);
  background:var(--ev-void); box-shadow:var(--sh-2);
}
.js-outcome-preview h2 { margin:18px 0; color:var(--ev-text); font-size:clamp(23px,2.5vw,32px); line-height:1.25; }
.js-outcome-preview dl { margin:0 0 22px; }
.js-outcome-preview dl > div { padding:14px 0; border-top:1px solid var(--ev-line); }
.js-outcome-preview dt { color:var(--ev-text-3); font-size:12px; font-weight:800; }
.js-outcome-preview dd { margin:5px 0 0; color:var(--ev-text-2); line-height:1.55; }

@media (max-width: 860px) {
  .js-hero-visual { max-width: 340px; aspect-ratio: 480 / 500; margin-bottom: var(--sp-10); }
  .js-hero-visual__float { left: 0; bottom: -14%; width: 74%; }
}

/* ---------- 반응형 ---------- */
@media (max-width: 860px) {
  .js-section { padding: var(--sp-10) 0; }
  .js-h1 { font-size: clamp(28px,7vw,40px); }
  .js-wrap { width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
  .js-two-col, .js-two-col--even { width:100%; min-width:0; grid-template-columns: minmax(0,1fr); }
  .js-h1, .js-h2, .js-lead { overflow-wrap:anywhere; }
}

/* ============================================================
   사이드바 레이아웃 셸 — 사이트 전체 골격
   .js-shell = 사이드바 + 본문 2단. 모바일에서는 사이드바가 상단 가로 스트립으로 접힌다.
   ============================================================ */
.js-shell { display: flex; align-items: flex-start; min-height: 100vh; }

.js-sidebar {
  width: 268px; flex: 0 0 268px; position: sticky; top: 0; align-self: flex-start;
  height: 100vh; overflow-y: auto; overflow-x: hidden;
  border-right: 1px solid var(--ev-line); background: var(--ev-surface);
  backdrop-filter: blur(var(--ev-blur));
  display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-4) var(--sp-6);
  scrollbar-width: thin;
}

.js-sidebar__brand {
  display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px;
  color: var(--ev-text); text-decoration: none; padding: 6px 10px var(--sp-5);
}
.js-sidebar__brand span { font-size: 18px; }

.js-sidebar__group-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ev-text-3); margin: var(--sp-4) 10px 6px;
}
.js-sidebar__group-label:first-of-type { margin-top: 0; }

.js-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }

.js-sidebar__link {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: var(--r-md);
  color: var(--ev-text-2); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.js-sidebar__link:hover { background: var(--ev-surface-2); color: var(--ev-text); }
.js-sidebar__link[aria-current="page"] {
  background: linear-gradient(90deg, rgba(255,107,129,.16), rgba(255,194,75,.10));
  color: var(--ev-text); box-shadow: inset 2px 0 0 var(--ev-accent);
}
.js-sidebar__num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; background: var(--ev-surface-3); color: var(--ev-text-3);
}
.js-sidebar__link[aria-current="page"] .js-sidebar__num { background: var(--ev-accent); color: var(--on-accent); }

.js-sidebar__promo {
  margin-top: auto; padding-top: var(--sp-5);
}
.js-sidebar__promo .js-card { padding: var(--sp-4); }
.js-sidebar__promo strong { display: block; color: var(--ev-text); font-size: 14px; }
.js-sidebar__promo p { color: var(--ev-text-2); font-size: 12px; margin: 6px 0 12px; line-height: 1.5; }

.js-shell__main { flex: 1 1 auto; min-width: 0; }

.js-topbar {
  display: flex; align-items: center; gap: var(--sp-3); height: 60px;
  padding: 0 var(--sp-6); border-bottom: 1px solid var(--ev-line);
  position: sticky; top: 0; z-index: 5; background: rgba(var(--js-bg-rgb),.78); backdrop-filter: blur(var(--ev-blur));
}
.js-topbar__current { font-size: 13px; font-weight: 700; color: var(--ev-text-2); }
.js-topbar__spacer { flex: 1; }
.js-topbar__pill {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(69,224,168,.14); color: var(--ev-mint); border: 1px solid rgba(69,224,168,.28);
}

/* 학교 상세 */
.js-detail__back { display: inline-block; margin-bottom: var(--sp-5); color: var(--ev-text-2); font-size: 14px; }
.js-detail__hero { display: flex; justify-content: space-between; gap: var(--sp-6); align-items: flex-end; }
.js-detail__hero .js-h1 { margin-top: var(--sp-3); }
.js-detail__hero .js-lead { margin-top: var(--sp-2); }
.js-detail__badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.js-detail__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex: 0 0 auto; }
.js-detail__notice { margin-top: var(--sp-6); padding: var(--sp-4); border: 1px solid var(--ev-line); border-radius: var(--r-md); background: var(--ev-surface-2); color: var(--ev-text-2); }
.js-detail__notice strong { color: var(--ev-text); }
.js-detail__notice p { margin-top: var(--sp-2); font-size: 13px; }
.js-detail__notice .btn { margin-top: var(--sp-4); }
.js-detail__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); }
.js-detail__grid .js-card:hover, .js-detail__source-card:hover { transform: none; }
.js-detail__facts { margin-top: var(--sp-4); }
.js-detail__facts div { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--ev-line); }
.js-detail__facts dt { color: var(--ev-text-3); font-size: 12px; font-weight: 700; }
.js-detail__facts dd { color: var(--ev-text-2); font-size: 14px; overflow-wrap: anywhere; }
.js-detail__summary { color: var(--ev-text-2); font-size: 14px; line-height: 1.7; margin-top: var(--sp-3); }
.js-detail__subhead { color: var(--ev-text); font-size: 14px; margin-top: var(--sp-5); }
.js-detail__list { margin: var(--sp-3) 0 0; padding-left: var(--sp-5); color: var(--ev-text-2); font-size: 14px; }
.js-detail__list li + li { margin-top: var(--sp-2); }
.js-detail__empty { margin-top: var(--sp-3); color: var(--ev-text-3); font-size: 13px; }
.js-detail__source-link { margin-top: var(--sp-4); color: var(--ev-text-2); font-size: 13px; }
.js-detail__source-link a, .js-detail__sources a { color: var(--ev-accent); }
.js-detail__source-card { margin-top: var(--sp-4); }
.js-detail__sources { margin: var(--sp-4) 0 0; padding-left: var(--sp-5); color: var(--ev-text-2); }
.js-detail__sources li + li { margin-top: var(--sp-2); }

@media (max-width: 700px) {
  .js-detail__hero { align-items: flex-start; flex-direction: column; }
  .js-detail__actions { width: 100%; }
  .js-detail__actions .btn { flex: 1 1 auto; }
  .js-detail__grid { grid-template-columns: 1fr; }
  .js-detail__facts div { grid-template-columns: 80px 1fr; }
}

@media (max-width: 900px) {
  .js-shell { flex-direction: column; }
  .js-shell__main { width:100%; max-width:100%; min-width:0; overflow-x:clip; }
  .js-sidebar {
    width: 100%; flex: 0 0 auto; height: auto; position: sticky; top: 0; z-index: 20;
    flex-direction: row; align-items: center; padding: 10px var(--sp-4);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  .js-sidebar::-webkit-scrollbar { display: none; }
  .js-sidebar__brand { padding: 0 var(--sp-4) 0 0; flex: 0 0 auto; }
  .js-sidebar__nav { flex-direction: row; gap: 4px; }
  .js-sidebar__group-label { display: none; }
  .js-sidebar__link { white-space: nowrap; padding: 8px 12px; }
  .js-sidebar__num { display: none; }
  .js-sidebar__promo { display: none; }
  .js-topbar { padding: 0 var(--sp-4); }
}

/* 상단은 지원 메뉴, 좌측은 이용 절차로 역할을 분리한다. */
:root { --js-bg-rgb: 255,255,255; }
.js-topbar__nav { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.js-topbar__nav a {
  display:inline-flex; align-items:center; min-height:44px; padding:7px 10px;
  border-radius:var(--r-md); color:var(--ev-text-2); font-size:13px; font-weight:700;
  text-decoration:none; white-space:nowrap;
}

@media (max-width: 1120px) and (min-width: 901px) {
  .js-topbar__pill { display:none; }
}
.js-topbar__nav a:hover,
.js-topbar__nav a[aria-current="page"] { background:var(--ev-surface-2); color:var(--ev-text); }

@media (max-width: 900px) {
  .js-topbar { padding:0 var(--sp-4); overflow-x:auto; scrollbar-width:none; }
  .js-topbar::-webkit-scrollbar { display:none; }
  .js-topbar__current, .js-topbar__pill, .js-topbar__spacer { display:none; }
  .js-topbar__nav { min-width:max-content; width:100%; }
}

@media (max-width: 560px) {
  .js-two-col > * { min-width:0; }
  .js-hero-actions { flex-direction:column; align-items:stretch; width:100%; max-width:100%; min-width:0; }
  .js-hero-actions .btn { width:100%; max-width:100%; min-width:0; box-sizing:border-box; justify-content:center; white-space:normal; text-align:center; }
  .js-sidebar { display:block; padding:10px var(--sp-4); }
  .js-sidebar__brand { display:flex; padding:0 0 8px; }
  .js-sidebar__nav { overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
  .js-sidebar__nav::-webkit-scrollbar { display:none; }
  .js-topbar { height:52px; }
  .js-topbar__nav a { min-height:44px; padding:6px 9px; font-size:12px; }
}