/* WIDE >= 2001px
   Loaded with media="(min-width:2001px)". Ultra-wide monitors; one-viewport About mosaic.
*/

.hero-section h1 span{white-space:nowrap}
.about-us-page { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,2.4fr) minmax(680px,1fr); }
.about-us-page>.hero-section{
  grid-area:hero;position:static;isolation:auto;overflow:visible;
  width:auto;min-height:0;height:100%;padding:0;align-self:stretch;
}
.about-us-page>.hero-section>#hero-network{
  position:absolute;inset:0;left:0;right:0;width:100%;height:100%;z-index:0;
}
.about-us-page>#services{
  grid-area:services;position:relative;z-index:1;
  width:auto;max-width:none;margin:0;padding:0;align-self:stretch;
}
.about-us-page .services-grid { min-height:0; }
.about-us-page .service-icon { height:auto; }
.about-us-page .service-copy { max-width:94%; }
.about-us-page>#solutions{
  grid-area:solutions;position:relative;z-index:1;
  display:flex;flex-direction:column;width:auto;max-width:none;margin:0;padding:0;min-height:0;
}
.about-us-page>#solutions .section-heading{flex:none}
.about-us-page .product-showcase-grid { display:grid; grid-template-columns:minmax(0,1fr); min-height:0; }
.about-us-page .product-showcase { min-height:0; }
.about-us-page .momo-render { border-radius:14px; }
.about-us-page .momo-technology-grid li { padding-inline: 9px; }
.contact-page{display:flex;min-height:100svh;align-items:center}
@media (max-width:3199px) {
  .about-us-page{grid-template-columns:minmax(0,2.2fr) minmax(540px,1fr)}
}
/* Keep the complete About mosaic inside one viewport on wide monitors. */
.about-us-page { height:100svh; min-height:100svh; overflow:visible; padding:calc(64px + clamp(18px,2.1vh,42px)) clamp(28px,2.3vw,82px) clamp(18px,1.8vh,40px); }
.about-us-page .service-icon{top:clamp(16px,.95vw,28px);right:clamp(16px,.95vw,28px);width:clamp(76px,5.5vw,140px)}
.about-us-page .service-copy{padding-top:14px}
.about-us-page .service-copy h3 { margin-bottom:8px; }
.about-us-page>#solutions .section-heading>p{margin-top:6px;font-size:clamp(.68rem,.72vw,.88rem)}
.about-us-page .product-showcase-grid { gap:clamp(8px,.65vw,18px); margin-top:clamp(10px,.85vw,22px); }
.about-us-page .product-showcase{padding:clamp(10px,.8vw,22px);border-radius:clamp(16px,.9vw,22px)}
.about-us-page .product-showcase .concept-label{margin-bottom:clamp(7px,.45vw,12px);padding-bottom:7px;font-size:clamp(.52rem,.5vw,.64rem)}
.about-us-page .product-showcase-body{gap:clamp(7px,.55vw,14px)}
.about-us-page .product-showcase-top{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(8px,.6vw,16px)}
.about-us-page .product-category{padding:6px 8px;font-size:clamp(.55rem,.55vw,.68rem)}
.about-us-page .product-name{margin-top:9px;font-size:clamp(1.8rem,2.2vw,3rem)}
.about-us-page .product-subtitle{margin-top:5px;font-size:clamp(.68rem,.72vw,.88rem)}
.about-us-page .product-lead{margin-top:8px;font-size:clamp(.75rem,.8vw,.98rem);line-height:1.3}
.about-us-page .product-description{margin-top:6px;font-size:clamp(.62rem,.65vw,.78rem);line-height:1.4}
.about-us-page .product-visual { min-height:clamp(88px,9vh,160px); border-radius:12px; }
  .about-us-page .momo-render { border-radius:12px; }
.about-us-page .hi5-desktop-screen{width:118%}
.about-us-page .hi5-mobile-screen{width:24%;max-height:84%}
.about-us-page .product-visual figcaption{bottom:5px;left:7px;font-size:.46rem}
.about-us-page .momo-field-image{right:6px;bottom:18px;width:40%;height:clamp(34px,4.2vh,58px)}
.about-us-page .product-module-grid{padding-top:7px}
.about-us-page .product-module-grid li{gap:2px;padding-inline:5px}
.about-us-page .product-module-grid .material-symbols-outlined{width:25px;height:25px;font-size:15px}
.about-us-page .product-module-grid strong{font-size:clamp(.58rem,.6vw,.72rem)}
.about-us-page .product-module-grid small { font-size:clamp(.52rem,.52vw,.63rem); }
.about-us-page .momo-technology h4 { font-size:.55rem; }
.about-us-page .momo-technology-grid li { padding-inline: 9px; }
.about-us-page .momo-technology-grid strong,.about-us-page .momo-technology-grid span{font-size:clamp(.52rem,.52vw,.64rem);line-height:1.3}
.about-us-page .momo-field-features{gap:4px}
.about-us-page .momo-field-features span{padding:4px 6px;font-size:clamp(.5rem,.5vw,.6rem);line-height:1.25}
@media (max-height:1000px) {
  .about-us-page { padding-top:74px; }
  .about-us-page>#solutions .section-heading>p{display:none}
  .about-us-page .product-showcase-body{gap:6px}
  .about-us-page .product-showcase .concept-label{margin-bottom:5px;padding-bottom:5px}
  .about-us-page .product-description{font-size:.56rem;line-height:1.2}
  .about-us-page .product-visual { min-height:78px; }
  .about-us-page .momo-technology-grid li { padding-inline: 9px; }
}
@media (max-width:3199px) {
  .about-us-page .product-showcase-top{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .about-us-page .product-visual { min-height:clamp(88px,9vh,150px); }
}
@media (min-height:1001px) and (max-height:1200px) {
  .about-us-page { padding-top:74px; }
  .about-us-page .product-showcase{padding:10px}
  .about-us-page .product-showcase-body{gap:6px}
  .about-us-page .product-showcase .concept-label{margin-bottom:5px;padding-bottom:5px}
  .about-us-page .product-description{font-size:.56rem;line-height:1.2}
  .about-us-page .product-visual { min-height:76px; }
  .about-us-page .product-module-grid{padding-top:5px}
  .about-us-page .product-module-grid .material-symbols-outlined{width:22px;height:22px;font-size:13px}
  .about-us-page .product-module-grid small{font-size:.5rem}
  .about-us-page .momo-technology-grid li { padding-inline: 9px; }
  .about-us-page .momo-technology-grid strong,.about-us-page .momo-technology-grid span{font-size:.5rem}
  .about-us-page .momo-field-features span{padding:3px 4px;font-size:.48rem}
}
/* Final scale pass: keep the four service panels compact within the wide composition. */
.about-us-page .service-card {
  width: min(50%, 440px);
  height: min(76%, 210px);
  align-self: center;
}
/* Solutions polish: shared heading scale, left-aligned services, image-level CTAs. */
.about-us-page>#services .section-heading h2,
  .about-us-page>#solutions .section-heading h2 { font-size: clamp(1.25rem, 1.25vw, 2rem); }
.about-us-page .service-card { justify-self: start; }
/* Responsive modes: wide >2000px, norm 1024-2000px, lite 768-1023px, mobile <=767px. */
#site-navigation a[href="#services"],
  #site-navigation a[href="#solutions"] { display: none; }
.about-us-page .product-showcase-grid {
  grid-template-rows: max-content max-content;
  flex: 0 0 auto;
  align-content: start;
}
.about-us-page .product-showcase {
  height: max-content;
  align-self: start;
}
.about-us-page .product-showcase-body { flex: 0 0 auto; }
/* About page finishing details: wider left-aligned services and a bottom info rail. */
.about-us-page {
  --services-gap: clamp(10px, .65vw, 16px);
  grid-template-rows: minmax(0, .95fr) minmax(0, .9fr) auto;
  grid-template-areas: "hero solutions" "services solutions" "status status";
  gap: var(--services-gap);
  padding-bottom: var(--services-gap);
}
.about-us-page>#services { display: flex; min-height: 0; flex-direction: column; }
.about-us-page>#services .section-heading { margin-bottom: var(--services-gap); }
.about-us-page>#services .services-grid {
  width: min(100%, 1040px);
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--services-gap);
}
.about-us-page>#services .service-card {
  width: 100%;
  max-width: 510px;
  height: 100%;
  align-self: stretch;
  justify-self: start;
}
.about-page-status { grid-area: status; }
.about-us-page .product-showcase-top { align-items: start; }
.product-module-grid .module-icon { width: 34px; height: 34px; flex-basis: 34px; }
.product-module-grid .module-copy strong { font-size: clamp(.58rem, .6vw, .72rem); }
.product-module-grid .module-copy small { font-size: clamp(.5rem, .5vw, .62rem); }
.momo-core-icon { width: 32px; height: 32px; flex-basis: 32px; }
.momo-core-icon svg { width: 21px; height: 21px; }
.momo-technology-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.momo-technology-grid .momo-core-copy strong { font-size: clamp(.52rem, .54vw, .66rem); }
.momo-technology-grid .momo-core-copy>span { font-size: clamp(.48rem, .48vw, .58rem); }
.product-module-grid li { gap: clamp(10px, .72vw, 14px); padding-inline: clamp(7px, .55vw, 11px); }
.momo-technology-grid li { gap: clamp(10px, .72vw, 14px); padding: 8px 10px; }
.about-page-status { gap: clamp(12px, 1vw, 22px); }
.company-news-items { gap: clamp(10px, .8vw, 18px); }
.company-news-item { align-items: center; }
.company-news-item:first-child { border-left: 0; }
.about-us-page .services-grid { height: calc(100% - 88px); }
.company-news-items { grid-template-columns: minmax(0,1fr); }
.company-news-item { min-height: 0; padding: 0; border: 0; }
/* Momo core technology: four compact, readable cards in a single desktop row. */
.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 { padding-inline: 8px; }
.company-news-slots { grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(12px, 1.1vw, 28px); }
.company-news-slot { min-height: 36px; padding-inline: 10px; border-left: 1px solid rgb(26 28 25 / 10%); }
  .company-news-slot.is-current { padding-inline: 10px; border-left: 1px solid rgb(26 28 25 / 10%); }
.company-news-slot:first-child { border-left: 0; }
.company-news-item p { font-size: clamp(.64rem, .62vw, .8rem); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Wide Contacts section starts immediately beneath the fixed 64px header. */
#contact { min-height: calc(100svh - 64px); padding: 0 0 clamp(12px, 1.5vh, 24px); display: flex; flex-direction: column; align-items: stretch; }
#contact>div { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; margin: 0 auto; }
#contact > div > div { width: 100%; align-self: center; }
#contact .footer-copyright { flex: 0 0 auto; margin: auto 0 0; padding-top: 12px; }
.company-news-slot,
  .company-news-slot.is-current { display: flex; align-items: center; }
.company-news-item p { min-height: 36px; }
/* Align wide Contacts directly to the fixed header bottom when using the menu anchor. */
html { scroll-padding-top: 64px; }
#contact { scroll-margin-top: 0; }
#contact .contact-location-layout{row-gap:32px}


/* Hi5 module icons (same as normal and mobile): 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 under the icons 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: clamp(.5rem, .5vw, .62rem); font-weight: 700;
  letter-spacing: .04em; 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; }

/* Hi5 module one-line summary (same wording as normal size) under each icon + name: the detail block is shown for its tagline only; its kicker and title would repeat the caption above. */
.about-us-page #solution-hi5 .product-module-grid li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(8px, .6vw, 12px); row-gap: clamp(4px, .3vw, 7px); }
.about-us-page #solution-hi5 .product-module-grid .module-detail { display: contents; }
.about-us-page #solution-hi5 .module-head { display: none; }
.about-us-page #solution-hi5 .module-tagline { grid-column: 1 / -1; color: #171916; font-size: clamp(.52rem, .52vw, .66rem); font-weight: 600; line-height: 1.35; }


/* ===== Wide Contacts: same composition as normal size (rules copied from normal.css; the one-viewport section scaffolding above stays). ===== */
/* Contact label marker matches the About label circle. */
.contact-label-dot{display:inline-block;width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#000;margin-right:10px}

/* Headquarters panels share one row beneath the contact introduction. */
#contact .contact-location-intro{grid-column:1 / -1}
#contact .contact-channel-row{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap}
#contact .contact-channel-row>div{min-width:0}
@media(max-width:767px){#contact .contact-location-layout{grid-template-columns:1fr}}

/* Expand both contact panels equally, within the available viewport. */
#contact>div{max-width:1856px;width:100%;margin-inline:auto}


/* Full-width regional company introduction. */
#contact .contact-region-emphasis{font-weight:800;color:#171916}
#contact .contact-introduction-line{width:100%;max-width:none;white-space:nowrap;font-size:clamp(12px,1.05vw,18px)}
@media(max-width:767px){#contact .contact-introduction-line{white-space:normal}}

/* Headquarters only: original artwork above, existing contact card overlapping its lower edge. */
#contact .contact-hq-scene{min-width:0;position:relative;isolation:isolate}
#contact .contact-hq-art{width:100%;aspect-ratio:3 / 2;background:url("assets/locations/naju-hq-overlay.png") center top / contain no-repeat}
#contact .contact-hq-scene>.rounded-2xl{position:relative;z-index:1;margin-top:-64px;background:rgb(242 195 0 / .96)}
@media(max-width:767px){#contact .contact-hq-scene>.rounded-2xl{margin-top:-32px}}

/* Headquarters placement only: inset contact card overlapping the image bottom. */
#contact .contact-hq-scene>.rounded-2xl{width:85%;margin-left:auto;margin-right:auto;margin-top:-64px}
@media(max-width:767px){#contact .contact-hq-scene>.rounded-2xl{width:85%;margin-top:-32px}}

/* Rounded corners for the headquarters background image. */
#contact .contact-hq-art{border-radius:24px;overflow:hidden}

/* Half the spacing below the contact slogan. */
#contact .contact-location-layout{row-gap:20px}
@media(min-width:768px){#contact .contact-location-layout{row-gap:32px}}

/* Research matches headquarters scene size, rounded artwork and overlay placement. */
#contact .contact-research-art{background-image:url("assets/locations/research-overlay-crisp.png");background-size:cover;background-position:center 52%}

/* Architectural overflow and matching live location maps. */
#contact .contact-hq-scene{overflow:visible;padding-top:20px}
#contact .contact-hq-art{position:relative;transform:translateY(-20px);margin-bottom:-20px;overflow:visible}
#contact .contact-research-art{background-image:url("assets/locations/research-clean.png")}
#contact .contact-map{position:relative;width:100%;height:260px;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(prefers-reduced-motion:reduce){#contact .contact-map-pulse::before,#contact .contact-map-pulse::after{animation:none}}
@media(max-width:767px){#contact .contact-map{height:230px}}

/* Separate rounded sky panels and transparent building foregrounds. */
#contact .contact-hq-art{isolation:isolate;background:none!important;overflow:visible;border-radius:0;transform:none;margin-bottom:0}
#contact .contact-hq-art::before{content:"";position:absolute;z-index:-1;inset:22% 0 0;border-radius:24px;overflow:hidden;background:radial-gradient(ellipse at 80% 24%,#ffe985 0%,transparent 45%),linear-gradient(135deg,#edb800,#ffda2c 60%,#f6c400)}
#contact .contact-hq-art::after{content:"";position:absolute;inset:0;background:url("assets/locations/naju-hq-overlay.png") center top / 100% auto no-repeat;pointer-events:none}
#contact .contact-research-art::after{background-image:url("assets/locations/research-breakout.png")}

/* Compact contact introduction and information panels. */
#contact .contact-location-layout{row-gap:0}
#contact .contact-location-intro{margin-bottom:0}
#contact .contact-introduction-line{margin-bottom:0}
#contact .contact-hq-scene{padding-top:0}
#contact .contact-hq-scene>.rounded-2xl{padding:12px}
#contact .contact-hq-scene>.rounded-2xl>:not([hidden])~:not([hidden]){margin-top:10px;margin-bottom:0}
#contact .contact-hq-scene>.rounded-2xl .gap-3{gap:6px}
#contact .contact-hq-scene>.rounded-2xl p,#contact .contact-hq-scene>.rounded-2xl a{line-height:1.25}
#contact .contact-hq-scene>.rounded-2xl h3{line-height:1.25}
#contact .contact-hq-scene .contact-channel-row{gap:12px}
@media(min-width:768px){#contact .contact-hq-scene>.rounded-2xl{padding:16px}}

/* Wide sizing: the two location columns use the wide content width (up to 1856px, narrowed on short screens so the taller map and the slogan still fit; never below 1100px). */
#contact>div{width:100%;max-width:clamp(1100px,calc(3 * (100svh - 640px) + 64px),1856px)}
#contact .contact-hq-scene{width:100%;min-width:0}
#contact .contact-hq-art{width:100%}

/* Normal contact addresses use two lines; maps are hidden. */
/* Normal Contacts: each Google map sits under its building and overlaps the bottom 30px of its panel (panel on top). */
#contact .contact-hq-scene>.rounded-2xl{z-index:2}
#contact .contact-hq-scene .contact-map{margin-top:-30px;z-index:0}
/* Removed in normal: the company-name heading, the slogan paragraph, the HQ lot-number line, and the 기업부설연구소 phone / email row. */
#contact .contact-location-intro h2{display:none}
#contact .contact-introduction-line{display:none}
#contact .contact-hq-scene .font-label-md + p{display:none}
#contact .contact-research-scene .contact-channel-row{display:none}
/* The HQ phone / email row (moved by app.js to sit directly above the copyright line, marked .contact-row-moved), centred. */
#contact>.contact-row-moved{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px;margin:24px auto 0} /* auto: the generic "#contact > div { max-width:1280px }" rule applies to this div too */
#contact>.contact-row-moved .flex{align-items:center}
#contact>.contact-row-moved{flex:0 0 auto;flex-direction:row;justify-content:center;align-self:center} /* undo the section scaffolding ("#contact>div") for this moved row */
/* Postal code on its own line under each address (app.js writes it in normal mode). */
#contact .normal-address-postal{display:block;font-weight:500;opacity:.75}
#contact .contact-hq-scene .font-label-md{white-space:nowrap}
/* One-line addresses: each panel is an inline-size container and the address font shrinks (14px at most) so the longest
   address (기업부설연구소, about 29.5 x the font size) fits on one line. 32px = the panel padding plus a little slack. */
#contact .contact-hq-scene>.rounded-2xl{container-type:inline-size}
#contact .contact-hq-scene .font-label-md{font-size:min(14px,calc((100cqw - 32px) / 29.5))}
#contact .footer-copyright{margin-top:1.5em!important}

/* Wide text sizing: panel title, address, postal code, phone and e-mail grow with the viewport (14px at 2001px up to 18px) instead of staying at the normal-size 14px. */
#contact .contact-hq-scene .font-label-md{font-size:min(clamp(14px,.65vw,18px),calc((100cqw - 32px) / 33.2))}
#contact .contact-hq-scene>.rounded-2xl h3{font-size:clamp(18px,.8vw,24px)}
#contact .normal-address-postal{font-size:clamp(14px,.65vw,18px)}
#contact>.contact-row-moved a{font-size:clamp(14px,.65vw,18px)}
#contact .footer-copyright{font-size:clamp(14px,.6vw,17px)}

/* Wide Contacts: the slogan is shown again (under the label, one line) and the maps are 1.5x taller (260px -> 390px). */
#contact .contact-introduction-line{display:block;font-size:clamp(14px,.7vw,20px)}
#contact .contact-map{height:390px}

/* Wide Contacts: "call 061-930-7071, mail admin@ansol.biz" on one line, centred above the copyright line. The section scaffolding ("#contact > div > div { width:100% }") would stretch each item to full width and stack them, so it is reset for this row. */
#contact>.contact-row-moved{flex-wrap:nowrap;justify-content:center;align-items:center;gap:0 16px;white-space:nowrap}
#contact>.contact-row-moved>div{width:auto;align-self:auto;flex:0 0 auto}
#contact>.contact-row-moved>div:first-child::after{content:",";margin-left:-10px}

/* Wide Contacts: the "주식회사 앤솔루션" title is shown again (normal size keeps it hidden). */
#contact .contact-location-intro h2{display:block}

/* Wide Contacts: the phone / e-mail row sits beside the "주식회사 앤솔루션" title (app.js moves it right after the h2 in wide); the label and the slogan keep full-width rows. */
#contact .contact-location-intro{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;column-gap:clamp(24px,2vw,48px);row-gap:0}
#contact .contact-location-intro>*{margin:0}
#contact .contact-location-intro>span:first-child{grid-column:1 / -1;justify-self:start;margin-bottom:clamp(8px,.6vw,16px)}
#contact .contact-location-intro>.contact-introduction-line{grid-column:1 / -1;margin-top:clamp(6px,.5vw,12px)}
#contact .contact-location-intro>.contact-row-moved{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:0 16px;white-space:nowrap;margin:0;width:auto;max-width:none;flex:0 0 auto;justify-self:start}
#contact .contact-location-intro>.contact-row-moved>div{width:auto;align-self:auto;flex:0 0 auto}
#contact .contact-location-intro>.contact-row-moved>div:first-child::after{content:",";margin-left:-10px}
#contact .contact-location-intro>.contact-row-moved a{font-size:clamp(14px,.65vw,18px)}

/* Wide Contacts: the building images get rounded bottom corners (the top stays open for the breakout artwork), and the address panel gets vertical room of its own: more padding, a clear 16px of panel between its text and the map edge (the map slides under the panel by 24px instead of 30px). Values follow the normal-size proportions, scaled with the viewport. */
#contact .contact-hq-art::after{border-radius:0 0 24px 24px}
#contact .contact-hq-scene>.rounded-2xl{padding:clamp(16px,.9vw,24px) clamp(16px,.9vw,24px) calc(clamp(16px,.9vw,24px) + 10px)}
#contact .contact-hq-scene>.rounded-2xl>:not([hidden])~:not([hidden]){margin-top:clamp(10px,.6vw,14px)}
#contact .contact-hq-scene .contact-map{margin-top:-24px}

/* Wide Hi5 panel: the old desktop + phone screenshots (and their caption) are replaced by the supplied 4-device artwork (assets/products/hi5-devices-showcase.webp). The markup is shared with the other sizes, so the two <img> and the caption are hidden here and the artwork is the figure's background. */
.about-us-page #solution-hi5 .product-visual--hi5{position:relative;overflow:hidden;background:#fff}
/* Fill the frame as far as the artwork's proportions allow: the image has a transparent margin around the devices (they cover x 268-1254, y 14-995 of 1536x1024), so the image is drawn in a box scaled so that the devices' bounding box fits the frame with a 2% margin. */
.about-us-page #solution-hi5 .product-visual--hi5::before{
  content:"";position:absolute;left:50%;top:50%;width:152.4%;height:102.3%;transform:translate(-50%,-50%);
  background:url("assets/products/hi5-devices-showcase.webp") center / contain no-repeat;pointer-events:none
}
.about-us-page #solution-hi5 .product-visual--hi5 img,
.about-us-page #solution-hi5 .product-visual--hi5 figcaption{display:none}
.about-us-page #solution-hi5 .product-visual--hi5::after{display:none}