/* 행복한학교 홈페이지 공통 (PC 시안 1920 기준: 본문 폭 1320, 글자 #3e3a39, 강조 #0e90b1, 버튼 #094a6b) — 2026-11-07 1단계 */
:root {
  --c-text: #3e3a39;
  --c-sub: #666666;
  --c-gray: #808080;
  --c-line: #dddddd;
  --c-line2: #eeeeee;
  --c-point: #0e90b1;
  --c-navy: #094a6b;
  --c-dark: #444444;
  --c-red: #ef5252;
  --c-foot: #333333;
  --w: 1320px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: var(--c-text); font-size: 16px; line-height: 1.5; background: #fff; word-break: keep-all; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; vertical-align: top; }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { width: var(--w); max-width: calc(100% - 40px); margin: 0 auto; }
.sr, .skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip:focus { clip: auto; width: auto; height: auto; z-index: 999; background: #000; color: #fff; padding: 8px 12px; }
.center { text-align: center; }

/* ---------- 머리 ---------- */
.hd { position: relative; z-index: 50; background: #fff; border-bottom: 1px solid var(--c-line2); }
.hd-util { height: 30px; font-size: 14px; font-weight: 500; }
.hd-util .wrap { display: flex; justify-content: flex-end; align-items: center; height: 100%; gap: 0; }
.hd-util .bar { margin: 0 12px; color: #bbb; }
.hd-util a:hover { color: var(--c-point); }
.hd-main .wrap { display: flex; align-items: center; height: 70px; }
.hd-logo img { width: 177px; height: auto; }
.gnb { display: flex; margin-left: auto; margin-right: 60px; }
.gnb-item { position: static; }
.gnb-top { display: block; padding: 0 30px; line-height: 70px; font-size: 20px; font-weight: 600; }
.gnb-item.on .gnb-top, .gnb-item:hover .gnb-top { color: var(--c-point); font-weight: 700; }
/* 하위 메뉴: 시안처럼 머리 아래 화면 폭 띠(높이 135) + 둥근 버튼(200x50, #f7f7f7) */
.gnb-sub { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--c-line2); box-shadow: 0 10px 20px rgba(0,0,0,.04); }
.gnb-sub .wrap { display: flex; flex-wrap: wrap; gap: 24px; padding: 44px 0 41px; }
.gnb-item:hover .gnb-sub, .gnb-item:focus-within .gnb-sub { display: block; }
.gnb-sub a { display: flex; align-items: center; justify-content: center; width: 200px; height: 50px; border-radius: 10px; background: #f7f7f7; font-size: 18px; font-weight: 600; white-space: nowrap; }
.gnb-sub a:hover, .gnb-sub a.on { background: var(--c-point); color: #fff; }
.hd-btns { display: flex; gap: 10px; }
.hd-search, .hd-menu { width: 40px; height: 40px; border: 0; padding: 0; cursor: pointer; background: var(--c-point) center / 40px no-repeat; border-radius: 50%; }
.hd-search { background-image: url(/assets/img/icon_header_search.png); }
.hd-menu { background-image: url(/assets/img/icon_header_menu.png); }

/* 전체메뉴 */
.sitemap { position: fixed; inset: 0; z-index: 100; background: rgba(9,74,107,.97); color: #fff; overflow-y: auto; }
.sitemap[hidden] { display: none; }
.sitemap-in { width: var(--w); max-width: calc(100% - 40px); margin: 0 auto; padding: 30px 0 60px; }
.sm-head { display: flex; justify-content: space-between; align-items: center; }
.sm-head .hd-logo img { width: 200px; }
.sm-close { width: 50px; height: 50px; border: 0; background: url(/assets/img/btn_sitemap_close_wt.png) center / 50px no-repeat; cursor: pointer; }
.sm-util { display: none; gap: 16px; margin-top: 20px; font-size: 14px; }
.sm-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px; margin-top: 60px; }
.sm-tog { display: block; width: 100%; padding: 0 0 14px; margin: 0 0 14px; border: 0; border-bottom: 1px solid rgba(255,255,255,.3); background: none; color: #fff; text-align: left; font: inherit; font-size: 22px; font-weight: 700; cursor: default; }
@media (min-width: 1025px) { .sm-sub[hidden] { display: block; } }
/* 21·39번: 덮는 창 안의 초점 표시 */
.sitemap :focus-visible, .hd-sch :focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
/* 39번: 머리 검색창 (이 화면 위에) */
.hd-sch { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.55); }
.hd-sch[hidden] { display: none; }
.hd-sch-in { position: relative; background: #fff; padding: 40px 20px; }
.hd-sch form { position: relative; width: 700px; max-width: calc(100% - 60px); margin: 0 auto; }
.hd-sch input { width: 100%; height: 60px; padding: 0 64px 0 20px; border: 2px solid var(--c-point); border-radius: 10px; font-size: 18px; }
.hd-sch-go { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: var(--c-point) url(/assets/img/btn_searchbar.png) center / 40px no-repeat; cursor: pointer; }
.hd-sch-close { position: absolute; right: 16px; top: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #333 url(/assets/img/btn_sitemap_close_wt.png) center / 36px no-repeat; cursor: pointer; }
.sm-col a { display: block; padding: 6px 0; font-size: 16px; color: rgba(255,255,255,.8); }
.sm-col a:hover { color: #fff; }

/* ---------- 서브 위치·제목 ---------- */
.loc { border-bottom: 1px solid var(--c-line2); }
.loc .wrap { display: flex; align-items: center; height: 56px; }
.loc-home { width: 33px; height: 56px; background: url(/assets/img/icon_submenu_home.png) left center / 18px 16px no-repeat; }
.loc-dd { position: relative; width: 179px; }
.loc-dd summary { list-style: none; cursor: pointer; padding: 0 34px 0 16px; line-height: 56px; font-weight: 500; border-left: 1px solid var(--c-line2); background: url(/assets/img/icon_submenu_down_arrow.png) right 16px center / 10px 6px no-repeat; }
.loc-dd summary::-webkit-details-marker { display: none; }
.loc-list { position: absolute; left: 0; top: 56px; width: 179px; padding: 14px 0; background: #fff; border: 1px solid var(--c-line2); border-radius: 10px; z-index: 30; }
.loc-list a { display: block; padding: 6px 18px; color: var(--c-sub); font-weight: 500; }
.loc-list a.on { color: var(--c-point); font-weight: 700; }
.page-title { margin: 100px 0 70px; text-align: center; font-size: 32px; font-weight: 700; }

/* ---------- 버튼 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 62px; padding: 0 30px; border: 1px solid transparent; border-radius: 8px; font-size: 24px; font-weight: 400; cursor: pointer; background: #fff; }
.btn-primary { background: var(--c-navy); color: #fff; }
.btn-line { border-color: var(--c-navy); color: var(--c-text); }
.btn-gray { background: #6b6b6b; color: #fff; }   /* 23번: #ddd 바탕+흰 글자 1.36:1 → 5.3:1 */
.btn-dark { background: var(--c-dark); color: #fff; height: 60px; font-size: 18px; font-weight: 500; flex: 0 0 140px; padding: 0; }
.btn-block { display: flex; width: 100%; }
.btns { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }
.btns.two .btn { flex: 1; }

/* ---------- 안내 상자 ---------- */
.msg-box { padding: 40px 0 140px; text-align: center; }
.msg-box .big { font-size: 24px; font-weight: 600; }
.msg-box .btns { max-width: 572px; margin-left: auto; margin-right: auto; }

/* ---------- 바닥 ---------- */
.ft { position: relative; margin-top: 120px; background: var(--c-foot); color: #fff; padding: 12px 0 25px; }
@media (min-width: 1025px) { .ft::before { content: ''; position: absolute; left: 0; right: 0; top: 70px; border-top: 1px solid #ddd; } }
.ft-top { display: flex; justify-content: space-between; align-items: center; }
.ft-links { font-size: 18px; font-weight: 300; }
.ft-links span { margin: 0 18px; }
.ft-family select { width: 252px; height: 46px; padding: 0 40px 0 10px; border: 1px solid #fff; border-radius: 5px; background: transparent url(/assets/img/icon_down_arrow.png) right 12px center / 14px no-repeat; color: #fff; font-size: 16px; appearance: none; }
.ft-family option { color: #333; }
.ft-info { position: relative; margin-top: 42px; font-size: 16px; font-weight: 300; line-height: 1.75; }
.ft-info p { margin: 0; }
.ft-info i { display: inline-block; width: 14px; font-style: normal; text-align: center; }
.ft-sns { position: absolute; right: 0; top: 0; display: flex; gap: 8px; }
.ft-sns a { display: block; width: 42px; height: 42px; background: center / 42px no-repeat; }
.sns-insta { background-image: url(/assets/img/footer_icon_instagram.png); }
.sns-yt { background-image: url(/assets/img/footer_icon_youtube.png); }
.ft-copy { margin: 24px 0 0; font-size: 14px; font-weight: 300; color: #bbb; }
.to-top { position: fixed; right: 20px; bottom: 30px; width: 60px; height: 60px; border-radius: 50%; background: url(/assets/img/aside_btn_top.png) center / 60px no-repeat; z-index: 40; }

/* ---------- 쪽번호 ---------- */
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 50px 0 0; }
.pager a { min-width: 34px; height: 34px; line-height: 34px; text-align: center; color: var(--c-gray); font-size: 16px; }
.pager a.on { color: var(--c-point); font-weight: 700; }
.pg-arrow { background: center / 9px 15px no-repeat; }
.pg-arrow.prev { background-image: url(/assets/img/icon_page_prev.png); }
.pg-arrow.next { background-image: url(/assets/img/icon_page_next.png); }

/* ---------- 태블릿·모바일 ---------- */
@media (max-width: 1360px) {
  .gnb-top { padding: 0 18px; }
  .gnb { margin-right: 30px; }
}
@media (max-width: 1024px) {
  .hd-util { display: none; }
  .gnb { display: none; }
  .hd-main .wrap { height: 64px; justify-content: space-between; }
  .hd-logo img { width: 135px; }
  .hd-search, .hd-menu { width: 36px; height: 36px; background-size: 36px; }
  .sm-util { display: flex; flex-wrap: wrap; }
  /* 37번: 모바일 전체메뉴는 한 열, 대분류를 눌러 펼침 (+/−) */
  .sm-grid { grid-template-columns: 1fr; gap: 0; margin-top: 24px; border-top: 1px solid rgba(255,255,255,.3); }
  .sm-tog { position: relative; margin: 0; padding: 16px 40px 16px 4px; font-size: 19px; cursor: pointer; }
  .sm-tog::after { content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 300; }
  .sm-col.open .sm-tog::after { content: '\2212'; }
  .sm-sub { padding: 6px 4px 14px 16px; border-bottom: 1px solid rgba(255,255,255,.3); }
  .hd-sch-in { padding: 24px 12px 30px; }
  .hd-sch-close { right: 8px; top: 8px; }
  .hd-sch form { margin-top: 24px; }
  .loc { display: none; }
  .page-title { margin: 44px 0 30px; font-size: 24px; }
  .btn { height: 52px; font-size: 18px; }
  .btn-dark { height: 48px; font-size: 15px; flex-basis: 96px; }
  .ft { margin-top: 70px; padding: 26px 0; }
  .ft-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ft-links { font-size: 14px; }
  .ft-links span { margin: 0 10px; }
  .ft-family select { width: 100%; }
  .ft-info { margin-top: 30px; font-size: 13px; }
  .ft-sns { position: static; margin-top: 14px; }
  .ft-copy { font-size: 12px; }
  .to-top { width: 46px; height: 46px; background-size: 46px; right: 14px; bottom: 18px; }
}
@media (max-width: 640px) {
  .sm-grid { grid-template-columns: 1fr; }
}