/* * Homepage "투명 견적 약속" band — step-style promise cards. * Mirrors the STEP 01/02/03 visual language from the transparent-quote page * (top border + label + bold heading + description, no boxed border) using * this page's own established color tokens (#1c1b18 ink, #8c877a caption * gray, #fee500 Kakao yellow already used sitewide) instead of importing * that page's stylesheet. */ html body.home:not(.wp-admin) .ohm-promise-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 44px; } html body.home:not(.wp-admin) .ohm-promise-step { border-top: 3px solid #1c1b18; padding-top: 24px; } html body.home:not(.wp-admin) .ohm-promise-step-no { display: block; font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: #8c877a; } html body.home:not(.wp-admin) .ohm-promise-step h3 { font-family: "Noto Serif KR", "Nanum Myeongjo", Georgia, serif; font-size: 20px; font-weight: 700; line-height: 1.5; margin: 12px 0; color: #1c1b18; word-break: keep-all; } html body.home:not(.wp-admin) .ohm-promise-step h3 mark { background: linear-gradient(transparent 62%, #fee500 62%); color: inherit; padding: 0 2px; } html body.home:not(.wp-admin) .ohm-promise-step p { font-size: 15px; color: #4a463d; line-height: 1.8; word-break: keep-all; } /* Hook headline's — same underline-style highlight, not a browser-default solid box. */ html body.home:not(.wp-admin) .ohm-transparency-section h2 mark { background: linear-gradient(transparent 62%, #fee500 62%); color: inherit; padding: 0 2px; } /* * "그 견적서, 믿어도 되나 싶으셨죠?" was wrapping with an orphan "죠?" on its * own line — the single-line text measures ~604px, comfortably inside the * 760px heading column, so force one line on tablet/desktop. Left to wrap * naturally below 700px, where a phone-width viewport can't fit it anyway. */ @media (min-width: 700px) { html body.home:not(.wp-admin) #ohm-transparency-title { white-space: nowrap; } } @media (max-width: 860px) { html body.home:not(.wp-admin) .ohm-promise-steps { grid-template-columns: 1fr; gap: 32px; } } /* * Footer/right-edge cut on wide screens: `.ohm-landing` breaks out of its * container with `width:100vw; margin:0 calc(50% - 50vw)`. `100vw` includes * the scrollbar's own width, but the page's visible content area does not * (document.documentElement.clientWidth is narrower than window.innerWidth * by exactly the scrollbar width) — so the whole block sits a few pixels * off-center: pushed past the left edge (harmless, off-screen) and short of * the true right edge, exposing the black background as a sliver on * wide/ultrawide screens. Its ancestors (.entry-content, #content, etc.) * are already forced to width:100% with no padding by an earlier rule in * orc-home-critical.css, so `.ohm-landing` doesn't need the vw-based * breakout at all — 100% of an already-full-bleed parent is equivalent and * immune to the scrollbar-width mismatch. */ html body.home:not(.wp-admin) .entry-content > .ohm-landing, html body.home:not(.wp-admin) .ohm-landing { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }