@charset "UTF-8"; /* ── [GEO 스코프] 전 규칙을 v2 콘텐츠 루트로 가둠 — CDN 반영 완료 2026-09-16 ───── 모든 셀렉터 앞에 `[data-section="DetailLayout"]` 을 붙였다. 선언부와 주석은 한 글자도 바뀌지 않았고, **콘텐츠 안에서 매칭되는 요소 집합도 동일**하다 (jsdom 으로 182개 규칙 × 328개 요소 전수 대조: 차이 0건). 왜: FO 가 v2 콘텐츠를 Shadow DOM 이 아니라 문서 본문(Light DOM)에 SSR 하면 이 파일이 페이지 에 올라간다. 그때 ① 스코프가 없던 규칙(blockquote, p{…!important} · td …)이 페이지 전체를 때리고 ② FO 도 `.goods-detail` 클래스를 쓰는 곳이 있어(상품상세 루트· 대량주문 팝업) v2 리셋을 맞는다. FO 마크업 흉내 문서에서 원본은 73개 요소를 잡았고 스코프본은 0개다. 근거: pulmuone-vuejs/local_share/plan/GEO/plan/04_…-fo-plan.md §M5 스코프 키가 클래스도 lang 도 아닌 이유: 클래스는 FO 와 겹치고(그게 막으려는 충돌), `lang="ko"` 는 cb2bf5b(2026-09) 이후 발행분에만 있어 그 전 상품의 CSS 가 통째로 죽는다. `data-section="DetailLayout"` 은 v2 최초 구현(c109dec)부터 모든 저장 HTML 루트에 있다. 변수 선언부(구 `:root`)도 콘텐츠 루트로 옮겼다 — 하위로 상속되므로 결과는 같고, FO 의 에 v2 변수가 얹히지 않는다. `:host` 는 Shadow DOM 용으로 남긴다. `.goods_movie` 3규칙도 함께 가뒀다 — 저장 HTML 의 영상 블록은 루트 안에 있으므로 결과는 같다. 외부채널이 영상을 루트 **밖**에 두는 구성이 생기면 그때 예외로 뺀다. ⚠️ 퍼블리셔 개정판을 받으면 **같은 변환을 개정 원본에 다시 적용**해야 한다 — 개정판의 새 규칙에는 스코프가 없어 자동으로 보호되지 않는다. 적용 후 확인 3종: ① 선언부 바이트 동일 ② 샘플 문서에서 규칙별 매칭 집합 불변 ③ FO 마크업에서 매칭 0. 함정: 셀렉터 앞 주석(트리비아)을 떼고 알맹이에만 붙일 것(안 그러면 영구 미매칭), `@media`·`@font-face` 헤더는 스코프 대상이 아닐 것. */ /* 외부채널 팝업 html2canvas 캡처 저장으로 인해 아래태그 사용 지양, svg 사용 repeating-linear-gradient, ::marker, mask, filter, mask + background-color, transform */ /* 프리텐다드는 프론트에서 제공하며, 상세페이지용 나눔스퀘어 네오만 선언 */ @font-face { font-family:'NanumSquareNeo'; font-style: normal; font-weight:900; font-display: swap; src:local('NanumSquareNeo'), url(https://shop-pulmuone.edge.naverncp.com/fonts/NanumSquareNeoTTF-eHv.woff2) format('woff2'), url(https://shop-pulmuone.edge.naverncp.com/fonts/NanumSquareNeoTTF-eHv.woff) format('woff'); } /* 변수도 페이지로 새면 안 된다 — `:root` 는 FO 의 을 잡는다. 지금은 이름이 겹치지 않지만(FO 의 `--white`·`--black` 매치는 전부 BEM 클래스였다) 이름이 겹치는 순간 조용히 FO 색이 바뀐다. 콘텐츠 루트에 선언하면 하위로 상속되므로 결과는 같다. `:host` 는 Shadow DOM(외부채널 팝업)용 — 라이트 DOM 문서에서는 매칭되지 않는다. */ [data-section="DetailLayout"], :host{ --primary:#7BCC12; --secondary:#BED730; --bg-neutral:#FAF9F6; --bg-tinted:#FBFFF3; --bg-story:#EBE6E0; --bg-highlight:#DCE99A; --default-text:#222; --black:#000; --white:#fff; --font-neo:"NanumSquareNeo", "Pretendard", sans-serif; } /* 860px 이상 */ [data-section="DetailLayout"]{ --size-2:2px; --size-5:5px; --size-6:6px; --size-8:8px; --size-10:10px; --size-12:12px; --size-14:14px; --size-16:16px; --size-18:18px; --size-20:20px; --size-22:22px; --size-24:24px; --size-28:28px; --size-30:30px; --size-36:36px; --size-40:40px; --size-42:42px; --size-44:44px; --size-48:48px; --size-50:50px; --size-52:52px; --size-54:54px; --size-60:60px; --size-64:64px; --size-72:72px; --size-74:74px; --size-76:76px; --size-78:78px; --size-80:80px; --size-96:96px; --size-100:100px; --size-102:102px; --size-108:108px; --size-112:112px; --size-120:120px; --size-122:122px; --size-130:130px; --size-138:138px; --size-140:140px; --size-142:142px; --size-184:184px; --size-651:651px; /* --size-344:344px; */ /* --size-526:526px; */ --radius-lg:var(--size-40); } /* 860px 이하 (860기준 vw변환)*/ @media (max-width:860px){ [data-section="DetailLayout"]{ --size-2:0.2326vw; --size-5:0.5814vw; --size-6:0.6977vw; --size-8:0.9302vw; --size-10:1.1628vw; --size-12:1.3953vw; --size-14:1.6279vw; --size-16:1.8605vw; --size-18:2.0930vw; --size-20:2.3256vw; --size-22:2.5581vw; --size-24:2.7907vw; --size-28:3.2558vw; --size-30:3.4884vw; --size-36:4.1860vw; --size-40:4.6512vw; --size-42:4.8837vw; --size-44:5.1163vw; --size-48:5.5814vw; --size-50:5.8140vw; --size-52:6.0465vw; --size-54:6.2791vw; --size-60:6.9767vw; --size-64:7.4419vw; --size-72:8.3721vw; --size-74:8.6047vw; --size-76:8.8372vw; --size-78:9.0698vw; --size-80:9.3023vw; --size-96:11.1628vw; --size-100:11.6279vw; --size-102:11.8605vw; --size-108:12.5581vw; --size-112:13.0233vw; --size-120:13.9535vw; --size-122:14.186vw; --size-130:15.1163vw; --size-138:16.0465vw; --size-140:16.2791vw; --size-142:16.5116vw; --size-184:21.3953vw; --size-651:75.6976vw; /* --size-526:61.1628vw; */ } } [data-section="DetailLayout"] *{box-sizing:border-box;margin:0;padding:0;border:0;list-style:none;word-break:keep-all;word-wrap:break-word;} [data-section="DetailLayout"] img{display:block;max-width:100%;height:auto;} [data-section="DetailLayout"] h1, [data-section="DetailLayout"] h2, [data-section="DetailLayout"] h3, [data-section="DetailLayout"] h4, [data-section="DetailLayout"] h5, [data-section="DetailLayout"] h6, [data-section="DetailLayout"] button, [data-section="DetailLayout"] input, [data-section="DetailLayout"] textarea{font:inherit;} [data-section="DetailLayout"]{width:100%;max-width:860px;margin:0 auto;padding-bottom:var(--size-64);overflow:hidden;background:var(--white);letter-spacing:-0.04em;line-height:1.3;color:var(--default-text);font-size:var(--size-40);font-weight:400;font-family:Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;} [data-section="DetailLayout"] strong{font-weight:800;} /* https://dev0shop.pulmuone.online/shop/externalMallPreview?goods=90018961 전용*/ [data-section="DetailLayout"] blockquote, [data-section="DetailLayout"] p{font-family:Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;} [data-section="DetailLayout"] blockquote strong, [data-section="DetailLayout"] p strong{font-family:Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;font-size: inherit !important;} [data-section="DetailLayout"] .detail-title .title-heading, [data-section="DetailLayout"] .text-title{font-family:NanumSquareNeo !important;font-weight:900;} /* 공통 블럭 */ [data-section="DetailLayout"] .detail-block{margin:0 var(--size-40);} /* 예외여백: 일반 출력 + 에디터 편집기 */ /* 이런분께 추천해요 + 자주묻는질문 */ [data-section="TextCardBlock"] + [data-section="QnaBlock"], [data-puck-component^="TextCardBlock-"] + [data-puck-component^="QnaBlock-"] > [data-section="QnaBlock"]{margin-top:var(--size-64);} /* 이런분께 추천해요 + 맛있게 즐겨요 */ [data-section="TextCardBlock"] + [data-section="ServingBlock"], [data-puck-component^="TextCardBlock-"] + [data-puck-component^="ServingBlock-"] > [data-section="ServingBlock"]{margin-top:var(--size-64);} /* 패키지 리뉴얼 안내 */ [data-section="DetailLayout"] .notice-block{display:flex;flex-direction:column;align-items:center;gap:var(--size-24);padding:var(--size-40) var(--size-64);border:var(--size-12) solid var(--primary);background:var(--bg-neutral);} [data-section="DetailLayout"] .notice-title{position:relative;color:var(--black);font-weight:800;letter-spacing:-0.02em;text-align:center;} [data-section="DetailLayout"] .notice-title::before{content:'';display:block;width:var(--size-50);height:var(--size-50);margin:0 auto 16px;background:var(--primary) url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/icon-alert.svg) 50% 50%/10% no-repeat;border-radius:100%;} [data-section="DetailLayout"] .notice-list{display:flex;flex-direction:column;gap:var(--size-16);} [data-section="DetailLayout"] .notice-list li{position:relative;flex:1;padding-left:var(--size-18);line-height:1.4;font-size:var(--size-28);} [data-section="DetailLayout"] .notice-list li::before{content:'';position:absolute;top:var(--size-18);left:0;width:var(--size-5);height:var(--size-5);border-radius:100%;background:var(--default-text);} /* 상단로고 */ [data-section="DetailLayout"] .detail-logo{display:flex;align-items:center;padding:0 var(--size-40);} [data-section="DetailLayout"] .detail-logo > p{width:var(--size-142);min-height:var(--size-142);background-repeat:no-repeat;background-size:contain;background-position:center center;} [data-section="DetailLayout"] .detail-logo > p span{font-size:0;line-height:0;} [data-section="DetailLayout"] .ci-pulmuone{background-image:url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/ci-pulmuone.svg);} [data-section="DetailLayout"] .ci-orga{background-image:url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/ci-orga.svg);} [data-section="DetailLayout"] .ci-foodmerce{background-image:url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/ci-foodmerce.svg);} [data-section="DetailLayout"] .ci-greenjuice{background-image:url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/ci-greenjuice.svg);} [data-section="DetailLayout"] .ci-health{background-image:url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/ci-health.svg);} [data-section="DetailLayout"] .ci-water{background-image:url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/ci-water.svg);} [data-section="DetailLayout"] .ci-amio{background-image:url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/ci-amio.svg);} /* 이미지내 상단타이틀 */ [data-section="DetailLayout"] .detail-title{position:absolute;top:var(--size-80);left:var(--size-40);} [data-section="DetailLayout"] .detail-title .title-desc{margin-bottom:var(--size-18);font-size:var(--size-44);font-weight:600;letter-spacing:0;} [data-section="DetailLayout"] .detail-title .title-heading{line-height:1.2;font-size:var(--size-96);font-family:var(--font-neo);letter-spacing:0;} /* ── [에디터 추가] (구) 상단 타이틀 — 히어로 밖 독립 블록(.is-block) — CDN 반영 완료 2026-09-09 ── .detail-title 은 히어로(.detail-full-image) 안의 절대배치 오버레이다. 에디터의 "(구) 상단 타이틀" 블록은 히어로 밖에 형제로 놓이므로 그대로 두면 positioned 조상이 없어 페이지 기준으로 절대배치돼 엉뚱한 곳에 겹친다. 독립 블록일 때는 흐름에 두고(relative) 2026-07 규격의 모습(안쪽 여백 40 · 뉴트럴 배경)으로 그린다. 글자 크기·글꼴은 위 .title-desc/.title-heading 규칙을 그대로 쓴다. html2canvas 제약 밖의 속성만 쓴다(position·padding·background). */ [data-section="DetailLayout"] .detail-title.is-block{position:relative;top:auto;left:auto;right:auto;padding:var(--size-40);background:var(--bg-neutral);} /* ── [에디터 추가] 타이틀 긴 문자열 줄바꿈 — CDN 반영 필요 (2026-09-14) ── 전역 word-break:keep-all 때문에 공백 없는 영문·숫자(예: "(200g)ABCDEF…")가 줄바꿈되지 않고 오른쪽으로 넘쳐 잘렸다. overflow-wrap:break-word 는 한 줄에 안 들어가는 문자열만 쪼개고 한글은 keep-all(어절 단위) 그대로 둔다. anywhere 가 아니라 break-word 인 이유 — html2canvas 지원. 히어로 오버레이는 left 만 있으면 절대배치 상자가 이미지보다 넓어질 수 있어 right 로 폭을 고정한다 (독립 블록 .is-block 은 위에서 right:auto 로 되돌린다). */ /* [data-section="DetailLayout"] .detail-title{right:var(--size-40);} */ [data-section="DetailLayout"] .detail-title.light{color:var(--white);} [data-section="DetailLayout"] .detail-title .title-desc, [data-section="DetailLayout"] .detail-title .title-heading{overflow-wrap:break-word;word-wrap:break-word;} /* ── [에디터 추가] 타이틀 2줄 말줄임 — CDN 반영 필요 (2026-09-16) ── 히어로 오버레이 타이틀은 이미지 위에 절대배치되므로 문구가 길어지면 이미지 아래로 흘러나가 다음 블록을 덮는다. 설명(.title-desc)·제목(.title-heading) 모두 최대 2줄까지만 보이고 넘치는 부분은 … 로 줄인다. 방식은 이 파일의 기존 2줄 말줄임(.text-title · .summary-desc)과 동일하게 display:-webkit-box + -webkit-line-clamp:2 에 max-height 보조를 같이 둔다 (max-height 는 본문 줄높이 기준 — .title-desc 는 상속된 1.3, .title-heading 은 자기 값 1.2). 단, html2canvas 는 line-clamp 를 모르므로 썸네일 캡처(thumbnails.js)에서는 max-height 만 먹어 말줄임 점 없이 잘리기만 한다 — 썸네일은 짧은 고정 문구라 해당 없고, 실제 상세페이지·에디터 미리보기는 정상 적용된다. */ [data-section="DetailLayout"] .detail-title .title-desc{display:-webkit-box;max-height:2.6em;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;} [data-section="DetailLayout"] .detail-title .title-heading{display:-webkit-box;max-height:2.4em;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;} /* 이미지 영역 */ [data-section="DetailLayout"] .detail-full-image{position:relative;width:100%;} [data-section="DetailLayout"] .detail-full-image img{position:relative;width:100%;} [data-section="DetailLayout"] .detail-image{position:relative;margin-top:var(--size-40);border-radius:var(--radius-lg);overflow:hidden;} [data-section="DetailLayout"] .detail-image + .detail-image{margin-top:var(--size-24);} [data-section="DetailLayout"] .detail-image[data-section="BrandPromise"]{margin-top:var(--size-40);} /* 풀무원 브랜드 상단간격 고정 */ [data-section="DetailLayout"] .image-note{position:absolute;bottom:var(--size-20);right:var(--size-28);font-size:var(--size-28);} [data-section="DetailLayout"] .image-note.light{color:var(--white);} /* ── [에디터 추가] .top-gap 복구 — CDN 반영 필요 (2026-09-14) ── 2026-09-07 CDN 갱신에서 이 두 규칙이 통째로 주석 처리돼 인증 이미지(CertificationBlock, detail-block top-gap) 위 여백·연속 간격이 0 이 되어 영역이 붙었다. 원래 규격(40 / 연속 24)으로 되살린다. .top-gap 을 쓰는 블록은 인증 이미지뿐이다. .detail-block{margin:0 …}(위쪽) 보다 뒤에 있어야 margin-top 이 이긴다. 퍼블리셔 의도 확인 전 — docs/plan/07 열린 질문 ⑧. */ [data-section="DetailLayout"] .top-gap{margin-top:var(--size-40);} [data-section="DetailLayout"] .top-gap + .top-gap{margin-top:var(--size-24);} /* ── [에디터 추가] 여백 블록(SpacerBlock) — CDN 반영 필요 (2026-09-21) ── 퍼블리셔 샘플에 대응 마크업이 없는 에디터 전용 블록이다. 편집자가 블록 사이 간격을 직접 넣을 때 쓴다. 간격은 margin 이 아니라 **height** 로 준다 — margin 이면 요소 자체의 높이가 0 이라 Puck 0.22 캔버스에서 블록을 잡을 면적이 없어 선택이 안 된다(v1 여백 블록이 그러했다). 값은 두 가지뿐 — 기본 40(.spacer-block) · 넓게 64(.spacer-64). 뒤 클래스가 빠지거나 모르는 값이 와도 기본 40 이 남아 높이 0 으로 돌아가지 않는다. 토큰이라 모바일은 vw 로 같이 줄어든다. html2canvas 제약(transform·mask·filter·::marker·repeating-linear-gradient) 밖의 속성만 쓴다. */ [data-section="DetailLayout"] .spacer-block{height:var(--size-40);} [data-section="DetailLayout"] .spacer-block.spacer-64{height:var(--size-64);} /* 테이블 */ [data-section="DetailLayout"] .detail-table{margin-top:var(--size-40);} [data-section="DetailLayout"] .detail-table table{width:100%;border-collapse:separate;table-layout:initial !important;border-spacing:0;border:var(--size-2) solid var(--black);border-radius:var(--size-10);overflow:hidden;} [data-section="DetailLayout"] .detail-table th, [data-section="DetailLayout"] .detail-table td{padding:var(--size-10);border-right:var(--size-2) solid var(--black);border-bottom:var(--size-2) solid var(--black);font-size:var(--size-28);color:var(--black);text-align:center;vertical-align:middle;} [data-section="DetailLayout"] .detail-table thead th{padding:var(--size-14) var(--size-10);background:var(--bg-tinted);font-weight:800;} [data-section="DetailLayout"] .detail-table tbody th{background:#f9f9f9;font-weight:800;} [data-section="DetailLayout"] .detail-table tr > :last-child{border-right:0;} [data-section="DetailLayout"] .detail-table tbody tr:last-child > *{border-bottom:0;} [data-section="DetailLayout"] .detail-table.tinted tbody th{background:var(--bg-tinted);} [data-section="DetailLayout"] .detail-table.tinted th,[data-section="DetailLayout"] td{padding:var(--size-24) var(--size-10);} /* ── [에디터 추가] 표 값 칸 강조(td.tinted) — CDN 반영 완료 2026-09-09 ────────── 샘플의 "tinted 같은 타입"(2열 전부 색상 칸)은 값 칸까지 로 배경을 얻는다. 스크린리더에는 데이터 없는 표로 읽히므로 에디터는 로 낸다 (TableBlock "값 칸도 강조"). 위 CDN 규칙은 th 에만 배경·굵기를 주고, `.tinted th,td` 의 td 는 .tinted 밖 전역 셀렉터로 떨어져 .detail-table td{padding:10} 에 지므로, td 쪽을 여기서 맞춘다. 값은 2026-09-07 CDN 페이지에서 원본 th 의 계산값과 대조한 것이다 (background #FBFFF3 · font-weight 800 · padding 24px 10px · 행 높이 동일). html2canvas 제약(transform·::marker·mask·filter·repeating-linear-gradient) 밖의 속성만 쓴다. */ [data-section="DetailLayout"] .detail-table td.tinted{background:var(--bg-tinted);font-weight:800;padding:var(--size-24) var(--size-10);} [data-section="DetailLayout"] .table-title{margin-bottom:var(--size-24);padding:0 var(--size-24);color:var(--black);font-weight:800;} [data-section="DetailLayout"] .table-note{margin:var(--size-12) 0;font-size:var(--size-28);color:rgba(0, 0, 0, 0.4);} /* 공통 텍스트 블럭 */ [data-section="DetailLayout"] .text-block{margin:0 var(--size-64);padding-top:var(--size-120);} [data-section="DetailLayout"] .text-number, [data-section="DetailLayout"] .text-badge{ display:flex;align-items:center;justify-content:center;width:var(--size-138);height:var(--size-130);padding-top:var(--size-8); background-color:transparent;background-image:var(--badge-shape);background-position:0 0;background-size:100% 100%;background-repeat:no-repeat; color:var(--white);font-family:var(--font-neo);font-weight:800;font-size:var(--size-44); } [data-section="DetailLayout"] .text-number{--badge-shape:url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/badge-primary.svg);} [data-section="DetailLayout"] .text-badge{--badge-shape:url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/badge-black.svg);margin:0 auto;} [data-section="DetailLayout"] .text-title{display:-webkit-box;max-height:2.6em;margin-top:var(--size-24);font-size:var(--size-72);font-family:var(--font-neo);line-height:1.3;color:var(--black);word-break:break-all;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;} /* .goods-detail .text-title{max-height:2.6em;margin-top:var(--size-24);font-size:var(--size-72);font-family:var(--font-neo);line-height:1.3;color:var(--black);word-break:break-all;overflow:hidden;} */ [data-section="DetailLayout"] .text-desc{margin-top:var(--size-28);line-height:1.5;} /* 20260918 UPS 캡션추가 */ [data-section="DetailLayout"] .text-caption{margin:var(--size-24) 0;font-size:var(--size-28);color:rgba(0, 0, 0, 0.4);} [data-section="DetailLayout"] .text-card{margin-top:var(--size-40);padding:var(--size-64);border-radius:var(--radius-lg);background:var(--bg-neutral);} [data-section="DetailLayout"] .text-card .text-card-title{font-weight:800;color:var(--primary);} [data-section="DetailLayout"] .text-card .text-card-title ~ .text-card-title{margin-top:var(--size-40);} [data-section="DetailLayout"] .text-card .text-desc-bullet{margin-top:var(--size-16);} /* 블릿 목록 스타일 */ [data-section="DetailLayout"] .text-desc-bullet{margin-top:var(--size-28);} [data-section="DetailLayout"] .text-desc-bullet li{position:relative;padding-left:var(--size-30);line-height:1.5;} [data-section="DetailLayout"] .text-desc-bullet li + li{margin-top:var(--size-8);} [data-section="DetailLayout"] .text-desc-bullet li::after{content:'';position:absolute;top:var(--size-22);left:0;width:var(--size-14);height:var(--size-14);border-radius:50%;background:var(--primary);} /* 숫자 목록 스타일 */ [data-section="DetailLayout"] .text-desc-number{margin-top:var(--size-28);counter-reset:text-desc-number;} [data-section="DetailLayout"] .text-desc-number li{position:relative;padding-left:var(--size-40);line-height:1.5;counter-increment:text-desc-number;} [data-section="DetailLayout"] .text-desc-number li + li{margin-top:var(--size-5);} [data-section="DetailLayout"] .text-desc-number li::before{content:counter(text-desc-number) '.';position:absolute;top:0;left:0;font-weight:800;} /* ── [에디터 추가] 본문 리치텍스트 목록 — 클래스 없는 목록도 디자인 목록과 같은 모양 (CDN 반영 필요, 2026-09-16) ── 편집기는 목록에 디자인 클래스를 붙인다(config.jsx bodyRichText: ul → text-desc-bullet, ol → text-desc-number). 붙여넣기 등으로 클래스가 없는 목록은 전역 *{list-style:none} 때문에 기호가 사라지므로, 위 디자인 규칙과 **같은 선언**을 그대로 준다 — 점은 li::after(--size-14 원), 번호는 li::before(counter), 들여쓰기 30/40. html2canvas 제약(파일 첫머리)으로 ::marker·list-style 기호는 쓰지 않는다. */ [data-section="DetailLayout"] .text-desc ul:not(.text-desc-bullet){margin-top:var(--size-28);} [data-section="DetailLayout"] .text-desc ul:not(.text-desc-bullet) > li{position:relative;padding-left:var(--size-30);line-height:1.5;list-style:none;} [data-section="DetailLayout"] .text-desc ul:not(.text-desc-bullet) > li + li{margin-top:var(--size-8);} [data-section="DetailLayout"] .text-desc ul:not(.text-desc-bullet) > li::after{content:'';position:absolute;top:var(--size-22);left:0;width:var(--size-14);height:var(--size-14);border-radius:50%;background:var(--primary);} [data-section="DetailLayout"] .text-desc ol:not(.text-desc-number){margin-top:var(--size-28);counter-reset:text-desc-number;} [data-section="DetailLayout"] .text-desc ol:not(.text-desc-number) > li{position:relative;padding-left:var(--size-40);line-height:1.5;counter-increment:text-desc-number;list-style:none;} [data-section="DetailLayout"] .text-desc ol:not(.text-desc-number) > li + li{margin-top:var(--size-5);} [data-section="DetailLayout"] .text-desc ol:not(.text-desc-number) > li::before{content:counter(text-desc-number) '.';position:absolute;top:0;left:0;font-weight:800;} [data-section="DetailLayout"] .text-desc-bullet *, [data-section="DetailLayout"] .text-desc-number *{list-style:none;} [data-section="DetailLayout"] .text-note{margin-top:var(--size-40);padding:var(--size-44) var(--size-64);border-radius:var(--radius-lg);background:#F3F3F3;line-height:1.4;} [data-section="DetailLayout"] .text-note .text-note-title{position:relative;padding-left:var(--size-54);font-weight:800;} [data-section="DetailLayout"] .text-note .text-note-title::before{content:'';position:absolute;top:var(--size-8);left:0;width:var(--size-40);height:var(--size-40);background:url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/icon-arrow.svg) 0 0/100% no-repeat;} [data-section="DetailLayout"] .text-note .text-note-desc{margin-top:var(--size-12)} /* 한눈에 보기 */ [data-section="DetailLayout"] .summary-block{padding:var(--size-80) var(--size-40);margin-top:var(--size-64);border:var(--size-2) solid var(--primary);border-radius:var(--radius-lg);background:var(--bg-tinted);text-align:center;} [data-section="DetailLayout"] .summary-block .text-title{margin-top:0;} [data-section="DetailLayout"] .summary-block .text-title span{position:relative;z-index:1;} [data-section="DetailLayout"] .summary-block .text-title span::after{content:'';position:absolute;right:-12px;bottom:var(--size-2);left:-12px;z-index:-1;height:var(--size-28);border-radius:var(--radius-lg);background:var(--bg-highlight);} [data-section="DetailLayout"] .summary-block .summary-desc{display:-webkit-box;max-height:2.6em;margin-top:var(--size-40);overflow:hidden;font-size:var(--size-44);font-weight:800;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;} [data-section="DetailLayout"] .summary-block .summary-list{display:inline-grid;gap:var(--size-16);margin:var(--size-54) var(--size-28) 0;} [data-section="DetailLayout"] .summary-block .summary-desc + .summary-list{position:relative;margin-top:var(--size-40);padding-top:var(--size-40);} [data-section="DetailLayout"] .summary-block .summary-desc + .summary-list::before{content:'';position:absolute;top:0;left:50%;margin-left:calc(var(--size-651) * -0.5);width:var(--size-651);height:var(--size-2);background:url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/divider-item-primary.svg) 0 0/100% var(--size-2) no-repeat;} [data-section="DetailLayout"] .summary-block .summary-list li{position:relative;padding-left:var(--size-72);font-size:var(--size-44);font-weight:600;text-align:left;} [data-section="DetailLayout"] .summary-block .summary-list li::before{content:'';position:absolute;top:var(--size-8);left:0;width:var(--size-42);height:var(--size-42);border:var(--size-2) solid var(--black);border-radius:50%;background:var(--primary);box-sizing:border-box;} [data-section="DetailLayout"] .summary-block .summary-list li::after{content:'';position:absolute;top:var(--size-24);left:var(--size-14);width:var(--size-16);height:var(--size-12);background:url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/icon-check.svg) 50% 50%/100% 100% no-repeat;} [data-section="DetailLayout"] .summary-block .summary-list li:nth-child(even)::before{background:var(--secondary);} /* ── [에디터 추가] 한 눈에 보기 항목 한 줄 말줄임 — CDN 반영 필요 (2026-09-15) ── 항목은 줄바꿈 없이 한 줄로만 보이고, 블록 폭을 넘으면 말줄임(…)으로 자른다. .summary-list 는 내용 폭에 맞춰 줄어드는 inline-grid 라 줄바꿈만 막으면 긴 문장이 목록을 블록 밖으로 넓힌다 → 목록 폭을 블록 안(좌우 margin 28 제외)으로 묶고, 항목 최소 폭을 0 으로 풀어 넘친 부분이 잘리게 한다. 체크 아이콘(::before/::after)은 li 왼쪽 여백(padding-left 72) 안에 있어 overflow:hidden 에 잘리지 않는다. */ [data-section="DetailLayout"] .summary-block .summary-list{max-width:calc(100% - var(--size-28) * 2);} [data-section="DetailLayout"] .summary-block .summary-list li{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} /* 이렇게 담았어요 */ [data-section="DetailLayout"] .product-point-block{margin-top:var(--size-64);padding:var(--size-120) var(--size-40) var(--size-80);background:var(--primary);} [data-section="DetailLayout"] .product-point-block .text-title{margin:0 0 var(--size-40);color:var(--white);text-align:center;} [data-section="DetailLayout"] .product-point-block .detail-image{border-radius:var(--radius-lg) var(--radius-lg) 0 0;} [data-section="DetailLayout"] .product-point-list{display:flex;flex-direction:column;gap:var(--size-40);padding:var(--size-60) var(--size-40);background:var(--bg-tinted);border-radius:0 0 var(--radius-lg) var(--radius-lg);} [data-section="DetailLayout"] li h3{display:flex;gap:var(--size-20);font-weight:800;color:var(--black);} [data-section="DetailLayout"] li h3 span{flex:0 0 auto;} [data-section="DetailLayout"] .product-point-list .text-desc-bullet{margin:var(--size-8) 0 0 var(--size-8);} [data-section="DetailLayout"] .product-point-list .text-desc-bullet li + li{margin-top:0;} /* 생산자 이야기 */ [data-section="DetailLayout"] .story-block{margin-top:var(--size-64);padding:var(--size-120) var(--size-40) var(--size-80);background:var(--bg-story);} [data-section="DetailLayout"] .story-block .text-block{padding:0;margin:0 var(--size-24)} [data-section="DetailLayout"] .story-block .text-label{display:inline-flex;align-items:center;padding:var(--size-12) var(--size-24);border-radius:var(--size-20);background:var(--black);color:var(--white);font-weight:800;} [data-section="DetailLayout"] .story-block .text-desc{margin-top:var(--size-24);} [data-section="DetailLayout"] .story-block .text-note{background:var(--bg-neutral);} /* 이런 상품도 있어요 */ [data-section="DetailLayout"] .lineup-block{margin-bottom:var(--size-80);} [data-section="DetailLayout"] .lineup-block .text-block .text-badge{--badge-shape:url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/badge-primary.svg);--badge-icon:url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/icon-lineup.svg);background-image:var(--badge-icon), var(--badge-shape);background-position:53.39% 54.64%, 0 0;background-size:42.85% 66.21%, 100% 100%;font-size:0;} [data-section="DetailLayout"] .lineup-block .text-block .text-title{text-align:center;} /* 활용법 */ [data-section="DetailLayout"] .serving-block{padding:var(--size-120) var(--size-40) var(--size-80);background:var(--bg-neutral);} [data-section="DetailLayout"] .serving-block .text-block{padding:0;text-align:center;} [data-section="DetailLayout"] .serving-block .text-block .text-badge{--badge-shape:url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/badge-serving.svg);font-size:0;} [data-section="DetailLayout"] .serving-list li{margin-top:var(--size-64);border-radius:var(--radius-lg);background:var(--white);overflow:hidden;} [data-section="DetailLayout"] .serving-list .serving-image{position:relative;} [data-section="DetailLayout"] .serving-list .serving-content{padding:var(--size-40);} [data-section="DetailLayout"] .serving-list .serving-content h3{font-weight:800;line-height:1.4;color:var(--black);} [data-section="DetailLayout"] .serving-list .serving-content p{margin-top:var(--size-8);line-height:1.4;} /* 자주 묻는 질문 */ [data-section="DetailLayout"] .qna-block{padding:var(--size-120) var(--size-40) var(--size-80);background:var(--primary);} [data-section="DetailLayout"] .qna-block .text-block{padding:0;text-align:center;color:var(--white);} [data-section="DetailLayout"] .qna-block .text-block .text-badge{--badge-shape:url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/badge-white.svg);color:var(--primary);} [data-section="DetailLayout"] .qna-block .text-block .text-title{color:var(--white);} [data-section="DetailLayout"] .qna-list{display:grid;} [data-section="DetailLayout"] .qna-list .qna-item{margin-top:var(--size-40);padding:var(--size-64) var(--size-40);border-radius:var(--radius-lg);background:var(--bg-tinted);} [data-section="DetailLayout"] .qna-list .qna-item dt, [data-section="DetailLayout"] .qna-item dd{display:flex;gap:var(--size-24);line-height:1.4;} [data-section="DetailLayout"] .qna-list .qna-item dt{font-weight:800;color:var(--black);} [data-section="DetailLayout"] .qna-list .qna-item dd{margin-top:var(--size-24);} [data-section="DetailLayout"] .qna-list .qna-item span{font-weight:800;color:var(--black);} [data-section="DetailLayout"] .qna-list .qna-item dd span + span{font-weight:400;color:var(--black);} [data-section="DetailLayout"] .qna-button{display:flex;align-items:center;justify-content:center;width:100%;margin-top:var(--size-40);padding:var(--size-30) 0;border-radius:var(--size-20);background:rgba(255, 255, 255, 0.3);color:var(--white);font-weight:800;letter-spacing:-0.02em;cursor:pointer;} [data-section="DetailLayout"] .qna-button::after{content:'';display:block;flex:0 0 auto;width:var(--size-54);height:var(--size-54);margin-left:var(--size-5);background:url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/icon-arrow-down.svg) 50% 50%/100% 100% no-repeat;} [data-section="DetailLayout"] .qna-button.is-close::after{background-image:url(https://shop-pulmuone.edge.naverncp.com/newProduct21/common/images/icon-arrow-up.svg);} /* ── [에디터 추가] Q&A 더보기/접기 "동작" — CDN 반영 완료 2026-09-09 ───────── 위 CDN 규격(.qna-button / .is-close)은 버튼의 **모양만** 정의한다. 항목을 감추는 규칙이 없어서 JS 가 붙는 화면에서만 접힌다. 그런데 에디터가 저장하는 노출 HTML (contentDesc)에는 JS 가 없다 — 그대로 두면 FO 에서 아무것도 접히지 않고 더보기·접기 버튼이 둘 다 보인다. 그래서 **모양은 위 CDN 규칙을 그대로 쓰고, 동작만** 아래에서 얹는다. 체크박스 + 형제 선택자라 JS 가 필요 없고, 시각 속성은 하나도 정의하지 않는다 — 디자인이 바뀌면 CDN 쪽만 바뀌고 이 블록은 그대로 유효하다. 2026-08-27 개정에서 화살표가 transform:rotate → icon-arrow-up.svg 로 바뀌었을 때도 이 블록은 손댈 것이 없었다. ⚠️ 이 파일 첫머리의 html2canvas 제약(transform·::marker·mask·filter· repeating-linear-gradient 지양)은 이 블록에도 적용된다. 아래는 position/opacity/ display/outline 만 쓰므로 제약을 지킨다 — 규칙을 추가할 때도 유지할 것. 마크업 계약은 docs/sample/v2_type_1/README.md 의 "Q&A 더보기/접기" 절 참고. 샘플의 더보기/접기