{"version":3,"file":"BlogBody.Ch2vsV_a.mjs","names":[],"sources":["https:/framerusercontent.com/modules/NnndK6fexQYjX852K7bG/8Jbqf0wkcODpYIXrqCPo/BlogBody.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";/**\n * 블로그 본문.\n *\n * CMS 리치텍스트를 그대로 받아, 원본 사이트(save-tax.co.kr/blog/[slug])의 CSS 를 입힌다.\n * 원본은 컨테이너가 flex 세로 컬럼이라 이미지·표가 stretch 로 폭을 꽉 채우는데,\n * Framer 기본 리치텍스트 렌더러는 이미지에 고정 크기(width/height 속성)를 박아 넣는다.\n * 그래서 이미지 계열만 !important 로 덮어쓴다.\n *\n * 콘텐츠 편집은 Framer CMS 리치텍스트 에디터에서 그대로 한다.\n *\n * @framerIntrinsicWidth 720\n * @framerIntrinsicHeight 400\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n */export default function BlogBody(props){const{content,style}=props;return /*#__PURE__*/_jsxs(\"div\",{style:{width:\"100%\",...style},children:[/*#__PURE__*/_jsx(\"style\",{children:CSS}),/*#__PURE__*/_jsx(\"div\",{className:\"stx-post\",children:content})]});}addPropertyControls(BlogBody,{content:{type:ControlType.RichText,title:\"Content\"}});const FONT=`Pretendard, sans-serif`;/**\n * 원본 사이트에서 .wp-view-content-global-style 에 실제로 계산된 값(computed style)을 그대로 옮긴 것.\n *\n * 원본의 캐스케이드는 세 겹이다 —\n *   1) pages/blog/[slug]/styles.module.scss  → 폰트(17/26/-0.4px, Pretendard)\n *   2) components/Blog/StyleHead 인라인 style → color, flex+gap:32px, a/ul/ol/li/img, WP 프리셋 변수\n *   3) @wordpress/block-library CSS          → h1~h6 clamp() 크기, .wp-block-table 표 스타일\n *\n * 원본에는 .wp-view-content-global-style 을 겨냥한 미디어쿼리가 하나도 없다.\n * 즉 본문 17px/26px 과 gap 32px, 표 padding 8.5px 는 모든 화면폭에서 고정이고,\n * 화면폭에 따라 변하는 것은 h1~h6 의 clamp() 뿐이다. 그래서 여기서도 clamp() 를 그대로 쓴다.\n */const CSS=`\n.stx-post {\n    display: flex;\n    flex-direction: column;\n    gap: 32px;\n    width: 100%;\n    font-family: ${FONT};\n    font-size: 17px;\n    font-weight: 400;\n    line-height: 26px;\n    letter-spacing: -0.4px;\n    color: #3c434a;\n    word-break: keep-all;\n    overflow-wrap: normal;\n}\n\n/** 원본: .wp-view-content-global-style * { margin: 0; white-space: normal } */\n.stx-post * {\n    margin: 0;\n    margin-block: 0;\n    margin-inline: 0;\n    white-space: normal;\n}\n\n/** 원본 h1~h6 는 WP 테마의 clamp() 라 뷰포트 폭에 따라 연속적으로 변한다 */\n.stx-post h1, .stx-post h2, .stx-post h3,\n.stx-post h4, .stx-post h5, .stx-post h6 {\n    font-family: ${FONT};\n    font-weight: 400;\n    line-height: 1.4;\n    letter-spacing: -0.4px;\n    color: #3c434a;\n}\n.stx-post h1 {\n    font-size: clamp(2.032rem, 2.032rem + ((1vw - 0.2rem) * 2.896), 3.625rem);\n    line-height: 1.2;\n}\n.stx-post h2 {\n    font-size: clamp(2.625rem, 2.625rem + ((1vw - 0.48rem) * 8.4135), 3.25rem);\n    line-height: 1.2;\n}\n.stx-post h3 { font-size: 2.25rem; }\n.stx-post h4 {\n    font-size: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.227), 1.875rem);\n}\n.stx-post h5 {\n    font-size: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.227), 1.125rem);\n    font-weight: 700;\n    text-transform: uppercase;\n}\n.stx-post h6 {\n    font-size: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.227), 1.125rem);\n    text-transform: uppercase;\n}\n\n.stx-post strong, .stx-post b { font-weight: 700; }\n.stx-post em, .stx-post i { font-style: italic; }\n.stx-post s { text-decoration: line-through; }\n.stx-post u { text-decoration: underline; }\n\n/** Framer 리치텍스트는 이미지에 고정 width/height 를 넣으므로 덮어쓴다 */\n.stx-post figure {\n    display: block !important;\n    width: 100% !important;\n    max-width: 100% !important;\n    height: auto !important;\n    text-align: center;\n}\n.stx-post img,\n.stx-post .framer-image {\n    display: block !important;\n    width: 100% !important;\n    max-width: 100% !important;\n    height: auto !important;\n    aspect-ratio: auto !important;\n    border-radius: 15px;\n    object-fit: cover;\n}\n.stx-post figcaption {\n    margin: 6.5px 0 13px;\n    font-size: 13px;\n    line-height: 26px;\n    color: #555;\n    text-align: center;\n}\n\n.stx-post a { color: #0489b1; text-decoration: underline; }\n\n.stx-post ul, .stx-post ol { padding-inline-start: 20px; }\n.stx-post ul { list-style: disc; }\n.stx-post ol { list-style: decimal; }\n.stx-post li { list-style: inherit; }\n\n/** 원본 표는 .wp-block-table 값 */\n.stx-post table {\n    width: 100%;\n    border-collapse: collapse;\n    text-align: center;\n}\n.stx-post th, .stx-post td {\n    border: 1px solid #3c434a;\n    padding: 8.5px;\n    font-size: 17px;\n    line-height: 26px;\n}\n.stx-post th { font-weight: 700; }\n\n/** 원본에는 blockquote/hr 전용 스타일이 없다 — 브라우저 기본값 그대로 */\n.stx-post blockquote { padding: 0; border: none; }\n.stx-post hr { border: 1px inset; }\n`;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"BlogBody\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"400\",\"framerIntrinsicWidth\":\"720\",\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./BlogBody.map"],"mappings":"mKAcG,SAAwB,EAAS,EAAM,CAAC,GAAK,CAAC,UAAQ,SAAO,EAAM,OAAoB,EAAM,MAAM,CAAC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAK,EAAE,SAAS,CAAc,EAAK,QAAQ,CAAC,SAAS,CAAG,CAAC,EAAe,EAAK,MAAM,CAAC,UAAU,WAAW,SAAS,CAAO,CAAC,CAAC,CAAC,CAAC,CAAE,qBAdrM,IAAoD,EAckJ,EAAoB,EAAS,CAAC,QAAQ,CAAC,KAAK,EAAY,SAAS,MAAM,SAAS,CAAC,CAAC,EAAQ,EAAK,yBAWpV,EAAI;;;;;;mBAMM,EAAK;;;;;;;;;;;;;;;;;;;;;mBAqBL,EAAK"}