/* 프로그램 공개 첫 화면 공통 스타일 (program/intro.html). */
:root { --pi-ink:#16202e; --pi-sub:#5a6676; --pi-line:#dfe5ee; --pi-brand:#1f5eff; --pi-bg:#f6f8fb; }
* { box-sizing: border-box; }
body { margin:0; background:var(--pi-bg); color:var(--pi-ink);
  font-family:'Pretendard Variable',Pretendard,-apple-system,'Segoe UI','Noto Sans KR',sans-serif; line-height:1.6; }
a { color:inherit; }
.pi-top { display:flex; justify-content:space-between; align-items:center; padding:14px 24px;
  background:#fff; border-bottom:1px solid var(--pi-line); }
.pi-brand { font-weight:800; text-decoration:none; letter-spacing:-.01em; }
.pi-nav a { text-decoration:none; color:var(--pi-sub); font-size:14px; }
.pi-main { max-width:880px; margin:0 auto; padding:48px 24px 32px; }
.pi-hero { background:#fff; border:1px solid var(--pi-line); border-radius:16px; padding:36px 32px; }
.pi-eyebrow { margin:0 0 6px; color:var(--pi-brand); font-weight:700; font-size:14px; }
.pi-title { margin:0 0 12px; font-size:36px; letter-spacing:-.02em; line-height:1.2; }
.pi-summary { margin:0 0 24px; color:var(--pi-sub); font-size:17px; }
.pi-actions { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.pi-btn { display:inline-block; padding:13px 22px; border-radius:10px; border:1px solid var(--pi-line);
  background:#fff; text-decoration:none; font-weight:700; font-size:16px; }
.pi-btn-primary { background:var(--pi-brand); border-color:var(--pi-brand); color:#fff; }
.pi-hint { margin:0; color:var(--pi-sub); font-size:14px; }
.pi-link { color:var(--pi-brand); font-size:14px; font-weight:600; }
.pi-notice { background:#fff8e6; border:1px solid #f0d58a; border-radius:12px; padding:18px 20px; }
.pi-notice p { margin:8px 0; }
.pi-features { margin-top:24px; background:#fff; border:1px solid var(--pi-line); border-radius:16px; padding:24px 32px; }
.pi-features h2 { margin:0 0 12px; font-size:20px; }
.pi-features ul { margin:0; padding-left:20px; }
.pi-features li { margin:6px 0; }
.pi-foot { text-align:center; color:var(--pi-sub); font-size:13px; padding:8px 24px 40px; }
@media (max-width:480px) {
  .pi-top { padding:12px 16px; }
  .pi-main { padding:24px 16px 16px; }
  .pi-hero, .pi-features { padding:22px 18px; }
  .pi-title { font-size:28px; }
  .pi-btn { width:100%; text-align:center; }
  .pi-actions { align-items:stretch; }
}