/* ============================================================
   철학 · 비전 (회사소개)
   · 공통 제목 · 여백 · 대표 사진은 ../research/research.css 를 씀
   · 번호 · 영문 제목을 왼쪽에 고정하고 오른쪽에 내용을 선으로 나눔 (미션 / 비전 / 핵심가치 / 웰니스)
   ============================================================ */

/* 제목 — 한 줄 헤드라인 */
.ph-body .page-title b { color: var(--r-g); }

/* 마무리 사진 띠가 없어 푸터 위 여백을 따로 둠 */
.ph-body .r-main { padding-bottom: 140px; }
@media (max-width: 1920px) { .ph-body .r-main { padding-bottom: 120px; } }
@media (max-width: 1024px) { .ph-body .r-main { padding-bottom: 80px; } }

/* ---------- 대표 사진 위 카피.
   배너 비율은 연구·품질 페이지와 동일하게 공통값(데스크톱 32:11 / 모바일 4:3)을 씁니다. ---------- */
/* 배너 왼쪽 그늘(그라데이션) 사용 안 함 */
.ph-hero .r-hero__img--copy::after { content: none; }
/* 기본 강조색(연두 #6fd37a)은 밝은 사진 위에서 묻혀 제목 전체를 흰색으로 */
.ph-hero .r-hero__ttl b { color: #fff; }
/* 로고 자리에 들어가는 영문 사명.
   제목(굵은 한글)은 글자 자체의 좌측 여백이 거의 없어 더 왼쪽에서 시작해 보입니다.
   위아래 작은 글은 2px 안으로 넣어 세로 기준선을 눈에 맞춥니다. */
.ph-hero__en { padding-left: 2px; font-size: 19px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.4; color: rgba(255, 255, 255, 0.92); }
.ph-hero .r-hero__ttl { margin-top: 18px; font-size: clamp(36px, 3vw, 54px); line-height: 1.22; }
.ph-hero .r-hero__desc { max-width: 900px; margin-top: 22px; padding-left: 2px; font-size: 19px; line-height: 1.75; }
@media (max-width: 1024px) {
  .ph-hero__en { font-size: clamp(12px, 3.4vw, 14px); }
  .ph-hero .r-hero__ttl { margin-top: 19px; font-size: clamp(28px, 8.5vw, 34px); line-height: 1.2; }
  .ph-hero .r-hero__desc { margin-top: 20px; font-size: clamp(16px, 4.19vw, 18px); }
}

/* ---------- 본문 — 왼쪽 제목 고정 목록 ---------- */
.phc-row { display: grid; grid-template-columns: 320px minmax(0, 1fr); column-gap: 80px; padding: 80px 0 100px; border-top: 1px solid var(--r-ink); }
.phc-row:first-child { padding-top: 0; border-top: 0; }   /* 첫 번째(미션)는 대표 사진 바로 아래라 선 없이 */
.phc-side { position: sticky; top: 140px; align-self: start; }
.phc-side__no { font-size: 18px; font-weight: 700; color: var(--r-g); }
.phc-side__en { margin-top: 10px; font-size: 44px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: var(--r-ink); }
.phc-side__ko { margin-top: 10px; font-size: 18px; font-weight: 600; color: var(--r-sub); word-break: keep-all; }
.phc-ttl { font-size: 20px; font-weight: 700; color: var(--r-g); }
.phc-stmt { margin-top: 16px; font-size: 40px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: var(--r-ink); word-break: keep-all; }
.phc-stmt b { color: var(--r-g); }
.phc-txt { margin-top: 24px; font-size: 20px; line-height: 1.8; color: var(--r-txt); word-break: keep-all; }
.phc-txt + .phc-txt { margin-top: 12px; }
.phc-img { margin-top: 48px; border-radius: 24px; overflow: hidden; aspect-ratio: 21 / 9; background: var(--r-soft); }
.phc-img img { width: 100%; height: 100%; object-fit: cover; }
.phc-dirs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; list-style: none; }
.phc-dirs li { display: flex; align-items: center; gap: 16px; padding: 24px 28px; border-radius: 16px; background: var(--r-soft); font-size: 19px; font-weight: 600; color: var(--r-ink); word-break: keep-all; }
.phc-dirs span { font-size: 16px; font-weight: 700; color: var(--r-g); }
/* 핵심가치 — 선 대신 연회색 면 카드 2×2 + 아이콘 */
.phc-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 48px; list-style: none; }
.phc-values li { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; align-content: start; column-gap: 16px; padding: 36px 36px 40px; border-radius: 20px; background: var(--r-soft); }
.phc-values li > div { grid-column: 1 / -1; margin-top: 24px; }
.phc-values__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; font-size: 28px; font-style: normal; color: var(--r-g); font-variation-settings: "FILL" 1; }
.phc-values__name { font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--r-ink); }
.phc-values__ttl { font-size: 22px; font-weight: 700; line-height: 1.45; color: var(--r-ink); word-break: keep-all; }
.phc-values__txt { margin-top: 8px; font-size: 18px; line-height: 1.75; color: var(--r-txt); word-break: keep-all; }

@media (max-width: 1024px) {
  .phc-row { grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding: 48px 0 56px; }
  .phc-row:first-child { padding-top: 0; }
  .phc-side { position: static; }
  .phc-side__en { font-size: 30px; }
  .phc-side__ko { font-size: 15px; }
  .phc-ttl { font-size: 16px; }
  .phc-stmt { font-size: 25px; }
  .phc-txt { margin-top: 16px; font-size: 15px; }
  .phc-img { margin-top: 28px; border-radius: 16px; aspect-ratio: 16 / 10; }
  .phc-dirs { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 28px; }
  .phc-dirs li { padding: 16px 18px; font-size: 15px; }
  .phc-values { grid-template-columns: minmax(0, 1fr); gap: var(--card-gap); margin-top: 28px; }
  .phc-values li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; column-gap: 8px; padding: var(--card-pad); border-radius: var(--card-r); }
  .phc-values li > div { margin-top: 16px; }
  .phc-values__ico { width: 26px; height: 26px; font-size: 14px; }
  .phc-values__name { font-size: 16px; color: var(--r-g); }
  .phc-values__ttl { font-size: 20px; line-height: 1.45; }
  .phc-values__txt { font-size: var(--card-txt); line-height: var(--card-lh); }
}

/* 모바일 배너 — PC 에서는 덮개를 꺼 뒀지만(세로로 긴 모바일 배너에서는
   하늘 위 흰 글자가 읽히지 않습니다) 모바일에서는 위쪽만 어둡게 덮습니다.
   사진도 하트가 글자 뒤에 오지 않도록 하늘 쪽으로 당겨 옵니다. */
@media (max-width: 600px) {
  .ph-hero .r-hero__img--copy::after { content: none; }      /* 덮개 없음 */
  .ph-hero .r-hero__img--copy img { object-position: 29% center; }
}

/* ===== 모바일 철학 섹션 정리 ==============================================
   01 / Mission / 미션 / 초록 소제목 / 큰 문장 이 줄줄이 쌓여 있는데
   영문 라벨(30px)이 정작 중요한 문장(25px)보다 커서 위계가 뒤집혀 있었습니다.
   라벨은 라벨답게 줄이고, 줄바꿈은 화면 폭에 맡깁니다. */
@media (max-width: 1024px) {
  /* 「01 우리가 존재하는 이유」 를 한 줄로 세웁니다.
     번호(.phc-side)와 소제목(.phc-ttl)은 원래 다른 칸에 있어서,
     .phc-main 을 display: contents 로 풀어 같은 줄에 올립니다.
     영문·한글 라벨(Mission·미션)은 모바일에서 뺍니다. */
  .phc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 0;
    border-top: 0;          /* 모바일에서는 구분선 없이 여백으로만 나눕니다 */
  }
  .phc-main { display: contents; }
  /* PC 에서는 번호 칸을 위쪽에 붙여 두지만(align-self: start),
     모바일에서는 소제목과 한 줄에 서므로 글자 밑선을 맞춰야 합니다. */
  .phc-side { align-self: baseline; }
  .phc-side__en,
  .phc-side__ko { display: none; }
  .phc-side__no { font-size: 15px; }
  .phc-ttl { font-size: 15px; }

  /* 나머지는 각각 한 줄을 통째로 */
  .phc-stmt,
  .phc-txt,
  .phc-img,
  .phc-dirs,
  .phc-values { flex: 0 0 100%; }
  .phc-stmt { margin-top: 2px; font-size: 25px; line-height: 1.4; }
  .phc-pcbr { display: none; }   /* PC 용 줄바꿈 — 모바일에서는 폭에 맡깁니다 */

  .phc-txt { margin-top: 16px; font-size: 16px; line-height: 1.7; }
}

/* 태블릿 (601~1024) */
@media (min-width: 601px) and (max-width: 1024px) {
  .phc-side__no,
  .phc-ttl { font-size: 17px; }
  .phc-stmt { font-size: 28px; }   /* 모바일 25 · PC 40 사이 */
  .phc-txt { margin-top: 18px; font-size: 17.5px; }
  .phc-values li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; }
  .phc-values__ico { width: 30px; height: 30px; font-size: 16px; }
  .phc-values__name { font-size: 17px; }
  .phc-values__ttl { font-size: 24px; }
  /* 사진 위 카피도 품질 페이지 배너와 같은 크기로 */
  .ph-hero .r-hero__ttl { font-size: 40px; line-height: 1.15; }
  .ph-hero .r-hero__desc { margin-top: 16px; font-size: 18px; }
}

/* ===== 휴대폰 — 모서리 둥글기를 한 단계 줄임 =============================
   화면이 작아지면 같은 반지름도 상대적으로 더 둥글어 보입니다.
   24→18 · 20→16 · 18→14 · 16→13 · 14→12 · 12→10 · 10→8 로 한 단계씩.
   태블릿(601px 이상)과 PC 는 그대로입니다. */@media (max-width: 600px) {
  .phc-img { border-radius: 13px; }
}

/* ===== 본문은 휴대폰 · 태블릿에서 최소 16px ==============================
   읽는 글(문장)이 15px 이하로 내려가 있던 곳을 16px 로 올립니다.
   분류 · 번호 · 안내문 같은 '라벨'은 본문이 아니라 그대로 둡니다. */@media (max-width: 1024px) {
  .phc-txt { font-size: 16px; }
  .phc-dirs li { font-size: 16px; }
}