/* Light two‑tone (blue + white) theme */
/* Color tokens */
:root{
  --blue:#0066ff;
  --blue-600:#0052cc;
  --blue-200:#e3efff;
  --blue-50:#f7faff;
  --navy:#003366;
  --text:#1f2937;
  --muted:#6b7280;
  --ring: rgba(0,102,255,.18);
  --card-border:#dce6f5;
  --card-shadow:0 3px 10px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:var(--text);font-family:'Pretendard',system-ui,AppleSDGothicNeo,'Noto Sans KR',sans-serif}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.section.alt{background:var(--blue-50)}
h1,h2,h3{margin:0 0 16px}
h1{font-size:42px;line-height:1.15;color:var(--navy)}
h2{font-size:28px;color:var(--navy)}
h3{font-size:20px;color:#0b3f91}
.subtitle{color:#334155}
.muted{color:var(--muted)}
.center{text-align:center}

/* Header (navy bar) */
.site-header{position:sticky;top:0;background:var(--navy);color:#fff;border-bottom:1px solid rgba(255,255,255,.12);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:28px;height:28px}
.brand-text{font-weight:700;color:#fff}

/* Hero */
.hero{padding:72px 0 32px;background:linear-gradient(135deg,var(--blue-50) 0%, var(--blue-200) 100%);}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.hero-visual .mockup{border-radius:16px;border:1px solid #cfe0ff;box-shadow:0 16px 50px rgba(14,61,183,.18), 0 2px 8px rgba(14,61,183,.08)}
.highlight{background:linear-gradient(90deg,var(--blue),#33a1ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-row{display:flex;gap:12px;align-items:center;margin-top:16px;flex-wrap:wrap}
.tiny-note{font-size:12px;color:var(--muted);margin-top:8px}

/* Cards & Grid */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
.card{background:#fff;border:1px solid var(--card-border);border-radius:16px;padding:20px;box-shadow:var(--card-shadow)}
.card.check{border-color:#bfe3ff}
.card blockquote{margin:0 0 16px}
.card {
  display: flex;
  flex-direction: column;
  align-items: center;   /* 제목, 이미지 등은 가운데 정렬 */
  text-align: center;
}

.card h3 {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #003366;
}

.card p {
  text-align: left;       /* 본문은 좌측 정렬 */
  font-size: 16px;        /* 약간 크게 */
  line-height: 1.6;       /* 가독성 ↑ */
  font-weight: 500;       /* 강조 */
  color: #333;            /* 조금 진한 톤 */
  max-width: 90%;         /* 좌우폭 살짝 줄여서 정돈 */
}


.caption{color:var(--muted);font-size:12px;margin-top:8px}
.ba-img{border-radius:12px;border:1px solid #cfe0ff}

/* Two‑tone, 3D Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:12px 18px;border:none;transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;line-height:1;font-weight:700}
.btn.small{padding:8px 12px;font-size:14px}
.btn.wide{width:100%;padding:14px 18px}

.btn-primary{
  background:linear-gradient(135deg,#4da6ff 0%, var(--blue) 100%);
  color:#fff;
  box-shadow:0 10px 22px rgba(0,102,255,.30), 0 2px 6px rgba(0,0,0,.08);
}
.btn-primary:hover{filter:brightness(.98);box-shadow:0 14px 28px rgba(0,102,255,.38), 0 4px 8px rgba(0,0,0,.10);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(1px);box-shadow:0 6px 14px rgba(0,102,255,.28) inset}

.btn-ghost{
  background:#fff;
  color:var(--blue);
  border:2px solid var(--blue);
  box-shadow:0 6px 14px rgba(0,102,255,.08);
}
.btn-ghost:hover{background:#f0f6ff;box-shadow:0 10px 18px rgba(0,102,255,.16);transform:translateY(-1px)}
.btn-ghost:active{transform:translateY(1px)}

/* Lead form */
.narrow{max-width:560px;margin:0 auto}
.lead-form{display:grid;gap:14px;margin-top:16px}
.form-row{display:grid;gap:8px}
input,select{background:#fff;border:1px solid var(--card-border);color:var(--text);padding:12px 12px;border-radius:10px;outline:none;box-shadow:0 1px 0 rgba(0,0,0,.02)}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--ring)}
.optional-form summary{cursor:pointer;color:var(--muted);margin-top:16px}
.optional-form[open] summary{color:#0b3f91}

/* About */
.about{display:grid;grid-template-columns:90px 1fr;gap:16px;align-items:center}
.avatar{width:90px;height:90px;border-radius:16px;border:1px solid #cfe0ff}
.socials{display:flex;gap:12px;margin-top:6px}

/* Footer */
.site-footer{padding:24px 0;border-top:1px solid var(--card-border);background:#fff;color:var(--muted)}
.footer-inner{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}

/* Price badge & extras (if present) */
.badge{display:inline-block;margin-left:10px;background:#e8fff4;color:#05603a;border:1px solid #a6f4c5;padding:6px 10px;border-radius:999px;font-size:14px;font-weight:700;vertical-align:middle}
.strikethrough{text-decoration:line-through;color:#9aa3b2;font-weight:600;margin-left:6px}
.mid-cta{margin-top:12px}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
}