/* 2026 공통 머리글·전체 메뉴·바닥글 (Figma 181:870 디자인 시안3)
   main.css / style.css 뒤에 불러와 기존 header·footer 규칙을 덮는다. */

@font-face { font-family: 'Paperlogy'; font-weight: 500; font-style: normal; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 600; font-style: normal; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 700; font-style: normal; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2'); }

:root {
  --ot-primary: #2cb59b;
  --ot-primary-dark: #1f8f7a;
  --ot-brand: #389194;
  --ot-text: #1e1e1e;
  --ot-text-sub: #595959;
  --ot-muted: #b5b5b5;
  --ot-line: #e8e8e8;
  --ot-footer: #31343d;
  --ot-accent: #f3c82e;
  --ot-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --ot-font-display: "Paperlogy", "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif;
  /* 그림자 단계: 청록 기운이 도는 부드러운 겹그림자 */
  --ot-shadow-xs: 0 1px 2px rgba(16, 48, 42, .05);
  --ot-shadow-sm: 0 1px 2px rgba(16, 48, 42, .06), 0 4px 12px rgba(16, 48, 42, .06);
  --ot-shadow-md: 0 2px 4px rgba(16, 48, 42, .04), 0 8px 24px rgba(16, 48, 42, .09);
  --ot-shadow-lg: 0 4px 8px rgba(16, 48, 42, .05), 0 18px 44px rgba(16, 48, 42, .14);
  --ot-ease: cubic-bezier(.22, 1, .36, 1);
  --ot-ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- 머리글 ---------- */
header.gnb, header.gnb * { font-family: var(--ot-font); }
header.gnb { position: sticky; top: 0; z-index: 30; background: #fff; transition: background .3s ease, box-shadow .3s ease; }
header.gnb.gnb-sub { border-bottom: 1px solid var(--ot-line); }
header.gnb.is-scrolled { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: var(--ot-shadow-sm); border-bottom-color: transparent; }
header.gnb .gnb-menu a { position: relative; }
header.gnb .gnb-menu a::after { content: ""; position: absolute; left: 22px; bottom: 28px; width: 18px; height: 3px; border-radius: 2px; background: var(--ot-primary); transform: scaleX(0); transform-origin: left center; transition: transform .3s var(--ot-ease); }
header.gnb .gnb-menu a:hover::after, header.gnb .gnb-menu a:focus-visible::after, header.gnb .gnb-menu a.is-current::after { transform: scaleX(1); }
header.gnb .gnb-bar { max-width: 1488px; height: 100px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
header.gnb .gnb-logo { display: flex; align-items: flex-end; gap: 9px; height: 51px; }
header.gnb .gnb-logo img { display: block; width: 186px; height: 51px; object-fit: cover; }
header.gnb .gnb-logo .tagline { font-family: "Noto Sans KR", sans-serif; font-weight: 500; font-size: 19.6px; letter-spacing: -0.59px; line-height: 28px; color: var(--ot-brand); white-space: nowrap; }
header.gnb .gnb-menu { display: grid; grid-auto-flow: column; grid-auto-columns: 196px; height: 100%; }
header.gnb .gnb-menu a { display: flex; align-items: center; justify-content: flex-start; height: 100%; padding-left: 22px; font-family: var(--ot-font-display); font-weight: 500; font-size: 20px; line-height: 40px; color: #000; white-space: nowrap; }
header.gnb .gnb-menu a:hover, header.gnb .gnb-menu a:focus-visible { color: var(--ot-primary); }

/* 전체 메뉴 (기존 jquery.js가 header mouseover / .mobile-menu 클릭으로 열고 닫는다) */
/* 전체 메뉴: layout.js가 header에 is-menu-open을 붙였다 뗀다. 열고 닫을 때 투명도·위치·항목 순차 등장 전환 */
header.gnb .wrapper-inter { display: block !important; position: absolute; left: 0; top: 100px; width: 100%; background: #fff; border-top: 1px solid var(--ot-line); box-shadow: var(--ot-shadow-lg); z-index: 30; visibility: hidden; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .28s var(--ot-ease), transform .38s var(--ot-ease), visibility 0s linear .38s; }
header.gnb.is-menu-open .wrapper-inter { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
header.gnb .wrapper-inter .menu-group .text { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .4s var(--ot-ease); }
header.gnb.is-menu-open .wrapper-inter .menu-group .text { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 35ms + 60ms); }
.gnb-dim { position: fixed; inset: 0; z-index: 25; background: rgba(17, 26, 24, .28); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.gnb-dim.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
header.gnb .wrapper-inter .wrapper-menu { display: block; }
header.gnb .wrapper-inter .wrapper-menu .mobile-top { display: none; }
header.gnb .wrapper-inter .wrapper-menu .menu-wrap { max-width: 1488px; margin: 0 auto; padding: 28px 24px 32px; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: 196px; align-items: start; }
header.gnb .wrapper-inter .menu-group { padding: 0 10px; border-left: 1px solid #edf1f0; text-align: left; }
header.gnb .wrapper-inter .menu-group .title { display: none; }
header.gnb .wrapper-inter .menu-group .text { padding: 0; }
header.gnb .wrapper-inter .menu-group .text + .text { margin-top: 2px; }
header.gnb .wrapper-inter .menu-group .text a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 10px; font-size: 15.5px; font-weight: 500; line-height: 1.35; color: #2b2f2e; word-break: keep-all; transition: background .2s ease, color .2s ease; }
header.gnb .wrapper-inter .menu-group .text a::after { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; opacity: 0; transform: translateX(-4px) rotate(45deg); transition: opacity .2s ease, transform .25s var(--ot-ease); }
header.gnb .wrapper-inter .menu-group .text a:hover, header.gnb .wrapper-inter .menu-group .text a:focus-visible { background: #eef8f5; color: var(--ot-primary-dark); }
header.gnb .wrapper-inter .menu-group .text a:hover::after, header.gnb .wrapper-inter .menu-group .text a:focus-visible::after { opacity: 1; transform: translateX(0) rotate(45deg); }
/* 신청 종류: 상태 표시 + 이름을 한 덩어리 카드로 */
header.gnb .wrapper-inter .menu-group .text.svc + .text.svc { margin-top: 8px; }
header.gnb .wrapper-inter .menu-group .text.svc a { display: block; padding: 10px 12px; border: 1px solid #e6efec; border-radius: 12px; background: #f7fbfa; transition: border-color .2s ease, background .2s ease, box-shadow .25s ease; }
header.gnb .wrapper-inter .menu-group .text.svc a::after { display: none; }
header.gnb .wrapper-inter .menu-group .text.svc a:hover, header.gnb .wrapper-inter .menu-group .text.svc a:focus-visible { border-color: #bfe6dc; background: #fff; box-shadow: var(--ot-shadow-sm); }
.svc-state { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; background: #eef1f3; color: #6b7378; font-size: 11.5px; font-weight: 700; }
.svc-state.state-open { background: #d9f3ea; color: #12795f; }
.svc-state.state-upcoming { background: #e6f0fb; color: #2c4a7a; }
.svc-name { display: -webkit-box; margin-top: 5px; font-size: 14.5px; font-weight: 600; line-height: 1.38; color: #2b2f2e; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 전체 메뉴 왼쪽 꿈돌이 안내 카드 */
.gnb-feature { position: relative; align-self: stretch; max-width: 360px; min-height: 210px; margin-right: 32px; padding: 26px 28px; border-radius: 20px; background: linear-gradient(135deg, #f1faf7 0%, #dcf2ea 100%); overflow: hidden; opacity: 0; transform: translateY(8px); transition: opacity .35s ease .05s, transform .45s var(--ot-ease) .05s; }
header.gnb.is-menu-open .gnb-feature { opacity: 1; transform: none; }
.gf-eyebrow { font-size: 13px; font-weight: 700; color: var(--ot-primary-dark); }
.gf-title { margin-top: 8px; font-size: 17px; font-weight: 600; line-height: 1.45; color: #3a4441; }
.gf-title strong { display: block; margin-top: 2px; font-size: 28px; font-weight: 800; letter-spacing: -.6px; color: #111a18; }
.gf-cta { position: relative; z-index: 3; display: inline-flex; align-items: center; height: 38px; margin-top: 18px; padding: 0 16px; border-radius: 19px; background: #111a18; color: #fff !important; font-size: 14px; font-weight: 700; box-shadow: var(--ot-shadow-sm); }
.gf-cta::after { content: "→"; margin-left: 8px; transition: transform .3s var(--ot-ease); }
.gf-cta:hover::after { transform: translateX(3px); }
.gf-mascot { position: absolute !important; right: 6px; bottom: -14px; width: 124px; }
header.gnb .wrapper-inter .menu-group .text.is-empty { padding: 9px 12px; color: #8c8c8c; font-size: 14px; line-height: 1.45; }
header.gnb .mobile-menu { display: none; }

@media screen and (max-width: 1360px) {
  header.gnb .gnb-menu, header.gnb .wrapper-inter .wrapper-menu .menu-wrap { grid-auto-columns: 172px; }
  .gnb-feature { max-width: 300px; margin-right: 20px; }
}

@media screen and (max-width: 1200px) {
  header.gnb .gnb-menu, header.gnb .wrapper-inter .wrapper-menu .menu-wrap { grid-auto-columns: 148px; }
  .gnb-feature { display: none; }
  header.gnb .gnb-menu a { font-size: 18px; }
  header.gnb .gnb-logo .tagline { display: none; }
}

@media screen and (max-width: 960px) {
  header.gnb .gnb-bar { height: 60px; padding: 0 0 0 16px; }
  header.gnb .gnb-logo { height: 30px; }
  header.gnb .gnb-logo img { width: 110px; height: 30px; }
  header.gnb .gnb-menu { display: none; }
  header.gnb .mobile-menu { display: block !important; width: 60px; height: 60px; background: url("../_images/common/mobile-menu@2x.png") no-repeat center/24px; }
  header.gnb .wrapper-inter { position: fixed; top: 0; left: auto; right: 0; width: min(88vw, 420px); height: 100vh; border-top: 0; box-shadow: var(--ot-shadow-lg); z-index: 40; transform: translateX(100%); opacity: 1; transition: transform .42s var(--ot-ease), visibility 0s linear .42s; }
  header.gnb.is-menu-open .wrapper-inter { transform: none; }
  header.gnb .wrapper-inter .menu-group .text, header.gnb .wrapper-inter .menu-group .title { opacity: 1; transform: none; }
  header.gnb .wrapper-inter .wrapper-menu .mobile-top { display: flex; justify-content: space-between; border-bottom: 1px solid var(--ot-line); }
  header.gnb .wrapper-inter .wrapper-menu .mobile-top p { font-size: 20px; font-weight: 700; padding-left: 16px; line-height: 60px; }
  header.gnb .wrapper-inter .wrapper-menu .mobile-top .menu-close { width: 60px; height: 60px; background: url("../_images/common/icon-s-cross@2x.png") no-repeat center/18px; }
  header.gnb .wrapper-inter .wrapper-menu .menu-wrap { display: block; height: calc(100vh - 60px); overflow: auto; padding: 0 16px 60px; }
  header.gnb .wrapper-inter .menu-group { padding: 0; border-left: 0; text-align: left; }
  .gnb-feature { display: none; }
  header.gnb .wrapper-inter .menu-group .text + .text { margin-top: 0; }
  header.gnb .wrapper-inter .menu-group .text a { padding: 13px 4px; border-radius: 0; }
  header.gnb .wrapper-inter .menu-group .text.svc { border-bottom: 0; padding: 8px 0 0; }
  header.gnb .wrapper-inter .menu-group .text.svc a { padding: 10px 12px; border-radius: 12px; }
  header.gnb .wrapper-inter .menu-group .title { display: block; margin-top: 28px; padding-bottom: 10px; border-bottom: 1px solid var(--ot-line); font-size: 17px; font-weight: 700; line-height: 30px; color: #000; }
  header.gnb .wrapper-inter .menu-group .text { border-bottom: 1px solid #f0f0f0; font-size: 16px; }
}

/* ---------- 페이지 틀: 내용이 짧으면 바닥글을 화면 맨 아래에, 길면 내용 바로 아래에 둔다 ---------- */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; overflow-x: clip; }
body > * { flex-shrink: 0; }
body > footer.site-footer { margin-top: auto; }

/* ---------- 바닥글 ---------- */
footer.site-footer, footer.site-footer * { font-family: var(--ot-font); }
footer.site-footer { width: 100%; background: var(--ot-footer); border-top: 2px solid #fff; padding: 32px 0; }
footer.site-footer .footer-inner { max-width: 1548px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
footer.site-footer .footer-org { display: flex; align-items: center; gap: 22px; padding: 28px 0 30px; min-width: 0; }
footer.site-footer .footer-logo { position: relative; flex: 0 0 80px; width: 80px; height: 80px; overflow: hidden; }
footer.site-footer .footer-logo img { position: absolute; top: 6.25%; right: 1.09%; bottom: 5.4%; left: 2%; width: auto; height: auto; max-width: none; }
footer.site-footer .footer-info { display: flex; flex-direction: column; gap: 8px; font-size: 16px; font-weight: 500; line-height: normal; }
footer.site-footer .footer-info .addr { color: #fff; margin: 0; padding: 0; border: 0; font-size: inherit; line-height: inherit; text-align: left; }
footer.site-footer .footer-info .copyright { color: #767676; font-size: inherit; line-height: inherit; text-align: left; }
footer.site-footer .footer-call { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; text-align: right; line-height: 1.55; white-space: nowrap; }
footer.site-footer .footer-call .label { font-size: 16px; font-weight: 500; color: var(--ot-accent); }
footer.site-footer .footer-call .tel { font-size: 32px; font-weight: 700; color: var(--ot-accent); }
footer.site-footer .footer-call .hours { font-size: 16px; font-weight: 500; color: #fff; }

@media screen and (max-width: 960px) {
  footer.site-footer { padding: 24px 0 28px; }
  footer.site-footer .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 0 16px; }
  footer.site-footer .footer-org { padding: 0; gap: 14px; align-items: flex-start; }
  footer.site-footer .footer-logo { flex-basis: 48px; width: 48px; height: 48px; }
  footer.site-footer .footer-info { font-size: 13px; gap: 6px; }
  footer.site-footer .footer-info .copyright { font-size: 11px; }
  footer.site-footer .footer-call { align-items: flex-start; text-align: left; gap: 2px; }
  footer.site-footer .footer-call .label, footer.site-footer .footer-call .hours { font-size: 13px; }
  footer.site-footer .footer-call .tel { font-size: 24px; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 꿈돌이 눈: 그림의 눈을 지우고 그 자리에 얹는다. mascot.js가 i를 마우스 방향으로 옮기고 깜빡이게 한다. */
.eye { position: absolute; z-index: 2; transform: translate(-50%, -50%); pointer-events: none; }
.eye i { position: relative; display: block; width: 100%; height: 100%; border-radius: 999px; background: radial-gradient(circle at 50% 30%, #3a3633 0%, #242424 55%, #1b1918 100%); transform: var(--eye-t, none); transition: transform .14s linear; will-change: transform; transform-origin: 50% 60%; }
.eye i::after { content: ""; position: absolute; left: 50%; top: 14%; width: 34%; aspect-ratio: 1; margin-left: -6%; border-radius: 50%; background: #fff; }
.eye.has-lash::before { content: ""; position: absolute; right: -55%; top: -6%; width: 80%; height: 28%; border-top: 2px solid #2a2524; border-radius: 50% 50% 0 0; transform: rotate(28deg); }
.eye.has-lash:nth-of-type(odd)::before { right: auto; left: -55%; transform: rotate(-28deg); }
.eye.is-blink i { animation: ot-blink .18s ease-in-out; }
@keyframes ot-blink { 0%, 100% { transform: var(--eye-t, translate(0, 0)) scaleY(1); } 50% { transform: var(--eye-t, translate(0, 0)) scaleY(.1); } }

/* 페이지 이동 전환 (문서 간 화면 전환을 지원하는 브라우저만). 머리글은 그대로, 본문만 바뀐다. */
@view-transition { navigation: auto; }
header.gnb { view-transition-name: ot-header; }
::view-transition-old(root) { animation: ot-page-out .18s ease both; }
::view-transition-new(root) { animation: ot-page-in .42s var(--ot-ease) both; }
::view-transition-group(ot-header) { animation-duration: .2s; }
@keyframes ot-page-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes ot-page-in { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  @view-transition { navigation: none; }
}