/* EMENC site main styles
   Fonts: Pretendard + Poppins for KR/EN, Noto Sans JP for JP, Noto Sans SC for CN
   Loaded via header.php (Google Fonts + CDN Pretendard)                       */

:root {
  --c-bg: #ffffff;
  --c-fg: #1a1f2e;
  --c-muted: #6c7383;
  --c-line: #e6e8ee;
  --c-line-2: #f2f4f8;
  --c-primary: #0b3d91;
  --c-primary-2: #1054c4;
  --c-accent: #f5a623;
  --c-danger: #d9333f;
  --c-ok: #2faa6c;
  --c-card: #ffffff;
  --c-tag: #eef3fd;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 3px rgba(10,20,40,.06), 0 1px 2px rgba(10,20,40,.04);
  --shadow-md: 0 10px 30px rgba(10,20,40,.08), 0 2px 6px rgba(10,20,40,.04);
  --header-h: 72px;
  /* 좌우 여백 15%씩만 남김 → 콘텐츠 폭 70% (요청 사양) */
  --max-w: 70%;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  color: var(--c-fg);
  background: #fbfcfe;
  font-family: "Poppins", "Pretendard", system-ui, -apple-system, "Segoe UI", Roboto, "Apple SD Gothic Neo", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* 한국어 가독성: 음절이 아니라 어절(띄어쓰기) 단위로 줄바꿈 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* CJK(한·중·일)는 keep-all 유지, 그 외 언어는 통상 규칙 */
body.lang-vi, body.lang-ru, body.lang-fr, body.lang-de, body.lang-es, body.lang-en {
  word-break: normal;
}

/* 어절 단위 줄바꿈 — 한국어 전용. 일본어·중국어에 걸면 문장이 한 덩어리가 된다. */
body.lang-kr h1,
body.lang-kr h2,
body.lang-kr h3,
body.lang-kr h4,
body.lang-kr h5,
body.lang-kr h6,
body.lang-kr p,
body.lang-kr li,
body.lang-kr a,
body.lang-kr span,
body.lang-kr td,
body.lang-kr th,
body.lang-kr dd,
body.lang-kr dt,
body.lang-kr blockquote,
body.lang-kr .hero-title,
body.lang-kr .sc-hero h1,
body.lang-kr .sc-hero p.lead,
body.lang-kr .sc-sec-head h2,
body.lang-kr .sc-sec-head p,
body.lang-kr .sc-course-body h3,
body.lang-kr .sc-course-body p,
body.lang-kr .board-title,
body.lang-kr .post-head h1,
body.lang-kr .post-body,
body.lang-kr .page-body,
body.lang-kr .pg-lead,
body.lang-kr .card-head h2,
body.lang-kr .post-list a {
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* URL·이메일 등 긴 문자열은 강제 분리 허용 */
.post-body a, .page-body a, .att-list a, .download-card { overflow-wrap: anywhere; }

/* 본문 단락은 읽기 좋은 줄길이로 제한 (넓은 70% 폭에서도 눈이 편하게) */
.page-body .post-body > p,
.page-body .post-body > ul,
.page-body .post-body > ol { max-width: 62em; }
.page-body .post-body > p { margin: 0 0 1.15em; }
/* pg-lead 강조 박스는 콘텐츠 영역 풀폭 (미션·비전 카드와 폭 일치)
   — `.page-body .post-body > p` 보다 높은 우선순위로 62em 제한을 무력화 */
.page-body .post-body > .pg-lead { max-width: none; margin-bottom: 60px; }

/* Language-specific fonts — most-used safe family per region */
body.lang-jp {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  font-weight: 400;
}
body.lang-cn {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", system-ui, sans-serif;
  font-weight: 400;
}
body.lang-kr {
  font-family: "Pretendard", "Poppins", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
body.lang-th {
  font-family: "Noto Sans Thai", "Sarabun", "Tahoma", system-ui, sans-serif;
  font-weight: 400;
}
body.lang-ru {
  font-family: "Pretendard", "Roboto", "Inter", "PT Sans", "Segoe UI", system-ui, sans-serif;
}
body.lang-vi {
  /* Vietnamese needs full Latin-Extended-Additional + tone marks support */
  font-family: "Pretendard", "Be Vietnam Pro", "Roboto", "Inter", system-ui, sans-serif;
}
body.lang-fr, body.lang-de, body.lang-es {
  /* Latin-script European languages — Pretendard handles diacritics well */
  font-family: "Pretendard", "Poppins", "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; letter-spacing: -.01em; }
.muted { color: var(--c-muted); }

.container { width: var(--max-w); max-width: var(--max-w); margin: 0 auto; padding: 0; }
.narrow { width: var(--max-w); max-width: var(--max-w); }
@media (max-width: 1024px) {
  .container, .narrow { width: auto; max-width: none; padding: 0 20px; }
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.site-header .container {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
}
.logo {
  font-weight: 700; font-size: 20px; letter-spacing: -.02em;
  color: var(--c-fg) !important;
}
.primary-nav { display: flex; gap: 22px; }
.primary-nav a {
  color: var(--c-fg);
  font-weight: 500;
  font-size: 17px;
}
.primary-nav a:hover { color: var(--c-primary); text-decoration: none; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-switcher { position: relative; }
/* 언어 전환 버튼 — 알약 아웃라인.
   헤더에 이미 네이비 로고·대메뉴가 있어 채움(solid)으로 하면 진짜 CTA 와 시선이 겹친다.
   테두리 #c9d4ea 는 --c-primary 를 흰색에 섞어 옅게 만든 값. */
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #c9d4ea; border-radius: 999px;
  padding: 7px 14px; font-family: inherit; font-weight: 500;
  font-size: 14px; line-height: 1; letter-spacing: .02em;
  cursor: pointer; color: var(--c-primary); white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.lang-btn:hover,
.lang-switcher.open .lang-btn { background: var(--c-tag); border-color: var(--c-primary-2); }
.lang-btn:focus-visible { outline: 2px solid var(--c-primary-2); outline-offset: 2px; }
/* 아이콘은 글자 크기와 무관하게 고정 — ▾ 문자일 때는 글꼴마다 크기·높이가 달라졌다 */
.lang-btn .lang-globe,
.lang-btn .lang-caret { width: 17px; height: 17px; flex: none; }
.lang-btn .lang-caret { transition: transform .18s ease; }
.lang-switcher.open .lang-btn .lang-caret { transform: rotate(180deg); }
.lang-switcher ul {
  position: absolute; right: 0; top: 100%; margin-top: 6px;
  list-style: none; padding: 6px; min-width: 140px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); display: none; z-index: 60;
}
/* 버튼 아래 6px 이 빈 공간이라 마우스가 목록으로 내려가는 도중 hover 가 끊겨 메뉴가 닫혔다.
   목록 위에 투명한 다리를 깔아 버튼~목록 사이를 이어 붙인다.
   목록이 열려 있을 때만 존재하므로 닫힌 상태의 클릭을 가로막지 않는다. */
.lang-switcher ul::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
/* JS 가 살아 있으면(html.js-lang) 열고 닫기는 JS 가 맡는다 — 마우스가 벗어나도
   유예 시간을 두고, 클릭/터치로도 열 수 있다. JS 실패 시엔 아래 :hover 가 그대로 동작한다. */
html:not(.js-lang) .lang-switcher:hover ul,
html:not(.js-lang) .lang-switcher:focus-within ul,
.lang-switcher.open ul { display: block; }
.lang-switcher li a { display: block; padding: 8px 10px; border-radius: 4px; color: var(--c-fg); }
.lang-switcher li a:hover { background: var(--c-line-2); text-decoration: none; }
/* 마크업은 현재 언어에 class="current" 를 붙이는데 대응 스타일이 없어 표시가 안 됐다 */
.lang-switcher li.current a { background: var(--c-tag); color: var(--c-primary); font-weight: 600; }

.nav-toggle {
  display: none; background: transparent; border: 0;
  width: 36px; height: 36px; padding: 8px; flex-direction: column; gap: 4px; cursor: pointer;
}
.nav-toggle span { display: block; width: 100%; height: 2px; background: var(--c-fg); border-radius: 2px; }

/* Hero */
.hero {
  padding: 80px 0 64px;
  background: linear-gradient(160deg, #f1f5fd 0%, #fafbfe 60%);
  border-bottom: 1px solid var(--c-line);
}
.hero-title {
  font-size: clamp(34px, 5.5vw, 56px);
  font-weight: 700;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-subtitle { font-size: 20px; color: var(--c-muted); max-width: 640px; }
.hero-cta { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

/* Buttons */
.btn, .btn-primary, .btn-ghost, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; font-size: 16px; font-weight: 500;
  line-height: 1.6;   /* button 은 line-height 를 상속하지 않아(normal) a 보다 6.6px 낮았다 */
  border-radius: var(--radius-sm); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .08s ease, box-shadow .15s, background .15s;
  font-family: inherit;
}
.btn { background: #fff; border-color: var(--c-line); color: var(--c-fg); }
.btn:hover { background: var(--c-line-2); text-decoration: none; }
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-2); color: #fff; text-decoration: none; }
.btn-ghost { background: transparent; border-color: var(--c-primary); color: var(--c-primary); }
.btn-ghost:hover { background: var(--c-primary); color: #fff; text-decoration: none; }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover { background: #b8262f; }
.btn.small { padding: 5px 10px; font-size: 16px; }

/* Cards / sections */
.two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding: 56px 0;
}
.card {
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 24px;
  box-shadow: var(--shadow-sm);
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card-head h2 { font-size: 20px; margin: 0; }
.link { color: var(--c-primary); font-size: 16px; font-weight: 500; }

.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--c-line-2);
}
.post-list li:last-child { border-bottom: 0; }
.post-list a { color: var(--c-fg); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-list time { color: var(--c-muted); font-size: 16px; flex-shrink: 0; }

.feature-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
  padding: 56px 0 80px;
}
.feature-tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 28px 12px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  color: var(--c-fg); transition: all .2s;
}
.feature-tile:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-primary);
}
.ft-icon { font-size: 28px; }
.ft-title { font-size: 16px; font-weight: 500; }

/* Footer — 기존 홈페이지 다크 푸터와 동일 (배경 #111924, 하단바 #000) */
.site-footer {
  margin-top: 80px;
  background: #111924;
  color: rgba(255,255,255,.55);
  font-size: 16px;
}
.footer-main {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
  padding: 40px 0 36px;
}
.footer-corp {
  margin: 0 0 12px; color: #fff; font-weight: 700; font-size: 20px;
  letter-spacing: -.01em;
}
.footer-addr {
  margin: 4px 0; color: rgba(255,255,255,.55); font-size: 16px; line-height: 1.7;
}
.footer-addr .bar { color: rgba(255,255,255,.25); margin: 0 8px; }
.footer-sns { display: flex; align-items: center; gap: 10px; }
.footer-sns .sns-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  font-size: 17px; font-weight: 800; text-decoration: none;
  transition: transform .12s;
}
.footer-sns .sns-ico:hover { transform: translateY(-2px); text-decoration: none; }
.footer-sns .sns-ico svg { width: 20px; height: 20px; display: block; }
/* 하단 저작권 바 — 검정 */
.footer-bottom { background: #000; }
.footer-bottom .container {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; padding: 16px 0;
}
.footer-links { margin: 0; }
.footer-links a { color: rgba(255,255,255,.6); font-size: 15px; }
.footer-links a:hover { color: #fff; text-decoration: none; }
.footer-links .sep { color: rgba(255,255,255,.2); margin: 0 8px; }
.footer-copy { margin: 0; color: rgba(255,255,255,.35); font-size: 14px; }
@media (max-width: 768px) {
  .footer-main { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer-bottom .container { flex-direction: column; align-items: flex-start; }
}

/* Board */
.board-page { padding: 40px 0 80px; }
.board-head {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 16px;
  padding-bottom: 18px; margin-bottom: 24px;
  border-bottom: 2px solid var(--c-fg);
}
.board-title { font-size: 28px; margin: 0; font-weight: 700; }
.board-desc { margin: 0; color: var(--c-muted); }
.board-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.search { display: flex; gap: 4px; }
.search input { padding: 7px 10px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); }
.search button {
  padding: 7px 14px; background: var(--c-fg); color: #fff; border: 0;
  border-radius: var(--radius-sm); cursor: pointer; font-family: inherit;
}

.board-table { width: 100%; border-collapse: collapse; }
.board-table thead { background: var(--c-line-2); }
.board-table th, .board-table td {
  padding: 12px 8px; text-align: left; border-bottom: 1px solid var(--c-line);
  font-size: 16px;
}
.board-table th { font-weight: 600; font-size: 16px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; }
.board-table .num-col, .board-table .meta-col, .board-table .adm-col { width: 1%; white-space: nowrap; }
.board-table .subj a { color: var(--c-fg); font-weight: 500; }
.board-table .subj a:hover { color: var(--c-primary); }
.board-table tr.notice-row { background: #fff8e8; }
.board-table .empty { text-align: center; color: var(--c-muted); padding: 40px 0; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--c-tag); font-size: 16px; color: var(--c-primary); margin-left: 4px; }

.admin-bulk { margin-top: 14px; padding: 10px 14px; background: #fff8e8; border-radius: var(--radius-sm); display: flex; gap: 10px; align-items: center; }
.pager { display: flex; gap: 4px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.pager a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  color: var(--c-fg); font-size: 16px;
}
.pager a.on { background: var(--c-fg); color: #fff; border-color: var(--c-fg); }
.pager a:hover { background: var(--c-line-2); text-decoration: none; }

/* Photo grid */
.photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.photo-card { position: relative; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; transition: all .2s; }
.photo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--c-primary); }
.photo-check { position: absolute; top: 8px; left: 8px; z-index: 2; background: rgba(255,255,255,.9); border-radius: 4px; padding: 2px 4px; }
.photo-thumb {
  width: 100%; aspect-ratio: 4/3; background-size: cover; background-position: center;
  background-color: var(--c-line-2);
}
.photo-meta { padding: 12px; }
.photo-title { font-weight: 500; font-size: 16px; color: var(--c-fg); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-sub { color: var(--c-muted); font-size: 16px; }

/* Calendar */
.calendar { width: 100%; border-collapse: separate; border-spacing: 2px; }
.calendar th { background: var(--c-line-2); padding: 8px; font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.calendar th.sun { color: var(--c-danger); }
.calendar th.sat { color: var(--c-primary); }
.calendar td { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-sm); vertical-align: top; padding: 6px; min-height: 90px; height: 90px; position: relative; }
.calendar td.empty { background: var(--c-line-2); border: 0; }
.calendar td.today { background: #f0f6ff; border-color: var(--c-primary); }
.calendar td .d { display: inline-block; font-size: 16px; color: var(--c-muted); font-weight: 600; margin-bottom: 4px; }
.calendar td.sun .d { color: var(--c-danger); }
.calendar td.sat .d { color: var(--c-primary); }
.cal-event { display: block; background: var(--c-primary); color: #fff !important; padding: 2px 6px; border-radius: 3px; font-size: 16px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-event:hover { background: var(--c-primary-2); text-decoration: none; }
.cal-nav { display: flex; align-items: center; gap: 8px; font-weight: 600; }

/* Post view */
.post-view { padding: 40px 0 80px; }
.crumbs { font-size: 16px; color: var(--c-muted); margin-bottom: 18px; }
.crumbs a { color: var(--c-muted); }
.post-head { padding-bottom: 20px; margin-bottom: 24px; border-bottom: 2px solid var(--c-fg); }
.post-head h1 { font-size: 30px; }
.post-meta { color: var(--c-muted); font-size: 16px; }
.event-bar { background: #fff8e8; padding: 10px 14px; border-radius: var(--radius-sm); margin: 0 0 16px; font-weight: 500; }
.post-body { font-size: 18px; line-height: 1.8; padding: 24px 0; min-height: 220px; }
.post-body img { border-radius: var(--radius-sm); margin: 12px 0; }
.attachments-block { background: var(--c-line-2); padding: 16px; border-radius: var(--radius); margin: 24px 0; }
.attachments-block h3 { font-size: 16px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.att-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.att-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.att-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }

/* Image gallery at top of post body */
.post-images {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 24px;
}
.post-image {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-line-2);
  border: 1px solid var(--c-line);
}
.post-image a {
  display: block;
  text-decoration: none;
}
.post-image a:hover { text-decoration: none; }
.post-image img {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  transition: transform .25s;
}
.post-image a:hover img { transform: scale(1.005); }
.post-image figcaption {
  font-size: 16px;
  color: var(--c-muted);
  padding: 8px 14px;
  background: #fff;
  border-top: 1px solid var(--c-line);
  text-align: center;
}

/* Download cards for non-image attachments */
.download-block { background: var(--c-line-2); padding: 18px; border-radius: var(--radius); margin: 24px 0; }
.download-block h3 { font-size: 16px; margin: 0 0 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.download-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.download-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  color: var(--c-fg) !important;
  text-decoration: none !important;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.download-card:hover {
  border-color: var(--c-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.download-card .dl-icon {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
  width: 44px;
  text-align: center;
}
.download-card .dl-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.download-card .dl-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--c-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.download-card .dl-meta {
  font-size: 16px;
  color: var(--c-muted);
}
.download-card .dl-ext {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--c-tag);
  color: var(--c-primary);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .02em;
}
.download-card .dl-action {
  font-size: 18px;
  color: var(--c-muted);
  flex-shrink: 0;
  transition: color .15s, transform .15s;
}
.download-card:hover .dl-action {
  color: var(--c-primary);
  transform: translateY(2px);
}

@media (max-width: 520px) {
  .download-cards { grid-template-columns: 1fr; }
  .post-images { gap: 10px; }
}
.post-actions { display: flex; gap: 10px; margin: 24px 0; flex-wrap: wrap; align-items: center; }
/* 삭제 버튼을 감싼 <form> 이 line box 를 만들어 버튼만 위로 떠 보였다 — 폼을 버튼 크기에 딱 맞춘다 */
.post-actions form { display: flex; margin: 0; }
.prev-next { display: flex; justify-content: space-between; gap: 12px; padding: 20px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.prev-next a { color: var(--c-fg); font-size: 16px; }
.comments { margin-top: 40px; }
.comments ul { list-style: none; padding: 0; margin: 0; }
.comments li { padding: 14px 0; border-bottom: 1px solid var(--c-line-2); }
.comments li strong { margin-right: 8px; }
.comments p { margin: 8px 0 0; }
.comment-form { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.comment-form input, .comment-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 16px;
}

/* Write form */
.post-write { padding: 40px 0 80px; }
.write-form { display: flex; flex-direction: column; gap: 16px; }
.write-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 16px; }
.write-form input[type=text],
.write-form input[type=datetime-local],
.write-form textarea {
  padding: 10px 12px; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 16px;
}
.write-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.write-form fieldset.attachments { border: 1px dashed var(--c-line); padding: 16px; border-radius: var(--radius-sm); }
.write-form .file-row { margin: 6px 0; }
.write-form .form-actions { display: flex; gap: 10px; }

.alert { padding: 10px 14px; border-radius: var(--radius-sm); margin: 12px 0; font-size: 16px; }
.alert.ok  { background: #e6f7ee; color: #145a36; }
.alert.err { background: #fde6e8; color: #921c25; }

/* ====================================================================
   Webzine (웹진) — magazine-style skin
   ==================================================================== */
.webzine-page { padding: 32px 0 80px; }

/* Masthead */
.wz-masthead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 28px;
  border-bottom: 3px double var(--c-fg);
}
.wz-masthead-text { flex: 1 1 300px; }
.wz-kicker {
  font-size: 16px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-accent); margin-bottom: 8px;
}
.wz-title {
  font-size: clamp(28px, 4.2vw, 44px); font-weight: 800;
  letter-spacing: -.025em; margin: 0 0 8px;
  font-family: "Pretendard", "Playfair Display", Georgia, serif;
}
.wz-tagline { color: var(--c-muted); margin: 0; font-size: 16px; max-width: 640px; }
.wz-masthead-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wz-search input { min-width: 220px; }

/* Hero cover story */
.wz-hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 48px; color: var(--c-fg);
  box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .15s;
}
.wz-hero:hover { box-shadow: var(--shadow-md); text-decoration: none; transform: translateY(-2px); }
.wz-hero-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background-size: cover; background-position: center;
  background-color: var(--c-line-2);
}
.wz-hero-badge {
  position: absolute; top: 18px; left: 18px;
  background: var(--c-fg); color: #fff;
  padding: 6px 12px; font-size: 16px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.wz-hero-body { padding: 36px 32px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.wz-hero-title {
  font-size: clamp(22px, 2.6vw, 32px); font-weight: 700;
  margin: 0; line-height: 1.25; letter-spacing: -.02em;
  font-family: "Pretendard", "Playfair Display", Georgia, serif;
}
.wz-hero-excerpt { color: var(--c-muted); font-size: 16px; line-height: 1.7; margin: 0; }
.wz-meta { display: flex; gap: 6px; align-items: center; color: var(--c-muted); font-size: 16px; flex-wrap: wrap; }
.wz-meta strong { color: var(--c-fg); font-weight: 600; }
.wz-meta-small { display: flex; gap: 6px; align-items: center; color: var(--c-muted); font-size: 16px; flex-wrap: wrap; }
.wz-dot { opacity: .5; }

/* Section heading */
.wz-section { margin: 0 0 56px; }
.wz-section-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.wz-section-title {
  font-size: 16px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-fg); margin: 0;
  white-space: nowrap;
}
.wz-section-rule { flex: 1; height: 1px; background: var(--c-line); }

/* Tags */
.wz-tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.wz-tag {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--c-tag); color: var(--c-primary);
  font-size: 16px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
}

/* Editor's picks — horizontal scroller on mobile, grid on desktop */
.wz-picks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.wz-pick {
  display: flex; flex-direction: column; color: var(--c-fg);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden; transition: all .15s;
}
.wz-pick:hover {
  text-decoration: none; transform: translateY(-2px);
  border-color: var(--c-primary); box-shadow: var(--shadow-md);
}
.wz-pick-thumb {
  width: 100%; aspect-ratio: 16 / 10;
  background-size: cover; background-position: center;
  background-color: var(--c-line-2);
}
.wz-pick-body { padding: 14px 14px 16px; }
.wz-pick-title {
  font-size: 16px; font-weight: 600; line-height: 1.35;
  margin: 0 0 8px; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Article grid */
.wz-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}
.wz-card {
  position: relative;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden; transition: all .18s;
}
.wz-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md);
  border-color: var(--c-primary);
}
.wz-card--notice { border-color: var(--c-accent); }
.wz-card-link { display: block; color: var(--c-fg); }
.wz-card-link:hover { text-decoration: none; }
.wz-card-thumb {
  position: relative;
  width: 100%; aspect-ratio: 16 / 10;
  background-size: cover; background-position: center;
  background-color: var(--c-line-2);
}
.wz-card-flag {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px; font-size: 16px; font-weight: 700;
  border-radius: 4px; background: rgba(255,255,255,.95); color: var(--c-fg);
  letter-spacing: .04em;
}
.wz-card-flag--notice { background: var(--c-accent); color: #fff; }
.wz-card-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.wz-card-title {
  font-size: 17px; font-weight: 700; line-height: 1.3;
  letter-spacing: -.015em; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: "Pretendard", "Playfair Display", Georgia, serif;
}
.wz-card-excerpt {
  font-size: 16px; color: var(--c-muted); line-height: 1.6; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wz-check {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  background: rgba(255,255,255,.95); border-radius: 4px; padding: 2px 6px;
}

.wz-empty {
  text-align: center; color: var(--c-muted);
  padding: 80px 20px; border: 1px dashed var(--c-line); border-radius: var(--radius);
  background: var(--c-line-2);
}

/* Stack hero on tablet & below */
@media (max-width: 860px) {
  .wz-hero { grid-template-columns: 1fr; }
  .wz-hero-image { aspect-ratio: 16 / 9; }
  .wz-hero-body { padding: 24px 22px 26px; }
  .wz-grid { gap: 22px; }
}
@media (max-width: 520px) {
  .wz-masthead { gap: 14px; padding-bottom: 16px; margin-bottom: 22px; }
  .wz-search input { min-width: 0; flex: 1; }
  .wz-section { margin-bottom: 40px; }
  .wz-picks { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .wz-grid { grid-template-columns: 1fr; }
}

/* ====================================================================
   학교 사이트 — 드롭다운 내비게이션
   ==================================================================== */
.primary-nav { gap: 4px; }
.primary-nav > .nav-item { position: relative; }
/* 하위 메뉴 화살표 버튼은 모바일 아코디언 전용 — 데스크톱은 hover 드롭다운 */
.nav-sub-toggle { display: none; }
.primary-nav > .nav-item > a {
  display: inline-block; padding: 24px 14px;
  font-size: 17px; font-weight: 600;
}

/* 러시아어·베트남어 대메뉴 — 라벨이 길어 한 줄에 안 들어가므로 좌우 패딩만 줄인다. */
@media (min-width: 901px) {
  body.lang-ru .primary-nav > .nav-item > a,
  body.lang-vi .primary-nav > .nav-item > a {
    display: inline-block; padding: 24px 7px;
    font-size: 17px; font-weight: 600;
  }
}
.primary-nav .sub-nav {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 200px; padding: 8px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: none; z-index: 200;
  list-style: none; margin: 0;
}
.primary-nav .nav-item:hover .sub-nav,
.primary-nav .nav-item:focus-within .sub-nav { display: block; }
.primary-nav .sub-nav li a {
  display: block; padding: 10px 14px; border-radius: 6px;
  font-size: 16px; font-weight: 500; color: var(--c-fg); white-space: nowrap;
}
.primary-nav .sub-nav li a:hover { background: var(--c-tag); color: var(--c-primary); text-decoration: none; }

/* ====================================================================
   학교 사이트 — 기업형 메인 페이지
   ==================================================================== */
.sc-hero {
  position: relative; color: #fff; overflow: hidden;
  background: #10203e;
}
/* 3장 페이드 슬라이드쇼 */
.sc-hero-slides { position: absolute; inset: 0; }
.sc-hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 35%;
  opacity: 0; transition: opacity 1.2s ease-in-out;
}
.sc-hero-slide.is-active { opacity: .45; }
/* 기존 단일 배경(다른 페이지 호환용) */
.sc-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 35%;
  opacity: .45;
}
.sc-hero-inner {
  position: relative; z-index: 2;
  padding: 110px 0 96px;
}
/* 슬라이드 인디케이터 */
.sc-hero-dots {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3;
  display: flex; justify-content: center; gap: 10px;
}
.sc-hero-dots button {
  width: 32px; height: 4px; padding: 0; border: 0; cursor: pointer;
  background: rgba(255,255,255,.35); border-radius: 2px;
  transition: background .2s, width .2s;
}
.sc-hero-dots button.is-active { background: var(--c-accent); width: 44px; }
@media (prefers-reduced-motion: reduce) {
  .sc-hero-slide { transition: none; }
}
.sc-hero-kicker {
  display: inline-block; margin-bottom: 18px;
  padding: 7px 16px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
  font-size: 16px; font-weight: 600; letter-spacing: .06em;
  background: rgba(255,255,255,.1); backdrop-filter: blur(4px);
}
.sc-hero h1 {
  font-size: clamp(38px, 4.2vw, 64px); font-weight: 800;
  line-height: 1.18; letter-spacing: -.02em; margin: 0 0 18px;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.sc-hero p.lead {
  font-size: clamp(18px, 1.4vw, 22px); line-height: 1.7;
  max-width: 720px; margin: 0 0 34px; color: rgba(255,255,255,.92);
}
.sc-hero .hero-cta { margin-top: 0; }
.sc-hero .btn-primary { background: var(--c-accent); border-color: var(--c-accent); color: #1a1f2e; font-weight: 700; padding: 14px 28px; font-size: 17px; }
.sc-hero .btn-primary:hover { background: #ffb84d; }
.sc-hero .btn-ghost { border-color: rgba(255,255,255,.65); color: #fff; padding: 14px 28px; font-size: 17px; }
.sc-hero .btn-ghost:hover { background: rgba(255,255,255,.15); color: #fff; }

/* 실적 스탯 바 */
.sc-stats { background: var(--c-primary); color: #fff; }
.sc-stats .container {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-top: 34px; padding-bottom: 34px; gap: 20px;
}
.sc-stat { text-align: center; }
.sc-stat .n { font-size: clamp(30px, 2.6vw, 44px); font-weight: 800; letter-spacing: -.02em; }
.sc-stat .n em { font-style: normal; font-size: .6em; font-weight: 700; margin-left: 2px; }
/* 숫자와 단위 사이 간격 — 라틴·키릴·태국·베트남 문자권은 2px 로는 붙어 보인다(40Jahre).
   한중일은 붙여 쓰는 것이 정상 표기이므로 그대로 둔다. */
body.lang-en .sc-stat .n em,
body.lang-vi .sc-stat .n em,
body.lang-th .sc-stat .n em,
body.lang-ru .sc-stat .n em,
body.lang-fr .sc-stat .n em,
body.lang-de .sc-stat .n em,
body.lang-es .sc-stat .n em { margin-left: .28em; }
.sc-stat .l { font-size: 16px; color: rgba(255,255,255,.85); margin-top: 4px; }

/* 공통 섹션 */
.sc-section { padding: 84px 0 0; }
.sc-section.last { padding-bottom: 40px; }
.sc-sec-head { margin-bottom: 36px; }
.sc-sec-head .k {
  color: var(--c-accent); font-weight: 700; font-size: 16px;
  letter-spacing: .14em; text-transform: uppercase;
}
.sc-sec-head h2 { font-size: clamp(28px, 2.6vw, 40px); font-weight: 800; letter-spacing: -.02em; margin: 6px 0 10px; }
.sc-sec-head p { color: var(--c-muted); font-size: 18px; max-width: 780px; margin: 0; }
.sc-sec-head.center { text-align: center; }
.sc-sec-head.center p { margin: 0 auto; }

/* 소개 스플릿 */
.sc-about { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.sc-about-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.sc-about-img img { width: 100%; height: 100%; object-fit: cover; }
.sc-about-body h2 { font-size: clamp(26px, 2.4vw, 36px); font-weight: 800; letter-spacing: -.02em; }
.sc-about-body p { font-size: 18px; line-height: 1.85; color: #3a4152; }
.sc-check { list-style: none; padding: 0; margin: 18px 0 26px; }
.sc-check li { padding: 7px 0 7px 32px; position: relative; font-size: 17px; }
.sc-check li::before {
  content: "✓"; position: absolute; left: 4px; top: 7px;
  color: var(--c-ok); font-weight: 800;
}

/* 과정 카드 */
.sc-course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sc-course {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden; color: var(--c-fg);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.sc-course:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--c-primary); }
.sc-course-thumb { aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: var(--c-line-2); }
.sc-course-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sc-course-body h3 { font-size: 21px; font-weight: 700; margin: 0; }
.sc-course-body p { margin: 0; color: var(--c-muted); font-size: 16px; line-height: 1.65; flex: 1; }
.sc-course-body .go { color: var(--c-primary); font-weight: 600; font-size: 16px; }

/* 갤러리 스트립 */
.sc-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sc-gallery a { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; display: block; }
.sc-gallery a img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.sc-gallery a:hover img { transform: scale(1.05); }
.sc-gallery a .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px; color: #fff; font-size: 16px; font-weight: 600;
  background: linear-gradient(transparent, rgba(8,14,30,.75));
}

/* 소식/연락 스플릿 */
.sc-bottom { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; }

/* 그리드·플렉스 자식은 기본값이 min-width:auto 라 내용의 최소폭 아래로 못 줄어든다.
   그 탓에 좁은 화면에서 카드가 통째로 그리드 칸이 화면 밖으로 밀려 가로 스크롤이 생긴다. */
.sc-bottom > *,
.sc-about > *,
.pg-grid2 > *,
.sc-course-grid > *,
.sc-gallery > *,
.sc-stats .container > * { min-width: 0; }

/* 러시아어·독일어는 한 단어가 칸보다 길 수 있다(старшеклассников). 좁은 화면에서 단어를 쪼갠다. */
.sc-stat .n, .sc-stat .l { overflow-wrap: break-word; }
.sc-contact-card {
  background: var(--c-primary); color: #fff; border-radius: var(--radius);
  padding: 30px 32px; display: flex; flex-direction: column; gap: 14px;
}
.sc-contact-card h3 { font-size: 22px; margin: 0 0 4px; }
.sc-contact-card .tel { font-size: clamp(26px, 2.2vw, 36px); font-weight: 800; color: #ffd27a; }
.sc-contact-card p { margin: 0; font-size: 16px; color: rgba(255,255,255,.9); line-height: 1.7; }
.sc-contact-card .btn { align-self: flex-start; background: #fff; color: var(--c-primary); font-weight: 700; border: 0; }

/* 서브페이지 공통 */
.page-hero {
  background: linear-gradient(135deg, #0b2a63 0%, #0b3d91 60%, #1054c4 100%);
  color: #fff; padding: 64px 0 56px;
}
.page-hero .crumbs { color: rgba(255,255,255,.75); font-size: 16px; margin-bottom: 10px; }
.page-hero .crumbs a { color: rgba(255,255,255,.75); }
.page-hero h1 { font-size: clamp(30px, 3vw, 44px); font-weight: 800; margin: 0; letter-spacing: -.02em; }
.page-body { padding: 56px 0 40px; }
.page-body .post-body { font-size: 18px; }
.page-body h2 { font-size: 28px; font-weight: 800; margin: 44px 0 16px; letter-spacing: -.02em; }
.page-body h2:first-child { margin-top: 0; }
.page-body h3 { font-size: 22px; font-weight: 700; margin: 30px 0 12px; }
.page-body p, .page-body li { font-size: 18px; line-height: 1.85; }
.page-body table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.page-body table th, .page-body table td { border: 1px solid var(--c-line); padding: 12px 14px; font-size: 17px; text-align: left; }
.page-body table th { background: var(--c-line-2); font-weight: 700; }
.page-body img { border-radius: var(--radius); }
.pg-lead {
  font-size: 20px; line-height: 1.8; color: #2c3446;
  background: var(--c-tag); border-left: 5px solid var(--c-primary);
  padding: 22px 26px; border-radius: 0 var(--radius) var(--radius) 0; margin: 0 0 28px;
}
.pg-info-box { background: var(--c-line-2); border-radius: var(--radius); padding: 22px 26px; margin: 18px 0; }
.pg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pg-sign { text-align: right; font-size: 19px; font-weight: 700; margin-top: 30px; }

/* 반응형 */
@media (max-width: 1200px) {
  .sc-course-grid { grid-template-columns: repeat(2, 1fr); }
  .sc-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .sc-about, .sc-bottom, .pg-grid2 { grid-template-columns: 1fr; }
  .sc-stats .container { grid-template-columns: repeat(2, 1fr); }
  .primary-nav > .nav-item > a { padding: 12px 14px; }
}
@media (max-width: 640px) {
  .sc-course-grid { grid-template-columns: 1fr; }
  .sc-hero-inner { padding: 72px 0 60px; }
}

/* ====================================================================
   헤더 — 로고·메뉴 영역은 좌우 5% 여백 (요청 사양)
   ==================================================================== */
.site-header .container,
.site-topbar .container { width: 90%; max-width: 90%; }

/* 상단 유틸리티 바 (SNS + 회원) */
.site-topbar {
  background: #0b2a63;
  color: rgba(255,255,255,.9);
  font-size: 16px;
}
.site-topbar .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 44px;
}
.topbar-sns { display: flex; align-items: center; gap: 8px; }
.topbar-sns .sns-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  font-size: 16px; font-weight: 800; text-decoration: none;
  transition: transform .12s;
}
.topbar-sns .sns-ico:hover { transform: translateY(-1px); text-decoration: none; }
.topbar-sns .sns-ico svg { width: 16px; height: 16px; display: block; }
.sns-kakao { background: #fee500; color: #191919; }
.sns-blog  { background: #03c75a; color: #fff; }
.sns-insta {
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  color: #fff;
}
.topbar-tel { color: rgba(255,255,255,.85); margin-left: 14px; font-weight: 600; }
.topbar-tel:hover { color: #fff; text-decoration: none; }
.topbar-auth { display: flex; align-items: center; gap: 4px; }
.topbar-auth a {
  color: rgba(255,255,255,.9); padding: 4px 10px; border-radius: 5px;
  font-weight: 500;
}
.topbar-auth a:hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.topbar-auth .sep { opacity: .35; }
.topbar-auth .member-name { color: #ffd27a; font-weight: 700; padding: 4px 4px 4px 10px; }

/* 메인 헤더 바 — 로고 이미지 */
.logo { display: inline-flex; align-items: center; }
.logo img { height: 52px; width: auto; display: block; }

@media (max-width: 1024px) {
  .site-header .container, .site-topbar .container { width: auto; max-width: none; padding: 0 16px; }
  .logo img { height: 40px; }
  .topbar-tel { display: none; }
}

/* ====================================================================
   회원 로그인/가입 폼
   ==================================================================== */
.member-wrap { max-width: 520px; margin: 0 auto; padding: 64px 0 80px; }
.member-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 40px 42px;
}
.member-card h1 { font-size: 28px; font-weight: 800; margin: 0 0 6px; }
.member-card .sub { color: var(--c-muted); margin: 0 0 26px; font-size: 16px; }
.member-form { display: flex; flex-direction: column; gap: 16px; }
.member-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 16px; }
.member-form input {
  padding: 12px 14px; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 17px;
}
.member-form input:focus { outline: 2px solid var(--c-primary-2); border-color: var(--c-primary-2); }
.member-form .btn-primary { padding: 13px; font-size: 17px; font-weight: 700; margin-top: 6px; }
.member-alt { text-align: center; margin-top: 18px; color: var(--c-muted); font-size: 16px; }
.member-hint { font-weight: 400; color: var(--c-muted); font-size: 16px; }

/* 인사말 학교장 초상 */
.pg-portrait { margin: 0; }
.pg-portrait img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.pg-portrait figcaption {
  margin-top: 12px; text-align: center; font-size: 17px; color: var(--c-fg);
}
.pg-portrait figcaption strong { font-size: 19px; }

/* ====================================================================
   법인소개 — 미션/비전/핵심가치 크리에이티브 섹션 (콘텐츠 영역 풀폭)
   ==================================================================== */
.found-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 0 0 22px; }
/* --- 미션·비전 카드 — 네이비 + 대형 배경 워드마크 ------------------
   기존안은 130px 이모지(🎯🚀)와 브랜드색과 무관한 청록 그라데이션을 썼다.
   장식을 그림이 아니라 타이포그래피로 바꾼다 — 이모지가 있던 자리에
   MISSION / VISION 을 크게 깔아 질감으로 쓰고, 악센트는 금색만 사용.
   ::after 로 워드마크를 그리므로 HTML(DB 콘텐츠)은 손대지 않는다. */
.found-card {
  position: relative; overflow: hidden;
  border-radius: 18px;
  padding: 44px 40px 42px;
  min-height: 250px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff;
  box-shadow: 0 20px 50px rgba(11,42,99,.18), 0 6px 14px rgba(11,42,99,.10);
}
.found-mission { background: linear-gradient(150deg, #0056f3 0%, #0b3d91 100%); }
.found-vision  { background: linear-gradient(150deg, #0056f3 0%, #0b3d91 100%); }

/* 배경 워드마크 — 이모지를 대체하는 장식. 아주 낮은 투명도로 질감처럼. */
.found-card::after {
  position: absolute; right: -8px; bottom: -26px;
  font-family: "Poppins", sans-serif;
  font-size: 86px; font-weight: 800; letter-spacing: -.04em;
  color: #fff; opacity: .07; line-height: 1;
  pointer-events: none; white-space: nowrap;
}
.found-mission::after { content: "MISSION"; }
.found-vision::after  { content: "VISION"; }

/* 라벨 — 금색 짧은 선 + 대문자 */
.found-card .tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-accent);
  margin-bottom: 16px; opacity: 1;
}
.found-card .tag::before {
  content: ""; width: 26px; height: 2px;
  background: var(--c-accent); border-radius: 2px;
}

.found-card h3 {
  position: relative;   /* 배경 워드마크 위로 */
  margin: 0; font-size: 23px; font-weight: 700;
  line-height: 1.6; letter-spacing: -.02em;
}

/* 이모지 워터마크 제거 — HTML 은 그대로 두고 CSS 로만 숨긴다 */
.found-card .deco { display: none; }
/* 교육이념 배너 — 미션·비전과 같은 네이비 언어. 우하단 PHILOSOPHY 워드마크로
   장식하고(이모지 대신 타이포그래피), 악센트는 금색만. */
.found-ideal {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(150deg, #0b2a63 0%, #0b3d91 100%);
  border: 0;
  border-radius: 18px;
  padding: 44px 30px 42px;
  margin: 0 0 22px;
  box-shadow: 0 20px 50px rgba(11,42,99,.18), 0 6px 14px rgba(11,42,99,.10);
}
.found-ideal .tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--c-accent); margin-bottom: 14px;
}
.found-ideal .tag::before,
.found-ideal .tag::after {
  content: ""; width: 22px; height: 2px;
  background: var(--c-accent); border-radius: 2px;
}
.found-ideal p {
  position: relative;   /* 배경 워드마크 위로 */
  margin: 0; font-size: clamp(23px, 2.4vw, 30px); font-weight: 700;
  color: #fff; letter-spacing: -.02em; line-height: 1.45;
}
.found-ideal::after {
  content: "PHILOSOPHY";
  position: absolute; right: -6px; bottom: -22px;
  font-family: "Poppins", sans-serif;
  font-size: 76px; font-weight: 800; letter-spacing: -.04em;
  color: #fff; opacity: .06; line-height: 1;
  pointer-events: none; white-space: nowrap;
}

/* 교육목표 4기둥 — 이모지(📊⚙️👥💡) 대신 브랜드 남색 라인 아이콘.
   HTML(DB 콘텐츠)은 그대로 두고 .ic 의 글자를 0px 로 감춘 뒤
   배경 이미지로 SVG 를 얹는다. */
.found-goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.found-goal {
  text-align: center; background: #fff; border: 1px solid var(--c-line);
  border-radius: 14px; padding: 28px 16px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.found-goal .ic {
  width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 14px; background-color: var(--c-tag);
  font-size: 0;                     /* 이모지 글자 감추기 */
  background-repeat: no-repeat; background-position: center;
  background-size: 26px 26px;
}
.found-goal:nth-child(1) .ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b3d91' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 20V13M12 20V5M20 20v-9'/%3E%3C/svg%3E"); }
.found-goal:nth-child(2) .ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b3d91' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.2 5.2l2.1 2.1M16.7 16.7l2.1 2.1M18.8 5.2l-2.1 2.1M7.3 16.7l-2.1 2.1'/%3E%3C/svg%3E"); }
.found-goal:nth-child(3) .ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b3d91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0'/%3E%3Ccircle cx='17.5' cy='9.5' r='2.4'/%3E%3Cpath d='M16 20a5 5 0 0 1 5-5'/%3E%3C/svg%3E"); }
.found-goal:nth-child(4) .ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b3d91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18.5h5M10.5 21.5h3'/%3E%3Cpath d='M12 2.5a6.2 6.2 0 0 0-3.6 11.2c.6.5 1 1.2 1 2h5.2c0-.8.4-1.5 1-2A6.2 6.2 0 0 0 12 2.5z'/%3E%3C/svg%3E"); }
.found-goal h4 { margin: 0; font-size: 17px; font-weight: 700; color: var(--c-fg); line-height: 1.5; }
@media (hover: hover) {
  .found-goal:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--c-primary); }
}
/* 중앙정렬 프레임 이미지 (조직도 등) */
.found-figure {
  text-align: center; background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 26px; margin: 0;
  box-shadow: var(--shadow-sm);
}
.found-figure img { display: inline-block; max-width: 100%; height: auto; border-radius: var(--radius-sm); }
@media (max-width: 860px) {
  .found-mv { grid-template-columns: 1fr; }
  .found-goals { grid-template-columns: repeat(2, 1fr); }
}

/* ====================================================================
   법인소개 — 경영원칙 크리에이티브 패널
   ==================================================================== */
.found-principle {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.found-principle-head {
  background: linear-gradient(135deg, #0b2a63 0%, #1054c4 100%); color: #fff;
  padding: 34px 32px; text-align: center; position: relative; overflow: hidden;
}
.found-principle-head .tag {
  display: inline-block; font-size: 14px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; opacity: .8;
}
.found-principle-head .motto {
  margin: 10px 0 8px; font-size: clamp(26px, 2.8vw, 36px); font-weight: 800;
  letter-spacing: .02em;
}
.found-principle-head .lead {
  margin: 0 auto; max-width: 620px; font-size: 17px; color: rgba(255,255,255,.9); line-height: 1.7;
}
.found-principle-list {
  list-style: none; margin: 0; padding: 24px 32px 28px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 32px;
}
.found-principle-list li {
  display: flex; align-items: center; gap: 12px;
  font-size: 17px; font-weight: 500; color: var(--c-fg);
  padding: 13px 2px; border-bottom: 1px solid var(--c-line-2);
}
.found-principle-list .ic {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-tag); color: var(--c-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
}
@media (max-width: 860px) {
  .found-principle-list { grid-template-columns: 1fr; }
}

/* ====================================================================
   본교의 장점 — 강점 카드 그리드 (콘텐츠 영역 풀폭)
   ==================================================================== */
.str-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.str-card {
  position: relative; background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 30px 30px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  overflow: hidden;
}
.str-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--c-primary); }
.str-num {
  position: absolute; top: 20px; right: 26px;
  font-size: 46px; font-weight: 800; line-height: 1;
  color: var(--c-tag); letter-spacing: -.02em; pointer-events: none;
}
.str-ic {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  background: linear-gradient(135deg, #0b2a63 0%, #1054c4 100%); color: #fff;
  margin-bottom: 16px; box-shadow: 0 6px 16px rgba(16,84,196,.28);
}
.str-card h3 { margin: 0 0 14px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.4; }
.str-card ul { list-style: none; margin: 0; padding: 0; }
.str-card li {
  position: relative; padding: 9px 0 9px 22px; font-size: 16.5px; line-height: 1.6;
  border-top: 1px solid var(--c-line-2); color: #3a4152;
}
.str-card li:first-child { border-top: 0; }
.str-card li::before {
  content: "›"; position: absolute; left: 4px; top: 8px;
  color: var(--c-primary); font-weight: 800; font-size: 18px;
}
/* 강사진 — 사진 포함 피처 카드 (풀폭) */
.str-feature {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 0;
  padding: 0; align-items: stretch;
}
.str-feature .str-photo {
  background-size: cover; background-position: center;
  background-color: var(--c-line-2); min-height: 280px;
}
.str-feature .str-feature-body { padding: 32px 34px 30px; position: relative; }
.str-feature .str-num { top: 26px; right: 30px; }
@media (max-width: 860px) {
  .str-grid { grid-template-columns: 1fr; }
  .str-feature { grid-template-columns: 1fr; }
  .str-feature .str-photo { min-height: 200px; }
}

/* ====================================================================
   아이콘 + 타이틀 같은 줄 배치 (전 페이지 공통)
   ==================================================================== */
/* 본교의 장점 카드 */
.str-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.str-head .str-ic { margin-bottom: 0; flex: none; }
.str-head h3 { margin: 0; }
/* 법인소개 교육목표 4기둥 */
.found-goal { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left; }
.found-goal .ic { margin: 0; flex: none; }
.found-goal h4 { margin: 0; }

/* ====================================================================
   찾아오시는 길 — 지도 + 정보/교통 카드
   ==================================================================== */
.loc-map {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--c-line); box-shadow: var(--shadow-sm);
  margin: 0 0 22px; background: var(--c-line-2);
}
.loc-map iframe { width: 100%; height: 480px; border: 0; display: block; }
.loc-info { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; margin: 0 0 10px; }
.loc-card {
  display: flex; align-items: flex-start; gap: 18px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 26px 28px; box-shadow: var(--shadow-sm);
}
.loc-ic {
  flex: none; width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: linear-gradient(135deg, #0b2a63 0%, #1054c4 100%); color: #fff;
  box-shadow: 0 6px 16px rgba(16,84,196,.28);
}
.loc-card h3 { margin: 0 0 6px; font-size: 19px; font-weight: 800; }
.loc-card p { margin: 0; font-size: 17px; line-height: 1.7; color: #3a4152; }
.loc-card .tel { font-size: 22px; font-weight: 800; color: var(--c-primary); letter-spacing: .01em; }

/* 교통안내 3카드 */
.loc-transport { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.loc-tp-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 26px 26px 24px; box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.loc-tp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--c-primary); }
.loc-tp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.loc-tp-head .ic { font-size: 26px; }
.loc-tp-head h3 { margin: 0; font-size: 19px; font-weight: 800; }
.loc-tp-card p { margin: 0; font-size: 16px; line-height: 1.7; color: #3a4152; }
.loc-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

@media (max-width: 860px) {
  .loc-info { grid-template-columns: 1fr; }
  .loc-transport { grid-template-columns: 1fr; }
  .loc-map iframe { height: 320px; }
}

/* 서브 배경(page-hero) 게시판/페이지 공통 — 설명 문구 */
.page-hero-desc { margin: 12px 0 0; font-size: 17px; color: rgba(255,255,255,.85); line-height: 1.6; }

/* ====================================================================
   국비지원과정 등 — 크리에이티브 코스 페이지 디자인 시스템
   ==================================================================== */
.crs-sec { margin: 0 0 40px; }
.crs-sec:last-child { margin-bottom: 0; }
.crs-sec-head { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.crs-sec-head .ic {
  flex: none; width: 48px; height: 48px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-size: 25px;
  background: linear-gradient(135deg, #0b2a63 0%, #1054c4 100%); color: #fff;
  box-shadow: 0 6px 16px rgba(16,84,196,.25);
}
.crs-sec-head h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.crs-sec > p { font-size: 18px; line-height: 1.85; color: #3a4152; margin: 0 0 8px; }

/* 특징/과정 카드 */
.crs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.crs-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 24px 24px 22px; box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.crs-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--c-primary); }
.crs-card .tag {
  display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: linear-gradient(135deg,#0b2a63,#1054c4);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
}
.crs-card .ic { font-size: 30px; margin-bottom: 10px; }
.crs-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.crs-card p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--c-muted); }

/* 지원내용 하이라이트 (금액 등) */
.crs-support { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.crs-support-item {
  background: var(--c-tag); border-radius: var(--radius); padding: 22px 24px;
  border-left: 4px solid var(--c-primary);
}
.crs-support-item .label { font-size: 15px; font-weight: 800; color: var(--c-primary); letter-spacing: .02em; }
.crs-support-item .value { margin-top: 8px; font-size: 16.5px; line-height: 1.5; color: var(--c-fg); }
.crs-support-item .value strong { font-size: 22px; font-weight: 800; }

/* 체크리스트 */
.crs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.crs-list li {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  padding: 15px 18px; font-size: 16.5px; line-height: 1.65; color: #3a4152;
}
.crs-list li .ck {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-tag); color: var(--c-primary); font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 13px; margin-top: 1px;
}

/* 프로세스 스텝 (사업흐름) */
.crs-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.crs-step {
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 24px 18px 20px; text-align: center;
}
.crs-step .no {
  width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 50%;
  background: linear-gradient(135deg,#0b2a63,#1054c4); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
}
.crs-step h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.crs-step p { margin: 0; font-size: 14px; color: var(--c-muted); line-height: 1.5; }

/* 스타일 테이블 */
.crs-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 0; overflow: hidden; border: 0; }
.page-body .crs-table th, .page-body .crs-table td { padding: 15px 30px; text-align: left; font-size: 16.5px; border-bottom: 0; line-height: 1.55; }
.crs-table thead th { background: #0277bd36; color: var(--c-fg); font-weight: 700; }
.crs-table tbody tr:last-child td { border-bottom: 0; }
.crs-table tbody tr:nth-child(even) { background: var(--c-line-2); }
.crs-table td:first-child { font-weight: 700; color: var(--c-primary); white-space: nowrap; }

/* 강조 인용 박스 */
.crs-note {
  background: #fff8e8; border: 1px solid #f4d77a; border-radius: var(--radius);
  padding: 18px 22px; font-size: 16.5px; line-height: 1.7; color: #6b4e12;
}
.crs-note strong { color: #92400e; }

/* CTA 박스 */
.crs-cta {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(135deg,#0b2a63,#1054c4); color: #fff;
  border-radius: var(--radius); padding: 26px 30px;
}
.crs-cta .ic { font-size: 36px; flex: none; }
.crs-cta .txt { flex: 1; min-width: 220px; }
.crs-cta .txt p { margin: 0; font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,.92); }
.crs-cta .txt strong { color: #fff; font-size: 18px; }
.crs-cta .txt a { color: #ffd27a; font-weight: 700; }
.crs-cta > .btn { background: #fff; color: var(--c-primary); font-weight: 800; border: 0; flex: none; padding: 12px 22px; }
.crs-cta > .btn:hover { background: #ffd27a; }

@media (max-width: 640px) {
  .crs-sec-head h2 { font-size: 21px; }
}

/* 서브페이지 헤더 — 카테고리별 배경사진 (사진 + 어둡게 오버레이, 흰 텍스트 유지) */
.page-hero.has-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 300px;
  display: flex;
  align-items: center;
  padding: 40px 0;
}
.page-hero.has-photo h1 { text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.page-hero.has-photo .crumbs { color: rgba(255,255,255,.9); }
.page-hero.has-photo .crumbs a { color: rgba(255,255,255,.9); }
.page-hero.has-photo .page-hero-desc { color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(0,0,0,.3); }

/* ============================================================
   인사말(greeting) 전용 레이아웃
   ------------------------------------------------------------
   격자(grid)로 두면 왼쪽 글이 사진보다 먼저 끝났을 때 행 높이가
   사진에 맞춰져 글 아래에 빈 공간이 남는다.
   사진을 오른쪽으로 띄우면(float) 글이 사진을 감싸고 흘러 공백이 없다.
   선택자를 `.post-body > .pg-portrait` 로 둔 이유: 사진이 격자 안에
   있던 예전 구조에서는 적용되지 않게 하기 위함(전환 중 깨짐 방지).
   ============================================================ */

/* 본문 폭 — 기본 .container 는 화면의 70% 라 1440px 화면에서 1008px 밖에 안 된다.
   page.php 가 붙여 주는 슬러그 훅(.page-greeting / .page-history / .page-strengths)으로
   해당 페이지만 1300px 로 넓힌다. */
.page-greeting > .container,
.page-history > .container,
.page-strengths > .container,
.page-foundation > .container,
.page-facilities > .container,
.page-location > .container,
.page-course-tomorrow > .container,
.page-course-pea > .container,
.page-course-disabled > .container,
.page-course-overseas > .container,
.page-course-sandaeteuk > .container,
.page-course-local > .container,
.page-course-highschool > .container,
.page-course-license > .container,
.page-course-general > .container,
.page-course-entrance > .container,
.page-course-startup > .container,
.page-course-special > .container,
.page-course-contest > .container,
.page-contest-info > .container {
  width: min(1300px, 92%);
  max-width: min(1300px, 92%);
  /* 기본 .container 는 좌우 padding 이 0 이라 인트로 카드는 자체 padding 으로
     여백이 있어 보이지만, 그 아래 본문 문단은 컨테이너 가장자리에 바로
     붙어 보인다. 컨테이너 자체에 좌우 여백을 줘서 카드·본문·사진을 함께 안으로 들인다. */
  padding: 0 32px;
}

/* 글 : 사진 = 60 : 40 = 1.5 : 1 */
/* float 대신 grid 사용 — 문단(1+2)이 사진보다 길면 float 는 넘치는 줄이
   사진 바닥 아래에서 컨테이너 전체 폭으로 튕겨나가(reflow) 문장이 갑자기
   왼쪽으로 붙어 보이는 문제가 있었다. grid 는 텍스트 열 폭이 내용 길이와
   무관하게 항상 고정되므로 이 문제가 생기지 않는다. 사진이 텍스트보다
   짧으면 그냥 사진 아래쪽에 빈 공간이 남을 뿐 — 훨씬 덜 어색하다. */
.page-greeting .pg-photo-row {
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  gap: 45px;
  align-items: start;
  margin: 0 0 24px;
}
.page-greeting .pg-photo-row .pg-portrait { margin: 0; }
.page-greeting .pg-photo-text > p { margin: 0 0 1.15em; }
.page-greeting .pg-photo-text > p:last-child { margin-bottom: 0; }
/* 사진과 무관한 단락(감사합니다·서명)은 여전히 .post-body 의 직계 자식이라
   62em 제한을 풀어 컨테이너 끝까지 채운다 */
.page-greeting .post-body > p { max-width: none; }
/* 서명은 사진 아래로 내려 겹치지 않게 */
.page-greeting .pg-sign {
  clear: both;
  /* 사진이 왼쪽으로 옮겨가면서 문단이 흐르는 텍스트 열이 오른쪽에 위치하게
     됐다. 그 열의 끝(=오른쪽 정렬 기준)이 곧 컨테이너 오른쪽 끝과 같아지므로
     (사진이 더 이상 그 자리를 막고 있지 않음) 폭 제한 없이 전체 폭에서
     text-align:right 만으로 텍스트 열 끝에 맞춰진다. */
  width: auto;
}

@media (max-width: 900px) {
  /* 좁은 화면에서는 한 열로 접고, 사진은 위쪽에 가운데 배치 */
  .page-greeting .pg-photo-row { grid-template-columns: 1fr; }
  .page-greeting .pg-photo-row .pg-portrait {
    max-width: 420px;
    margin: 0 auto 24px;
  }
  /* 사진이 더 이상 옆에 뜨지 않으므로, 서명도 좁힐 필요 없이 전체 폭에서 우측 정렬 */
  .page-greeting .pg-sign {
    width: auto;
  }
}
/* ============================================================
   인사말(greeting) 인트로 문구 재디자인
   ------------------------------------------------------------
   .pg-lead 는 20개 정적 페이지가 공통으로 쓰는 "강조 박스" 클래스라
   기본 규칙은 건드리지 않는다. .page-greeting 훅으로 이 페이지에만
   덧씌워, 밋밋한 좌측 굵은 선 박스를 카드형 + 장식 따옴표로 바꾼다.
   ============================================================ */
.page-greeting .pg-lead,
.page-history .pg-lead,
.page-foundation .pg-lead,
.page-strengths .pg-lead,
.page-facilities .pg-lead,
.page-location .pg-lead,
.page-course-tomorrow .pg-lead,
.page-course-pea .pg-lead,
.page-course-disabled .pg-lead,
.page-course-overseas .pg-lead,
.page-course-sandaeteuk .pg-lead,
.page-course-local .pg-lead,
.page-course-highschool .pg-lead,
.page-course-license .pg-lead,
.page-course-general .pg-lead,
.page-course-entrance .pg-lead,
.page-course-startup .pg-lead,
.page-course-special .pg-lead,
.page-course-contest .pg-lead,
.page-contest-info .pg-lead {
  position: relative;
  /* 컬러 옵션 2(골드) 채택 — 로고 엠블럼의 금색 계열과 맞춤. 연혁 페이지도
     인사말과 같은 디자인을 쓰도록 선택자를 같이 묶었다(색을 또 바꾸면
     두 페이지가 함께 바뀜) */
  background: linear-gradient(135deg, #fdf3e2 0%, #fffbf3 100%);
  border-left: none;
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  padding: 46px 48px 40px 88px;
  margin: 0 0 40px;
  font-size: 21px;
  line-height: 1.85;
  font-weight: 500;
  color: #2b2013;
  /* overflow:hidden 을 쓰지 않는다 — 장식 따옴표(::before)가 top:-34px 로
     박스 위로 살짝 튀어나오게 배치되어 있는데, overflow:hidden 은 그 튀어나온
     부분까지 잘라내 따옴표 윗부분이 잘려 보이는 원인이 된다. */
}
.page-greeting .pg-lead::before,
.page-history .pg-lead::before,
.page-foundation .pg-lead::before,
.page-strengths .pg-lead::before,
.page-facilities .pg-lead::before,
.page-location .pg-lead::before,
.page-course-tomorrow .pg-lead::before,
.page-course-pea .pg-lead::before,
.page-course-disabled .pg-lead::before,
.page-course-overseas .pg-lead::before,
.page-course-sandaeteuk .pg-lead::before,
.page-course-local .pg-lead::before,
.page-course-highschool .pg-lead::before,
.page-course-license .pg-lead::before,
.page-course-general .pg-lead::before,
.page-course-entrance .pg-lead::before,
.page-course-startup .pg-lead::before,
.page-course-special .pg-lead::before,
.page-course-contest .pg-lead::before,
.page-contest-info .pg-lead::before {
  /* 데스크톱은 원래 장식 따옴표(U+1F676) 유지 — 모바일에서만 아래 640px 블록에서 교체한다 */
  content: "\1F676";
  position: absolute;
  top: -8px;
  left: 24px;
  font-family: "Pretendard", "Poppins", system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
  font-size: 104px;
  font-weight: 700;
  line-height: 1;
  color: #b8730d;
  opacity: .20;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 640px) {
  .page-greeting .pg-lead,
  .page-history .pg-lead,
  .page-foundation .pg-lead,
  .page-strengths .pg-lead,
  .page-facilities .pg-lead,
  .page-location .pg-lead,
  .page-course-tomorrow .pg-lead,
  .page-course-pea .pg-lead,
  .page-course-disabled .pg-lead,
  .page-course-overseas .pg-lead,
  .page-course-sandaeteuk .pg-lead,
  .page-course-local .pg-lead,
  .page-course-highschool .pg-lead,
  .page-course-license .pg-lead,
  .page-course-general .pg-lead,
  .page-course-entrance .pg-lead,
  .page-course-startup .pg-lead,
  .page-course-special .pg-lead,
  .page-course-contest .pg-lead,
  .page-contest-info .pg-lead {
    padding: 36px 24px 30px 44px;
    font-size: 18px;
    border-radius: 14px;
  }
  .page-greeting .pg-lead::before,
  .page-history .pg-lead::before,
  .page-foundation .pg-lead::before,
  .page-strengths .pg-lead::before,
  .page-facilities .pg-lead::before,
  .page-location .pg-lead::before,
  .page-course-tomorrow .pg-lead::before,
  .page-course-pea .pg-lead::before,
  .page-course-disabled .pg-lead::before,
  .page-course-overseas .pg-lead::before,
  .page-course-sandaeteuk .pg-lead::before,
  .page-course-local .pg-lead::before,
  .page-course-highschool .pg-lead::before,
  .page-course-license .pg-lead::before,
  .page-course-general .pg-lead::before,
  .page-course-entrance .pg-lead::before,
  .page-course-startup .pg-lead::before,
  .page-course-special .pg-lead::before,
  .page-course-contest .pg-lead::before,
  .page-contest-info .pg-lead::before {
    /* U+1F676 은 안드로이드 기본 글꼴에 글리프가 없어 가로줄 뭉치로 깨진다.
       모바일에서만 어디서나 있는 표준 따옴표(U+201C)로 바꾼다. */
    content: "\201C";
    font-family: Georgia, "Times New Roman", "Nanum Myeongjo", "Noto Serif KR", serif;
    font-size: 84px;
    line-height: .78;
    top: -2px;
    left: 8px;
    opacity: .16;
  }
}
/* ============================================================
   연혁(history) 본문 이미지 — 컨테이너 폭 꽉 채우기
   ------------------------------------------------------------
   전역 규칙은 img { max-width: 100% } 뿐이라 이미지가 원본 크기(1100px)
   이상으로는 커지지 않아, 1300px 컨테이너의 안쪽 폭(1236px)에 여백이 남았다.
   width:100% 를 줘서 컨테이너에 맞춰 늘린다.
   ============================================================ */
.page-history .post-body img {
  width: 100%;
  height: auto;
}
/* ============================================================
   연혁(history) — 방향 3 : 대형 타이포그래피 에디토리얼 연표
   ------------------------------------------------------------
   DB 본문(h2 + ul 반복, 둘 다 .post-body 의 직계 자식)은 손대지 않고
   .post-body 자체를 2단 그리드로 바꾼다.
     · 왼쪽 단 = 아주 큰 연도(옅은 남색 그라데이션, 배경 오브제처럼)
     · 오른쪽 단 = 항목 목록(가는 실선으로 나뉜 잡지식 표)
   h2 와 바로 뒤 ul 이 한 행을 이루고, 인트로 카드·사진은 전체 폭을 쓴다.
   모든 선택자는 .page-history 로 시작하므로 나머지 19개 페이지에는
   영향이 없다.
   ============================================================ */

.page-history .post-body {
  /* --- 이 페이지 안에서만 쓰는 지역 변수 ------------------- */
  --h-page-bg: #fbfcfe;                 /* body 배경색 (호버 그라데이션 종점) */
  --h-gap: clamp(28px, 4.2vw, 72px);    /* 연도 단 ↔ 항목 단 사이 */
  --h-pad: clamp(20px, 2.2vw, 30px);    /* 항목 왼쪽 들여쓰기(점 마커 자리) */
  --h-li-pt: 10px;                      /* 항목 위 여백 — 마커 위치 계산에 재사용 */

  display: grid;
  /* 왼쪽 단 35% — "1991년 ~ 2019년" 이 두 줄로 접혀도 여유 있게 들어가는 폭.
     (연도 글자 크기를 6.2vw 로 묶어 두어 단 폭과 함께 줄어든다)
     오른쪽 단 minmax(0,1fr) 은 긴 문장이 단을 밀어내지 못하게 하는 안전장치. */
  grid-template-columns: minmax(232px, 20%) minmax(0, 1fr);
  column-gap: var(--h-gap);
  row-gap: clamp(48px, 5.6vw, 92px);    /* 연도 블록 사이의 과감한 여백 */
  align-items: start;                   /* 연도가 세로로 늘어나지 않게(sticky 조건) */
}

/* 배치 규칙 —
   기본은 전체 폭(인트로 카드·사진·혹시 모를 문단),
   h2 는 왼쪽 단, h2 바로 뒤의 ul 만 오른쪽 단으로 보낸다.
   h2 없이 놓인 ul 은 전체 폭으로 흘러 레이아웃이 깨지지 않는다. */
.page-history .post-body > *        { grid-column: 1 / -1; }
.page-history .post-body > h2       { grid-column: 1; }
.page-history .post-body > h2 + ul  { grid-column: 2; }

/* 행 간격은 row-gap 이 전담 — 기존 margin 은 0 으로 정리.
   (.page-body .post-body > .pg-lead 의 margin-bottom:60px 보다 우선하도록
    .page-history.page-body 로 클래스를 겹쳐 특정도를 올린다) */
.page-history.page-body .post-body > .pg-lead { margin-bottom: 0; }

/* ------------------------------------------------------------
   연도 — 페이지에서 가장 큰 활자. 옅게 깔아 배경 오브제처럼 쓰되
   대비 3:1(큰 글자 기준)은 지키도록 그라데이션 위쪽을 진하게 잡았다.
   ------------------------------------------------------------ */
.page-history .post-body > h2 {
  /* position:sticky 는 쓰지 않는다 — 그리드 아이템의 sticky 기준 상자는
     "행(그리드 영역)"이 아니라 그리드 컨테이너 전체라서, 연도 7개가
     모두 같은 위치에 겹쳐 붙는 버그가 난다(실제로 확인함). */
  align-self: start;                      /* 항목이 길어도 연도는 행 위쪽에 */
  margin: 0;
  font-size: clamp(38px, 4.6vw, 65px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;     /* 연도 숫자 폭을 고르게 */
  text-wrap: balance;                     /* "1991년 ~ 2019년" 을 두 줄로 고르게 */
  color: color-mix(in srgb, var(--c-primary) 46%, transparent); /* 폴백 단색 */
}

/* 연도 위 금색 막대 — 오른쪽 단 첫 항목의 실선과 같은 높이에서 시작해
   두 단이 하나의 행이라는 걸 보여 주는 잡지식 기준선. */
.page-history .post-body > h2::before {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  margin-bottom: clamp(12px, 1.4vw, 18px);
  border-radius: 2px;
  background: var(--c-accent);
}

/* 글자 안쪽 그라데이션 — 위는 진하게, 아래로 갈수록 흐려져
   숫자가 종이에 눌린 것처럼 보인다. 지원되는 브라우저에서만 적용. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .page-history .post-body > h2 {
    background-image: linear-gradient(168deg,
      color-mix(in srgb, var(--c-primary) 64%, transparent) 0%,
      color-mix(in srgb, var(--c-primary) 20%, transparent) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  /* 가장 최근 연도(맨 위)만 진하게 — 페이지에 시선을 붙잡는 지점을 만든다 */
  .page-history .post-body > h2:first-of-type {
    background-image: linear-gradient(168deg,
      var(--c-primary) 0%,
      color-mix(in srgb, var(--c-primary) 42%, transparent) 100%);
  }
}

/* ------------------------------------------------------------
   항목 목록 — 62em 폭 제한을 풀고, 잡지 목차처럼 가는 실선으로 나눈다.
   ------------------------------------------------------------ */
.page-history .post-body > ul {
  max-width: none;      /* .page-body .post-body > ul 의 62em 해제 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-history .post-body > ul > li {
  position: relative;
  margin: 0;
  padding: var(--h-li-pt) 0 calc(var(--h-li-pt) + 2px) var(--h-pad);
  border-top: 1px solid var(--c-line-2);
  font-size: 18px;
  line-height: 1.78;
  color: var(--c-fg);
  transition: background-color .18s ease;
}
/* 행의 첫 줄만 조금 더 또렷하게 — 금색 막대와 같은 높이에서 시작 */
.page-history .post-body > ul > li:first-child { border-top-color: var(--c-line); }

/* 점 마커 — 첫 줄 세로 중앙에 맞춘다(패딩 + 줄높이 절반 − 점 반지름) */
.page-history .post-body > ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(var(--h-li-pt) + .89em - 4px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-primary) 30%, transparent);
  transition: background-color .18s ease, transform .18s ease;
}

/* 강조 문구(개원 등)는 남색 + 금색 형광펜 밑줄 */
.page-history .post-body > ul > li strong {
  font-weight: 700;
  color: var(--c-primary);
  background-image: linear-gradient(180deg,
    transparent 62%,
    color-mix(in srgb, var(--c-accent) 34%, transparent) 62%);
}

@media (hover: hover) {
  .page-history .post-body > ul > li:hover {
    background-image: linear-gradient(90deg, var(--c-line-2) 0%, var(--h-page-bg) 62%);
  }
  .page-history .post-body > ul > li:hover::before {
    background: var(--c-accent);
    transform: scale(1.25);
  }
}

/* ------------------------------------------------------------
   태블릿 이하(1024px) — 2단을 접고 연도를 항목 위로 올린다.
   이 폭부터는 오른쪽 단이 500px 아래로 내려가 한 줄에 25자밖에
   못 담으므로, 목록을 전체 폭으로 펴는 편이 훨씬 잘 읽힌다.
   단이 사라지므로 연도 줄바꿈 걱정도 함께 사라진다.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .page-history .post-body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;                 /* 한 줄 배치에서는 margin 으로 간격을 잡는다 */
  }
  .page-history .post-body > h2,
  .page-history .post-body > h2 + ul { grid-column: 1 / -1; }

  .page-history.page-body .post-body > .pg-lead { margin-bottom: 34px; }

  .page-history .post-body > h2 {
    font-size: clamp(28px, 5.5vw, 43px);
    letter-spacing: -.035em;
    margin: 52px 0 14px;
  }
  .page-history .post-body > h2::before {
    width: 42px;
    height: 3px;
    margin-bottom: 12px;
  }
}

/* ------------------------------------------------------------
   모바일 — 활자·여백을 한 단계 줄인다.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .page-history .post-body {
    --h-pad: 18px;
    --h-li-pt: 9px;
  }
  .page-history .post-body > h2 {
    font-size: clamp(24px, 6.4vw, 32px);
    margin: 40px 0 12px;
  }
  .page-history .post-body > ul > li {
    font-size: 16.5px;
    line-height: 1.72;
  }
  .page-history .post-body > ul > li::before {
    width: 6px;
    height: 6px;
    top: calc(var(--h-li-pt) + .86em - 3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-history .post-body > ul > li,
  .page-history .post-body > ul > li::before { transition: none; }
}

/* ============================================================
   조직도 — 이미지(org.png 699KB) 대신 코드로 구현
   ------------------------------------------------------------
   · 3개 처를 각각 다른 색으로 구분(그린 / 틸 / 앰버). 하위 부서도
     소속 처의 색을 옅게 물려받아 어디 소속인지 한눈에 보인다.
   · 가로 분기선을 .org-cols 의 고정폭이 아니라 각 열이 나눠 그린다.
     열 폭을 바꿔도 선이 자동으로 맞으므로 유지보수 시 어긋나지 않는다.
   · 폭은 위계대로 — 법인 300 > 학교 380 > 처 250 > 하위 228px.
   · 외곽 테두리·배경 없음. .found-figure(대회반 페이지)는 손대지 않았다.
   ============================================================ */
.org {
  --org-line: #cfd8d3;
  padding: 8px 0 4px;
}

/* --- 상단 2단(법인 → 학교) --- */
.org-top { display: flex; flex-direction: column; align-items: center; }
.org-node { border-radius: 12px; text-align: center; line-height: 1.4; }

.org-corp {
  background: linear-gradient(150deg, #0056f3 0%, #0b3d91 100%);
  color: #fff;
  padding: 28px 52px;
  min-width: 300px;
  border-radius: 999px;   /* 알약 모양 — .org-node 의 12px 를 덮어씀 */
  box-shadow: 0 20px 50px rgba(11, 61, 145, .22), 0 6px 14px rgba(11, 61, 145, .13);
}
.org-corp strong { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.org-corp span { display: block; font-size: 15px; font-weight: 500; opacity: .75; margin-top: 4px; }

.org-school {
  position: relative; margin-top: 52px;
  background: linear-gradient(150deg, #009536 0%, #1b4332 100%); color: #fff; padding: 22px 40px; min-width: 300px;
  font-size: 24px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 14px 34px rgba(27,67,50,.18), 0 4px 10px rgba(27,67,50,.10);
}
.org-school::before {
  content: ""; position: absolute; left: 50%; top: -52px;
  width: 2px; height: 52px; background: var(--org-line); transform: translateX(-1px);
}

/* --- 3개 처 --- */
/* minmax(0,250px) 이라 공간이 좁아지면 열이 알아서 줄어든다(넘침 방지) */
.org-cols {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 250px));
  gap: 68px; justify-content: center; margin-top: 50px; padding-top: 50px;
}
/* 학교 → 가로선 세로 연결 */
.org-cols::after {
  content: ""; position: absolute; top: -50px; left: 50%;
  width: 2px; height: 50px; background: var(--org-line); transform: translateX(-1px);
}
.org-col { position: relative; }
/* 각 열이 자기 위 세로선을 그린다 */
.org-col::before {
  content: ""; position: absolute; top: -50px; left: 50%;
  width: 2px; height: 50px; background: var(--org-line); transform: translateX(-1px);
}
/* 가로 분기선을 세 열이 나눠 그린다 — 열 폭이 바뀌어도 자동으로 이어진다
   (gap 56px 의 절반인 28px 만큼 양옆으로 뻗어 서로 만난다) */
.org-col::after {
  content: ""; position: absolute; top: -50px; height: 2px; background: var(--org-line);
}
.org-col:first-child::after  { left: 50%; right: -34px; }
.org-col:nth-child(2)::after { left: -34px; right: -34px; }
.org-col:last-child::after   { left: -34px; right: 50%; }

.org-dept {
  background: #fff; padding: 14px 12px;
  font-size: 21px; font-weight: 800; letter-spacing: -.01em;
  box-shadow: var(--shadow-sm);
}

/* --- 하위 실/부 --- */
.org-team { list-style: none; margin: 0; padding: 0; position: relative; }
.org-team li {
  position: relative; margin-top: 20px;
  border-radius: 10px; padding: 14px 16px;
  font-size: 17px; font-weight: 600; color: var(--c-fg); text-align: center;
}
/* 처(부서) 박스와 첫 하위 항목 사이만 더 넓게. 항목끼리는 20px 유지.
   연결선 길이도 같이 늘려야 선이 끊기지 않는다. */
.org-team li:first-child { margin-top: 32px; }
.org-team li:first-child::before { top: -32px; height: 32px; }
/* 항목 사이를 잇는 일자 세로선 — 각 항목이 자기 위쪽 12px 구간을 그린다.
   첫 항목은 처(.org-dept) 아래에서 내려오는 선이 되고, 이후는 항목끼리 이어진다. */
.org-team li::before {
  content: ""; position: absolute; left: 50%; top: -20px;
  width: 2px; height: 20px; background: var(--org-line); transform: translateX(-1px);
}

/* --- 처별 색 구분 — 하위 부서가 소속 처의 색을 옅게 물려받는다 --- */
.org-col:nth-child(1) { --dept: #1f6f4a; --dept-soft: #eef7f1; --dept-line: #cfe6da; }
.org-col:nth-child(2) { --dept: #10666e; --dept-soft: #ecf6f7; --dept-line: #c9e4e7; }
.org-col:nth-child(3) { --dept: #a9741a; --dept-soft: #fdf5e8; --dept-line: #f0dfc0; }

.org-col .org-dept { border: 2px solid var(--dept); color: var(--dept); }
.org-col .org-team li { background: var(--dept-soft); border: 1px solid var(--dept-line); }
/* 연결선도 소속 처 색으로 */
.org-col .org-team li::before { background: var(--dept-line); }

@media (max-width: 860px) {
  .org-cols { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 26px; padding-top: 26px; }
  .org-cols::after { top: -26px; height: 26px; }
  .org-col { padding-top: 26px; }
  .org-col:first-child { padding-top: 0; }
  .org-col::before { top: 0; height: 26px; }
  .org-col:first-child::before { top: -26px; }
  .org-col::after { display: none; }   /* 세로 배치에선 가로 분기선 불필요 */
  .org-corp, .org-school { min-width: 0; width: 100%; max-width: 340px; }
}
@media (max-width: 480px) {
  .org-corp strong { font-size: 22px; }
  .org-corp { padding: 20px 34px; }   /* 좁은 화면에선 좌우 여백을 줄여 글자가 눌리지 않게 */
  .org-school { font-size: 17px; padding: 13px 20px; }
  .org-dept { font-size: 18px; }
  .org-team li { font-size: 16px; padding: 12px 14px; }
}

/* ============================================================
   법인소개 섹션 간격
   ------------------------------------------------------------
   교육목표 카드(.found-goals)의 margin-bottom 이 0 이라 다음 h2
   "조직도" 의 margin-top 44px 만으로 버티고 있어 답답해 보였다.
   (인트로 .pg-lead 아래는 60px 인 것과 대비)
   블록 → 다음 제목 사이를 넉넉히 벌린다.
   ============================================================ */
.page-foundation .post-body > h2,
.page-facilities .post-body > h2,
.page-location .post-body > h2 {
  position: relative;
  margin-top: 84px;
  margin-bottom: 20px;
  padding-left: 20px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--c-primary);
}
/* 제목 왼쪽 금색 바 — 인트로 카드(.pg-lead)의 금색과 같은 계열 */
.page-foundation .post-body > h2::before,
.page-facilities .post-body > h2::before,
.page-location .post-body > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .18em;
  width: 5px;
  border-radius: 0;   /* 둥근 끝 없이 각진 직선 */
  background: var(--c-accent);
}
@media (max-width: 640px) {
  .page-foundation .post-body > h2,
  .page-facilities .post-body > h2,
  .page-location .post-body > h2 { font-size: 27px; padding-left: 15px; margin-top: 62px; }
  .page-foundation .post-body > h2::before,
  .page-facilities .post-body > h2::before,
  .page-location .post-body > h2::before { width: 4px; }
}
.page-foundation .post-body > h2:first-of-type,
.page-facilities .post-body > h2:first-of-type,
.page-location .post-body > h2:first-of-type { margin-top: 44px; }  /* 첫 제목은 그대로 */

/* ============================================================
   시설장비현황 — 표 내용 가운데 정렬
   ------------------------------------------------------------
   공통 규칙 .page-body table th/td 는 text-align:left 라
   구분/수량 4열 표에서 숫자가 왼쪽에 몰려 보인다.
   이 페이지에만 덧씌운다(다른 페이지 표는 그대로 왼쪽 정렬).
   ============================================================ */
.page-facilities .post-body > table th,
.page-facilities .post-body > table td { text-align: center; }

/* ============================================================
   국민내일배움과정 — 인트로만 그린 계열로
   ------------------------------------------------------------
   형태(모서리·따옴표·여백)는 위 공통 규칙을 그대로 쓰고 색만 덮는다.
   골드를 안 쓰는 이유: 이 페이지 본문은 .crs-sec 남색 카드로 채워져
   있어 상단까지 남색·골드 계열이면 색이 뭉친다. 그린은 조직도
   교무처(#1f6f4a)에서 이미 쓰고 있는 색이라 사이트 밖으로 안 벗어난다.
   ============================================================ */
.page-course-tomorrow .pg-lead,
.page-course-pea .pg-lead,
.page-course-disabled .pg-lead,
.page-course-overseas .pg-lead,
.page-course-sandaeteuk .pg-lead,
.page-course-local .pg-lead {
  background: linear-gradient(135deg, #e8f4ec 0%, #f7fcf9 100%);
  color: #12281d;
}
.page-course-tomorrow .pg-lead::before,
.page-course-pea .pg-lead::before,
.page-course-disabled .pg-lead::before,
.page-course-overseas .pg-lead::before,
.page-course-sandaeteuk .pg-lead::before,
.page-course-local .pg-lead::before { color: #1f6f4a; }

/* ============================================================
   국비지원과정 — 섹션 제목을 사이트 공통 디자인으로
   ------------------------------------------------------------
   기존: 48px 그라데이션 사각형 안에 이모지 + 24px 제목.
   이모지는 DB 본문(10개 언어)에 들어 있어 CSS 로만 숨긴다 —
   본문을 건드리지 않으므로 이 블록만 지우면 원래대로 돌아온다.
   제목은 법인소개/시설장비현황/찾아오시는길과 같은
   34px 남색 + 금색 좌측 바로 통일.
   ============================================================ */
.page-course-tomorrow .crs-sec-head .ic,
.page-course-pea .crs-sec-head .ic,
.page-course-disabled .crs-sec-head .ic,
.page-course-overseas .crs-sec-head .ic,
.page-course-sandaeteuk .crs-sec-head .ic,
.page-course-local .crs-sec-head .ic { display: none; }
.page-course-tomorrow .crs-sec-head,
.page-course-pea .crs-sec-head,
.page-course-disabled .crs-sec-head,
.page-course-overseas .crs-sec-head,
.page-course-sandaeteuk .crs-sec-head,
.page-course-local .crs-sec-head {
  display: block;
  margin: 84px 0 20px;   /* 시설장비현황 .post-body > h2 와 같은 값. 앞 .crs-sec 의 margin-bottom 40px 과 상쇄되어 84px 로 확정 */
}
.page-course-tomorrow .crs-sec-head h2,
.page-course-pea .crs-sec-head h2,
.page-course-disabled .crs-sec-head h2,
.page-course-overseas .crs-sec-head h2,
.page-course-sandaeteuk .crs-sec-head h2,
.page-course-local .crs-sec-head h2 {
  position: relative;
  margin: 0;
  padding-left: 28px;
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--c-fg);
}
.page-course-tomorrow .crs-sec-head h2::before,
.page-course-pea .crs-sec-head h2::before,
.page-course-disabled .crs-sec-head h2::before,
.page-course-overseas .crs-sec-head h2::before,
.page-course-sandaeteuk .crs-sec-head h2::before,
.page-course-local .crs-sec-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
  width: 15px;
  height: 15px;
  border-radius: 0;   /* 각진 정사각형 */
  background: linear-gradient(135deg, #2d8a5e 0%, #155238 100%);   /* 인트로 따옴표(#1f6f4a) 기준 그린 그라데이션 */
}
@media (max-width: 640px) {
  .page-course-tomorrow .crs-sec-head h2,
  .page-course-pea .crs-sec-head h2,
  .page-course-disabled .crs-sec-head h2,
  .page-course-overseas .crs-sec-head h2,
  .page-course-sandaeteuk .crs-sec-head h2,
  .page-course-local .crs-sec-head h2 { font-size: 24px; padding-left: 23px; }
  .page-course-tomorrow .crs-sec-head,
  .page-course-pea .crs-sec-head,
  .page-course-disabled .crs-sec-head,
  .page-course-overseas .crs-sec-head,
  .page-course-sandaeteuk .crs-sec-head,
  .page-course-local .crs-sec-head { margin-top: 56px; }
  .page-course-tomorrow .crs-sec-head h2::before,
  .page-course-pea .crs-sec-head h2::before,
  .page-course-disabled .crs-sec-head h2::before,
  .page-course-overseas .crs-sec-head h2::before,
  .page-course-sandaeteuk .crs-sec-head h2::before,
  .page-course-local .crs-sec-head h2::before { width: 12px; height: 12px; top: -7px; }
}

/* 첫 제목은 인트로 바로 아래라 84px 가 과하다 — 시설장비현황의
   .post-body > h2:first-of-type { margin-top: 44px } 와 같은 처리.
   :first-of-type 대신 인접 형제 선택자를 쓴 이유: 페이지마다 .pg-lead
   다음 블록이 항상 .crs-sec 인지 보장되지 않아 더 명시적으로 잡는다.
   선택자 4개(클래스)라 위 규칙·모바일 규칙보다 우선순위가 높다. */
.page-course-tomorrow .pg-lead + .crs-sec .crs-sec-head,
.page-course-pea .pg-lead + .crs-sec .crs-sec-head,
.page-course-disabled .pg-lead + .crs-sec .crs-sec-head,
.page-course-overseas .pg-lead + .crs-sec .crs-sec-head,
.page-course-sandaeteuk .pg-lead + .crs-sec .crs-sec-head,
.page-course-local .pg-lead + .crs-sec .crs-sec-head { margin-top: 44px; }

/* 안내 박스(.crs-note) 와 상담 CTA(.crs-cta) 가 맞닿아 답답해 보인다.
   둘 다 margin 이 없어서 0px 로 붙는다. 인접할 때만 띄운다 —
   .crs-cta 자체에 margin-top 을 주면 다른 배치에서도 간격이 생긴다. */
.crs-note + .crs-cta { margin-top: 20px; }

/* ============================================================
   국비지원 — 지원내용 4개 항목을 2x2 카드로
   ------------------------------------------------------------
   기존: 4열 한 줄, 하늘색 배경 + 남색 좌측 바.
   흰 카드 + 얇은 테두리로 바꾸고 2x2 로 접는다. 카드 형태는
   같은 페이지의 .crs-card 와 맞춰(테두리·모서리·그림자 동일)
   한 페이지 안에서 카드가 두 종류로 보이지 않게 했다.
   라벨은 그린 배지, 금액은 26px 로 키워 숫자가 먼저 읽히게 한다.
   대회반(course-contest)도 .crs-support 를 쓰지만 제외했다 —
   라벨이 대회명이라 배지 안에서 줄바꿈되고, 항목이 3개라
   2열에서 하나가 남는다.
   ============================================================ */
.page-course-tomorrow .crs-support,
.page-course-disabled .crs-support {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.page-course-tomorrow .crs-support-item,
.page-course-disabled .crs-support-item {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 26px 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.page-course-tomorrow .crs-support-item:hover,
.page-course-disabled .crs-support-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #cfe6da;
}
.page-course-tomorrow .crs-support-item .label,
.page-course-disabled .crs-support-item .label {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  color: #1f6f4a;
  letter-spacing: .02em;
  background: #e8f4ec;
  border-radius: 6px;
  padding: 4px 10px;
}
.page-course-tomorrow .crs-support-item .value,
.page-course-disabled .crs-support-item .value {
  margin-top: 14px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--c-fg);
}
.page-course-tomorrow .crs-support-item .value strong,
.page-course-disabled .crs-support-item .value strong { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }

@media (max-width: 640px) {
  .page-course-tomorrow .crs-support,
  .page-course-disabled .crs-support { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .page-course-tomorrow .crs-support-item,
  .page-course-disabled .crs-support-item { padding: 22px 22px 20px; }
}

/* ============================================================
   법인소개 — 제목 장식을 세로 바에서 사각형으로
   ------------------------------------------------------------
   국비지원과정과 같은 방식(제목 왼쪽 12px 정사각형, 위로 -9px).
   색은 기존 금색 var(--c-accent) = #f5a623 그대로.
   시설장비현황·찾아오시는길은 같은 규칙 그룹을 쓰지만 여기서
   .page-foundation 만 덮어써서 세로 바를 유지한다.
   base 규칙에 bottom: .18em 이 있어 height 가 먹지 않으므로
   bottom: auto 로 풀어 준다.
   ============================================================ */
.page-foundation .post-body > h2,
.page-facilities .post-body > h2,
.page-location .post-body > h2 {
  padding-left: 28px;
  font-size: 29px;      /* 국비지원 제목과 같은 크기 */
  color: var(--c-fg);   /* 국비지원 제목과 같은 검정 */
}
.page-foundation .post-body > h2::before,
.page-facilities .post-body > h2::before,
.page-location .post-body > h2::before {
  top: -9px;
  bottom: auto;
  width: 15px;
  height: 15px;
  border-radius: 0;
  background: linear-gradient(135deg, #f9b93f 0%, #d4870b 100%);   /* 기존 금색(--c-accent #f5a623) 기준 그라데이션 */
}
@media (max-width: 640px) {
  .page-foundation .post-body > h2,
  .page-facilities .post-body > h2,
  .page-location .post-body > h2 { padding-left: 23px; font-size: 24px; }
  .page-foundation .post-body > h2::before,
  .page-facilities .post-body > h2::before,
  .page-location .post-body > h2::before { width: 12px; height: 12px; top: -7px; }
}

/* ============================================================
   일반고위탁과정 — 파란 계열
   ------------------------------------------------------------
   인트로 카드 형태·컨테이너 폭은 위 공통 그룹을 그대로 쓰고
   색만 덮는다. 섹션 제목은 국비지원과 같은 방식(이모지 숨김 +
   왼쪽 사각형)에 색만 파랑. 지원내용 4항목은 2x2 카드.
   이모지는 DB 본문(10개 언어)에 있어 CSS 로만 숨긴다.
   ============================================================ */

/* 인트로 — 블루 */
.page-course-highschool .pg-lead {
  background: linear-gradient(135deg, #e9f0fd 0%, #f8fbff 100%);
  color: #16233c;
}
.page-course-highschool .pg-lead::before { color: #1054c4; }

/* 섹션 제목 — 이모지 숨김 + 파란 사각형 */
.page-course-highschool .crs-sec-head .ic { display: none; }
.page-course-highschool .crs-sec-head {
  display: block;
  margin: 84px 0 20px;
}
/* 첫 제목은 인트로 바로 아래라 84px 가 과하다 */
.page-course-highschool .pg-lead + .crs-sec .crs-sec-head { margin-top: 44px; }
.page-course-highschool .crs-sec-head h2 {
  position: relative;
  margin: 0;
  padding-left: 28px;
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--c-fg);
}
.page-course-highschool .crs-sec-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
  width: 15px;
  height: 15px;
  border-radius: 0;
  background: linear-gradient(135deg, #2f7fe0 0%, #0b3d91 100%);
}

/* 지원내용 — 2x2 카드 */
.page-course-highschool .crs-support {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.page-course-highschool .crs-support-item {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 26px 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.page-course-highschool .crs-support-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #c6dbf6;
}
.page-course-highschool .crs-support-item .label {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  color: #0b3d91;
  letter-spacing: .02em;
  background: #e9f0fd;
  border-radius: 6px;
  padding: 4px 10px;
}
.page-course-highschool .crs-support-item .value {
  margin-top: 14px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--c-fg);
}
.page-course-highschool .crs-support-item .value strong { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }

@media (max-width: 640px) {
  .page-course-highschool .crs-sec-head { margin-top: 56px; }
  .page-course-highschool .crs-sec-head h2 { font-size: 24px; padding-left: 23px; }
  .page-course-highschool .crs-sec-head h2::before { width: 12px; height: 12px; top: -7px; }
  .page-course-highschool .crs-support { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .page-course-highschool .crs-support-item { padding: 22px 22px 20px; }
}

/* ============================================================
   일반과정 5개 페이지 — 다홍 계열
   ------------------------------------------------------------
   자격증 / 일반 / 진학 / 창업 / 특강이벤트.
   인트로 형태·컨테이너 폭은 공통 그룹을 그대로 쓰고 색만 덮는다.
   섹션 제목은 자격증·특강이벤트에는 없다(.crs-sec-head 미사용) —
   규칙은 같이 걸어 두어 나중에 추가돼도 자동 적용된다.
   이모지는 DB 본문(10개 언어)에 있어 CSS 로만 숨긴다.
   ============================================================ */

/* 인트로 — 다홍 */
.page-course-license .pg-lead,
.page-course-general .pg-lead,
.page-course-entrance .pg-lead,
.page-course-startup .pg-lead,
.page-course-special .pg-lead {
  background: linear-gradient(135deg, #fdece6 0%, #fffaf8 100%);
  color: #3a1a12;
}
.page-course-license .pg-lead::before,
.page-course-general .pg-lead::before,
.page-course-entrance .pg-lead::before,
.page-course-startup .pg-lead::before,
.page-course-special .pg-lead::before { color: #c9432a; }

/* 섹션 제목 — 이모지 숨김 + 다홍 사각형 */
.page-course-license .crs-sec-head .ic,
.page-course-general .crs-sec-head .ic,
.page-course-entrance .crs-sec-head .ic,
.page-course-startup .crs-sec-head .ic,
.page-course-special .crs-sec-head .ic { display: none; }
.page-course-license .crs-sec-head,
.page-course-general .crs-sec-head,
.page-course-entrance .crs-sec-head,
.page-course-startup .crs-sec-head,
.page-course-special .crs-sec-head {
  display: block;
  margin: 84px 0 20px;
}
/* 첫 제목은 인트로 바로 아래라 84px 가 과하다 */
.page-course-license .pg-lead + .crs-sec .crs-sec-head,
.page-course-general .pg-lead + .crs-sec .crs-sec-head,
.page-course-entrance .pg-lead + .crs-sec .crs-sec-head,
.page-course-startup .pg-lead + .crs-sec .crs-sec-head,
.page-course-special .pg-lead + .crs-sec .crs-sec-head { margin-top: 44px; }
.page-course-license .crs-sec-head h2,
.page-course-general .crs-sec-head h2,
.page-course-entrance .crs-sec-head h2,
.page-course-startup .crs-sec-head h2,
.page-course-special .crs-sec-head h2 {
  position: relative;
  margin: 0;
  padding-left: 28px;
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--c-fg);
}
.page-course-license .crs-sec-head h2::before,
.page-course-general .crs-sec-head h2::before,
.page-course-entrance .crs-sec-head h2::before,
.page-course-startup .crs-sec-head h2::before,
.page-course-special .crs-sec-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
  width: 15px;
  height: 15px;
  border-radius: 0;
  background: linear-gradient(135deg, #f2603c 0%, #b8341c 100%);
}

@media (max-width: 640px) {
  .page-course-license .crs-sec-head,
  .page-course-general .crs-sec-head,
  .page-course-entrance .crs-sec-head,
  .page-course-startup .crs-sec-head,
  .page-course-special .crs-sec-head { margin-top: 56px; }
  .page-course-license .crs-sec-head h2,
  .page-course-general .crs-sec-head h2,
  .page-course-entrance .crs-sec-head h2,
  .page-course-startup .crs-sec-head h2,
  .page-course-special .crs-sec-head h2 { font-size: 24px; padding-left: 23px; }
  .page-course-license .crs-sec-head h2::before,
  .page-course-general .crs-sec-head h2::before,
  .page-course-entrance .crs-sec-head h2::before,
  .page-course-startup .crs-sec-head h2::before,
  .page-course-special .crs-sec-head h2::before { width: 12px; height: 12px; top: -7px; }
}

/* ============================================================
   대회반 2개 페이지 — 보라 계열
   ------------------------------------------------------------
   대회출전전문과정 / 주요대회 안내.
   인트로 형태·컨테이너 폭은 공통 그룹을 쓰고 색만 덮는다.
   대회출전전문과정의 .crs-support(3항목, 대회명 라벨)는
   손대지 않는다 — 2x2 카드로 접으면 하나가 남고 라벨이
   배지 안에서 줄바꿈된다.
   ============================================================ */

/* 인트로 — 보라 */
.page-course-contest .pg-lead,
.page-contest-info .pg-lead {
  background: linear-gradient(135deg, #f1ebfa 0%, #fbf9ff 100%);
  color: #241634;
}
.page-course-contest .pg-lead::before,
.page-contest-info .pg-lead::before { color: #6b3fa0; }

/* 섹션 제목 — 이모지 숨김 + 보라 사각형 */
.page-course-contest .crs-sec-head .ic,
.page-contest-info .crs-sec-head .ic { display: none; }
.page-course-contest .crs-sec-head,
.page-contest-info .crs-sec-head {
  display: block;
  margin: 84px 0 20px;
}
.page-course-contest .crs-sec-head h2,
.page-contest-info .crs-sec-head h2 {
  position: relative;
  margin: 0;
  padding-left: 28px;
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--c-fg);
}
.page-course-contest .crs-sec-head h2::before,
.page-contest-info .crs-sec-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
  width: 15px;
  height: 15px;
  border-radius: 0;
  background: linear-gradient(135deg, #8a5cd1 0%, #4b2782 100%);
}

@media (max-width: 640px) {
  .page-course-contest .crs-sec-head,
  .page-contest-info .crs-sec-head { margin-top: 56px; }
  .page-course-contest .crs-sec-head h2,
  .page-contest-info .crs-sec-head h2 { font-size: 24px; padding-left: 23px; }
  .page-course-contest .crs-sec-head h2::before,
  .page-contest-info .crs-sec-head h2::before { width: 12px; height: 12px; top: -7px; }
}

/* ============================================================
   주요대회 안내 — 카드 한 줄에 4개 고정
   ------------------------------------------------------------
   기본 .crs-cards 는 auto-fit minmax(230px,1fr) 이라 1236px 폭에서
   5개가 들어간다. 이 페이지만 4열로 고정하고, 좁아지면 3 -> 2 -> 1 로
   단계적으로 접는다(auto-fit 이 아니므로 직접 지정해야 한다).
   ============================================================ */
.page-contest-info .crs-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .page-contest-info .crs-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .page-contest-info .crs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .page-contest-info .crs-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   푸터 인증 배지 — 고용노동부 우수훈련기관
   ------------------------------------------------------------
   .footer-main 은 space-between 이라 자식이 3개가 되면 배지가
   가운데로 밀린다. .footer-info 에 margin-right:auto 를 줘서
   배지와 SNS 를 오른쪽으로 모은다.
   원본 PNG(250x249)는 모서리가 투명이라 어두운 배경에 그대로 얹힌다.
   ============================================================ */
.footer-info { margin-right: auto; }
.footer-badge { flex: none; line-height: 0; }
.footer-badge img {
  width: 96px;
  height: auto;
  display: block;
  border-radius: 0;
}
@media (max-width: 768px) {
  .footer-info { margin-right: 0; }
  .footer-badge img { width: 84px; }
}

/* ============================================================
   게시판 인라인 SVG 아이콘 (svg_icon() 출력)
   ------------------------------------------------------------
   이모지를 대체한다. stroke 가 currentColor 라 색은 부모를 따라가고,
   크기는 글자 크기(em)에 맞춰 따라 커진다.
   ============================================================ */
.ico-svg {
  width: 1em;
  height: 1em;
  vertical-align: -.14em;
  flex: none;
}
/* 제목 앞 자물쇠·압정 — 글자와 살짝 띄운다 */
.board-table td.subj > .ico-svg { margin-right: 2px; opacity: .75; }
.board-table td.num-col > .ico-svg { opacity: .8; }
/* 첨부·댓글 배지 안 아이콘 */
.board-table .badge > .ico-svg { width: .95em; height: .95em; margin-right: 2px; }
/* 첨부파일 다운로드 카드 */
.download-card .dl-icon > .ico-svg { width: 26px; height: 26px; }
.download-card .dl-action > .ico-svg { width: 20px; height: 20px; }
/* 본문 제목·일정 바 */
.post-head h1 > .ico-svg, .event-bar > .ico-svg { vertical-align: -.1em; }

/* 자물쇠(비밀글)만 주황 — stroke 가 currentColor 라 color 만 주면 된다.
   .board-table td.subj > .ico-svg 의 opacity .75 를 같은 자리에서 되돌린다. */
.ico-lock { color: #f57c00; }
.board-table td.subj > .ico-lock { opacity: 1; }

/* ============================================================
   게시판 — 본문 폭 1300px
   ------------------------------------------------------------
   글보기(.post-view)·글쓰기(.post-write)·목록(.board-page/.webzine-page) 모두
   .container(화면의 70%) 라 1440px 화면에서 998px 밖에 안 됐다.
   좌우 32px 은 정적 페이지와 동일 — 내용이 가장자리에 붙지 않게.
   ============================================================ */
.post-view,
.post-write,
.board-page,
.webzine-page {
  width: min(1300px, 92%);
  max-width: min(1300px, 92%);
  padding-left: 32px;
  padding-right: 32px;
}

/* ============================================================
   시설장비현황 — 시설 사진 5x3 갤러리
   ------------------------------------------------------------
   원본은 400x564(세로 3:4보다 더 긴 5:7). 그대로 두면 한 줄이
   너무 높아지므로 3:4 로 잘라 카드 높이를 맞춘다.
   좁아지면 5 -> 4 -> 3 -> 2 열로 접는다.
   ============================================================ */
.fac-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 8px;
}
.fac-gallery figure {
  margin: 0;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.fac-gallery figure:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #d7dee8;
}
.fac-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0;   /* .page-body img 의 라운드 해제 — 카드가 이미 잘라준다 */
  margin: 0;
}
.fac-gallery figcaption {
  padding: 11px 10px 12px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-fg);
  border-top: 1px solid var(--c-line-2);
}
@media (max-width: 1100px) { .fac-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .fac-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 560px)  { .fac-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
                             .fac-gallery figcaption { font-size: 15px; padding: 9px 8px 10px; } }

/* ============================================================
   법인소개 VISION 카드 — 우측 상단 고용노동부 우수훈련기관 배지
   ------------------------------------------------------------
   DB 본문에 이미 있는 .deco(로켓 이모지)를 그대로 재활용한다.
   글자만 0px 로 감추고 같은 자리에 배지를 배경으로 얹어,
   본문(10개 언어)을 고치지 않고 CSS 한 곳으로 끝낸다.
   위 .found-card .deco { display:none } 과 선택자 무게가 같으므로
   반드시 그 뒤(파일 끝)에 있어야 적용된다.
   ============================================================ */
.found-vision .deco {
  display: block;
  position: absolute;
  top: 30px;
  right: 34px;
  width: 104px;
  height: 104px;
  font-size: 0;                 /* 이모지 감추기 */
  background-image: url('/assets/images/school/badge-excellent.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}
@media (max-width: 860px) {
  .found-vision .deco { width: 88px; height: 88px; top: 26px; right: 26px; }
}
@media (max-width: 640px) {
  .found-vision .deco { width: 72px; height: 72px; top: 22px; right: 22px; }
}

/* ============================================================
   언어별 줄바꿈 — 한국어 규칙을 다른 언어에 그대로 쓰면 안 된다
   ------------------------------------------------------------
   한국어  : 띄어쓰기가 있어 어절 단위(keep-all)가 가장 읽기 좋다. 그대로 둔다.
   일본어·중국어 : 띄어쓰기가 없다. keep-all 이면 문장 전체가 한 덩어리가 되어
             좁은 화면에서 넘친다. 글자 사이에서 끊되(word-break: normal),
             。、」 같은 문장부호가 줄 첫머리에 오지 않도록 금칙처리(line-break: strict).
   라틴·태국어 : 통상 규칙.
   위쪽 요소 단위 규칙(h1,p,li…)이 body 상속을 이기므로 body.lang-* 로 덮어쓴다.
   ============================================================ */
body.lang-jp, body.lang-jp *,
body.lang-cn, body.lang-cn * {
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
}
body.lang-en, body.lang-en *,
body.lang-vi, body.lang-vi *,
body.lang-ru, body.lang-ru *,
body.lang-fr, body.lang-fr *,
body.lang-de, body.lang-de *,
body.lang-es, body.lang-es *,
body.lang-th, body.lang-th * {
  word-break: normal;
  overflow-wrap: break-word;
}
/* 위 * 규칙에 묻힌 긴 URL 강제 분리를 되살린다 */
.post-body a, .page-body a, .att-list a, .download-card { overflow-wrap: anywhere; }

/* 제목은 줄 길이를 고르게 나눠 한 단어만 떨어지는 것을 막는다.
   미지원 브라우저는 이 속성을 무시할 뿐 레이아웃이 깨지지 않는다. */
h1, h2, h3,
.sc-hero h1, .sc-sec-head h2, .sc-course-body h3,
.post-head h1, .board-title, .found-card h3, .crs-sec-head h2 {
  text-wrap: balance;
}
/* 단락은 마지막 줄에 낱말 하나만 남는 것을 피한다 */
p, li, .sc-hero .lead, .pg-lead { text-wrap: pretty; }

/* 러시아어·베트남어 대메뉴 — 가로형으로 보이는 구간에서만 좌우 패딩을 줄인다. */
@media (min-width: 769px) and (max-width: 900px) {
  body.lang-ru .primary-nav > .nav-item > a,
  body.lang-vi .primary-nav > .nav-item > a { padding: 12px 7px; }
}

/* 베트남어 대메뉴 — 라벨을 줄여도 좁은 데스크톱에서는 7개가 한 줄에 안 들어간다.
   폭마다 들어가는 한계가 달라 네 구간으로 나눴다. 실측한 "한 줄이 유지되는 최대 gap":

     innerWidth   17px    15px
     1500 이상     24px    28px
     1440         18px    28px
     1400         12px    24px
     1366          4px    20px
     1330            0    14px
     1290            0     8px

   1250px 이하는 어떤 조합으로도 안 들어가므로 두 줄로 접힌다(글자만 작아지면 손해다). */
@media (min-width: 1500px) {
  body.lang-vi .primary-nav { gap: 20px; }
}
@media (min-width: 1440px) and (max-width: 1499px) {
  body.lang-vi .primary-nav { gap: 18px; }
}
@media (min-width: 1366px) and (max-width: 1439px) {
  body.lang-vi .primary-nav { gap: 16px; }
}
@media (min-width: 901px) and (max-width: 1365px) {
  body.lang-vi .primary-nav { gap: 8px; }
}
/* 1366~1439 는 17px 로는 gap 이 4~12px 밖에 안 들어간다 — 한 치수 낮춰 간격을 확보한다 */
@media (min-width: 901px) and (max-width: 1439px) {
  body.lang-vi .primary-nav > .nav-item > a { font-size: 15px; }
}

/* ============================================================
   게시판 버튼·검색줄 크기 — 데스크톱/모바일 공통 44px, 글꼴 15px
   검색줄은 height 로 정확히 맞추고(인라인 요소),
   본문 버튼은 padding 으로 맞춘다(전체폭 '댓글 작성' 이 줄어들면 안 되므로 display 를 건드리지 않는다).
   .btn 계열은 line-height 1.6 → 15px*1.6=24 + 9*2 + 테두리 2 = 44px
   ============================================================ */
.search { gap: 6px; }
.search input {
  height: 44px; padding: 0 14px;
  font-size: 15px; border-radius: var(--radius-sm);
}
.search select { height: 44px; padding: 0 12px; font-size: 15px; }
.search button,
.board-tools .btn,
.board-tools .btn-primary {
  height: 44px; padding: 0 22px;
  font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}

.board-page .btn, .board-page .btn-primary, .board-page .btn-ghost, .board-page .btn-danger,
.post-view .btn, .post-view .btn-primary, .post-view .btn-ghost, .post-view .btn-danger,
.post-write .btn, .post-write .btn-primary, .post-write .btn-ghost, .post-write .btn-danger,
.webzine-page .btn, .webzine-page .btn-primary {
  padding: 9px 20px; font-size: 15px;
}

@media (min-width: 769px) {
  .search input { min-width: 280px; }
}

/* 글보기·글쓰기 브레드크럼 — 목록과 달리 히어로 배너가 없어 회색 한 줄이 헤더에 붙어
   잘 보이지 않았다. 글자를 진하게 하고 구분선으로 본문과 떼어 놓는다. */
.post-view, .post-write { padding-top: 56px; }
.post-view > .crumbs,
.post-write > .crumbs {
  margin: 0 0 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-line);
  font-size: 15px;
  color: var(--c-fg);
}
.post-view > .crumbs a,
.post-write > .crumbs a { color: var(--c-muted); }
.post-view > .crumbs a:hover,
.post-write > .crumbs a:hover { color: var(--c-primary); text-decoration: none; }
.post-view > .crumbs span,
.post-write > .crumbs span { color: var(--c-fg); font-weight: 600; }

/* 글쓰기 화면의 board-head 는 자식이 h1 하나뿐인데 목록용 justify-content:flex-end 를
   그대로 물려받아 제목이 오른쪽 끝으로 밀렸다. */
.post-write .board-head { justify-content: flex-start; }

/* 언어 전환 버튼 — KR 과 화살표가 좁은 폭에서 두 줄로 갈라졌다. 항상 한 줄로 둔다. */
.lang-btn { white-space: nowrap; }
/* ============================================================
   유관기관 롤링 배너 (푸터 위, 전 페이지 공통)
   기존 홈페이지의 무한 롤링을 자바스크립트 없이 옮긴 것.
   같은 목록 두 벌을 깔고 track 을 -50% 까지 밀면 이음매 없이 반복된다.
   두 벌의 폭이 정확히 같아야 하므로 gap/padding 을 한쪽만 바꾸면 안 된다.
   ============================================================ */
.partner-strip {
  /* 푸터가 갖고 있던 margin-top(80px) 을 배너 위로 옮긴다.
     그대로 두면 그 여백이 배너 '아래' 에 남아 푸터와 떨어져 보인다. */
  margin-top: 80px;
  border-top: 1px solid var(--c-line);
  padding: 20px 0;
  overflow: hidden;
}
.partner-track {
  display: flex;
  width: max-content;
  animation: partner-scroll 60s linear infinite;
}
/* 링크를 누르려면 멈춰야 한다 */
.partner-strip:hover .partner-track,
.partner-strip:focus-within .partner-track { animation-play-state: paused; }
.partner-row {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0 14px;
  list-style: none;
}
.partner-row li { flex: 0 0 auto; }
.partner-row a {
  display: block;
  width: 160px;
  height: 69px;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.partner-row img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 로고는 원래 색 그대로 보여준다(흑백 처리 없음) */
  transition: transform .18s ease;
}
.partner-row a:hover img,
.partner-row a:focus-visible img { transform: scale(1.04); }
.partner-row a:focus-visible { outline: 2px solid var(--c-primary-2); outline-offset: 2px; }
.partner-strip + .site-footer { margin-top: 0; }

@keyframes partner-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* 움직임을 줄이도록 설정한 사용자에게는 흐르지 않게 하고 직접 넘기게 한다 */
@media (prefers-reduced-motion: reduce) {
  .partner-track { animation: none; }
  .partner-strip { overflow-x: auto; }
}

/* ============================================================
   게시판 답글 — 기존 상담게시판처럼 부모 글 아래에 들여쓰기로 붙인다.
   순서는 boards/list.php 의 스레드 정렬이 만든다(여기서는 표시만).
   ============================================================ */
.board-table .reply-row .subj { padding-left: 26px; position: relative; }
.board-table .reply-mark {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--c-muted); opacity: .75;
}
.board-table .reply-mark svg { width: 100%; height: 100%; display: block; }
/* 답글은 원글보다 한 톤 옅게 — 목록에서 위계가 보이게 */
.board-table .reply-row .subj > a { color: var(--c-muted); }
.board-table .reply-row .subj > a:hover { color: var(--c-primary); }