/* =========================================================
   LABS 아카데믹 센터 — 리뉴얼 디자인 (2026-10-16, 사장님 승인)
   참고: 대학 홈페이지(검정 + 캠퍼스 사진 + 세리프 + 파란 리본)
   style.css 위에 덧씌우는 한 장. 내용·구조·스크립트는 그대로.
   지킨 것(§3 AI 티 제거 원칙): 영어 라벨·이모지 없음 · 버튼 6px · 호버 시 뜨지 않음
   캠퍼스 사진 = assets/img/campus.webp(PC) · campus-m.webp(폰) · campus.jpg(옛 브라우저)
   ========================================================= */
:root{
  --black:#0A0D14; --black-2:#121722; --black-3:#1A2130;
  --ribbon:#3A7BEA;
  /* 캠퍼스 사진: University of Washington(Seattle) Smith Hall · 사진 Zoshua Colah · Unsplash 무료 라이선스 (2026-10-16 저장) */
  --photo:image-set(url("/assets/img/campus.webp") type("image/webp"), url("/assets/img/campus.jpg") type("image/jpeg"));
  --r:14px;
}
body{background:#F3F4F6}

/* ── 헤더·탭: 검정 + 파란 리본 ── */
.hd{background:var(--black); border-bottom:0; position:sticky}
.hd .brand{color:#fff}
.hd .brand small{color:#9AA3B5}
.hd__tel{color:#E6E9F0}
.hd__tel:hover{color:#fff}
.hd__cta{background:var(--ribbon)}
.hd__cta:hover{background:#2F68CC}
.hd__in{position:relative}
.hd__in::after{content:""; position:absolute; right:0; top:0; width:44px; height:96px; background:var(--ribbon);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); pointer-events:none; z-index:2}
.hd__r{padding-right:56px}
.tabs{background:var(--black); border-bottom:1px solid rgba(255,255,255,.08)}
.tab{color:#B4BCCB}
.tab:hover{color:#fff}
.tab[aria-current="page"]{color:#fff; border-bottom-color:var(--ribbon)}

/* ── 첫 화면: 캠퍼스 사진 + 평평한 어두운 막 ── */
.hero{position:relative; background:var(--black) var(--photo) center 40%/cover no-repeat; border-bottom:0; color:#fff; isolation:isolate}
.hero::before{content:""; position:absolute; inset:0; background:rgba(8,11,18,.68); z-index:-1}
.hero .kicker{color:#E7C27A}
.hero h1,.hero .h-lg{color:#fff}
.hero .lead{color:#D3D8E2}
.hero .rev,.hero .disc{color:#AEB6C6}
.hero .rev b{color:#fff}
/* 2026-10-18 사장님: 사진 위 글씨가 흐림 → 상자를 진하게, 글씨를 밝게 */
.hero-em{background:rgba(10,13,20,.86); border-color:rgba(255,255,255,.24)}
.hero-em b{color:#FFE3A6}
.hero-em span{color:#EEF1F6}
.hero .disc{color:#E6EAF1; font-size:14.5px; background:rgba(10,13,20,.78); display:inline-block; padding:9px 14px; border-radius:10px}
.hero .disc a{color:#AFCFFF !important; text-decoration:underline; text-underline-offset:3px}
.hero .btn--o{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.hero .btn--o:hover{border-color:#fff}

/* 상담 폼 = 사진 위 검정 카드 */
.ask{background:rgba(10,13,20,.88); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); color:#fff}
.ask__t{color:#fff}
.ask__d,.ask__fine,.ask__alt{color:#B9C0CE}
.ask__f span,.ask__f span em{color:#C9CFDB}
.ask__f select,.ask__f input{border-color:transparent}
.ask__go{background:var(--ribbon)}
.ask__go:hover{background:#2F68CC}
.ask__msg{color:#fff}
.ask__alt .btn--o{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}

/* 영상·인증서 줄 */
.hero__sub .vid,.hero__sub .certfig{background:var(--black-2); border:1px solid rgba(255,255,255,.1); box-shadow:none}
.hero__sub .vid figcaption,.hero__sub .certfig figcaption{color:#B9C0CE}
.hero__sub .vid figcaption b,.hero__sub .certfig figcaption b{color:#fff}

/* ── 섹션: 흰 바탕 ↔ 검정 바탕 번갈아 ── */
.sec{background:#fff}
.sec--alt{background:var(--black); color:#E8EBF1}
.sec--alt > .wrap > .kicker,.sec--alt .wrap > .kicker{color:#E7C27A}
.sec--alt > .wrap > h2,.sec--alt > .wrap > .h-lg,.sec--alt > .wrap > .h-md,.sec--alt > .wrap > .h-sm{color:#fff}
.sec--alt > .wrap > .lead,.sec--alt > .wrap > p,.sec--alt > .wrap > .disc,.sec--alt > .wrap > .rev{color:#B9C0CE}
.sec--alt > .wrap > p a:not(.btn),.sec--alt > .wrap > .lead a:not(.btn){color:#8DB4FF}
.sec--dark{background:var(--black)}

/* 카드류 — 둥글게, 테두리 대신 옅은 그림자 */
.card,.fact,.step,.tool,.tblwrap,.fields,.faq details,.badge-card,.trainer,.related a,.usa-band,.certfig,.vid{border-radius:var(--r)}
.sec--alt .card,.sec--alt .fact,.sec--alt .step,.sec--alt .badge-card,.sec--alt .faq details,.sec--alt .tblwrap,.sec--alt .fields,.sec--alt .tool{border-color:transparent}
.card .go{color:var(--ribbon)}
.card:hover{border-color:var(--ribbon)}
.sec--alt .card:hover{border-color:var(--ribbon)}
.fact b{color:var(--black)}
.step .n{background:var(--ribbon); color:#fff}
.pchip[aria-pressed="true"]{background:var(--black); border-color:var(--black)}
.note{border-radius:var(--r)}
.sec--alt .note{background:#1E1A12; border-color:#4A3D22; color:#EADBB8}
.sec--alt .note strong{color:#F2D9A5}
.sec--alt .related a{background:var(--black-2); border-color:rgba(255,255,255,.1); color:#E8EBF1}
.sec--alt .related .n{color:#9AA3B5}

/* ── 마무리 상자 = 캠퍼스 사진 띠 ── */
.close{position:relative; background:var(--black) var(--photo) center 55%/cover no-repeat; overflow:hidden; isolation:isolate; border-radius:var(--r)}
.close::before{content:""; position:absolute; inset:0; background:rgba(8,11,18,.74); z-index:-1}

/* ── 푸터 ── */
.ft{background:var(--black); position:relative}
.ft::before{content:""; position:absolute; right:calc(50% - 540px + 18px); top:0; width:44px; height:84px; background:var(--ribbon);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.ft__g{border-bottom-color:rgba(255,255,255,.08)}

/* ── 모바일 ── */
@media (max-width:1100px){ .ft::before{right:18px} }
@media (max-width:620px){
  .hd__in::after{display:none}   /* 폰: 리본 숨김 — 카톡 버튼이 두 줄로 찌그러짐. 하단 바가 대신함 */
  .hd__r{padding-right:0}
  .ft::before{width:30px; height:60px}
  :root{--photo:url("/assets/img/campus-m.webp")}
  .hero{background-position:60% 30%}
}

/* 검정 섹션 안의 흰 카드는 글자색을 다시 진하게 (안 하면 흰 바탕에 흰 글자) */
.sec--alt :is(.card,.fact,.step,.tool,.tblwrap,.fields,.faq details,.badge-card,.trainer,.usa-band,.certfig,.vid,.tres){color:var(--ink)}
.sec--alt :is(.card,.badge-card,.trainer,.usa-band) h3{color:var(--navy)}

/* 점검 수정 — 어두운 바탕 위 굵은 글자·작은 라벨·링크 */
.hero :is(.lead,p) b,.hero :is(.lead,p) strong,.sec--alt > .wrap > :is(.lead,p) :is(b,strong){color:#fff!important}
.hero :is(.lead,p) a:not(.btn){color:#8DB4FF}
.hero .cnav a{color:var(--navy)}
.hero .cnav a:hover{color:var(--ribbon)}
.hero__sub figcaption span,.hero__sub .certfig figcaption{color:#C9CFDB}
.sec--alt .note .m{color:#E7C27A}
.sec--alt .note a:not(.btn){color:#8DB4FF!important}
.hero__sub .certfig figcaption span{color:#C9CFDB!important}

/* 홈: 상담 카드에 카톡·전화가 있으므로 헤더의 전화·카톡은 숨김 (2026-10-16 사장님) */
body:has(#askForm) .hd__r > .hd__tel,body:has(#askForm) .hd__r > .hd__cta{display:none}

/* 상담 카드 아래 연락 버튼 다듬기 */
.ask__or{display:flex; align-items:center; gap:10px; margin:16px 0 0; font-size:12.5px; color:#9AA3B5}
.ask__or::before,.ask__or::after{content:""; flex:1; height:1px; background:rgba(255,255,255,.14)}
.ask__alt{margin-top:10px}
.ask__alt .btn{min-height:52px; gap:8px}
.ask__i{width:18px; height:18px; flex:none}
.ask__tel{background:#fff!important; color:var(--black)!important; border:0!important; text-align:left}
.ask__tel:hover{background:#E9EEF8!important}
.ask__tel span{display:flex; flex-direction:column; line-height:1.25}
.ask__tel em{font-style:normal; font-size:12.5px; font-weight:600; color:#4A5568}
.ask__fine a{color:#CFE0FF; text-decoration:underline; text-underline-offset:2px}

/* 다른 페이지에서 /#askForm 으로 넘어올 때 폼 제목이 고정 메뉴에 가리지 않게 (2026-10-20) */
#askForm{scroll-margin-top:140px}

/* ── 해외 전문직 (2026-10-21) — /career/ 허브·직군 페이지 ── */
.crumb{font-size:13.5px; color:#AEB6C6; margin:0 0 14px}
.crumb a{color:#AFCFFF; text-decoration:underline; text-underline-offset:3px}
.jobs{grid-template-columns:repeat(2,1fr); max-width:900px}
.card .tag--soon{background:#EEF1F6; color:#5B6475}
.card .tag--out{background:#FCEBE4; color:#8A3A1E}
.card--soon{border-style:dashed}
.ask--solo{max-width:560px; margin:0 auto}
.src{margin-top:40px; padding-top:22px; border-top:1px solid var(--rule); font-size:14px; color:var(--ink-2); line-height:1.7}
.src h3{font-size:15px; font-weight:700; color:var(--ink); margin:0 0 8px}
.src ul{margin:0 0 10px; padding-left:18px}
.src li{margin:2px 0}
.src a{color:var(--ribbon); word-break:break-all}
@media (max-width:620px){ .jobs{grid-template-columns:1fr} }
.step p b{display:inline; font-size:inherit; margin:0}