/* edu-page-01.css */

/* page-01 인라인 SVG가 참조하는 변수 */
article#p-why {
  --line-strong: rgba(20, 30, 60, 0.14);
  --text-1: #1a2138;
  --text-2: #4d566f;
  --text-3: #76809a;
  --mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
  --sans: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
}
article#p-why .takeaway-block { max-width: 780px; margin: 0 0 18px; }
article#p-why .takeaway-block p { margin: 0 0 8px; line-height: 1.6; color: var(--text-2); font-size: 16.5px; }
article#p-why .takeaway-block p:last-child { margin-bottom: 0; }
article#p-why .takeaway-block .tk-key {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-1);
  line-height: 1.45;
  margin: 0px 0 8px;
}
article#p-why .takeaway-block .tk-limit { font-size: 16px; color: var(--text-3); margin-top: 0px; }
article#p-why .takeaway-block .tk-graph {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-1);
  margin-top: 14px;
}
article#p-why .takeaway-block .tk-graph em { font-style: italic; color: var(--text-1); }

/* 섹션 헤더 — ① Vector RAG / ② Reranking / ③ 차이 3가지 공통 */
article#p-why .sec-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 46px;
}
article#p-why .sec-head--first { margin-top: 26px; }
article#p-why .sec-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
article#p-why .sec-label {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
}
article#p-why .sec-lead {
  margin-bottom: 10px;
  margin-top: 6px;
}
article#p-why .sec-num--blue,
article#p-why .sec-label--blue { color: #1D4ED8; }
article#p-why .sec-num--blue { background: #1D4ED8; color: #fff; }
article#p-why .sec-num--amber,
article#p-why .sec-label--amber { color: #B45309; }
article#p-why .sec-num--amber { background: #B45309; color: #fff; }
article#p-why .sec-num--teal,
article#p-why .sec-label--teal { color: #0E8A82; }
article#p-why .sec-num--teal { background: #0E8A82; color: #fff; }

/* 맺음 존 — SAIP 설계 원칙 2분할 (흰 배경 + 컬러 박스) */
article#p-why .capstone-zone {
  padding: 0;
  background: transparent;
}
article#p-why .capstone-head {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-1);
}
article#p-why .capstone-sub {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-2);
}
article#p-why .capstone-sub strong {
  font-weight: 700;
  color: var(--text-1);
}
article#p-why .capstone-banner {
  margin: 28px auto 0;
  padding: 22px 32px 24px;
  max-width: 920px;
  text-align: center;
  line-height: 1.85;
}
article#p-why .capstone-banner-lead {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
article#p-why .capstone-banner-lead .hl-core {
  color: var(--accent);
  font-weight: 800;
}
article#p-why .capstone-banner-lead .hl-open {
  color: var(--warn);
  font-weight: 800;
}
article#p-why .capstone-banner-sub {
  font-size: 16px;
  color: var(--text-muted);
  margin-top: 10px;
}
article#p-why .capstone-banner-sub b {
  font-weight: 700;
  color: var(--text);
}
article#p-why .capstone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
article#p-why .capstone-panel {
  border-radius: 10px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
  overflow: hidden;
}
/* 좌 — 검정 박스 */
article#p-why .capstone-panel--fixed {
  background: #1a1a1a;
  border: none;
  color: #fff;
  --cap-panel-text: #FFFFFF;
  --cap-panel-muted: rgba(255, 255, 255, 0.62);
  --cap-panel-line: rgba(255, 255, 255, 0.12);
}
/* 우 — 밝은 블루 박스 */
article#p-why .capstone-panel--ai {
  background: linear-gradient(160deg, #6B9EF0 0%, #5088E8 50%, #4A7FDB 100%);
  border: none;
  color: #fff;
  --cap-panel-text: #FFFFFF;
  --cap-panel-muted: rgba(255, 255, 255, 0.78);
  --cap-panel-line: rgba(255, 255, 255, 0.22);
}
article#p-why .capstone-panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cap-panel-line);
}
article#p-why .capstone-panel-icon {
  flex: 0 0 auto;
  font-size: 32px;
  line-height: 1;
}
article#p-why .capstone-panel-head-text {
  flex: 1;
  min-width: 0;
}
article#p-why .capstone-panel-title {
  margin: 0 0 3px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  color: #FFFFFF;
}
article#p-why .capstone-panel-tag {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--cap-panel-muted);
  line-height: 1.45;
}
article#p-why .capstone-list {
  margin: 0;
  padding: 0 0 0 18px;
  flex: 1;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--cap-panel-muted);
}
article#p-why .capstone-panel--fixed .capstone-list { color: rgba(255, 255, 255, 0.72); }
article#p-why .capstone-panel--ai .capstone-list { color: rgba(255, 255, 255, 0.88); }
article#p-why .capstone-list li { margin-bottom: 6px; }
article#p-why .capstone-list li:last-child { margin-bottom: 0; }
article#p-why .capstone-panel-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--cap-panel-line);
}
article#p-why .capstone-panel-foot-lead {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--cap-panel-text);
}
article#p-why .capstone-panel-foot-sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--cap-panel-muted);
}
@media (max-width: 900px) {
  article#p-why .capstone-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  article#p-why .capstone-panel { min-height: 0; }
}