/* 양평닷케이알 — 글 페이지·안내 페이지 전용 스타일 (site.css 다음에 불러온다. 머리·꼬리·글자·사진 톤은 site.css)
   🔴 2026-09-13 사장님 승인 목업_글페이지_v4_아는동네뼈대("진행합니다")의 모양을 옮긴 것이다. 승인 없이 값 수정 금지.
      움직임(시차·읽기 막대·떠오름)은 v8 승인 뒤. 붙을 자리 = .cover[data-parallax] · main[data-progress] · body[data-reveal].
      이전 판(v2) = _백업_site_v7적용전_2026-09-13/site/css/post.css */

  /* 가운데 좁은 단 (18px 글자로 한 줄 40자 안팎) */
  .col{max-width:800px;margin:0 auto;padding-inline:24px}

  /* 대문 — 화면 폭 전체 사진 + 겹친 제목·해시태그 */
  /* v6 컴퓨터: 전체표지 '커튼' — 표지(100vh)는 제자리(sticky), 흰 본문이 스크롤 1:1로 덮어 올라옴.
     본문 단(.col)은 800px이라, 흰 바탕을 화면 폭 전체로 넓혀 옆으로 표지가 비치지 않게 한다(box-shadow + clip-path). */
  .cover{position:sticky;top:0;height:100vh;min-height:520px;overflow:hidden;background:#e4e4e4;z-index:0}
  main.col{position:relative;z-index:2;background:#fff;box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax);padding-bottom:90px}
  main.col + footer{position:relative;z-index:2;background:#fff;margin-top:0}
  .cover .ser{font-size:16px;color:#f0f0f0;margin-top:8px}
  .cover img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.88) contrast(1.06)}
  .cover::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)}
  .cover .noph{position:absolute;inset:0;align-items:flex-start;justify-content:flex-end;padding:12px 16px}
  .cover .ov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:24px}
  .cover .k{font-size:16px;color:#f0f0f0}
  .cover h1{font-size:48px;line-height:1.3;font-weight:700;letter-spacing:-.02em;margin-top:10px;max-width:1000px}
  .cover h1 .sub{display:block;font-size:22px;line-height:1.5;font-weight:400;letter-spacing:0;margin-top:8px}
  .cover .tags{font-size:16px;color:#eee;margin-top:14px}

  /* 머리글(답 요약) — 대문 바로 아래 */
  .lead{margin-top:28px}
  .lead p+p{margin-top:12px}
  /* 추천·광고 고지 — 상자 없이 한 줄 글씨. 흐린 작은 글씨 금지(16px·#444, 굵은 문장은 진하게) */
  .disc{margin-top:18px;font-size:16px;line-height:1.7;color:#444}
  .disc strong{color:var(--ink)}
  .disc p+p{margin-top:6px}
  .meta{font-size:16px;color:var(--ink-3);margin-top:16px}

  .hr{border:0;border-top:1px solid var(--rule);margin:48px 0}

  /* 번호 붙은 항목 — 왼쪽 번호+이름 / 오른쪽 글 */
  .item{display:grid;grid-template-columns:220px 1fr;gap:36px;margin-bottom:72px}
  .item .no{font-size:20px;font-weight:400;color:#333}
  .item h2{font-size:26px;line-height:1.4;font-weight:700;margin-top:6px;letter-spacing:-.02em}
  .item .ph{height:300px;overflow:hidden;margin-bottom:22px}
  .item>div:last-child>*+*{margin-top:12px}
  .obtn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:52px;margin-top:24px;
    border:1px solid #bdbdbd;font-size:17px;font-weight:500;color:#222}
  .obtn:hover{border-color:var(--ink)}

  /* 본문 조각 — 빌더가 만드는 문단·목록·표 */
  p.body a,.check a,td a,.faq a,.lead a,.col .author a{border-bottom:1px solid var(--ink)}
  .check{list-style:none}
  .check li{padding-left:1.4em;text-indent:-1.4em;margin-top:8px}
  .check li::before{content:"□ ";font-weight:700}
  .src,.body.src{font-size:16px;color:var(--ink-3);line-height:1.7}
  .item .src span{display:block}
  table{width:100%;border-collapse:collapse;font-size:17px;line-height:1.7}
  th,td{border:1px solid var(--rule);padding:12px 14px;text-align:left;vertical-align:top}
  th{background:#f3f3f3;font-weight:700}
  .tbl{overflow-x:auto}
  .note{font-size:16px;color:var(--ink-3)}

  /* 자주 묻는 질문 */
  h2.sec{font-size:24px;font-weight:700;padding-bottom:12px;border-bottom:1px solid var(--rule);margin:8px 0 18px}
  .faq dt{font-weight:700;margin-top:18px}
  .faq dt::before{content:"Q. "}
  .faq dd{color:var(--ink-2)}
  .faq dd>*+*{margin-top:8px}

  /* ── 대가 표시(글 첫 부분) · 추천 칸 · 광고 칸 — 2026-09-13 사장님 승인 목업_글페이지_광고칸_v2 ──
     빌더는 수익원_설정.json 이 켜 준 분류의 글에, 게시·게재된 자료(site/data/vendors.json·ads.json)가 있을 때만 이 칸을 낸다(기본 = 없음).
     마크업 계약(발행전_점검.py 수익1~5): data-slot="추천"|"광고" · data-vendor · 광고 링크 rel="sponsored".
     이전 판(광고 칸 v1 모양) = _백업_사진출처광고칸적용전_2026-09-13/site/css/post.css */
  .pay-note{margin-top:34px;padding:14px 18px;border-left:4px solid #121212;background:#f7f7f7;font-size:18px;line-height:1.75;color:#222}
  .pay-note p+p{margin-top:6px}
  .pay-note a{display:inline-flex;align-items:center;min-height:44px;font-size:17px;font-weight:500;border-bottom:1px solid var(--ink)}
  /* 추천 칸 — 굵은 검정 테두리·검정 머리·꽉 찬 전화 단추 (광고와 한눈에 다름) */
  .rec{border:2px solid #121212;margin:8px 0 64px}
  .rec-h{background:#121212;color:#fff;font-size:17px;font-weight:700;padding:10px 20px}
  .rec-b{padding:18px 20px 20px}
  .rec h3{font-size:22px;line-height:1.4}
  .rec-fee{font-size:17px;color:#222;margin-top:6px;padding:8px 12px;background:#f5f5f5}
  .rec-role{font-size:17px;color:#333;margin-top:10px}
  .rec-exp{font-size:17px;color:#333;margin-top:8px;line-height:1.75}
  .rec-call{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px}
  .call{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 22px;font-size:19px;font-weight:700}
  .call-solid{background:#121212;color:#fff}
  .fee-s{font-size:16px;color:#333}
  /* 광고 칸 — 옅은 회색 테두리·"광고" 머리·테두리만 있는 전화 단추. 본문 글이 끝난 뒤(운영자 소개 앞), 두 칸까지 */
  .ads{margin-top:56px}
  .ads-t{font-size:16px;color:var(--ink-3);margin-bottom:10px}
  .adslot{border:1px solid #bdbdbd;background:#fcfcfc}
  .adslot + .adslot{margin-top:16px}
  .adslot .first{font-size:17px;line-height:1.65;padding:12px 18px;border-bottom:1px solid #e3e3e3;color:#222}
  .adslot .first b{display:inline-block;border:1px solid #555;padding:0 8px;margin-right:6px;font-size:15px;line-height:1.7;color:#222}
  .adslot .in{display:flex;gap:18px;padding:16px 18px 18px;align-items:flex-start}
  .adslot .ph{width:120px;height:90px;flex-shrink:0;overflow:hidden;background:#ececec}
  .adslot .bd{flex:1}
  .adslot h3{font-size:19px;line-height:1.4}
  .adslot .role{font-size:17px;color:#333}
  .adslot .area{font-size:16px;color:var(--ink-3)}
  .adslot .acts{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:10px;align-items:center}
  .call-line{border:1.5px solid #555;color:#222;min-height:48px;font-size:17px;padding:0 18px}
  .adslot .link{display:inline-flex;align-items:center;min-height:44px;font-size:16px;border-bottom:1px solid var(--ink)}

  /* 운영자 상자 (글 페이지 크기) */
  .col .author{gap:26px;padding:30px 0;margin-top:48px}
  .col .author .face{width:100px;height:100px}
  .col .author h3{font-size:21px}
  .col .author p{color:var(--ink-2);margin-top:4px}

  /* 함께 보면 좋은 글 — #동네 / #분야 두 묶음 나란히 */
  .relhd{display:flex;justify-content:space-between;align-items:baseline;margin-top:72px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
  .relhd b{font-size:22px}
  .relhd b span{font-weight:400}
  .relhd>:not(b){font-size:16px;color:#333;min-height:44px;display:inline-flex;align-items:center}
  .relgrid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:22px}
  .relrow .g{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .relrow .g b{font-size:19px;font-weight:700}
  .relrow .g b span{font-weight:400;color:var(--ink-3)}
  .relrow .g>:not(b){font-size:16px;color:#333;min-height:44px;display:inline-flex;align-items:center}
  .rel{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px}
  .rel>*{display:block}
  .rel .ph{height:130px;overflow:hidden}
  .rel h4{font-size:18px;line-height:1.45;font-weight:700;margin-top:10px}
  .rel .t{font-size:15.5px;color:var(--ink-3);margin-top:4px;line-height:1.5}

  /* 안내 페이지(광고·수수료 안내 · 개인정보 안내) — 대문 사진 없는 글. 글 페이지와 같은 부품을 쓴다 */
  .col>.crumb{margin-top:48px}
  .col>h1{font-size:34px;line-height:1.4;font-weight:700;letter-spacing:-.02em;margin-top:8px}
  .answer{border:1px solid var(--rule);background:#fafafa;padding:18px 22px;margin-top:26px}
  .answer p+p{margin-top:6px}
  .col>h2:not(.sec){font-size:24px;font-weight:700;padding-bottom:12px;border-bottom:1px solid var(--rule);margin:56px 0 18px}
  .col>p.body{margin-top:14px}
  .col>h2+p.body{margin-top:0}
  .col>.check,.col>table,.col>.tbl{margin-top:14px}

  /* 찾을 수 없는 페이지 */
  .nf{text-align:center;padding-block:96px 24px}
  .nf h1{font-size:30px;font-weight:700}
  .nf p{color:var(--ink-3);margin-top:8px}
  .nf a{display:inline-flex;align-items:center;min-height:44px;margin-top:20px;font-size:18px;border-bottom:1px solid var(--ink)}

  @media(max-width:760px){
    .item{grid-template-columns:1fr;gap:12px}
    .relgrid{grid-template-columns:1fr}
  }
  /* v6 휴대폰: 커튼 없음 — 표지 100svh 일반 스크롤, 제목은 아래쪽 왼쪽. 머리가 표지 위에 겹치므로 화면 전체를 쓴다 */
  @media(max-width:600px){
    .cover{position:relative;top:auto;height:100svh;min-height:0}
    .cover::after{background:rgba(0,0,0,.35)}
    .cover .ov{justify-content:flex-end;align-items:flex-start;text-align:left;padding:0 22px 96px;
      background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.72) 100%)}
    .cover h1{font-size:34px}
    .cover h1 .sub{font-size:19px}
  }
  /* 표지 사진 출처 한 줄 — 2026-09-13 사장님 승인 목업_사진출처_글표지캡션_v1(B안). 동네 대문 .phcap 과 같은 모양, 휴대폰 15px.
     빌더는 표지 사진에 출처가 있을 때만 .cover 에 cap 을 붙이고 이 줄을 넣는다(사진 자리·카드 사진에는 없음 → 꼬리 「사진 출처」). */
  .cover .phcap{position:absolute;right:0;bottom:0;z-index:3;max-width:70%;background:rgba(0,0,0,.6);color:#fff;font-size:15px;line-height:1.5;padding:4px 12px;text-align:right}
  @media(max-width:600px){
    .cover .phcap{max-width:none;left:0;text-align:left;font-size:15px;padding:6px 12px}
    .cover.cap .cover-down{bottom:84px}
    .cover.cap .ov{padding-bottom:150px}
  }
  @media(max-width:480px){
    .col{padding-inline:16px}
    .col>h1{font-size:28px}
    .item{margin-bottom:56px}
    .item .ph{height:220px}
    .item h2{font-size:24px}
    .rec-call .call, .adslot .call{width:100%;justify-content:center}
    .adslot .in{flex-direction:column;align-items:stretch}  /* 두 칸의 전화 단추 폭을 같게 */
    .adslot .ph{width:100%;height:120px}
    .rel .ph{height:110px}
  }