.grey-background-page{--navy: #263441;--coral: #365e80;--grey-accent: #365e80;--grey-canvas: #eef0f2;--content-gutter: max(24px, calc((100vw - 1120px)/2) );color:var(--navy);background:#fff;font-family:Manrope,Arial,sans-serif}.grey-background-page :is(h1,h2,h3){text-wrap:balance}.grey-background-page:lang(ko){word-break:keep-all;overflow-wrap:break-word}.grey-background-page .ad-banner{max-width:100%;overflow:hidden}.grey-background-page :is(a,button,input):focus-visible{outline:3px solid #547ea0;outline-offset:4px}.grey-background-page .tool-section{--tool-section-gutter: var(--content-gutter)}.grey-hero{padding:56px 24px 32px;background:var(--grey-canvas)}.grey-hero__copy{max-width:920px;margin-inline:auto;text-align:center}.grey-assurances{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 24px;margin:0 0 22px;color:var(--grey-accent);font-size:12px;font-weight:600}.grey-assurances span:before{content:"✓";margin-inline-end:7px}.grey-hero h1{max-width:850px;margin:0 auto 22px;font:650 clamp(38px,4.4vw,62px)/1.06 "Bricolage Grotesque",Arial,sans-serif;letter-spacing:-.05em}.grey-hero__intro{max-width:780px;margin:0 auto 30px;color:#51606e;font-size:15px;line-height:1.75}.grey-workboard{max-width:1060px;margin:auto;padding:10px;border:1px solid #cbd2d9;border-radius:20px;background:#fff;box-shadow:0 16px 40px #2634410a}.grey-background-page .grey-workboard .workspace{scroll-margin-top:100px;border:0;border-radius:12px;background:#263441;color:#fff}.grey-background-page .grey-workboard .workspace.empty{min-height:290px;padding:24px 20px}.grey-background-page .grey-workboard .workspace h2{max-width:660px;font:550 clamp(24px,2.8vw,32px)/1.15 "Bricolage Grotesque",Arial,sans-serif;letter-spacing:-.035em}.grey-background-page .grey-workboard .workspace-kicker{margin:0;color:#c7d4e0;font:500 11px/1.5 DM Mono,monospace}.grey-background-page .grey-workboard .workspace-privacy-link{margin-top:12px;color:#c7d4e0;font-size:11px;text-decoration:underline;text-underline-offset:3px}.grey-background-page .grey-workboard .scanner-icon{width:48px;height:48px;margin-bottom:10px}.grey-background-page .grey-workboard .scanner-icon b{width:18px;height:18px;border-color:#c7d4e0}.grey-background-page .grey-workboard .scanner-icon span{top:24px;left:13px;width:23px;background:#c7d4e0}.grey-background-page .grey-workboard :is(.upload-button,.remove-button,.download-button){border-radius:8px;padding:14px 22px;color:#263441;background:#eef0f2;font-weight:700;box-shadow:none}.grey-background-page .grey-workboard :is(.upload-button,.remove-button,.download-button):hover:not(:disabled){background:#dce2e8}.grey-background-page .grey-workboard :is(.workspace-topline button,.quiet-button){color:#d6e0e9}.grey-background-page .grey-workboard .workspace-note{color:#cbd5df;line-height:1.6;text-align:center}.grey-background-page .grey-workboard .workspace.active{padding:18px}.grey-background-page .grey-workboard .image-stage{height:320px}.grey-background-page .grey-workboard .image-pane.original{background:#eef0f2}.grey-background-page .grey-workboard .file-meta strong{color:#fff}.grey-background-page .grey-workboard .file-meta span{color:#cbd5df;line-height:1.6}.grey-background-page .grey-workboard .workspace-background{color:#fff;border-color:#ffffff30}.grey-background-page .grey-workboard .workspace-background>div:first-child p{color:#c7d4e0}.grey-background-page .grey-workboard .workspace-background>div:first-child strong{color:#fff}.grey-background-page .grey-workboard .background-choice-group button.is-active{color:#263441;border-color:#8fa7bc;background:#eef0f2}.grey-shade-reference{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 26px;margin:22px auto 0;color:#51606e;font-size:12px}.grey-shade-reference>span{display:inline-flex;align-items:center;gap:8px}.grey-shade-reference i{width:17px;height:17px;border:1px solid #26344133;border-radius:50%}.grey-shade-reference code{font:10px DM Mono,monospace;direction:ltr;unicode-bidi:isolate}.grey-background-page .comparison-input{direction:ltr}.grey-background-page .image-text-comparison{padding-block:80px;gap:64px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.grey-background-page .image-text-comparison h2{font-size:clamp(32px,3.4vw,46px);font-weight:600;line-height:1.1;letter-spacing:-.04em}.grey-background-page .image-text-comparison p{font-size:15px;line-height:1.8}.grey-background-page .image-text-comparison--reversed{background:var(--grey-canvas)}.grey-background-page .grey-solid-section .image-text-comparison{background:#fff}.grey-background-page .grey-solid-section .image-text-comparison--reversed__visual{order:-1}.grey-background-page .image-text-comparison :is(.image-text-comparison--compact__visual,.image-text-comparison--reversed__visual,.image-text-comparison--tall__visual){width:100%;max-width:520px;justify-self:center;border-radius:12px;box-shadow:none}.grey-background-page .image-text-comparison .comparison-label{font-size:9px}.grey-background-page .image-text-comparison .comparison-stage.is-focused{outline-color:#547ea0}.grey-workflow{padding-bottom:66px}.grey-background-page .grey-workflow .seo-workflow{padding-bottom:24px}.grey-background-page .workflow-explanation{margin:14px auto 0;color:#51606e;font-size:14px;line-height:1.7}.grey-workflow__action{padding-inline:var(--content-gutter);text-align:center}.grey-workflow__action a{display:inline-flex;gap:8px;padding:14px 24px;border-radius:8px;color:#fff;background:var(--grey-accent);font-size:14px;font-weight:600}.grey-background-page .why-section{--why-background: #eef0f2}.grey-background-page .why-section__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 36px}.grey-background-page .why-section__image{border-radius:10px;box-shadow:none}.grey-background-page .why-section__card h3{font-size:23px}.grey-background-page .audience-tabs{background:#fff}.grey-background-page .audience-tabs__tabs{background:#eef0f2}.grey-background-page .audience-tabs__tabs .is-active{color:#fff;background:var(--grey-accent)}.grey-background-page .audience-tabs__visual{min-height:0;aspect-ratio:4 / 3;box-shadow:none}.grey-background-page .audience-tabs__visual img{min-height:0;object-fit:contain;object-position:center}.grey-background-page .audience-tabs__visual--single{grid-template-columns:minmax(0,1fr)}.grey-background-page .audience-tabs__visual--single img{object-fit:cover;background:var(--grey-canvas)}.grey-background-page .audience-tabs__copy>a{border-radius:8px;background:var(--grey-accent)}.grey-background-page .preview-close{background:var(--navy)}.grey-background-page .tool-section.preview-close>div>a{border-radius:8px;color:var(--navy)}@media(min-width:901px){.grey-background-page .preview-close{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;padding-inline:var(--content-gutter)}.grey-background-page .preview-close>div{max-width:none}}@media(max-width:1100px){.grey-background-page{--content-gutter: 40px}.grey-background-page .image-text-comparison{gap:36px}}@media(max-width:860px){.grey-background-page .image-text-comparison{grid-template-columns:1fr}}@media(min-width:701px)and (max-width:860px){.grey-background-page .grey-solid-section .image-text-comparison{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}}@media(max-width:760px){.grey-background-page{--content-gutter: 24px}.grey-hero{padding:36px 16px 28px}.grey-hero__intro{font-size:14px}.grey-background-page .image-text-comparison{padding-block:54px}.grey-background-page .grey-workboard .image-stage{height:245px;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:6px}.grey-background-page .grey-workboard .workspace-actions{flex-wrap:wrap}.grey-background-page .grey-workboard .file-meta{flex-basis:100%}}@media(max-width:540px){.grey-hero h1{font-size:36px}.grey-workboard{padding:6px;border-radius:15px}.grey-background-page .grey-workboard .workspace.active{padding:12px}.grey-background-page .why-section__grid{grid-template-columns:1fr;gap:32px}.grey-background-page .audience-tabs__tabs{flex-wrap:wrap;border-radius:12px}.grey-shade-reference{gap:12px 18px}.grey-workflow__action a{max-width:100%}}@media(prefers-reduced-motion:reduce){html:has(.grey-background-page){scroll-behavior:auto}.grey-background-page *,.grey-background-page *:before,.grey-background-page *:after{transition:none!important;animation:none!important}}html[lang=th]:has(.grey-background-page) .site-header .locale-switcher>summary{white-space:nowrap}