@charset "utf-8";

/* ==========================================================================
   1. 폰트 및 기본 설정 (Fonts & Base Setup)
   ========================================================================== */
/* 폰트 불러오기 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&display=swap");
             
/* Tailwind 레이어 설정 */
@layer base {
  html {
    font-family: "Noto Sans KR", sans-serif;
  }
  body {
    @apply text-gray-800;
  }
}

/* 기본 바디 스타일 */
body {
  font-family: "Noto Sans KR", sans-serif !important;
  color: #333;
  background-color: #ffffff;
}

/* 기본 main 스타일 */
main {
    padding-top: 3.5625rem;
}

@media (min-width: 768px) {
    main {
        padding-top: 5.7rem;  /* 4.5 */
    }
}

/* 접근성 포커스 디자인 */
*:focus {
  outline: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible { 
  outline: 2px solid #1a73e8 !important; 
  outline-offset: 2px !important;         
  box-shadow: 0 0 0 2px #ffffff !important; 
  border-radius: 2px !important;
  transition: outline-offset 0.1s ease-in-out;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important; 
  border-color: #d1d5db; 
}

/* 공통 색상 유틸리티 */
.main-blue { background-color: #1a73e8; }
.main-text-blue { color: #1a73e8; }
.bg-highlight { background-color: #eff6ff; }

/* ==========================================================================
   2. 레이아웃 및 헤더 (Layout & Header)
   ========================================================================== */
#main-header .header-inner {
  padding: 0.5rem 1rem;
}

.mega-menu-container {
  display: block; overflow: hidden; max-height: 0; transition: max-height 0.4s ease-out, opacity 0.4s ease-out, padding-top 0.4s ease-out, padding-bottom 0.4s ease-out;
  opacity: 0; position: absolute; left: 0; top: 100%; width: 100%; background-color: white; border-top: 1px solid #ddd;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); z-index: 40; padding: 0 0; box-sizing: border-box;
}

.nav-link { transition: color 0.2s; position: relative; padding: 0.5rem 0; margin-right: 0; font-family: "Noto Sans KR", sans-serif; }
.nav-link.active, .nav-link:hover { color: #1a73e8; }

.sub-menu-link { padding: 0.25rem 0; display: block; color: #555; transition: color 0.2s; font-size: 1rem; font-family: "Noto Sans KR", sans-serif; }
.sub-menu-link:hover { color: #1a73e8; }

.sticky-breadcrumb { position: sticky; z-index: 20; top: 5rem; }

@media (min-width: 768px) {
  .md-nav-container { max-width: 90rem; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; }
  #main-header .header-inner { padding: 1rem 2rem; }
  .mega-menu-grid-new { display: flex; padding-left: 300px; }
  .header-nav-list > div, .mega-menu-grid-new > div { flex: none; min-width: 140px; }
  .sticky-breadcrumb { top: 4.5rem; }
}

/* ==========================================================================
   3. 메인 히어로 슬라이더
   ========================================================================== */
.slider-container { position: relative; width: 100%; height: 100%; }
.slide-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; background-size: cover; background-position: center; z-index: 10; }
.slide-item.active { opacity: 1; z-index: 20; }
.slide-item::before { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.2); z-index: 1; }
.slide-item > div { z-index: 2; }

.movie-slide { opacity: 0; transition: opacity 3s ease-in-out, transform 9s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 0; }
.movie-slide.active { opacity: 1; z-index: 1; }
.movie-slide.effect-zoom-in { transform: scale(1); }
.movie-slide.effect-zoom-in.active { transform: scale(1.15); }
.movie-slide.effect-zoom-out { transform: scale(1.15); }
.movie-slide.effect-zoom-out.active { transform: scale(1); }
.movie-slide.effect-pan-left { transform: scale(1.1) translateX(5%); }
.movie-slide.effect-pan-left.active { transform: scale(1.1) translateX(-5%); }
.movie-slide.effect-pan-right { transform: scale(1.1) translateX(-5%); }
.movie-slide.effect-pan-right.active { transform: scale(1.1) translateX(5%); }
.movie-slide.effect-pan-up { transform: scale(1.1) translateY(5%); }
.movie-slide.effect-pan-up.active { transform: scale(1.1) translateY(-5%); }

/* ==========================================================================
   4~13. (기타 스타일)
   ========================================================================== */
.custom-table { border-collapse: collapse; width: 100%; }
.custom-table th { background-color: #f3f4f6; color: #1f2937; font-weight: 700; border: 1px solid #e5e7eb; padding: 0.75rem; word-break: keep-all; text-align: center; vertical-align: middle; font-size: 0.95rem; }
.custom-table td { padding: 0.75rem; border: 1px solid #e5e7eb; text-align: center; vertical-align: middle; color: #4b5563; font-size: 0.95rem; }
.custom-table td.text-left { text-align: left; }
.info-table th { background-color: #f9fafb; color: #374151; font-weight: 700; padding: 0.75rem; border-bottom: 2px solid #e5e7eb; text-align: center; white-space: nowrap; }
.info-table td { padding: 1rem 0.75rem; border-bottom: 1px solid #e5e7eb; text-align: center; color: #4b5563; }
.attachment-item { display: flex; align-items: center; padding: 0.75rem 1rem; border-radius: 0.375rem; background-color: #f7f7f7; margin-top: 0.5rem; border: 1px solid #e5e7eb; }
.attachment-item a { color: #1a73e8; font-weight: 500; transition: color 0.2s; }
.attachment-item a:hover { color: #0c63e4; text-decoration: underline; }
.attachment-item i { color: #6c757d; margin-right: 0.5rem; }
.ql-container { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; font-family: inherit; font-size: 1rem; height: 400px; background-color: #fff; }
.ql-toolbar { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; background-color: #f8f9fa; border-bottom: 1px solid #e5e7eb; }
#captcha-canvas { border: 1px solid #e2e8f0; border-radius: 0.375rem; cursor: pointer; background-color: #f3f4f6; }
.faq-answer { transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; }
@media (max-width: 768px) {
  .responsive-table thead { display: none; }
  .responsive-table tr { display: block; border: 1px solid #e5e7eb; border-radius: 0.5rem; margin-bottom: 1rem; background-color: #ffffff; padding: 1rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
  .responsive-table td { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #f3f4f6; text-align: right; }
  .responsive-table td:last-child { border-bottom: none; }
  .responsive-table td::before { content: attr(data-label); font-weight: 700; color: #374151; text-align: left; margin-right: 1rem; flex-shrink: 0; }
  .mobile-card-table thead { display: none; }
  .mobile-card-table tbody tr { display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-radius: 0.5rem; margin-bottom: 0.75rem; padding: 0.75rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
  .mobile-card-table tbody tr:first-child { margin-top: 1rem; }
  .mobile-card-table td { display: block; width: 100% !important; text-align: left !important; border: none !important; padding: 0 !important; }
  .mobile-card-table td:nth-child(1) { font-size: 0.75rem; color: #9ca3af; margin-bottom: 0.25rem; }
  .mobile-card-table td:nth-child(2) { font-size: 1.1rem; font-weight: 700; color: #111827; margin-bottom: 0.25rem; line-height: 1.4; }
  .mobile-card-table td:nth-child(3) { font-size: 0.875rem; color: #6b7280; margin-top: 0; }
  .mobile-hidden { display: none !important; }
}
.step-circle-active { background-color: #1a73e8 !important; color: #ffffff !important; border-color: #ffffff !important; }
.step-text-active { color: #1a73e8 !important; font-weight: 700; }
.step-circle-active.step-dark { background-color: #111827 !important; color: #ffffff !important; border-color: #ffffff !important; }
.step-text-active.step-dark { color: #111827 !important; }
.radio-card-input:checked + .radio-card-label { border-color: #1a73e8; background-color: #eff6ff; color: #1a73e8; box-shadow: 0 4px 6px -1px rgba(26, 115, 232, 0.2); }
.radio-card-input:checked + .radio-card-label i { color: #1a73e8; }
.custom-checkbox:checked { background-color: #111827; border-color: #111827; background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); }
.terms-box::-webkit-scrollbar { width: 8px; }
.terms-box::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }
.terms-box::-webkit-scrollbar-track { background-color: #f1f5f9; }
.success-checkmark { width: 80px; height: 80px; border-radius: 50%; display: block; stroke-width: 2; stroke: #fff; stroke-miterlimit: 10; margin: 0 auto 20px; box-shadow: inset 0px 0px 0px #1a73e8; animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both; }
.success-checkmark-circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #1a73e8; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.success-checkmark-check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }
@keyframes stroke { 100% { stroke-dashoffset: 0; } }
@keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
@keyframes fill { 100% { box-shadow: inset 0px 0px 0px 50px #1a73e8; } }
.gallery-img-wrap { overflow: hidden; }
.gallery-img-wrap img { transition: transform 0.5s ease; }
.gallery-card-trigger:hover .gallery-img-wrap img { transform: scale(1.05); }
#lightbox-prev-button, #lightbox-next-button { transition: background-color 0.2s, opacity 0.2s; border-radius: 9999px; width: 3rem; height: 3rem; position: absolute; top: 50%; transform: translateY(-50%); z-index: 40; }
#lightbox-prev-button { left: 0.5rem; }
#lightbox-next-button { right: 0.5rem; }
@media (min-width: 768px) { #lightbox-prev-button { left: 2rem; width: 4rem; height: 4rem; } #lightbox-next-button { right: 2rem; width: 4rem; height: 4rem; } }
#lightbox-prev-button:hover, #lightbox-next-button:hover { background-color: rgba(255, 255, 255, 0.1); }
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-enter-active { transition: opacity 0.3s ease-out, transform 0.3s ease-out; }
.fade-enter-start { opacity: 0; transform: translateY(10px); }
.animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blob { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } 100% { transform: translate(0px, 0px) scale(1); } }
.animate-blob { animation: blob 7s infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
.loader { border: 3px solid #f3f3f3; border-top: 3px solid #1a73e8; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
@media print { @page { margin: 10mm; size: auto; } html, body { width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: #fff !important; } body * { visibility: hidden; } #printable-area, #printable-area * { visibility: visible !important; } #printable-area { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; background-color: white !important; z-index: 9999 !important; } #printable-area > div { padding: 0 !important; margin: 0 !important; } #printable-area img { max-width: 100% !important; width: 100% !important; height: auto !important; display: block !important; margin: 0 !important; break-inside: auto !important; page-break-inside: auto !important; } #printable-area p, #printable-area div, #printable-area table { break-inside: auto !important; page-break-inside: auto !important; } .print-hidden { display: none !important; } #printable-area h2 { margin-top: 0 !important; padding-top: 0 !important; } }
#view-content img, .prose img, .board-view img, .board-content img { max-width: 100% !important; height: auto !important; object-fit: contain; margin-top: 1rem; margin-bottom: 1rem; }
.flex-grow.min-w-0 { min-width: 0; }
#prev-post a, #next-post a { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0.3rem 0; color: #4b5563; transition: color 0.2s; font-size: 0.95rem; text-decoration: none; }
@media (min-width: 768px) { #prev-post a, #next-post a { padding: 0.6rem 0; font-size: 1rem; } }
#prev-post a:hover, #next-post a:hover { color: #000; text-decoration: underline; }
.sticky-sub-nav { position: sticky; top: 3.5rem; z-index: 30; }
@media (min-width: 768px) { .sticky-sub-nav { top: 5.6rem; } }
.responsive-bg-01 { background-image: url("/public/images/family_photo_transparent.png"); }
@media (max-width: 767px) { .responsive-bg-01 { background-image: url("/public/images/slider_01_mobile.png"); } }
#main-notice-list a:focus-visible { outline-offset: -2px !important; }
.custom-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem !important; }

/* ==========================================================================
   14. 메인 슬라이더 텍스트 애니메이션 (Main Slider Content Animations)
   - 슬라이드 활성화(active) 시 텍스트가 순차적으로 등장 (유지됨)
   ========================================================================== */

/* 1. 기본 상태: 숨김 */
.hero-animate-tag {
    opacity: 0;
    transform: translateY(-20px); 
}
.hero-animate-title,
.hero-animate-desc,
.hero-animate-btn {
    opacity: 0;
    transform: translateY(30px); 
}

/* 2. 활성화 상태 애니메이션 실행 */
.slide-item.active .hero-animate-tag {
    animation: heroSlideDown 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.2s;
}

.slide-item.active .hero-animate-title {
    animation: heroSlideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.4s;
}

.slide-item.active .hero-animate-desc {
    animation: heroSlideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.6s;
}

.slide-item.active .hero-animate-btn {
    animation: heroFadeInUp 1s ease-out forwards;
    animation-delay: 0.9s;
}

/* 3. 키프레임 */
@keyframes heroSlideDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroSlideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   16. 헤더 모바일 스크롤 고정 최적화 (Mobile Header Fix - No Animation)
   - 모바일 스크롤 시 헤더 밀림/떨림 현상 방지를 위해 애니메이션 완전 제거
   ========================================================================== */
#main-header {
    /* 위치 고정 최우선 강제 */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    
    /* [핵심] 모든 애니메이션 및 변형 효과 제거 */
    transition: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    
    /* 하드웨어 가속 관련 속성도 제거 */
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    
    /* z-index 최상위 유지 */
    z-index: 1000 !important;
}


/* ==========================================================================
   17. 메인 슬라이더 분할 레이아웃 (Main Slider Split Layouts)
   - 장애인, 고령층, 다문화가족 부문 전용 스타일
   ========================================================================== */

/* 1) 장애인 부문 (Disabled) - Deep Green Theme */
.split-slide-disabled {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0% center; 
  background-image: 
    linear-gradient(105deg, transparent 42%, rgba(20, 83, 45, 1.9) 72%),
    url('/public/images/bg_disabillty_01.png');
}

@media (max-width: 768px) {
  .split-slide-disabled {
    background-position: center;
    /* 모바일: 전체 틴트 처리 */
    background-image: 
      linear-gradient(to bottom, rgba(20, 83, 45, 0.5), rgba(20, 83, 45, 0.9)),
      url('/public/images/bg_disabillty_01.png');
  }
}

/* 2) 고령층 부문 (Silver) - Deep Orange Theme */
.split-slide-silver {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-image: 
    linear-gradient(105deg, rgba(124, 45, 18, 1.0) 20%, transparent 80%),
    url('/public/images/bi_silver_01.jpg');
}

@media (max-width: 768px) {
  .split-slide-silver {
    background-position: 0 75%;
    background-image: 
      linear-gradient(to bottom, rgba(124, 45, 18, 0.5), rgba(124, 45, 18, 0.9)),
      url('/public/images/bi_silver_01.jpg');
  }
}

/* 3) 다문화가족 부문 (Multicultural) - Deep Navy Theme */
.split-slide-multicultural {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0% center;
  background-image: 
    linear-gradient(105deg, transparent 40%, rgba(15, 23, 42, 1.00) 72%),
    url('/public/images/bg_moonhea_01.png');
}

@media (max-width: 768px) {
  .split-slide-multicultural {
    background-position: center;
    background-image: 
      linear-gradient(to bottom, rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.9)),
      url('/public/images/bg_moonhea_01.png');
  }
}


/* ==========================================================
   Scroll Animation (Sub Pages)
   ========================================================== */

/* 기본 상태 */
.scroll-animate,
.scroll-animate-left,
.scroll-animate-right {
  opacity: 0;
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
  will-change: opacity, transform;
}

/* 방향별 초기 위치 */
.scroll-animate {
  transform: translateY(30px);
}

.scroll-animate-left {
  transform: translateX(-40px);
}

.scroll-animate-right {
  transform: translateX(40px);
}

/* 화면 진입 시 */
.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ==========================================================
   Sub Page Backgrounds & Shapes (Top-Color Gradient Ver.)
   ========================================================== */

/* 1. 공통 설정 */
.sub-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.sub-shapes span {
  position: absolute;
  display: block;
  border-radius: 50%;
}

/* 2. 기본값 (Default) */
.sub-bg-default {
  /* 회색에서 시작 -> 흰색으로 끝남 */
  background: linear-gradient(180deg, #f3f4f6 0%, #ffffff 100%);
}

/* =========================
   3. 대회안내 (Guide) - 블루 계열
   ========================= */
.sub-bg-guide {
  /* 하늘색에서 시작 -> 흰색으로 자연스럽게 사라짐 */
  background: linear-gradient(180deg, #e0f2fe 0%, #ffffff 100%);
}
.sub-bg-guide .sub-shapes span { background: #0ea5e9; }
.sub-bg-guide .sub-shapes span:nth-child(1) { width: 300px; height: 300px; top: -100px; left: -50px; opacity: 0.03; }
.sub-bg-guide .sub-shapes span:nth-child(2) { width: 150px; height: 150px; top: 20%; right: 5%; opacity: 0.05; }
.sub-bg-guide .sub-shapes span:nth-child(3) { width: 80px; height: 80px; bottom: 20px; left: 40%; opacity: 0.06; }

/* =========================
   4. 경진대회 (Contest) - 인디고 계열
   ========================= */
.sub-bg-contest {
  /* 연한 남색에서 시작 -> 흰색으로 끝남 */
  background: linear-gradient(180deg, #e0e7ff 0%, #ffffff 100%);
}
.sub-bg-contest .sub-shapes span { background: #6366f1; }
.sub-bg-contest .sub-shapes span:nth-child(1) { width: 320px; height: 320px; top: -120px; right: -140px; opacity: 0.04; }
.sub-bg-contest .sub-shapes span:nth-child(2) { width: 140px; height: 140px; top: 40px; left: 10%; opacity: 0.04; }

/* =========================
   5. 참가신청 (Apply) - 민트/그린 계열
   ========================= */
.sub-bg-apply {
  /* 아주 연한 민트색에서 시작 -> 흰색으로 끝남 */
  background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%);
}
.sub-bg-apply .sub-shapes span { background: #10b981; }
.sub-bg-apply .sub-shapes span:nth-child(1) { width: 200px; height: 200px; bottom: -80px; left: -60px; opacity: 0.04; }
.sub-bg-apply .sub-shapes span:nth-child(2) { width: 90px; height: 90px; top: 20px; right: 15%; opacity: 0.06; }

/* =========================
   6. 질의응답 (FAQ) - 라벤더/퍼플 계열
   ========================= */
.sub-bg-faq {
  /* 연한 보라색에서 시작 -> 흰색으로 끝남 */
  background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 100%);
}
.sub-bg-faq .sub-shapes span { background: #a855f7; }
.sub-bg-faq .sub-shapes span:nth-child(1) { width: 180px; height: 180px; top: -60px; left: 20%; opacity: 0.04; }
.sub-bg-faq .sub-shapes span:nth-child(2) { width: 60px; height: 60px; bottom: 30px; right: 18%; opacity: 0.05; }

/* =========================
   7. 자료실 (Archive) - 그레이 계열
   ========================= */
.sub-bg-archive {
  /* 연한 회색에서 시작 -> 흰색으로 끝남 */
  background: linear-gradient(180deg, #f1f5f9 0%, #ffffff 100%);
}
.sub-bg-archive .sub-shapes span { background: #64748b; }
.sub-bg-archive .sub-shapes span:nth-child(1) { width: 260px; height: 260px; bottom: -120px; right: -100px; opacity: 0.05; }


/* ==========================================================
   main page rolling animation
   ========================================================== */

  /* 둥둥 떠다니는 효과 */
  @keyframes float-slow {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
  }
  /* 아주 천천히 회전하는 효과 */
  @keyframes spin-slow-custom {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
  }
  /* 크기가 커졌다 작아졌다 하는 효과 (숨쉬기) */
  @keyframes pulse-slow {
      0%, 100% { transform: scale(1); opacity: 0.1; }
      50% { transform: scale(1.1); opacity: 0.3; }
  }

  .animate-float { animation: float-slow 6s ease-in-out infinite; }
  .animate-float-delay { animation: float-slow 7s ease-in-out infinite 1s; }
  .animate-spin-slow { animation: spin-slow-custom 20s linear infinite; }
  .animate-pulse-slow { animation: pulse-slow 8s ease-in-out infinite; }

/* =========================================================
   모바일 화면(가로 768px 이하) 알림마당 리스트 3개 제한
   ========================================================= */
@media (max-width: 768px) {
    /* 알림마당 리스트의 4번째(n+4) li 항목부터는 화면에서 숨김 처리 */
    #main-notice-list li:nth-child(n+4) {
        display: none !important;
    }
}  


/* ==========================================================================
   메인 페이지 5개 퀵버튼 부드러운 호버 애니메이션 (color-btn-transition)
   ========================================================================== */

.color-btn-transition {
    /* 딱딱하게 끊기는 느낌을 없애고, 자연스러운 가감속 곡선(cubic-bezier)을 적용합니다. */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.4s ease !important;
    will-change: transform;
}

/* 마우스를 올렸을 때 조금 더 부드럽고 확실하게 떠오르는 느낌을 줍니다. */
.color-btn-transition:hover {
    transform: translateY(-6px) !important; 
}

/* 내부의 사각형 아이콘 박스와 텍스트 색상 변경 속도도 부드럽게 동기화합니다. */
.color-btn-transition > div,
.color-btn-transition i,
.color-btn-transition span {
    transition: all 0.4s ease-in-out !important;
}

/* ==========================================================
   모달 오픈 시 배경 스크롤 방지용 전용 클래스 (body에만 적용할 것)
   ========================================================== */
.modal-open-lock {
    overflow: hidden !important;
    touch-action: none !important; 
}

/* ==========================================================
   모바일 스크롤 렌더링 최적화 (모든 터치 기기 공통 적용)
   ========================================================== */
@media (hover: none) and (pointer: coarse) {
    .overflow-hidden {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        isolation: isolate;
    }
}