@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-gov.min.css");
	 :root {
          --color-primary: #1F3A5F;      /* 딥 블루 / 네이비 */
          --color-sub: #7FA99B;          /* 세이지 그린 */
          --color-accent: #D6B77A;       /* 라이트 골드 */
          --color-bg: #F5F7FA;           /* 오프화이트 / 연한 회색 */
          --color-text: #2D3748;         /* 본문 기본 텍스트 */
      }
      body { 
         font-family: 'NS', "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
          background-color: var(--color-bg);
          color: var(--color-text);
          font-size: 1.05rem; 
          line-height: 1.6;
      }
      .font-serif-custom {
          font-family: 'Noto Serif KR', serif;
      }
      /* 공통 컨테이너 폭 통일 */
      .container {
          max-width: 1280px;
          margin-left: auto;
          margin-right: auto;
          padding-left: 1rem;
          padding-right: 1rem;
      }

    .container {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 20px;
    }

   
    /* Hero Section */
    .hero-container {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 20px;
      margin-top: 24px;
    }
    .main-banner {
      background: linear-gradient(135deg, #004080 0%, #0066cc 100%);
      border-radius: 16px;
      padding: 40px;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: var(--shadow);
    }
    .banner-tag {
      background: rgba(255, 255, 255, 0.15);
      padding: 4px 12px;
      border-radius: 20px;
      font-weight: 500;
      font-size: 0.9rem;
      display: inline-block;
      margin-bottom: 16px;
    }
    .main-banner h1 {
      font-size: 2.2rem;
      font-weight: 700;
      line-height: 1.3;
      margin-bottom: 12px;
    }
    .main-banner p {
      font-size: 1.05rem;
      color: #e2e8f0;
      margin-bottom: 24px;
      font-weight: 400;
    }
    .banner-info-box {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(8px);
      padding: 16px 20px;
      border-radius: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      font-size: 0.95rem;
    }
	.cta-card-base {
            position: relative;
            overflow: hidden; /* 카드를 벗어나는 원형 라인 숨기기 */
        }
	/* SVG 동심원 라인이 카드 배경으로 은은하게 들어가도록 설정 */
	.ripple-bg {
		position: absolute;
		pointer-events: none;
		stroke: rgba(255, 255, 255, 0.15); /* 은은한 흰색 선 */
		stroke-width: 1.5;
		fill: none;
	}

    /* Side Panel */
    .side-panel { display: flex; flex-direction: column; gap: 16px; }
    .login-card {
      background: #fff;
      border-radius: 16px;
      padding: 24px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
    }
    .login-card h3 { font-size: 1.15rem; color: var(--primary); margin-bottom: 4px; font-weight: 600; }
    .login-card p { font-size: 0.9rem; color: var(--text-sub); margin-bottom: 16px; }
    .btn-login {
      display: block;
      width: 100%;
      text-align: center;
      padding: 12px;
      background: var(--primary);
      color: #fff;
      font-weight: 600;
      font-size: 1rem;
      border-radius: 8px;
      margin-bottom: 12px;
      transition: background 0.2s;
    }
    .btn-login:hover { background: var(--primary-light); }
    .login-links { font-size: 0.85rem; color: var(--text-sub); display: flex; justify-content: center; gap: 12px; }

    .quick-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .cta-card {
      background: #fff;
      border-radius: 12px;
      padding: 16px;
      border: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-weight: 600;
      font-size: 1rem;
      color: var(--primary);
      min-height: 100px;
      transition: all 0.2s;
    }
    .cta-card:hover { border-color: var(--primary-light); transform: translateY(-2px); }
    .cta-card i { align-self: flex-end; font-size: 1.4rem; color: var(--primary-light); }

    /* Quick Icon Navigation Menu (반응형 8/4/2 열) */
    .quick-menu-section {
      background: #fff;
      border-radius: 16px;
      padding: 24px;
      margin: 24px 0;
      box-shadow: var(--shadow);
      border: 1px solid var(--border);
    }
    .quick-menu-grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 12px;
      text-align: center;
    }
    .quick-menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 10px 4px;
      border-radius: 10px;
      transition: background 0.2s;
    }
    .quick-menu-item:hover { background: var(--bg-main); }
    .quick-icon {
      width: 52px;
      height: 52px;
      border-radius: 12px;
      background: #f0f6ff;
      color: var(--primary-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
    }
    .quick-menu-item span { font-size: 0.9rem; font-weight: 500; color: var(--text-dark); }

    /* Content Grid Sections */
    .content-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 24px;
    }
    .card {
      background: #fff;
      border-radius: 16px;
      padding: 24px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
    }
    .card-title-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 10px;
    }
    .card-title { font-size: 1.15rem; font-weight: 600; color: var(--primary); }
    .btn-more { font-size: 0.85rem; color: var(--text-sub); }

    .notice-list li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px dashed var(--border);
    }
    .notice-list li:last-child { border-bottom: none; }
    .notice-list li a { font-family: 'NS', "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;font-size: 1.05rem; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80%; }
    .notice-list li .date { font-size: 1.05rem; color: var(--text-muted); }

    /* Key Statistics Section */
    .stats-section {
      background: linear-gradient(90deg, #003366, #004080);
      border-radius: 16px;
      padding: 32px 20px;
      color: #fff;
      margin-bottom: 24px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      text-align: center;
    }
    .stat-item h2 { font-size: 2rem; font-weight: 700; color: #93c5fd; margin-bottom: 2px; }
    .stat-item p { font-size: 0.95rem; opacity: 0.85; font-weight: 400; }

    /* 3 Columns Section */
    .content-grid-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;
      margin-bottom: 32px;
    }
    .search-card {
      background: #f0f6ff;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 12px;
    }
    .search-card:last-child { margin-bottom: 0; }
    .search-card h4 { font-size: 1rem; font-weight: 600; color: var(--primary); margin-bottom: 10px; }
    .search-input-wrap { position: relative; }
    .search-input-wrap input {
      width: 100%;
      padding: 10px 14px;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      font-size: 0.9rem;
      outline: none;
    }
    .search-input-wrap i {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--primary-light);
    }

    /* Banner Strip */
    .banner-strip {
      background: var(--accent);
      color: #fff;
      border-radius: 12px;
      padding: 18px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 500;
      font-size: 1.05rem;
      margin-bottom: 40px;
    }

   
    /* =========================================
       반응형 미디어 쿼리 (Responsive Styles)
    ========================================= */
    /* 태블릿 스크린 (1024px 이하) */
    @media (max-width: 1024px) {
      .hero-container { grid-template-columns: 1fr; }
      .quick-menu-grid { grid-template-columns: repeat(4, 1fr); }
      .content-grid-3 { grid-template-columns: 1fr; }
      .stats-section { grid-template-columns: repeat(2, 1fr); }
    }

    

    /* 초소형 모바일 (480px 이하) */
    @media (max-width: 480px) {
      .quick-menu-grid { grid-template-columns: repeat(2, 1fr); }
      .stats-section { grid-template-columns: 1fr; gap: 20px; }
    }