/* 공간결 내용 페이지 공용 (lo9088 제작 예시) — 2026-11-10 (최부장님 지시)
   모든 규칙은 .gyp 안으로만 적용된다. */
.gyp {
  --plaster: #dcded7;
  --paper: #eeefea;
  --ink: #161b1a;
  --moss: #24332d;
  --chalk: #2b50e0;
  --soft: rgba(22, 27, 26, .64);
  --rule: rgba(22, 27, 26, .16);
  --pad: clamp(20px, 5.5vw, 80px);
  --disp: 'Hahmlet', 'Noto Serif KR', serif;
  --mono: 'IBM Plex Mono', 'Pretendard Variable', monospace;
  color: var(--ink);
  font-family: 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  padding-bottom: clamp(70px, 9vw, 130px);
}
.gyp *, .gyp *::before, .gyp *::after { box-sizing: border-box; }
.gyp img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gyp .gyp-wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad); }
.gyp .gyp-lead {
  margin: clamp(50px, 6vw, 90px) 0 clamp(50px, 7vw, 100px);
  max-width: 980px;
  font-family: var(--disp); font-weight: 300;
  font-size: clamp(25px, 3vw, 42px); line-height: 1.45; letter-spacing: -.03em;
}
.gyp .gyp-lead::before { content: ''; display: block; width: 100%; max-width: 180px; height: 2px; margin-bottom: 28px; background: var(--chalk); }
.gyp h2 {
  margin: 0 0 18px; font-family: var(--disp); font-weight: 400;
  font-size: clamp(23px, 2.2vw, 32px); letter-spacing: -.025em; line-height: 1.35; color: var(--ink);
}
.gyp p { margin: 0; font-size: 17px; line-height: 1.85; color: var(--soft); }

.gyp .gyp-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-bottom: clamp(60px, 8vw, 110px); }
.gyp .gyp-split.is-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.gyp .gyp-split.is-flip figure { order: 2; }
.gyp figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--plaster); }

.gyp .gyp-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.gyp .gyp-rows li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 10px 32px; padding: clamp(20px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--rule); }
.gyp .gyp-rows h2, .gyp .gyp-rows h3 { margin: 0; font-family: var(--disp); font-weight: 400; font-size: clamp(20px, 1.9vw, 25px); letter-spacing: -.02em; color: var(--ink); }
.gyp .gyp-rows p { font-size: 16px; }
.gyp .gyp-rows small { display: block; margin-top: 6px; font-family: var(--mono); font-size: 13px; color: var(--ink); }

.gyp .gyp-table { width: 100%; border-collapse: collapse; }
.gyp .gyp-table th, .gyp .gyp-table td { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--rule); text-align: left; font-size: 16px; font-weight: 400; }
.gyp .gyp-table thead th { font-size: 13px; color: var(--soft); border-bottom: 1px solid var(--ink); }
.gyp .gyp-table td.n { font-family: var(--mono); font-size: 14px; white-space: nowrap; }
.gyp .gyp-scroll { overflow-x: auto; }

.gyp .gyp-next {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  margin-top: clamp(60px, 8vw, 100px); padding: clamp(24px, 3vw, 38px) clamp(22px, 3vw, 40px);
  background: var(--moss); color: #f1f2ec; text-decoration: none;
  font-family: var(--disp); font-weight: 300; font-size: clamp(22px, 2.5vw, 34px); letter-spacing: -.02em;
  transition: background .3s;
}
.gyp .gyp-next:hover { background: var(--chalk); }
.gyp .gyp-next span { font-family: inherit; font-size: 16px; font-weight: 400; white-space: nowrap; }
.gyp a:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; }

@media (max-width: 860px) {
  .gyp .gyp-split, .gyp .gyp-split.is-flip { grid-template-columns: minmax(0, 1fr); }
  .gyp .gyp-split.is-flip figure { order: 0; }
  .gyp .gyp-rows li { grid-template-columns: minmax(0, 1fr); }
  .gyp .gyp-next { flex-direction: column; gap: 6px; }
  .gyp p { font-size: 16px; }
}