/* public/assets/content.css — About·방법론 전용 "프리미엄 콘텐츠 페이지" 스타일.
   데이터 페이지(품목·홈)는 style.css의 딱딱한 표·타일 톤을 그대로 유지하고, 이 파일은 About·
   방법론 <body class="content-page">에만 추가로 링크한다(static_pages.mjs 참고). 전부
   `.content-page` 스코프 셀렉터로만 작성해 데이터 페이지에 영향이 없게 한다.

   디자인 브리프: Pretendard(이미 로드돼 있진 않음 — font-family 스택은 style.css 그대로 재사용,
   대신 제목은 800 웨이트로 굵게), 남색(--navy) 포인트, 배경 밴드 교차(#FFFDF8 ↔ --shade), 콘텐츠
   페이지 한정 라운드 12px·부드러운 그림자, 이모지·네온 금지, keep-all 유지. */

/* main 자체는 폭을 제한하지 않는다(style.css 기본값 max-width:860px를 취소) — 풀블리드 밴드(.cp-band)가
   main의 전체 폭을 그대로 채우게 하기 위해서다. 실기기 검증 중 100vw 기반 풀블리드(width:100vw +
   margin:calc(50%-50vw))를 썼다가 실측한 버그 — Windows Chrome의 클래식(비-오버레이) 세로 스크롤바가
   있을 때 vw는 스크롤바 폭을 포함하지만 %(요소 실제 폭)는 포함하지 않아, 우측 가장자리 콘텐츠가
   스크롤바 폭만큼 화면 밖으로 밀려 잘려 보였다(모바일 에뮬레이션은 오버레이 스크롤바라 이 버그를
   가리지 못했다 — 반드시 실제 데스크톱 스크롤바 환경에서 재검증 필요). vw를 아예 쓰지 않도록
   구조를 바꿔 근본 해결한다 — main을 폭 제한 없이 두면 자식(.cp-band)은 그냥 100%만으로 스크롤바를
   제외한 실제 가용 폭에 정확히 맞는다. */
.content-page main { max-width: none; margin: 0; padding: 0 0 64px; }

/* style.css의 전역 section 규칙(흰 배경 + 상단 3px 남색 테두리 + 16px 패딩)을 콘텐츠 페이지에서는
   완전히 무효화하고, 아래 .cp-band가 밴드 배경·여백을 대신 담당한다. */
.content-page section { background: transparent; border-top: none; padding: 0; margin-top: 0; }
.content-page h1 { font-size: 34px; font-weight: 800; line-height: 1.25; margin: 0 0 14px; }
.content-page h2 { font-size: 25px; font-weight: 800; border-left: 5px solid var(--navy); padding-left: 14px;
  margin: 0 0 18px; }
.content-page h3 { font-size: 17px; font-weight: 800; color: var(--navy); margin: 0 0 8px; }
.content-page p, .content-page li { max-width: 68ch; }

/* ---- 풀블리드 밴드 — main이 위에서 이미 폭 무제한이라 밴드는 그냥 100% 폭 + 배경만 담당한다. --- */
.cp-band { padding: 56px 0; }
.cp-band.cp-tint { background: var(--shade); }
.cp-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
/* footer.sources는 body 템플릿에서 .cp-inner로 감싸지 않은 채 main 바로 아래에 그대로 온다 —
   main이 폭 무제한이 된 이상 별도로 중앙 정렬 폭·여백을 줘야 가장자리에 딱 붙지 않는다. */
.content-page footer.sources { max-width: 1120px; margin: 0 auto; padding: 24px 24px 0; }

/* ---- 히어로 — 좌측 40% 텍스트 + 우측 60% 일러스트(about_hero/method_hero). -------------------- */
.cp-hero { padding: 48px 0 60px; }
.cp-hero-inner { display: flex; align-items: center; gap: 48px; }
/* flex-basis를 %가 아니라 px로 두고 grow·shrink를 둘 다 허용한다 — 태블릿 폭(예: 768px)에서
   "40%+58%+48px gap"이 100%를 넘겨 shrink:0이면 뻣뻣하게 넘치던 실측 버그(overflowBy 10px)를
   고친다. 380:520 비율(≈42:58)로 데스크톱에서는 브리프의 "좌측 40%·우측 60%"에 근접하게 유지된다. */
.cp-hero-text { flex: 1 1 380px; min-width: 0; }
.cp-hero-media { flex: 1 1 520px; min-width: 0; }
.cp-hero-media img { display: block; width: 100%; height: auto; border-radius: 12px; }
.cp-eyebrow { font-size: 13px; font-weight: 700; color: var(--navy2); letter-spacing: 0.02em; margin: 0 0 10px; }
.cp-hero-sub { font-size: 16px; color: #57503F; margin: 0 0 24px; max-width: none; }
.cp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 24px; border-radius: 999px;
  font-weight: 700; font-size: 15px; text-decoration: none; font-family: inherit; border: 2px solid transparent;
  cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.cp-btn:hover { transform: translateY(-2px); }
.cp-btn-primary { background: var(--navy); color: #FFFDF8; box-shadow: 0 8px 20px rgba(21, 51, 94, 0.22); }
.cp-btn-primary:hover { box-shadow: 0 10px 24px rgba(21, 51, 94, 0.3); }
.cp-btn-outline { background: #FFFDF8; color: var(--navy); border-color: var(--navy); }
.cp-btn-outline:hover { background: var(--shade); }

/* ---- 숫자 밴드 — 품목 수·4종 데이터 원천·6개 시장·매월 갱신(빌드타임 실값). ------------------- */
.cp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cp-stat { text-align: center; padding: 8px 4px; }
.cp-stat-value { font-size: 40px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums;
  line-height: 1.1; }
.cp-stat-label { font-size: 14px; color: #57503F; margin-top: 6px; }

/* ---- 2단(이미지+텍스트) — 미션/교차검증/갱신주기 공용. reverse는 데스크톱에서 이미지를 좌측으로. */
.cp-two-col { display: flex; align-items: center; gap: 48px; }
/* 히어로와 동일 이유(flex-shrink:0 + %는 태블릿 폭에서 넘칠 수 있음) — px 베이시스 + shrink 허용. */
.cp-two-col-media { flex: 1 1 400px; min-width: 0; }
.cp-two-col-media img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(21, 51, 94, 0.12); }
.cp-two-col-text { flex: 2 1 480px; min-width: 0; }
.cp-two-col-text > div + div { margin-top: 32px; padding-top: 28px; border-top: 1px solid #D8D2C4; }
.cp-two-col.cp-two-col-reverse { flex-direction: row-reverse; }

/* ---- 카드 공용(카테고리·정의·한계) — 라운드 12px + 부드러운 그림자(콘텐츠 페이지 한정 허용). --- */
.cp-card, .cp-def-card, .cp-cat-card, .cp-pipeline-card { background: #FFFDF8; border-radius: 12px;
  box-shadow: 0 4px 18px rgba(21, 51, 94, 0.08); padding: 20px; }
.cp-card + .cp-card { margin-top: 16px; }
.cp-narrow { max-width: 640px; }

/* ---- 다루는 품목 — 카테고리 카드 그리드(6장) + HS 뱃지. ------------------------------------- */
.cp-products-media { margin-bottom: 28px; }
.cp-products-media img { display: block; width: 100%; height: auto; border-radius: 12px; max-height: 320px;
  object-fit: cover; object-position: center 30%; }
.cp-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.cp-cat-card h3 { font-size: 16px; }
.cp-cat-count { font-size: 12px; color: #6E6754; margin: -4px 0 12px; }
.cp-hs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-hs-list li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; max-width: none; }
.cp-hs-badge { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--navy); background: var(--shade);
  border: 1px solid #B9B19E; border-radius: 4px; padding: 2px 6px; font-variant-numeric: tabular-nums; }
.cp-details { margin-top: 24px; }
.cp-details summary { cursor: pointer; color: var(--navy2); font-weight: 700; font-size: 14px; padding: 4px 0; }
.cp-details[open] summary { margin-bottom: 12px; }

/* ---- 데이터 API — curl 예시 카드(다크 코드 블록) + 기존 엔드포인트 표. ------------------------ */
.cp-code-card { background: #22201C; border-radius: 12px; overflow: hidden; margin: 20px 0; box-shadow: 0 4px 18px rgba(21, 51, 94, 0.15); }
.cp-code-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px;
  background: rgba(255, 255, 255, 0.06); color: #b8c6de; font-size: 12px; font-weight: 700; }
.cp-code { margin: 0; padding: 16px; color: #e8edf5; font-size: 13px; overflow-x: auto; }
.cp-code code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }

/* ---- 복사 버튼(인용 표기·curl 예시 공용). ---------------------------------------------------- */
.cp-copy-btn { font-family: inherit; font-size: 12px; font-weight: 700; color: var(--navy2); background: #FFFDF8;
  border: 1px solid var(--navy2); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.cp-copy-btn:hover { background: var(--shade); }
.cp-code-head .cp-copy-btn { color: #22201C; border-color: transparent; }
.cp-cite-box { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cp-cite-box .caveat { flex: 1 1 420px; margin: 0; }

/* ---- 방법론 — 파이프라인 4단계 카드. 데스크톱은 화살표 커넥터로 흐름을 잇는다. ------------------ */
.cp-pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.cp-pipeline-card { position: relative; }
.cp-step { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--navy); color: #FFFDF8; font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.cp-pipeline-card p { font-size: 13px; color: #57503F; max-width: none; }
.cp-pipeline-card:not(:last-child)::after { content: '→'; position: absolute; top: 14px; right: -20px;
  color: var(--navy2); font-size: 18px; font-weight: 700; }

/* ---- 기준·정의 카드 그리드. ------------------------------------------------------------------ */
.cp-definitions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; }
.cp-def-card p { font-size: 14px; max-width: none; }

/* ---- 한계 고지 — 정직함을 디자인 요소로(연회색 카드, 문제·미흡 색 남용 없이 절제). --------------- */
.cp-limits-card { background: #EFEBDD; border-radius: 12px; padding: 22px 24px; }
.cp-limits-card ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.cp-limits-card li { font-size: 14px; color: #3a3f47; max-width: 70ch; }

/* ---- 스크롤 리빌 — prefers-reduced-motion:no-preference && JS 로드(<html class="js">)일 때만
   숨김 상태로 시작한다. JS 미로드·reduced-motion 환경에서는 애초에 opacity:1(항상 보임)이라
   무해하다(브리프 "미로드 시 무해" 요건). */
@media (prefers-reduced-motion: no-preference) {
  .js .cp-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .js .cp-reveal.cp-in { opacity: 1; transform: none; }
}

@media print {
  .cp-band { box-shadow: none; }
  .cp-card, .cp-def-card, .cp-cat-card, .cp-pipeline-card, .cp-hero-media img, .cp-two-col-media img { box-shadow: none; }
  .cp-copy-btn { display: none; }
}

/* ---- 모바일 응급(680px 이하) — 히어로 이미지 상단·2단 스택·그리드 1단. style.css 기존 breakpoint와
   동일 폭(680px)을 그대로 맞춘다. ---------------------------------------------------------------- */
@media (max-width: 680px) {
  .cp-band { padding: 36px 0; }
  .cp-inner { padding: 0 16px; }
  .content-page h1 { font-size: 26px; }
  .content-page h2 { font-size: 21px; }
  .cp-hero-inner { flex-direction: column; }
  .cp-hero-media { order: -1; flex-basis: auto; width: 100%; margin-bottom: 20px; }
  .cp-hero-text { flex-basis: auto; }
  .cp-stats { grid-template-columns: repeat(2, 1fr); }
  .cp-stat-value { font-size: 32px; }
  .cp-two-col { flex-direction: column; }
  .cp-two-col.cp-two-col-reverse { flex-direction: column; }
  .cp-two-col-media { order: -1; flex-basis: auto; width: 100%; margin-bottom: 20px; }
  .cp-cat-grid { grid-template-columns: 1fr; }
  .cp-pipeline { grid-template-columns: 1fr; }
  .cp-pipeline-card:not(:last-child)::after { content: '↓'; position: static; display: block; text-align: center;
    margin-top: 10px; }
  .cp-definitions { grid-template-columns: 1fr; }
  .cp-cite-box { flex-direction: column; align-items: flex-start; }
}