/* MOBILE + LITE <= 1023px (mobile <= 767px, lite 768-1023px)
   Loaded with media="(max-width:1023.98px)". Phones and tablets. Sub-breakpoints (<=767/480, 640+) are nested @media.
*/

.mobile-menu-button{display:inline-flex;margin-left:auto}
#site-header img { object-fit:contain; }
#site-header .uppercase{font-size:18px}
#site-header .sm\:inline-flex{display:none}
#site-navigation { position:absolute; left:0; right:0; padding:12px 20px 24px; background:#fafaf7; border-bottom:1px solid #e7e8e3; flex-direction:column; gap:0; align-items:stretch; }
#site-navigation a{padding:15px 0}
#site-header.is-scrolled #site-navigation{background:#151d19;border-color:#ffffff20}
#products .flex.justify-between{gap:12px;align-items:start}
#products .flex.justify-between>.font-mono{text-align:right;max-width:58%}
.concept-label{font-size:9px}
.font-display-hero{overflow-wrap:anywhere}
.hero-network{opacity:1}
.hero-network:after{background:linear-gradient(180deg,rgb(250 250 247 / 30%),rgb(250 250 247 / 18%) 60%,rgb(250 250 247 / 8%))}
.network-fallback{width:90vw;right:-30%;top:54%}
.brand-lockup{gap:0}
.legal-name{display:none}
#site-header img{max-width:none}
#site-header>div { gap:12px; }
.mobile-menu-button { padding:0; line-height:1; }
.mobile-only-break{display:block}
.services-grid,.solutions-grid{grid-template-columns:1fr;gap:16px}
.service-card{min-height:250px;padding:24px;border-radius:20px}
.service-icon{top:24px;right:24px;width:112px;height:108px}
.service-copy{max-width:94%;padding-top:42px}
.solution-card{padding:22px;border-radius:20px}
.solution-card-content{gap:20px}
.solution-metrics{gap:8px}
.solution-metrics span{font-size:.68rem}
.momo-render { min-height:250px; }
.product-copy{max-width:58ch}
@media (max-width:768px) {
  .product-showcase { border-radius:22px; }
  .product-name { margin-top:16px; }
  .product-lead{font-size:1.03rem}
  .momo-render { min-height:230px; }
  .product-module-grid small{font-size:.72rem}
  .product-cta{min-height:54px;font-size:.84rem}
}
.about-us-page .product-cta { right: 8px; bottom: 8px; }
#site-navigation { display: none; }
#site-navigation.is-open { display: flex; }
.company-news { align-items: flex-start; flex-direction: column; gap: 5px; max-width: 100%; }
.about-page-status { flex-wrap: wrap; }
.about-page-status .company-news { order: 3; border-top: 1px solid #e7e8e3; }
/* Mobile mode owns its scale, independently of the compact desktop mosaic. */
#site-header>div { height: 64px; padding-inline: 20px; }
.mobile-menu-button { width: 44px; height: 44px; min-width: 44px; font-size: 22px; }
#site-navigation { top: 64px; max-height: calc(100dvh - 64px); overflow-y: auto; box-shadow: 0 12px 32px rgb(23 25 22 / 4%); }
#site-navigation a { min-height: 48px; display: flex; align-items: center; }
.hero-section { min-height: min(880px, 100svh); padding: calc(64px + 20px) 20px 64px; justify-content: center; } /* header (64px) + side margin */
.hero-section h1 { font-size: clamp(2.75rem, 6.5vw, 4.25rem); line-height: 1.09; letter-spacing: -.03em; overflow-wrap: normal; }
.hero-section h1 span { white-space: normal; }
.hero-section .inline-flex.rounded-full { max-width: 100%; align-items: center; }
.hero-section .inline-flex.rounded-full>span:last-child { font-size: 9px; line-height: 1.5; letter-spacing: .06em; }
.hero-section .inline-flex.rounded-full>span:first-child { flex-shrink: 0; }
.about-us-page>#services, .about-us-page>#solutions { padding: 20px 20px 56px; }
.about-us-page>#services .section-heading, .about-us-page>#solutions .section-heading { margin-bottom: 24px; }
.about-us-page>#services .section-heading h2, .about-us-page>#solutions .section-heading h2 { font-size: 2rem; line-height: 1.125; }
.about-us-page .services-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; }
.about-us-page .service-card { width: 100%; max-width: none; min-height: 224px; padding: 24px; border-radius: 20px; }
.about-us-page .service-card .service-icon { top: 24px; width: 88px; height: 88px; }
.about-us-page .service-copy { max-width: 100%; padding-top: 48px; }
.about-us-page .service-card h3 { font-size: 1.375rem; line-height: 1.3; margin-bottom: 12px; }
.about-us-page .service-card p { font-size: 1rem; line-height: 1.625; }
.product-showcase-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
#solutions .product-showcase-grid { margin-top: 24px; } /* beat the HTML mt-12 (48px): same space above card 1 as between the cards */
.product-showcase { padding: 24px; }
.product-showcase-body { gap: 24px; }
.product-showcase-top { grid-template-columns: 1fr; gap: 24px; }
.product-name { font-size: 3rem; }
.product-description { font-size: 1rem; line-height: 1.625; }
.product-visual { min-height: 0; aspect-ratio: 4 / 3; }
.about-us-page .product-cta { width: 100%; min-height: 48px; padding: 12px 16px; font-size: .875rem; line-height: 1.5; }
.momo-cta-group { flex-direction: column; align-items: stretch; }
.product-module-grid { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 20px; }
.product-module-grid li { gap: 10px; padding-inline: 10px; }
.product-module-grid li:nth-child(2) { border-right: 0; }
.product-module-grid li:nth-child(3) { padding-left: 0; }
.product-module-grid .module-copy strong { font-size: .875rem; }
.product-module-grid .module-copy small { font-size: .75rem; line-height: 1.5; }
.momo-technology-grid .momo-core-copy strong { font-size: .8125rem; line-height: 1.4; overflow-wrap: anywhere; }
.momo-technology-grid .momo-core-copy>span, .momo-field-features span { font-size: .75rem; line-height: 1.5; }
.about-page-status { width: auto; margin: 0 20px 40px; padding: 20px; flex-direction: row; align-items: center; gap: 16px; }
.status-clock { gap: 8px; }
.status-clock-time { white-space: nowrap; }
.social-link { width: 44px; height: 44px; }
.about-page-status .company-news { min-height: 64px; }
.company-news-title { font-size: .875rem; line-height: 1.625; }
#contact.contact-page { padding-top: 20px; } /* = px-margin, the side margin */
#contact .contact-location-intro h2 { display: none; } /* "주식회사 앤솔루션" is not shown on mobile */
/* Both location panels (나주 본사 and 기업부설연구소) share one style: see the rules below. */
#contact .contact-hq-scene>.rounded-2xl h3, #contact .contact-hq-scene>.rounded-2xl p, #contact .contact-hq-scene>.rounded-2xl a { line-height: 1.25; }
/* Copyright line: bold, with one text-height (1em) of space above it. */
#contact .footer-copyright { margin-top: 1em; font-weight: 700; }
/* No space above contact-hq-art: the grid row gap moves to the research block below it. */
#contact .contact-location-layout { row-gap: 0; }
/* 기업부설연구소: no phone / email row above it; the space above is two lines of 18px (1.5 x the row's 12px font) = 36px. */
#contact .contact-research-scene { margin-top: 36px; }
#contact .contact-research-scene .contact-channel-row { display: none; }
/* Panels: padding halved (24px -> 12px; 32px -> 16px from 768px). */
#contact .contact-hq-scene>.rounded-2xl { padding: 12px; }
/* KOREA / KST rail sits at the bottom of the About us (hero) section; the hero already has the side padding. */
@media (min-width:768px) {
  .hero-section { padding-top: calc(64px + 64px); } /* header (64px) + side margin (md:px-margin-desktop) */
}
.hero-section>.about-page-status { margin: 24px 0 0; width: 100%; }
/* KOREA / KST rail: clock, news and social icons each on their own line; no circle borders; X hidden. */
.hero-section>.about-page-status { --news-h: 21px; row-gap: 0; padding: 15px; } /* padding 15px on all four sides (10px x 1.5) */
.hero-section>.about-page-status .company-news { flex: 1 1 100%; order: 1; min-width: 0; min-height: 0; padding: 0; border: 0; margin-block: calc(var(--news-h) / 2); } /* space above and below = half the news panel height */
.hero-section>.about-page-status .company-news-slot,
.hero-section>.about-page-status .company-news-slot.is-current,
.hero-section>.about-page-status .company-news-item p { min-height: 0; }
/* News: one line; text longer than the width is cut with "...". (block, not flex, so text-overflow can apply to the text.) */
.hero-section>.about-page-status .company-news-item p { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-section>.about-page-status .news-badge { margin-right: 8px; font-size: .68rem; } /* badge and title font sizes swapped: badge .76rem -> .68rem ... */
.hero-section>.about-page-status .company-news-item p { font-size: .76rem; height: var(--news-h); line-height: var(--news-h); } /* fixed one-line height, so the margins above always equal the panel height */ /* ... title .68rem -> .76rem */
.hero-section>.about-page-status .company-news-item { border: 0; } /* the global article{border} drew a box around the news */
.hero-section>.about-page-status .social-links { flex: 1 1 100%; order: 2; justify-content: flex-end; } /* bottom right of the panel */
.hero-section>.about-page-status .social-link { width: 25.5px; height: 25.5px; padding: 0; border: 0; border-radius: 0; background: transparent; } /* icon 17px -> 25.5px (1.5x), no padding */
.hero-section>.about-page-status .social-link svg { width: 25.5px; height: 25.5px; }
.hero-section>.about-page-status .social-link:nth-child(3) { display: none; }
/* Label keeps only "CONTACT / LOCATIONS"; the slogan paragraph is removed. */
#contact .contact-label-extra { display: none; }
#contact .contact-introduction-line { display: none; }
/* Panel text uses the removed slogan's size (12px); panel icons are 16px. */
#contact .contact-hq-scene>.rounded-2xl h3,
#contact .contact-hq-scene>.rounded-2xl p,
#contact .contact-hq-scene>.rounded-2xl a { font-size: 12px; }
#contact .contact-hq-scene>.rounded-2xl .material-symbols-outlined { font-size: 16px; line-height: 16px; width: 16px; height: 16px; flex: 0 0 16px; }
/* Google map under each location panel. */
#contact .contact-map { position: relative; width: 100%; height: 250px; margin: 18px auto 0; overflow: hidden; border-radius: 20px; background: #242424; isolation: isolate; }
#contact .contact-map iframe { display: block; border: 0; width: 100%; height: 100%; filter: grayscale(1) invert(.9) contrast(.85); opacity: .85; }
/* The label box (ANSOLUTIONS / HQ · ...) is removed; only the yellow point stays, at the centre of the map (still a link to the big map).
   The anchor is a zero-size box so it never blocks dragging the embedded map. */
#contact .contact-map-location { position: absolute; left: 50%; top: 50%; width: 0; height: 0; padding: 0; border: 0; background: none; text-decoration: none; }
#contact .contact-map-location>span { display: none; }
#contact .contact-map-pulse { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); width: 12px; height: 12px; background: #ffcd00; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 7px #ffcd0035; }
#contact .contact-map-pulse::before, #contact .contact-map-pulse::after { content: ""; position: absolute; inset: -2px; border: 2px solid #ffcd00; border-radius: 50%; animation: contact-map-ping 2.4s ease-out infinite; }
#contact .contact-map-pulse::after { animation-delay: 1.2s; }
@keyframes contact-map-ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4); opacity: 0; } }
@media (min-width: 768px) { #contact .contact-map { height: 260px; } }
@media (prefers-reduced-motion: reduce) { #contact .contact-map-pulse::before, #contact .contact-map-pulse::after { animation: none; } }
/* The HQ phone / email row (moved out of the panel by app.js, marked .contact-row-moved): centred, one row, under the CONTACT label. */
#contact .contact-row-moved { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; }
#contact .contact-row-moved .flex { align-items: center; }
#contact .contact-row-moved .material-symbols-outlined { font-size: 16px; line-height: 16px; width: 16px; height: 16px; flex: 0 0 16px; }
#contact .contact-row-moved a { font-size: 12px; line-height: 1.25; font-weight: 700; }
/* Each map overlaps the bottom of its panel; the panel stays on top. */
#contact .contact-hq-scene>.rounded-2xl { z-index: 2; }
#contact .contact-hq-scene .contact-map { margin-top: -30px; z-index: 0; }
/* Panels: gaps between title / address halved (20px -> 10px). The line under the address is the postal code ("우편번호 : ..."). */
#contact .contact-hq-scene>.rounded-2xl>:not([hidden])~:not([hidden]) { margin-top: 10px; }
/* Phone and email links in both panels are bold. */
#contact .contact-channel-row a { font-weight: 700; }
.contact-page>div { padding-inline: 20px; width: 100%; }
.contact-page>div>div { grid-template-columns: 1fr; gap: 32px; }
@media (min-width:640px) {
  .about-us-page .services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-section, .about-us-page>#services, .about-us-page>#solutions, .contact-page>div { padding-inline: 32px; }
  .about-us-page>#services, .about-us-page>#solutions { padding-top: 32px; }
  #contact.contact-page { padding-top: 32px; } /* = side margin at this width */
  .about-page-status { margin-inline: 32px; }
}
@media (max-width:480px) {
  .product-showcase { padding: 20px; }
  .product-name-secondary { display: block; margin-top: 8px; }
  .momo-technology-grid { grid-template-columns: 1fr; }
  .about-page-status .status-clock { flex-basis: 100%; }
  .product-visual figcaption { font-size: .5rem; letter-spacing: .03em; }
}
.about-us-page>#services .services-intro,
.about-us-page>#solutions .section-heading>p { margin-top: 8px; font-size: .875rem; font-weight: 700; line-height: 1.6; }
.about-us-page .service-card::after { background: linear-gradient(90deg, rgb(255 255 255 / 94%), rgb(255 255 255 / 58%)); }
.about-page-status .company-news { grid-template-columns: 1fr; gap: 8px; }
.about-page-status .company-news-label { display: block; }
.about-us-page .service-card .service-icon { left: 14px; right: auto; }
/* Momo core technology: four compact, readable cards in a single desktop row. */
@media (min-width:769px) {
  .about-us-page .momo-technology-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .about-us-page .momo-technology-grid li { min-width: 0; padding-inline: 9px; }
  .about-us-page .momo-technology-grid .momo-core-icon { width: 30px; height: 30px; }
  .about-us-page .momo-technology-grid .momo-core-icon svg { width: 20px; height: 20px; }
  .about-us-page .momo-technology-grid .momo-core-copy { gap: 3px; }
  .about-us-page .momo-technology-grid .momo-core-copy strong { font-size: clamp(.56rem, .58vw, .7rem); }
  .about-us-page .momo-technology-grid .momo-core-copy>span { font-size: clamp(.5rem, .52vw, .62rem); line-height: 1.3; }
}
.about-page-status .company-news { display: block; padding: 10px 0 0; }
.company-news-slot { min-height: 28px; }
.company-news-slot.is-current { min-height: 40px; }
.company-news-item p { min-height: 40px; flex-wrap: wrap; }
.brand-logo{width:192px;height:auto;max-height:32px}
#site-header .brand-lockup{flex:1;min-width:0}
#site-header .brand-logo{width:auto;height:30px;max-width:100%;max-height:30px;object-fit:contain;object-position:left center}
.mobile-menu-button{border:0;box-shadow:none;background:transparent}
#services .service-interior{inset:24px;gap:9px}
#services .service-interior .service-copy h3{font-size:1.05rem}
#services .service-interior .service-copy p{font-size:.82rem;line-height:1.4}
#services .service-tech-tags{font-size:10px}
@media (max-width:480px) {
  #services .service-tech-tags{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767px) {
  #contact .contact-location-layout{grid-template-columns:1fr}
}
@media (max-width:767px) {
  #contact .contact-introduction-line{white-space:normal}
}
@media (max-width:767px) {
  #contact .contact-hq-scene>.rounded-2xl{width:85%;margin-top:-32px}
}
@media (min-width:768px) {
  #contact .contact-hq-scene>.rounded-2xl{padding:16px}
}
/* Explicit values that previously won only through cascade order. */
.product-visual--momo { aspect-ratio: 1.6; }
/* Momo panel: the product render becomes the panel background (full panel width, anchored to the top,
   semi-transparent, fading out downward). The <img class="momo-render"> and its frame are hidden. */
#solution-momo { position: relative; isolation: isolate; overflow: hidden; }
#solution-momo::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; aspect-ratio: 1586 / 992;
  background: url("assets/products/momo-panel-roadside-blur.png") top center / 100% auto no-repeat;
  opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
#solution-momo .product-image-stack { display: none; }
/* Hi5 panel: the supplied yellow wave artwork is the animated panel background (same as normal size): two layers drifting in opposite directions. */
#solution-hi5 { position: relative; isolation: isolate; overflow: hidden; }
#solution-hi5::before, #solution-hi5::after {
  content: ""; position: absolute; z-index: -1; inset: -18%;
  background: url("assets/products/hi5-wave-background.webp") center / cover no-repeat;
  pointer-events: none; will-change: transform;
}
#solution-hi5::before { animation: hi5-wave-a 9s ease-in-out infinite alternate; }
#solution-hi5::after { opacity: .55; animation: hi5-wave-b 13s ease-in-out infinite alternate; }
@keyframes hi5-wave-a {
  0% { transform: translate3d(-9%, 3%, 0) scale(1.05) rotate(-1.5deg); }
  100% { transform: translate3d(9%, -3%, 0) scale(1.18) rotate(1.5deg); }
}
@keyframes hi5-wave-b {
  0% { transform: scaleX(-1) translate3d(-8%, -4%, 0) scale(1.12) rotate(1deg); }
  100% { transform: scaleX(-1) translate3d(8%, 4%, 0) scale(1.02) rotate(-1deg); }
}
/* Hi5 uses the signature yellow: the category chip is a pale yellow with dark-gold text (readable on the white panel);
   the button is #ffcd00 with the dark ink #171916, the same pairing as Momo's yellow button. */
#solution-hi5 .product-category--blue { background: rgb(255 205 0 / 24%); color: #735c00; }
#solution-hi5 .product-cta--blue { background: #ffcd00; color: #171916; }
#solution-hi5 .product-cta--blue:focus-visible { outline-color: #735c00; }
/* Space above the blue button halved: 32px -> 16px (row gap 24px -> 8px, plus the button's own 8px margin). */
#solution-hi5 .product-showcase-top { row-gap: 8px; }
/* Core technology: each icon is a centred, faded background behind its label and caption; the text is centred too. */
#solution-momo .momo-technology-grid li { position: relative; isolation: isolate; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 84px; text-align: center; }
#solution-momo .momo-technology-grid .momo-core-icon { position: absolute; z-index: -1; top: 50%; left: 50%; width: 72px; height: 72px; flex: none; transform: translate(-50%, -50%); opacity: .2; }
#solution-momo .momo-technology-grid .momo-core-icon svg { width: 46px; height: 46px; }
#solution-momo .momo-technology-grid .momo-core-copy { width: 100%; align-items: center; }
/* Momo feature chips are centred in the panel. */
#solution-momo .momo-field-features { justify-content: center; }
/* Momo feature chips: two per row on phones. The font scales with the screen (9px at 375px, 12px from 500px up). */
@media (max-width: 767px) {
  #solution-momo .momo-field-features { gap: 6px; }
  #solution-momo .momo-field-features span { padding: 6px 7px; font-size: clamp(8.5px, 2.4vw, 12px); }
}
#services .service-card .service-tech-tags { display: none; }
/* Content-driven mobile panels: no empty space reserved for hidden tags. */
.about-us-page #services .services-grid { grid-auto-rows: 1fr; gap: 10px; }
.about-us-page #services .service-card { min-height: 0; height: auto; padding: 16px; }
#services .service-interior { position: relative; inset: auto; gap: 0; padding-left: 44px; flex: 1; justify-content: center; }
#services .service-line-icon { position: absolute; top: 50%; left: auto; right: -8px; transform: translateY(-50%); width: 96px; height: 96px; border-radius: 0; background: transparent; color: #735c00; opacity: .1; pointer-events: none; }
#services .service-line-icon svg { width: 100%; height: 100%; }
#services .service-interior .service-copy { width: 100%; position: relative; z-index: 1; }
#services .service-interior .service-copy h3 { padding-right: 0; }
#services .service-interior .service-copy p { margin: 8px 0 0; min-height: 0; }
.about-us-page #services .service-card .service-number { position: absolute; top: 12px; right: auto; left: 16px; }
.about-us-page #services .service-card .service-rule { display: block; position: absolute; top: 36px; right: auto; left: 16px; margin: 0; width: 24px; height: 3px; }
/* Hi5 mobile presentation. */
#solution-hi5 .product-name { font-size: clamp(1.5rem, 6.5vw, 3rem); white-space: nowrap; }
#solution-hi5 .product-name-secondary { display: inline; margin-top: 0; }
#solution-hi5 { background: rgb(255 255 255 / 80%); }
#solution-hi5 .hi5-desktop-screen { display: none; }
#solution-hi5 .product-visual--hi5 { display: none; }
#solution-hi5 .product-visual--hi5::after { display: none; }
#solution-hi5 .hi5-mobile-screen { display: none; }
#solution-hi5 .product-module-grid .module-copy small { font-size: calc(.75rem + 1px); font-weight: 700; }
#solution-hi5 { padding-top: 12px; }
@media (max-width:480px) {
  #solution-hi5 { padding-top: 10px; }
}
#solution-momo .momo-technology h4 { display: none; }
#solution-momo .momo-technology-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }

/* Hi5 module icons (same as normal size): solid coloured rounded squares with a white outline glyph; the old inline SVGs are hidden and the glyph is a mask on ::after. Crew blue, Work green, Pass purple, Link orange. */
#solution-hi5 .product-module-grid .module-icon { position: relative; border-radius: 20%; color: #fff; }
#solution-hi5 .product-module-grid .module-icon svg { display: none; }
#solution-hi5 .product-module-grid .module-icon::after {
  content: ""; position: absolute; inset: 25%; background: #fff;
  -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat;
}
#solution-hi5 .module-icon--crew { background: #2f7df6; --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 4a5.5 5.5 0 1 0 0 11 5.4 5.4 0 0 0 1.7-.3'/%3E%3Cpath d='M12.6 9.4a5.3 5.3 0 0 1 6.4 7.7l.9 3-3.3-1.2a5.3 5.3 0 0 1-5.4-1.2'/%3E%3C/svg%3E"); }
#solution-hi5 .module-icon--work { background: #17b67f; --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l1.6 1.6L8 4.5M3.5 12.5l1.6 1.6L8 11M3.5 19l1.6 1.6L8 17.5M11.5 6.5h9M11.5 13h9M11.5 19.5h9'/%3E%3C/svg%3E"); }
#solution-hi5 .module-icon--pass { background: #8b5cf6; --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='6.5' width='16' height='14.5' rx='3'/%3E%3Cpath d='M9.5 6.5V5a2.5 2.5 0 0 1 5 0v1.5M7.8 12.4h3.2v4.2H7.8zM13.8 12.8h3M13.8 16.2h3'/%3E%3C/svg%3E"); }
#solution-hi5 .module-icon--link { background: #f97316; --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.2 13.8a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M13.8 10.2a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }


/* Hi5 module captions (same words and colours as normal size): the Korean captions are replaced by COMMUNICATION / COLLABORATION / CERTIFICATION / CONNECTION. */
#solution-hi5 .product-module-grid .module-copy small { font-size: 0; line-height: 0; }
#solution-hi5 .product-module-grid .module-copy small::after {
  display: block; font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .02em; line-height: 1.3; white-space: nowrap; margin-top: 2px;
}
#solution-hi5 li:nth-child(1) .module-copy small::after { content: "COMMUNICATION"; color: #2f7df6; }
#solution-hi5 li:nth-child(2) .module-copy small::after { content: "COLLABORATION"; color: #17b67f; }
#solution-hi5 li:nth-child(3) .module-copy small::after { content: "CERTIFICATION"; color: #8b5cf6; }
#solution-hi5 li:nth-child(4) .module-copy small::after { content: "CONNECTION"; color: #f97316; }

/* Worker-rights notice on mobile and lite: a card pinned to the bottom of the screen (modeless; app.js opens it after a second while the hero is in view). The normal-size version lives in normal.css. */
#worker-rights-notice {
  position: fixed; z-index: 90; left: 12px; right: 12px; bottom: 12px; width: auto; max-height: calc(100svh - 150px);
  overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgb(223 225 227 / 80%); border-radius: 18px;
  background: rgb(255 255 255 / 97%); backdrop-filter: blur(14px); color: #202326;
  box-shadow: 0 18px 60px rgb(15 23 42 / 28%), 0 2px 8px rgb(15 23 42 / 12%);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(28px);
  transition: opacity .35s ease, transform .55s cubic-bezier(.16, 1, .3, 1), visibility .55s; scrollbar-width: thin;
}
#worker-rights-notice.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
@media (min-width: 768px) { #worker-rights-notice { left: auto; right: 24px; bottom: 24px; width: 440px; } }
@media (prefers-reduced-motion: reduce) { #worker-rights-notice { transition: opacity .15s; transform: none; } }
#worker-rights-notice .worker-notice-header { padding: 12px 16px; background: linear-gradient(180deg, rgb(80 89 99 / 94%) 0, rgb(32 43 55 / 94%) 22%, rgb(32 43 55 / 94%) 100%); color: #fff; }
#worker-rights-notice .worker-notice-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: #ffcd00; font-size: 13px; font-weight: 700; }
#worker-rights-notice svg { width: 18px; height: 20px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#worker-rights-notice h2 { margin: 0 0 8px; font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -.05em; }
#worker-rights-notice h2 em { color: #ffcd00; font-style: normal; }
#worker-rights-notice .worker-notice-header > p:last-child { margin: 0; color: #d8dfe6; font-size: 12px; }
#worker-rights-notice .worker-notice-body { padding: 12px 16px 10px; font-size: 13px; line-height: 1.5; }
#worker-rights-notice .worker-notice-body > p { margin: 0 0 10px; }
#worker-rights-notice h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; font-size: 14px; font-weight: 750; }
#worker-rights-notice section { margin: 10px 0; padding: 10px 12px; border-radius: 12px; }
#worker-rights-notice section p { margin: 6px 0 0; }
#worker-rights-notice .worker-notice-examples { background: rgb(246 246 246 / 85%); }
#worker-rights-notice .worker-notice-examples p { padding-left: 26px; }
#worker-rights-notice .worker-notice-warning { background: rgb(255 250 233 / 90%); border: 1px solid #e7ab13; }
#worker-rights-notice .worker-notice-warning svg { color: #ce9800; }
#worker-rights-notice .worker-notice-warning p { padding-left: 27px; }
#worker-rights-notice .worker-alert-icon { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; flex: 0 0 17px; border: 1.5px solid #ff3333; border-radius: 50%; color: #ff3333; font-size: 12px; line-height: 1; }
#worker-rights-notice .worker-notice-muted { color: #74736e; font-size: 12px; }
#worker-rights-notice .worker-notice-caution { padding: 0 2px; text-align: center; font-size: 12.5px; }
#worker-rights-notice .worker-notice-footer { position: sticky; bottom: 0; margin: 10px -16px -10px; padding: 8px 16px; border-top: 1px solid #ececec; background: #fff; color: #909090; font-size: 11.5px; } /* stays visible while the card scrolls, so "닫기" is always reachable */
#worker-rights-notice .worker-notice-footer p { margin: 0 0 6px; }
#worker-rights-notice .worker-notice-footer > div { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
#worker-rights-notice button { padding: 6px 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }