/* supermaxkorea — light 2026 refresh layer. Additive + non-destructive. Motion is JS-gated (.js-anim on ) and reduced-motion safe, so content is always visible even if JS fails. */ :root { --mx-ease: cubic-bezier(.22,.61,.36,1); --mx-brand: #2c534a; } html { scroll-behavior: smooth; } /* smoother interactive feedback on controls */ a, button, [role="button"], .btn, input, select, textarea, [class*="button"], [class*="card"] { transition: color .2s var(--mx-ease), background-color .2s var(--mx-ease), border-color .2s var(--mx-ease), box-shadow .25s var(--mx-ease), transform .25s var(--mx-ease), opacity .2s var(--mx-ease); } /* accessible focus ring (modern :focus-visible, often stripped by resets) */ :focus-visible { outline: 2px solid var(--mx-brand); outline-offset: 3px; border-radius: 6px; } /* gentle whole-page entrance */ .js-anim body { animation: mxFadeIn .6s var(--mx-ease) both; } @keyframes mxFadeIn { from { opacity: 0; } to { opacity: 1; } } /* scroll-reveal — only for elements JS opts in via [data-mx-reveal] */ .js-anim [data-mx-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--mx-ease), transform .7s var(--mx-ease); } .js-anim [data-mx-reveal].mx-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js-anim body, .js-anim [data-mx-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---- mobile menu overlay (built by modernize.js, mobile only) ---- */ .mx-noscroll, .mx-noscroll body { overflow: hidden !important; } .mx-menu { position: fixed; inset: 0; z-index: 100000; background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s var(--mx-ease); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .mx-menu.mx-open { opacity: 1; pointer-events: auto; } .mx-menu-nav { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 4vh, 26px); } .mx-menu-nav a, .mx-menu-expand, .mx-menu-sub a { font-family: "RebondGrotesque", system-ui, -apple-system, sans-serif; font-weight: 700; font-size: clamp(26px, 7vw, 34px); line-height: 1.15; text-transform: uppercase; letter-spacing: .5px; color: #111; text-decoration: none; } .mx-menu-nav a, .mx-menu-expand { opacity: 0; transform: translateY(12px); animation: mxItemIn .45s var(--mx-ease) forwards; } .mx-menu.mx-open .mx-menu-nav > a, .mx-menu.mx-open .mx-menu-expand { animation-delay: calc(var(--i, 0) * .06s + .08s); } .mx-menu-group { --i: 2; } .mx-menu.mx-open .mx-menu-group .mx-menu-expand { animation-delay: calc(var(--i, 2) * .06s + .08s); } .mx-menu-expand { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: none; background: transparent; cursor: pointer; padding: 0; } .mx-menu-chevron { flex-shrink: 0; transition: transform .25s var(--mx-ease); } .mx-menu-group.mx-open .mx-menu-chevron { transform: rotate(180deg); } .mx-menu-group { display: flex; flex-direction: column; align-items: center; width: 100%; } .mx-menu-sub { width: 100%; max-height: 0; overflow: hidden; transition: max-height .35s var(--mx-ease); } .mx-menu-group.mx-open .mx-menu-sub { max-height: 420px; } .mx-menu-sub-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.5vh, 16px); padding: clamp(10px, 2vh, 16px) 0 2px; } .mx-menu-sub a { text-transform: none; letter-spacing: 0; opacity: 0; transform: none; animation: none; } .mx-menu-group.mx-open .mx-menu-sub a { opacity: 1; animation: mxItemIn .35s var(--mx-ease) both; } .mx-menu-group.mx-open .mx-menu-sub a:nth-child(1) { animation-delay: .04s; } .mx-menu-group.mx-open .mx-menu-sub a:nth-child(2) { animation-delay: .08s; } .mx-menu-group.mx-open .mx-menu-sub a:nth-child(3) { animation-delay: .12s; } .mx-menu-group.mx-open .mx-menu-sub a:nth-child(4) { animation-delay: .16s; } .mx-menu-group.mx-open .mx-menu-sub a:nth-child(5) { animation-delay: .20s; } .mx-menu-group.mx-open .mx-menu-sub a:nth-child(6) { animation-delay: .24s; } @keyframes mxItemIn { to { opacity: 1; transform: none; } } .mx-menu-nav a:active, .mx-menu-expand:active { opacity: .5; } .mx-menu-close { position: absolute; top: max(20px, env(safe-area-inset-top)); right: 20px; width: 52px; height: 52px; min-width: 44px; min-height: 44px; border: none; background: #111; color: #fff; border-radius: 999px; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .mx-menu-langs { margin-top: clamp(22px, 6vh, 40px); } @media (prefers-reduced-motion: reduce) { .mx-menu-nav a, .mx-menu-expand, .mx-menu-sub a { animation: none; opacity: 1; transform: none; } .mx-menu-sub { transition: none; max-height: none; } .mx-menu-group:not(.mx-open) .mx-menu-sub { display: none; } } @media (min-width: 1024px) { .mx-menu, .mx-menu-close { display: none !important; } } /* ---- revived Swiper carousels: runtime is stripped, so turn each frozen Swiper into a native horizontal scroller (drag + arrows wired in JS). ---- */ .swiper { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; touch-action: pan-x pan-y !important; /* Swiper bundle sets pan-y only — blocks mobile horizontal swipe */ } .swiper::-webkit-scrollbar { width: 0; height: 0; display: none; } .swiper-wrapper { transform: none !important; } .swiper-slide { scroll-snap-align: start; } .swiper-slide-duplicate { display: none !important; } /* hide Swiper loop clones (would repeat under native scroll) */ .swiper.mx-grabbing { cursor: grabbing; user-select: none; } /* Industry tab row — active tab after user click/arrow (not on page load) */ .product-slider-slide.mx-ind-active { color: #000 !important; } /* /all-gloves filter — desktop right sidebar; mobile full-screen drawer (no content push) */ .mx-filters-layout.mx-filters-open > .mx-filters-products { grid-column: span 2 / span 2; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } @media (max-width: 1023px) { .mx-filters-layout.mx-filters-open > .mx-filters-products { grid-column: span 1 / span 1; grid-template-columns: repeat(1, minmax(0, 1fr)) !important; } } .mx-filters-panel.mx-filters-open { display: flex !important; position: relative; justify-content: center; padding-left: 7px; z-index: 20; pointer-events: auto; } .mx-filters-panel .mx-filter-option { cursor: pointer; user-select: none; } .mx-filters-panel .mx-filter-option.mx-filter-on svg path[stroke="black"] { stroke-width: 1.5; } @media (max-width: 767px) { .mx-filters-panel.mx-filters-open { position: fixed !important; inset: 0 !important; z-index: 9999 !important; justify-content: flex-start; align-items: flex-start; padding: 0; background: rgba(0, 0, 0, 0.45); } .mx-filters-panel.mx-filters-open > div { pointer-events: auto; width: calc(100% - 30px); max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px)); margin: max(20px, env(safe-area-inset-top, 0px)) 15px max(20px, env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 24px; } .mx-filters-noscroll, html.mx-filters-noscroll, html.mx-filters-noscroll body { overflow: hidden !important; } /* all-gloves floating filter FAB — respect home-indicator safe area */ .page-full-wrapper button[class*="bottom-[30px]"], .min-h-screen button[class*="bottom-[30px]"] { bottom: max(30px, env(safe-area-inset-bottom, 0px)) !important; } /* Mobile top bar lives in a fixed grid shell — keep it above content */ .grid[class*="fixed"][class*="top-5"] { position: fixed !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; } .mx-menu-nav a, .mx-menu-expand, .mx-menu-sub a { font-size: clamp(22px, 6.2vw, 30px); } } /* SHOW FILTERS feedback pulse on the category-pills row */ .mx-pulse { animation: mxPulse 1.3s var(--mx-ease); border-radius: 12px; } @keyframes mxPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(44, 83, 74, 0); } 30% { box-shadow: 0 0 0 4px rgba(44, 83, 74, .35); } } /* Industry product cards — mirror anchor is shorter than the card shell; fill hit area */ .swiper-slide > [class*="cursor-pointer"] { height: 100%; width: 100%; } .swiper-slide > [class*="cursor-pointer"] > a[href*="-gloves/"] { display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; } a[href="/all-gloves"] > p[class*="max-w-[200px]"], a[href*="/all-gloves"] > p[class*="max-w-[200px]"] { max-width: none !important; white-space: nowrap; } /* Desktop — Industries / 산업군 hover mega-menu */ @media (min-width: 1024px) { /* Keep header pinned — do not override Tailwind `fixed` on .menu-animate */ .menu-animate.mx-industries-host { position: fixed !important; } .mx-industries-trigger { position: relative; cursor: default; } .mx-industries-trigger.mx-industries-active > a { opacity: 0.4; } .mx-industries-dropdown { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 10001; max-width: 1440px; margin: 0 auto; padding: 35px 40px; background: #fff; border-radius: 30px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease; } .mx-industries-dropdown.mx-industries-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .mx-industries-grid { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 97px; row-gap: 25px; } .mx-industries-link { font-family: inherit; font-size: calc(var(--font-size-coefficient, 1) * 42px); font-weight: 500; line-height: 1; color: rgba(0, 0, 0, 0.4); text-decoration: none; white-space: nowrap; transition: color 0.3s ease; } .mx-industries-link:hover, .mx-industries-link:focus-visible { color: #000; outline: none; } .mx-industries-link:focus-visible { text-decoration: underline; text-underline-offset: 4px; } } @media (max-width: 1023px) { .mx-industries-dropdown { display: none !important; } } /* Header nav logo — mobile default; PC sized in min-width query below */ img.mx-logo { width: auto; height: auto; object-fit: contain; flex-shrink: 0; } img.mx-logo-header { height: 76px; max-width: min(280px, 72vw); } img.mx-logo-footer { height: 96px; max-width: 280px; } /* Footer — 전화 문의 / 이메일 / 회사·주소 (was 14px label + 16px value) */ .mx-footer-contact div.flex.space-x-10 > .flex-col > p.font-rebond:first-child { font-size: calc(var(--font-size-coefficient) * 18px) !important; line-height: 1.35 !important; } .mx-footer-contact div.flex.space-x-10 > .flex-col > p.font-rebond:nth-child(2), .mx-footer-contact div.flex.space-x-10 > .flex-col > p.font-rebond:has(a[href^="mailto:"]) { font-size: calc(var(--font-size-coefficient) * 22px) !important; line-height: 1.3 !important; } .mx-footer-contact p[class*="max-w-[366px]"] { font-size: calc(var(--font-size-coefficient) * 18px) !important; line-height: 1.45 !important; } @media (max-width: 767px) { .mx-footer-contact div.flex.space-x-10 > .flex-col > p.font-rebond:first-child { font-size: calc(var(--font-size-coefficient) * 17px) !important; } .mx-footer-contact div.flex.space-x-10 > .flex-col > p.font-rebond:nth-child(2), .mx-footer-contact div.flex.space-x-10 > .flex-col > p.font-rebond:has(a[href^="mailto:"]) { font-size: calc(var(--font-size-coefficient) * 20px) !important; } .mx-footer-contact p[class*="max-w-[366px]"] { font-size: calc(var(--font-size-coefficient) * 17px) !important; } } @media (min-width: 1024px) { img.mx-logo-header { height: 102px; max-width: 428px; } .mx-logo-link { height: auto !important; width: auto !important; max-width: none !important; min-height: 0 !important; overflow: visible !important; } .menu-animate > div[class*="rounded-[66px]"] { padding-top: 10px !important; padding-bottom: 10px !important; } /* Desktop header nav: 소개 · 제품 · 산업군 · 파트너스 */ .menu-animate div[class*="lg:inline-flex"] > a.font-rebond.font-semibold, .menu-animate div[class*="lg:inline-flex"] > div > a.font-rebond.font-semibold { font-size: calc(var(--font-size-coefficient) * 18px) !important; letter-spacing: 0.36px; } } @media (max-width: 1023px) { img.mx-logo, img.mx-logo-header, .menu-animate a:has(img.mx-logo-header) { background: transparent !important; box-shadow: none !important; } img.mx-logo-header { height: 76px; max-width: min(280px, 72vw); } .menu-animate a[href="/"], .menu-animate a[href="/en/"], .menu-animate a[href="/en"] { width: auto !important; max-width: none !important; height: auto !important; } } /* language toggle (header) */ .mx-langtoggle { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: 0.75rem; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; } .mx-langtoggle a { color: inherit; text-decoration: none; opacity: 0.55; padding: 0.25rem 0.35rem; border-radius: 4px; } .mx-langtoggle a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 3px; } .mx-langtoggle span { opacity: 0.35; user-select: none; } /* Freeze-mirror: header captured mid hide-animation (animate-menu-up → opacity 0, translateY(-50px)) */ .menu-animate, .menu-animate.animate-menu-up, .menu-animate.animate-menu-down, .mx-nav-visible { opacity: 1 !important; visibility: visible !important; transform: none !important; animation: none !important; } /* SNS "keep in touch" floating media — GSAP left fade-out-el at opacity 0 */ .wrapper-image-grid-title .fade-out-el, .wrapper-image-grid-title .mx-unfrozen { opacity: 1 !important; visibility: visible !important; } @media (max-width: 1024px) { .mx-langtoggle { margin-left: 0; font-size: 12px; } } /* industry section title — frozen w-[170px] is too narrow for KO copy */ h2.font-rebond.uppercase[class*="w-[170px]"] { width: auto !important; max-width: none; white-space: nowrap; } @media (max-width: 767px) { h2.font-rebond.uppercase[class*="w-[170px]"] { white-space: normal; } } /* Hero h1 "손끝에서 / 느껴지는 기쁨" — intentional two-line break via pre-line */ html[lang="ko"] h1.anim-fade-up-2 { max-width: none !important; max-height: none !important; white-space: pre-line; } @media (max-width: 767px) { html[lang="ko"] h1.anim-fade-up-2 { font-size: clamp(26px, 7.5vw, 50px) !important; line-height: 1.1 !important; } } /* Industry panels — GSAP mid-scroll opacity (~0.39) and mobile w-[577%] bleed */ [data-mx-industry-wrap] { position: relative; overflow: hidden; } [data-mx-industry] .image-ref, [data-mx-industry] .slider-content-media, [data-mx-industry] .slider-content-box { opacity: 1 !important; transform: none !important; } @media (max-width: 767px) { /* Industry tab row sits under overflow-hidden — release horizontal overflow for nested scroll */ div.flex.flex-col.overflow-hidden:has(> .swiper.mySwiper) { overflow-x: visible !important; } [data-mx-industry] .image-ref[class*="w-[577%]"] { width: 100% !important; max-width: 100% !important; } } /* Industry panel body arrows — Swiper bakes swiper-button-disabled (no clicks) on static mirror */ [data-mx-industry] [class*="swiperPrev"], [data-mx-industry] [class*="swiperNext"], [class*="overflow-hidden"] .md\\:hidden [class*="swiperPrev"], [class*="overflow-hidden"] .md\\:hidden [class*="swiperNext"] { pointer-events: auto !important; cursor: pointer !important; opacity: 1 !important; } .swiper-button-disabled[class*="swiperPrev"], .swiper-button-disabled[class*="swiperNext"] { pointer-events: auto !important; opacity: 1 !important; } /* Product detail testimonial — freeze-mirror bakes desktop slide width (~1332px inline) */ @media (max-width: 767px) { .mx-product-testimonial, .swiper:has(.ts-l-div) { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; } .mx-product-testimonial .swiper-wrapper, .swiper:has(.ts-l-div) .swiper-wrapper { width: 100% !important; } .mx-product-testimonial-slide, .swiper:has(.ts-l-div) .swiper-slide { width: 100% !important; max-width: 100% !important; } .mx-product-testimonial-grid, .swiper:has(.ts-l-div) .swiper-slide > .grid { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; } .ts-l-div, .ts-r-div { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } .ts-l-b-text, .ts-l-text, .ts-r-div [class*="w-[325px]"], .ts-r-div [class*="w-[500px]"], .ts-r-quote { width: 100% !important; max-width: 100% !important; } .ts-l-text[class*="max-w-"] { max-width: 100% !important; } .ts-r-div[class*="px-[110px]"] { padding-left: 25px !important; padding-right: 25px !important; } .ts-r-quote q { overflow-wrap: anywhere; word-break: break-word; } } /* Vendors form uses contact-dark for API wiring; undo dark-form autofill (white text). */ form.mx-vendor-form.contact-dark input, form.mx-vendor-form.contact-dark textarea, form.mx-vendor-form.contact-dark select { color: #111; caret-color: #111; } form.mx-vendor-form.contact-dark input:-webkit-autofill, form.mx-vendor-form.contact-dark input:-webkit-autofill:hover, form.mx-vendor-form.contact-dark input:-webkit-autofill:focus, form.mx-vendor-form.contact-dark textarea:-webkit-autofill, form.mx-vendor-form.contact-dark textarea:-webkit-autofill:hover, form.mx-vendor-form.contact-dark textarea:-webkit-autofill:focus, form.mx-vendor-form.contact-dark select:-webkit-autofill, form.mx-vendor-form.contact-dark select:-webkit-autofill:hover, form.mx-vendor-form.contact-dark select:-webkit-autofill:focus { -webkit-text-fill-color: #111 !important; caret-color: #111; box-shadow: 0 0 0 1000px #fff inset !important; } /* ============================================================ 2026-05-29 — CTA + contact-us light recolor (Option A: soft sage). Brand teal #2c534a lightened so the pink/magenta accents still pop. Override layer only — the baked Tailwind HTML on ~30 pages is untouched. ============================================================ */ /* (B) Global footer CTA card: black -> mid sage-teal (white text kept = 5.54:1 AA). */ .mx-footer-contact .bg-black.rounded-\[30px\] { background: #4E6F66 !important; } /* (C) contact-us page bg — only /contact-us + /en/contact-us carry .!bg-black. */ .\!bg-black { background: #EEF2F0 !important; /* pale sage-grey */ } /* outer contact panel card blends into the page (footer CTA re-asserted to sage below). */ .\!bg-black .bg-black.rounded-\[30px\] { background: #EEF2F0 !important; } /* info side card -> faint sage tint, separated by shadow + hairline (not contrast). */ .\!bg-black .bg-\[\#191919\] { background: #F4F7F5 !important; box-shadow: 0 8px 24px rgba(44, 83, 74, .08); border: 1px solid #DCE4E0; } /* Pre-existing layout bug (also on the live dark site): the phone/email blocks use md:flex-row and cram side-by-side in the narrow text column, overlapping. Force a vertical stack. gap-x-10 is unique to this element on the page. */ .\!bg-black [class*="gap-x-10"] { flex-direction: column !important; } /* contact form card = white (more specific than the #191919 rule above). */ form.contact-dark:not(.mx-vendor-form) { background: #FFFFFF !important; box-shadow: 0 8px 24px rgba(44, 83, 74, .08); border: 1px solid #DCE4E0; } /* Flip white CONTENT text -> dark on the now-light page (footer + submit re-asserted after). Use ~= (exact class token) NOT *= (substring): *= would also match hover:/md: variants like `hover:text-[#fff]`, forcing the color in ALL states and breaking white-pill buttons. */ .\!bg-black [class~="text-white"], .\!bg-black [class~="text-[white]"], .\!bg-black [class~="text-[#fff]"], .\!bg-black [class~="text-[#FFF]"], .\!bg-black [class~="text-[#ffffff]"], .\!bg-black [class~="text-[#FFFFFF]"] { color: #1E2D29 !important; } /* The contact-us top nav links (소개/제품/산업군/파트너스) are baked white via !text-[#fff] for the OLD dark page; the fixed nav sits OUTSIDE .!bg-black, so the flip above misses it. Now that the page is light they vanish on the cream bg -> darken to match home/vendors nav. Scoped to so the nav CTA pill's (already renders dark on its white pill) is left alone. The a.!text-[#fff] nav class exists only on contact-us. */ a.\!text-\[\#fff\] { color: #1E2D29 !important; } a.\!text-\[\#fff\]:hover { color: rgba(30, 45, 41, .5) !important; } /* contact-us form fields readable on white. */ form.contact-dark:not(.mx-vendor-form) input, form.contact-dark:not(.mx-vendor-form) textarea, form.contact-dark:not(.mx-vendor-form) select { color: #1E2D29 !important; caret-color: #1E2D29; border-color: #7E9890 !important; } form.contact-dark:not(.mx-vendor-form) input::placeholder, form.contact-dark:not(.mx-vendor-form) textarea::placeholder { color: #5F6E69 !important; opacity: 1; } form.contact-dark:not(.mx-vendor-form) input:focus, form.contact-dark:not(.mx-vendor-form) textarea:focus, form.contact-dark:not(.mx-vendor-form) select:focus { border-color: #C44C8A !important; } /* field labels (were text-white opacity-40) -> solid readable sage-grey. */ form.contact-dark:not(.mx-vendor-form) p { color: #5A6B66 !important; opacity: 1 !important; } /* submit button -> brand teal + white text (current text-black would vanish on it). */ form.contact-dark:not(.mx-vendor-form) button[type="submit"] { background: #2c534a !important; color: #FFFFFF !important; } /* the submit label lives in a child

, which the form-p label rule above paints sage-grey (#5A6B66, invisible on the teal button); force it white to match the white arrow icon. */ form.contact-dark:not(.mx-vendor-form) button[type="submit"] p { color: #FFFFFF !important; } form.contact-dark:not(.mx-vendor-form) button[type="submit"]:hover { background: #234339 !important; } /* RE-ASSERT: footer CTA keeps white text on sage (overrides the content flip above). ~= (exact token) so the white pill button's `hover:text-[#fff]` is NOT matched -> its baked `text-black` default survives = dark arrow/label visible on the white button. */ .mx-footer-contact [class~="text-white"], .mx-footer-contact [class~="text-[white]"], .mx-footer-contact [class~="text-[#fff]"], .mx-footer-contact [class~="text-[#FFF]"], .mx-footer-contact [class~="text-[#ffffff]"], .mx-footer-contact [class~="text-[#FFFFFF]"] { color: #FFFFFF !important; } /* autofill on the now-light contact-us form (mirror of the vendors fix above). */ form.contact-dark:not(.mx-vendor-form) input:-webkit-autofill, form.contact-dark:not(.mx-vendor-form) input:-webkit-autofill:hover, form.contact-dark:not(.mx-vendor-form) input:-webkit-autofill:focus, form.contact-dark:not(.mx-vendor-form) textarea:-webkit-autofill, form.contact-dark:not(.mx-vendor-form) select:-webkit-autofill { -webkit-text-fill-color: #1E2D29 !important; caret-color: #1E2D29; box-shadow: 0 0 0 1000px #fff inset !important; } /* defensive: any inline #divider-20 black bar -> match the light page. */ #divider-20 { background: #EEF2F0 !important; } /* ── Transparent header bar (user request) ───────────────────────────────────────── The site header is a fixed, rounded-[66px] frosted-white pill (bg-[#fff] + backdrop-blur). Make it fully transparent so the hero video / page content shows through behind the logo + nav + CTA. The rounded-[66px] + backdrop-blur-[10px] combo is unique to the header. */ .rounded-\[66px\].backdrop-blur-\[10px\] { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Legibility safeguard: a soft white halo keeps the dark logo/nav text readable when darker content scrolls behind the now-transparent fixed header. Invisible over light backgrounds. The 문의하기 CTA keeps its own pill bg, so exclude it from the halo to avoid a glow. */ .rounded-\[66px\] a:not([class*="bg-"]), .rounded-\[66px\] a:not([class*="bg-"]) span, .rounded-\[66px\] > div p, .rounded-\[66px\] button:not([class*="bg-"]) { text-shadow: 0 0 4px rgba(255, 255, 255, .95), 0 0 9px rgba(255, 255, 255, .7), 0 1px 2px rgba(255, 255, 255, .6); } .rounded-\[66px\] img.mx-logo { filter: drop-shadow(0 0 4px rgba(255, 255, 255, .8)); }