/* Theme Name: WI-TH Theme Theme URI: https://wi-th.com/ Author: WI-TH Description: WI-TH 전용 독립 WordPress 테마. Astra/자식테마 의존 없이 헤더, 홈, 아카이브, 검색, 본문, 무한스크롤, Masonry, 이미지, 관련글 모듈을 직접 제어합니다. Version: 1.5.50.27 Requires at least: 6.4 Requires PHP: 8.0 Text Domain: wi-th-theme */ /* ---------- Reset / Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:#fff;color:#1f2937;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif;line-height:1.65} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto} button,input,select,textarea{font:inherit} .screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .screen-reader-text:focus{position:fixed!important;top:8px;left:8px;width:auto!important;height:auto!important;padding:10px 14px!important;margin:0!important;clip:auto!important;z-index:100000;background:#fff;color:#111} /* ---------- Theme shell ---------- */ .with-site{min-height:100vh;display:flex;flex-direction:column} .with-site-main{flex:1} .with-container{width:min(1200px,calc(100% - 32px));margin:0 auto} .with-content-shell{padding:16px 0 48px} .with-main-content{min-width:0} .with-site-footer{border-top:1px solid rgba(0,0,0,.08);padding:28px 0;color:#667085;font-size:.86rem} .with-footer-inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .with-primary-nav{margin-left:auto} .with-primary-nav ul{list-style:none;display:flex;align-items:center;gap:18px;margin:0;padding:0} .with-primary-nav a{font-size:.92rem;color:#475467} .with-primary-nav a:hover{color:#111827} /* ---------- Default loop fallback ---------- */ .with-default-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .with-default-card{border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;background:#fff} .with-default-card-thumb{display:block;aspect-ratio:16/9;overflow:hidden} .with-default-card-thumb img{width:100%;height:100%;object-fit:cover;display:block} .with-default-card-body{padding:14px} .with-default-card h2,.with-default-card h3{margin:0;font-size:1rem;line-height:1.45} .with-default-card p{margin:8px 0 0;color:#667085;font-size:.88rem} /* ---------- Single/Page: WordPress/Astra-like content baseline ---------- */ .with-entry{width:100%} .with-entry-header{margin:4px 0 var(--with-title-content-gap,22px)} .with-entry-title{font-size:var(--with-h1-size,36px);line-height:1.25;margin:0} .with-entry-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px 10px;margin-top:10px;color:#667085;font-size:.84rem;line-height:1.4} .with-entry-meta{color:#667085;font-size:.84rem} .with-entry-author{color:#667085} .with-entry-category-list{display:inline-flex;flex-wrap:wrap;gap:5px;align-items:center} .with-entry-category{display:inline-flex;align-items:center;padding:4px 7px;border:1px solid #d7dde5;border-radius:4px;background:#f7f9fc;color:#27364a;font-size:.84rem;font-weight:400;line-height:1.3;text-decoration:none!important} .with-entry-category:hover,.with-entry-category:focus{background:#eef3f8;border-color:#c7d1dd} .with-entry-featured{margin:0 0 24px} .with-entry-featured img{display:block;width:100%;border-radius:10px} /* Responsive article system: one source of truth for desktop + mobile. 1.5.35 removes duplicate mobile article styling. Change these shared rules once and desktop/mobile scale together through clamp(). */ .with-entry-content{ --with-body-size:16px; --with-h2-size:26px; --with-h3-size:22px; --with-h4-size:18px; --with-table-size:clamp(13px,calc(11.7px + .36vw),16px); --with-box-pad-y:clamp(16px,1.65vw,18px); --with-box-pad-x:clamp(16px,1.85vw,20px); --with-box-radius:clamp(10px,1vw,12px); --with-h2-top:clamp(36px,3.7vw,44px); --with-h2-bottom:clamp(18px,1.8vw,20px); --with-h3-top:clamp(28px,2.7vw,32px); --with-h3-bottom:clamp(12px,1.3vw,14px); --with-cell-y:clamp(5px,.9vw,10px); --with-cell-x:clamp(4px,1.05vw,12px); font-size:var(--with-body-size);line-height:1.8;overflow-wrap:anywhere;color:#1f2937 } .with-entry-content>:first-child{margin-top:0} .with-entry-content>:last-child{margin-bottom:0} .with-entry-content p{margin:0 0 1.5em} .with-entry-content h1,.with-entry-content h2,.with-entry-content h3,.with-entry-content h4,.with-entry-content h5,.with-entry-content h6{color:#1f2937;font-weight:600;clear:both;margin:1.6em 0 .65em;line-height:1.35} .with-entry-content h1{font-size:2em}.with-entry-content h2{font-size:var(--with-h2-size)}.with-entry-content h3{font-size:var(--with-h3-size)}.with-entry-content h4{font-size:var(--with-h4-size)}.with-entry-content h5{font-size:1em}.with-entry-content h6{font-size:.9em} .with-entry-content ul,.with-entry-content ol{margin:0 0 1.5em 1.4em;padding-left:.8em} .with-entry-content li{margin:.35em 0} .with-entry-content ul ul,.with-entry-content ul ol,.with-entry-content ol ul,.with-entry-content ol ol{margin-top:.35em;margin-bottom:.35em} .with-entry-content a:not(.wp-element-button){color:#2563eb;text-decoration:underline;text-underline-offset:2px} .with-entry-content strong,.with-entry-content b{font-weight:700} .with-entry-content blockquote,.with-entry-content .wp-block-quote{margin:1.5em 0;padding:.8em 1.2em;border-left:4px solid #cbd5e1;background:#f8fafc;color:#475569} .with-entry-content blockquote p:last-child{margin-bottom:0} .with-entry-content pre,.with-entry-content .wp-block-code{max-width:100%;overflow:auto;padding:1em;border:1px solid #e5e7eb;border-radius:4px;background:#f8fafc;white-space:pre} .with-entry-content code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.92em} .with-entry-content p code,.with-entry-content li code{padding:.12em .35em;border-radius:3px;background:#f1f5f9} .with-entry-content hr,.with-entry-content .wp-block-separator{border:0;border-top:1px solid #e5e7eb;margin:2em auto} .with-entry-content iframe,.with-entry-content video,.with-entry-content embed,.with-entry-content object{max-width:100%} .with-entry-content figure{max-width:100%;margin:0 0 1.5em} .with-entry-content figcaption,.with-entry-content .wp-element-caption{margin-top:.5em;color:#667085;font-size:.85em;text-align:center} .with-entry-content img{height:auto} /* Core block presentation. */ .with-entry-content .wp-block-image{margin-bottom:1.5em} .with-entry-content .wp-block-image img{display:block} .with-entry-content .wp-block-gallery{margin-bottom:1.5em} .with-entry-content .wp-block-button{margin-bottom:1.25em} .with-entry-content .wp-block-button__link,.with-entry-content .wp-element-button{display:inline-block;text-decoration:none} .with-entry-content .wp-block-columns{gap:2em;margin-bottom:1.5em} .with-entry-content .wp-block-group{margin-bottom:1.5em} .with-entry-content .wp-block-cover{margin-bottom:1.5em} .with-entry-content .wp-block-embed{margin:0 0 1.5em} .with-entry-content .aligncenter{margin-left:auto;margin-right:auto;text-align:center} .with-entry-content .alignleft{float:left;margin:.4em 1.5em 1em 0} .with-entry-content .alignright{float:right;margin:.4em 0 1em 1.5em} .with-entry-content::after{content:"";display:table;clear:both} /* WI-TH section zones: independent boundaries for content/ad placement. */ .with-entry-content .with-content-zone{width:100%;max-width:100%;box-sizing:border-box} /* Explicit post content/module/ad boundaries. Keep these as independent full-width DOM zones so Ad Inserter hooks/selectors never have to infer section borders. */ .with-entry-content>.with-content-zone, .with-entry-content>.with-post-section, .with-entry-content>.with-zone-ad{display:block;clear:both;width:100%;box-sizing:border-box} .with-entry-content>.with-zone-content, .with-entry-content>.with-zone-related, .with-entry-content>.with-zone-recommended, .with-entry-content>.with-zone-latest, .with-entry-content>.with-zone-category{position:relative} .with-entry-content>.with-zone-ad{min-width:0} /* Canonical WI-TH headings: fluid values shared by desktop and mobile. */ .with-entry-content .wi-th-section-heading{margin-top:var(--with-h2-top);margin-bottom:var(--with-h2-bottom);padding:clamp(6px,.65vw,8px) 0;line-height:1.45} .with-entry-content .wi-th-subsection-heading{margin-top:var(--with-h3-top);margin-bottom:var(--with-h3-bottom);line-height:1.5} /* Canonical SUMMARY / FINAL boxes: one responsive rule, no mobile duplicate. */ .with-entry-content .wi-th-summary-box, .with-entry-content .wi-th-final-box{width:100%;box-sizing:border-box;border:0;border-radius:var(--with-box-radius);box-shadow:none;padding:var(--with-box-pad-y) var(--with-box-pad-x);line-height:1.7;margin:clamp(20px,2vw,24px) 0 clamp(26px,2.5vw,30px)} .with-entry-content .wi-th-summary-box{background:#f6f1e6} .with-entry-content .wi-th-final-box{background:#f1ead9} .with-entry-content .wi-th-summary-box>:first-child, .with-entry-content .wi-th-final-box>:first-child{margin-top:0} .with-entry-content .wi-th-summary-box>:last-child, .with-entry-content .wi-th-final-box>:last-child{margin-bottom:0} .with-entry-content .wi-th-summary-box p, .with-entry-content .wi-th-final-box p{line-height:1.7} /* Cluster navigation inside the preview-summary box. */ .with-entry-content .wi-th-cluster-nav{display:flex;flex-wrap:wrap;gap:clamp(5px,.55vw,6px);margin:clamp(12px,1.15vw,14px) 0 0!important} .with-entry-content .wi-th-cluster-button{display:inline-flex;align-items:center;max-width:100%;padding:3px 8px;border:1px solid #d7dde5;border-radius:5px;background:#f7f9fc;color:#27364a;font-size:.85em;line-height:1.45;text-decoration:none!important;overflow-wrap:anywhere} .with-entry-content .wi-th-cluster-button.is-current{font-weight:700;border-color:#b9c3d0;background:#eef2f7} .with-entry-content .wi-th-cluster-button.is-pending{opacity:.72} /* WI-TH table contract: same responsive rule on every viewport. */ .with-entry-content figure.wp-block-table{display:block;width:100%;max-width:100%;margin:0 0 1.5em;overflow-x:auto;-webkit-overflow-scrolling:touch} .with-entry-content figure.wp-block-table table, .with-entry-content table{width:100%;max-width:100%;margin:0;border-collapse:collapse;border-spacing:0;table-layout:auto;background:#fff;font-size:var(--with-table-size);line-height:clamp(1.34,1.4,1.5)} .with-entry-content table th, .with-entry-content table td{padding:var(--with-cell-y) var(--with-cell-x);border:1px solid #c8ba93;text-align:center;vertical-align:middle;word-break:keep-all;overflow-wrap:break-word} .with-entry-content table th{font-weight:600;background:#e9ddbd;border-color:#9f8953} .with-entry-content table thead th{border-color:#9f8953} .with-entry-content table tbody tr:nth-child(even){background:transparent} .with-entry-content .wp-block-table.is-style-stripes{border-bottom:0} .with-entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd){background:#faf7ef} .with-entry-content .wp-block-table figcaption{margin:.55em 0 0} /* Only structural behavior remains breakpoint-specific; visual article values above are shared. */ @media(max-width:782px){ .with-entry-content .alignleft,.with-entry-content .alignright{float:none;margin-left:0;margin-right:0} } /* ---------- Archive heading ---------- */ .with-archive-heading{margin:4px 0 20px} .with-archive-heading h1{margin:0;font-size:1.7rem;line-height:1.3} .with-archive-heading p{margin:6px 0 0;color:#667085} /* ---------- Pagination ---------- */ .with-pagination{margin-top:28px} .with-pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap} .with-pagination .page-numbers{display:inline-flex;min-width:36px;height:36px;align-items:center;justify-content:center;border:1px solid #e5e7eb;border-radius:6px;padding:0 10px} .with-pagination .current{background:#111827;color:#fff;border-color:#111827} @media(max-width:921px){ .with-container{width:calc(100% - 24px)} .with-default-list{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:544px){ .with-container{width:calc(100% - 20px)} .with-content-shell{padding-top:12px} .with-primary-nav{display:none} .with-default-list{grid-template-columns:1fr} .with-entry-title{font-size:var(--with-h1-size,1.65rem)} } /* Ver 1.5.39: WI-TH Inserter copyright stays at the visual end of the content section. */ .single-post #with-section-content .with-entry-content .wi-th-copyright{ display:block; width:100%; box-sizing:border-box; clear:both; margin:clamp(18px,2.2vw,28px) 0 0; text-align:right; } /* ========================================================= Ver 1.5.49 — mobile body typography authority - Customizer body/H1/H2/H3/H4 sizes remain authoritative on mobile. - Remove legacy box/border decoration from post-module headings. ========================================================= */ @media (max-width:782px){ .single-post .with-entry-header .with-entry-title{ font-size:var(--with-h1-size)!important; } .single-post #with-section-content .with-entry-content.entry-content{ font-size:var(--with-body-size)!important; } /* Body size must be applied directly to text blocks. Using inherit here allowed Gutenberg/group/mobile rules on an intermediate parent to override the Customizer value. */ .single-post #with-section-content .with-entry-content.entry-content p, .single-post #with-section-content .with-entry-content.entry-content li, .single-post #with-section-content .with-entry-content.entry-content blockquote, .single-post #with-section-content .with-entry-content.entry-content dd, .single-post #with-section-content .with-entry-content.entry-content dt, .single-post #with-section-content .with-entry-content.entry-content figcaption{ font-size:var(--with-body-size)!important; } /* Inline formatting inside normal body text follows that exact body size. Headings, tables, buttons and code keep their own dedicated sizing. */ .single-post #with-section-content .with-entry-content.entry-content p :where(span,strong,b,em,i,a,mark), .single-post #with-section-content .with-entry-content.entry-content li :where(span,strong,b,em,i,a,mark), .single-post #with-section-content .with-entry-content.entry-content blockquote :where(span,strong,b,em,i,a,mark), .single-post #with-section-content .with-entry-content.entry-content dd :where(span,strong,b,em,i,a,mark), .single-post #with-section-content .with-entry-content.entry-content dt :where(span,strong,b,em,i,a,mark){ font-size:inherit!important; } .single-post #with-section-content .with-entry-content.entry-content h2, .single-post #with-section-content .with-entry-content.entry-content .wi-th-section-heading{ font-size:var(--with-h2-size)!important; } .single-post #with-section-content .with-entry-content.entry-content h3, .single-post #with-section-content .with-entry-content.entry-content .wi-th-subsection-heading{ font-size:var(--with-h3-size)!important; } .single-post #with-section-content .with-entry-content.entry-content h4{ font-size:var(--with-h4-size)!important; } } .single-post .with-post-section>.with-post-header, .single-post .with-post-section>.with-post-header .with-post-title, .single-post .with-post-section>.with-post-header .with-post-title>a{ border:0!important; border-top:0!important; border-right:0!important; border-bottom:0!important; border-left:0!important; outline:0!important; box-shadow:none!important; } .single-post .with-post-section>.with-post-header:before, .single-post .with-post-section>.with-post-header:after, .single-post .with-post-section>.with-post-header .with-post-title:before, .single-post .with-post-section>.with-post-header .with-post-title:after{ border:0!important; box-shadow:none!important; } /* ========================================================== Ver 1.5.46 — Single post meta parity - Author label is rendered as fixed "devpick" in single.php. - Keep single-post category links visually identical on mobile. ========================================================== */ @media (max-width: 768px){ .single-post .with-entry-meta-row{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:7px 10px!important; } .single-post .with-entry-category-list{ display:inline-flex!important; flex-wrap:wrap!important; align-items:center!important; gap:5px!important; margin:0!important; padding:0!important; } .single-post .with-entry-category-list .with-entry-category{ display:inline-flex!important; align-items:center!important; width:auto!important; min-width:0!important; min-height:0!important; margin:0!important; padding:4px 7px!important; border:1px solid #d7dde5!important; border-radius:4px!important; background:#f7f9fc!important; color:#27364a!important; font-size:.78rem!important; font-weight:400!important; line-height:1.3!important; text-decoration:none!important; box-shadow:none!important; } .single-post .with-entry-category-list .with-entry-category:hover, .single-post .with-entry-category-list .with-entry-category:focus{ background:#eef3f8!important; border-color:#c7d1dd!important; } } /* ========================================================= Ver 1.5.50.4 — Mobile WI-TH style.css compatibility - Keep desktop rules unchanged. - Restore the original mobile table contract from the site's WI-TH style CSS: 1~3 columns fit the viewport, 4+ columns scroll horizontally, and the first column stays sticky on wide tables. - This block intentionally touches article content only; card/ad layouts are excluded. ========================================================= */ /* Single-post category badge sizing remains unchanged. */ .single-post .with-entry-category{ font-size:.84rem!important; padding:4px 8px!important; } @media (max-width:782px){ /* Mobile content width safety from the original WI-TH style CSS. */ .single-post .entry-content, .single-post .entry-content > *, .single-post .entry-content .wp-block-group, .single-post .entry-content .wp-block-columns, .single-post .entry-content .wp-block-column, .single-post .entry-content .wp-block-media-text, .single-post .entry-content .wp-block-cover, .single-post .entry-content figure, .single-post .entry-content img, .single-post .entry-content video, .single-post .entry-content iframe, .single-post .entry-content svg{ max-width:100%!important; box-sizing:border-box; } .single-post .entry-content img, .single-post .entry-content video, .single-post .entry-content iframe, .single-post .entry-content svg{height:auto} .single-post .entry-content pre{ max-width:100%; overflow-x:auto; white-space:pre; -webkit-overflow-scrolling:touch; } } @media (max-width:768px){ /* Original WI-TH mobile heading/box spacing. Font sizes still come from Customizer variables. */ .single-post .entry-content h2.wi-th-section-heading{ margin-top:36px!important; margin-bottom:18px!important; padding:6px 0!important; line-height:1.5!important; } .single-post .entry-content h3.wi-th-subsection-heading{ margin-top:28px!important; margin-bottom:12px!important; } .single-post .entry-content .wi-th-summary-box, .single-post .entry-content .wi-th-final-box, .single-post .entry-content .wp-block-group.wi-th-summary-box, .single-post .entry-content .wp-block-group.wi-th-final-box{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; margin:20px 0 26px!important; padding:16px!important; border:0!important; border-radius:10px!important; box-shadow:none!important; line-height:1.7!important; overflow:visible!important; } .single-post .entry-content .wi-th-summary-box, .single-post .entry-content .wp-block-group.wi-th-summary-box{background:#f6f1e6!important} .single-post .entry-content .wi-th-final-box, .single-post .entry-content .wp-block-group.wi-th-final-box{background:#f1ead9!important} .single-post .entry-content .wp-block-columns.wi-th-visual-columns{gap:16px!important} /* Base mobile table typography from the original style CSS. */ .single-post .entry-content figure.wp-block-table{ width:100%!important; max-width:100%!important; margin:1.25em 0!important; padding-bottom:0!important; box-sizing:border-box!important; } .single-post .entry-content figure.wp-block-table > table{ width:100%!important; max-width:100%!important; margin-bottom:0!important; border-collapse:collapse!important; border-spacing:0!important; table-layout:auto!important; font-size:13px!important; line-height:1.34!important; } .single-post .entry-content figure.wp-block-table > table :is(th,td){ box-sizing:border-box!important; padding:5px 4px!important; border:1px solid #c8ba93!important; font-size:13px!important; line-height:1.34!important; height:auto!important; min-height:0!important; text-align:center!important; vertical-align:middle!important; white-space:normal!important; word-break:keep-all!important; overflow-wrap:break-word!important; font-weight:400; } .single-post .entry-content figure.wp-block-table > table th{ background:#e9ddbd!important; border-color:#9f8953!important; border-bottom-width:2px!important; font-weight:600!important; } .single-post .entry-content figure.wp-block-table > table :is(th,td) > :is(p,div){ margin:0!important; padding-top:0!important; padding-bottom:0!important; min-height:0!important; line-height:inherit!important; } .single-post .entry-content figure.wp-block-table figcaption{ display:none!important; margin:0!important; padding:0!important; height:0!important; } /* 1~3-column tables: fit the phone viewport instead of forcing a 700px canvas. */ .single-post .entry-content figure.wp-block-table:not(:has(> table > thead > tr:first-child > :nth-child(4))){ overflow-x:visible!important; overflow-y:visible!important; } .single-post .entry-content figure.wp-block-table:not(:has(> table > thead > tr:first-child > :nth-child(4))) > table{ width:100%!important; min-width:0!important; max-width:100%!important; table-layout:auto!important; } /* 4+ columns: horizontal scrolling, readable width, sticky first column. */ .single-post .entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)), .single-post .entry-content figure.wp-block-table.wi-th-table-scroll, .single-post .entry-content figure.wp-block-table.wi-th-table-compare{ position:relative!important; overflow-x:auto!important; overflow-y:hidden!important; -webkit-overflow-scrolling:touch; isolation:isolate; } .single-post .entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) > table, .single-post .entry-content figure.wp-block-table.wi-th-table-scroll > table, .single-post .entry-content figure.wp-block-table.wi-th-table-compare > table{ width:max-content!important; min-width:640px!important; max-width:none!important; table-layout:auto!important; } .single-post .entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) > table :is(th,td):first-child{ position:sticky!important; left:0!important; min-width:120px!important; width:120px!important; max-width:120px!important; background:#fdfbf7!important; background-clip:padding-box!important; border-right:0!important; box-shadow:inset -2px 0 0 #8f7a48,7px 0 8px rgba(54,45,33,.12)!important; z-index:6!important; } .single-post .entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) > table thead th:first-child{ background:#e9ddbd!important; box-shadow:inset -2px 0 0 #8f7a48,7px 0 8px rgba(54,45,33,.12)!important; z-index:11!important; } /* Inserter-class fallback for compact 2~3-column tables. */ .single-post .entry-content figure.wp-block-table.wi-th-table-compact, .single-post .entry-content figure.wp-block-table.wi-th-table-card.wi-th-table-compact{ overflow-x:visible!important; overflow-y:visible!important; } .single-post .entry-content figure.wp-block-table.wi-th-table-compact > table, .single-post .entry-content figure.wp-block-table.wi-th-table-card.wi-th-table-compact > table, .single-post .entry-content figure.wp-block-table > table.wi-th-table-2col{ width:100%!important; min-width:0!important; max-width:100%!important; table-layout:auto!important; } } /* ========================================================= WI-TH CONTENT STYLE CANONICAL IMPORT — Ver 1.5.50.6 Source: previously-used WordPress Additional CSS. Ownership: article/content presentation only. Excluded on purpose: Astra footer/sidebar rules and old WI-TH Setting card/grid overrides. Customizer typography is emitted later in and remains the final font-size authority. ========================================================= */ /* * WI-TH STYLE — FINAL CLEAN DOCUMENTED * 기준: 2026-09-27 * 원칙: 사용하지 않는 과거 버전/비활성 CSS는 제거하고, * 현재 실제 동작하는 기능에는 유지보수용 주석만 남김. * * 현재 운영 기능 * - Gutenberg 표 기본 디자인 및 반응형 처리 * - 모바일 표 글자 크기 균형 / 4열 이상 좌우 스크롤 * - 표 하단 caption/빈 영역 숨김 * - SUMMARY / FINAL 박스 * - 관련글 / 추천글 / 인기글 카드 * - Gutenberg Columns 및 이미지 레이아웃 * - Media & Text 이미지 보정 * - Astra 데스크톱 사이드바 고정 * - 기존 호환용 활성 레이아웃 규칙 */ /* ===== Media & Text 이미지 표시 보정 ===== */ .single-post .entry-content figure.wp-block-media-text__media, .single-post .entry-content figure.wp-block-media-text__media a, .single-post .entry-content figure.wp-block-media-text__media img { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } .single-post .entry-content figure.wp-block-media-text__media { padding: 0 !important; } .single-post .entry-content figure.wp-block-media-text__media img { display: block; width: 100%; height: auto; margin: 0 !important; filter: none !important; } /* ===== Gutenberg Columns 이미지/간격 ===== */ .single-post .entry-content .wp-block-columns { gap: 16px; margin-top: 20px; margin-bottom: 24px; } .single-post .entry-content .wp-block-columns > .wp-block-column { min-width: 0; } .single-post .entry-content .wp-block-columns > .wp-block-column > figure.wp-block-image { width: 100%; margin-top: 0 !important; margin-bottom: 12px !important; } .single-post .entry-content .wp-block-columns > .wp-block-column > figure.wp-block-image img { display: block; width: 100%; height: auto; margin: 0 !important; } .single-post .entry-content .wp-block-columns > .wp-block-column > figure.wp-block-image + h2, .single-post .entry-content .wp-block-columns > .wp-block-column > figure.wp-block-image + h3, .single-post .entry-content .wp-block-columns > .wp-block-column > figure.wp-block-image + h4, .single-post .entry-content .wp-block-columns > .wp-block-column > figure.wp-block-image + p { margin-top: 0 !important; } @media (max-width: 781px) { .single-post .entry-content .wp-block-columns:not(.is-not-stacked-on-mobile) { gap: 16px; } } .single-post .entry-content .wi-th-visual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; width: 100%; margin: 20px 0 24px; } .single-post .entry-content .wi-th-visual-card { min-width: 0; overflow: hidden; border: 1px solid #e6dec9; border-radius: 16px; background: #ffffff; box-shadow: 0 5px 16px rgba(54, 45, 33, 0.07); } .single-post .entry-content .wi-th-visual-card figure, .single-post .entry-content .wi-th-visual-card img { width: 100%; margin: 0 !important; } .single-post .entry-content .wi-th-visual-card img { display: block; height: auto; } .single-post .entry-content .wi-th-visual-card-content { padding: 14px 16px 16px; } .single-post .entry-content .wi-th-visual-card-content > :first-child { margin-top: 0; } .single-post .entry-content .wi-th-visual-card-content > :last-child { margin-bottom: 0; } @media (max-width: 520px) { .single-post .entry-content .wi-th-visual-grid { grid-template-columns: 1fr; gap: 14px; } } .single-post .entry-content img, .single-post .entry-content .wi-th-visual-card img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } .single-post .entry-content figure.wi-th-image-unlinked > img, .single-post .entry-content figure.wi-th-image-unlinked img { pointer-events: none; } .single-post .entry-content .wi-th-visual-card a, .single-post .entry-content .wi-th-visual-card button, .single-post .entry-content .wp-block-button a { user-select: auto; -webkit-user-select: auto; } .single-post .pld-like-dislike-wrap { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100%; margin: 22px 0 26px !important; padding: 0 !important; line-height: 1 !important; } .single-post .pld-like-dislike-wrap .pld-common-wrap { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; min-height: 34px; margin: 0 !important; padding: 6px 10px !important; border: 1px solid #e5e7eb !important; border-radius: 999px !important; background: #ffffff !important; box-shadow: none !important; vertical-align: middle; } .single-post .pld-like-dislike-wrap .pld-like-dislike-trigger { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #4b5563 !important; text-decoration: none !important; line-height: 1 !important; cursor: pointer; } .single-post .pld-like-dislike-wrap .pld-like-dislike-trigger i, .single-post .pld-like-dislike-wrap .pld-like-dislike-trigger svg { width: 17px; height: 17px; margin: 0 !important; font-size: 17px !important; line-height: 1 !important; } .single-post .pld-like-dislike-wrap .pld-count-wrap { display: inline-block !important; min-width: 8px; margin: 0 !important; padding: 0 !important; color: #6b7280 !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; } .single-post .pld-like-dislike-wrap .pld-like-trigger[data-already-liked="1"], .single-post .pld-like-dislike-wrap .pld-dislike-trigger[data-already-disliked="1"] { color: #111827 !important; } .single-post .pld-like-dislike-wrap .pld-common-wrap:hover { border-color: #cbd5e1 !important; background: #f8fafc !important; } @media (max-width: 544px) { .single-post .pld-like-dislike-wrap { gap: 7px !important; margin: 18px 0 22px !important; } .single-post .pld-like-dislike-wrap .pld-common-wrap { min-height: 32px; padding: 5px 9px !important; } .single-post .pld-like-dislike-wrap .pld-like-dislike-trigger i, .single-post .pld-like-dislike-wrap .pld-like-dislike-trigger svg { width: 16px; height: 16px; font-size: 16px !important; } .single-post .pld-like-dislike-wrap .pld-count-wrap { font-size: 12px !important; } } .with-popular-posts .with-recommend-count { display: none !important; } @media (max-width: 782px) { html, body, #page, .site, .site-content, .content-area, .site-main, .ast-container, .entry-content { max-width: 100% !important; overflow-x: clip; } @supports not (overflow: clip) { html, body, #page, .site, .site-content, .content-area, .site-main, .ast-container, .entry-content { overflow-x: hidden; } } .entry-content > *, .entry-content .wp-block-group, .entry-content .wp-block-columns, .entry-content .wp-block-column, .entry-content .wp-block-media-text, .entry-content .wp-block-cover, .entry-content figure, .entry-content img, .entry-content video, .entry-content iframe, .entry-content svg { max-width: 100% !important; box-sizing: border-box; } .entry-content img, .entry-content video, .entry-content iframe, .entry-content svg { height: auto; } .entry-content pre { max-width: 100%; overflow-x: auto; white-space: pre; -webkit-overflow-scrolling: touch; } .entry-content .with-overlay, .entry-content .with-card, .entry-content .with-box, .entry-content [class*="overlay"], .entry-content [class*="card"] { width: 100%; max-width: 100% !important; box-sizing: border-box; } } .single-post .entry-content h2.wi-th-section-heading { position: relative; margin-top: 44px !important; margin-bottom: 20px !important; padding: 8px 0 !important; line-height: 1.45 !important; letter-spacing: -0.01em; } .single-post .entry-content h2.wi-th-section-heading:first-child { margin-top: 24px !important; } .single-post .entry-content h2.wi-th-section-heading + p, .single-post .entry-content h2.wi-th-section-heading + ul, .single-post .entry-content h2.wi-th-section-heading + ol, .single-post .entry-content h2.wi-th-section-heading + figure { margin-top: 0 !important; } @media (max-width: 768px) { .single-post .entry-content h2.wi-th-section-heading { margin-top: 36px !important; margin-bottom: 18px !important; padding: 6px 0 !important; line-height: 1.5 !important; } } .single-post .entry-content /* ===== SUMMARY / FINAL 박스 ===== */ .wi-th-summary-box, .single-post .entry-content .wi-th-final-box { display: block; width: 100%; box-sizing: border-box; margin: 24px 0 30px !important; padding: 18px 20px !important; background-color: #f5efe0 !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; line-height: 1.7 !important; } .single-post .entry-content .wi-th-summary-box > :first-child, .single-post .entry-content .wi-th-final-box > :first-child { margin-top: 0 !important; } .single-post .entry-content .wi-th-summary-box > :last-child, .single-post .entry-content .wi-th-final-box > :last-child { margin-bottom: 0 !important; } @media (max-width: 768px) { .single-post .entry-content .wi-th-summary-box, .single-post .entry-content .wi-th-final-box { margin: 20px 0 26px !important; padding: 16px 16px !important; border-radius: 10px !important; } } .single-post .entry-content h3.wi-th-subsection-heading { margin-top: 32px !important; margin-bottom: 14px !important; line-height: 1.5 !important; } @media (max-width: 768px) { .single-post .entry-content h3.wi-th-subsection-heading { margin-top: 28px !important; margin-bottom: 12px !important; } } .single-post .entry-content .wp-block-columns.wi-th-visual-columns { gap: 20px !important; } .single-post .entry-content .wp-block-columns.wi-th-visual-columns figure.wp-block-image { margin-top: 0 !important; margin-bottom: 0 !important; } @media (max-width: 768px) { .single-post .entry-content .wp-block-columns.wi-th-visual-columns { gap: 16px !important; } } .single-post .entry-content .wi-th-summary-box, .single-post .entry-content .wi-th-final-box { max-width: 100% !important; overflow: visible !important; } .single-post .entry-content .wi-th-summary-box > .wp-block-group__inner-container, .single-post .entry-content .wi-th-final-box > .wp-block-group__inner-container { margin: 0 !important; padding: 0 !important; } .single-post .entry-content .wi-th-summary-box > .wp-block-group__inner-container > :first-child, .single-post .entry-content .wi-th-final-box > .wp-block-group__inner-container > :first-child { margin-top: 0 !important; } .single-post .entry-content .wi-th-summary-box > .wp-block-group__inner-container > :last-child, .single-post .entry-content .wi-th-final-box > .wp-block-group__inner-container > :last-child { margin-bottom: 0 !important; } .single-post .entry-content .wp-block-group.wi-th-summary-box, .single-post .entry-content .wp-block-group.wi-th-final-box, .editor-styles-wrapper .wp-block-group.wi-th-summary-box, .editor-styles-wrapper .wp-block-group.wi-th-final-box { width: 100%; max-width: 100%; box-sizing: border-box; } .editor-styles-wrapper h2.wi-th-section-heading { margin-top: 44px !important; margin-bottom: 20px !important; padding: 8px 0 !important; line-height: 1.45 !important; } .editor-styles-wrapper h3.wi-th-subsection-heading { margin-top: 32px !important; margin-bottom: 14px !important; line-height: 1.5 !important; } @media (max-width: 768px) { } @media (max-width: 768px) { } .single-post .entry-content .wp-block-group.wi-th-summary-box, .single-post .entry-content .wp-block-group.wi-th-final-box, .editor-styles-wrapper .wp-block-group.wi-th-summary-box, .editor-styles-wrapper .wp-block-group.wi-th-final-box, .block-editor-writing-flow .wp-block-group.wi-th-summary-box, .block-editor-writing-flow .wp-block-group.wi-th-final-box { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 24px 0 30px !important; padding: 18px 20px !important; background-color: #f5efe0 !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; line-height: 1.7 !important; } @media (max-width: 768px) { .single-post .entry-content .wp-block-group.wi-th-summary-box, .single-post .entry-content .wp-block-group.wi-th-final-box, .editor-styles-wrapper .wp-block-group.wi-th-summary-box, .editor-styles-wrapper .wp-block-group.wi-th-final-box, .block-editor-writing-flow .wp-block-group.wi-th-summary-box, .block-editor-writing-flow .wp-block-group.wi-th-final-box { margin: 20px 0 26px !important; padding: 16px !important; border-radius: 10px !important; } } .single-post .entry-content .wp-block-group.wi-th-summary-box, .single-post .entry-content .wp-block-group.wi-th-final-box, .editor-styles-wrapper .wp-block-group.wi-th-summary-box, .editor-styles-wrapper .wp-block-group.wi-th-final-box, .block-editor-writing-flow .wp-block-group.wi-th-summary-box, .block-editor-writing-flow .wp-block-group.wi-th-final-box { background-color: #f5efe0 !important; padding: 18px 20px !important; border-radius: 12px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .single-post .entry-content .wp-block-group.wi-th-summary-box, .editor-styles-wrapper .wp-block-group.wi-th-summary-box, .block-editor-writing-flow .wp-block-group.wi-th-summary-box { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 24px 0 30px !important; padding: 18px 20px !important; background: #f6f1e6 !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; } .single-post .entry-content .wp-block-group.wi-th-final-box, .editor-styles-wrapper .wp-block-group.wi-th-final-box, .block-editor-writing-flow .wp-block-group.wi-th-final-box { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 24px 0 30px !important; padding: 18px 20px !important; background: #f1ead9 !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; } .single-post .entry-content .wi-th-summary-box, .editor-styles-wrapper .wi-th-summary-box, .block-editor-writing-flow .wi-th-summary-box { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 24px 0 30px !important; padding: 18px 20px !important; background: #f6f1e6 !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; line-height: 1.7 !important; } .single-post .entry-content .wi-th-final-box, .editor-styles-wrapper .wi-th-final-box, .block-editor-writing-flow .wi-th-final-box { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 24px 0 30px !important; padding: 18px 20px !important; background: #f1ead9 !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; line-height: 1.7 !important; } @media (max-width: 768px) { .single-post .entry-content .wi-th-summary-box, .single-post .entry-content .wi-th-final-box, .editor-styles-wrapper .wi-th-summary-box, .editor-styles-wrapper .wi-th-final-box, .block-editor-writing-flow .wi-th-summary-box, .block-editor-writing-flow .wi-th-final-box { margin: 20px 0 26px !important; padding: 16px !important; border-radius: 10px !important; } } @media (max-width: 768px) { } @media (max-width: 768px) { } .single-post .entry-content figure.wp-block-table, .entry-content figure.wp-block-table { width: 100%; max-width: 100%; margin: 1.25em 0; } .single-post .entry-content figure.wp-block-table > table, .entry-content figure.wp-block-table > table { width: 100% !important; max-width: 100% !important; border-collapse: collapse !important; border-spacing: 0 !important; table-layout: auto !important; font-size: 16px; line-height: 1.5; } .single-post .entry-content figure.wp-block-table > table :is(th, td), .entry-content figure.wp-block-table > table :is(th, td) { box-sizing: border-box; border: 1px solid #c8ba93; padding: 10px 12px; text-align: center; vertical-align: middle; white-space: normal; word-break: keep-all; overflow-wrap: break-word; font-weight: 400; } .single-post .entry-content figure.wp-block-table > table th, .entry-content figure.wp-block-table > table th { background: #e9ddbd; border-color: #9f8953; border-bottom-width: 2px; font-weight: 600; } .single-post .entry-content figure.wp-block-table > table :is(th, td) > :is(p, div), .entry-content figure.wp-block-table > table :is(th, td) > :is(p, div) { margin-top: 0; margin-bottom: 0; } @media (max-width: 768px) { .single-post .entry-content figure.wp-block-table > table, .entry-content figure.wp-block-table > table { font-size: 13px !important; line-height: 1.34 !important; } .single-post .entry-content figure.wp-block-table > table :is(th, td), .entry-content figure.wp-block-table > table :is(th, td) { padding: 5px 4px !important; font-size: 13px !important; line-height: 1.34 !important; height: auto !important; min-height: 0 !important; vertical-align: middle !important; } .single-post .entry-content figure.wp-block-table > table :is(th, td) > :is(p, div), .entry-content figure.wp-block-table > table :is(th, td) > :is(p, div) { margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; line-height: inherit !important; } .single-post .entry-content figure.wp-block-table:not(:has(> table > thead > tr:first-child > :nth-child(4))), .entry-content figure.wp-block-table:not(:has(> table > thead > tr:first-child > :nth-child(4))) { overflow-x: visible !important; } .single-post .entry-content figure.wp-block-table:not(:has(> table > thead > tr:first-child > :nth-child(4))) > table, .entry-content figure.wp-block-table:not(:has(> table > thead > tr:first-child > :nth-child(4))) > table { width: 100% !important; min-width: 0 !important; max-width: 100% !important; table-layout: auto !important; } .single-post .entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)), .entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; } .single-post .entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) > table, .entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) > table { width: max-content !important; min-width: 640px !important; max-width: none !important; table-layout: auto !important; } } .single-post .entry-content figure.wp-block-table figcaption, .entry-content figure.wp-block-table figcaption, .editor-styles-wrapper figure.wp-block-table figcaption, .block-editor-writing-flow figure.wp-block-table figcaption { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; } .single-post .entry-content figure.wp-block-table, .entry-content figure.wp-block-table { padding-bottom: 0 !important; } .single-post .entry-content figure.wp-block-table > table, .entry-content figure.wp-block-table > table { margin-bottom: 0 !important; } /* ===== 모바일 4열 이상 표: 첫 번째 열 고정 ===== - 4열 이상 표는 좌우 스크롤 유지 - '구분/항목/대상' 등 첫 번째 열은 화면 왼쪽에 고정 - 헤더 첫 셀과 본문 첫 셀 모두 고정 - 스크롤되는 셀이 고정 열 아래로 비치지 않도록 배경/경계/그림자 적용 */ @media (max-width: 768px) { .single-post .entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)), .entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) { position: relative !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; isolation: isolate; } .single-post .entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) > table :is(th,td):first-child, .entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) > table :is(th,td):first-child { position: sticky !important; left: 0 !important; min-width: 120px !important; width: 120px !important; max-width: 120px !important; background: #fdfbf7 !important; border-right: 2px solid #9f8953 !important; box-shadow: 6px 0 8px rgba(54,45,33,0.10); z-index: 5 !important; } .single-post .entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) > table thead th:first-child, .entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) > table thead th:first-child { background: #e9ddbd !important; z-index: 10 !important; } } /* ===== 모바일 4열 이상 표: 고정 첫 열 경계선 강화 ===== sticky 첫 열의 오른쪽 경계를 별도 가상선으로 고정해 좌우 스크롤 중에도 '구분' 열과 나머지 열을 명확하게 분리한다. */ @media (max-width: 768px) { .single-post .entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) > table :is(th,td):first-child, .entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) > table :is(th,td):first-child { position: sticky !important; left: 0 !important; background-clip: padding-box !important; border-right: 0 !important; box-shadow: inset -2px 0 0 #8f7a48, 7px 0 8px rgba(54,45,33,0.12) !important; z-index: 6 !important; } .single-post .entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) > table thead th:first-child, .entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) > table thead th:first-child { background: #e9ddbd !important; box-shadow: inset -2px 0 0 #8f7a48, 7px 0 8px rgba(54,45,33,0.12) !important; z-index: 11 !important; } } /* ===== Ver5.0.4: SUMMARY 클러스터 Focus Keyword 내비게이션 ===== 발행 완료 링크 버튼은 관련글 카테고리 라벨(#bfd8f5) 수준으로 선명하게 표시합니다. 미발행 pending 버튼은 기존의 연한 톤을 유지해 발행 여부가 색상으로 구분됩니다. 기존 🎯 제목 기반 내부링크 디자인/동작에는 영향을 주지 않습니다. */ .wi-th-summary-box .wi-th-cluster-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: .5rem 0 0 !important; } .wi-th-summary-box .wi-th-cluster-button, .wi-th-summary-box a.wi-th-cluster-button { display: inline-block; margin: 0 4px 5px 0; padding: 3px 8px; border: 1px solid #d7dde5; border-radius: 5px; background: #f7f9fc; color: #27364a; font-size: .85em; line-height: 1.25; text-decoration: none; box-sizing: border-box; } /* 발행 완료: 관련글 카테고리 라벨과 같은 계열 */ .wi-th-summary-box a.wi-th-cluster-button { background: #bfd8f5; border-color: #a9c7e8; color: #27364a; } .wi-th-summary-box a.wi-th-cluster-button:hover, .wi-th-summary-box a.wi-th-cluster-button:focus-visible { background: #aecfed; border-color: #94b9df; color: #1f2b3a; text-decoration: none; } .wi-th-summary-box .wi-th-cluster-button.is-current { font-weight: 700; border-color: #94b9df; background: #bfd8f5; } .wi-th-summary-box .wi-th-cluster-button.is-pending { background: #f7f9fc; border-color: #d7dde5; opacity: .72; cursor: default; } .wi-th-summary-box .wi-th-cluster-button[hidden] { display: none !important; } .wi-th-summary-box .wi-th-cluster-toggle { display: inline-block; margin: 0 4px 5px 0; padding: 3px 8px; border: 1px solid #d7dde5; border-radius: 5px; background: #fff; color: #27364a; font: inherit; font-size: .85em; line-height: 1.25; cursor: pointer; } .wi-th-summary-box .wi-th-cluster-toggle:hover, .wi-th-summary-box .wi-th-cluster-toggle:focus-visible { background: #f7f9fc; border-color: #c5ced9; } /* ========================================================= WI-TH MOBILE FINAL CONTRACT — Ver1.5.50.7 - Mobile article styling is finalized here so earlier legacy/imported selectors cannot override the live theme settings. - Desktop keeps the shared rules above; only structural mobile behavior is finalized in this block. ========================================================= */ @media (max-width: 768px) { /* Article typography: use Customizer values on actual readable text. */ body.single-post .with-entry-content.entry-content { font-size: var(--with-body-size) !important; line-height: 1.8 !important; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body.single-post .with-entry-content.entry-content :where( p, li, dt, dd, blockquote, .wp-block-paragraph, .wp-block-list, .wp-block-quote ) { font-size: var(--with-body-size) !important; } body.single-post .with-entry-content.entry-content :where(p,li,dt,dd,blockquote) :where(strong,b,em,i,span) { font-size: inherit !important; } body.single-post .with-entry-content.entry-content h2, body.single-post .with-entry-content.entry-content h2.wi-th-section-heading { font-size: var(--with-h2-size) !important; } body.single-post .with-entry-content.entry-content h3, body.single-post .with-entry-content.entry-content h3.wi-th-subsection-heading { font-size: var(--with-h3-size) !important; } body.single-post .with-entry-content.entry-content h4 { font-size: var(--with-h4-size) !important; } /* Canonical WI-TH summary/final boxes. */ body.single-post .with-entry-content.entry-content .wi-th-summary-box, body.single-post .with-entry-content.entry-content .wp-block-group.wi-th-summary-box { display:block !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; margin:20px 0 26px !important; padding:16px !important; background:#f6f1e6 !important; border:0 !important; border-radius:10px !important; box-shadow:none !important; line-height:1.7 !important; } body.single-post .with-entry-content.entry-content .wi-th-final-box, body.single-post .with-entry-content.entry-content .wp-block-group.wi-th-final-box { display:block !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; margin:20px 0 26px !important; padding:16px !important; background:#f1ead9 !important; border:0 !important; border-radius:10px !important; box-shadow:none !important; line-height:1.7 !important; } /* Mobile table contract: <=3 columns fit viewport, >=4 columns scroll. */ body.single-post .with-entry-content.entry-content figure.wp-block-table { display:block !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; margin:1.25em 0 !important; padding:0 !important; } body.single-post .with-entry-content.entry-content figure.wp-block-table > table { font-size:13px !important; line-height:1.34 !important; margin:0 !important; border-collapse:collapse !important; } body.single-post .with-entry-content.entry-content figure.wp-block-table > table :is(th,td) { padding:5px 4px !important; font-size:13px !important; line-height:1.34 !important; height:auto !important; min-height:0 !important; white-space:normal !important; word-break:keep-all !important; overflow-wrap:break-word !important; vertical-align:middle !important; } body.single-post .with-entry-content.entry-content figure.wp-block-table:not(:has(> table > thead > tr:first-child > :nth-child(4))) { overflow-x:visible !important; overflow-y:visible !important; } body.single-post .with-entry-content.entry-content figure.wp-block-table:not(:has(> table > thead > tr:first-child > :nth-child(4))) > table { width:100% !important; min-width:0 !important; max-width:100% !important; table-layout:auto !important; } body.single-post .with-entry-content.entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) { position:relative !important; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch; isolation:isolate; } body.single-post .with-entry-content.entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) > table { width:max-content !important; min-width:640px !important; max-width:none !important; table-layout:auto !important; } body.single-post .with-entry-content.entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) > table :is(th,td):first-child { position:sticky !important; left:0 !important; min-width:120px !important; width:120px !important; max-width:120px !important; background:#fdfbf7 !important; background-clip:padding-box !important; border-right:0 !important; box-shadow:inset -2px 0 0 #8f7a48,7px 0 8px rgba(54,45,33,.12) !important; z-index:6 !important; } body.single-post .with-entry-content.entry-content figure.wp-block-table:has(> table > thead > tr:first-child > :nth-child(4)) > table thead th:first-child { background:#e9ddbd !important; z-index:11 !important; } /* Visual blocks stay inside the viewport and columns stack naturally. */ body.single-post .with-entry-content.entry-content :where( .wp-block-columns,.wp-block-column,.wp-block-media-text,.wp-block-cover, figure,img,video,iframe,svg ) { max-width:100% !important; box-sizing:border-box !important; } body.single-post .with-entry-content.entry-content :where(img,video,iframe,svg) { height:auto !important; } body.single-post .with-entry-content.entry-content .wp-block-columns:not(.is-not-stacked-on-mobile) { gap:16px !important; } } /* ========================================================= Ver 1.5.50.9 — Single content vertical rhythm final contract Keeps text blocks from visually bunching when legacy/plugin CSS differs between desktop and mobile. Ad/card layouts are intentionally excluded. ========================================================= */ .single-post .with-entry-content.entry-content > p{ margin:0 0 1.5em!important; line-height:1.8!important; } .single-post .with-entry-content.entry-content > ul, .single-post .with-entry-content.entry-content > ol{ margin:0 0 1.5em 1.4em!important; padding-left:.8em!important; line-height:1.75!important; } .single-post .with-entry-content.entry-content li{ margin:.35em 0!important; line-height:1.75!important; } .single-post .with-entry-content.entry-content > blockquote, .single-post .with-entry-content.entry-content > .wp-block-quote{ margin:1.5em 0!important; } .single-post .with-entry-content.entry-content h2, .single-post .with-entry-content.entry-content h3, .single-post .with-entry-content.entry-content h4{ clear:both; } .single-post .with-entry-content.entry-content h4{ margin:1.45em 0 .65em!important; line-height:1.45!important; } .single-post .with-entry-content.entry-content h2 + :is(p,ul,ol,figure), .single-post .with-entry-content.entry-content h3 + :is(p,ul,ol,figure), .single-post .with-entry-content.entry-content h4 + :is(p,ul,ol,figure){ margin-top:0!important; } .single-post .with-entry-content.entry-content :is(.wi-th-summary-box,.wi-th-final-box) p{ margin:0 0 .9em!important; line-height:1.7!important; } .single-post .with-entry-content.entry-content :is(.wi-th-summary-box,.wi-th-final-box) p:last-child{ margin-bottom:0!important; } .single-post .with-entry-content.entry-content :is(.wi-th-summary-box,.wi-th-final-box) :is(ul,ol){ margin:.65em 0 .85em 1.25em!important; padding-left:.65em!important; } .single-post .with-entry-content.entry-content :is(.wi-th-summary-box,.wi-th-final-box) li{ margin:.28em 0!important; } @media(max-width:768px){ .single-post .with-entry-content.entry-content > p{margin-bottom:1.35em!important;line-height:1.8!important} .single-post .with-entry-content.entry-content > ul, .single-post .with-entry-content.entry-content > ol{margin-bottom:1.35em!important;line-height:1.72!important} .single-post .with-entry-content.entry-content li{margin:.32em 0!important;line-height:1.72!important} .single-post .with-entry-content.entry-content h4{margin:1.35em 0 .6em!important;line-height:1.45!important} .single-post .with-entry-content.entry-content :is(.wi-th-summary-box,.wi-th-final-box) p{margin-bottom:.82em!important} } /* ========================================================= Ver 1.5.50.10 — Content text / UI typography separation - Article font-size controls readable copy only. - Buttons, cluster navigation, cards and utility links keep their own sizes. - Restore breathing room around cluster navigation on mobile. ========================================================= */ .single-post .with-entry-content.entry-content .wi-th-cluster-nav{ margin-top:.7em!important; margin-bottom:1.15em!important; line-height:1.45!important; } .single-post .with-entry-content.entry-content .wi-th-cluster-nav a, .single-post .with-entry-content.entry-content .wi-th-cluster-nav button, .single-post .with-entry-content.entry-content .wi-th-cluster-button, .single-post .with-entry-content.entry-content .wi-th-cluster-toggle, .single-post .with-entry-content.entry-content .wp-block-button__link{ font-size:.85em!important; line-height:1.25!important; } .single-post .with-entry-content.entry-content .wi-th-cluster-nav + :is(h2,h3,h4,p,ul,ol){ margin-top:1.15em!important; } @media(max-width:768px){ .single-post .with-entry-content.entry-content .wi-th-cluster-nav{ margin-top:.65em!important; margin-bottom:1.25em!important; } .single-post .with-entry-content.entry-content .wi-th-cluster-nav a, .single-post .with-entry-content.entry-content .wi-th-cluster-nav button, .single-post .with-entry-content.entry-content .wi-th-cluster-button, .single-post .with-entry-content.entry-content .wi-th-cluster-toggle, .single-post .with-entry-content.entry-content .wp-block-button__link{ font-size:.82em!important; } } /* ========================================================= WI-TH INSERTER 1.1.15 TABLE FINAL CONTRACT — Ver1.5.50.11 Source of truth for frontend table presentation. Inserter classifies the table; theme only renders it responsively. ========================================================= */ body.single-post .with-entry-content.entry-content figure.wp-block-table{ display:block!important; width:100%!important; max-width:100%!important; box-sizing:border-box!important; margin:28px 0 34px!important; padding:0!important; } body.single-post .with-entry-content.entry-content figure.wp-block-table>table{ width:100%!important; max-width:100%!important; margin:0!important; border-collapse:collapse!important; border-spacing:0!important; table-layout:auto!important; background:#fdfbf7!important; font-size:16px!important; line-height:1.5!important; } body.single-post .with-entry-content.entry-content figure.wp-block-table>table :is(th,td){ box-sizing:border-box!important; padding:2px 8px!important; border:1px solid #c8ba93!important; text-align:center!important; vertical-align:middle!important; white-space:normal!important; word-break:keep-all!important; overflow-wrap:break-word!important; font-size:16px!important; line-height:1.5!important; font-weight:400!important; } body.single-post .with-entry-content.entry-content figure.wp-block-table>table thead th{ background:#e9ddbd!important; border-color:#9f8953!important; border-bottom-width:2px!important; font-weight:600!important; } body.single-post .with-entry-content.entry-content figure.wp-block-table figcaption{ display:none!important; } @media(max-width:768px){ body.single-post .with-entry-content.entry-content figure.wp-block-table{ margin:28px 0 32px!important; } body.single-post .with-entry-content.entry-content figure.wp-block-table>table, body.single-post .with-entry-content.entry-content figure.wp-block-table>table :is(th,td){ font-size:13px!important; line-height:1.34!important; } body.single-post .with-entry-content.entry-content figure.wp-block-table>table :is(th,td){ padding:6px 5px!important; min-width:0!important; height:auto!important; white-space:normal!important; } /* Inserter 1.1.15 compact/card tables: 2~3 columns fit the viewport. */ body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-card, body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-compact, body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-2col, body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-multicol:not(.wi-th-table-compare){ overflow-x:visible!important; overflow-y:visible!important; } body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-card>table, body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-compact>table, body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-2col>table, body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-multicol:not(.wi-th-table-compare)>table{ display:table!important; width:100%!important; min-width:0!important; max-width:100%!important; table-layout:auto!important; } /* Short-key 3-column table: deterministic 14 / 36 / 50 ratio. */ body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-short-first>table{ table-layout:fixed!important; } body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-short-first>table :is(th,td):nth-child(1){width:14%!important;min-width:0!important} body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-short-first>table :is(th,td):nth-child(2){width:36%!important;min-width:0!important} body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-short-first>table :is(th,td):nth-child(3){width:50%!important;min-width:0!important} /* Inserter compare tables / 4+ columns: horizontal scroll, never squeeze. */ body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-compare, body.single-post .with-entry-content.entry-content figure.wp-block-table:has(>table>thead>tr:first-child>:nth-child(4)){ position:relative!important; overflow-x:auto!important; overflow-y:hidden!important; -webkit-overflow-scrolling:touch!important; overscroll-behavior-inline:contain; isolation:isolate; } body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-compare>table, body.single-post .with-entry-content.entry-content figure.wp-block-table:has(>table>thead>tr:first-child>:nth-child(4))>table{ width:max-content!important; min-width:640px!important; max-width:none!important; table-layout:auto!important; } body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-compare>table :is(th,td):first-child, body.single-post .with-entry-content.entry-content figure.wp-block-table:has(>table>thead>tr:first-child>:nth-child(4))>table :is(th,td):first-child{ position:sticky!important; left:0!important; min-width:120px!important; width:120px!important; max-width:120px!important; background:#fdfbf7!important; background-clip:padding-box!important; box-shadow:inset -2px 0 0 #8f7a48,7px 0 8px rgba(54,45,33,.12)!important; z-index:6!important; } body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-compare>table thead th:first-child, body.single-post .with-entry-content.entry-content figure.wp-block-table:has(>table>thead>tr:first-child>:nth-child(4))>table thead th:first-child{ background:#e9ddbd!important; z-index:11!important; } /* Fallback before/without classification: <=3 columns remain fluid. */ body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-fallback, body.single-post .with-entry-content.entry-content figure.wp-block-table:not(.wi-th-table-compare):not(:has(>table>thead>tr:first-child>:nth-child(4))){ overflow-x:visible!important; overflow-y:visible!important; } body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-fallback>table, body.single-post .with-entry-content.entry-content figure.wp-block-table:not(.wi-th-table-compare):not(:has(>table>thead>tr:first-child>:nth-child(4))>table{ width:100%!important; min-width:0!important; max-width:100%!important; } } /* ========================================================= Ver 1.5.50.12 — TRUE RESPONSIVE TABLE FINAL CONTRACT - Desktop: every article table fills the content column. - Mobile <=3 columns: fill viewport/content width. - Mobile >=4 columns / compare: horizontal scroll, no squeezing. - Works whether Inserter classes live on
or , and also covers legacy bare
markup. ========================================================= */ body.single-post .with-entry-content.entry-content figure.wp-block-table, body.single-post .with-entry-content.entry-content .wi-th-table-wrap { display:block!important; width:100%!important; min-width:0!important; max-width:100%!important; box-sizing:border-box!important; } body.single-post .with-entry-content.entry-content figure.wp-block-table > table, body.single-post .with-entry-content.entry-content > table, body.single-post .with-entry-content.entry-content table.wi-th-table-card, body.single-post .with-entry-content.entry-content table.wi-th-table-compact, body.single-post .with-entry-content.entry-content table.wi-th-table-2col, body.single-post .with-entry-content.entry-content table.wi-th-table-multicol, body.single-post .with-entry-content.entry-content table.wi-th-table-fallback, body.single-post .with-entry-content.entry-content table.wi-th-table-compare { display:table!important; width:100%!important; min-width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; table-layout:auto!important; box-sizing:border-box!important; } @media (min-width:769px){ body.single-post .with-entry-content.entry-content figure.wp-block-table, body.single-post .with-entry-content.entry-content .wi-th-table-wrap { overflow-x:visible!important; } body.single-post .with-entry-content.entry-content table { width:100%!important; min-width:100%!important; max-width:100%!important; } } @media (max-width:768px){ /* 1~3 columns / compact: fluid full width. */ body.single-post .with-entry-content.entry-content figure.wp-block-table:not(.wi-th-table-compare):not(:has(>table>thead>tr:first-child>:nth-child(4))), body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-card, body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-compact, body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-2col, body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-multicol:not(.wi-th-table-compare) { overflow-x:visible!important; overflow-y:visible!important; } body.single-post .with-entry-content.entry-content figure.wp-block-table:not(.wi-th-table-compare):not(:has(>table>thead>tr:first-child>:nth-child(4))) > table, body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-card > table, body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-compact > table, body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-2col > table, body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-multicol:not(.wi-th-table-compare) > table, body.single-post .with-entry-content.entry-content > table:not(.wi-th-table-compare):not(:has(thead>tr:first-child>:nth-child(4))), body.single-post .with-entry-content.entry-content table.wi-th-table-card, body.single-post .with-entry-content.entry-content table.wi-th-table-compact, body.single-post .with-entry-content.entry-content table.wi-th-table-2col, body.single-post .with-entry-content.entry-content table.wi-th-table-multicol:not(.wi-th-table-compare) { display:table!important; width:100%!important; min-width:0!important; max-width:100%!important; table-layout:auto!important; } /* Inserter short-first 3-col ratio. */ body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-short-first > table, body.single-post .with-entry-content.entry-content table.wi-th-table-short-first { table-layout:fixed!important; } body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-short-first > table :is(th,td):nth-child(1), body.single-post .with-entry-content.entry-content table.wi-th-table-short-first :is(th,td):nth-child(1){width:14%!important;min-width:0!important} body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-short-first > table :is(th,td):nth-child(2), body.single-post .with-entry-content.entry-content table.wi-th-table-short-first :is(th,td):nth-child(2){width:36%!important;min-width:0!important} body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-short-first > table :is(th,td):nth-child(3), body.single-post .with-entry-content.entry-content table.wi-th-table-short-first :is(th,td):nth-child(3){width:50%!important;min-width:0!important} /* 4+ columns / compare: wrapper scrolls, table keeps readable width. */ body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-compare, body.single-post .with-entry-content.entry-content figure.wp-block-table:has(>table>thead>tr:first-child>:nth-child(4)) { position:relative!important; overflow-x:auto!important; overflow-y:hidden!important; -webkit-overflow-scrolling:touch!important; overscroll-behavior-inline:contain; isolation:isolate; } body.single-post .with-entry-content.entry-content figure.wp-block-table.wi-th-table-compare > table, body.single-post .with-entry-content.entry-content figure.wp-block-table:has(>table>thead>tr:first-child>:nth-child(4)) > table { display:table!important; width:max-content!important; min-width:max(640px,100%)!important; max-width:none!important; table-layout:auto!important; } /* Legacy bare 4+ table: scroll on the table itself as a safe fallback. */ body.single-post .with-entry-content.entry-content > table.wi-th-table-compare, body.single-post .with-entry-content.entry-content > table:has(thead>tr:first-child>:nth-child(4)) { display:block!important; width:100%!important; min-width:0!important; max-width:100%!important; overflow-x:auto!important; overflow-y:hidden!important; -webkit-overflow-scrolling:touch!important; white-space:normal!important; } } /* ========================================================= Ver 1.5.50.13 — Single meta / summary cluster restore + mobile table type - Restore title-below category badges without changing the ON/OFF setting. - Restore SUMMARY keyword/cluster buttons while respecting [hidden]. - Mobile table typography: 14px for improved readability. ========================================================= */ body.single-post .with-entry-meta-row{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:7px 10px!important} body.single-post .with-entry-category-list{display:inline-flex!important;flex-wrap:wrap!important;align-items:center!important;gap:5px!important} body.single-post .with-entry-category-list .with-entry-category{display:inline-flex!important;align-items:center!important;width:auto!important;visibility:visible!important;opacity:1!important} body.single-post .with-entry-content.entry-content .wi-th-summary-box .wi-th-cluster-nav, body.single-post .with-entry-content.entry-content .wp-block-group.wi-th-summary-box .wi-th-cluster-nav{display:flex!important;flex-wrap:wrap!important;align-items:center!important;visibility:visible!important;opacity:1!important} body.single-post .with-entry-content.entry-content .wi-th-summary-box .wi-th-cluster-button:not([hidden]), body.single-post .with-entry-content.entry-content .wp-block-group.wi-th-summary-box .wi-th-cluster-button:not([hidden]), body.single-post .with-entry-content.entry-content .wi-th-summary-box a.wi-th-cluster-button:not([hidden]), body.single-post .with-entry-content.entry-content .wp-block-group.wi-th-summary-box a.wi-th-cluster-button:not([hidden]){display:inline-flex!important;align-items:center!important;visibility:visible!important;opacity:1!important} body.single-post .with-entry-content.entry-content .wi-th-summary-box .wi-th-cluster-button[hidden], body.single-post .with-entry-content.entry-content .wp-block-group.wi-th-summary-box .wi-th-cluster-button[hidden]{display:none!important} @media(max-width:768px){ body.single-post .with-entry-content.entry-content figure.wp-block-table>table, body.single-post .with-entry-content.entry-content figure.wp-block-table>table :is(th,td), body.single-post .with-entry-content.entry-content>table, body.single-post .with-entry-content.entry-content>table :is(th,td), body.single-post .with-entry-content.entry-content table.wi-th-table-card, body.single-post .with-entry-content.entry-content table.wi-th-table-card :is(th,td), body.single-post .with-entry-content.entry-content table.wi-th-table-compact, body.single-post .with-entry-content.entry-content table.wi-th-table-compact :is(th,td), body.single-post .with-entry-content.entry-content table.wi-th-table-2col, body.single-post .with-entry-content.entry-content table.wi-th-table-2col :is(th,td), body.single-post .with-entry-content.entry-content table.wi-th-table-multicol, body.single-post .with-entry-content.entry-content table.wi-th-table-multicol :is(th,td), body.single-post .with-entry-content.entry-content table.wi-th-table-fallback, body.single-post .with-entry-content.entry-content table.wi-th-table-fallback :is(th,td), body.single-post .with-entry-content.entry-content table.wi-th-table-compare, body.single-post .with-entry-content.entry-content table.wi-th-table-compare :is(th,td){font-size:14px!important} } /* ========================================================== Ver 1.5.50.16 — Single H1 + post-module heading/more UI - H1 Customizer value remains authoritative on every viewport. - Related / recommended / latest / category module headings share one visual rule. - Mobile "더보기" buttons are centered with stable vertical rhythm. ========================================================== */ body.single-post .with-entry-header .with-entry-title{ font-size:var(--with-h1-size,36px)!important; line-height:1.25!important; } body.single-post .with-post-section>.with-post-header{ display:block!important; width:100%!important; margin:0 0 18px!important; padding:10px 12px!important; border:0!important; border-radius:8px!important; outline:0!important; background:#e7f1ff!important; box-shadow:none!important; } body.single-post .with-post-section>.with-post-header .with-post-title{ margin:0!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; font-size:22px!important; line-height:1.25!important; font-weight:700!important; color:#1f2937!important; } body.single-post .with-post-section>.with-post-header .with-post-title>a{ color:inherit!important; text-decoration:none!important; } body.single-post .with-post-section>.with-mobile-more-sentinel + .with-mobile-more-button, body.single-post .with-post-section>.with-mobile-more-button{ display:block!important; width:max-content!important; max-width:calc(100% - 24px)!important; margin:20px auto 0!important; padding:8px 18px!important; border:1px solid #a9c7e8!important; border-radius:6px!important; background:#bfd8f5!important; color:#27364a!important; box-shadow:none!important; line-height:1.35!important; text-align:center!important; } body.single-post .with-post-section>.with-mobile-more-button:hover, body.single-post .with-post-section>.with-mobile-more-button:focus{ background:#aecfed!important; border-color:#94b9df!important; } @media(max-width:544px){ body.single-post .with-post-section>.with-post-header{ margin-bottom:14px!important; padding:2px 8px!important; } body.single-post .with-post-section>.with-post-header .with-post-title{ font-size:19px!important; } body.single-post .with-post-section>.with-mobile-more-button{ margin-top:18px!important; } } /* ========================================================== Ver 1.5.50.20 — Module-after ad vertical centering - Keep the ad visually centered between the previous card grid and the following module title. ========================================================== */ body.single-post .with-module-after-ad{ display:block!important; width:100%!important; box-sizing:border-box!important; margin:26px 0 var(--with-module-ad-title-gap,26px)!important; padding:0!important; text-align:center!important; clear:both!important; } body.single-post .with-module-after-ad>.code-block, body.single-post .with-module-after-ad>.with-list-ad-slot, body.single-post .with-module-after-ad>div{ margin-left:auto!important; margin-right:auto!important; } @media(max-width:544px){ body.single-post .with-module-after-ad{margin:20px 0 var(--with-module-ad-title-gap,20px)!important} } /* ========================================================== Ver 1.5.50.21 — Final module title height + configurable ad gaps ========================================================== */ body.single-post :is(.with-section-related,.with-section-recommended,.with-section-latest,.with-section-category)>.with-post-header{ padding:2px 8px!important; min-height:0!important; height:auto!important; } body.single-post :is(.with-section-related,.with-section-recommended,.with-section-latest,.with-section-category)>.with-post-header>.with-post-title{ line-height:1.25!important; } body.single-post .with-module-after-ad{ margin-top:26px!important; margin-bottom:var(--with-module-ad-title-gap,26px)!important; } @media(max-width:544px){ body.single-post :is(.with-section-related,.with-section-recommended,.with-section-latest,.with-section-category)>.with-post-header{padding:2px 8px!important} body.single-post .with-module-after-ad{margin-top:20px!important;margin-bottom:var(--with-module-ad-title-gap,20px)!important} } /* ================================================== Ver 1.5.50.22 — module heading slim bar + robust TOP ad/title gap ================================================== */ body.single-post :is( .with-post-section.with-section-related, .with-post-section.with-section-recommended, .with-post-section.with-section-latest, .with-post-section.with-section-category ) > .with-post-header{ display:flex!important; align-items:center!important; width:100%!important; height:auto!important; min-height:0!important; margin:0 0 14px!important; padding:1px 8px!important; border:0!important; border-radius:6px!important; background:#e7f1ff!important; background-image:none!important; box-shadow:none!important; line-height:1.15!important; } body.single-post :is( .with-post-section.with-section-related, .with-post-section.with-section-recommended, .with-post-section.with-section-latest, .with-post-section.with-section-category ) > .with-post-header > .with-post-title{ display:block!important; width:100%!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; line-height:1.15!important; background:transparent!important; } @media(max-width:544px){ body.single-post :is( .with-post-section.with-section-related, .with-post-section.with-section-recommended, .with-post-section.with-section-latest, .with-post-section.with-section-category ) > .with-post-header{ margin-bottom:12px!important; padding:1px 7px!important; } } /* ================================================== Ver 1.5.50.23 — balanced module heading bar ================================================== */ body.single-post :is( .with-post-section.with-section-related, .with-post-section.with-section-recommended, .with-post-section.with-section-latest, .with-post-section.with-section-category ) > .with-post-header{ padding:4px 8px!important; min-height:0!important; height:auto!important; line-height:1.2!important; } body.single-post :is( .with-post-section.with-section-related, .with-post-section.with-section-recommended, .with-post-section.with-section-latest, .with-post-section.with-section-category ) > .with-post-header > .with-post-title{line-height:1.2!important} @media(max-width:544px){ body.single-post :is( .with-post-section.with-section-related, .with-post-section.with-section-recommended, .with-post-section.with-section-latest, .with-post-section.with-section-category ) > .with-post-header{padding:3px 7px!important} } /* ========================================================== Ver 1.5.50.25 — authoritative module/ad section spacing - Module headings use a compact but visible bar. - Ad spacing is created by transparent wrapper padding, not collapsing margins. - Section boundaries stay independent so every ad can sit between modules reliably. ========================================================== */ body.single-post :is( .with-post-section.with-section-related, .with-post-section.with-section-recommended, .with-post-section.with-section-latest, .with-post-section.with-section-category ){ display:block!important; width:100%!important; box-sizing:border-box!important; margin:0!important; padding:0!important; clear:both!important; } body.single-post :is( .with-post-section.with-section-related, .with-post-section.with-section-recommended, .with-post-section.with-section-latest, .with-post-section.with-section-category ) > .with-post-header{ display:flex!important; align-items:center!important; width:100%!important; height:auto!important; min-height:0!important; box-sizing:border-box!important; margin:0 0 14px!important; padding:5px 10px!important; border:0!important; border-radius:6px!important; background:#e7f1ff!important; background-image:none!important; box-shadow:none!important; } body.single-post :is( .with-post-section.with-section-related, .with-post-section.with-section-recommended, .with-post-section.with-section-latest, .with-post-section.with-section-category ) > .with-post-header > .with-post-title{ display:block!important; width:100%!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; line-height:1.2!important; background:transparent!important; } /* If two content modules touch with no ad between them, keep a basic visual section gap. */ body.single-post .with-post-section + .with-post-section{margin-top:26px!important} body.single-post .with-module-after-ad + .with-post-section{margin-top:0!important} /* Ad wrappers own their vertical whitespace via padding so margins cannot collapse. */ body.single-post .with-module-after-ad{ display:block!important; width:100%!important; box-sizing:border-box!important; margin:0!important; background:transparent!important; clear:both!important; } @media(max-width:544px){ body.single-post :is( .with-post-section.with-section-related, .with-post-section.with-section-recommended, .with-post-section.with-section-latest, .with-post-section.with-section-category ) > .with-post-header{ margin-bottom:12px!important; padding:4px 8px!important; } body.single-post .with-post-section + .with-post-section{margin-top:20px!important} } /* ========================================================== Ver 1.5.50.26 — authoritative module heading bar - All four post modules use the exact same heading bar. - Slightly roomier vertical padding, balanced against 10px horizontal padding. ========================================================== */ body.single-post :is( .with-post-section.with-section-related, .with-post-section.with-section-recommended, .with-post-section.with-section-latest, .with-post-section.with-section-category ) > .with-post-header{ display:flex!important; align-items:center!important; width:100%!important; height:auto!important; min-height:0!important; box-sizing:border-box!important; margin:0 0 14px!important; padding:7px 10px!important; border:0!important; border-radius:6px!important; background:#e7f1ff!important; background-image:none!important; box-shadow:none!important; } body.single-post :is( .with-post-section.with-section-related, .with-post-section.with-section-recommended, .with-post-section.with-section-latest, .with-post-section.with-section-category ) > .with-post-header > .with-post-title{ margin:0!important; padding:0!important; line-height:1.2!important; background:transparent!important; } @media(max-width:544px){ body.single-post :is( .with-post-section.with-section-related, .with-post-section.with-section-recommended, .with-post-section.with-section-latest, .with-post-section.with-section-category ) > .with-post-header{ padding:6px 8px!important; margin-bottom:12px!important; } }