/* ══════════════════════════════════════════════════════════════════
   우리가 EZPRO를 만든 이유 (philosophy.html) — 읽는 페이지
   ──────────────────────────────────────────────────────────────────
   · 상단 바 · 푸터 · 색과 글꼴 토큰은 v6.css 를 그대로 쓴다. 이 파일은 본문만 맡는다.
   · 한 열(본문 폭 약 670px, 한 줄 35~40자). 카드 · 장식 · 애니메이션 없이 글로 읽히게.
   · 강조는 세 가지뿐: 핵심 문장(.ph-key, 파란 세로선) · "개발 중" 안내(.ph-note, 호박색 점) ·
     마지막 세 문장(.ph-future).
   ══════════════════════════════════════════════════════════════════ */
.ph { padding-bottom: 8px; }
.ph-art { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* 머리: PC 는 본문보다 넓게 가운데 정렬 — 제목의 두 구절이 각각 한 줄에 들어간다 */
.ph-head { padding: 88px 0 56px; text-align: center; }
.ph-kicker { font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--blue-t); }
.ph-h1 { margin-top: 20px; font-size: clamp(32px, 2.6vw + 20px, 54px); line-height: 1.26; letter-spacing: -.04em; font-weight: 800; color: var(--text); }
.ph-h1 span { display: block; text-wrap: balance; }
.ph-h1 span:first-child { color: var(--text-2); }
.ph-lead { max-width: 640px; margin: 30px auto 0; font-size: clamp(18px, .35vw + 16.6px, 20px); line-height: 1.8; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
.ph-meta { margin-top: 22px; font-size: 13.5px; color: var(--text-3); }

/* 장 */
.ph-sec { margin-top: 72px; }
.ph-sec.ph-intro { margin-top: 0; padding-top: 48px; border-top: 1px solid var(--line); }
.ph-nw { white-space: nowrap; }
.ph-sec h2 {
  padding-top: 30px; border-top: 1px solid var(--line);
  font-size: clamp(24px, .9vw + 19.5px, 30px); line-height: 1.38; letter-spacing: -.035em; font-weight: 800; color: var(--text); text-wrap: balance;
}
.ph-sec p { margin-top: 22px; font-size: 18px; line-height: 1.9; letter-spacing: -.015em; color: var(--text-2); }
.ph-sec h2 + p { margin-top: 26px; }
.ph-sec p b, .ph-list b { font-weight: 650; color: var(--text); }

/* 핵심 문장 */
.ph-sec .ph-key {
  margin-top: 34px; margin-bottom: 4px; padding: 2px 0 2px 20px; border-left: 3px solid var(--blue);
  font-size: clamp(20px, .55vw + 17.4px, 23px); line-height: 1.6; letter-spacing: -.03em; font-weight: 750; color: var(--text); text-wrap: balance;
}

/* 말로 하는 요청 예시 */
.ph-says { margin: 26px 0 4px; padding: 0; list-style: none; display: grid; gap: 12px; }
.ph-says li { padding: 2px 0 2px 18px; border-left: 2px solid var(--line-3); font-size: 18px; line-height: 1.65; letter-spacing: -.02em; font-weight: 600; color: var(--text); }

/* 목록 */
.ph-list { margin: 24px 0 4px; padding: 0; list-style: none; display: grid; gap: 12px; }
.ph-list li { position: relative; padding-left: 22px; font-size: 18px; line-height: 1.75; letter-spacing: -.015em; color: var(--text-2); }
.ph-list li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 7px; height: 7px; border-radius: 2px; background: var(--blue); }

/* 개발 중 안내 */
.ph-sec .ph-note {
  display: flex; gap: 10px; margin-top: 30px; padding: 14px 16px; border-radius: 12px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2);
  font-size: 15px; line-height: 1.75; letter-spacing: -.01em; color: var(--text-2);
}
.ph-sec .ph-note::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: .66em; border-radius: 50%; background: var(--amber); }
.ph-note b { font-weight: 700; color: var(--text); }

/* 지금 할 수 있는 것 · 만들고 있는 것 */
.ph-now { margin-top: 80px; padding: 28px 28px 26px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.ph-now h2 { font-size: 20px; line-height: 1.4; letter-spacing: -.025em; font-weight: 800; color: var(--text); }
.ph-now-grid { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 32px; }
.ph-now h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 700; color: var(--text-2); }
.ph-now h3::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.ph-now h3.on::before { background: var(--blue-t); }
.ph-now h3.dev::before { background: var(--amber); }
.ph-now ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ph-now li { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.ph-now li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 1.5px; background: var(--text-3); }

/* 마무리 */
.ph-end { margin-top: 88px; }
.ph-future { margin-top: 36px; display: grid; gap: 16px; }
.ph-sec .ph-future p { margin: 0; font-size: clamp(21px, 1vw + 16.5px, 27px); line-height: 1.5; letter-spacing: -.035em; font-weight: 750; color: var(--text); text-wrap: balance; }
.ph-sec .ph-last { margin-top: 36px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--blue-t); }

.ph-cta { max-width: 720px; margin: 64px auto 0; padding: 40px 24px 120px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.ph-cta .btn { height: 52px; padding: 0 22px; font-size: 16px; }
.ph-cta-lk { font-size: 15.5px; font-weight: 600; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-3); }
.ph-cta-lk:hover { color: var(--text); }

@media (min-width: 1100px) {
  .ph-head { margin-inline: -120px; }
}

@media (max-width: 860px) {
  .ph-head { padding: 48px 0 40px; text-align: left; }
  .ph-lead { margin-left: 0; margin-right: 0; max-width: none; text-wrap: pretty; }
  .ph-h1 { margin-top: 16px; font-size: clamp(30px, 6.6vw + 5px, 42px); line-height: 1.28; }
  .ph-lead { margin-top: 24px; }
  .ph-sec { margin-top: 60px; }
  .ph-sec.ph-intro { padding-top: 40px; }
  .ph-sec h2 { padding-top: 26px; font-size: clamp(22px, 2.4vw + 13px, 27px); }
  .ph-sec p, .ph-says li, .ph-list li { font-size: 17px; }
  .ph-now { margin-top: 64px; }
  .ph-end { margin-top: 72px; }
  .ph-cta { margin-top: 48px; padding: 32px 20px 96px; }
}

@media (max-width: 600px) {
  .ph-art { padding: 0 20px; }
  .ph-h1 { font-size: clamp(27px, 7.4vw + 1px, 34px); }
  .ph-kicker { font-size: 13px; }
  .ph-lead { font-size: 17px; line-height: 1.75; }
  .ph-sec { margin-top: 52px; }
  .ph-sec p, .ph-says li, .ph-list li { font-size: 16.5px; line-height: 1.85; }
  .ph-says li, .ph-list li { line-height: 1.7; }
  .ph-sec .ph-key { margin-top: 28px; padding-left: 16px; font-size: 19px; }
  .ph-sec .ph-note { font-size: 14.5px; padding: 12px 14px; }
  .ph-now { margin-top: 56px; padding: 22px 18px 20px; border-radius: 14px; }
  .ph-now-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ph-end { margin-top: 64px; }
  .ph-future { gap: 12px; }
  .ph-sec .ph-last { font-size: 17.5px; }
  .ph-cta .btn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 360px) {
  .ph-art { padding: 0 16px; }
  .ph-cta { padding-left: 16px; padding-right: 16px; }
  .ph-sec p, .ph-says li, .ph-list li { font-size: 16px; }
}