/* Noto Sans/Serif KR self-hosted WOFF2 variable-font subsets (2026-07-31): this @import to fonts.googleapis.com was the mobile PSI bottleneck the font self-hosting work below didn't touch - @import blocks CSSOM construction for the rest of this file (all the .sx123 canvas positioning rules), and under throttled-mobile lab conditions it pinned FCP at ~7.4s across every page regardless of what else was optimized (own-doc -> google css -> gstatic font, two serial cross-origin round trips). Replaced with one self-hosted variable-font file per family (fvar wght axis, so one file covers every weight instead of Google's 7 separate weight requests), subset to the characters used across all 10 themes' std/ canvas HTML + the shared std-consult.php modal (also rendered on every canvas page). unicode-range below is deliberately EXPLICIT (not left to default/ unbounded) and lists exactly what's embedded: templates/_common/bonnie/ fonts/noto-kr-sitewide.css declares the SAME two family names (also with an explicit, wider range - see that file) for use outside the canvas (head.php, all pages incl. boards/dynamic content), and both declarations are active simultaneously on canvas pages (head.php loads first, this file loads later). Without an explicit range here, this narrow declaration would claim (but not contain) every codepoint, so any canvas-adjacent text this subset doesn't cover - e.g. GNB nav labels rendered by gnb.php on the same page - would silently fall through to the browser's system font instead of the sitewide self-host (confirmed by architect review 2026-07-31, e.g. '고객센터'/'기왕증' from GNB menus). With both ranges scoped correctly, any codepoint outside this file's range but inside sitewide's is picked up there regardless of load order - self-healing against any future text this subset's source scan didn't happen to cover, not just the ones found so far. */ @font-face { font-family: 'Noto Sans KR'; src: url('/templates/_common/bonnie/fonts/NotoSansKR.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0020-007E,U+00A1-00AC,U+00AE-00FF,U+2010-2027,U+2030-205E,U+20A9,U+2192,U+2460-2461,U+3001-303F,U+321C,U+65B0,U+AC00-AC01,U+AC04,U+AC08,U+AC10-AC12,U+AC15,U+AC19,U+AC1C-AC1D,U+AC31,U+AC70-AC71,U+AC74,U+AC78,U+AC80,U+AC8C,U+ACA8-ACAA,U+ACAC,U+ACB0,U+ACBD,U+ACC4,U+ACE0,U+ACE4,U+ACE8,U+ACF3,U+ACF5,U+ACFC,U+AD00,U+AD04,U+AD11,U+AD1C,U+AD34,U+AD50,U+AD6C-AD6D,U+AD81,U+AD8C,U+ADC0,U+ADE0,U+ADF8,U+ADFC,U+AE00,U+AE08-AE09,U+AE30,U+AE34,U+AE38,U+AE41,U+AE4A,U+AE4C,U+AE68,U+AED8,U+AF2D,U+AF34,U+AF3C,U+AFB8,U+B057,U+B098,U+B09C,U+B0A0,U+B0A8-B0A9,U+B0AE,U+B0B3-B0B4,U+B0C9,U+B108,U+B110,U+B113,U+B118,U+B140,U+B144,U+B178-B179,U+B180,U+B192,U+B1CC,U+B1E8,U+B204,U+B208,U+B274,U+B294,U+B298,U+B2A5,U+B2C8,U+B2CC,U+B2D0,U+B2D8,U+B2E4-B2E5,U+B2E8,U+B2EB-B2EC,U+B2F4-B2F5,U+B2F9,U+B300,U+B354,U+B358,U+B370,U+B3C4-B3C5,U+B3C8,U+B3CC,U+B3D9,U+B418,U+B41C,U+B420,U+B428-B429,U+B450-B451,U+B454,U+B4DC-B4DD,U+B4E0,U+B4E4,U+B4F1,U+B514,U+B530-B531,U+B54C,U+B5A4,U+B5BB,U+B610-B611,U+B744,U+B77C-B77D,U+B780,U+B78C-B78D,U+B791,U+B798,U+B79C,U+B7AB,U+B7C9,U+B7EC,U+B7FC,U+B808-B809,U+B824-B825,U+B828,U+B834,U+B839,U+B840,U+B85C-B85D,U+B860,U+B8CC,U+B8E8,U+B8F9,U+B958,U+B960,U+B974,U+B978,U+B97C,U+B984,U+B9AC,U+B9B0,U+B9B4,U+B9BD,U+B9BF,U+B9C1,U+B9C8-B9C9,U+B9CC,U+B9CE,U+B9D0,U+B9DD-B9DE,U+B9E4-B9E5,U+BA38,U+BA54,U+BA70,U+BA74,U+BA85,U+BAA8-BAA9,U+BAB8,U+BB34,U+BB38,U+BB3C,U+BBC0,U+BBF8-BBF9,U+BBFC,U+BBFF-BC00,U+BC0F,U+BC14-BC15,U+BC18,U+BC1B-BC1C,U+BC25,U+BC29,U+BC30-BC31,U+BC84,U+BC88,U+BC8C,U+BC94-BC95,U+BCA4,U+BCBC-BCBD,U+BCC0,U+BCC4,U+BCD1,U+BCF4-BCF5,U+BCF8,U+BD04,U+BD07,U+BD24,U+BD80,U+BD84,U+BD88,U+BE0C,U+BE14,U+BE44,U+BE48,U+BE4C,U+BE60,U+BE68,U+BFCC,U+BFD0,U+C0AC-C0AD,U+C0B0,U+C0B4,U+C0B6,U+C0BD,U+C0C1,U+C0C8-C0C9,U+C0DD,U+C11C-C11D,U+C120,U+C124,U+C131,U+C138-C139,U+C13C,U+C158,U+C18C-C18D,U+C190,U+C194,U+C1A5,U+C1C4,U+C218,U+C21C,U+C220,U+C26C,U+C2A4,U+C2B5,U+C2B9,U+C2DC-C2DD,U+C2E0,U+C2E4,U+C2EC,U+C2F1,U+C2F6,U+C2F8,U+C4F0,U+C50C,U+C544-C545,U+C548,U+C54A,U+C54C,U+C554-C555,U+C558,U+C560-C561,U+C57C-C57D,U+C591,U+C5B4-C5B5,U+C5B8,U+C5BC,U+C5C5-C5C7,U+C5D0,U+C5EC-C5ED,U+C5F0,U+C5F4,U+C5FC,U+C600-C601,U+C608,U+C624,U+C628,U+C62C,U+C640,U+C644,U+C655,U+C678,U+C694-C695,U+C6A9,U+C6B0,U+C6B4,U+C6B8,U+C6C0,U+C6C3,U+C6CC,U+C6D0,U+C6D4,U+C6E0,U+C6E8,U+C704,U+C720-C721,U+C728,U+C73C,U+C740,U+C744,U+C74C,U+C751,U+C758,U+C774-C775,U+C778,U+C77C,U+C784-C785,U+C787-C788,U+C790-C791,U+C794,U+C7A0,U+C7A5-C7A6,U+C7AC,U+C7C1,U+C800-C801,U+C804,U+C808,U+C80A,U+C810-C811,U+C815,U+C81C,U+C838,U+C870-C871,U+C874,U+C878,U+C881,U+C885,U+C88B,U+C8FC,U+C900,U+C904,U+C911,U+C988-C989,U+C99D,U+C9C0-C9C1,U+C9C4,U+C9C8,U+C9D1,U+C9D5,U+C9E7,U+CABD,U+CC0D,U+CC28-CC29,U+CC2E,U+CC38,U+CC3D,U+CC45,U+CC98,U+CC9C,U+CCA0,U+CCA8,U+CCAB,U+CCAD,U+CCB4,U+CCD0,U+CD08,U+CD1D,U+CD5C,U+CD94-CD95,U+CD9C,U+CDA4,U+CDA9,U+CDB0,U+CDCC,U+CDE8,U+CE35,U+CE58,U+CE68,U+CE74,U+CE94,U+CEA1,U+CEE4,U+CEE8,U+CEEC,U+CF00,U+CF54,U+CFFC,U+D06C,U+D070,U+D07C,U+D0A4,U+D0C0-D0C1,U+D0C4,U+D0C8,U+D0DC-D0DD,U+D0E0,U+D130-D131,U+D134,U+D14C-D14D,U+D154,U+D1A0-D1A1,U+D1B5,U+D1F4,U+D22C,U+D2B8-D2B9,U+D2C0,U+D2C8,U+D2F0,U+D300,U+D305,U+D30C,U+D310,U+D31D,U+D320,U+D328,U+D380,U+D398,U+D3B8,U+D3C9,U+D3D0,U+D3EC-D3ED,U+D3F0,U+D3F4,U+D45C,U+D488,U+D48D,U+D504,U+D508,U+D50C,U+D53C,U+D544,U+D558-D559,U+D55C,U+D560,U+D568-D569,U+D56D,U+D574-D575,U+D588-D589,U+D5A5,U+D5C8-D5C9,U+D5D8,U+D5E4,U+D600,U+D604,U+D608,U+D611,U+D615,U+D61C,U+D638,U+D63C,U+D648,U+D654-D655,U+D658,U+D65C,U+D669,U+D68C-D68D,U+D69F,U+D6A8,U+D6C4,U+D734,U+D750,U+D76C,U+D788,U+D78C,U+D798,U+FF01-FFBE,U+FFC2-FFC7,U+FFCA-FFCF,U+FFD2-FFD7,U+FFDA-FFDC,U+FFE0-FFE6,U+FFE8-FFEE; } @font-face { font-family: 'Noto Serif KR'; src: url('/templates/_common/bonnie/fonts/NotoSerifKR.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0020-007E,U+00A1-00AC,U+00AE-00FF,U+2010-2027,U+2030-205E,U+20A9,U+2192,U+2460-2461,U+3001-303F,U+321C,U+65B0,U+AC00-AC01,U+AC04,U+AC08,U+AC10-AC12,U+AC15,U+AC19,U+AC1C-AC1D,U+AC31,U+AC70-AC71,U+AC74,U+AC78,U+AC80,U+AC8C,U+ACA8-ACAA,U+ACAC,U+ACB0,U+ACBD,U+ACC4,U+ACE0,U+ACE4,U+ACE8,U+ACF3,U+ACF5,U+ACFC,U+AD00,U+AD04,U+AD11,U+AD1C,U+AD34,U+AD50,U+AD6C-AD6D,U+AD81,U+AD8C,U+ADC0,U+ADE0,U+ADF8,U+ADFC,U+AE00,U+AE08-AE09,U+AE30,U+AE34,U+AE38,U+AE41,U+AE4A,U+AE4C,U+AE68,U+AED8,U+AF2D,U+AF34,U+AF3C,U+AFB8,U+B057,U+B098,U+B09C,U+B0A0,U+B0A8-B0A9,U+B0AE,U+B0B3-B0B4,U+B0C9,U+B108,U+B110,U+B113,U+B118,U+B140,U+B144,U+B178-B179,U+B180,U+B192,U+B1CC,U+B1E8,U+B204,U+B208,U+B274,U+B294,U+B298,U+B2A5,U+B2C8,U+B2CC,U+B2D0,U+B2D8,U+B2E4-B2E5,U+B2E8,U+B2EB-B2EC,U+B2F4-B2F5,U+B2F9,U+B300,U+B354,U+B358,U+B370,U+B3C4-B3C5,U+B3C8,U+B3CC,U+B3D9,U+B418,U+B41C,U+B420,U+B428-B429,U+B450-B451,U+B454,U+B4DC-B4DD,U+B4E0,U+B4E4,U+B4F1,U+B514,U+B530-B531,U+B54C,U+B5A4,U+B5BB,U+B610-B611,U+B744,U+B77C-B77D,U+B780,U+B78C-B78D,U+B791,U+B798,U+B79C,U+B7AB,U+B7C9,U+B7EC,U+B7FC,U+B808-B809,U+B824-B825,U+B828,U+B834,U+B839,U+B840,U+B85C-B85D,U+B860,U+B8CC,U+B8E8,U+B8F9,U+B958,U+B960,U+B974,U+B978,U+B97C,U+B984,U+B9AC,U+B9B0,U+B9B4,U+B9BD,U+B9BF,U+B9C1,U+B9C8-B9C9,U+B9CC,U+B9CE,U+B9D0,U+B9DD-B9DE,U+B9E4-B9E5,U+BA38,U+BA54,U+BA70,U+BA74,U+BA85,U+BAA8-BAA9,U+BAB8,U+BB34,U+BB38,U+BB3C,U+BBC0,U+BBF8-BBF9,U+BBFC,U+BBFF-BC00,U+BC0F,U+BC14-BC15,U+BC18,U+BC1B-BC1C,U+BC25,U+BC29,U+BC30-BC31,U+BC84,U+BC88,U+BC8C,U+BC94-BC95,U+BCA4,U+BCBC-BCBD,U+BCC0,U+BCC4,U+BCD1,U+BCF4-BCF5,U+BCF8,U+BD04,U+BD07,U+BD24,U+BD80,U+BD84,U+BD88,U+BE0C,U+BE14,U+BE44,U+BE48,U+BE4C,U+BE60,U+BE68,U+BFCC,U+BFD0,U+C0AC-C0AD,U+C0B0,U+C0B4,U+C0B6,U+C0BD,U+C0C1,U+C0C8-C0C9,U+C0DD,U+C11C-C11D,U+C120,U+C124,U+C131,U+C138-C139,U+C13C,U+C158,U+C18C-C18D,U+C190,U+C194,U+C1A5,U+C1C4,U+C218,U+C21C,U+C220,U+C26C,U+C2A4,U+C2B5,U+C2B9,U+C2DC-C2DD,U+C2E0,U+C2E4,U+C2EC,U+C2F1,U+C2F6,U+C2F8,U+C4F0,U+C50C,U+C544-C545,U+C548,U+C54A,U+C54C,U+C554-C555,U+C558,U+C560-C561,U+C57C-C57D,U+C591,U+C5B4-C5B5,U+C5B8,U+C5BC,U+C5C5-C5C7,U+C5D0,U+C5EC-C5ED,U+C5F0,U+C5F4,U+C5FC,U+C600-C601,U+C608,U+C624,U+C628,U+C62C,U+C640,U+C644,U+C655,U+C678,U+C694-C695,U+C6A9,U+C6B0,U+C6B4,U+C6B8,U+C6C0,U+C6C3,U+C6CC,U+C6D0,U+C6D4,U+C6E0,U+C6E8,U+C704,U+C720-C721,U+C728,U+C73C,U+C740,U+C744,U+C74C,U+C751,U+C758,U+C774-C775,U+C778,U+C77C,U+C784-C785,U+C787-C788,U+C790-C791,U+C794,U+C7A0,U+C7A5-C7A6,U+C7AC,U+C7C1,U+C800-C801,U+C804,U+C808,U+C80A,U+C810-C811,U+C815,U+C81C,U+C838,U+C870-C871,U+C874,U+C878,U+C881,U+C885,U+C88B,U+C8FC,U+C900,U+C904,U+C911,U+C988-C989,U+C99D,U+C9C0-C9C1,U+C9C4,U+C9C8,U+C9D1,U+C9D5,U+C9E7,U+CABD,U+CC0D,U+CC28-CC29,U+CC2E,U+CC38,U+CC3D,U+CC45,U+CC98,U+CC9C,U+CCA0,U+CCA8,U+CCAB,U+CCAD,U+CCB4,U+CCD0,U+CD08,U+CD1D,U+CD5C,U+CD94-CD95,U+CD9C,U+CDA4,U+CDA9,U+CDB0,U+CDCC,U+CDE8,U+CE35,U+CE58,U+CE68,U+CE74,U+CE94,U+CEA1,U+CEE4,U+CEE8,U+CEEC,U+CF00,U+CF54,U+CFFC,U+D06C,U+D070,U+D07C,U+D0A4,U+D0C0-D0C1,U+D0C4,U+D0C8,U+D0DC-D0DD,U+D0E0,U+D130-D131,U+D134,U+D14C-D14D,U+D154,U+D1A0-D1A1,U+D1B5,U+D1F4,U+D22C,U+D2B8-D2B9,U+D2C0,U+D2C8,U+D2F0,U+D300,U+D305,U+D30C,U+D310,U+D31D,U+D320,U+D328,U+D380,U+D398,U+D3B8,U+D3C9,U+D3D0,U+D3EC-D3ED,U+D3F0,U+D3F4,U+D45C,U+D488,U+D48D,U+D504,U+D508,U+D50C,U+D53C,U+D544,U+D558-D559,U+D55C,U+D560,U+D568-D569,U+D56D,U+D574-D575,U+D588-D589,U+D5A5,U+D5C8-D5C9,U+D5D8,U+D5E4,U+D600,U+D604,U+D608,U+D611,U+D615,U+D61C,U+D638,U+D63C,U+D648,U+D654-D655,U+D658,U+D65C,U+D669,U+D68C-D68D,U+D69F,U+D6A8,U+D6C4,U+D734,U+D750,U+D76C,U+D788,U+D78C,U+D798,U+FF01-FFBE,U+FFC2-FFC7,U+FFCA-FFCF,U+FFD2-FFD7,U+FFDA-FFDC,U+FFE0-FFE6,U+FFE8-FFEE; } /* Cafe24Shiningstar, GmarketSansBold: real webfonts, sourced from 눈누(noonnu.cc)'s commercial-free-use catalog via the projectnoonnu GitHub mirror + jsDelivr CDN. Previously mapped to a Noto Sans KR Bold fallback because "no stable CDN was found" - that was wrong, a proper search turned these up. This matters beyond cosmetics: Cafe24Shiningstar (the 연금보험 notebook/checklist section's font) is much narrower than Noto Sans KR Bold, and the fallback's extra width was pushing text past its measured box into a photo area behind it (found via screenshot). */ /* Self-hosted WOFF2 subsets (2026-07-31): the original external woff files (jsDelivr, ~600KB-1.4MB each, full glyph sets, format('woff') not woff2) were the single biggest PSI mobile LCP/FCP regression across all 10 bonnie sites - fontTools subset to the actual character set used across all 10 themes' std/ HTML (+ a Latin/CJK-punctuation/₩ safety buffer), cutting 88-94% per font. If new characters are added to any theme's canvas text that aren't covered by the subset, they will silently fall back to the next font in the stack (not tofu) - regenerate the subset if that's undesired. */ @font-face { font-family: 'Cafe24Shiningstar'; src: url('/templates/_common/bonnie/fonts/Cafe24Shiningstar.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'GmarketSansBold'; src: url('/templates/_common/bonnie/fonts/GmarketSansBold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* THEFACESHOP (더페이스샵 잉크리퀴드체/Ink Liquid, a calligraphy brush font) - was previously unmapped so it fell back to Noto Sans KR. Used for the "유병자도 OK!" speech-bubble text (유병자보험/암보험) where a separately positioned "ok!" emphasis layer sits right after it - the fallback font's wider metrics made "유병자도" run into "ok!" (found via screenshot). */ @font-face { font-family: 'THEFACESHOP'; src: url('/templates/_common/bonnie/fonts/InkLipquid.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } .pc-layout, .mobile-layout, .pc-layout *, .mobile-layout * { box-sizing: border-box; margin: 0; padding: 0; } .pc-layout img, .mobile-layout img { display: block; max-width: none; -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; } .pc-layout a, .mobile-layout a { color: inherit; text-decoration: none; } .pc-layout button, .mobile-layout button { font-family: inherit; border: none; background: none; cursor: pointer; padding: 0; } /* Layout scaling: --u is "1 PSD pixel" for the current viewport. Every generated component positions/sizes elements with calc(var(--u) * N), where N is the raw pixel value measured from the PSD guide. PC design width = 1920, mobile design width = 720. font-size is the ONE exception: Chromium has a rendering bug where `font-size: calc(var(--u) * N)` corrupts glyph shaping for large bold CJK text (verified directly - same text, same computed px value, only differs by calc() vs a plain rem number on the font-size property itself). So text components use `Nrem` (a plain number, computed at generation time) instead, and only the root element's font-size uses calc() to drive that rem scale. 1rem = 10 raw PSD px at the reference width, matching --u's divisor/10. */ html { font-size: min(calc(100vw / 192), 10px); } @media (max-width: 1023px) { html { font-size: calc(100vw / 72); } } .pc-layout { /* --u capped at 1px past 1920px (2026-07-31, reverting the prior no-cap decision at explicit user request): the canvas now stops growing at its native 1920px width and centers with white margins on wider monitors, matching how the GNB header already behaves (max-width:1200px, doesn't grow either) instead of the body filling 100vw indefinitely and looking oversized on big/ultra-wide screens. This intentionally reintroduces the white-bar tradeoff that a prior fix removed the cap to avoid - that's the deliberate choice this time, not an oversight. html's font-size (above) has no matching >1920px uncap either, so both stay capped in sync - avoiding the earlier QHD misalignment bug (baked --u-based highlight boxes vs rem-based text drifting apart), since back then only font-size was capped while --u wasn't. Capping both together avoids reintroducing that mismatch. --canvas-gutter is the resulting empty margin on one side once capped (0 below 1920px, growing above it) - fixed-position elements anchored to the canvas's own right edge (not the viewport's) need to add this, see e.g. the QuickMenu-style widget in each theme's own {product}-style.css (search position:fixed;right:calc(var(--u)). */ --u: min(calc(100vw / 1920), 1px); --canvas-gutter: max(0px, calc((100vw - 1920px) / 2)); position: relative; width: calc(var(--u) * 1920); margin: 0 auto; overflow: hidden; } .mobile-layout { --u: calc(100vw / 720); position: relative; width: 100vw; overflow: hidden; } .pc-layout { display: block; } .mobile-layout { display: none; } @media (max-width: 1023px) { .pc-layout { display: none; } .mobile-layout { display: block; } } /* 자매 사이트 박스 링크 (하단 보험 그리드). 각 링크 자신의 sxN 규칙이 이제 원래 장식용이었던 흰 테두리 박스의 position/size/border를 그대로 가져와 클릭 영역 전체를 덮는다(2026-07-31) - 예전엔 이 흰 박스가 별도 비클릭 div였고 링크 자신은 텍스트 크기만 한 작은 히트박스였어서, 여기 padding/음수margin으로 히트박스를 약간 넓히는 미봉책을 썼었다. 이제 필요 없어 제거 - box-sizing만 각 sxN의 border-box 판단과 맞춰 border-box로 통일(specificity상 a.bn-sitelink가 .sxN보다 우선하므로 여기서 content-box로 두면 각 버튼의 box-sizing:border-box가 무시돼 버튼이 실제보다 커져버림). */ a.bn-sitelink{text-decoration:none;color:inherit;cursor:pointer;box-sizing:border-box;} a.bn-sitelink:hover{opacity:0.85;}