:root{
  /* 라이트지만 너무 하얗지 않게 */
  --bg:#eef2f7;
  --card:#ffffff;

  /* 라인/텍스트를 조금 더 단단하게 */
  --line:#d9e2ef;
  --text:#0f172a;
  --muted:#64748b;

  /* “중후함” 포인트 컬러(잉크) */
  --ink:#0b1020;
  --ink2:#0f172a;

  /* 파스텔은 ‘빛’으로만 */
  --p-blue:#93c5fd;
  --p-mint:#a7f3d0;
  --p-violet:#c4b5fd;

  --radius:14px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:var(--bg);
}
a{color:inherit}

.container{max-width:1024px;margin:0 auto;padding:0 20px;}
.muted{color:var(--muted); font-size:14px;}

/* ===== Header / Nav ===== */
.header{
  position:sticky;
  top:0;
  background: rgb(239, 241, 250);  /* 완전 흰색 피하기 */
  border-bottom: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
  z-index:10;
}

/* 기존 64px → 72px로 높이 살짝 키움 */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}

/* 로고: 크고 굵게 + 잉크 컬러 */
.logo{
  font-weight:900;
  font-size:36px;
  letter-spacing:.6px;
  color:var(--ink);
  text-decoration:none;
  padding:20px;
}

/* nav: gap 기반(정돈) */
.nav{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 20px;
}

/* 메뉴: 크고 굵게 + 잉크톤 */
.nav a{
  text-decoration:none;
  color:var(--ink2);
  font-weight:800;
  font-size:18px;
  letter-spacing:-.2px;

  padding:10px 12px;
  border-radius:12px;

  /* 중후한 느낌의 미세한 인터랙션 */
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

/* hover: 잉크 그림자 + 살짝 떠오르는 느낌 */
.nav a:hover{
  background: rgba(2,6,23,.04);
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
  transform: translateY(-1px);
}

/* active: 파스텔 glow + 잉크 테두리(고급) */
.nav a.active{
  background: linear-gradient(135deg, rgba(147,197,253,.35), rgba(167,243,208,.30));
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 14px 28px rgba(2,6,23,.10);
}

/* (선택) active 아닌 메뉴는 살짝 톤 다운 */
.nav a:not(.active){
  opacity:.92;
}


/* ===== Footer (중후함) ===== */
.footer{
  margin-top:34px;
  border-top:1px solid rgba(148,163,184,.18);
  background: linear-gradient(180deg, rgb(23, 35, 64), #0b1020);
  color:#e2e8f0;
}
.footer-inner{
  padding:18px 20px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.footer-title{font-weight:800;}
.footer-right{text-align:right;}
.footer .muted{ color:#cbd5e1; }

/* ===== Typography / Sections ===== */
.section{padding:22px 0;}
.h1{margin:0 0 6px;font-size:30px;}
.h2{margin:0 0 12px;font-size:22px;}
.page-head{padding:24px 0 10px;}

/* ===== Hero ===== */
.hero{padding:42px 0 14px;}
.badge{
  display:inline-block;
  padding:7px 12px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(147,197,253,.55), rgba(167,243,208,.50));
  border: 1px solid rgba(15,23,42,.10);
  color:#0f172a;
  font-weight:900;
  font-size:14px;
}
.hero h1{font-size:38px;line-height:1.12;margin:12px 0 12px;}
.lead{font-size:18px;color:#334155;margin:0 0 18px;}

/* ===== Buttons (중후한 Primary) ===== */
.cta{display:flex;gap:10px;margin:10px 0 18px;}
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.22);

  background: linear-gradient(180deg, rgb(32, 49, 89), rgb(31, 46, 90));
  color:#e2e8f0;

  cursor:pointer;
  text-decoration:none;
  font-weight:900;

  box-shadow:
    0 14px 30px rgba(2,6,23,.18),
    0 0 0 1px rgba(147,197,253,.10),
    0 0 28px rgba(167,243,208,.18);
}
.btn:hover{filter:brightness(1.03)}
.btn.ghost{
  background:#fff;
  color:#0f172a;
  border:1px solid rgba(15,23,42,.14);
  box-shadow:0 10px 22px rgba(2,6,23,.06);
}

/* ===== Grid / Cards ===== */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}

.card{
  background:var(--card);
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 2px 12px rgba(15,23,42,.05);
}
.card-title{font-weight:900;margin-bottom:6px;}
.list{margin:8px 0 0;padding-left:18px;color:#334155;}

/* =========================================================
   Hero Background + Hero Image
   (라이트+파스텔 + 잉크 레이어 살짝)
========================================================= */
.hero-bg{
  position: relative;
  border-radius: 18px;
  padding: 28px 22px 18px;
  overflow: hidden;

  background:
    radial-gradient(900px 300px at 20% 0%, rgba(147,197,253,.28), transparent 55%),
    radial-gradient(780px 260px at 85% 35%, rgba(167,243,208,.22), transparent 60%),
    radial-gradient(600px 240px at 55% 90%, rgba(196,181,253,.18), transparent 60%),
    linear-gradient(180deg, #ffffff, #f4f7ff),
    linear-gradient(180deg, rgba(11,16,32,.06), rgba(11,16,32,0));
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 18px 55px rgba(2,6,23,.10);
}

/* 패턴(그리드/점) */
.hero-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none'%3E%3Cpath d='M0 35H140M0 70H140M0 105H140' stroke='%2394a3b8' stroke-opacity='.16'/%3E%3Cpath d='M35 0V140M70 0V140M105 0V140' stroke='%2394a3b8' stroke-opacity='.12'/%3E%3Ccircle cx='70' cy='70' r='1.6' fill='%2394a3b8' fill-opacity='.16'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .60;
  pointer-events:none;
}

.hero-inner, .hero-bg .grid3{
  position: relative;
  z-index: 1;
}

.hero-inner{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  align-items: start;  /* ✅ 항상 위쪽 정렬 */
}

.hero-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* hero-art: 화이트 카드 + 얕은 잉크 */
.hero-art{
  border-radius: 18px;
  align-self: center; /* ✅ 오른쪽만 가운데 */
  padding: 12px;
  background:
    radial-gradient(700px 260px at 40% 20%, rgba(147,197,253,.28), transparent 60%),
    radial-gradient(600px 240px at 80% 70%, rgba(167,243,208,.22), transparent 60%),
    linear-gradient(180deg, #ffffff, #f1f6ff),
    linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,0));
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 18px 50px rgba(2,6,23,.10);
}
.hero-art svg{
  width:100%;
  height:auto;
  display:block;
  border-radius: 14px;
}
.hero-bg .grid3{ margin-top:18px; }

/* =========================================================
   Card Inline SVG (라이트+파스텔 + 잉크 레이어 살짝)
========================================================= */
.card-illust-svg{
  height:110px;
  border-radius:14px;
  margin-bottom:12px;
  border:1px solid rgba(15,23,42,.12);
  overflow:hidden;

  background:
    radial-gradient(240px 100px at 25% 25%, rgba(147,197,253,.28), transparent 60%),
    radial-gradient(240px 100px at 75% 70%, rgba(167,243,208,.22), transparent 60%),
    linear-gradient(180deg, #ffffff, #eef4ff),
    linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,0));
}
.card-svg{
  width:100%;
  height:100%;
  display:block;
}
.card-illust-svg.sm{ height:96px; }

/* ===== Callout (기본: 라이트) ===== */
.callout{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:var(--radius);

  background:
    radial-gradient(700px 220px at 20% 20%, rgba(147,197,253,.20), transparent 60%),
    radial-gradient(700px 220px at 85% 65%, rgba(167,243,208,.18), transparent 60%),
    linear-gradient(180deg, #ffffff, #f7fbff);
  border: 1px solid rgba(15,23,42,.10);
}
.callout-title{font-weight:900;margin-bottom:4px;}
.callout .muted{color:#475569}

/* ✅ Callout ink 버전(중후함) */
.callout.ink{
  background:
    radial-gradient(700px 220px at 20% 20%, rgba(147,197,253,.18), transparent 60%),
    radial-gradient(700px 220px at 85% 65%, rgba(167,243,208,.16), transparent 60%),
    linear-gradient(180deg, #0f172a, #0b1020);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 18px 60px rgba(2,6,23,.22);
}
.callout.ink .callout-title{ color:#e2e8f0; }
.callout.ink .muted{ color:#cbd5e1; }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .grid3,.grid2{grid-template-columns:1fr;}
  .hero h1{font-size:32px;}
  .footer-right{text-align:left;}
  .hero-inner{grid-template-columns:1fr;}
}

/* =========================
   Mobile Nav Toggle
========================= */
.nav-wrap{display:flex; align-items:center; gap:10px; position:relative;}
.nav-toggle{display:none;} /* checkbox 숨김 */

.nav-btn{
  display:none; /* 기본은 숨김(PC) */
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
  cursor:pointer;
  align-items:center;
  justify-content:center;
}

.nav-icon{
  width:20px; height:2px;
  background: rgba(15,23,42,.85);
  position:relative;
  display:block;
  border-radius:2px;
}
.nav-icon::before,.nav-icon::after{
  content:"";
  position:absolute; left:0;
  width:20px; height:2px;
  background: rgba(15,23,42,.85);
  border-radius:2px;
}
.nav-icon::before{ top:-6px; }
.nav-icon::after{ top:6px; }

/* =========================
   Responsive (<=900px)
========================= */
@media (max-width: 900px){
  .container{padding:0 16px;}
  .header-inner{height:64px;}
  .logo{font-size:30px; padding:12px 10px;}

  /* 모바일에선 햄버거 버튼 보이기 */
  .nav-btn{display:flex;}

  /* nav를 드롭다운 패널로 */
  .nav{
    display:none; /* 기본 숨김 */
    position:absolute;
    top:56px;
    right:0;
    min-width:220px;
    flex-direction:column;
    gap:4px;
    padding:10px;
    border-radius:16px;

    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border:1px solid rgba(15,23,42,.12);
    box-shadow: 0 18px 55px rgba(2,6,23,.14);
  }

  /* ✅ 체크되면 nav 오픈 (input -> label -> nav 구조 필수) */
  .nav-toggle:checked + .nav-btn + .nav{display:flex;}

  .nav a{
    font-size:16px;
    padding:12px 12px;
    border-radius:12px;
  }
}

/* Phone 더 컴팩트 */
@media (max-width: 520px){
  .container{padding:0 14px;}
}