/* ═════════ board.css — 배너판 조각 모양 한 벌 (2026-08-29f) ═════════
   teacher.html(진짜 화면)과 admin.html(미리 보기)이 **같이 쓴다.**
   board.js 가 그리는 것을 여기가 입힌다. 둘 중 하나만 있으면
   미리 보기와 진짜 화면이 어긋난다 — 실제로 그렇게 됐었다.

   ── 세련되게 보이려면 (원장님이 짚으심 — 2026-08-29) ──
   색을 많이 고르게 해서 세련돼지지 않는다. 오히려 반대다.
   그래서 ①연한 것을 기본으로 두고 ②진한 것은 골라야 나오게 하고
   ③여백과 크기를 여기서 제대로 잡는다.
   색은 사진(교재 표지)이 내게 하고 배너는 물러선다. */

/* ── 진하기 두 갈래 ──
   soft  연한 바탕 + 진한 글씨   ← 기본. 한 화면에 여럿 있어도 안 싸운다
   solid 진한 바탕 + 흰 글씨     ← 정말 강조할 때 하나만 */
.bdW{border-radius:16px;margin-bottom:14px;overflow:hidden}

/* ═══ 큰 띠 ═══ */
.bdHero{display:flex;align-items:center;gap:26px;padding:26px 30px;min-height:0}
.bdHero .tx{flex:1;min-width:0;max-width:1100px}
.bdHero.hasArt .tx{max-width:680px}
.bdHero .tag{display:inline-block;border-radius:20px;padding:4px 12px;
  font-size:11.5px;font-weight:700;margin-bottom:10px;
  background:rgba(255,255,255,.2)}
.bdHero.soft .tag{background:rgba(0,0,0,.07)}
.bdHero h2{margin:0 0 8px;font-size:25px;letter-spacing:-.03em;line-height:1.32}
.bdHero p{margin:0;font-size:14px;line-height:1.65;opacity:.88}
.bdHero .art{margin-left:auto;display:flex;gap:12px;flex:0 0 auto}
.bdHero .art img{width:170px;border-radius:9px;display:block;
  box-shadow:0 8px 22px rgba(0,0,0,.26)}

/* 사진 크기 — 작게 · 반반 · 가득 채우기 (원장님이 정하심) */
.bdHero.ph-s .art img{width:132px}
.bdHero.ph-half{padding:0;gap:0;align-items:stretch}
.bdHero.ph-half .art{margin:0;flex:0 0 46%;gap:0}
.bdHero.ph-half .art img{width:100%;height:100%;object-fit:cover;
  border-radius:0;box-shadow:none}
.bdHero.ph-half .tx{padding:30px 32px;max-width:none;align-self:center}
.bdHero.ph-full{position:relative;padding:44px 34px;min-height:240px}
.bdHero.ph-full .art{position:absolute;inset:0;margin:0;gap:0;z-index:0}
.bdHero.ph-full .art img{width:100%;height:100%;object-fit:cover;
  border-radius:0;box-shadow:none}
.bdHero.ph-full .tx{position:relative;z-index:2;max-width:640px}
/* 사진 위에 글이 묻히지 않게 어두운 막을 얹는다 — 진하기는 고른다 */
.bdHero.ph-full::after{content:"";position:absolute;inset:0;z-index:1;
  background:rgba(6,14,28,var(--vail,.42))}

/* 사진 세로 자리 — 큰 띠에서 사진만 위·가운데·아래로 (2026-08-29j) */
.bdHero.pv-t .art{align-self:flex-start}
.bdHero.pv-c .art{align-self:center}
.bdHero.pv-b .art{align-self:flex-end}
.bdHero.pv-x .art{align-self:stretch;align-items:center}
.bdHero.ph-half .art,.bdHero.ph-full .art{align-self:stretch}

/* 글 자리 */
.bdHero.al-center{justify-content:center;text-align:center}
.bdHero.al-center .tx{margin:0 auto}
.bdHero.al-center .bdBtns{justify-content:center}
.bdHero.al-right{text-align:right}
.bdHero.al-right .tx{margin-left:auto}
.bdHero.al-right .bdBtns{justify-content:flex-end}
.bdHero.swap .tx{order:2}
.bdHero.swap .art{order:1;margin-left:0;margin-right:auto}
.bdHero.al-right .art{margin-left:0;margin-right:auto;order:-1}

/* 글자 크기 */
.bdHero.sz-s h2{font-size:20px}
.bdHero.sz-s p{font-size:13px}
.bdHero.sz-l h2{font-size:32px}
.bdHero.sz-l p{font-size:15.5px}
.bdHero.sz-xl h2{font-size:40px;line-height:1.22}
.bdHero.sz-xl p{font-size:17px}

/* ═══ 누르는 단추 ═══
   글자 길이만큼만 차지한다. 늘어나면 글자가 세로로 쓰인다 */
.bdBtns{margin-top:15px;display:flex;gap:9px;flex-wrap:wrap;align-items:flex-start}
.bdBtn{border:none;border-radius:9px;padding:10px 18px;font-size:13.5px;
  font-weight:700;cursor:pointer;font-family:inherit;
  background:#fff;color:#243B5E;
  flex:0 0 auto;align-self:flex-start;width:auto;max-width:100%;
  white-space:nowrap;display:inline-block}
.bdBtn.gh{background:rgba(255,255,255,.16);color:inherit;
  border:1px solid rgba(255,255,255,.36)}
.bdW.soft .bdBtn{background:rgba(0,0,0,.82);color:#fff}
.bdW.soft .bdBtn.gh{background:transparent;color:inherit;
  border:1px solid rgba(0,0,0,.25)}

/* ═══ 사진 카드 셋 ═══
   넓어지면 칸을 늘리지 말고 개수를 늘린다 */
/* 「화면 채우기」를 켜면 칸 수만큼 나눠 폭을 가득 쓴다.
   끄면 한 칸 크기를 지키고 남으면 다음 줄로 넘어간다
   (원장님이 짚으심 — 셋만 만들면 오른쪽이 텅 빈다, 2026-08-29) */
.bdCards{display:grid;gap:15px;margin-bottom:14px;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.bdCards.fill{grid-template-columns:repeat(var(--cdN,3),minmax(0,1fr))}
@media(max-width:900px){
  .bdCards.fill{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}
/* 카드 안 동영상 — 사진과 같은 높이로 나란히 선다 */
.bdCd .ph.vid{padding:0;aspect-ratio:16/9;background:#0B121E;position:relative}
.bdCd .ph.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@supports not (aspect-ratio:16/9){ .bdCd .ph.vid{height:180px} }
.bdCd{background:#fff;border:1px solid #E1E8F2;border-radius:15px;
  overflow:hidden;transition:transform .14s,box-shadow .14s}
.bdCd:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(20,40,75,.11)}
.bdCd .ph{display:flex;align-items:center;justify-content:center;
  padding:18px 0;border-bottom:1px solid #E1E8F2}
.bdCd .ph img{height:212px;display:block;box-shadow:0 5px 16px rgba(0,0,0,.2)}
.bdCd .bd{padding:14px 16px 16px}
.bdCd b{display:block;font-size:14.5px;line-height:1.42}
.bdCd .sub{font-size:12px;color:#6E7B8F;margin-top:5px;line-height:1.55}
.bdCd .rb{display:inline-block;border-radius:5px;padding:2px 8px;
  font-size:10.5px;font-weight:800;margin-bottom:7px}

/* ═══ 색 띠 ═══ */
.bdStrip{display:flex;align-items:center;gap:14px;padding:15px 22px}
.bdStrip .ic{font-size:25px;flex:0 0 auto}
.bdStrip .tx{max-width:820px}
.bdStrip .tx b{display:block;font-size:15px}
.bdStrip .tx span{display:block;font-size:12.5px;opacity:.88;margin-top:3px}
.bdStrip .bdBtns{margin:0 0 0 auto;flex:0 0 auto}

/* ═══ 넓은 카드 둘 · 좌우 반반 ═══ */
.bdTwo{display:grid;gap:15px;margin-bottom:14px;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.bdWc{border-radius:15px;padding:24px 22px;min-height:140px;
  display:flex;flex-direction:column;justify-content:flex-end}
.bdWc b{display:block;font-size:18px;letter-spacing:-.02em}
.bdWc span{display:block;font-size:13px;opacity:.88;margin-top:6px;
  line-height:1.6;max-width:520px}
.bdPm{border-radius:15px;display:flex;overflow:hidden;
  border:1px solid #E1E8F2;background:#fff}
.bdPm:hover{box-shadow:0 8px 20px rgba(20,40,75,.1)}
.bdPm .ph{width:136px;flex:0 0 136px;background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;font-size:33px}
.bdPm .ph img{width:100%;height:100%;object-fit:cover}
.bdPm .bd{padding:16px 18px}
.bdPm b{display:block;font-size:15px}
.bdPm .sub{font-size:12.5px;color:#6E7B8F;margin-top:6px;line-height:1.62}

/* ═══ 숫자 크게 ═══ */
.bdNums{display:grid;gap:15px;margin-bottom:14px;
  grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
.bdNm{border-radius:15px;padding:17px 19px}
.bdNm .lb{font-size:12px;opacity:.85}
.bdNm .bg{font-size:29px;font-weight:800;margin-top:4px;letter-spacing:-.02em}
.bdNm .bg small{font-size:13px;font-weight:600;margin-left:3px;opacity:.85}

/* ═══ 줄 목록 ═══ */
.bdNews{background:#fff;border:1px solid #E1E8F2;border-radius:15px;
  padding:4px 18px;margin-bottom:14px;max-width:900px}
.bdRow{display:flex;align-items:center;gap:12px;padding:13px 0;
  border-top:1px solid #F1F5FA}
.bdRow:first-child{border-top:none}
.bdRow .dt{font-size:11.5px;color:#6E7B8F;width:44px;flex:0 0 auto}
.bdRow .tt{font-size:14px;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.bdRow:hover .tt{color:#1F3F73}
.bdRow .pill{border-radius:20px;padding:3px 9px;font-size:10.5px;
  font-weight:700;flex:0 0 auto}

/* ═══ 조용한 머리글 ═══
   조각 묶음 위에 붙는 작은 회색 글씨. 이것 하나로 화면이 정돈된다 */
.bdHd{display:flex;align-items:baseline;gap:10px;margin:24px 0 11px}
.bdHd:first-child{margin-top:0}
.bdHd h3{margin:0;font-size:16.5px;letter-spacing:-.02em;color:#16233A}
.bdHd span{font-size:12.5px;color:#6E7B8F}

/* ═════════ 글꼴 (2026-08-29g) ═════════
   본사가 골라 쓴다. 여기 없는 것은 못 고르게 한다 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&family=Nanum+Myeongjo:wght@400;700;800&family=Song+Myung&family=Gowun+Dodum&family=Jua&family=Do+Hyeon&family=Black+Han+Sans&family=Nanum+Pen+Script&display=swap');

/* ═════════ 동영상 ═════════ */
/* 크기와 자리는 본사가 정한다 (2026-08-29L).
   폭은 % 로 들어오고, 높이는 그 폭에 맞춰 저절로 따라간다 */
.bdVidWrap{display:flex;margin-bottom:14px}
.bdVidWrap.va-left{justify-content:flex-start}
.bdVidWrap.va-center{justify-content:center}
.bdVidWrap.va-right{justify-content:flex-end}
/* height 를 못 박으면 aspect-ratio 를 이겨 상자 높이가 0 이 된다 —
   동영상이 통째로 안 보였다 (원장님이 짚으심 — 2026-08-29) */
.bdVid{position:relative;
  border-radius:16px;overflow:hidden;background:#0B121E;
  aspect-ratio:16/9}
.bdVid.tall{aspect-ratio:9/16}
.bdVid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* aspect-ratio 를 모르는 옛 브라우저 — 그때만 옛 방식으로 높이를 만든다 */
@supports not (aspect-ratio:16/9){
  .bdVid{padding-top:56.25%}
  .bdVid.tall{padding-top:177.7%}
}

/* ═════════ 자유 배치 ═════════
   자리는 % 라 어느 화면에서든 같은 모양으로 줄어든다.
   판 비율만 정해 두면 안쪽은 알아서 따라간다. */
.bdFree{position:relative;overflow:hidden;margin-bottom:14px;border-radius:16px}
.bdFree::before{content:"";display:block}
.bdFree.r-16x5::before{padding-top:31.25%}
.bdFree.r-16x9::before{padding-top:56.25%}
.bdFree.r-4x3::before{padding-top:75%}
.bdFree.r-1x1::before{padding-top:100%}
.bdFree.r-3x1::before{padding-top:33.33%}
.bdFree .fvail{position:absolute;inset:0;z-index:1}
.bdFree .fin{position:absolute;inset:0;z-index:2;
  container-type:inline-size}
.bdFree .fe{position:absolute}
.bdFree .fe img{width:100%;display:block;border-radius:8px}
.bdFree .fe.fv{aspect-ratio:16/9}
.bdFree .fe.fv iframe{width:100%;height:100%;border:0;border-radius:8px}
.bdFree .fe.ft{line-height:1.32;letter-spacing:-.02em;white-space:pre-wrap;
  word-break:keep-all}
/* 판이 좁아지면 글자도 같이 줄어든다 — 안 그러면 글이 넘친다 */
@container (max-width:900px){ .bdFree .fe.ft{font-size:.82em} }
@container (max-width:620px){ .bdFree .fe.ft{font-size:.66em} }