/* ========== Variables & Reset ========== */
:root{
  --blue:#2360e0;
  --blue-deep:#1c4bb6;
  --navy:#173a91;
  --lb:#e9f2f9;
  --line:#e3e9f2;
  --max:1160px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;height:100%;}
body{
  font-family:'Pretendard','Pretendard Variable',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  color:#3b4250;background:#f6f7f9;-webkit-font-smoothing:antialiased;line-height:1.5;
  min-height:100%;display:flex;flex-direction:column;
}
body>header,body>section,body>div,body>main{flex-shrink:0;}
footer{margin-top:auto;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
img{display:block;max-width:100%;}

/* ========== Header ========== */
header{background:#fff;border-bottom:1px solid #eef1f5;position:relative;}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;}
.logo-img{height:30px;width:auto;}
.menu{display:flex;align-items:center;gap:34px;}
.menu a{text-decoration:none;color:#4a5160;font-size:16px;font-weight:600;white-space:nowrap;}
.menu a.active{color:var(--blue-deep);font-weight:900;}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:none;background:none;cursor:pointer;padding:10px;}
.hamburger span{display:block;height:2.5px;width:100%;background:#2d3550;border-radius:2px;transition:.25s;}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.mobile-menu{display:flex;flex-direction:column;background:#fff;border-bottom:1px solid #eef1f5;box-shadow:0 12px 24px rgba(40,80,160,.08);}
.mobile-menu[hidden]{display:none;}
.mobile-menu a{padding:16px 24px;text-decoration:none;color:#4a5160;font-size:16px;font-weight:600;border-top:1px solid #f0f3f7;}
.mobile-menu a.active{color:var(--blue-deep);font-weight:900;}

/* ========== Hero (keyword, shopping) ========== */
.hero{
  position:relative;
  background:
    linear-gradient(180deg, rgba(8,60,130,.45) 0%, rgba(8,55,135,.55) 100%),
    url("/modulelibs/assets/images/main_bg.png") center/cover no-repeat,
    linear-gradient(160deg,#0f64ac 0%,#0c5aa3 40%,#073f8f 100%);
  color:#fff;text-align:center;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(105deg, rgba(255,255,255,.02) 0 2px, transparent 2px 26px);
  opacity:.4;pointer-events:none;
}
.hero .wrap{position:relative;padding:78px 24px 70px;}
.hero h1{font-size:40px;font-weight:800;line-height:1.32;letter-spacing:-.5px;text-shadow:0 2px 10px rgba(0,0,0,.18);}
.hero .sub{margin-top:20px;font-size:15px;font-weight:600;color:#bfe0ff;}
.hero .sub b{color:#ffe14d;font-weight:800;}
.hero .btns{margin-top:30px;display:flex;gap:14px;justify-content:center;}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  min-width:200px;
  padding:13px 30px;border:1.5px solid #fff;border-radius:999px;
  color:var(--blue-deep);font-size:15px;font-weight:700;text-decoration:none;background:#fff;transition:.18s;
}
.btn-ghost:hover{background:#1c4bb6;border-color:#1c4bb6;color:#fff;}

/* ========== CTA (keyword, shopping) ========== */
.cta{background:var(--blue-deep);color:#fff;text-align:center;padding:64px 0 70px;}
.cta h2{font-size:36px;font-weight:800;letter-spacing:-.5px;text-shadow:0 2px 8px rgba(0,0,0,.12);}
.cta .csub{margin-top:14px;font-size:17px;color:#cdd9f5;font-weight:500;}
.btn-white{
  display:inline-flex;align-items:center;justify-content:center;margin-top:30px;white-space:nowrap;
  min-width:200px;
  padding:13px 30px;background:#fff;color:var(--blue-deep);border:1.5px solid #fff;border-radius:999px;
  font-size:15px;font-weight:700;text-decoration:none;transition:.18s;
}
.btn-white:hover{background:#1c4bb6;border-color:#1c4bb6;color:#fff;}

/* ========== Cycle (keyword, shopping) ========== */
.cycle{background:var(--lb);padding:64px 0 72px;text-align:center;}
.cycle h2{font-size:30px;font-weight:800;color:var(--blue-deep);letter-spacing:-.5px;margin-bottom:48px;}
.cycle-row{display:flex;align-items:flex-start;justify-content:center;gap:40px;}
.cy-col{width:280px;}
.cy-top{height:150px;border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative;}
.cy-top.n{background:#03c75a;}
.cy-top.a{background:#1f3f8f;flex-direction:column;}
.cy-top.n span{font-size:80px;font-weight:900;color:#fff;line-height:1;}
.cy-top.a .a-mark{font-size:54px;font-weight:900;color:#fff;line-height:1;}
.cy-top.a .a-sub{font-size:18px;font-weight:800;color:#fff;letter-spacing:3px;margin-top:2px;}
.cy-top::after{content:"";position:absolute;bottom:-13px;left:50%;transform:translateX(-50%);
  border-left:14px solid transparent;border-right:14px solid transparent;border-top:14px solid;}
.cy-top.n::after{border-top-color:#03c75a;}
.cy-top.a::after{border-top-color:#1f3f8f;}
.cy-body{padding-top:26px;}
.cy-body .min{font-size:24px;font-weight:800;color:var(--blue-deep);}
.cy-body .min.n{color:#3b4250;}
.cy-body .desc{font-size:15px;color:#828a97;font-weight:500;line-height:1.6;margin-top:8px;}
.cy-body .tiny{font-size:12px;color:#aab0bb;margin-top:4px;}
.eq{font-size:46px;font-weight:800;color:#8fc0ef;align-self:flex-start;margin-top:42px;}

/* ========== Feature rows (keyword, shopping) ========== */
.feat{padding:64px 0;}
.feat:nth-child(even){background:#fff;}
.feat-row{display:grid;grid-template-columns:1.32fr 1fr;align-items:center;gap:56px;}
.feat-row.reverse{grid-template-columns:1fr 1.32fr;}
.feat-img{border-radius:10px;overflow:hidden;box-shadow:0 20px 44px rgba(40,80,160,.15);border:1px solid #e3eaf3;}
.feat-text h2{font-size:30px;font-weight:800;color:var(--blue-deep);letter-spacing:-.5px;margin-bottom:20px;line-height:1.3;}
.feat-text p{font-size:16px;color:#7b8392;font-weight:500;line-height:1.85;}
.feat-row.reverse .feat-text{order:-1;}

/* ========== Contact card (question, company) ========== */
.contact-card{border:1px solid #e7ebf1;border-radius:6px;padding:30px 44px;}
.crow{display:flex;align-items:center;gap:22px;padding:16px 0;}
.crow .ic{flex:0 0 46px;height:46px;display:flex;align-items:center;justify-content:center;}
.crow .ic img{width:46px;height:46px;object-fit:contain;}
.crow .ctext{font-size:17px;color:#5a6273;font-weight:500;line-height:1.6;}
.crow .ctext b{color:var(--blue);font-weight:700;}
.crow .ctext .em{color:var(--blue);font-weight:700;font-style:italic;}

/* ========== Footer ========== */
footer{background:#f6f7f9;padding:30px 0 40px;text-align:center;}
.flinks{display:flex;gap:0;justify-content:center;margin-bottom:18px;}
.flinks a{color:#7c828d;font-size:13.5px;font-weight:600;text-decoration:none;padding:0 16px;position:relative;white-space:nowrap;}
.flinks a:not(:last-child)::after{content:"";position:absolute;right:0;top:3px;height:13px;width:1px;background:#d6dae1;}
.finfo{color:#aab0b9;font-size:13px;line-height:1.9;}

/* ========== Responsive (common) ========== */
@media (max-width:920px){
  .hero h1{font-size:30px;}
  .cycle-row{flex-wrap:wrap;gap:20px;}
  .eq{display:none;}
  .feat-row,.feat-row.reverse{grid-template-columns:1fr;gap:30px;}
  .feat-img{width:100%;}
  .feat-img img{width:100%;}
  .feat-row.reverse .feat-text{order:0;}
  .menu{display:none;}
  .hamburger{display:flex;}
}
@media (max-width:480px){
  .hero .btns{flex-direction:column;align-items:center;}
}