/* AX 교육 › 바이브코딩 교육 (/edu/vibe-coding/, /edu/vibe-coding/program/) — 목록 카드 + 신청 폼 + 신청내역 + 상세. 토큰은 style.css 것만 쓴다. */
.edu-list{display:grid;gap:var(--s4);margin-top:var(--s6)}
.edu-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:var(--s6);display:grid;gap:var(--s3)}
.edu-card h3{font-size:1.25rem;margin:0;line-height:1.35}
.edu-card h3 a{color:inherit;text-decoration:none}
.edu-card h3 a:hover{text-decoration:underline}
.edu-top{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.edu-pill{display:inline-block;font-size:.78rem;font-weight:600;padding:.2rem .6rem;border-radius:999px;background:var(--surface-sunken);color:var(--text-2)}
.edu-pill.open{background:var(--ok-bg);color:var(--ok)}
.edu-pill.closed{background:var(--warn-bg);color:var(--warn)}
.edu-meta{display:grid;grid-template-columns:auto 1fr;gap:.35rem var(--s4);font-size:.95rem;margin:0}
.edu-meta dt{color:var(--text-3);white-space:nowrap}
.edu-meta dd{margin:0;white-space:pre-line;color:var(--text);overflow-wrap:anywhere}
.edu-details{white-space:pre-wrap;color:var(--text-2);font-size:.95rem;line-height:1.7;margin:0}
.edu-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
.edu-btns{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.edu-empty{padding:var(--s10) var(--s6);text-align:center;color:var(--text-3);border:1px dashed var(--border);border-radius:14px;margin-top:var(--s6)}
.edu-h2row{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}

.edu-form{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:var(--s6);display:grid;gap:var(--s6)}
.edu-field{display:grid;gap:.4rem}
.edu-field > label,.edu-field > span.lbl{font-weight:600;font-size:.95rem}
.edu-field .req{color:var(--brand)}
.edu-field .hint,.edu-lookup .hint{font-size:.85rem;color:var(--text-3)}
.edu-form input[type=text],.edu-form input[type=email],.edu-form input[type=tel],.edu-form select,.edu-form textarea,.edu-lookup input[type=email]{
  width:100%;box-sizing:border-box;font:inherit;padding:.65rem .8rem;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text)}
.edu-form textarea{min-height:7rem;resize:vertical}
.edu-form input:focus,.edu-form select:focus,.edu-form textarea:focus,.edu-lookup input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
.edu-levels{display:grid;gap:.45rem}
.edu-levels label{display:flex;gap:.6rem;align-items:center;padding:.6rem .8rem;border:1px solid var(--border);border-radius:10px;cursor:pointer}
.edu-levels label:has(input:checked){border-color:var(--brand);background:var(--brand-subtle)}
.edu-consent{font-size:.88rem;color:var(--text-2);background:var(--surface-subtle);border-radius:10px;padding:var(--s4);line-height:1.7}
.edu-consent label{display:flex;gap:.5rem;align-items:flex-start;color:var(--text);font-weight:600;margin-top:.5rem}
.edu-msg{font-size:.95rem;margin:0}
.edu-msg.err{color:var(--danger)}
.edu-msg.ok{color:var(--ok)}
.edu-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.edu-done{background:var(--ok-bg);color:var(--ok);border-radius:14px;padding:var(--s6);font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 신청내역 확인 */
.edu-lookup{background:var(--surface-subtle);border:1px solid var(--border);border-radius:14px;padding:var(--s6);display:grid;gap:var(--s3);margin-bottom:var(--s6)}
.edu-lookup h3{margin:0;font-size:1.1rem}
.edu-lookup-form{display:flex;gap:var(--s2);flex-wrap:wrap}
.edu-lookup-form input{flex:1 1 16rem}
.edu-lookup-list{display:grid;gap:var(--s3)}
.edu-lookup-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:var(--s4);display:grid;gap:.5rem}
.edu-lookup-item h4{margin:0;font-size:1.05rem}
.edu-lookup-item h4 a{color:inherit;text-decoration:none}
.edu-lookup-item h4 a:hover{text-decoration:underline}

/* 교육 상세 — ★ 공용 section{padding:80px 0} 에 안 걸리게 전부 div 로 그리고 간격은 여기서만 준다.
   왼쪽 본문 + 오른쪽(포스터·준비물·문의) sticky. 모바일은 한 열 + 하단 고정 버튼(2026-09-22). */
.edu-back{margin:0 0 var(--s4);font-size:.95rem}
.edu-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,19rem);gap:var(--s10);align-items:start}
.edu-main-col{display:grid;gap:var(--s10);min-width:0}
.edu-side-col{display:grid;gap:var(--s4);position:sticky;top:5.5rem}
.edu-dhead{display:grid;gap:var(--s3);max-width:52rem}
.edu-dhead h1{margin:0;line-height:1.25}
.edu-dhead .lead{margin:0}
.edu-dposter{border-radius:14px;overflow:hidden;border:1px solid var(--border);box-shadow:0 12px 32px rgba(0,0,0,.12);background:var(--surface)}
.edu-dposter img{display:block;width:100%;height:auto}
.edu-poster-inline{display:none}
.edu-key{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:var(--s6);display:grid;gap:var(--s4)}
.edu-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--s3)}
.edu-fact{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.6rem;align-items:center;padding:var(--s3) var(--s4);background:var(--surface-subtle);border-radius:12px}
.edu-fact-ic{grid-row:1/3;font-size:1.35rem;line-height:1}
.edu-fact-k{font-size:.78rem;color:var(--text-3);font-weight:600;letter-spacing:.02em}
.edu-fact-v{font-size:.95rem;font-weight:600;color:var(--text);white-space:pre-line;overflow-wrap:anywhere}
.edu-sec{display:grid;gap:var(--s3);padding:0;margin:0}
.edu-sec h2{margin:0;font-size:1.35rem;padding-bottom:.5rem;border-bottom:2px solid var(--border)}
.edu-box{background:var(--surface-subtle);border:1px solid var(--border);border-radius:14px;padding:var(--s4)}
.edu-box h2{font-size:1rem;border:0;padding:0}
.edu-ul,.edu-ol{margin:0;padding-left:1.3rem;display:grid;gap:.5rem;line-height:1.6;color:var(--text-2);font-size:.95rem}
.edu-ol{counter-reset:step;list-style:none;padding-left:0}
.edu-ol li{position:relative;padding-left:2.4rem;min-height:1.9rem}
.edu-ol li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--brand-subtle);color:var(--brand);font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.edu-inst{display:flex;gap:var(--s4);align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:var(--s4)}
.edu-inst-avatar{flex:0 0 3.25rem;width:3.25rem;height:3.25rem;border-radius:50%;background:var(--brand-subtle);color:var(--brand);font-weight:700;font-size:1.3rem;display:flex;align-items:center;justify-content:center}
.edu-inst strong{font-size:1.05rem}
.edu-inst-title{color:var(--text-3);font-size:.9rem;margin:.15rem 0 .5rem}
.edu-place{margin:0;font-weight:600}
.edu-link{font-size:.9rem;color:var(--brand);text-decoration:none;font-weight:600}
.edu-link:hover{text-decoration:underline}
.edu-dir{display:grid;gap:var(--s4);scroll-margin-top:5rem}
.edu-dir h2{margin:0;font-size:1.35rem;padding-bottom:.5rem;border-bottom:2px solid var(--border)}
.edu-dir-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s6);align-items:start}
.edu-map{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--surface-sunken);aspect-ratio:16/10}
.edu-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.edu-dir-info{display:grid;gap:var(--s3);background:var(--surface-subtle);border:1px solid var(--border);border-radius:16px;padding:var(--s6)}
.edu-bottom{padding:var(--s8);text-align:center;background:var(--surface-subtle);border-radius:16px;display:grid;gap:var(--s3);justify-items:center}
.edu-bottom .lead{margin:0}
/* 모바일 하단 고정 버튼 — 넓은 화면에서는 없다 */
.edu-mobile-bar{display:none}

@media (max-width:820px){
  .edu-layout,.edu-dir-grid{grid-template-columns:1fr}
  .edu-side-col{position:static}
  .edu-poster-side{display:none}
  .edu-poster-inline{display:block;max-width:20rem;margin:0 auto}
  .edu-map{aspect-ratio:4/3}
  .edu-mobile-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:.6rem var(--s4) calc(.6rem + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(0,0,0,.08)}
  .edu-mobile-bar .edu-btns{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
  .edu-mobile-bar .btn{width:100%;box-sizing:border-box;text-align:center;justify-content:center}
  .edu-mobile-bar .edu-pill{grid-column:1/-1;text-align:center}
  body.has-edu-bar{padding-bottom:5.5rem}
  /* 상담 버튼이 하단 고정 버튼을 가리지 않게 위로 올린다 */
  body.has-edu-bar .fichat-btn{bottom:6rem}
  body.has-edu-bar .fichat-panel{bottom:9.5rem}
}
@media (max-width:640px){
  .edu-card,.edu-form,.edu-key,.edu-lookup{padding:var(--s4)}
  .edu-meta{grid-template-columns:1fr}
  .edu-meta dt{margin-top:.4rem}
}

/* 카드 포스터(2026-09-22) — 왼쪽 포스터 + 오른쪽 내용 */
.edu-card.has-poster{grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:var(--s6);align-items:start}
.edu-card-poster{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--surface-sunken)}
.edu-card-poster img{display:block;width:100%;height:auto}
.edu-card-body{display:grid;gap:var(--s3);min-width:0}
@media (max-width:820px){
  .edu-card.has-poster{grid-template-columns:1fr}
  .edu-card-poster{max-width:16rem}
}
/* 오른쪽 박스 — 패딩을 확실히(공용 규칙·.edu-sec 리셋보다 우선) */
.edu-side-col .edu-box{padding:var(--s4) var(--s4)}
.edu-side-col .edu-box h2{margin-bottom:.15rem}
.edu-side-col .edu-box .edu-details{margin:0}