/* ==========================================================================
   Project 본편 — 프로그램 소개 지면

   본편은 글이 아니라 제품 지면이다. 그래서 본문 한 줄 길이(720px)를 벗어나
   그리드 폭(1280px)까지 펼친다. .gp-content 안에 들어 있으므로 가운데를
   기준으로 좌우로 밀어 낸다.

   마디는 일곱이다.
     1. gp-pj-hero      프로그램 소개
     2. gp-pj-dl        내려받기 (숏코드 [gp_download])
     3. gp-pj-why       차별성
     4. gp-pj-cards     핵심 기능 (그림 카드)
     5. gp-pj-feats     주요 기능 (아이콘과 한 줄)
     6. gp-pj-versions  버전 표 (숏코드 [gp_versions])
     7. gp-pj-sister    자매 프로그램
   ========================================================================== */

.gp-content .gp-pj{
  width:min(var(--gp-wide), calc(100vw - var(--gp-gut) * 2));
  margin:72px 0 0 50%;
  transform:translateX(-50%);
}
.gp-content .gp-pj:first-child{margin-top:0}

/* 마디 제목. 본문의 h2 보다 크고 왼쪽에 붙는다. */
.gp-pj-h{
  font-size:clamp(24px,3vw,34px);line-height:1.25;letter-spacing:-.03em;
  margin:0 0 28px;color:var(--gp-ink);
}
.gp-pj-sub{margin:-18px 0 28px;color:var(--gp-ink-soft);font-size:16px;line-height:1.75}
.gp-pj-empty,.gp-pj-note{color:var(--gp-ink-faint);font-size:13px;line-height:1.7;margin:14px 0 0}

/* ── 1. 프로그램 소개 ─────────────────────────────────────── */
.gp-pj-hero{text-align:center;padding:8px 0 4px}
.gp-pj-hero .gp-pj-kicker{
  font-size:15px;font-weight:700;color:var(--gp-ink-soft);margin:0 0 10px;letter-spacing:-.01em;
}
.gp-pj-hero .gp-pj-name{
  font-size:clamp(38px,6vw,64px);font-weight:800;letter-spacing:-.045em;line-height:1.1;
  margin:0 0 22px;color:var(--gp-ink);
}
.gp-pj-hero .gp-pj-lead{
  max-width:640px;margin:0 auto 6px;color:var(--gp-ink-soft);font-size:16px;line-height:1.85;
}

/* ── 2. 내려받기 ──────────────────────────────────────────── */
.gp-pj-dl{display:flex;flex-direction:column;align-items:center;gap:10px;margin:30px 0 0;text-align:center}
.gp-pj-btn{
  display:inline-block;padding:15px 34px;border-radius:var(--gp-radius);
  background:var(--gp-accent);color:#fff;font-size:16px;font-weight:800;letter-spacing:-.01em;
  text-decoration:none;transition:opacity .2s;
}
.gp-pj-btn:hover{opacity:.88;text-decoration:none;color:#fff}
.gp-pj-btn.is-off{background:var(--gp-line);color:var(--gp-ink-faint);cursor:default}
.gp-pj-dl-meta{font-size:13px;color:var(--gp-ink-faint)}
.gp-pj-dl-os{font-size:12px;color:var(--gp-ink-faint)}

/* ── 3. 차별성 ───────────────────────────────────────────── */
.gp-pj-why .gp-pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gp-pj-why .gp-pj-card{
  border:1px solid var(--gp-line);border-radius:var(--gp-radius);padding:24px 22px;background:#fff;
}
.gp-pj-why .gp-pj-card h3{font-size:18px;margin:0 0 10px;letter-spacing:-.02em}
.gp-pj-why .gp-pj-card p{margin:0;font-size:15px;line-height:1.75;color:var(--gp-ink-soft)}
.gp-pj-why .gp-pj-num{
  display:block;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--gp-accent);margin-bottom:12px;
}

/* ── 4. 핵심 기능 — 그림 카드 ─────────────────────────────── */
.gp-pj-cards .gp-pj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 24px}
.gp-pj-cards figure{margin:0}
.gp-pj-cards .gp-pj-shot{
  display:block;aspect-ratio:16/10;width:100%;overflow:hidden;
  background:var(--gp-band-5);border-radius:var(--gp-radius);margin:0 0 14px;
}
.gp-pj-cards .gp-pj-shot img,
.gp-pj-cards .gp-pj-shot svg{width:100%;height:100%;object-fit:cover;display:block}
.gp-pj-cards h3{font-size:19px;margin:0 0 8px;letter-spacing:-.02em}
/* 테마는 본문의 figcaption 을 가운데로 놓고 작게 만든다. 카드에서는 제목과
   같은 줄에서 시작해야 읽히므로 왼쪽으로 되돌린다. */
.gp-content .gp-pj-cards figcaption,
.gp-pj-cards figcaption,
.gp-pj-cards .gp-pj-line{
  margin:0;font-size:15px;line-height:1.7;color:var(--gp-ink-soft);text-align:left;
}

/* ── 5. 주요 기능 — 아이콘과 한 줄 ────────────────────────── */
.gp-pj-feats .gp-pj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 40px}
.gp-pj-feats .gp-pj-item{display:block}
.gp-pj-feats .gp-pj-ico{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  margin-bottom:10px;color:var(--gp-accent);font-size:19px;line-height:1;
}
.gp-pj-feats .gp-pj-ico img,.gp-pj-feats .gp-pj-ico svg{width:100%;height:100%;display:block}
.gp-pj-feats h3{font-size:17px;margin:0 0 6px;letter-spacing:-.02em}
.gp-pj-feats p{margin:0;font-size:15px;line-height:1.7;color:var(--gp-ink-soft)}

/* ── 6. 버전 표 ──────────────────────────────────────────── */
.gp-pj-table-wrap{overflow-x:auto}
.gp-pj-table{width:100%;border-collapse:collapse;font-size:15px}
.gp-pj-table th,.gp-pj-table td{
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--gp-line);vertical-align:top;
}
.gp-pj-table thead th{
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gp-ink-faint);border-bottom-width:2px;white-space:nowrap;
}
.gp-pj-table tbody tr.is-latest td{background:rgba(181,80,42,.05)}
.gp-pj-ver{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.gp-pj-badge{
  display:inline-block;margin-left:8px;padding:2px 7px;border-radius:var(--gp-radius);
  background:var(--gp-accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;vertical-align:2px;
}
.gp-pj-size{margin-left:8px;color:var(--gp-ink-faint);font-size:12px;white-space:nowrap}
.gp-pj-none{color:var(--gp-ink-faint)}

/* ── 7. 자매 프로그램 ────────────────────────────────────── */
.gp-pj-sister .gp-pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gp-pj-sister .gp-pj-card{
  border:1px solid var(--gp-line);border-radius:var(--gp-radius);padding:22px;background:#fff;
  display:flex;flex-direction:column;gap:10px;
}
.gp-pj-sister h3{font-size:17px;margin:0;letter-spacing:-.02em}
.gp-pj-sister p{margin:0;font-size:14px;line-height:1.7;color:var(--gp-ink-soft);flex:1 1 auto}
.gp-pj-sister .gp-pj-os{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.gp-pj-sister .gp-pj-os a{
  flex:1 1 auto;text-align:center;padding:9px 12px;border-radius:var(--gp-radius);
  background:rgba(181,80,42,.08);color:var(--gp-accent);font-size:13px;font-weight:700;text-decoration:none;
}
.gp-pj-sister .gp-pj-os a:hover{background:rgba(181,80,42,.16);text-decoration:none}

/* ── 좁은 화면 ───────────────────────────────────────────── */
@media (max-width:820px){
  .gp-content .gp-pj{margin-top:52px}
  .gp-pj-why .gp-pj-grid,
  .gp-pj-cards .gp-pj-grid,
  .gp-pj-feats .gp-pj-grid,
  .gp-pj-sister .gp-pj-grid{grid-template-columns:1fr;gap:20px}
}

/* 아직 공개하지 않은 개발일지. 이 줄은 편집 권한자에게만 보인다. */
.gp-pj-hidden{
  display:inline-block;margin-left:8px;padding:1px 6px;border:1px solid var(--gp-line);
  border-radius:var(--gp-radius);font-size:11px;color:var(--gp-ink-faint);
}