@charset "utf-8";
/* ==========================================================
   제품 상세 공통 (product-1.html = PDF p4 / product-2.html = PDF p5)
   좌표 주석은 p4 render_1x 기준. 제품별 이미지는 HTML의 <img>로 넣는다.
   ========================================================== */

/* ---------- 히어로 (p4 y 72~935) ---------- */
.p-hero { position: relative; height: 863px; padding-top: 100px; overflow: hidden; }
.p-hero__body { position: relative; z-index: 1; }
.p-hero__label { margin-top: 114px; font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: .15em; color: var(--c-mint); }
.p-hero__title { margin-top: 21px; font-size: 86px; line-height: 100px; font-weight: 700; letter-spacing: -.045em; color: var(--c-white); }
.p-hero__desc { margin-top: 38px; font-size: 16px; line-height: 26px; font-weight: 300; letter-spacing: -.02em; color: #c8dbda; }
.p-hero__desc strong { font-weight: 700; }
.p-hero__text { margin-top: 77px; font-size: 12.5px; line-height: 18px; letter-spacing: -.045em; color: #e3ecec; }
.p-hero__chips { margin-top: 17px; display: flex; gap: 5px; }
.p-hero__chips li { height: 26px; padding: 0 10px; border: 1px solid #5b9a9c; font-size: 9px; line-height: 24px; font-weight: 700; letter-spacing: -.05em; color: var(--c-white); }
.p-hero__btn { margin-top: 19px; }
.p-hero__btn .btn { width: 130px; padding: 0; }
.p-hero__img { position: absolute; left: calc(50% + 212px); top: 175px; width: 328px; height: 799px; }  /* x 932, y 247 */
.p-hero__img img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- 문제 제기 배너 (y 935~1515) ---------- */
.p-banner { position: relative; height: 580px; padding-top: 159px; overflow: hidden; color: var(--c-white); text-align: center; }
.p-banner__bg { position: absolute; inset: 0; }
.p-banner__bg img { position: absolute; left: 0; top: -190px; width: 1440px; height: 960px; object-fit: cover; }
.p-banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(24, 67, 67, .46); }
.p-banner > :not(.p-banner__bg) { position: relative; z-index: 2; }
.p-banner .sec-title { color: var(--c-white); }
.p-banner__desc { margin-top: 33px; font-size: 14.5px; line-height: 26px; font-weight: 600; letter-spacing: -.045em; }

/* ---------- 이유 2카드 (y 1515~2487) ---------- */
.p-reasons { padding-bottom: 118px; }
.p-reasons .sec-title { padding-right: 16px; }
.p-reasons__desc { margin-top: 23px; }
.p-reasons__grid { margin-top: 82px; display: flex; border-top: 1px solid var(--c-line-dark); border-bottom: 1px solid var(--c-line); }
.p-reason { width: 540px; height: 329px; padding: 30px 0 0 28px; }
.p-reason + .p-reason { border-left: 1px solid var(--c-line); }
.p-reason__title { font-size: 16.5px; line-height: 24px; font-weight: 700; letter-spacing: -.03em; color: var(--c-ink); }
.p-reason__text { margin-top: 8px; font-size: 13px; line-height: 21.5px; letter-spacing: -.03em; color: var(--c-body-2); white-space: nowrap; }
.p-reason__img { margin-top: 7px; width: 486px; height: 195px; overflow: hidden; }
.p-reason + .p-reason .p-reason__img { width: 491px; height: 194px; }
.p-reason__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 제품 소개 (y 2487~3646) ---------- */
.p-intro { padding-bottom: 118px; }
.p-intro__sub { margin-top: 52px; font-size: 15px; line-height: 24px; letter-spacing: -.03em; color: var(--c-on-dark-sub); text-align: center; }
.p-intro .sec-title { margin-top: 46px; color: var(--c-white); }
.p-intro__desc { margin-top: 20px; font-size: 19.5px; line-height: 28px; font-weight: 300; letter-spacing: -.03em; color: var(--c-on-dark-sub); text-align: center; }
.p-intro__desc strong { font-weight: 700; }
.p-intro__img { width: 1224px; height: 595px; margin: 28px auto 0; border-radius: 16px; overflow: hidden; }
.p-intro__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 창고 섹션: 잠듦→물→깨어남 + 수치 박스 (y 5356~6242) ---------- */
.p-store { padding-bottom: 118px; }
.p-store__desc { margin-top: 21px; font-size: 14.5px; line-height: 26px; }
.p-store__row { margin-top: 18px; display: flex; align-items: center; }
.p-store__flow { display: flex; align-items: center; }
.p-store__step {
  width: 126px; height: 126px; border-radius: 50%;
  border: 1px solid var(--c-teal); background: #00444a;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #d8e1e2;
}
.p-store__step strong { position: relative; top: -2px; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: -.03em; }
.p-store__step span { margin-top: 15px; font-size: 13.5px; line-height: 21px; letter-spacing: -.03em; }
.p-store__arrow { width: 74px; text-align: center; color: #008f5d; }
.p-store__arrow svg { width: 17px; height: 14px; vertical-align: middle; }
.p-store__stats-wrap { position: relative; margin-left: 27px; }
.p-store__stats { display: flex; border-top: 1px solid #7ea5a3; border-bottom: 1px solid #557e81; }
.p-store__stat {
  width: 263.5px; height: 249px; background: var(--c-deep-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.p-store__stat + .p-store__stat { border-left: 1.5px solid #547d81; }
.p-store__stat-label { position: absolute; right: 0; bottom: 100%; width: 263.5px; text-align: center; margin-bottom: 8px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--c-mint); }
.p-store__stat strong { font-size: 57px; line-height: 70px; font-weight: 700; letter-spacing: -.05em; color: var(--c-mint); }
.p-store__stat sup { font-size: 30px; line-height: 0; vertical-align: 26px; }
.p-store__stat span { margin-top: 8px; font-size: 24px; line-height: 30px; letter-spacing: -.03em; color: var(--c-white); }
.p-store__stat small { font-size: 15px; line-height: 1; }
.p-store__note { margin: 12px 0 0 553px; width: 527px; font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--c-mint); text-align: center; }

/* ---------- 서류 증명 6카드 (y 6242~7116) ---------- */
.p-docs { padding-bottom: 119px; }
.p-docs__grid { margin-top: 43px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--c-line); background: var(--c-white); }
.p-doc { height: 209px; padding: 27px 0 0 25px; border-left: 3px solid var(--c-teal); }
.p-doc:nth-child(3n+2) { border-left-color: #00c670; }
.p-doc:nth-child(-n+3) { border-bottom: 1px solid var(--c-line); height: 210px; }
.p-doc__no { font-size: 8px; line-height: 14px; font-weight: 700; letter-spacing: .2em; color: var(--c-teal); }
.p-doc__title { margin-top: 60px; font-size: 18px; line-height: 26px; font-weight: 700; letter-spacing: -.03em; color: var(--c-ink); }
.p-doc__text { margin-top: 17px; font-size: 11px; line-height: 18px; letter-spacing: -.04em; color: #62706e; }

/* ---------- 필요한 분들 목록 (y 7116~7788) ---------- */
.p-who { padding-bottom: 119px; }
.p-who__list { margin-top: 41px; border-top: 1px solid var(--c-deep); border-radius: 6px 6px 0 0; }
.p-who__row { display: flex; align-items: center; height: 73px; border-bottom: 1px solid var(--c-line); }
.p-who__no { width: 84px; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--c-teal); }
.p-who__title { width: 274px; font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -.03em; color: var(--c-ink); }
.p-who__text { font-size: 12.5px; line-height: 20px; letter-spacing: -.03em; color: #60706d; }

/* ---------- 보조사업 2카드 + 판매경로 표 (y 7788~8867) ---------- */
.p-subsidy { padding-bottom: 117px; }
.p-subsidy__grid { margin-top: 48px; display: flex; gap: 18px; }
.p-subsidy__card { width: 531px; height: 252px; padding: 37px 0 0 29px; border-radius: 10px; background: var(--c-white); color: var(--c-ink); }
.p-subsidy__icon { display: block; width: 26px; height: 26px; }
.p-subsidy__title { margin-top: 31px; font-size: 44px; line-height: 52px; font-weight: 700; letter-spacing: -.04em; }
.p-subsidy__text { margin-top: 19px; font-size: 19px; line-height: 30px; letter-spacing: -.03em; color: #1f4242; white-space: nowrap; }
.p-channels { margin-top: 48px; border-bottom: 2px solid var(--c-white); }
.p-channels__row { display: flex; align-items: center; height: 72px; border-top: 2px solid var(--c-white); color: var(--c-white); }
.p-channels__row + .p-channels__row { height: 73px; }
.p-channels__key { width: 222px; position: relative; top: -3px; font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -.04em; }
.p-channels__val { flex: 1; font-size: 19px; line-height: 26px; font-weight: 300; letter-spacing: -.03em; }
.p-channels__note { position: relative; top: -3px; font-size: 17px; line-height: 22px; letter-spacing: -.03em; }

/* ---------- 물 타는 순간 (y 8867~9646) ---------- */
.p-water .sec-head { border-top-width: 2px; }
.p-water__img { margin-top: 41px; height: 445px; overflow: hidden; }
.p-water__img img { width: 1440px; height: 100%; object-fit: cover; }

/* ---------- 희석 2카드 + 사용법 표 (y 9646~10446) ---------- */
.p-dilute { padding-bottom: 118px; }
.p-dilute__grid { margin-top: 17px; display: flex; border-top: 1.5px solid var(--c-line-dark); border-bottom: 1px solid var(--c-line); }
.p-dilute__card { width: 540px; min-height: 250px; padding: 66px 0 30px; text-align: center; }
.p-dilute__card + .p-dilute__card { border-left: 1px solid var(--c-line); }
.p-dilute__num { font-size: 60px; line-height: 70px; font-weight: 700; letter-spacing: -.05em; color: var(--c-deep); }
.p-dilute__text { margin-top: 21px; font-size: 11.5px; line-height: 18px; letter-spacing: -.04em; color: #5d6d69; }
.p-usage { width: 100%; margin-top: 17px; border-collapse: collapse; text-align: left; }
.p-usage th { height: 56px; padding: 0 0 0 16px; background: var(--c-deep); font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: -.03em; color: var(--c-white); }
.p-usage th:first-child { border-radius: 8px 0 0 0; }
.p-usage th:last-child { border-radius: 0 8px 0 0; }
.p-usage td { height: 57px; padding: 0; border-bottom: 1px solid var(--c-line); font-size: 13px; line-height: 20px; letter-spacing: -.03em; color: var(--c-ink); }
.p-usage tr:first-child td { border-top: 1px solid var(--c-line); }
.p-usage td:first-child { width: 90px; font-weight: 700; }
.p-usage td:nth-child(2) { width: 130px; }
.p-usage col:nth-child(1) { width: 90px; } .p-usage col:nth-child(2) { width: 130px; }

/* ---------- 농협 CTA (y 10446~11226) ---------- */
.p-nh { padding-bottom: 117px; border-bottom: 1px solid #50706d; text-align: center; }
.p-nh__logo { display: block; width: 154px; height: 49px; margin: 50px auto 0; }
.p-nh .sec-title { margin-top: 50px; color: var(--c-white); white-space: nowrap; }
.p-nh__desc { margin-top: 22px; }
.p-nh__btn { margin-top: 80px; }
.p-nh__btn .btn { width: 130px; padding: 0; }

/* ---------- 1440보다 넓은 화면: 전폭 사진은 뷰포트 전폭, 1440 구도 가운데 기준 ---------- */
@media (min-width: 1441px) {
  .p-banner__bg img { width: 100%; height: auto; aspect-ratio: 1440 / 960; top: 50%; transform: translateY(-50%); }
  .p-water__img { height: auto; aspect-ratio: 1440 / 445; }
  .p-water__img img { width: 100%; }
}

/* ---------- 모바일 (≤ 900) — product-2 의 page-product-2.css 와 같은 모양 유지 ---------- */
@media (max-width: 900px) {
  /* 히어로: 텍스트 위, 병 이미지 아래 가운데 */
  .p-hero { height: auto; padding-top: 40px; padding-bottom: 48px; }
  .p-hero__label { margin-top: 40px; font-size: 12px; line-height: 16px; letter-spacing: .1em; }
  .p-hero__title { margin-top: 12px; font-size: 40px; line-height: 1.2; letter-spacing: -.04em; }
  .p-hero__desc { margin-top: 16px; font-size: 15px; line-height: 1.6; }
  .p-hero__text { margin-top: 24px; font-size: 13px; line-height: 1.6; }
  .p-hero__text br { display: none; }
  .p-hero__chips { margin-top: 16px; flex-wrap: wrap; gap: 6px; }
  .p-hero__chips li { height: 28px; font-size: 12px; line-height: 26px; }
  .p-hero__btn { margin-top: 20px; }
  .p-hero__btn .btn { width: auto; height: 48px; padding: 0 20px; }
  .p-hero__img { position: static; width: auto; height: 420px; margin: 32px 20px 0; }

  /* 문제 제기 배너: 높이 360 */
  .p-banner { height: 360px; padding-top: 0; display: flex; flex-direction: column; justify-content: center; }
  .p-banner__bg img { top: 0; width: 100%; height: 100%; }
  .p-banner__desc { margin: 20px 20px 0; font-size: 14px; line-height: 1.6; }

  /* 이유 2카드: 1열 */
  .p-reasons { padding-bottom: 70px; }
  .p-reasons .sec-title { padding-right: 0; }
  .p-reasons__desc { margin-top: 16px; }
  .p-reasons__grid { margin-top: 40px; flex-direction: column; }
  .p-reason { width: auto; height: auto; padding: 28px 0 32px; }
  .p-reason + .p-reason { border-left: 0; border-top: 1px solid var(--c-line); }
  .p-reason__title { font-size: 17px; line-height: 1.45; }
  .p-reason__text { font-size: 14px; line-height: 1.6; white-space: normal; }
  .p-reason__text br { display: none; }
  .p-reason__img, .p-reason + .p-reason .p-reason__img { margin-top: 16px; width: 100%; height: auto; aspect-ratio: 486 / 195; }

  /* 제품 소개: 이미지 폭 100% */
  .p-intro { padding-bottom: 70px; }
  .p-intro__sub { margin: 32px 20px 0; font-size: 14px; line-height: 1.6; }
  .p-intro .sec-title { margin-top: 16px; }
  .p-intro__desc { margin: 16px 20px 0; font-size: 17px; line-height: 1.5; }
  .p-intro__img { width: auto; height: auto; aspect-ratio: 16 / 10; margin: 28px 20px 0; border-radius: 12px; }

  /* 창고: 원 3개 가로(80px), 수치 박스 세로 2단 */
  .p-store { padding-bottom: 70px; }
  .p-store__desc { margin-top: 16px; font-size: 14px; line-height: 1.6; }
  .p-store__row { margin-top: 32px; flex-direction: column; align-items: stretch; }
  .p-store__flow { justify-content: center; }
  .p-store__step { flex: none; width: 80px; height: 80px; }
  .p-store__step strong { top: 0; font-size: 13px; line-height: 18px; }
  .p-store__step span { margin-top: 3px; font-size: 12px; line-height: 15px; }
  .p-store__arrow { flex: none; width: 40px; }
  .p-store__arrow svg { width: 14px; height: 12px; }
  .p-store__stats-wrap { margin: 36px 0 0; }
  .p-store__stat-label { position: static; width: auto; margin-bottom: 10px; }
  .p-store__stats { flex-direction: column; }
  .p-store__stat { width: auto; height: 150px; }
  .p-store__stat + .p-store__stat { border-left: 0; border-top: 1.5px solid #547d81; }
  .p-store__stat strong { font-size: 44px; line-height: 54px; }
  .p-store__stat sup { font-size: 22px; vertical-align: 20px; }
  .p-store__stat span { margin-top: 4px; font-size: 17px; line-height: 26px; }
  .p-store__stat small { font-size: 13px; }
  .p-store__note { margin: 12px 0 0; width: auto; }

  /* 서류 증명: 1열 */
  .p-docs { padding-bottom: 70px; }
  .p-docs__grid { margin-top: 32px; grid-template-columns: 1fr; }
  .p-doc, .p-doc:nth-child(-n+3) { height: auto; padding: 20px 20px 22px; border-bottom: 1px solid var(--c-line); }
  .p-doc:last-child { border-bottom: 0; }
  .p-doc__no { font-size: 10px; }
  .p-doc__title { margin-top: 12px; font-size: 18px; line-height: 1.4; }
  .p-doc__text { margin-top: 6px; font-size: 13px; line-height: 1.6; }

  /* 필요한 분들: 번호+제목 한 줄, 설명 다음 줄 */
  .p-who { padding-bottom: 70px; }
  .p-who__list { margin-top: 32px; }
  .p-who__row { flex-wrap: wrap; height: auto; padding: 16px 0; }
  .p-who__no { width: 32px; font-size: 12px; }
  .p-who__title { flex: 1; width: auto; font-size: 16px; line-height: 1.45; }
  .p-who__text { width: 100%; margin-top: 4px; padding-left: 32px; font-size: 14px; line-height: 1.6; }

  /* 보조사업 2카드 1열 + 판매 경로 행 세로 */
  .p-subsidy { padding-bottom: 70px; }
  .p-subsidy .sec-title br { display: none; }
  .p-subsidy__grid { margin-top: 32px; flex-direction: column; gap: 12px; }
  .p-subsidy__card { width: auto; height: auto; padding: 24px 20px 26px; }
  .p-subsidy__icon { width: 24px; height: 24px; }
  .p-subsidy__title { margin-top: 16px; font-size: 28px; line-height: 1.3; }
  .p-subsidy__text { margin-top: 10px; font-size: 15px; line-height: 1.6; white-space: normal; }
  .p-subsidy__text br { display: none; }
  .p-channels { margin-top: 32px; }
  .p-channels__row, .p-channels__row + .p-channels__row { height: auto; padding: 16px 0; flex-direction: column; align-items: flex-start; }
  .p-channels__key { width: auto; top: 0; font-size: 16px; line-height: 24px; }
  .p-channels__val { margin-top: 4px; font-size: 16px; line-height: 24px; }
  .p-channels__note { top: 0; margin-top: 2px; font-size: 14px; line-height: 22px; }

  /* 물 타는 순간: 사진 폭 100%, 원본 비율 */
  .p-water__img { margin-top: 28px; height: auto; aspect-ratio: 1376 / 768; }
  .p-water__img img { width: 100%; }

  /* 희석 2카드 1열 + 사용법 표(3열, 13px) */
  .p-dilute { padding-bottom: 70px; }
  .p-dilute__grid { flex-direction: column; }
  .p-dilute__card { width: auto; min-height: 0; padding: 32px 0 28px; }
  .p-dilute__card + .p-dilute__card { border-left: 0; border-top: 1px solid var(--c-line); }
  .p-dilute__num { font-size: 36px; line-height: 44px; }
  .p-dilute__text { margin-top: 10px; font-size: 13px; line-height: 1.6; }
  .p-usage { margin-top: 24px; }
  .p-usage th { height: 44px; padding: 8px 6px 8px 10px; font-size: 13px; line-height: 18px; }
  .p-usage td { height: auto; padding: 10px 6px 10px 10px; font-size: 13px; line-height: 1.5; }
  .p-usage td:first-child { width: 52px; }
  .p-usage td:nth-child(2) { width: 106px; }
  .p-usage col:nth-child(1) { width: 52px; } .p-usage col:nth-child(2) { width: 106px; }

  /* 농협 CTA: 제목 24px 줄바꿈 허용 */
  .p-nh { padding-bottom: 70px; }
  .p-nh__logo { width: 120px; height: 38px; margin-top: 32px; }
  .p-nh .sec-title { margin-top: 28px; font-size: 24px; line-height: 1.35; white-space: normal; }
  .p-nh__desc { margin-top: 16px; }
  .p-nh__btn { margin-top: 32px; }
  .p-nh__btn .btn { width: auto; height: 48px; padding: 0 20px; }
}