:root{
      --bg:#f6f7f9;
      --panel:#ffffff;
      --text:#111827;
      --muted:#6b7280;
      --line:rgba(17,24,39,.10);

      --brand:#1C4AB0;     /* 깔끔한 교육 기업 블루 */
      --brandSoft:#eef2ff; /* hover bg */
      --shadow: 0 14px 40px rgba(17,24,39,.10);
      --shadowSoft: 0 10px 18px rgba(17,24,39,.08);

      --r:18px;
      --r2:22px;
      --max: 1360px;
    }

    *{ box-sizing:border-box; }
    html,body{ margin:0; padding:0; }
    body{
      font-family: 'Paperozi', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
      font-size:16px;              /* ✅ 기본 16 */
      font-weight:400;             /* ✅ 두꺼운 기본 금지 */
      line-height:1.6;
      color:var(--text);
      background: var(--bg);
    }
    a{ color:inherit; text-decoration:none; }
    button{ font-family:inherit; }

    .wrap{
      min-height:100vh;
      background: var(--bg);
    }

    /* =========================================================
      ✅ Topbar (neis.ai.kr 느낌의 드롭다운 메뉴 구조)
      - PC: hover로 2단 메뉴
      - 모바일: 클릭 토글
      - 메뉴 underline 애니메이션
    ========================================================= */
    .topbar{
      position: sticky;
      top:0;
      z-index:9999;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
      
    }
    .topbar-inner{
      max-width: var(--max);
      margin:0 auto;
      padding: 12px 5px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap: 12px;
      min-width:0;
      flex: 0 0 auto;
    }
    .logo{
      width:42px; height:42px;
      border-radius: 14px;
      background: var(--brand);
      display:grid;
      place-items:center;
      box-shadow: 0 12px 26px rgba(37,99,235,.20);
      flex:0 0 auto;
    }
    .logo svg{ width:20px; height:20px; }
    .brandText{ min-width:0; }
    .brandTitle{
      font-size: 15px;
      font-weight:600;
      letter-spacing:-0.02em;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .brandSub{
      margin-top:2px;
      font-size:12px;
      color: var(--muted);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }

    .navArea{
      display:flex;
      align-items:center;
      gap: 10px;
      min-width:0;
      flex: 1 1 auto;
      justify-content:center;
    }

    .nav{
      display:flex;
      align-items:center;
      gap: 8px;
      list-style:none;
      padding:0;
      margin:0;
    }

    .navItem{
  position: relative;
  padding-bottom: 12px; /* 드롭다운까지 hover가 이어지도록 바닥 여유 */
    }
    
/* navLink 아래 ~ dropdown 사이의 빈 공간을 투명 영역으로 메워줌 */
.navItem::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height: 14px;           /* dropdown과의 간격만큼 */
  background: transparent; /* 투명 */
}
    

    .navLink{
      display:flex;
      align-items:center;
      gap: 8px;
      padding: 6px 8px;
      border-radius: 14px;
      font-weight:500;
      font-size:17px;
      color:#1f2937;
      border: 1px solid transparent;
      transition: background .18s ease, border-color .18s ease;
      white-space:nowrap;
      position: relative;
    }

    /* ✅ underline 애니메이션 */
    .navLink::after{
      content:"";
      position:absolute;
      left: 12px;
      right: 12px;
      bottom: 7px;
      height: 2px;
      border-radius: 99px;
      
      

    }
    .navItem:hover > .navLink{
      background: var(--brandSoft);
      border-color: rgba(37,99,235,.18);
    }
    .navItem:hover > .navLink::after{
      transform: scaleX(1);
    }

    /* ✅ active */
    .navLink.active{
      background: var(--brandSoft);
      border-color: rgba(37,99,235,.22);
      color:#0b2c7a;
      font-weight:600;
    }
    .navLink.active::after{
      transform: scaleX(1);
    }

    .caret{
      font-size: 16px;
      opacity:.7;
      transform: translateY(-1px);
    }

    /* ✅ dropdown panel */
    .dropdown{
      position:absolute;
      top: calc(100% - 4px);
      left: 0;
      min-width: 210px;
      background: #fff;
      border:1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadowSoft);
      padding: 8px;
      display:none;
      z-index: 99999; 
    }

    .dropdown a{
      display:flex;
      padding: 10px 10px;
      border-radius: 12px;
      font-size: 14px;
      color:#1f2937;
      font-weight:400;
      transition: background .16s ease;
    }
    .dropdown a:hover{
      background: #f3f4f6;
    }

    /* PC hover open */
    @media (min-width: 981px){
      .navItem:hover .dropdown{
        display:block;
        animation: dd .16s ease both;
      }
      @keyframes dd{
        from{ opacity:0; transform: translateY(-6px); }
        to{ opacity:1; transform: translateY(0); }
      }
    }

    /* Right buttons */
    .rightBox{
      display:flex;
      align-items:center;
      gap: 10px;
      flex: 0 0 auto;
    }
    .btn{
      border:1px solid var(--line);
      background:#fff;
      padding: 10px 14px;
      border-radius: 14px;
      font-weight:500;
      font-size:14px;
      cursor:pointer;
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
      box-shadow: 0 8px 14px rgba(17,24,39,.06);
      display:inline-flex;
      align-items:center;
      gap: 8px;
    }
    .btn:hover{
      transform: translateY(-1px);
      box-shadow: 0 12px 20px rgba(17,24,39,.08);
      border-color: rgba(37,99,235,.18);
    }
    .btnPrimary{
      background: var(--brand);
      border-color: rgba(37,99,235,.45);
      color:#fff;
      box-shadow: 0 14px 22px rgba(37,99,235,.20);
    }
    .btnPrimary:hover{
      box-shadow: 0 18px 26px rgba(37,99,235,.22);
    }

    /* Mobile menu */
    .mToggle{
      display:none;
      border:1px solid var(--line);
      background:#fff;
      border-radius: 14px;
      padding: 10px 12px;
      cursor:pointer;
      font-weight:500;
      font-size:14px;
      box-shadow: 0 8px 14px rgba(17,24,39,.06);
    }

    /* =========================================================
      ✅ Layout / Content
    ========================================================= */
    .container{
      max-width: var(--max);
      margin: 0 auto;
      padding: 26px 18px 60px;
    }

    /* “기업형” 메인 히어로 (과한 색 X) */
    .hero{
      background: #fff;
      border:1px solid var(--line);
      border-radius: var(--r2);
      box-shadow: var(--shadow);
      padding: 26px;
    }
    .heroGrid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 18px;
      align-items:center;
    }
    .h1{
      margin:0;
      font-size: 32px;
      font-weight:500;   /* ✅ 너무 두껍지 않게 */
      letter-spacing:-0.03em;
      line-height:1.18;
    }
    .h1 b{
      font-weight:700;   /* 강조는 700까지만 */
      color: var(--brand);
    }
    .lead{
      margin: 12px 0 0 0;
      color: var(--muted);
      font-size: 15px;
      max-width: 72ch;
    }

    .kpis{
      margin-top: 16px;
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
    }
    .chip{
      background: #fff;
      border:1px solid var(--line);
      border-radius: 16px;
      padding: 10px 12px;
      font-size: 13px;
      color: var(--muted);
      font-weight:400;
    }
    .chip b{ color: var(--text); font-weight:600; }

    .sideCard{
      border:1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      padding: 16px;
      box-shadow: 0 10px 16px rgba(17,24,39,.06);
    }
    .sideTitle{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    .sideTitle h3{
      margin:0;
      font-size: 14px;
      font-weight:600;
      color:#111827;
    }
    .badge{
      font-size:12px;
      color: var(--brand);
      background: var(--brandSoft);
      border:1px solid rgba(37,99,235,.20);
      padding: 7px 10px;
      border-radius: 999px;
      font-weight:500;
    }

    .quick{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .q{
      border:1px solid var(--line);
      background:#fff;
      border-radius: 16px;
      padding: 12px;
      transition: transform .16s ease, box-shadow .16s ease;
    }
    .q:hover{
      transform: translateY(-1px);
      box-shadow: 0 14px 18px rgba(17,24,39,.08);
    }
    .q b{ display:block; font-weight:600; }
    .q span{ display:block; margin-top:4px; color:var(--muted); font-size:12px; font-weight:400; }

    .section{
      margin-top: 20px;
    }
    .secRow{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap: 12px;
      flex-wrap:wrap;
      margin: 18px 0 12px;
    }
    .secTitle{
      margin:0;
      font-size: 18px;
      font-weight:600;
      letter-spacing:-0.02em;
    }
    .secDesc{
      margin:0;
      color: var(--muted);
      font-size: 13px;
      font-weight:400;
      max-width: 80ch;
    }

    .grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 12px;
    }
    .card{
      grid-column: span 4;
      border:1px solid var(--line);
      border-radius: 18px;
      background:#fff;
      padding: 16px;
      box-shadow: 0 10px 16px rgba(17,24,39,.06);
    }
    .card h4{
      margin:0 0 8px 0;
      font-size: 15px;
      font-weight:600;
      display:flex;
      gap: 10px;
      align-items:center;
    }
    .ico{
      width: 34px; height: 34px;
      border-radius: 12px;
      background: var(--brandSoft);
      border:1px solid rgba(37,99,235,.18);
      display:grid;
      place-items:center;
      color: var(--brand);
      font-weight:600;
      font-size: 14px;
    }
    .card p{
      margin:0;
      color: var(--muted);
      font-size: 13px;
      font-weight:400;
    }

	.footer {
	  margin-top: 24px;
	  border-top: 1px solid var(--line);
	  padding-top: 14px;
	  color: var(--muted);
	  font-size: 12px;
	  display: flex;
	  justify-content: center; /* revealfoot을 화면 중앙에 배치 */
	}
	
	.revealfoot {
	  display: flex;
	  justify-content: space-between; /* 내부 요소들을 양 끝으로 벌림 */
	  align-items: center;
	  width: 100%;
	  max-width: 1280px; /* 이 너비 안에서 좌우로 벌어짐 */
	  padding: 0 20px;   /* 양 옆 여백 (화면이 작아질 때 대비) */
	}
	
	/* 왼쪽 박스 안의 로고와 카피라이트 정렬 */
	.left-box {
	  display: flex;
	  flex-direction: column;
	  align-items: flex-start;
	  gap: 5px;
	}

    /* reveal */
    .reveal{
      opacity:0;
      transform: translateY(12px);
      transition: opacity .55s ease, transform .55s ease;
    }
    .reveal.in{ opacity:1; transform:none; }
    


    /* =========================================================
      Responsive
    ========================================================= */
    @media (max-width: 980px){
      .topbar-inner{
        flex-direction: column;
        align-items: stretch;
      }
      .navArea{
        justify-content:space-between;
      }
      .mToggle{ display:inline-flex; }
      .nav{
        display:none;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        width: 100%;
        margin-top: 10px;
      }
      .nav.open{ display:flex; }

      .dropdown{
        position: static;
        box-shadow:none;
        border:none;
        border-top:1px solid var(--line);
        margin-top:8px;
        border-radius: 0;
        padding: 6px 0 0 0;
      }
      .navLink{
        justify-content:space-between;
      }

      .heroGrid{ grid-template-columns: 1fr; }
      .quick{ grid-template-columns: 1fr; }
      .card{ grid-column: span 6; }
      .rightBox{
        justify-content:flex-end;
        margin-top: 6px;
      }
    }
    @media (max-width: 560px){
      .h1{ font-size: 28px; }
      .card{ grid-column: span 12; }
    }