/* V4-1, rebuilt from original V4.
   The original HTML, scripts, typography, dimensions, spacing and section order
   are retained. This stylesheet changes palette and image tonality only. */
:root{--ink:#1d3040;--dark:#15364e;--navy:#214762;--accent:#dc7547;--paper:#eef4f8;--line:#d8e2e8;--muted:#60727e}
body{background:#fcfcfb}
/* Preserve the original full-width, five-scene mixed-media hero. */
.hero4,.hero4-media{background:#18384e}
.hero4-scene{filter:saturate(.85) contrast(1.02) brightness(1.08)}
.hero4-shade{background:linear-gradient(90deg,rgba(8,24,36,.69),rgba(8,24,36,.2) 65%),linear-gradient(0deg,rgba(8,24,36,.35),transparent)}
.head4{border-bottom-color:rgba(255,255,255,.25)}
.head4.scrolled{background:rgba(21,54,78,.97)}
.hero4-in p,.hero4 h1 em,.timeline4-count b{color:#ffb48e}
.hero4-in>span{color:#f0f5f8}.hero4-in>a{background:#fff;color:#233c50}
.timeline4-cells i{border-color:#ffffff66;color:#edf5fa;background-image:linear-gradient(90deg,#d96c3c,#ee9a70)}
.timeline4-cells i.is-active{border-color:#ffc6a7;color:#fff}
/* The existing editorial sections keep their original size and rhythm. */
.about-copy small,.story-copy small,.gallery-title small,.center-title small{color:#ae512b}
.about-copy h2 em,.story-copy h2 em{color:#c45e31}
.value-list{border-color:#d4e0e8}.value-list article{border-color:#d4e0e8;background:#f1f6f9}.value-list b{color:#2d6385}
.process4{background:#edf4f9}.process4 .light h2{color:#1d3040}
.process-grid article{background:#24455c}.process-grid img{filter:saturate(.86) brightness(1.06)}
.process-grid article:after{background:linear-gradient(0deg,rgba(13,35,52,.78),transparent 66%)}
.process-grid span{color:#ffc5a5}.process-grid p{color:#edf4f8}
.vision4>img{filter:grayscale(.15) contrast(1.02) brightness(1.06)}
.vision-shade{background:rgba(15,48,72,.62)}.vision-in small{color:#ffc19d}
.notice-cards article{background:#f5f8fa;border-color:#d4e0e8}.notice-cards span{color:#ae512b}
.products4{background:#edf4f9}.lineup a{background:#24455c}
.lineup a:after{background:linear-gradient(0deg,rgba(13,35,52,.82),transparent 65%)}
.consult4{background:#e0edf6}.consult4 a{background:#245c83;color:#fff}.consult4 b{color:#fff}
/* A lighter corporate navy anchors the existing footer. */
.footer4{background:#15364e}.footer4 small,.contact-box span,.foot-nav h3{color:#ffc09a}
.contact4 p,.foot-nav a{color:#d3e2ed}.contact-box{background:#224b68}.contact-box hr{border-color:#55778f}
.foot-brand small{color:#b4ccdd}.foot-nav,.copyright4{border-color:#4b6b83}.copyright4{color:#b7ccdc}
.company-legal{background:#113047!important;border-color:#4b6b83!important}
.company-legal__brand span,.company-legal dt{color:#ffc09a!important}
.company-legal dd{color:#d3e2ed!important}
.company-legal__grid,.company-legal__item,.company-legal__notice{border-color:#4b6b83!important}
.company-legal__notice{color:#b7ccdc!important}
.menu4-panel{background:#f5f8fa;border-bottom-color:#ccdce7}
.menu4-title,.menu4-flow,.menu4-flow section{border-color:#cedde7}
.menu4-title p,.menu4-flow b,.menu4-toggle span,.menu4-shortcut b,.menu4-shortcut i{color:#dc7547}
.menu4-shortcut{border-color:#cddce6;background:#fff}
.menu4-shortcut:hover,.menu4-toggle:hover,.menu4-toggle[aria-expanded=true]{background:#214762;border-color:#214762}
@media(max-width:800px){.head4.menu-open,.head4.menu-open nav{background:#15364e}}

/* Purpose-drawn, larger value icons. */
.value-list .value-icon-wrap{display:flex;align-items:center;justify-content:center;width:76px;height:76px;margin:0 auto 18px;border-radius:22px;background:linear-gradient(145deg,#ffffff,#e5eef5);box-shadow:inset 0 0 0 1px #dbe6ee,0 5px 14px #224c7010;color:#285a7d}
.value-icon{display:block;width:52px;height:52px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.value-icon .icon-accent{stroke:#dc7547}
@media(max-width:800px){.value-list .value-icon-wrap{width:70px;height:70px;margin-bottom:17px;border-radius:20px}.value-icon{width:48px;height:48px}}

/* Replace typewriter-style labels with a consistent sans-serif family. */
.hero4-in p,.about-copy small,.story-copy small,.gallery-title small,.center-title small,.vision-in small,.footer4 small,
.mini-stats b,.process-grid span,.notice-cards span,.foot-nav h3,.copyright4,
.hero4-timeline,.hero4-timeline>small,.menu4-toggle,.menu4-title p,.menu4-flow b,
.menu4-shortcut b,.menu4-shortcut span{
  font-family:'Manrope','Noto Sans KR',sans-serif;
  font-style:normal;
  letter-spacing:.025em;
}
.process-grid span{font-family:'Noto Sans KR','Manrope',sans-serif;font-weight:600;letter-spacing:0}
.menu4-toggle{font-family:'Noto Sans KR',sans-serif;letter-spacing:0}
.company-legal__brand span,.company-legal dt{font-family:'Manrope','Noto Sans KR',sans-serif!important;letter-spacing:.025em!important}

/* Larger brand and submenu, within the original V4 header structure. */
.logo4{gap:10px;flex-shrink:0}.logo4 b{font-size:24px;letter-spacing:-.055em}.logo4 small{font-size:11px;letter-spacing:.06em}
.logo4 .mark4{height:27px;gap:3px}.logo4 .mark4 i{width:5px}.logo4 .mark4 i:nth-child(1){height:14px}.logo4 .mark4 i:nth-child(2){height:21px}.logo4 .mark4 i:nth-child(3){height:27px}
.head4 nav a{font-size:14px}.head4 nav{gap:clamp(14px,1.4vw,22px)}.head-link{font-size:13px;white-space:nowrap}
.menu4-toggle{font-size:13px;white-space:nowrap}.menu4-toggle span{font-size:19px}
.menu4-panel{max-height:calc(100dvh - 80px);overflow-y:auto}.menu4-inner{grid-template-columns:250px minmax(0,1fr);gap:30px}
.menu4-title h2{font-size:34px}.menu4-title>span{font-size:14px;line-height:1.8}.menu4-title p{font-size:12px}
.menu4-flow{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}.menu4-flow section{padding:16px 18px;gap:8px;min-height:190px}.menu4-flow strong{font-size:14px;margin-bottom:5px}.menu4-flow b{font-size:12px}.menu4-flow a{font-size:14px;line-height:1.6;padding:3px 0}.menu4-flow section:nth-child(3){border-right:0}
.menu4-shortcut{padding:13px 10px!important;column-gap:10px}.menu4-shortcut span{font-size:10px}.menu4-shortcut strong{font-size:14px;line-height:1.6}.menu4-shortcut b{font-size:12px}.menu4-shortcut i{font-size:18px}
.foot-brand b{font-size:24px}
@media(min-width:801px) and (max-width:1200px){.logo4 small{display:none}.head4 nav{gap:13px}.head4 nav a{font-size:13px}.head4 nav a::after{display:none!important}.menu4-toggle{margin-right:10px;padding:9px!important}.head-link{padding:9px}.menu4-inner{grid-template-columns:220px minmax(0,1fr);gap:22px}.menu4-flow section{padding-inline:12px}}
@media(max-width:1000px) and (min-width:801px){.head4 nav{gap:10px}.logo4 b{font-size:22px}.head-link{display:none}}
@media(max-width:800px){.logo4 b{font-size:23px}.logo4 small{font-size:10px}.logo4 .mark4{height:25px}.logo4 .mark4 i:nth-child(1){height:13px}.logo4 .mark4 i:nth-child(2){height:19px}.logo4 .mark4 i:nth-child(3){height:25px}.menu4-toggle{font-size:13px}.menu4-panel{max-height:calc(100dvh - 64px)}.menu4-inner{display:block}.menu4-title h2{font-size:30px}.menu4-flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;row-gap:8px}.menu4-flow section{min-width:0;min-height:180px;padding:15px 10px}.menu4-flow section:nth-child(3){border-right:1px solid #cedde7}.menu4-flow section:nth-child(even){border-right:0}.menu4-flow a{font-size:14px}.menu4-actions{grid-template-columns:1fr;gap:8px}.menu4-shortcut{display:grid;min-height:0;grid-template-columns:26px 1fr 20px;grid-template-rows:auto auto}.menu4-shortcut b{margin:0;grid-row:1/3}.menu4-shortcut strong{font-size:14px;margin:0}.menu4-shortcut span{font-size:10px}.menu4-shortcut i{position:static;grid-column:3;grid-row:1/3}.foot-brand b{font-size:24px}}
@media(max-width:420px){.logo4 small{display:none}.logo4{gap:8px}.logo4 b{font-size:23px}.menu4-toggle{margin-right:0}}

/* Attach submenu precisely to the header bottom edge in every state. */
.menu4-panel{top:70px;max-height:calc(100dvh - 70px);transform:none;transition:opacity .2s,visibility .2s}
.head4.scrolled+.menu4-panel{top:62px;max-height:calc(100dvh - 62px)}
@media(max-width:800px){.menu4-panel,.head4.scrolled+.menu4-panel{top:62px;max-height:calc(100dvh - 62px)}}

/* Keep header geometry and attached directory synchronized. */
.head4{transition:background-color .15s ease,border-color .15s ease!important}
.menu4-panel{transition:none!important}
.menu4-panel.is-open{transition:opacity .12s ease!important}


.menu4-flow section[hidden]{display:none!important}.head4 nav a[data-menu-active=true]{color:#f2a37b}
@media(min-width:801px){.menu4-panel.menu4-context .menu4-inner{grid-template-columns:265px minmax(0,1fr);gap:44px}.menu4-panel.menu4-context .menu4-flow{display:block;border-top:1px solid #cddde9}.menu4-panel.menu4-context .menu4-flow section{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;padding:20px 0;min-height:0;border:0}.menu4-panel.menu4-context .menu4-flow section>b,.menu4-panel.menu4-context .menu4-flow section>strong{grid-column:1/-1}.menu4-panel.menu4-context .menu4-flow section>b{margin-bottom:8px}.menu4-panel.menu4-context .menu4-flow section>strong{font-size:21px;margin-bottom:22px}.menu4-panel.menu4-context .menu4-flow a{font-size:18px;padding:20px 0;border-bottom:1px solid #d6e3ed}.menu4-panel.menu4-context .menu4-title h2{font-size:30px}}

/* Align the two desktop header actions to the same box. */
@media(min-width:801px){.head4 .menu4-toggle,.head4 .head-link{height:36px;box-sizing:border-box;padding:0 12px!important;line-height:1;align-items:center;justify-content:center;vertical-align:middle}.head4 .menu4-toggle{display:inline-flex;gap:8px}.head4 .menu4-toggle span{display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:19px;margin:0}.head4 .head-link{display:inline-flex}}
@media(min-width:801px) and (max-width:1000px){.head4 .head-link{display:none}}
/* Compact only the individual desktop dropdowns. */
@media(min-width:801px){
.menu4-panel.menu4-context .menu4-inner{padding:22px 0;align-items:start;gap:36px}
.menu4-panel.menu4-context .menu4-title{padding-right:28px}
.menu4-panel.menu4-context .menu4-title>p{margin:0 0 8px}
.menu4-panel.menu4-context .menu4-title h2{margin:8px 0 12px}
.menu4-panel.menu4-context .menu4-title>span{display:block;line-height:1.7}
.menu4-panel.menu4-context .menu4-actions{display:none}
.menu4-panel.menu4-context .menu4-flow section{padding:12px 0 0;gap:0 26px}
.menu4-panel.menu4-context .menu4-flow section>b{display:none}
.menu4-panel.menu4-context .menu4-flow section>strong{font-size:14px;margin:0 0 9px}
.menu4-panel.menu4-context .menu4-flow a{padding:12px 0;line-height:1.6}
}