/* 본편 지면.
 *
 * 제품 소개 지면의 모양이다. 읽는 사람이 찾는 것은 문단이 아니라
 * '무엇을 하는 프로그램인가', '어디서 받는가', '무슨 기능이 있는가' 셋이다.
 * 그래서 기능을 카드로 끊어 늘어놓고, 화면 너비에 따라 칸 수가 달라지게 한다.
 *
 * 묶는 일은 includes/main-layout.php 가 한다. 여기서는 묶인 것에 모양만 준다.
 *
 * 폭이 두 가지다.
 *   글줄은 720px 를 넘지 않는다. 한 줄이 길면 다음 줄 첫머리를 놓친다.
 *   카드 격자와 표와 그림은 1120px 까지 벌어진다. 칸이 좁으면 카드가 글자로만 보인다.
 */

/* ── 바탕 ───────────────────────────────────────────────────────── */

body.gp-is-main .gp-content{
  max-width:1120px;
  font-size:16px;
}

.gp-main{display:block}

/* 글줄은 가운데로 모아 좁게 둔다. 격자·표·그림·머리띠만 넓게 쓴다. */
.gp-main-intro > *,
.gp-main-sec > *:not(.gp-main-grid):not(.gp-main-shots):not(.gp-main-tablewrap):not(.gr-cta){
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}

/* ── 마디 ───────────────────────────────────────────────────────── */

.gp-main-sec{margin-top:72px}
.gp-main-sec:first-child{margin-top:8px}

body.gp-is-main .gp-content .gp-main-sec > h2{
  margin:0 auto 28px;
  padding:0;
  border:0;
  text-align:center;
  font-size:clamp(24px,2.6vw,34px);
  letter-spacing:-0.04em;
  line-height:1.25;
}

/* 마디 제목 아래의 짧은 밑줄. 마디가 어디서 시작하는지 눈으로 끊어 준다. */
body.gp-is-main .gp-content .gp-main-sec > h2::after{
  content:"";
  display:block;
  width:44px;height:3px;
  margin:14px auto 0;
  background:var(--gp-accent,#b5502a);
  border-radius:2px;
}

/* 문단 사이의 틈. 테마의 규칙은 .gp-content 의 바로 아래 자식에만 걸리는데,
   여기서는 마디 상자가 한 겹 끼므로 그 규칙이 닿지 않는다. 여기서 준다. */
.gp-main-intro > * + *,
.gp-main-sec > * + *{margin-top:22px}

.gp-main-sec > p,
.gp-main-intro > p{line-height:1.85}

/* ── 기능 카드 격자 ─────────────────────────────────────────────── */

/* 세 칸으로 고정한다. 칸 수를 화면에 맡기면(auto-fit) 폭에 따라 두 칸이 되었다
   네 칸이 되었다 하여 세 줄로 읽히지 않는다. 좁아지면 두 칸, 더 좁아지면 한 칸이다. */
.gp-main-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
  margin:34px 0 0;
  /* 한 줄에 선 카드는 키를 맞춘다. 맞추지 않으면 글이 짧은 카드 아래에
     빈 칸이 생겨 격자가 들쭉날쭉해 보인다. */
  align-items:stretch;
}

/* 카드는 글만 담는다. 그림은 마디 끝의 그림 격자에 모인다.
   카드마다 번호를 앞에 둔다. 아이콘이 없는 자리를 눈으로 잡아 주고,
   기능이 몇 가지인지 세어 볼 수 있게 한다. */
.gp-main-grid{counter-reset:gp-card}

.gp-main-card{
  counter-increment:gp-card;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--gp-line,#e3e4dd);
  border-radius:12px;
  padding:24px 22px 26px;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s;
}
.gp-main-card:hover{
  transform:translateY(-3px);
  border-color:#cfd3c8;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}

body.gp-is-main .gp-content .gp-main-card > h3{
  margin:0;
  font-size:18px;
  letter-spacing:-0.03em;
  line-height:1.35;
  display:flex;
  align-items:center;
  gap:10px;
}
body.gp-is-main .gp-content .gp-main-card > h3::before{
  content:counter(gp-card,decimal-leading-zero);
  flex:0 0 auto;
  min-width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;
  background:var(--gp-accent-2,#2f5d50);
  color:#fff;
  font-size:13px;font-weight:800;letter-spacing:0;
}

body.gp-is-main .gp-content .gp-main-card > p{
  margin:12px 0 0;
  font-size:15px;
  line-height:1.75;
  color:var(--gp-ink-soft,#555);
}

/* 아홉 장을 넘는 카드를 담은 접힌 칸. */
.gp-main-rest{margin-top:26px}
.gp-main-rest > summary{
  list-style:none;
  width:fit-content;
  margin:0 auto;
  padding:9px 20px;
  border:1px solid var(--gp-line,#e3e4dd);
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  color:var(--gp-ink-soft,#555);
  cursor:pointer;
  user-select:none;
}
.gp-main-rest > summary::-webkit-details-marker{display:none}
.gp-main-rest > summary:hover{border-color:var(--gp-ink,#111);color:var(--gp-ink,#111)}
.gp-main-rest[open] > summary{margin-bottom:4px}
.gp-main-rest .gp-main-grid{margin-top:26px}

body.gp-is-main .gp-content .gp-main-card code{font-size:.88em}

/* ── 그림 격자 ──────────────────────────────────────────────────── */

/* 화면 그림은 제 가로세로 비 그대로 둔다. 자르거나 늘이지 않는다.
 *
 * 격자가 아니라 단(column)으로 쌓는다. 그림의 키가 제각각이라 격자에 담으면
 * 짧은 그림 아래에 빈 칸이 크게 남는다. 단으로 쌓으면 짧은 그림 밑으로 다음
 * 그림이 바로 올라붙는다. 단 너비를 340px 로 주면 화면이 넓을수록 단이 늘어난다.
 */
.gp-main-shots{
  columns:340px;
  column-gap:24px;
  margin:34px 0 0;
}
body.gp-is-main .gp-content .gp-main-shots figure{
  margin:0 0 28px;
  break-inside:avoid;       /* 그림과 그 설명이 단을 넘어가며 잘리지 않게 한다 */
}
body.gp-is-main .gp-content .gp-main-shots img{
  width:100%;height:auto;
  border-radius:10px;
  border:1px solid var(--gp-line,#e3e4dd);
  background:#eef0ea;
}
body.gp-is-main .gp-content .gp-main-shots figcaption{
  margin-top:10px;
  font-size:13px;
  line-height:1.6;
  color:var(--gp-ink-faint,#8a8a85);
  text-align:center;
}

/* 그림이 하나뿐이면 단으로 나누지 않고 가운데에 크게 놓는다.
   단이 셋인데 그림이 하나면 왼쪽 끝에 작게 붙고 오른쪽이 비어 버린다. */
.gp-main-shots:has(> figure:only-child){columns:auto}
.gp-main-shots:has(> figure:only-child) figure{max-width:880px;margin-inline:auto}

/* ── 머리띠와 배지 ──────────────────────────────────────────────── */

body.gp-is-main .gp-content .gr-cta{
  margin:32px auto 0;
  max-width:820px;
  padding:22px 24px;
  border-radius:12px;
  background:var(--gp-accent,#b5502a);
  color:#fff;
  font-size:17px;
  font-weight:800;
  line-height:1.6;
  text-align:center;
}

/* 배지는 글줄 칸 안에서 가운데에 선다.
   inline-block 으로 두면 좌우 auto 여백이 먹지 않아 지면 왼쪽 끝에 붙는다.
   그래서 블록으로 두고 너비를 글자 길이에 맞춘다. */
body.gp-is-main .gp-content p.gr-badge{
  display:block;
  width:fit-content;
  margin:24px auto 0;
  padding:8px 16px;
  border-radius:999px;
  background:var(--gp-accent-2,#2f5d50);
  color:#fff;
  font-size:13px;
  font-weight:700;
  text-align:center;
}

body.gp-is-main .gp-content .gp-txt-lead{
  font-size:20px;
  font-weight:700;
  line-height:1.6;
  letter-spacing:-0.01em;
  color:var(--gp-ink,#111);
}

/* ── 표 ─────────────────────────────────────────────────────────── */

/* 좁은 화면에서 표만 옆으로 밀리게 한다. 넘침은 표가 아니라 이 상자가 받는다. */
.gp-main-tablewrap{
  overflow-x:auto;
  max-width:1120px;
  margin:28px auto 0;
}

body.gp-is-main .gp-content table{
  width:100%;
  min-width:520px;          /* 이보다 좁아지면 칸이 뭉개진다. 밀어서 본다 */
  margin:0;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--gp-line,#e3e4dd);
  border-radius:12px;
  font-size:15px;
}
body.gp-is-main .gp-content table th,
body.gp-is-main .gp-content table td{
  border:0;
  border-bottom:1px solid var(--gp-line,#e3e4dd);
  padding:12px 14px;
  text-align:left;
  vertical-align:top;
  background:#fff;
}
body.gp-is-main .gp-content table thead th{
  background:var(--gp-accent-2,#2f5d50);
  color:#fff;
  font-weight:700;
  white-space:nowrap;
}
body.gp-is-main .gp-content table tr:last-child td{border-bottom:0}

/* 이름과 값을 나란히 적는 표는 첫 칸을 이름표로 본다. */
body.gp-is-main .gp-content table.gr-info thead{display:none}
body.gp-is-main .gp-content table.gr-info td:first-child{
  width:8em;
  white-space:nowrap;
  background:#f3f5f1;
  color:var(--gp-accent-2,#2f5d50);
  font-weight:700;
}

/* 견주는 표는 우리 쪽 칸을 강조한다. */
body.gp-is-main .gp-content table.gr-cmp td:first-child{background:#f7f8f3;font-weight:700;width:9em}
body.gp-is-main .gp-content table.gr-cmp thead th:nth-child(2){background:var(--gp-accent,#b5502a)}
body.gp-is-main .gp-content table.gr-cmp td:nth-child(2){background:#fbf1ec;font-weight:600}

/* 파일 목록은 이름이 길어 줄바꿈을 허락한다. */
body.gp-is-main .gp-content table.gr-dl td:first-child{
  font-family:Consolas,"D2Coding",monospace;
  font-size:13px;
  word-break:break-all;
}

/* ── 좁은 화면 ──────────────────────────────────────────────────── */

@media (max-width:900px){
  .gp-main-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
}

@media (max-width:640px){
  .gp-main-sec{margin-top:52px}
  .gp-main-grid{grid-template-columns:1fr;gap:20px}
  .gp-main-shots{columns:auto}
  body.gp-is-main .gp-content .gr-cta{padding:18px;font-size:15px}
  body.gp-is-main .gp-content .gp-txt-lead{font-size:17px}
  body.gp-is-main .gp-content table{font-size:14px}
}

/* 움직임을 줄여 달라고 한 사람에게는 카드가 뜨지 않는다. */
@media (prefers-reduced-motion:reduce){
  .gp-main-card{transition:none}
  .gp-main-card:hover{transform:none}
}