/* MONA — hide horizontal scrollbars in swipe rows (Zero Block groups with overflow) */
.t396 .tn-group, .t396 .tn-molecule { scrollbar-width: none !important; -ms-overflow-style: none !important; }
.t396 .tn-group::-webkit-scrollbar, .t396 .tn-molecule::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
/* Korean: wrap by words, not by syllables */
.t396 .tn-atom, .t396 .tn-atom * { word-break: keep-all; overflow-wrap: break-word; }
/* smooth anchor scroll */
html { scroll-behavior: smooth; }
/* Feed post pages (news, cases) without a custom template: dark header background + top padding */
body:has(.t-cms__page-container_snippet) #rec5080375203 .t396__artboard { background-color: #02391f !important; }
body:has(.t-cms__page-container_snippet) #rec5385223603 .t396__artboard { background-color: #02391f !important; }
.t-cms__page-container_snippet { padding-top: 180px !important; }
@media screen and (max-width: 959px) { .t-cms__page-container_snippet { padding-top: 104px !important; } }
/* Case Studies page (EN 5227771203, KR 5386008703): the grid (feed, newest first) skips the newest case, which is shown in the featured card above */
:is(#rec5227771203, #rec5386008703) [data-fe-role="post"]:first-child { display: none !important; }
/* Feed text shown in capitals (press dates) */
.mona-upper, .mona-upper .tn-atom { text-transform: uppercase; }
/* Feed chips (job tags): hide a chip when its field is empty */
.mona-chip:has(> .tn-atom:empty) { display: none !important; }
/* Logo strips: track holds 4 copies of the Client Logos feed; move by one copy and loop */
.mona-marquee > .tn-molecule { width: max-content; animation: mona-marquee 40s linear infinite; will-change: transform; }
@keyframes mona-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-25%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .mona-marquee > .tn-molecule { animation: none; } }
/* Feed grids: 3 cards per row, new rows wrap (Volunteers activities) */
.mona-grid3 > .tn-molecule { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; row-gap: 56px; }
.mona-grid3 > .tn-molecule > * { width: auto !important; min-width: 0; margin: 0 !important; }
@media screen and (max-width: 1199px) { .mona-grid3 > .tn-molecule { column-gap: 24px; row-gap: 48px; } }
@media screen and (max-width: 959px) { .mona-grid3 > .tn-molecule { grid-template-columns: minmax(0, 1fr); row-gap: 36px; } }
/* Homepage hero (EN 5080027903, KR 5385234803): dark gradients over the background photo (kept in CSS so the Zero editor cannot shift them) */
:is(#rec5080027903, #rec5385234803) .t396__carrier::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.45) 0, rgba(0,0,0,0) 260px), linear-gradient(90deg, rgba(2,57,31,0.88) 0%, rgba(2,57,31,0.42) 50%, rgba(2,57,31,0.05) 100%); }
@media screen and (max-width: 959px) { :is(#rec5080027903, #rec5385234803) .t396__carrier::after { background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.1) 35%, rgba(2,33,18,0.85) 100%); } }
/* Glass card (homepage hero CTA): background blur 24px as in Figma; the fill and border are set in the Zero Block */
@media screen and (min-width: 960px) { .mona-glass > .tn-molecule { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); } }
/* Text buttons: the whole box (padding included) is the link, not only the words. Class added by the project head script. */
.mona-fulllink { position: relative; cursor: pointer; }
.mona-fulllink a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
/* Careers: "No open positions" card shows only while the Open Positions feed has no published posts (data-fe-total="0"); the empty feed group is hidden then */
.t396__artboard:not(:has([data-fe-total="0"])) .mona-jobs-empty { display: none !important; }
.t396__artboard:has(.mona-jobs-empty) [data-fe-role="feed"][data-fe-total="0"] { display: none !important; }
/* Homepage How it works (EN 5080076003, KR 5385235203): green "MONA handles" cells fill the whole row height (no white gaps when "You do" wraps) */
@media screen and (min-width: 960px) { :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000015"] > .tn-molecule, :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000026"] > .tn-molecule, :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000037"] > .tn-molecule, :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000048"] > .tn-molecule, :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000064"] > .tn-molecule, :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000075"] > .tn-molecule, :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000086"] > .tn-molecule, :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000097"] > .tn-molecule { align-items: stretch !important; } :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000023"], :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000034"], :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000045"], :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000056"], :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000072"], :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000083"], :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000094"], :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000105"] { height: auto !important; align-self: stretch !important; } :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000023"] > .tn-molecule, :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000034"] > .tn-molecule, :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000045"] > .tn-molecule, :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000056"] > .tn-molecule, :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000072"] > .tn-molecule, :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000083"] > .tn-molecule, :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000094"] > .tn-molecule, :is(#rec5080076003, #rec5385235203) .tn-group[data-group-id="1792733300000000105"] > .tn-molecule { height: 100% !important; box-sizing: border-box; } }
/* Form pop-ups (T1093): the card scrolls inside the window when it is taller than the screen */
.t1093 .t-popup { overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Two languages, one global header/footer. The project head script sets html[data-mona-lang] from the URL (root = ko, /en = en).
   Not html[lang]: browsers and extensions may rewrite it (seen: reset to "ru").
   KR blocks show ONLY when data-mona-lang is "ko"; otherwise (en, editor/preview, pages without the new head script) the EN blocks show. Both sets are never visible at once. */
html:not([data-mona-lang="ko"]) #rec5385223603, html:not([data-mona-lang="ko"]) #rec5385224403, html:not([data-mona-lang="ko"]) #rec5385225503 { display: none !important; }
html[data-mona-lang="ko"] #rec5080375203, html[data-mona-lang="ko"] #rec5080375303, html[data-mona-lang="ko"] #rec5080407003 { display: none !important; }
/* Safety: a KR page without the KR blocks keeps the EN header/footer instead of showing none */
html[data-mona-lang="ko"] body:not(:has(#rec5385223603)) #rec5080375203, html[data-mona-lang="ko"] body:not(:has(#rec5385224403)) #rec5080375303, html[data-mona-lang="ko"] body:not(:has(#rec5385225503)) #rec5080407003 { display: block !important; }
/* 404 page (one page for both languages, shown at the missing URL): KR block 5386039803 for ko URLs, EN block 5386039903 otherwise */
html:not([data-mona-lang="ko"]) #rec5386039803 { display: none !important; }
html[data-mona-lang="ko"] #rec5386039903 { display: none !important; }
/* Korean font: Latin stays Manrope, Hangul falls back to Pretendard (loaded in the project head) */
html[data-mona-lang="ko"] .t396 .tn-atom, html[data-mona-lang="ko"] .t396 .tn-atom *, html[data-mona-lang="ko"] .t-input, html[data-mona-lang="ko"] .t-input-title, html[data-mona-lang="ko"] .t-submit, html[data-mona-lang="ko"] .t-checkbox__labeltext, html[data-mona-lang="ko"] .t-select, html[data-mona-lang="ko"] .t-form__errorbox-text, html[data-mona-lang="ko"] .t-input-error, html[data-mona-lang="ko"] .t-form__successbox, html[data-mona-lang="ko"] .t-text, html[data-mona-lang="ko"] .t-name, html[data-mona-lang="ko"] .t-title, html[data-mona-lang="ko"] .t-descr { font-family: 'Manrope', 'Pretendard Variable', 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important; }
/* Header language switch (EN ⌄ / KR ⌄ in the utility bar): the Language group is a button; click opens a dropdown (built by the project head script, appended to  because the Zero artboard clips overflow).
   border-box: the padding stays inside the group width, so the button's right edge lines up with the yellow CTA below. */
.mona-langbtn { cursor: pointer; border-radius: 4px; -webkit-tap-highlight-color: transparent; }
.mona-langbtn > .tn-molecule { box-sizing: border-box !important; padding: 4px 8px 4px 10px; border: 1px solid rgba(255,255,255,0.28) !important; border-radius: 4px; transition: background-color .2s ease, border-color .2s ease; }
.mona-langbtn:hover > .tn-molecule, .mona-langbtn.is-open > .tn-molecule { background-color: rgba(255,255,255,0.14) !important; border-color: rgba(255,255,255,0.6) !important; }
.mona-langbtn:hover .tn-atom, .mona-langbtn.is-open .tn-atom { color: #ffffff !important; }
.mona-langbtn:focus-visible { outline: 2px solid #fcce21; outline-offset: 2px; }
.mona-langbtn .tn-elem[data-elem-type="vector"] { transition: transform .2s ease; }
.mona-langbtn.is-open .tn-elem[data-elem-type="vector"] { transform: rotate(180deg); }
/* sticky (white) header: dark version */
.mona-langbtn--light > .tn-molecule { border-color: rgba(17,17,17,0.2) !important; }
.mona-langbtn--light:hover > .tn-molecule, .mona-langbtn--light.is-open > .tn-molecule { background-color: rgba(2,57,31,0.07) !important; border-color: rgba(2,57,31,0.55) !important; }
.mona-langbtn--light:hover .tn-atom, .mona-langbtn--light.is-open .tn-atom { color: #02391f !important; }
.mona-langbtn--light:focus-visible { outline-color: #02391f; }
.mona-langmenu { position: fixed; z-index: 100000; min-width: 176px; padding: 6px; box-sizing: border-box; background: #ffffff; border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; font-family: 'Manrope', 'Pretendard Variable', 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
.mona-langmenu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .15s ease, transform .15s ease, visibility 0s; }
.mona-langmenu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px; font-size: 14px; line-height: 20px; font-weight: 500; color: #111111; text-decoration: none; transition: background-color .15s ease; }
.mona-langmenu a:hover, .mona-langmenu a:focus-visible { background-color: #eef3ef; outline: none; }
.mona-langmenu__code { width: 22px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: rgba(17,17,17,0.45); }
.mona-langmenu__name { flex: 1; }
.mona-langmenu__check { width: 16px; height: 16px; visibility: hidden; }
.mona-langmenu a[aria-current] { color: #02391f; font-weight: 700; }
.mona-langmenu a[aria-current] .mona-langmenu__code { color: #02391f; }
.mona-langmenu a[aria-current] .mona-langmenu__check { visibility: visible; }