/* ===== layout: 모든 화면 공통 뼈대 (헤더·푸터·배경·유틸) ===== */

/* ===== 접근성 / 공통 ===== */
#skip-link a {position: fixed;top: -10rem;left: 2rem;z-index: 999;padding: 1.2rem 2rem;background: var(--color-ink);color: #fff;border-radius: 1rem;}
#skip-link a:focus {top: 2rem;}
.inner {width: 100%;max-width: var(--container-width);padding-inline: var(--page-gutter);margin-inline: auto;}
section[id] {scroll-margin-top: var(--header-h);}

/* ===== 스크롤 진행 막대 / 맨 위로 ===== */
.scroll-bar {position: fixed;top: 0;left: 0;width: 100%;height: .5rem;z-index: 200;}
.scroll-bar span {display: block;width: 0;height: 100%;background: var(--color-primary);}
.to-top {position: fixed;right: 3rem;bottom: 3rem;z-index: 90;width: 5.6rem;height: 5.6rem;border-radius: 50%;background: var(--color-ink);color: #fff;display: flex;align-items: center;justify-content: center;opacity: 0;visibility: hidden;transform: translateY(2rem);transition: opacity .3s, transform .3s, visibility .3s, background .3s;}
.to-top svg {width: 2.4rem;height: 2.4rem;fill: none;stroke: currentColor;stroke-width: 2.4;stroke-linecap: round;stroke-linejoin: round;}
.to-top:hover {background: var(--color-primary);}
.to-top.is-show {opacity: 1;visibility: visible;transform: none;}

/* ===== 등장 효과 / 제목 단어 마스크 ===== */
.reveal {opacity: 0;transform: translateY(4rem);transition: opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.is-in {opacity: 1;transform: none;}
.w {display: inline-block;overflow: hidden;vertical-align: top;padding-bottom: .14em;margin-bottom: -.14em;}
.wi {display: inline-block;transform: translateY(115%);transition: transform .9s var(--ease);transition-delay: calc(var(--i, 0) * 70ms + 150ms);}
.is-split .wi, .swiper-slide-active .wi {transform: none;}

/* ===== 전체 배경: 오로라 + 격자 ===== */
.bg-fx {position: fixed;inset: 0;z-index: -1;overflow: hidden;pointer-events: none;background: radial-gradient(rgba(18, 19, 26, .06) .1rem, transparent .1rem) 0 0 / 3.2rem 3.2rem;}
.bg-fx span {position: absolute;border-radius: 50%;filter: blur(10rem);opacity: .42;will-change: transform;}
.bg-fx span:nth-child(1) {top: -15%;left: -8%;width: 60rem;height: 60rem;background: var(--aurora-1);animation: aurora1 26s ease-in-out infinite alternate;}
.bg-fx span:nth-child(2) {top: 30%;right: -12%;width: 54rem;height: 54rem;background: var(--aurora-2);animation: aurora2 30s ease-in-out infinite alternate;}
.bg-fx span:nth-child(3) {bottom: -20%;left: 25%;width: 52rem;height: 52rem;background: var(--aurora-3);animation: aurora3 34s ease-in-out infinite alternate;}
@keyframes aurora1 {to {transform: translate(18vw, 22vh) scale(1.25);}}
@keyframes aurora2 {to {transform: translate(-22vw, -14vh) scale(.85);}}
@keyframes aurora3 {to {transform: translate(-16vw, -24vh) scale(1.2);}}
@keyframes drift {to {translate: 0 -3rem;}}
@keyframes float {0%, 100% {transform: translateY(0);} 50% {transform: translateY(-1.2rem);}}

/* ===== 캔버스(네트워크 점) ===== */
[data-fx] {position: relative;}
[data-fx] > .inner {position: relative;z-index: 1;}
.fx-canvas {position: absolute;inset: 0;width: 100%;height: 100%;pointer-events: none;z-index: 0;}

/* ===== 헤더 ===== */
.header {position: fixed;top: 0;left: 0;width: 100%;height: var(--header-h);z-index: 100;background: rgba(251, 250, 246, .85);backdrop-filter: blur(1.4rem);border-bottom: .1rem solid transparent;transition: border-color .3s, box-shadow .3s;}
.header.is-scrolled {border-color: var(--color-line);box-shadow: 0 .8rem 2.4rem rgba(18, 19, 26, .05);}
.header-inner {display: flex;align-items: center;justify-content: space-between;gap: 3rem;height: 100%;max-width: var(--container-width);padding-inline: var(--page-gutter);margin-inline: auto;}
.logo {display: inline-flex;align-items: center;}
.logo-img {display: block;width: auto;height: 3.6rem;}
.header-cta {min-height: 4.8rem;padding: 0 2.4rem;font-size: 1.8rem;}
.menu-btn {display: none;position: relative;width: 4.8rem;height: 4.8rem;border-radius: 50%;border: .2rem solid var(--color-ink);}
.menu-btn span {position: absolute;left: 1.2rem;width: 2rem;height: .2rem;background: var(--color-ink);transition: transform .3s, opacity .3s, top .3s;}
.menu-btn span:nth-child(1) {top: 1.5rem;}
.menu-btn span:nth-child(2) {top: 2.2rem;}
.menu-btn span:nth-child(3) {top: 2.9rem;}
.menu-btn[aria-expanded="true"] span:nth-child(1) {top: 2.2rem;transform: rotate(45deg);}
.menu-btn[aria-expanded="true"] span:nth-child(2) {opacity: 0;}
.menu-btn[aria-expanded="true"] span:nth-child(3) {top: 2.2rem;transform: rotate(-45deg);}

/* ===== 주 메뉴 (그누보드 메뉴: ul_1 li_1 a_1 / sub_div ul_2 li_2 a_2) ===== */
.gnb {height: 100%;}
.gnb .ul_1 {display: flex;gap: 4.4rem;height: 100%;}
.gnb .li_1 {position: relative;display: flex;align-items: center;}
.gnb .a_1 {position: relative;display: block;padding: 1rem 0;font-size: 1.9rem;font-weight: 600;}
.gnb .a_1::after {content: "";position: absolute;left: 0;bottom: .2rem;width: 0;height: .3rem;border-radius: .3rem;background: var(--color-primary);transition: width .3s var(--ease);}
.gnb .li_1:hover > .a_1::after, .gnb .li_1:focus-within > .a_1::after, .gnb .a_1.on::after {width: 100%;}
.gnb .a_1.on {color: var(--color-primary);}
.gnb .sub_div {position: absolute;left: 50%;top: 100%;min-width: 22rem;padding: 1.2rem 0;border-radius: 1.6rem;background: var(--color-white);border: .1rem solid var(--color-line);box-shadow: var(--shadow);opacity: 0;visibility: hidden;transform: translate(-50%, 1rem);transition: opacity .3s, transform .3s var(--ease), visibility .3s;}
.gnb .li_1:hover > .sub_div, .gnb .li_1:focus-within > .sub_div {opacity: 1;visibility: visible;transform: translate(-50%, 0);}
.gnb .a_2 {display: block;padding: 1.1rem 2.4rem;font-size: 1.7rem;font-weight: 600;white-space: nowrap;transition: background .3s, color .3s;}
.gnb .a_2:hover, .gnb .a_2:focus-visible, .gnb .a_2.on {background: var(--color-soft);color: var(--color-primary);}
.gnb_empty {font-size: 1.6rem;color: var(--color-muted);}

/* ===== 푸터 ===== */
.footer {padding: 7rem 0 4rem;background: var(--color-ink);color: rgba(255, 255, 255, .7);font-size: 1.6rem;}
.footer-inner {display: flex;align-items: flex-start;justify-content: space-between;gap: 4rem;}
.footer address {display: flex;flex-wrap: wrap;gap: .6rem 2.4rem;margin-top: 2.4rem;max-width: 90rem;}
.footer-links {display: flex;flex-wrap: wrap;gap: 2.4rem;}
.footer-links a:hover {color: #fff;text-decoration: underline;}
.footer-util {display: flex;gap: 2rem;margin-top: 1.6rem;font-size: 1.4rem;}
.footer-util a:hover {color: #fff;text-decoration: underline;}
.copy {max-width: var(--container-width);padding-inline: var(--page-gutter);margin: 5rem auto 0;font-size: 1.4rem;opacity: .6;}

/* ===== 컬러 시안 전환 (비교용, 확정 후 SITE_THEME_SWITCH 를 false 로) ===== */
.theme-switch {position: fixed;right: 10rem;bottom: 3.2rem;z-index: 150;display: flex;padding: .4rem;border-radius: 10rem;background: var(--color-ink);box-shadow: var(--shadow);}
.theme-switch button {padding: .8rem 1.6rem;border-radius: 10rem;color: #fff;font-size: 1.2rem;font-weight: 800;letter-spacing: .08rem;transition: background .3s, color .3s;}
.theme-switch button[aria-pressed="true"] {background: var(--color-accent);color: var(--color-ink);}

/* ===== 반응형 1280 ===== */
@media (max-width: 1280px) {
  :root {--page-gutter: 4rem;}
  .gnb .ul_1 {gap: 2.8rem;}
}

/* ===== 반응형 1024 ===== */
@media (max-width: 1024px) {
  .menu-btn {display: block;}
  .header-cta {display: none;}
  .gnb {position: fixed;top: var(--header-h);left: 0;width: 100%;height: auto;max-height: calc(100vh - var(--header-h));overflow-y: auto;padding: 2rem var(--page-gutter) 4rem;background: var(--color-bg);border-bottom: .1rem solid var(--color-line);transform: translateY(-120%);visibility: hidden;transition: transform .4s var(--ease), visibility .4s;}
  .gnb.is-open {transform: none;visibility: visible;}
  .gnb .ul_1 {flex-direction: column;gap: 0;height: auto;}
  .gnb .li_1 {display: block;}
  .gnb .a_1 {padding: 1.8rem 0;font-size: 2.2rem;border-bottom: .1rem solid var(--color-line);}
  .gnb .a_1::after {display: none;}
  .gnb .sub_div {position: static;min-width: 0;padding: .6rem 0 1.2rem 1.6rem;border: 0;border-radius: 0;background: none;box-shadow: none;opacity: 1;visibility: visible;transform: none;}
  .gnb .a_2 {padding: 1rem 0;font-size: 1.8rem;font-weight: 500;color: var(--color-muted);white-space: normal;}
  .gnb .a_2:hover, .gnb .a_2.on {background: none;}
}

/* ===== 반응형 768 ===== */
@media (max-width: 768px) {
  :root {--page-gutter: 2rem;--header-h: 6.4rem;}
  .logo-img {height: 3rem;}
  .footer-inner {flex-direction: column;}
  .to-top {right: 1.6rem;bottom: 1.6rem;}
  .bg-fx span {filter: blur(6rem);}
}

/* ===== 움직임 줄이기 ===== */
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto;}
  .reveal {opacity: 1;transform: none;transition: none;}
  .bg-fx span {animation: none !important;}
  .wi {transform: none !important;opacity: 1 !important;transition: none !important;}
}

/* ===== 카카오 채팅 버튼 (우측 하단 고정, tail.php / site_info.php 의 SITE_KAKAO_URL) =====
   마우스를 올리면 글자가 펼쳐진다. 맨 위로 버튼은 이 버튼 위로 올라간다. */
.kakao-chat {position: fixed;right: 3rem;bottom: 3rem;z-index: 91;display: inline-flex;align-items: center;height: 5.6rem;padding: 0 1.6rem;border-radius: 10rem;background: #fee500;color: #191600;box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, .22);transition: transform .3s var(--ease), box-shadow .3s;}
.kakao-chat svg {flex: none;width: 2.8rem;height: 2.8rem;fill: currentColor;}
.kakao-chat-text {max-width: 0;overflow: hidden;white-space: nowrap;font-size: 1.7rem;font-weight: 800;transition: max-width .4s var(--ease), margin .4s var(--ease);}
.kakao-chat:hover, .kakao-chat:focus-visible {transform: translateY(-.4rem);box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .28);}
.kakao-chat:hover .kakao-chat-text, .kakao-chat:focus-visible .kakao-chat-text {max-width: 14rem;margin-left: 1rem;}
.kakao-chat::before {content: "";position: absolute;inset: 0;border-radius: inherit;border: .2rem solid #fee500;animation: kakao-ping 2.6s ease-out infinite;pointer-events: none;}
.kakao-chat + .to-top {bottom: 10.6rem;}
@keyframes kakao-ping {0% {opacity: .9;transform: scale(1);} 70%, 100% {opacity: 0;transform: scale(1.35);}}
@media (max-width: 768px) {
  .kakao-chat {right: 1.6rem;bottom: 1.6rem;}
  .kakao-chat + .to-top {bottom: 9rem;}
}
@media (prefers-reduced-motion: reduce) {
  .kakao-chat::before {animation: none;opacity: 0;}
  .kakao-chat, .kakao-chat-text {transition: none;}
}