@charset "utf-8";
/* haesol_dev · 메인화면 전용 (index.php 에서만 불린다 — head.sub.php 참고) */

/* ── 큰 화면 ──────────────────────────────────────────── */
.mn-hero{
  position:relative;padding:190px 0 110px;color:#fff;
  background:
    radial-gradient(900px 500px at 78% 8%, rgba(46,107,255,.35), transparent 62%),
    radial-gradient(700px 460px at 6% 92%, rgba(76,141,255,.20), transparent 60%),
    linear-gradient(160deg,#0B1220 0%,#111C33 60%,#0B1220 100%);
  overflow:hidden;
}
.mn-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);
          mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);
}
.mn-hero .wrap{position:relative;z-index:1}
.mn-hero .lb{display:block;font-family:var(--latin);font-size:13px;letter-spacing:.32em;color:var(--blue2);margin-bottom:20px}
.mn-hero h2{font-size:clamp(32px,5.2vw,60px);font-weight:700;line-height:1.22;letter-spacing:-.02em}
.mn-hero p{margin-top:22px;max-width:640px;font-size:17px;color:rgba(255,255,255,.7)}
.mn-hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.mn-hero .nums{display:flex;flex-wrap:wrap;gap:54px;margin-top:64px;padding-top:34px;border-top:1px solid rgba(255,255,255,.13)}
.mn-hero .nums strong{display:block;font-family:var(--latin);font-size:40px;font-weight:700;color:#fff;line-height:1}
.mn-hero .nums span{display:block;margin-top:8px;font-size:13.5px;color:rgba(255,255,255,.55)}

/* ── 구역 공통 ────────────────────────────────────────── */
.mn-sec{padding:100px 0}
.mn-sec.gray{background:var(--bg)}
.sec-hd{margin-bottom:44px}
.sec-hd .lb{display:block;font-family:var(--latin);font-size:12.5px;letter-spacing:.28em;color:var(--blue);margin-bottom:10px}
.sec-hd h3{font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.01em}
.sec-hd.row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.sec-hd .more{font-size:14.5px;color:var(--gray);white-space:nowrap}
.sec-hd .more em{font-style:normal;transition:.25s;display:inline-block}
.sec-hd .more:hover{color:var(--blue)}
.sec-hd .more:hover em{transform:translateX(4px)}

/* ── 이렇게 만듭니다 ──────────────────────────────────── */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.mn-points .pt{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:34px 30px 32px;transition:.28s}
.mn-points .pt:hover{border-color:var(--blue);box-shadow:0 18px 40px -26px rgba(11,18,32,.5);transform:translateY(-3px)}
.mn-points .no{display:block;font-family:var(--latin);font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--blue);margin-bottom:16px}
.mn-points h4{font-size:19px;font-weight:700;margin-bottom:10px}
.mn-points p{font-size:15px;color:var(--gray);line-height:1.75}

/* ── 진열 카드 ────────────────────────────────────────── */
.mn-items .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.mn-items .card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;transition:.28s}
.mn-items.gray .card{border-color:#dfe4ec}
.mn-items .card:hover{transform:translateY(-4px);box-shadow:0 22px 46px -28px rgba(11,18,32,.55);border-color:var(--blue)}
.mn-items .card .shot{display:block;aspect-ratio:16/10;background-position:top center !important;background-size:cover !important}
.mn-items .card .body{display:block;padding:22px 22px 26px}
.mn-items .card .sub{display:block;font-style:normal;font-size:12.5px;color:var(--blue);margin-bottom:7px}
.mn-items .card strong{display:block;font-size:18px;font-weight:700;margin-bottom:8px}
.mn-items .card .tl{display:block;font-size:14.5px;color:var(--gray);line-height:1.7}
.mn-items .empty{color:var(--gray)}
.mn-items code{background:#eef1f6;border-radius:6px;padding:2px 7px;font-size:13.5px}

/* 플러그인 준비중 */
.mn-items .soon{text-align:center;background:#fff;border:1px dashed #c7cede;border-radius:var(--rad);padding:60px 24px}
.mn-items .soon strong{display:block;font-size:21px;font-weight:700;margin-bottom:12px}
.mn-items .soon p{color:var(--gray);margin-bottom:24px;line-height:1.8}

/* ── 문의 유도 ────────────────────────────────────────── */
.mn-cta{padding:104px 0;text-align:center;color:#fff;
  background:radial-gradient(700px 400px at 50% 0%,rgba(46,107,255,.4),transparent 65%),var(--navy)}
.mn-cta .lb{display:block;font-family:var(--latin);font-size:12.5px;letter-spacing:.3em;color:var(--blue2);margin-bottom:14px}
.mn-cta h3{font-size:clamp(25px,3.4vw,38px);font-weight:700;letter-spacing:-.01em}
.mn-cta p{margin:16px 0 32px;color:rgba(255,255,255,.68)}

/* ── 좁은 화면 ────────────────────────────────────────── */
@media (max-width:1024px){
  .mn-items .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .mn-hero{padding:140px 0 76px}
  .mn-hero .nums{gap:30px;margin-top:44px}
  .mn-hero .nums strong{font-size:31px}
  .mn-sec{padding:66px 0}
  .sec-hd{margin-bottom:30px}
  .sec-hd.row{flex-wrap:wrap;align-items:center}
  .grid3,.mn-items .cards{grid-template-columns:minmax(0,1fr)}
  .mn-cta{padding:72px 0}
}