/* ===== Post Care 페이지(.pl-pc, /post-care/) — 2026-10-19 다른 작업자 시안을 사이트 규격으로 옮겨 preview/postcare-drafts 에서 다듬은 것.
   빌드가 이 파일 + 관련 소식 CSS 를 합쳐 assets/css/postcare.css 로(postcare.css()).
   규격: 본문 폭 1300(최대 1444 − 좌우 72, 사이트 섹션 최대폭), 섹션 제목 30/700/1.4(모바일 24), 서브캡션 Inter italic 14 #999(모바일 12),
   글자색 4단계(2026-10-19 정리): #1d1d1d 제목 · 이름 · 라벨 / #333 본문 · 설명 · 표 내용 / #999 캡션 · 주석 · 기간 · 보조 정보 / #686868 은 숫자 칸 라벨만(의료진 페이지 통계와 같음).
   본문 15/1.68 #333(모바일 14), 선 #1d1d1d · 헤어라인 #e5e5e5, 회색 칸 #f2f2f2, 모서리·그림자 없음, 분기점 959 하나.
   아래 '기록'은 시술 상세 '관련 소식'(.pl-relnews, B 펼침)을 그대로 씀 — 그 CSS 는 make.py 가 program/_common.css 에서 가져옴. */
.pl-pc { width: 100%; max-width: 1444px; margin: 0 auto; padding: 100px 72px 200px; box-sizing: border-box; color: #1d1d1d; }   /* 2026-10-19 사용자: 1444 로 잡은 페이지(의료진 · 문의 · 주의사항 등)처럼 — 1344 → 1444, 본문 폭 1300 */
.pl-pc + .pl-relnews { max-width: 1444px; }   /* 아래 기록(관련 소식)도 같은 폭으로(시술 상세에서는 1344 그대로) */
.pl-pc *, .pl-pc *::before, .pl-pc *::after { box-sizing: border-box; }
.pl-pc :where(p, h2, h3, h4, ul, ol, li, figure) { margin: 0; padding: 0; }   /* :where = 특이도 0 — 아래 각 칸의 여백이 이김 */
.pl-pc :where(ul, ol) { list-style: none; }
.pl-pc__sec + .pl-pc__sec { margin-top: 200px; }
.pl-pc__sec + .pl-pc__brand { margin-top: 120px; }   /* 2026-10-19 사용자: 200 → 120 → 200 → 다시 120 */
#pc-lrp.pl-pc__brand { margin-top: 200px; }   /* 2026-10-19 사용자: 05(라로슈포제)만 200 */

/* ---- 두 칸: 글 | 사진 (rev = 사진 | 글) ---- */
.pl-pc__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; align-items: center; }
.pl-pc__split--top { align-items: start; }
.pl-pc__split--rev .pl-pc__media { order: -1; }
.pl-pc__text { min-width: 0; }

/* 번호 줄: 검은 선 위 · 왼쪽 번호, 오른쪽 영문 라벨 */
.pl-pc__kicker { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; border-top: 1px solid #1d1d1d; padding-top: 14px; margin-bottom: 48px;   /* 01~03(브랜드 번호 줄은 12) — 2026-10-19 68 로 했다가 사용자 '다시 48' */
  font-family: var(--font-en); font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 0; }   /* 2026-10-19 사용자 500 → 400 */
.pl-pc__no { min-width: 0; }   /* 2026-10-19 사용자: '01. Post-Treatment Skin Is Different' 를 번호 줄에(제목 아래 회색 영문은 뺌) */
.pl-pc__kicker-r { flex: none; color: #999; font-style: italic; font-weight: 400; }
.pl-pc__count { margin-left: .5em; }   /* 브랜드 번호 줄 '04. SkinCeuticals 7 PRODUCTS' — 같은 글자, 한 칸 띄움 */
.pl-pc__brand .pl-pc__kicker { border-top: 0; padding-top: 0; margin-bottom: 12px; }   /* 2026-10-19 사용자 '04 위에 보더 제거'(05 도 같게), 아래 12 는 브랜드 번호 줄만(01~03 은 48) */
.pl-pc__title { font-size: 30px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: #1d1d1d; word-break: keep-all; text-wrap: balance; }
.pl-pc__body { margin-top: 48px; }   /* 2026-10-19 여백 정리: 큰 제목 → 내용 48(모바일 28) 통일 */
.pl-pc__body p { font-size: 15px; line-height: 1.68; color: #333; word-break: keep-all; overflow-wrap: break-word; }
.pl-pc__body p + p { margin-top: 18px; }
.pl-pc__body strong { font-weight: 600; color: #1d1d1d; }
.pl-pc__body .pl-pc__lead { margin-top: 28px; margin-bottom: 10px; font-size: 16px; font-weight: 600; line-height: 1.6; color: #1d1d1d; }
.pl-pc__more { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 48px; padding-bottom: 5px;
  font-family: var(--font-en); font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; color: #1d1d1d; text-decoration: none; }
.pl-pc__more::after { content: ''; width: 8px; height: 8px; background: url('../img/sub_black_arrow.png') no-repeat center / contain; }
/* 밑줄 = 회색(#e5e5e5) 2px(2026-10-19 사용자 '2px 로'), 올리면 검은 선이 왼쪽부터 차오름(2026-10-19 사용자 — 메인·프로그램 카드 이름 밑줄과 같은 0.3s ease-out) */
.pl-pc__more { background: linear-gradient(#e5e5e5, #e5e5e5) left bottom / 100% 2px no-repeat; }
.pl-pc__more::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #1d1d1d; transform: scaleX(0); transform-origin: left; transition: transform .3s ease-out; }
.pl-pc__more:hover { color: #1d1d1d; text-decoration: none; }
.pl-pc__more:hover::before, .pl-pc__more:focus-visible::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .pl-pc__more::before { transition: none; } }

/* ---- 사진 자리: 사진이 없으면 회색 칸 + 왼쪽 위 작은 이름표(어떤 사진이 들어갈 자리인지) ---- */
.pl-pc__fig { position: relative; min-width: 0; }
.pl-pc__frame { position: relative; width: 100%; max-width: 100%; aspect-ratio: var(--r, 4/5); background: #f2f2f2; overflow: hidden; }
.pl-pc__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pl-pc__slot { position: absolute; left: 16px; top: 14px; font-family: var(--font-en); font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.04em; color: #999; }
.pl-pc__slot b { font-family: 'Pretendard', sans-serif; font-weight: 500; letter-spacing: 0; }
.pl-pc__cap { margin-top: 14px; font-size: 12px; line-height: 1.5; color: #999; text-align: right; }
.pl-pc__cap strong { font-weight: 600; color: #1d1d1d; }

/* ---- 숫자 두 칸(의료진 페이지 통계와 같은 말투: 위·아래 검은 선, 칸 사이 세로선 위아래 18 띄움, 라벨이 숫자 위) ---- */
.pl-pc__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 68px; border-top: 1px solid #1d1d1d; border-bottom: 1px solid #1d1d1d; }   /* 2026-10-19 사용자 48 → 68 */
.pl-pc__stat { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px 28px 28px; }
.pl-pc__stat:first-child { padding-left: 0; }
.pl-pc__stat + .pl-pc__stat::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: #1d1d1d; }
.pl-pc__stat-label { font-size: 13px; font-weight: 500; line-height: 1.4; color: #686868; }
.pl-pc__stat-num { font-family: var(--font-en); font-size: 42px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: #1d1d1d; font-variant-numeric: tabular-nums; }
.pl-pc__stat-num small { margin-left: 3px; font-family: 'Pretendard', sans-serif; font-size: 18px; font-weight: 500; letter-spacing: 0; }
.pl-pc__note { margin-top: 18px; font-size: 12px; line-height: 1.5; color: #999; }

/* ---- 선별 기준: 세 줄 제목 → 네 칸(위 검은 선) ---- */
.pl-pc__criteria { margin-top: 160px; }   /* 2026-10-19 사용자 160 → 200 → 다시 160 */
.pl-pc__ctitle { font-size: 24px; font-weight: 600; line-height: 1.5; letter-spacing: -0.02em; color: #1d1d1d; word-break: keep-all; }
.pl-pc__checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; margin-top: 48px; }
.pl-pc__checks li { border-top: 1px solid #1d1d1d; padding-top: 16px; }
.pl-pc__check-no { display: block; font-family: var(--font-en); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.04em; color: #999; }   /* 2026-10-19 사용자 회색(사이트 캡션 #999) — 18 로 했다가 다시 12, 작은 영문 라벨 500 · .04em 통일 */
.pl-pc__checks strong { display: block; margin-top: 36px; font-size: 16px; font-weight: 600; line-height: 1.45; letter-spacing: -0.02em; color: #1d1d1d; word-break: keep-all; }
.pl-pc__checks p { margin-top: 12px; font-size: 14px; line-height: 1.68; color: #333; word-break: keep-all; }

/* ---- 브랜드 구역 ---- */
.pl-pc__lineup { margin-bottom: 200px; }   /* 2026-10-19 사용자 96 → 200 */

/* 회복 단계 = 한 줄 범례(2026-10-19 사용자 '심플하게' — 시간선 · 눈금 · 칸 나눔 뺌): PHASE 1 진정 · Day 0–3   PHASE 2 …   ALL PHASES 전 기간 사용 */
.pl-pc__phases { display: flex; flex-wrap: wrap; gap: 10px 36px; margin-top: 48px; }   /* 2026-10-19 사용자: 범례는 제품 목록 쪽에 붙게 — 제목 → 48 → 범례 → 12 → 목록 선 */
.pl-pc__phases li { display: flex; align-items: baseline; gap: 8px; font-size: 12px; line-height: 1.4; color: #1d1d1d; white-space: nowrap; }
.pl-pc__ph-label { font-family: var(--font-en); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; }
.pl-pc__ph-kr { font-weight: 500; }
.pl-pc__ph-day { margin-left: -2px; font-family: var(--font-en); font-weight: 500; color: #999; }   /* 2026-10-19 사용자 400 → 500(표 머리 기간과 같게) */
.pl-pc__ph-day::before { content: '· '; }

/* 제품: 2열 · 줄마다 헤어라인 */
.pl-pc__products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; margin-top: 12px; border-top: 1px solid #1d1d1d; }
.pl-pc__prod { display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: 28px;   /* 사진 112 → 160(2026-10-19 사용자 '더 키워') */
  align-items: start; padding: 32px 0; border-bottom: 1px solid #e5e5e5; }
.pl-pc__prod .pl-pc__frame { aspect-ratio: 1 / 1; }
.pl-pc__prod .pl-pc__frame img { object-fit: contain; mix-blend-mode: multiply; }   /* 2026-10-19 제품 사진(흰 바탕)이 회색 칸 #f2f2f2 에 녹아들게 — 사진 없는 칸과 같은 회색 타일 */
.pl-pc__prod .pl-pc__slot { left: 8px; top: 8px; right: 8px; font-size: 10px; }
.pl-pc__pphase { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 12px; line-height: 1.3; color: #999; }   /* 2026-10-19 사용자: 막대(pbar) 아래로 글자가 내려오게 */
.pl-pc__pphase span[lang="en"] { font-family: var(--font-en); font-weight: 500; letter-spacing: 0.04em; color: #1d1d1d; }
.pl-pc__pbar { display: inline-flex; gap: 2px; }
.pl-pc__pbar i { display: block; width: 12px; height: 2px; background: #e5e5e5; }
.pl-pc__pbar i.on { background: #1d1d1d; }
.pl-pc__pname { margin-top: 12px; font-family: var(--font-en); font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; color: #1d1d1d; }
.pl-pc__pkr { margin-top: 4px; font-size: 12px; line-height: 1.5; color: #999; }
.pl-pc__pdesc { margin-top: 16px; font-size: 14px; line-height: 1.68; color: #333; word-break: keep-all; }

/* 시술별 가이드 표 */
.pl-pc__guide { margin-top: 160px; }   /* 2026-10-19 여백 정리: 03 본문 → 선별 기준(160)과 같게 */
.pl-pc__glabel { margin-bottom: 12px; font-family: var(--font-en); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: #1d1d1d; }
.pl-pc__gtitle { font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; color: #1d1d1d; }
.pl-pc__gnote { margin-top: 24px; font-size: 12px; line-height: 1.5; color: #999; }
.pl-pc__table-wrap { margin-top: 18px; }
.pl-pc__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pl-pc__table col.c-proc { width: 17%; } .pl-pc__table col.c-ph { width: 20%; } .pl-pc__table col.c-care { width: 23%; }
.pl-pc__table thead th { padding: 16px 20px 14px 0; border-top: 1px solid #1d1d1d; border-bottom: 1px solid #1d1d1d; text-align: left; vertical-align: middle;   /* 2026-10-19 사용자: 가운데 정렬(한 줄 · 두 줄 머리가 세로 가운데) */
  font-size: 14px; font-weight: 500; line-height: 1.4; color: #1d1d1d; }   /* 2026-10-19 글자 점검: 600 → 500(시술 이름 600 과 구분) */
.pl-pc__table thead th span[lang="en"] { font-family: var(--font-en); letter-spacing: 0.04em; }
.pl-pc__table thead th small { display: inline; margin-left: 8px; white-space: nowrap;   /* 2026-10-19 사용자: 한 줄로(기간을 이름 뒤에) */
  font-family: var(--font-en); font-size: 12px; font-weight: 500; color: #999; }
.pl-pc__table tbody th, .pl-pc__table tbody td { padding: 20px 20px 20px 0; border-bottom: 1px solid #e5e5e5; text-align: left; vertical-align: top;
  font-size: 14px; line-height: 1.6; color: #333; word-break: keep-all; }
.pl-pc__table tbody th { font-weight: 600; color: #1d1d1d; }
.pl-pc__table tbody th a { color: inherit; text-decoration: underline; text-decoration-color: #ccc; text-underline-offset: 4px; }
.pl-pc__table tbody th a:hover { text-decoration-color: #1d1d1d; }
.pl-pc__table tbody td.is-care { font-size: 14px; line-height: 1.6; color: #333; padding-right: 0; }
.pl-pc__tdl { display: none; }
.pl-pc__foot { margin-top: 18px; font-size: 12px; line-height: 1.5; color: #999; }

/* 기록(관련 소식) 바로 앞 간격은 .pl-pc 아래 여백(200)이 맡음 */

@media (max-width: 959px) {
  .pl-pc { padding: 40px 20px 100px; }
  .pl-pc__sec + .pl-pc__sec { margin-top: 100px; }
  .pl-pc__sec + .pl-pc__brand { margin-top: 64px; }
  #pc-lrp.pl-pc__brand { margin-top: 100px; }
  .pl-pc__split { grid-template-columns: minmax(0, 1fr); row-gap: 38px; }
  .pl-pc__split--rev .pl-pc__media { order: 0; }
  .pl-pc__split--mo-media .pl-pc__media { order: -1; }
  .pl-pc__kicker { margin-bottom: 28px; font-size: 13px; }
  .pl-pc__brand .pl-pc__kicker { margin-bottom: 12px; }
  .pl-pc__title { font-size: 24px; }
  .pl-pc__body { margin-top: 28px; }
  .pl-pc__body p { font-size: 14px; }
  .pl-pc__body p + p { margin-top: 14px; }
  .pl-pc__body .pl-pc__lead { margin-top: 22px; margin-bottom: 6px; font-size: 15px; }
  .pl-pc__more { margin-top: 32px; }
  .pl-pc__slot { left: 12px; top: 10px; }
  .pl-pc__cap { margin-top: 10px; font-size: 12px; }

  .pl-pc__stats { margin-top: 38px; }
  .pl-pc__stat { gap: 10px; padding: 22px 16px 20px; }
  .pl-pc__stat-label { font-size: 12px; }
  .pl-pc__stat-num { font-size: 30px; }
  .pl-pc__stat-num small { font-size: 14px; }
  .pl-pc__stat + .pl-pc__stat::before { top: 14px; bottom: 14px; }

  .pl-pc__criteria { margin-top: 80px; }
  .pl-pc__ctitle { font-size: 19px; }
  .pl-pc__checks { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: 28px; }
  .pl-pc__checks li { padding: 14px 0 26px; }
  .pl-pc__checks strong { margin-top: 16px; font-size: 16px; }
  .pl-pc__checks p { margin-top: 8px; font-size: 14px; }

  .pl-pc__lineup { margin-bottom: 100px; }
  .pl-pc__lineup .pl-pc__frame { aspect-ratio: 16 / 9; }
  .pl-pc__phases { gap: 8px 24px; margin-top: 28px; }
  .pl-pc__phases li { gap: 6px; font-size: 12px; }
  .pl-pc__products { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
  .pl-pc__prod { grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; padding: 24px 0; }
  .pl-pc__pname { margin-top: 10px; font-size: 16px; }
  .pl-pc__pkr { font-size: 12px; }
  .pl-pc__pdesc { margin-top: 12px; font-size: 14px; }

  /* 표 → 시술마다 한 덩어리(단계 이름 | 제품) */
  .pl-pc__guide { margin-top: 80px; }
  .pl-pc__glabel { margin-bottom: 12px; font-size: 12px; }
  .pl-pc__gtitle { font-size: 18px; }
  .pl-pc__gnote { margin-top: 16px; font-size: 12px; }
  .pl-pc__table, .pl-pc__table tbody, .pl-pc__table tr, .pl-pc__table tbody th, .pl-pc__table tbody td { display: block; width: 100%; }
  .pl-pc__table colgroup { display: none; }
  .pl-pc__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pl-pc__table tbody { border-top: 1px solid #1d1d1d; }
  .pl-pc__table tbody tr { padding: 20px 0 18px; border-bottom: 1px solid #e5e5e5; }
  .pl-pc__table tbody th, .pl-pc__table tbody td { padding: 0; border: 0; }
  .pl-pc__table tbody th { margin-bottom: 12px; font-size: 15px; }
  .pl-pc__table tbody td { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; padding: 3px 0; font-size: 13px; }
  .pl-pc__tdl { display: block; font-size: 12px; font-weight: 500; line-height: 1.75; letter-spacing: 0.04em; color: #999; }   /* 칸 이름(PHASE 1 · 진정) — 모바일에서만 */
  .pl-pc__table tbody td.is-care { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px dotted #e5e5e5; font-size: 12px; }
}


/* ---- 아래: 관련 소식(.pl-relnews) — assets/css/_src/program/layers/_common.css 에서 빌드가 복사 ---- */
/* ===== 관련 소식 — 2026-10-15 사용자 확정 'B 펼침'(preview/relnews-drafts/variants/k.* 를 .pl-relnews 이름으로 옮김, gen.related_news).
   이전 목록형(2026-10-08)은 대체. 아래 원문 주석의 .rn-k = .pl-relnews. 화살표는 다른 시술 CSS 와 같은 업로드 주소. */
/* 시안 D(k) — 펼친 지면 (.pl-relnews-) · 2026-10-08 '매거진 양식을 서칭해서'
   참고: Fantastic Man 이 호의 펼침면을 보여 주는 방식(글 지면 | 사진 지면 한 덩어리) + 인쇄 피처 오프닝 관례
        (사진 면은 재단선까지, 글 면은 위 제목 · 아래 바이라인, 쪽번호(폴리오)는 바깥 아래 모서리).
   격자 = 02 키닥터 580 | 40 | 580 (1440 에서 x 120–700 · 740–1320). 글 하나 = 펼침면 하나(링크 하나) = 290×387 두 면.
   모든 펼침면 [글|사진] — 사진은 오른쪽, 글 지면·폴리오는 왼쪽(2026-10-12 사용자; 전에는 한 줄 안에서 마주 봄).
   글 지면 = 흰 종이를 위·아래 1px #e5e5e5 선이 잡아 줌(색면 #f9f9f9 는 가격 띠·사진 자리에만 남김). 머리는 고정(sticky)하지 않음.
   테두리·그림자·모서리·확대 없음. */
.pl-relnews { width: 100%; max-width: 1344px; margin: 0 auto; padding: 0 72px 240px; box-sizing: border-box; color: #1d1d1d; }
.pl-relnews *, .pl-relnews *::before, .pl-relnews *::after { box-sizing: border-box; }
.pl-relnews ::selection { background: #1d1d1d; color: #fff; }

/* 이야기 구역 아래 240 → 200 (C 와 같은 규칙, 관련 소식이 바로 뒤에 올 때만) */
@media (min-width: 960px) {
  .detail-story-section:has(+ .pl-relnews) { padding-bottom: 200px; }
}

/* ---- 머리 = C 와 같은 글, 왼쪽 580(x 120–700)에 쌓음 → 68 → 펼침면 ---- */
.pl-relnews__head { width: calc(50% - 20px); margin-bottom: 68px; }
.pl-relnews__tag { margin: 0 0 12px; font-family: var(--font-en); font-size: 14px; font-weight: 400; line-height: 1.6; color: #1d1d1d; word-break: break-word; }   /* = .story-tag */
html[lang="en"] .pl-relnews__tag { display: none; }
.pl-relnews__title { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.4; letter-spacing: 0; color: #1d1d1d; word-break: keep-all; text-wrap: balance; }   /* = 이야기 제목 */
.pl-relnews__title span { display: inline-block; }                  /* 줄이 바뀌면 쉼표 뒤에서만 */
.pl-relnews__desc { margin: 25px 0 0; font-size: 15px; font-weight: 400; line-height: 1.68; letter-spacing: 0; color: #333; word-break: keep-all; }   /* = .story-desc, 제목 아래 25 = .story-title-d */
html[lang="en"] .pl-relnews__desc { word-break: break-word; }

/* ---- 펼침면 격자: 2열 580 · 40, 줄 사이 80 ---- */
.pl-relnews__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 80px; margin: 0; padding: 0; list-style: none; }
.pl-relnews__item { margin: 0; min-width: 0; }

/* 펼침면 = 링크 하나, 두 면 사이 간격 없음(책등 = 사진이 종이에 닿는 자리, 선 없음) */
.pl-relnews__spread { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: 100%; color: inherit; text-decoration: none; }   /* 높이 100% = 한 줄의 두 펼침면 아랫선이 늘 같음 */
.pl-relnews__spread:focus { outline: none; }
.pl-relnews__spread:focus-visible { outline: 1px solid #1d1d1d; outline-offset: 6px; }
/* 마우스·키보드 초점 = 제목에 1px 밑줄(2026-10-12 테두리를 빼면서 '아랫선 채우기' 대신) */
.pl-relnews__spread:hover .pl-relnews__name, .pl-relnews__spread:focus-visible .pl-relnews__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* 사진 면 — 3:4, 재단선까지 꽉(cover). 글이 길어 글 면이 늘어나는 좁은 화면에서는 같이 늘어남 */
.pl-relnews__photo { position: relative; display: block; width: 100%; align-self: stretch; aspect-ratio: 3 / 4; overflow: hidden; background: #f9f9f9; }   /* 폭은 늘 칸 폭(늘어난 높이가 폭을 밀지 않게) */
.pl-relnews__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* 글 면 = 흰 종이(2026-10-12 사용자: 위·아래 선과 쪽번호 뺌). 제목 윗선 = 사진 윗선, 바이라인 마지막 줄 = 사진 아랫선.
   바깥쪽은 글이 칸 끝에 붙고(0), 책등 쪽만 여백(1440 에서 28, 960 에서 20) */
.pl-relnews__type { --pl-relnews-spine: clamp(20px, calc(1.6667vw + 4px), 28px);
  display: flex; flex-direction: column; min-width: 0; padding: 0 var(--pl-relnews-spine) 0 0; background: #fff; }
/* 제목 = 피처 오프닝: 1440 에서 22/600/1.4, 960 에서 18 까지만 줄어듦. 국문 네 줄 · 영문 여섯 줄까지 */
.pl-relnews__name { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-top: -0.22em;   /* 글자 윗선 ≈ 사진 윗선 */
  font-size: clamp(18px, calc(.8333vw + 10px), 22px); font-weight: 600; line-height: 1.4; letter-spacing: 0; color: #1d1d1d;
  word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; }
html[lang="en"] .pl-relnews__name { -webkit-line-clamp: 6; }
/* 바이라인 = .news-meta 14/400 #1d1d1d, 지면 아래로(margin-top auto). 좁으면 '|' 뒤에서만 줄이 바뀜(작성자는 한 덩어리).
   구분자는 작성자 앞 여백(.9em) 안에 있고, 줄 묶음을 왼쪽으로 .9em 당겨 두어 작성자가 줄 맨 앞으로 내려가면 구분자가 잘려 사라짐 */
.pl-relnews__meta { display: block; margin-top: auto; margin-bottom: -0.3em; padding-top: 12px; overflow: hidden;   /* 기준선 ≈ 사진 아랫선 */ font-size: 14px; font-weight: 400; line-height: 1.4; color: #1d1d1d; }
.pl-relnews__row { display: flex; flex-wrap: wrap; margin-left: -.9em; }
.pl-relnews__date, .pl-relnews__by { position: relative; padding-left: .9em; white-space: nowrap; }
.pl-relnews__sep { position: absolute; top: 0; left: 0; width: .9em; text-align: center; }

/* ---- 개수 1 = 02 키닥터 문법: 머리 왼쪽 580, 마지막 줄 = 펼침면 아랫선 | 펼침면 [글|사진] 오른쪽 740–1320 ---- */
.pl-relnews--one .pl-relnews__in { display: grid; grid-template-columns: calc(50% - 20px) minmax(0, 1fr); column-gap: 40px; align-items: end; }
.pl-relnews--one .pl-relnews__head { width: auto; margin-bottom: 0; }
.pl-relnews--one .pl-relnews__grid { grid-template-columns: minmax(0, 1fr); }


/* ---- 모바일: 머리 → 28 → 펼침면 한 줄에 하나(350, 태블릿 최대 640), 사이 28. 방향은 늘 [글|사진] ---- */
@media (max-width: 959px) {
  .pl-relnews { padding: 0 20px 100px; }
  .pl-relnews__in, .pl-relnews--one .pl-relnews__in { display: block; max-width: 640px; }
  .pl-relnews__head, .pl-relnews--one .pl-relnews__head { width: auto; margin-bottom: 28px; }
  .pl-relnews__tag { margin-bottom: 9px; font-size: 12px; }
  .pl-relnews__title { font-size: 23px; }
  .pl-relnews__desc { margin-top: 20px; font-size: 14px; }
  .pl-relnews__grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .pl-relnews__type { padding: 0 16px 0 0; }
  .pl-relnews__name { font-size: 15px; }                             /* 국문 네 줄 · 영문 여섯 줄까지(위와 같음) */
  .pl-relnews__meta { padding-top: 10px; font-size: 12px; }
  /* 2026-10-13 사용자 "모바일 날짜·작성자 한 줄로" — 작성자를 둘째 줄로 내리던 규칙을 뺌: PC 처럼 '날짜 | by 작성자' 한 줄,
     칸이 좁아 안 들어가면 작성자만 다음 줄(줄머리 '|' 는 칸 밖으로 밀려 안 보임) */
}

/* ===== 2026-10-13 사용자 — 날짜 | 작성자를 제목 위로, 마우스·포커스 밑줄 2px.
   글 지면 = 위에서부터 '날짜 | by 작성자'(글자 윗선 ≈ 사진 윗선) → 14 → 제목 */
.pl-relnews__meta { margin: -0.2em 0 0; padding-top: 0; }
.pl-relnews__name { margin-top: 14px; }
.pl-relnews__spread:hover .pl-relnews__name, .pl-relnews__spread:focus-visible .pl-relnews__name { text-decoration-thickness: 2px; }
@media (max-width: 959px) {
  .pl-relnews__meta { padding-top: 0; }
  .pl-relnews__name { margin-top: 10px; }
}
/* 2026-10-13 사용자 — 날짜 | 작성자 회색(사이트 캡션 색 #999) */
.pl-relnews__meta, .pl-relnews__meta .pl-relnews__sep { color: #999; }
/* 2026-10-13 사용자 ".pl-relnews__head 하단 마진 더 늘려 줘" — 머리 → 펼침면 68 → 100(이 페이지의 100 리듬), 모바일 28 → 48 */
.pl-relnews__head { margin-bottom: 100px; }
.pl-relnews--one .pl-relnews__head { margin-bottom: 0; }
@media (max-width: 959px) { .pl-relnews__head, .pl-relnews--one .pl-relnews__head { margin-bottom: 48px; } }
/* 2026-10-13 사용자 "B 이미지 사이즈 줄여 줘" — 펼침면 [글 | 사진] 반반 → 글 60 · 사진 40(1440 에서 사진 290×387 → 232×309, 모바일 175 → 140) */
.pl-relnews__spread { grid-template-columns: minmax(0, 1fr) 40%; }
/* 2026-10-13 사용자 "column-gap 60px 로" — 두 펼침면 사이 40 → 60 (PC, 모바일은 한 줄씩이라 해당 없음) */
.pl-relnews__grid { column-gap: 60px; }
/* 2026-10-13 사용자 지정 — 제목 20px, 글 지면 오른쪽(사진 쪽) 여백 36px (PC. 모바일은 15px · 16 그대로) */
@media (min-width: 960px) {
  .pl-relnews__name { font-size: 20px; }
  .pl-relnews__type { padding-right: 36px; }
}
/* 2026-10-13 사용자 "1열과 2열 사이에 그레이 보더 — 지금 위치(세로) 말고 아래에" → 첫째 줄과 둘째 줄 사이(줄 간격 80 한가운데)에
   1px #e5e5e5 가로선, 두 펼침면을 잇는 한 줄(1200). 모바일은 한 줄씩이라 펼침면 사이(28 한가운데)마다 같은 선 */
.pl-relnews__item { position: relative; }
@media (min-width: 960px) {
  .pl-relnews__grid > .pl-relnews__item:nth-child(n+3):nth-child(odd)::before { content: ""; position: absolute; left: 0; top: -40.5px; width: calc(200% + 60px); height: 1px; background: #e5e5e5; pointer-events: none; }
}
@media (max-width: 959px) {
  .pl-relnews__grid > .pl-relnews__item + .pl-relnews__item::before { content: ""; position: absolute; left: 0; right: 0; top: -14.5px; height: 1px; background: #e5e5e5; pointer-events: none; }
}

/* 2026-10-13 사용자 "게시물들에 MORE 버튼 + 기존 대각선 png" — 글 지면 맨 아래(사진 아랫선)에 MORE ↗.
   모양은 사이트 'VIEW MORE'(.detail-link)와 같음: Inter 13/500 #1d1d1d, 글자 아래 2px #d3d3d3 줄 → 올리면 검정이 왼쪽부터 채워짐(0.3s),
   오른쪽 8px 대각선 화살표(assets/img/sub_black_arrow.png). 펼침면 전체가 링크라 따로 링크는 아님 */
.pl-relnews__more { display: inline-flex; align-items: center; align-self: flex-start; margin-top: auto; padding-top: 16px;
  font-family: var(--font-en); font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0; color: #1d1d1d; }
.pl-relnews__more .txt { position: relative; padding-bottom: 2px; }
.pl-relnews__more .txt::after, .pl-relnews__more .txt::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; }
.pl-relnews__more .txt::after { background: #d3d3d3; }
.pl-relnews__more .txt::before { z-index: 1; background: #000; transform: scaleX(0); transform-origin: left; transition: transform .3s ease-out; }
.pl-relnews__spread:hover .pl-relnews__more .txt::before, .pl-relnews__spread:focus-visible .pl-relnews__more .txt::before { transform: scaleX(1); }
.pl-relnews__more::after { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 0 2px 6px;
  background: url('/wp-content/uploads/2026/05/sub_black_arrow.png') no-repeat center / contain; }
@media (prefers-reduced-motion: reduce) { .pl-relnews__more .txt::before { transition: none; } }
@media (max-width: 959px) { .pl-relnews__more { padding-top: 12px; font-size: 12px; } }

/* ===== 2026-10-13 사용자 "MORE 는 밑줄 빼고 회색, 링크는 제목·이미지·버튼을 눌렀을 때만(여백은 선택 안 되게)" =====
   펼침면은 이제 링크가 아닌 칸(div) — 제목(a.pl-relnews__name) · 사진(a.pl-relnews__photo) · MORE(a.pl-relnews__more)만 같은 주소로.
   셋 중 어디에 올려도 제목에 밑줄(2px), MORE 는 회색 #999 → 올리면 #1d1d1d(화살표도 같이 진해짐), 밑줄 없음 */
.pl-relnews__spread:focus-visible { outline: none; }
.pl-relnews__spread:hover .pl-relnews__name { text-decoration: none; }
.pl-relnews__name { color: inherit; text-decoration: none; }
.pl-relnews__name:focus { outline: none; }
.pl-relnews__name:focus-visible { outline: 1px solid #1d1d1d; outline-offset: 4px; }
.pl-relnews__spread:has(a:hover) .pl-relnews__name, .pl-relnews__name:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.pl-relnews__photo { display: block; }
.pl-relnews__more { color: #999; text-decoration: none; transition: color .3s ease-out; }
.pl-relnews__more .txt { padding-bottom: 0; }
.pl-relnews__more .txt::after, .pl-relnews__more .txt::before { content: none; }
.pl-relnews__more::after { opacity: .4; transition: opacity .3s ease-out; }   /* 검정 화살표 png 를 회색(#999 쯤)으로 */
.pl-relnews__spread:has(a:hover) .pl-relnews__more { color: #1d1d1d; }
.pl-relnews__spread:has(a:hover) .pl-relnews__more::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pl-relnews__more, .pl-relnews__more::after { transition: none; } }
/* 2026-10-13 사용자 "버튼 옆 텍스트랑 png 가운데 정렬?" — 실측: 화살표 가운데가 대문자 가운데보다 1.25px 위(사이트 VIEW MORE 의 밑줄용 아래 여백 2px 때문).
   밑줄을 뺐으니 아래 여백 0 → 대문자 MORE 의 가운데와 화살표 가운데를 맞춤 */
.pl-relnews__more::after { margin: 0 0 0 6px; }

/* 2026-10-15 공개 전 점검: 설명 끝에 한두 글자만 남는 줄을 줄임(일본어) */
.pl-relnews__desc { text-wrap: pretty; }
/* 2026-10-15 설명은 문장마다 <p>(gen.related_news) — 글꼴·색은 .pl-relnews__desc 그대로 이어받고, 문장마다 끝 줄 다듬기 */
.pl-relnews__desc p { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; word-break: inherit; text-wrap: pretty; }

/* 2026-10-15 사용자 '관련 소식 — 이미지 위로 보더를 추가해서 위 타이틀·본문과 경계' → 글 칸(펼침면) 위에 검은 1px 선(사이트 섹션 선과 같은 #1d1d1d).
   머리 → 80 → 선 → 40 → 첫 줄(줄 사이 회색 선과 같은 40 간격). 1개일 때(--one)는 오른쪽 펼침면 위에만.
   2026-10-16 사용자 '머리 아래 마진 더 넓혀 주고 보더 컬러 그레이로' → 60 → 80(모바일 28 → 36), 선 회색으로 했다가 같은 날 '다시 블랙으로' → #1d1d1d.
   모바일: 머리 → 36 → 선 → 24 → 첫 펼침면 */
.pl-relnews__head { margin-bottom: 80px; }
.pl-relnews--one .pl-relnews__head { margin-bottom: 0; }
.pl-relnews__grid { border-top: 1px solid #1d1d1d; padding-top: 40px; }   /* 2026-10-16 사용자 '보더는 다시 블랙으로' (잠깐 #e5e5e5) */
@media (max-width: 959px) {
  .pl-relnews__head, .pl-relnews--one .pl-relnews__head { margin-bottom: 36px; }
  .pl-relnews__grid { padding-top: 24px; }
}
/* 2026-10-19 사용자 — 관련 소식 글자 크기: 날짜 | 작성자 14 → 12, 제목 20 → 18 (PC. 모바일은 원래 12 · 15 그대로) */
@media (min-width: 960px) {
  .pl-relnews__meta { font-size: 12px; }
  .pl-relnews__name { font-size: 18px; }
}