:root{
      --primary:#154f93;
      --primary-dark:#113f74;
      --primary-light:#2f87db;
      --bg:#f6f9fc;
      --text:#1f2937;
      --sub:#667085;
      --line:#d8e3ef;
      --white:#fff;
      --service:#318bdc;
      --service-dark:#2471b7;
      --shadow:0 12px 28px rgba(21,79,147,.08);
      --container:1280px;
      --top-h:48px;
      --nav-h:84px;
    }

    
    .container-custom{
      width:min(var(--container), calc(100% - 40px));
      margin:0 auto;
    }

    /* 상단 유틸 */
    .topbar{
      background:#f5f7fa;
      border-bottom:1px solid #e7edf4;
    }
    .topbar-inner{
      min-height:var(--top-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .topbar-call{
      display:flex;
      align-items:center;
      gap:8px;
      font-size:15px;
      font-weight:800;
      color:var(--primary-dark);
      white-space:nowrap;
    }
    .topbar-call i{
      color:var(--primary);
      font-size:16px;
    }
    .topbar-links{
      display:flex;
      align-items:center;
      gap:10px;
      color:#5b6472;
      font-size:14px;
      font-weight:700;
      white-space:nowrap;
    }
    .topbar-links .divider{
      color:#b8c1cc;
    }

    /* 헤더 */
    .main-header{
      background:#fff;
      border-bottom:1px solid #e7edf4;
      position:relative;
      z-index:100;
    }
    .main-header-inner{
      min-height:var(--nav-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      position:relative;
    }

    .site-logo{
      flex:0 0 auto;
      display:flex;
      align-items:center;
      gap:12px;
      font-size:31px;
      font-weight:900;
      color:var(--primary-dark);
      letter-spacing:-0.04em;
      white-space:nowrap;
      position:relative;
      z-index:120;
    }
    .site-logo-mark{
      width:46px;
      height:46px;
      border-radius:50%;
      background:linear-gradient(135deg,#6fb0f4,#2c7fda);
      box-shadow:0 8px 18px rgba(47,135,219,.22);
      position:relative;
      flex:0 0 46px;
    }
    .site-logo-mark::before,
    .site-logo-mark::after{
      content:"";
      position:absolute;
      border-radius:999px;
      background:rgba(255,255,255,.92);
    }
    .site-logo-mark::before{
      width:24px;height:6px;left:11px;top:14px;transform:rotate(-22deg);
    }
    .site-logo-mark::after{
      width:18px;height:6px;left:14px;top:24px;transform:rotate(18deg);
    }

    .menu-toggle{
      display:none;
      width:46px;
      height:46px;
      border:1px solid #d8e3ef;
      border-radius:12px;
      background:#fff;
      color:var(--primary-dark);
      font-size:26px;
      align-items:center;
      justify-content:center;
      position:relative;
      z-index:120;
      flex:0 0 46px;
    }

    .main-nav{
      flex:1;
      min-width:0;
      display:flex;
      justify-content:flex-end;
    }
    .nav-list{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:0;
      min-width:0;
    }

    .nav-item{
      position:relative;
    }
    .nav-item > a{
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:84px;
      padding:0 28px;
      color:#203246;
      font-size:18px;
      font-weight:800;
      transition:.2s ease;
      white-space:nowrap;
      position:relative;
    }
    .nav-item:hover > a{
      color:var(--primary);
    }
    .nav-item > a::after{
      content:"";
      position:absolute;
      left:28px;
      right:28px;
      bottom:0;
      height:3px;
      background:var(--primary);
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .25s ease;
    }
    .nav-item:hover > a::after,
    .nav-item.active > a::after{
      transform:scaleX(1);
    }

    .submenu-toggle{
      display:none;
    }

    .submenu{
      position:absolute;
      top:100%;
      left:50%;
      transform:translateX(-50%);
      min-width:220px;
      background:#fff;
      border:1px solid #dce6f1;
      border-radius:16px;
      box-shadow:0 18px 34px rgba(17,63,116,.12);
      padding:10px 0;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:all .22s ease;
      z-index:50;
    }
    .nav-item:hover .submenu{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }
    .submenu a{
      display:block;
      padding:12px 18px;
      font-size:15px;
      font-weight:700;
      color:#445366;
      transition:.18s ease;
      white-space:nowrap;
    }
    .submenu a:hover{
      background:#f3f8ff;
      color:var(--primary);
    }


    /* 푸터 */
    .site-footer{
      background:#183a68;
      color:rgba(255,255,255,.82);
      padding:28px 0 34px;
    }
    .footer-inner{
      display:flex;
      justify-content:space-between;
      gap:20px;
      align-items:flex-start;
      flex-wrap:wrap;
    }
    .footer-title{
      font-size:20px;
      font-weight:800;
      color:#fff;
      margin-bottom:10px;
    }
    .footer-copy{
      font-size:14px;
      line-height:1.8;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      font-size:14px;
      font-weight:700;
    }
    .footer-links a{
      color:#dce8f6;
    }

    @media (max-width: 1400px){
      .nav-item > a{padding:0 20px}
    }

    

    @media (max-width: 991px){
      .container-custom{
        width:min(var(--container), calc(100% - 24px));
      }

      .topbar-inner{
        min-height:auto;
        padding:10px 0;
      }
      .topbar-call{
        font-size:13px;
      }
      .topbar-links{
        font-size:13px;
        gap:8px;
      }

      .main-header-inner{
        min-height:68px;
      }
      .site-logo{
        font-size:20px;
        gap:8px;
      }
      .site-logo-mark{
        width:36px;
        height:36px;
        flex-basis:36px;
      }

      .menu-toggle{
        display:flex;
      }

      .main-nav{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#fff;
        border-top:1px solid #e7edf4;
        box-shadow:0 18px 30px rgba(15,23,42,.08);
        display:none;
        z-index:110;
      }
      .main-nav.active{
        display:block;
      }

      .nav-list{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        padding:8px 0 14px;
      }

      .nav-item{
        display:block;
        border-bottom:1px solid #edf2f7;
      }
      .nav-item > a{
        min-height:auto;
        padding:16px 18px;
        font-size:16px;
        justify-content:flex-start;
      }
      .nav-item > a::after{
        display:none;
      }

      .has-submenu{
        position:relative;
      }
      .submenu-toggle{
        display:flex;
        position:absolute;
        right:12px;
        top:10px;
        width:40px;
        height:40px;
        border:0;
        background:none;
        color:#5b6472;
        font-size:18px;
        align-items:center;
        justify-content:center;
      }
      .submenu-toggle i{
        transition:transform .2s ease;
      }

      .submenu{
        position:static;
        transform:none;
        min-width:100%;
        border:0;
        border-top:1px solid #eef3f8;
        border-radius:0;
        box-shadow:none;
        padding:6px 0 10px;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        display:none;
        background:#f8fbff;
      }
      .nav-item:hover .submenu{
        display:none;
      }
      .nav-item.open .submenu{
        display:block;
      }
      .nav-item.open .submenu-toggle i{
        transform:rotate(180deg);
      }
      .submenu a{
        padding:11px 22px;
        font-size:14px;
      }


    }

    @media (max-width: 767px){
      .topbar-call{
        font-size:12px;
      }
      .topbar-links{
        font-size:12px;
      }

      .main-header-inner{
        min-height:64px;
      }
      .site-logo{
        font-size:18px;
      }
      .site-logo-mark{
        width:32px;
        height:32px;
        flex-basis:32px;
      }
      .menu-toggle{
        width:40px;
        height:40px;
        font-size:22px;
        flex-basis:40px;
      }


    }
}