/*

Template 2080 Minimax

http://www.tooplate.com/view/2080-minimax

*/

/* =========================
   BASE
   ========================= */

body{
    background: #fff;
    font-family: 'lane_-_narrowregular', sans-serif;
    line-height: 30px;
}

@font-face {
    font-family: 'lane_-_narrowregular';
    src: url('../fonts/LANENAR_-webfont.eot');
    src: url('../fonts/LANENAR_-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/LANENAR_-webfont.woff') format('woff'),
         url('../fonts/LANENAR_-webfont.ttf') format('truetype'),
         url('../fonts/LANENAR_-webfont.svg#lane_-_narrowregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1, p{
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
}

h2, h3{
    font-weight: bold;
}

hr{
    border-color: #f2af00;
    margin: 0;
    opacity: 0.3;
}

img{
    max-width: 100%;
    height: auto;
    transition: all 0.3s ease-in;
}
img:hover{
    cursor: pointer;
    opacity: 0.5;
}

/* =========================
   NAVIGATION
   ========================= */

.navbar-default{
    background: #fff;
    border: none;
    box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.08);
    margin: 0 !important;
}

.navbar-default .navbar-brand{
    background: #dc5034;
    color: #fff;
    font-weight: bold;
    font-size: 30px;
    line-height: 50px;
    height: 90px;
    margin: 0;
    padding: 20px 20px 40px 20px;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
}

/* ✅ :clicked 는 없음 → :active */
.navbar-brand:hover,
.navbar-brand:active{
    background: #dc5034; /* ✅ # 빠져있던 것도 수정 */
}

.navbar-default .navbar-nav li a{
    border-right: 1px solid #f9f9f9;
    color: #202020;
    font-weight: 800;

    font-size: 17px;       /* ✅ 글자 조금 더 크게 */
    padding-right: 26px;   /* ✅ 줄바꿈 안 나게 padding 줄임 */
    padding-left: 26px;
    line-height: 60px;

    white-space: nowrap;   /* ✅ OUR DIFFERENCE 같은 거 줄바꿈 방지 */

    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
}
@media only screen and (max-width: 980px){
    .navbar-default .navbar-nav li a{
        padding-right: 18px;
        padding-left: 18px;
        line-height: 60px;
        font-size: 15px; /* ✅ 폭 줄면 살짝 줄여서 한 줄 유지 */
        white-space: nowrap;
    }
}

/* ✅ :clicked 제거 */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:active{
    color: #f2af00;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{
    color: #f2af00;
    background-color: transparent;
}

.navbar-default .navbar-toggle{
    border: none;
    padding-top: 30px;
}
.navbar-default .navbar-toggle .icon-bar{
    background: #dc5034;
    border-color: transparent;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{
    background-color: transparent;
}

/* =========================
   HOME
   ========================= */

#home{
    background: url('../images/home-bg.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 600px;
    padding-top: 220px;
    padding-bottom: 100px;
}

#home h1{
    color: #f2af00;
    font-weight: 300;
    padding-bottom: 10px;
}

#home h2{
    line-height: 10px;
}

#home .btn{
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid #444;
    border-radius: 0px;
    color: #444;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    font-size: 16px;
    width: 200px;
    padding: 20px;
    margin-top: 20px;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
}

#home .btn:hover{
    background: #dc5034;
    border-color: transparent;
    color: #fff;
}

/* =========================
   SERVICE
   ========================= */

#service{
    padding-top: 100px;
    padding-bottom: 80px;
}

#service h2{
    border-left: 2px solid #f2af00;
    display: inline-block;
    padding: 20px;
}

#service .fa{
    border-top: 3px solid #f2af00;
    border-bottom: 3px solid #dc5034;
    border-radius: 50%;
    font-size: 32px;
    color: #dc5034;
    text-align: center;
    vertical-align: middle;
    margin-top: 50px;
    margin-bottom: 15px;
    padding: 40px;
}

/* =========================
   ABOUT
   ========================= */

#about{
    padding-top: 60px;
    padding-bottom: 80px;
}

#about h2{
    border-right: 2px solid #f2af00;
    display: inline-block;
    padding: 10px 20px 10px 10px;
}

#about .col-md-12{
    text-align: center;
    padding-bottom: 60px;
}

#about img{
    border: 1px solid #666;
    padding: 10px;
}

#about h4{
    padding-bottom: 10px;
}

/* =========================
   TEAM
   ========================= */

#team{
    padding-top: 60px;
    padding-bottom: 100px;
}

#team h2{
    border-left: 2px solid #f2af00;
    display: inline-block;
    padding: 10px 10px 10px 20px;
}

#team h4{
    padding-bottom: 40px;
}

#team .col-md-12{
    text-align: center;
    padding-bottom: 60px;
}

#team img{
    border: 1px solid #666;
    padding: 15px;
}

/* =========================
   PORTFOLIO
   ========================= */

#portfolio{
    text-align: center;
    padding-top: 80px;
    padding-bottom: 60px;
}

#portfolio h2{
    border-right: 2px solid #f2af00;
    display: inline-block;
    padding: 10px 20px 10px 10px;
}

/* FILTER */
.filter-wrapper{
    width: 100%;
    margin: 0 0 24px 0;
    overflow: hidden;
    text-align: center;
}
.filter-wrapper li{
    display: inline-block;
    margin: 4px;
}
.filter-wrapper li a{
    color: #999999;
    font-size: 16px;
    font-family: 'lane_-_narrowregular', sans-serif;
    font-weight: bold;
    padding: 8px 17px;
    display: block;
    text-decoration: none;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
}
.filter-wrapper li a.selected,
.filter-wrapper li a:focus,
.filter-wrapper li a:hover{
    background: #f2af00;
    border-color: transparent;
    color: #ffffff;
}

/* ISOTOPE */
.iso-box-section{
    width: 100%;
}
.iso-box-wrapper{
    width: 100%;
    padding: 0;
    clear: both;
    position: relative;
}
.iso-box{
    position: relative;
    min-height: 50px;
    float: left;
    overflow: hidden;
    margin-bottom: 20px;
}
.iso-box > a{
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.fluid-img{
    width: 100%;
    display: block;
}

/* =========================
   PRICING
   ========================= */

#pricing{
    padding-top: 60px;
    padding-bottom: 80px;
    text-align: center;
}

#pricing h2{
    border-left: 2px solid #f2af00;
    display: inline-block;
    padding: 10px 10px 10px 20px;
}

#pricing .plan{
    border: 2px solid #444;
    padding: 20px 20px 40px 20px;
    margin-top: 60px;
}
#pricing .plan .plan-title{
    border-bottom: 2px solid #444;
    padding: 20px 10px 20px 10px;
    margin-bottom: 20px;
}
#pricing .plan small,
#pricing .plan ul li{
    font-family: 'Raleway', sans-serif;
}
#pricing .plan ul{
    padding: 0;
}
#pricing .plan ul li{
    display: block;
    padding: 16px 0px 16px 0px;
}
#pricing .plan .btn{
    background: transparent;
    border: 2px solid #444;
    border-radius: 0px;
    color: #000;
    font-weight: bold;
    width: 140px;
    height: 50px;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
}
#pricing .plan .btn:hover{
    background: #f2af00;
    border-color: transparent;
}

/* =========================
   TOP BAR (custom)
   ========================= */

.topbar{
    position: fixed;
    top: 0;
    width: 100%;
    height: 40px;
    background-color: #21466d;
    color: white;
    z-index: 9999;
    font-size: 16px;
    font-weight: 500;
}

.topbar .container{
    padding-left: 15px !important;
    padding-right: 15px !important;
    display: flex;
    align-items: center;
    justify-content: center;   /* ✅ 가운데 정렬 */
    gap: 18px;
    flex-wrap: wrap;           /* ✅ 화면 작아지면 자연스럽게 줄바꿈 */
}

.topbar .icon{
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
    filter: invert(1);
}

.topbar .info-item{
    display: flex;
    align-items: center;
}

/* navbar fixed offset */
.navbar-default.navbar-fixed-top{
    top: 40px;
}

/* =========================
   SECTION TITLE / DIFFERENCE (custom)
   ========================= */

.difference-section h4{
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 30px;
}

.difference-section .row > div{
    margin-bottom: 60px;
}

.difference-section .row{
    row-gap: 60px;
}

.mb-5{
    margin-bottom: 30px;
}

.section-title-container{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 10px;
}

.section-title{
    font-size: 28px;
    font-weight: bold;
    color: #222;
    margin-left: 10px;
}

.section-title-border{
    height: 30px;
    width: 3px;
    background-color: #f5c518;
}

.section-subtitle{
    text-align: center;
    font-size: 18px;
    color: #555;
    margin-bottom: 40px;
}

/* scroll offset (fixed topbar 40px + fixed navbar) */
:root{ --anchor-offset: 140px; }

#home,
#our-difference,
#about,
#range,
#manufacturers,
#contact{
    scroll-margin-top: var(--anchor-offset);
}

/* =========================
   BUTTON (custom)
   ========================= */

.btn-product-range{
    display: inline-block;
    padding: 10px 20px;
    background-color: #f1c40f;
    color: #1b2f49;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}
.btn-product-range:hover{
    background-color: #e0b80f;
    color: #ffffff;
}

/* =========================
   FEATURE STRIP (custom)
   ========================= */

.feature-strip{
    background: #0A3A55;
    color: #ffffff;
    padding: 72px 0;
}
.feature-row{
    display: flex;
    align-items: center;
}
.feature-title{
    margin: 0 0 22px 0;
    font-weight: 800;
    letter-spacing: 0.2px;
}
.feature-bar{
    display: inline-block;
    width: 5px;
    height: 20px;
    background: #f9b700;
    vertical-align: -3px;
    margin-right: 10px;
    border-radius: 2px;
}
.feature-list{
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.feature-list li{
    position: relative;
    padding-left: 22px;
    margin-bottom: 14px;
    font-size: 18px;
    font-weight: 600;
    opacity: 0.95;
}
.feature-list li::before{
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #f9b700;
    font-weight: 900;
}
.feature-card{
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 28px 28px 26px 28px;
    max-width: 520px;
    margin-left: auto;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}
.feature-card-top{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.feature-icon{
    font-size: 22px;
    color: #f9b700;
}
.feature-tag{
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(249, 183, 0, 0.16);
    color: #ffe9a6;
}
.feature-headline{
    margin: 0 0 10px 0;
    font-weight: 900;
    font-size: 28px;
    line-height: 1.2;
}
.feature-sub{
    margin: 0 0 18px 0;
    font-size: 16px;
    line-height: 1.65;
    opacity: 0.95;
}
.feature-cta{
    display: inline-block;
    padding: 12px 16px;
    border-radius: 10px;
    background: #f9b700;
    color: #0b2239;
    font-weight: 900;
    text-decoration: none;
    transition: 0.2s;
}
.feature-cta:hover{
    filter: brightness(1.03);
    transform: translateY(-1px);
}

/* mobile */
@media (max-width: 991px){
    .feature-row{
        display: block;
    }
    .feature-card{
        margin: 22px 0 0 0;
        max-width: 100%;
    }
}

/* =========================
   RANGE / MANUFACTURERS (custom)
   ========================= */

.range-section{
    padding: 30px 0 80px;   /* 위 50 / 아래 80 (원하면 위를 40/30으로 더 줄여도 됨) */
    background: #ffffff;
}

.range-subtitle{
    max-width: 860px;
    margin: 14px auto 0;
    color: rgba(11, 34, 57, 0.72);
    line-height: 1.7;
    font-size: 16px;
}

.range-cards{
    margin-top: 34px;
}

.range-card{
    display: block;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(36, 71, 110, 0.14);
    border-radius: 16px;
    padding: 22px 22px 20px;
    text-decoration: none;
    color: #0b2239;
    min-height: 220px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    height: 260px;
    display: flex;
    flex-direction: column;
}

.range-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.10);
    border-color: rgba(249, 183, 0, 0.45);
    text-decoration: none;
    color: #0b2239;
}

.range-card-icon{
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(249, 183, 0, 0.16);
    color: #f9b700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}

.range-card h4{
    margin: 0 0 10px 0;
    font-weight: 900;
    font-size: 18px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.range-card p{
    margin: 0 0 14px 0;
    color: rgba(11, 34, 57, 0.74);
    line-height: 1.6;
    font-size: 14px;
}

.range-card-link{
    margin-top: auto;
    font-weight: 900;
    color: #24476e;
    display: inline-block;
}

.btn-accent{
    display: inline-block;
    padding: 12px 18px;
    border-radius: 10px;
    background: #f9b700;
    color: #0b2239;
    font-weight: 900;
    text-decoration: none;
    border: 0;
    transition: 0.2s;
}
.btn-accent:hover{
    filter: brightness(1.03);
    transform: translateY(-1px);
    text-decoration: none;
    color: #0b2239;
}

/* Manufacturers 3-card */
.manufacturer-cards{
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 28px;
    margin-top: 34px;
    align-items: stretch;
}

.maker-card{
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 18px;
    padding: 28px 28px 22px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.manufacturers-section{
    padding: 50px 0 80px;   /* 위 여백 줄이기 */
}
.maker-card-title{
    position: relative;
    margin: 0;
    padding-left: 16px;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0.2px;
}
.maker-card-title::before{
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 2px;
    background: #f9b700;
}
.maker-list{
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    flex: 1;
}
.maker-list li{
    display: flex;
    gap: 12px;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.maker-list li::before{
    content: "✓";
    flex: 0 0 auto;
    color: #f9b700;
    font-weight: 900;
    line-height: 1.2;
    margin-top: 1px;
}
.maker-note{
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.10);
    color: #5b6776;
    font-size: 14px;
    line-height: 1.65;
}

@media (max-width: 991px){
    .manufacturer-cards{
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

/* =========================
   LANGUAGE / FONT OVERRIDE (custom)
   ========================= */

.kr{ display: none; }

body{
    font-family: 'Noto Sans KR', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
p,
span,
a,
.navbar-default .navbar-nav li a,
.footer-section,
#home .btn,
#pricing .plan small,
#pricing .plan ul li,
.filter-wrapper li a{
    font-family: 'Noto Sans KR', sans-serif !important;
}

/* =========================
   COPYRIGHT / SCROLLTOP
   ========================= */

.copyright{
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}

.go-top{
    background-color: #f2af00;
    font-size: 26px;
    bottom: 2em;
    right: 2em;
    color: #FFF;
    display: none;
    position: fixed;
    text-decoration: none;
    width: 60px;
    height: 60px;
    line-height: 58px;
    text-align: center;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
}
.go-top:hover{
    background-color: #444;
    color: #fff;
}

/* =========================
   RESPONSIVE
   ========================= */

@media only screen and (max-width: 980px){
    .navbar-default .navbar-nav li a{
        padding-right: 20px;
        padding-left: 40px;
        line-height: 30px;
    }
}

@media only screen and (max-width: 360px){
    #team h4{
        padding-bottom: 30px;
    }
}

@media (max-width: 992px){
    .contact-grid{
        grid-template-columns: 1fr;
    }
    #contact .contact-map iframe,
    #contact .map-box iframe,
    #contact .map-container iframe{
        height: 360px !important;
    }
}
/* =========================================================
   FINAL OVERRIDE: CONTACT + FOOTER (맨 아래에 붙여넣기)
   - CONTACT는 밝게/깔끔하게 → FOOTER와 톤 분리
   - MAP은 얇은 네온 테두리만
   ========================================================= */

/* ---------- CONTACT SECTION (clean) ---------- */
#contact{
    padding: 50px 0 70px;
    background: #ffffff; /* ✅ 배경 없애고(화이트) 푸터와 분리 */
}

#contact .contact-head{
    margin-bottom: 26px;
    text-align: left;
}

#contact .contact-head h2{
    margin: 0 0 8px;
    letter-spacing: 0.06em;
    color: #0b2239;       /* ✅ 제목은 진한 네이비 */
    font-weight: 900;
}

#contact .contact-head p{
    margin: 0;
    line-height: 1.7;
    color: rgba(11,34,57,0.72);
}

#contact .contact-grid{
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 26px;
    align-items: stretch;
}

/* ✅ MAP: 얇은 네온 테두리 */
#contact .contact-map{
    border-radius: 18px;
    padding: 2px;
    background: rgba(54,165,214,0.80); /* 네온 라인 색 */
    box-shadow:
        0 0 0 1px rgba(54,165,214,0.55),
        0 0 18px rgba(54,165,214,0.22); /* ✅ 과한 그림자 제거 */
    overflow: hidden;
}

#contact .contact-map iframe{
    width: 100%;
    height: 440px;
    border: 0;
    border-radius: 16px;
    display: block;
}

/* ✅ INFO CARD: 카드만 고급스럽게 딥톤 */
#contact .contact-card{
    border-radius: 18px;
    border: 1px solid rgba(11,34,57,0.12);
    box-shadow: 0 18px 40px rgba(0,0,0,0.14);
    background: linear-gradient(180deg, #0b3a55 0%, #072e44 100%);
    padding: 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
}

#contact .contact-card-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

#contact .contact-card h3{
    margin: 0;
    font-size: 18px;
    letter-spacing: 0.06em;
    font-weight: 900;
}

#contact .contact-badge{
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.08em;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
}

#contact .contact-items{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 6px 0 16px;
}

#contact .contact-item{
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 10px;
    align-items: start;
}

#contact .contact-icon{
    font-size: 16px;
    line-height: 1.2;
    opacity: 0.95;
}

#contact .contact-text strong{
    display: inline-block;
    margin-bottom: 2px;
    letter-spacing: 0.02em;
    font-weight: 900;
}

#contact .contact-text p{
    margin: 0;
    opacity: 0.92;
    line-height: 1.6;
}

#contact .contact-text a{
    color: rgba(255,255,255,0.92);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.22);
}

#contact .contact-text a:hover{
    color: #ffffff;
    border-bottom-color: rgba(255,255,255,0.55);
}

#contact .contact-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: auto;
}

#contact .btn-contact{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 0.04em;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.12);
    color: #fff;
    transition: transform 0.12s ease, opacity 0.12s ease;
}

#contact .btn-contact:hover{
    transform: translateY(-1px);
    opacity: 0.98;
}

#contact .btn-contact.ghost{
    background: rgba(255,255,255,0.04);
}

#contact .contact-note{
    margin-top: 12px;
    font-size: 12.5px;
    opacity: 0.86;
    line-height: 1.6;
}

/* CONTACT와 FOOTER 사이 얇은 경계선(톤 분리) */
.section-separator{
    height: 1px;
    background: rgba(11,34,57,0.10);
}

/* ---------- FOOTER (deeper) ---------- */
.footer-section{
    background: linear-gradient(180deg, #06283C 0%, #041B2A 100%);
    padding: 56px 0 44px;
    border-top: 1px solid rgba(255,255,255,0.10);
}

.footer-grid{
    display: flex;
    gap: 56px;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-left{
    flex: 0 0 40%;
    max-width: 420px;
}

.footer-brand{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 22px;
}

.footer-logo{
    height: 28px;
    width: auto;
    display: inline-block;
}

.footer-brand-text{
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #ffffff;
}

.footer-info-item{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.footer-icon{
    width: 26px;       /* ✅ 아이콘 커지는 현상 방지 */
    height: 26px;
    flex-shrink: 0;
    fill: #f2af00;
    opacity: 0.95;
    margin-top: 2px;
    display: block;
}

.footer-info-item p{
    margin: 0;
    color: rgba(255,255,255,0.88);
    font-size: 15px;
    line-height: 1.55;
}

.footer-info-item a{
    color: rgba(255,255,255,0.92);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-service{
    flex: 1 1 auto;
    text-align: left;
    max-width: 560px;
}

.footer-service h3{
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 2px;
    margin: 0 0 14px 0;
    color: #ffffff;
}

.footer-service p{
    margin: 0 0 10px 0;
    color: rgba(255,255,255,0.85);
    font-size: 16px;
    line-height: 1.7;
}

.footer-links{
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
}

.footer-links a{
    color: rgba(255,255,255,0.78);
    font-size: 13px;
    letter-spacing: 1px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    padding-bottom: 2px;
}

.footer-links a:hover{
    color: #ffffff;
    border-bottom-color: rgba(242,175,0,0.8);
}

.footer-cta{
    margin-top: 18px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-footer{
    display: inline-block;
    background: #f2af00;
    color: #1b3b56;
    font-weight: 900;
    padding: 11px 18px;
    border-radius: 10px;
    text-decoration: none;
}

.btn-footer:hover{
    background: #ffc533;
    color: #1b3b56;
}

.btn-footer-ghost{
    display: inline-block;
    background: transparent;
    color: rgba(255,255,255,0.92);
    font-weight: 800;
    padding: 11px 18px;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.22);
}

.btn-footer-ghost:hover{
    border-color: rgba(242,175,0,0.65);
    color: #ffffff;
}

/* Responsive */
@media (max-width: 992px){
    #contact .contact-grid{
        grid-template-columns: 1fr;
    }
    #contact .contact-map iframe{
        height: 360px;
    }
    .footer-grid{
        flex-direction: column;
        gap: 28px;
    }
}

/* =========================================================
   SAFETY OVERRIDE (Contact rules must win)
   ========================================================= */
#contact.contact-section{
    background: #ffffff !important;
    padding: 90px 0 70px !important;
}
#contact .contact-map{
    padding: 2px !important;
    background: rgba(54,165,214,0.80) !important;
    box-shadow:
        0 0 0 1px rgba(54,165,214,0.55),
        0 0 18px rgba(54,165,214,0.22) !important;
}
/* ✅ map 박스가 늘어나도 iframe이 같이 늘어나게 */
#contact .contact-map{
    display: flex !important;
    overflow: hidden !important;
}

#contact .contact-map iframe{
    width: 100% !important;
    height: 100% !important;     /* ✅ 핵심 */
    min-height: 440px !important; /* ✅ 최소 높이만 보장 */
    border: 0 !important;
    border-radius: 16px !important;
    display: block !important;
}

@media (max-width: 992px){
    #contact .contact-map iframe{
        min-height: 360px !important;
    }
}
@media (max-width: 992px){
    #contact .contact-map iframe{
        height: 360px !important;
    }
}
:root{
  --navy-top:  #0A3A55;  /* topbar / section navy */
  --navy-mid:  #06283C;  /* footer top */
  --navy-bot:  #041B2A;  /* footer bottom */
}

/* Topbar */
.topbar{ background-color: var(--navy-top) !important; }

/* Feature strip */
.feature-strip{ background: var(--navy-top) !important; } /* 지금도 괜찮아서 유지 */

/* Footer */
.footer-section{
  background: linear-gradient(180deg, var(--navy-mid) 0%, var(--navy-bot) 100%) !important;
}

/* =========================================================
   PREMIUM POLISH OVERRIDES (keep at very bottom)
   - spacing / typography consistency
   - header/footer/feature-strip color harmony
   - range cards breathing room
   - contact map/card height alignment
   ========================================================= */

:root{
    --ms-navy:   #06283C;
    --ms-navy2:  #072E44;
    --ms-teal:   #0A3A55;
    --ms-mid:    #24476E;
    --ms-accent: #F9B700;
    --ms-border: rgba(10, 58, 85, 0.16);
    --ms-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    --ms-shadow-hover: 0 14px 34px rgba(0, 0, 0, 0.12);
    --ms-radius: 20px;
--font-sans: "Raleway","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--text-900: #0A2342;
--text-700: #1F3447;
--text-500: #4A6174;

}

/* =========================================================
   PREMIUM TYPOGRAPHY UNIFY (Range + Footer + Global)
   - 목적: 섹션마다 폰트/두께가 달라 보이는 문제를 "한 번에" 정리
   - 적용범위: 전체 기본 폰트 + RANGE 카드 + FOOTER 타이포
   ========================================================= */

/* ✅ 기본 글꼴 통일 (Bootstrap/템플릿 기본 폰트가 튀는 것 방지) */
html, body,
button, input, select, textarea{
    font-family: var(--font-sans) !important;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ✅ 제목/메뉴/푸터까지 동일 폰트 적용 */
h1, h2, h3, h4, h5, h6,
.navbar-default .navbar-nav > li > a,
.footer-modern, .footer-modern *{
    font-family: var(--font-sans) !important;
}

/* ✅ 전반적인 두께 정리 (너무 두꺼운 900 남발 방지) */
h1, h2{ font-weight: 800; letter-spacing: -0.02em; }
h3, h4{ font-weight: 700; letter-spacing: -0.015em; }
h5, h6{ font-weight: 700; }

.navbar-default .navbar-nav > li > a{
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* ✅ 본문 줄간격은 살짝 여유 */
p{
    line-height: 1.70 !important;
}

/* ✅ Color harmony: Topbar / Feature strip / Footer */
.topbar{
    background: linear-gradient(180deg, var(--ms-teal) 0%, var(--ms-navy) 100%) !important;
}

.feature-strip{
    background: linear-gradient(180deg, var(--ms-mid) 0%, var(--ms-navy2) 60%, var(--ms-navy) 100%) !important;
}

.footer-section{
    background: linear-gradient(180deg, var(--ms-teal) 0%, var(--ms-navy2) 45%, #041B2A 100%) !important;
}

/* ✅ RANGE cards: 더 넓게(행 간격 + 카드 내부 여백) */
.range-cards{
    margin-top: 40px !important;
}

.range-cards > [class*="col-"]{
    margin-bottom: 28px;
}

@media (max-width: 768px){
    .range-cards > [class*="col-"]{
        margin-bottom: 18px;
    }
}

.range-card{
    height: auto !important;          /* 기존 260px 고정 해제 */
    min-height: 290px;                /* 높이는 너무 들쭉날쭉하지 않게 */
    padding: 34px 32px !important;
    border-radius: var(--ms-radius) !important;
    border: 1px solid var(--ms-border) !important;
    box-shadow: var(--ms-shadow) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

.range-card:hover{
    transform: translateY(-3px);
    box-shadow: var(--ms-shadow-hover) !important;
    border-color: rgba(10, 58, 85, 0.26) !important;
}

.range-card .icon-block{
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    margin-bottom: 18px !important;
    background: rgba(249, 183, 0, 0.16) !important;
    border: 1px solid rgba(249, 183, 0, 0.20) !important;
}

.range-card h4{
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin: 0 0 14px !important;
    font-weight: 800 !important;
}

.range-card p{
    font-size: 15px !important;
    color: rgba(20, 40, 60, 0.78) !important;
}

.range-card .range-link{
    font-size: 15px !important;
}

/* ✅ CONTACT: 지도/카드 하단 라인 ‘착붙’ (높이/테두리 통일) */
#contact .contact-grid{
    align-items: stretch !important;
}

#contact .contact-map,
#contact .contact-card{
    height: 100% !important;
}

#contact .contact-map{
    padding: 0 !important; /* padding(2px) 때문에 하단이 미묘하게 길어 보이는 경우 방지 */
    border-radius: var(--ms-radius) !important;
    overflow: hidden !important;
    border: 2px solid rgba(54, 165, 214, 0.80) !important;
    background: transparent !important;
    box-shadow:
        0 0 0 1px rgba(54, 165, 214, 0.35),
        0 0 18px rgba(54, 165, 214, 0.18) !important;
}

#contact .contact-map iframe{
    display: block;
    width: 100%;
    height: 100% !important;
    min-height: 440px;
    border-radius: calc(var(--ms-radius) - 2px) !important;
}

/* (구형 구조를 쓰는 페이지가 있어도 적용되게) */
#contact .map-container iframe,
#contact .contact-map-wrapper iframe{
    display: block;
    width: 100%;
}

/* =========================================================
   PREMIUM POLISH OVERRIDES (KEEP ORIGINAL CONTENT/STRUCTURE)
   - 기존 메뉴/텍스트/섹션 구조는 그대로 유지
   - 간격/정렬/타이포/카드 톤만 "조금 더 고급스럽게" 정돈
   ========================================================= */

:root{
    --font-sans: "Raleway","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

    --ink-900: #0A2342;
    --ink-700: #1F3447;
    --ink-500: #4A6174;

    --card-bg: rgba(255,255,255,0.92);
    --card-border: rgba(10,35,66,0.10);
    --shadow-soft: 0 16px 40px rgba(0,0,0,0.10);
    --shadow-hover: 0 22px 60px rgba(0,0,0,0.14);
    --radius-lg: 18px;
}

/* ✅ 전체 폰트/두께 톤 정리 (기존 텍스트는 유지, '보이는 질감'만 정돈) */
html, body,
button, input, select, textarea{
    font-family: var(--font-sans) !important;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2{ font-weight: 800; letter-spacing: -0.02em; }
h3, h4{ font-weight: 700; letter-spacing: -0.015em; }
h5, h6{ font-weight: 700; }

p{ color: var(--ink-500); }

/* =========================================================
   TOPBAR (하드코딩 padding-left 제거 → 반응형 정렬)
   ========================================================= */
.topbar .container{
    padding-left: 15px !important;
    padding-right: 15px !important;
    display: flex;
    align-items: center;
    justify-content: center !important;
    gap: 18px;
    flex-wrap: wrap;
}
@media (max-width: 575px){
    .topbar .container{
        justify-content: center !important;
        gap: 12px;
    }
}

/* =========================================================
   NAV / SECTION SPACING
   ========================================================= */
.navbar-default .navbar-nav > li > a{
    font-family: var(--font-sans) !important;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* 섹션 간격: "살짝" 정돈 (과하게 바뀌지 않게) */
#range, #manufacturers, #contact{
    padding-top: 90px;
    padding-bottom: 90px;
}
@media (max-width: 767px){
    #range, #manufacturers, #contact{
        padding-top: 70px;
        padding-bottom: 70px;
    }
}

/* =========================================================
   RANGE + MANUFACTURERS (카드 고급스럽게 + 간격 정리)
   ========================================================= */

/* Bootstrap row에서 세로 간격이 "따닥" 붙는 문제 해결 */
#range .range-cards,
#manufacturers .manufacturer-grid{
    row-gap: 26px;
}

/* 카드 톤 */
#range .range-card,
#manufacturers .manufacturer-card{
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    box-shadow: var(--shadow-soft);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

#range .range-card:hover,
#manufacturers .manufacturer-card:hover{
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(10,35,66,0.16);
}

/* 타이포 리듬 */
#range .range-card h4,
#manufacturers .manufacturer-card h4{
    color: var(--ink-900);
    line-height: 1.25;
}

#range .range-card p,
#manufacturers .manufacturer-card p{
    color: var(--ink-500);
    line-height: 1.65;
}

/* 링크/버튼 톤 */
#range .range-card-link{
    font-weight: 700;
    letter-spacing: 0.01em;
}
#range .range-btn,
#range .range-btn-secondary{
    font-weight: 800;
}

/* =========================================================
   CONTACT (지도/카드 유지 + 정렬만 정돈)
   ========================================================= */
#contact .contact-grid{
    gap: 28px;
}
#contact .contact-card{
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    box-shadow: var(--shadow-soft);
}
#contact .contact-map iframe{
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

/* =========================================================
   FOOTER (기존 구조 유지, 타이포만 살짝 정돈)
   ========================================================= */
.footer-section, .footer-section *{
    font-family: var(--font-sans) !important;
}
.footer-brand-text{
    font-weight: 800;
    letter-spacing: 0.12em;
}
.footer-title{
    font-weight: 700;
    letter-spacing: 0.10em;
}
.footer-links a{
    font-weight: 600;
}

/* =========================================================
   SAFETY: 기존 테마/부트스트랩과 충돌 방지용
   ========================================================= */
img{ image-rendering: auto; }
/* =========================================================
   NAVBAR ONE-LINE FIX (PC)
   - HOME ~ KR/ENG 가 아래로 떨어져 보이는 현상 해결
   - 브랜드(로고) + 메뉴를 "한 줄"로 고정 + 메뉴 중앙정렬
   ========================================================= */
@media (min-width: 768px){

  /* navbar 안 container만 flex로 (다른 섹션 container 영향 없음) */
  .navbar.navbar-default > .container{
    display: flex;
    align-items: stretch;
  }

  /* 브랜드 영역은 왼쪽 고정 */
  .navbar.navbar-default .navbar-header{
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }

  /* 메뉴 영역은 남는 공간을 차지하면서 중앙 정렬 */
  .navbar.navbar-default .navbar-collapse{
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    padding-left: 0;
    padding-right: 0;
  }

  /* UL 자체를 한 줄로 고정 */
  .navbar.navbar-default .navbar-nav{
    display: flex !important;
    flex-wrap: nowrap !important;
    float: none !important;   /* navbar-right 무시하고 중앙정렬 */
    margin: 0 !important;
  }

  .navbar.navbar-default .navbar-nav > li{
    float: none !important;
  }

  /* 메뉴 글자 한 줄 유지 + 세로 가운데 정렬(높이 90 기준) */
  .navbar.navbar-default .navbar-nav > li > a{
    white-space: nowrap !important;

    /* ✅ 여기 숫자만으로 '눈에 띄게' 조절 가능 */
    font-size: 17px !important;
    font-weight: 800 !important;

    /* 한줄 유지용(너무 넓으면 줄바꿈 유발) */
    padding-left: 26px !important;
    padding-right: 26px !important;

    /* navbar 높이(브랜드 90px) 기준으로 가운데 정렬 */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 90px !important;
  }
}
/* =========================================================
   ANCHOR OFFSET FIX (메뉴 클릭 시 위치 보정)
   ========================================================= */
:root{ --anchor-offset: 130px; }  /* 160 → 130 정도가 보통 딱 맞음 */

#home,
#service,        /* OUR DIFFERENCE 실제 id가 #service라서 이게 중요 */
#about,
#range,
#manufacturers,
#contact{
  scroll-margin-top: var(--anchor-offset);
}
/* ===== Section top spacing fine-tune (move up by ~30px) ===== */
.range-section{
    padding: 60px 0 70px !important;   /* 기존 90 -> 60 */
}

.manufacturers-section{
    padding: 60px 0 70px !important;   /* 기존 90 -> 60 */
}

#contact.contact-section{
    padding: 60px 0 70px !important;   /* 기존 90 -> 60, !important로 덮기 */
}
#range,
#manufacturers,
#contact{
    scroll-margin-top: 110px !important;
}
/* =========================
   1) TOPBAR 글자 조금 더 굵게
   ========================= */
/* TOPBAR 글자 더 크게 + 더 두껍게 */
.topbar {
    font-size: 16px !important;   /* 15 -> 16 */
}

.topbar .info-item span {
    font-weight: 700 !important;  /* 600 -> 700 */
    letter-spacing: 0.2px;
}


/* =========================
   2) 상단 메뉴(HOME ~ KR/ENG) 글자 조금 작게 + 덜 빡빡하게
   ========================= */
.main-menu.navbar-nav > li > a {
    font-size: 13px !important;    /* 기존보다 약간 작게 */
    font-weight: 700 !important;   /* 너무 두껍지 않게 (기존 800 느낌이면 완화) */
    letter-spacing: 0.6px;         /* 자간 살짝 */
    padding-left: 18px !important; /* 좌우 여백 살짝 줄여서 답답함 감소 */
    padding-right: 18px !important;
}

/* 메뉴가 여전히 빡빡하면 이 값도 같이 */
@media (min-width: 768px) {
    .navbar-default .navbar-nav > li > a {
        line-height: 26px;         /* 필요시만 */
    }
}


/* =========================================================
   V2 UNIFY PATCH (section titles + buttons + cards + spacing)
   ========================================================= */
:root{
    --ui-accent: var(--ms-accent, #F9B700);
    --ui-ink: var(--ink-900, #0A2342);
    --ui-muted: var(--ink-500, #4A6174);
    --ui-radius-sm: 12px;
    --ui-radius-md: 16px;
    --ui-radius-lg: 18px;
    --ui-shadow-1: 0 10px 24px rgba(10, 35, 66, 0.08);
    --ui-shadow-2: 0 16px 34px rgba(10, 35, 66, 0.12);
    --ui-border: 1px solid rgba(10, 35, 66, 0.10);
}

/* ---------- SECTION TITLE SYSTEM ---------- */
.about-section{
    padding: 72px 0 84px !important;
}
.about-image-placeholder{
    width: 100%;
    height: 250px;
    background-color: #ddd;
    box-shadow: var(--ui-shadow-1);
    border-radius: var(--ui-radius-md);
}
.ms-section-head{
    margin-bottom: 24px;
}
.ms-section-head.ms-center{ text-align: center; }
.ms-section-head.ms-left{ text-align: left; }

.ms-section-title-wrap{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
}
.ms-section-head.ms-center .ms-section-title-wrap{ justify-content: center; }
.ms-section-head.ms-left .ms-section-title-wrap{ justify-content: flex-start; }

.ms-section-bar{
    display: inline-block;
    width: 4px;
    height: 30px;
    border-radius: 999px;
    background: var(--ui-accent);
    flex: 0 0 4px;
}

.ms-section-head-title{
    margin: 0;
    color: var(--ui-ink);
    font-family: var(--font-sans) !important;
    font-size: clamp(24px, 2vw, 32px);
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1.12;
    text-transform: uppercase;
}

.ms-section-head-desc{
    margin: 10px 0 0;
    color: var(--ui-muted);
    font-family: var(--font-sans) !important;
    font-size: 15px;
    line-height: 1.7;
}

/* 섹션별 제목 간격 미세 조정 */
#our-difference .ms-section-head{ margin-bottom: 34px; }
#about .about-head{ margin-bottom: 12px; }
#range .ms-section-head{ margin-bottom: 10px; }
#manufacturers .ms-section-head{ margin-bottom: 12px; }
#contact .contact-head{ margin-bottom: 26px !important; }
#contact .contact-head .ms-section-head{ margin: 0; }

/* 기존 섹션 제목 장식과 포인트 색 통일 */
.section-title-border,
.maker-card-title::before{
    background: var(--ui-accent) !important;
}

/* ---------- SECTION SPACING RHYTHM ---------- */
#service{
    padding-top: 84px !important;
    padding-bottom: 54px !important;
}
.feature-strip{
    padding: 72px 0 !important;
}
.range-section{
    padding: 72px 0 84px !important;
}
.manufacturers-section{
    padding: 72px 0 84px !important;
}
#contact.contact-section{
    padding: 72px 0 84px !important;
}

.container > .row > .col-md-10 > hr{
    border-color: rgba(10,35,66,0.12) !important;
    opacity: 1 !important;
}
.section-separator{
    height: 1px;
    background: rgba(10,35,66,0.10) !important;
}

/* ---------- CARD CONSISTENCY ---------- */
.feature-card,
.range-card,
.maker-card,
#contact .contact-card,
#contact .contact-map{
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-1) !important;
}

.feature-card:hover,
.range-card:hover,
.maker-card:hover{
    box-shadow: var(--ui-shadow-2) !important;
}

.feature-card{
    border: 1px solid rgba(255,255,255,0.10) !important;
}

.range-card{
    border: var(--ui-border) !important;
    min-height: 250px;
}
.range-card-icon{
    border-radius: var(--ui-radius-sm) !important;
}
#range .range-cards{
    row-gap: 24px;
}
#range .range-cards > [class*="col-"]{
    margin-bottom: 0 !important;
}

.maker-card{
    border: var(--ui-border) !important;
    padding: 26px 24px 20px !important;
}
.manufacturer-cards{
    gap: 24px !important;
    margin-top: 30px !important;
}

#contact .contact-map{
    padding: 2px;
}
#contact .contact-map iframe{
    border-radius: calc(var(--ui-radius-lg) - 2px) !important;
}
#contact .contact-card{
    border: 1px solid rgba(11,34,57,0.12) !important;
    padding: 20px !important;
}

/* ---------- BUTTON SYSTEM ---------- */
/* 공통 버튼형 링크들 */
.hero-section .hero-btn,
.feature-cta,
.btn-accent,
.range-cta-secondary,
#about .btn.btn-primary,
#contact .btn-contact{
    border-radius: var(--ui-radius-sm) !important;
    font-family: var(--font-sans) !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease !important;
    text-decoration: none !important;
}

/* Primary accent buttons */
.hero-section .hero-btn,
.feature-cta,
.btn-accent,
#contact .btn-contact:not(.ghost){
    background: var(--ui-accent) !important;
    color: var(--ui-ink) !important;
    border: 1px solid transparent !important;
    box-shadow: 0 8px 18px rgba(249, 183, 0, 0.18);
}

/* Secondary / outline buttons */
.range-cta-secondary,
#about .btn.btn-primary,
#contact .btn-contact.ghost{
    background: #fff !important;
    color: var(--ui-ink) !important;
    border: 1px solid rgba(10,35,66,0.16) !important;
    box-shadow: 0 6px 16px rgba(10,35,66,0.06);
}

.range-cta-row{
    margin-top: 34px !important;
}
.range-cta-row .col-md-12{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.btn-accent{
    padding: 12px 20px !important;
}
.range-cta-secondary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px !important;
}
#about .btn.btn-primary{
    padding: 10px 18px !important;
}
#contact .btn-contact{
    height: 44px !important;
}

.hero-section .hero-btn:hover,
.feature-cta:hover,
.btn-accent:hover,
.range-cta-secondary:hover,
#about .btn.btn-primary:hover,
#about .btn.btn-primary:focus,
#contact .btn-contact:hover{
    transform: translateY(-2px);
}

.hero-section .hero-btn:hover,
.feature-cta:hover,
.btn-accent:hover,
#contact .btn-contact:not(.ghost):hover{
    background: #ffd25a !important;
    color: var(--ui-ink) !important;
    box-shadow: 0 12px 24px rgba(249, 183, 0, 0.26) !important;
}

.range-cta-secondary:hover,
#about .btn.btn-primary:hover,
#about .btn.btn-primary:focus,
#contact .btn-contact.ghost:hover{
    border-color: rgba(10,35,66,0.28) !important;
    background: #f8fafc !important;
    color: var(--ui-ink) !important;
    box-shadow: 0 10px 22px rgba(10,35,66,0.10) !important;
}

#contact .btn-contact.ghost{
    background: rgba(255,255,255,0.04) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.16) !important;
    box-shadow: none !important;
}
#contact .btn-contact.ghost:hover{
    background: rgba(255,255,255,0.10) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.30) !important;
    box-shadow: none !important;
}

/* ---------- OUR DIFFERENCE ALIGNMENT ---------- */
.our-difference .difference-title{
    margin-top: 14px;
    margin-bottom: 0;
    color: var(--ui-ink);
    font-family: var(--font-sans) !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
}
.our-difference .row > [class*="col-"]{
    margin-bottom: 24px;
}

/* ---------- MOBILE ---------- */
@media (max-width: 991px){
    .about-section{
        padding: 62px 0 72px !important;
    }
    .feature-strip,
    .range-section,
    .manufacturers-section,
    #contact.contact-section{
        padding: 62px 0 72px !important;
    }
    #contact .contact-grid{
        gap: 20px !important;
    }
}
@media (max-width: 767px){
    .ms-section-head-title{
        font-size: 22px;
        letter-spacing: 0.03em;
    }
    .ms-section-bar{
        height: 24px;
    }
    .ms-section-head-desc{
        font-size: 14px;
        line-height: 1.65;
    }
    .about-image-placeholder{
        height: 220px;
        margin-top: 18px;
    }
    .range-card{
        min-height: unset;
        height: auto;
    }
    .feature-card,
    .maker-card,
    #contact .contact-card{
        border-radius: var(--ui-radius-md) !important;
    }
}

/* =========================================================
   V3 NAVBAR / TOPBAR / FOOTER SYSTEM UNIFY
   - topbar + navbar + footer + copyright + go-top
   - keeps existing HTML, overrides legacy Minimax styles
   ========================================================= */

:root{
    --ms-v3-accent: var(--ms-accent, #F9B700);
    --ms-v3-ink: #0A2342;
    --ms-v3-ink-2: #12344d;
    --ms-v3-muted: #6b7d8c;
    --ms-v3-topbar: #0A3A55;
    --ms-v3-nav-bg: rgba(255,255,255,0.95);
    --ms-v3-footer-1: #06283C;
    --ms-v3-footer-2: #041B2A;
    --ms-v3-footer-3: #031421;
    --ms-v3-radius: 14px;
    --ms-v3-shadow: 0 14px 34px rgba(8, 27, 45, 0.10);
    --ms-v3-topbar-h: 42px;
    --ms-v3-navbar-h: 78px;
}

/* anchor scroll offset refresh (topbar + navbar) */
:root{ --anchor-offset: 138px; }

/* ---------- TOPBAR ---------- */
.topbar.topbar-ms{
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    height: var(--ms-v3-topbar-h) !important;
    min-height: var(--ms-v3-topbar-h);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)),
        linear-gradient(90deg, #0A3A55 0%, #0B3F5E 42%, #0A334B 100%) !important;
    color: rgba(255,255,255,0.94) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 22px rgba(3, 20, 33, 0.16);
    z-index: 10000 !important;
    font-family: var(--font-sans, 'Noto Sans KR', sans-serif) !important;
    font-size: 13px !important;
    line-height: 1;
    letter-spacing: 0.01em;
}

.topbar.topbar-ms .container{
    height: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px 16px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.topbar.topbar-ms .info-item{
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.topbar.topbar-ms .info-item span{
    color: rgba(255,255,255,0.94) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2;
}

.topbar.topbar-ms .icon{
    width: 14px !important;
    height: 14px !important;
    margin-right: 0 !important;
    opacity: 0.95;
    filter: invert(1) brightness(1.12);
}

/* ---------- NAVBAR ---------- */
.navbar-default.navbar-fixed-top{
    top: var(--ms-v3-topbar-h) !important;
    border: none !important;
    background: var(--ms-v3-nav-bg) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 28px rgba(8,27,45,0.08) !important;
    border-bottom: 1px solid rgba(10,35,66,0.06) !important;
    margin: 0 !important;
    z-index: 9990 !important;
}

.navbar.navbar-default > .container{
    display: flex;
    align-items: center;
    min-height: var(--ms-v3-navbar-h);
}

.navbar-default .navbar-header{
    display: flex;
    align-items: center;
}

.navbar-default .navbar-brand.ms-brand{
    background: transparent !important;
    color: var(--ms-v3-ink) !important;
    height: auto !important;
    min-height: var(--ms-v3-navbar-h);
    line-height: calc(var(--ms-v3-navbar-h) - 2px) !important;
    margin: 0 !important;
    padding: 0 16px 0 18px !important;
    font-family: "Raleway", var(--font-sans, 'Noto Sans KR', sans-serif) !important;
    font-weight: 900 !important;
    font-size: 22px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
    position: relative;
    white-space: nowrap;
}

.navbar-default .navbar-brand.ms-brand::before{
    content: "";
    display: inline-block;
    width: 4px;
    height: 22px;
    border-radius: 999px;
    background: var(--ms-v3-accent);
    vertical-align: -4px;
    margin-right: 10px;
    box-shadow: 0 0 0 2px rgba(249,183,0,0.14);
}

.navbar-default .navbar-brand.ms-brand:hover,
.navbar-default .navbar-brand.ms-brand:focus{
    color: #061b33 !important;
    background: transparent !important;
    opacity: 1;
}

.navbar-default .navbar-collapse{
    border-top: none !important;
    box-shadow: none !important;
}

.main-menu.navbar-nav{
    display: flex;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
}

.navbar-default .navbar-nav > li{
    position: relative;
}

.navbar-default .navbar-nav > li > a{
    position: relative;
    border-right: none !important;
    color: var(--ms-v3-ink) !important;
    font-family: var(--font-sans, 'Noto Sans KR', sans-serif) !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    line-height: calc(var(--ms-v3-navbar-h) - 2px) !important;
    padding: 0 12px !important;
    text-transform: uppercase;
    background: transparent !important;
    transition: color .18s ease;
}

.navbar-default .navbar-nav > li > a::after{
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 16px;
    height: 2px;
    border-radius: 999px;
    background: var(--ms-v3-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .18s ease;
    opacity: .95;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{
    color: var(--ms-v3-ink) !important;
    background: transparent !important;
}

.navbar-default .navbar-nav > li > a:hover::after,
.navbar-default .navbar-nav > li > a:focus::after,
.navbar-default .navbar-nav > .active > a::after{
    transform: scaleX(1);
}

.main-menu.navbar-nav > li > a.external.lang-pill{
    line-height: 34px !important;
    margin-top: 22px;
    margin-bottom: 22px;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(10,35,66,0.10) !important;
    background: #fff !important;
    box-shadow: 0 6px 16px rgba(10,35,66,0.06);
    color: var(--ms-v3-ink) !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
}

.main-menu.navbar-nav > li > a.external.lang-pill::after{
    display: none;
}

.main-menu.navbar-nav > li > a.external.lang-pill:hover{
    border-color: rgba(249,183,0,0.40) !important;
    background: rgba(249,183,0,0.08) !important;
}

.navbar-default .navbar-toggle{
    border: 1px solid rgba(10,35,66,0.12) !important;
    border-radius: 10px !important;
    padding: 10px 9px !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    background: #fff !important;
}

.navbar-default .navbar-toggle .icon-bar{
    background: var(--ms-v3-ink) !important;
    width: 20px;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{
    background: rgba(249,183,0,0.08) !important;
    border-color: rgba(249,183,0,0.35) !important;
}

/* ---------- FOOTER + COPYRIGHT ---------- */
.section-separator{
    height: 1px !important;
    background:
      linear-gradient(90deg,
        rgba(10,35,66,0.00) 0%,
        rgba(10,35,66,0.08) 14%,
        rgba(249,183,0,0.45) 50%,
        rgba(10,35,66,0.08) 86%,
        rgba(10,35,66,0.00) 100%) !important;
}

.footer-section{
    position: relative;
    background:
        radial-gradient(80% 120% at 100% 0%, rgba(249,183,0,0.06) 0%, rgba(249,183,0,0.00) 65%),
        linear-gradient(180deg, var(--ms-v3-footer-1) 0%, var(--ms-v3-footer-2) 100%) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    padding: 58px 0 40px !important;
    overflow: hidden;
}

.footer-section::before{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(249,183,0,0), rgba(249,183,0,.95), rgba(249,183,0,0));
    opacity: .9;
}

.footer-grid{
    gap: 46px !important;
    align-items: start !important;
}

.footer-left{
    max-width: 440px !important;
}

.footer-brand{
    margin-bottom: 20px !important;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}

.footer-brand:hover{
    text-decoration: none;
    background: rgba(255,255,255,0.05);
}

.footer-brand-text{
    font-family: "Raleway", var(--font-sans, 'Noto Sans KR', sans-serif) !important;
    font-size: 17px !important;
    letter-spacing: 0.10em !important;
}

.footer-icon{
    fill: var(--ms-v3-accent) !important;
}

.footer-info-item{
    padding: 10px 12px;
    margin-bottom: 12px !important;
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
}

.footer-info-item p{
    color: rgba(255,255,255,0.90) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.footer-info-item a{
    color: #ffffff !important;
    text-decoration-color: rgba(249,183,0,0.55) !important;
    text-underline-offset: 3px;
}

.footer-service h3{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Raleway", var(--font-sans, 'Noto Sans KR', sans-serif) !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 12px !important;
}

.footer-service h3::before{
    content: "";
    width: 4px;
    height: 20px;
    border-radius: 999px;
    background: var(--ms-v3-accent);
    box-shadow: 0 0 0 2px rgba(249,183,0,0.14);
}

.footer-service p{
    color: rgba(255,255,255,0.86) !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
}

.footer-links{
    margin-top: 14px !important;
    gap: 10px 12px !important;
}

.footer-links a{
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.02);
    color: rgba(255,255,255,0.84) !important;
    text-decoration: none !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
    padding-bottom: 0 !important;
}

.footer-links a:hover{
    color: #fff !important;
    border-color: rgba(249,183,0,0.42) !important;
    background: rgba(249,183,0,0.08) !important;
}

.footer-cta{
    margin-top: 16px !important;
    gap: 10px !important;
}

.btn-footer,
.btn-footer-ghost{
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    font-family: var(--font-sans, 'Noto Sans KR', sans-serif) !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    font-weight: 800 !important;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease !important;
}

.btn-footer{
    background: var(--ms-v3-accent) !important;
    color: var(--ms-v3-ink) !important;
    box-shadow: 0 10px 22px rgba(249,183,0,0.24) !important;
}

.btn-footer:hover{
    background: #ffd154 !important;
    color: var(--ms-v3-ink) !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(249,183,0,0.26) !important;
}

.btn-footer-ghost{
    color: rgba(255,255,255,0.94) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    background: rgba(255,255,255,0.03) !important;
}

.btn-footer-ghost:hover{
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(249,183,0,0.38) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.footer-section + .container{
    display: none !important; /* old divider hr block */
}

.copyright{
    background: var(--ms-v3-footer-3) !important;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 16px 0 !important;
    text-align: center;
}

.copyright p{
    margin: 0 !important;
    color: rgba(255,255,255,0.72) !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    letter-spacing: 0.01em;
}

.copyright a{
    color: rgba(255,255,255,0.88) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.go-top{
    width: 52px !important;
    height: 52px !important;
    line-height: 50px !important;
    right: 22px !important;
    bottom: 22px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(10,35,66,0.10);
    background: #ffffff !important;
    color: var(--ms-v3-ink) !important;
    box-shadow: 0 12px 26px rgba(10,35,66,0.12) !important;
}

.go-top:hover{
    background: var(--ms-v3-accent) !important;
    color: var(--ms-v3-ink) !important;
}

/* ---------- responsive polish ---------- */
@media (max-width: 1199px){
    .navbar-default .navbar-nav > li > a{
        padding: 0 9px !important;
        font-size: 12.5px !important;
    }
    .navbar-default .navbar-nav > li > a::after{
        left: 9px;
        right: 9px;
    }
    .navbar-default .navbar-brand.ms-brand{
        font-size: 20px !important;
        letter-spacing: 0.05em !important;
    }
}

@media (max-width: 991px){
    :root{ --anchor-offset: 120px; }

    .topbar.topbar-ms{
        height: auto !important;
        min-height: 42px;
        padding: 4px 0;
    }
    .topbar.topbar-ms .container{
        justify-content: center !important;
        gap: 6px 8px !important;
    }
    .topbar.topbar-ms .info-item{
        min-height: 26px;
        padding: 3px 8px;
    }
    .topbar.topbar-ms .info-item span{
        font-size: 12px !important;
    }

    .navbar-default.navbar-fixed-top{
        top: 46px !important;
    }

    .navbar.navbar-default > .container{
        min-height: 68px;
        display: block;
    }

    .navbar-default .navbar-brand.ms-brand{
        min-height: 68px;
        line-height: 66px !important;
        font-size: 18px !important;
        padding-left: 14px !important;
    }

    .navbar-default .navbar-toggle{
        margin-top: 14px !important;
        margin-right: 15px !important;
    }

    .navbar-default .navbar-collapse{
        background: rgba(255,255,255,0.98) !important;
        border-top: 1px solid rgba(10,35,66,0.06) !important;
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
        box-shadow: 0 16px 28px rgba(10,35,66,0.08);
        padding: 8px 10px 12px;
    }

    .navbar-default .navbar-nav{
        float: none !important;
        display: block;
        margin: 0 !important;
    }

    .navbar-default .navbar-nav > li{
        float: none !important;
    }

    .navbar-default .navbar-nav > li > a{
        line-height: 20px !important;
        padding: 12px 12px !important;
        margin: 2px 0;
        border-radius: 10px;
        font-size: 13px !important;
    }

    .navbar-default .navbar-nav > li > a::after{
        left: 12px;
        right: auto;
        width: 22px;
        bottom: 8px;
        transform-origin: left center;
    }

    .main-menu.navbar-nav > li > a.external.lang-pill{
        margin: 6px 0 2px !important;
        line-height: 34px !important;
        display: inline-flex !important;
        width: auto;
    }

    .footer-section{
        padding: 48px 0 34px !important;
    }
}

@media (max-width: 575px){
    .topbar.topbar-ms .container{
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .topbar.topbar-ms .info-item{
        width: auto;
        max-width: 100%;
    }
    .topbar.topbar-ms .info-item span{
        font-size: 11.5px !important;
    }
    .navbar-default .navbar-brand.ms-brand{
        font-size: 16px !important;
        letter-spacing: 0.04em !important;
    }
    .footer-brand-text{
        font-size: 15px !important;
        letter-spacing: 0.08em !important;
    }
    .footer-service h3{
        font-size: 22px !important;
    }
    .btn-footer,
    .btn-footer-ghost{
        width: 100%;
    }
}


/* =========================================================
   V4 INTERACTION SYSTEM
   - language toggle (ENG/KOR)
   - active menu highlight (scroll spy polish)
   - navbar shrink on scroll
   ========================================================= */

.main-menu.navbar-nav > li > a.is-current{
    color: var(--ms-v3-ink) !important;
    background: rgba(249,183,0,0.08) !important;
    border-radius: 10px;
}

.navbar-default .navbar-nav > li > a.is-current::after,
.navbar-default .navbar-nav > li.active-manual > a::after{
    transform: scaleX(1) !important;
}

.main-menu.navbar-nav > li > a.external.lang-pill{
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px;
    user-select: none;
    cursor: pointer;
}

.main-menu.navbar-nav > li > a.external.lang-pill .lang-opt{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    line-height: 1;
    transition: all .16s ease;
    color: rgba(10,35,66,0.62);
    background: transparent;
}

.main-menu.navbar-nav > li > a.external.lang-pill .lang-sep{
    font-size: 10px;
    color: rgba(10,35,66,0.28);
}

.main-menu.navbar-nav > li > a.external.lang-pill[data-current-lang="en"] .lang-opt-en,
.main-menu.navbar-nav > li > a.external.lang-pill[data-current-lang="ko"] .lang-opt-ko{
    background: rgba(249,183,0,0.16);
    color: var(--ms-v3-ink);
    box-shadow: inset 0 0 0 1px rgba(249,183,0,0.25);
}

.main-menu.navbar-nav > li > a.external.lang-pill:hover .lang-opt{
    color: var(--ms-v3-ink);
}

.topbar.topbar-ms{
    transition: all .18s ease, background .18s ease;
}

.topbar.topbar-ms.is-shrink{
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    background: rgba(10,35,66,0.96) !important;
    box-shadow: 0 4px 12px rgba(10,35,66,0.12);
}

.topbar.topbar-ms.is-shrink .info-item{
    min-height: 28px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.navbar-default.navbar-fixed-top{
    transition: box-shadow .18s ease, background-color .18s ease, transform .18s ease, top .18s ease;
}

.navbar-default.navbar-fixed-top .navbar-brand.ms-brand{
    transition: all .18s ease !important;
}

.navbar-default.navbar-fixed-top .navbar-nav > li > a{
    transition: all .18s ease !important;
}

.navbar-default.navbar-fixed-top.is-shrink{
    box-shadow: 0 8px 24px rgba(10,35,66,0.10) !important;
    background: rgba(255,255,255,0.98) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.navbar-default.navbar-fixed-top.is-shrink .navbar-brand.ms-brand{
    min-height: 62px !important;
    line-height: 60px !important;
    font-size: 19px !important;
    letter-spacing: 0.07em !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.navbar-default.navbar-fixed-top.is-shrink .navbar-nav > li > a{
    line-height: 62px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.navbar-default.navbar-fixed-top.is-shrink .main-menu.navbar-nav > li > a.external.lang-pill{
    margin-top: 14px !important;
    margin-bottom: 14px !important;
}

body.ms-lang-ko{
    word-break: keep-all;
}

body.ms-lang-ko .hero-section .hero-text{
    font-family: "Noto Sans KR", "Raleway", sans-serif !important;
}

body.ms-lang-ko .hero-section .hero-text h1{
    letter-spacing: -0.02em !important;
}

@media (max-width: 991px){
    .navbar-default.navbar-fixed-top.is-shrink .navbar-brand.ms-brand{
        min-height: 64px !important;
        line-height: 62px !important;
        font-size: 18px !important;
    }

    .navbar-default.navbar-fixed-top.is-shrink .navbar-nav > li > a{
        line-height: 20px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .navbar-default.navbar-fixed-top.is-shrink .main-menu.navbar-nav > li > a.external.lang-pill{
        margin-top: 6px !important;
        margin-bottom: 2px !important;
    }

    .main-menu.navbar-nav > li > a.is-current{
        border-radius: 10px;
    }
}
/* =========================
   HERO FINAL FIX (center align)
   ========================= */

/* hero-text 자체를 중앙 기준으로 더 명확하게 */
.hero-section .hero-text {
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 작은 제목 = 회사명 */
.hero-section .hero-text .hero-eyebrow {
    font-size: 28px;
    margin: 0 0 12px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    line-height: 1.25;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.85),
        0 6px 22px rgba(0, 0, 0, 0.55);
}

/* 큰 제목 */
.hero-section .hero-text h1 {
    text-align: center;
    margin: 0 0 18px;
    line-height: 1.08;
}

/* 본문 설명 */
.hero-section .hero-text p {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 18px;
}

/* 버튼 줄 = 중앙 정렬 */
.hero-section .hero-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;   /* ✅ 핵심 */
    gap: 12px;
    margin-top: 10px;
}

/* 기본 버튼(노랑) - 기존 hero-btn 재사용 */
.hero-section .hero-actions .hero-btn {
    margin-top: 0;
    padding: 13px 24px;
    min-width: 180px;
    border-radius: 14px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F9B700;
    color: #0A2342;
    border: 1px solid #F9B700;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

/* 보조 버튼(아웃라인/반투명) */
.hero-section .hero-actions .hero-btn-secondary {
    padding: 13px 24px;
    min-width: 220px;
    border-radius: 14px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.2s ease;
}

.hero-section .hero-actions .hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.70);
    color: #fff;
    text-decoration: none;
}

/* 칩 줄 = 중앙 정렬 */
.hero-section .hero-trust-chips {
    width: 100%;
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;   /* ✅ 핵심 */
    gap: 10px;
}

/* 칩 모양 */
.hero-section .hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(10, 35, 66, 0.46);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.96);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.hero-section .hero-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #F9B700;
    box-shadow: 0 0 0 3px rgba(249, 183, 0, 0.14);
    flex: 0 0 auto;
}

/* 모바일 */
@media (max-width: 767px) {
    .hero-section .hero-text .hero-eyebrow {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .hero-section .hero-text h1 {
        font-size: 38px !important;
    }

    .hero-section .hero-text p {
        font-size: 16px !important;
        line-height: 1.55;
        max-width: 92%;
    }

    .hero-section .hero-actions {
        gap: 10px;
    }

    .hero-section .hero-actions .hero-btn,
    .hero-section .hero-actions .hero-btn-secondary {
        width: 100%;
        max-width: 320px;
    }

    .hero-section .hero-trust-chips {
        gap: 8px;
    }

    .hero-section .hero-chip {
        font-size: 12px;
        padding: 6px 10px;
    }
}
/* =========================================================
   FINAL UNIFY + FIX PATCH (append at end)
   - section title unify (remove duplicate thin line)
   - contact text visibility on white card
   - topbar size slightly larger
   - range card alignment / equal height
   ========================================================= */

/* =========================================================
   1) SECTION TITLE UNIFY (OUR DIFFERENCE / ABOUT / RANGE / MANUFACTURERS / CONTACT)
   ========================================================= */

/* 공통 제목 컴포넌트 통일 */
#our-difference .ms-section-title-wrap,
#about .ms-section-title-wrap,
#range .ms-section-title-wrap,
#manufacturers .ms-section-title-wrap,
#contact .ms-section-title-wrap{
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    max-width: 100%;
}

/* 노란 세로바 (굵고 짧은 바)만 유지 */
#our-difference .ms-section-bar,
#about .ms-section-bar,
#range .ms-section-bar,
#manufacturers .ms-section-bar,
#contact .ms-section-bar{
    display: inline-block !important;
    width: 4px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: var(--ms-accent, #F9B700) !important;
    flex: 0 0 4px !important;
    margin: 0 !important;
}

/* 제목 텍스트 통일 + "기존 템플릿 border-left" 제거 */
#our-difference .ms-section-head-title,
#about .ms-section-head-title,
#range .ms-section-head-title,
#manufacturers .ms-section-head-title,
#contact .ms-section-head-title{
    margin: 0 !important;
    padding: 0 !important;
    border-left: none !important;      /* ✅ OUR DIFFERENCE 두번째 얇은 줄 원인 제거 */
    border-right: none !important;
    color: #0A2342 !important;
    font-family: var(--font-sans, "Raleway","Noto Sans KR",sans-serif) !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.12 !important;
    text-transform: uppercase;
    display: inline-block !important;
}

/* #service h2 기본 템플릿 룰이 OUR DIFFERENCE 제목에 먹는 것 강제 차단 */
#service h2.ms-section-head-title{
    border-left: none !important;
    padding: 0 !important;
}

/* 혹시 legacy 장식(span/::before)이 남아있으면 숨김 */
#our-difference .section-title-border,
#about .section-title-border,
#range .section-title-border,
#manufacturers .section-title-border,
#contact .section-title-border{
    display: none !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#our-difference .ms-section-title-wrap::before,
#our-difference .ms-section-head-title::before,
#about .ms-section-title-wrap::before,
#about .ms-section-head-title::before,
#range .ms-section-title-wrap::before,
#range .ms-section-head-title::before,
#manufacturers .ms-section-title-wrap::before,
#manufacturers .ms-section-head-title::before,
#contact .ms-section-title-wrap::before,
#contact .ms-section-head-title::before{
    content: none !important;
    display: none !important;
}

/* 제목 설명문 톤 통일 */
#our-difference .ms-section-head-desc,
#about .ms-section-head-desc,
#range .ms-section-head-desc,
#manufacturers .ms-section-head-desc,
#contact .ms-section-head-desc{
    color: rgba(10,35,66,0.72) !important;
    font-family: var(--font-sans, "Raleway","Noto Sans KR",sans-serif) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

/* OUR DIFFERENCE 제목 아래 간격 정리 */
#our-difference .ms-section-head{
    margin-bottom: 30px !important;
}


/* =========================================================
   2) CONTACT TEXT VISIBILITY FIX (white card 기준)
   ========================================================= */

/* 카드 톤을 흰 카드로 확정 */
#contact .contact-card{
    background: #ffffff !important;
    color: #0A2342 !important;
    border: 1px solid rgba(10,35,66,0.12) !important;
    box-shadow: 0 14px 34px rgba(8,27,45,0.10) !important;
}

/* 카드 상단 */
#contact .contact-card-top{
    border-bottom: 1px solid rgba(10,35,66,0.06);
    padding-bottom: 10px;
    margin-bottom: 12px !important;
}

#contact .contact-card h3{
    color: #0A2342 !important;
}

#contact .contact-badge{
    color: #0A2342 !important;
    background: rgba(249,183,0,0.12) !important;
    border: 1px solid rgba(249,183,0,0.24) !important;
    font-weight: 800 !important;
}

/* 아이콘 + 텍스트 */
#contact .contact-item{
    align-items: start !important;
}

#contact .contact-icon{
    opacity: 1 !important;
    filter: none !important;
}

#contact .contact-text strong{
    color: #0A2342 !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

#contact .contact-text p{
    color: rgba(10,35,66,0.82) !important;
    opacity: 1 !important;
    line-height: 1.6 !important;
}

#contact .contact-text a{
    color: #0A2342 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(10,35,66,0.20) !important;
}

#contact .contact-text a:hover{
    color: #0A2342 !important;
    border-bottom-color: rgba(10,35,66,0.45) !important;
}

/* 버튼 (흰 카드에서도 선명하게) */
#contact .btn-contact{
    border-radius: 12px !important;
    font-weight: 800 !important;
}

#contact .btn-contact:not(.ghost){
    background: var(--ms-accent, #F9B700) !important;
    color: #0A2342 !important;
    border: 1px solid transparent !important;
    box-shadow: 0 8px 18px rgba(249,183,0,0.18) !important;
}

#contact .btn-contact:not(.ghost):hover{
    background: #ffd25a !important;
    color: #0A2342 !important;
}

/* ghost 버튼이 다시 흰글자로 덮이는 규칙 방지 */
#contact .btn-contact.ghost{
    background: #fff !important;
    color: #0A2342 !important;
    border: 1px solid rgba(10,35,66,0.16) !important;
    box-shadow: 0 6px 16px rgba(10,35,66,0.06) !important;
}
#contact .btn-contact.ghost:hover{
    background: #f8fafc !important;
    color: #0A2342 !important;
    border-color: rgba(10,35,66,0.28) !important;
    box-shadow: 0 10px 22px rgba(10,35,66,0.10) !important;
}

#contact .contact-note{
    color: rgba(10,35,66,0.66) !important;
    opacity: 1 !important;
}

/* 모바일에서 줄바꿈 안정화 */
@media (max-width: 991px){
    #contact .contact-text p,
    #contact .contact-text a{
        word-break: break-word;
    }
}


/* =========================================================
   3) RANGE CARD ALIGNMENT / EQUAL HEIGHT FIX
   (아까 말한 "한개 위치 안맞는 느낌" 완화)
   ========================================================= */

#range .range-cards{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

#range .range-cards > [class*="col-"]{
    float: none !important;   /* bootstrap float 해제 */
    display: flex !important;
}

#range .range-cards .range-card{
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

#range .range-cards .range-card p{
    flex-grow: 1;
}

/* 카드 하단 CTA 줄 정렬 */
#range .range-cta-row .col-md-12{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* (선택) 카드 높이/행간 미세 통일 */
#range .range-card h4{
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
}
#range .range-card p{
    line-height: 1.6 !important;
}


/* =========================================================
   4) TOPBAR SIZE UP (slightly bigger)
   ========================================================= */

/* 상단바 높이 살짝 증가 */
:root{
    --ms-v3-topbar-h: 44px;   /* 기존 42px -> 44px */
    --anchor-offset: 140px;   /* 스크롤 오프셋 살짝 보정 */
}

.topbar.topbar-ms{
    font-size: 14px !important;
}

.topbar.topbar-ms .container{
    gap: 10px 18px !important;
}

.topbar.topbar-ms .info-item{
    min-height: 30px !important;
    padding: 4px 12px !important;
    gap: 8px !important;
}

.topbar.topbar-ms .info-item span{
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.01em !important;
}

.topbar.topbar-ms .icon{
    width: 15px !important;
    height: 15px !important;
}

/* 모바일은 너무 커 보이지 않게 */
@media (max-width: 767px){
    .topbar.topbar-ms{
        font-size: 12.5px !important;
    }
    .topbar.topbar-ms .info-item{
        min-height: 28px !important;
        padding: 3px 9px !important;
    }
    .topbar.topbar-ms .info-item span{
        font-size: 12.5px !important;
        font-weight: 600 !important;
    }
    .topbar.topbar-ms .icon{
        width: 13px !important;
        height: 13px !important;
    }
}


/* =========================================================
   5) EXTRA SAFETY: OUR DIFFERENCE title double-line only
   (혹시 위 규칙보다 더 강한 구버전 규칙이 있으면 최종 차단)
   ========================================================= */
#our-difference h2.ms-section-head-title{
    border-left: none !important;
    border-right: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* PRODUCT RANGE subtitle center fix */
#range .ms-section-head,
#range .ms-section-head.ms-center{
    text-align: center !important;
}

#range .ms-section-head-desc,
#range .range-subtitle{
    display: block !important;
    width: 100% !important;
    max-width: 860px !important;
    margin: 10px auto 0 !important;   /* 가운데 */
    text-align: center !important;     /* 글자 가운데 */
    line-height: 1.65 !important;
}

/* 혹시 <br> 들어가도 줄 정렬 유지 */
#range .ms-section-head-desc br,
#range .range-subtitle br{
    content: "";
}

/* =========================================================
   HOME HERO: background tone down (brightness/saturation)
   - keeps existing layout, only reduces background intensity
   ========================================================= */
.hero-section{
    position: relative;
}

.hero-section::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* fallback dark overlay */
    background: rgba(0, 0, 0, 0.14);
    /* tone down backdrop (supported browsers) */
    backdrop-filter: brightness(0.86) saturate(0.86);
    -webkit-backdrop-filter: brightness(0.86) saturate(0.86);
}

/* ensure hero text stays above tone overlay */
.hero-section .hero-text{
    position: relative;
    z-index: 2;
}
/* TOPBAR DARKER (final tiny tweak) */
.topbar.topbar-ms{
    background: linear-gradient(180deg, #08314A 0%, #051F2F 100%) !important;
}
.ms-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: -10px; /* ← 왼쪽 땡김 */
}

.logo-img {
    height: 34px;
}

.brand-text {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1px;
}

.brand-bar {
    width: 3px;
    height: 20px;
    background: #F9B700;
    margin-left: 6px;
}
/* 1. 로고 사이즈를 높이에 꽉 차게 조절하고 왼쪽 여백 제거 */
.navbar-default .navbar-brand {
    padding: 0 15px;      /* 좌우 여백 조정 */
    height: 80px;         /* 네비게이션 높이에 맞춤 (기존 높이 확인 필요) */
    display: flex;
    align-items: center;
}

.navbar-default .navbar-brand img {
    height: 60px;         /* 🔥 로고 크기를 더 키움 */
    width: auto;
    margin-right: 0;      /* 오른쪽 마진 제거 */
}

/* 2. Home 왼쪽 빈 공간 없애기 (컨테이너 여백 제거) */
.navbar-default .container {
    padding-left: 0;      /* 컨테이너 자체의 왼쪽 여백 제거 */
    margin-left: 10px;    /* 화면 끝에 너무 붙지 않게 약간만 조절 */
}

/* 3. 하단 테두리 제거 */
.navbar-default {
    border-bottom: none !important; /* 하단 선 제거 */
    box-shadow: none;               /* 그림자가 있다면 함께 제거 */
}

/* 4. 메뉴 리스트를 왼쪽으로 밀착 */
.navbar-nav {
    margin-left: 0 !important;
}
/* 1. 네비게이션 바 하단 선 제거 및 배경 정리 */
.navbar-default {
    background-color: #ffffff;
    border: none !important;      /* 모든 테두리 제거 */
    border-bottom: none !important; 
    box-shadow: none;
    margin-bottom: 0;
}

/* 2. 로고 이미지 크기 키우기 */
.navbar-default .navbar-brand img {
    height: 65px !important;    /* 🔥 로고를 기존보다 훨씬 키움 */
    width: auto;
    margin-top: -5px;           /* 세로 중앙 정렬 보정 */
    transition: all 0.3s ease;
}

/* 3. ORBIS MARINE 글자체 굵고 크게 (왼쪽 노란 바 포함) */
.navbar-default .navbar-brand {
    font-family: 'Raleway', sans-serif; /* 굵직한 폰트 적용 */
    font-size: 28px !important;         /* 🔥 글자 크기 대폭 확대 */
    font-weight: 800 !important;         /* 🔥 아주 굵게 */
    color: #333 !important;
    display: flex;
    align-items: center;
    height: 80px;
    padding-left: 15px;                 /* 왼쪽 여백 */
    
    /* 기존 왼쪽 바를 오른쪽으로 이동하여 글자 뒤에 배치 */
    border-left: none !important;       /* 왼쪽 선 삭제 */
    border-right: 5px solid #f2af00;    /* 🔥 오른쪽에 굵은 노란색 바 생성 */
    padding-right: 20px;                /* 글자와 노란 바 사이 간격 */
    margin-right: 20px;                 /* 노란 바와 메뉴 사이 간격 */
}

/* 4. Home 왼쪽 빈 공간 없애기 */
.navbar-default .container {
    padding-left: 0 !important;
    margin-left: 5% !important;         /* 화면 끝에서 살짝만 띄움 */
    width: 95%;                         /* 컨테이너 너비 확장 */
}

/* 5. 메뉴(Home, About...) 위치 조정 */
.navbar-nav {
    margin-left: 0 !important;
}

.navbar-nav > li > a {
    font-weight: 700 !important;        /* 메뉴 글씨도 조금 더 선명하게 */
}
/* =========================================================
   최종 수정: 로고 확대 / 브랜드 강조 / 노란바 우측 이동
   ========================================================= */

/* 1. 네비게이션 바 하단 및 주변 모든 선 제거 */
.navbar-default {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background-color: #fff !important;
}

/* 2. 브랜드 영역 (로고 + 텍스트 + 노란바) */
.navbar-default .navbar-brand {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    padding: 10px 20px 10px 0 !important; /* 왼쪽 여백 0으로 밀착 */
    
    /* 기존 왼쪽 노란바 제거 */
    border-left: none !important;
    
    /* 🔥 로고와 글자 오른쪽에 노란바 생성 */
    border-right: 5px solid #f2af00 !important; 
    margin-right: 25px !important; /* 메뉴와의 간격 */
    
    /* 글자 스타일: 굵고 크게 */
    font-size: 32px !important;    /* 글자 크기 대폭 확대 */
    font-weight: 900 !important;    /* 가장 굵게 */
    color: #222 !important;
    font-family: 'Raleway', sans-serif !important;
    letter-spacing: -0.5px !important;
}

/* 3. 로고 이미지 사이즈 확대 */
.navbar-default .navbar-brand img {
    height: 75px !important;       /* 🔥 로고를 시원하게 키움 */
    width: auto !important;
    margin-right: 15px !important; /* 로고와 글자 사이 간격 */
    max-height: none !important;
}

/* 4. 기존에 있던 우측 노란 선들 제거 */
.navbar-default .navbar-nav > li {
    border-right: none !important; /* 메뉴 사이 선 제거 */
}

.main-menu.navbar-nav {
    border-right: none !important; /* 전체 메뉴 오른쪽 끝 선 제거 */
}

/* 5. Home 왼쪽 빈 공간 완전 제거 */
.navbar-default .container {
    padding-left: 0 !important;
    margin-left: 20px !important;  /* 전체적으로 왼쪽으로 바짝 붙임 */
    width: 98% !important;
}

/* 6. 메뉴 글자 스타일 조정 (선택사항) */
.navbar-default .navbar-nav > li > a {
    font-weight: 700 !important;
    font-size: 15px !important;
}
/* =========================================================
   요청하신 로고 확대 & 노란바 우측 이동 최종 반영
   ========================================================= */

/* 1. 네비게이션 하단 테두리 및 기존 우측 막대기들 제거 */
.navbar-default, 
.navbar-default .navbar-nav > li,
.main-menu.navbar-nav {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* 2. 브랜드 영역 (로고 + 글자 + 옮겨진 노란바) */
.navbar-default .navbar-brand {
    display: flex !important;
    align-items: center !important;
    height: 100px !important;    /* 🔥 빨간 사각형 높이에 맞춰 확보 */
    padding-left: 0 !important;   /* 왼쪽 빈 공간 제거 */
    
    /* 왼쪽 막대기를 없애고 오른쪽으로 이동 */
    border-left: none !important;
    border-right: 6px solid #f2af00 !important; /* 🔥 굵은 노란색 바를 오른쪽에 배치 */
    
    padding-right: 25px !important; /* 글자와 노란 바 사이 간격 */
    margin-right: 25px !important;  /* 노란 바와 메뉴(Home) 사이 간격 */
    
    /* ORBIS MARINE 텍스트 스타일 */
    font-size: 34px !important;     /* 🔥 글자 크기 대폭 확대 */
    font-weight: 900 !important;     /* 아주 굵게 */
    color: #222 !important;
    font-family: 'Raleway', sans-serif !important;
    text-transform: uppercase;
}

/* 3. 로고 이미지 사이즈 확대 (빨간 사각형 크기) */
.navbar-default .navbar-brand img {
    height: 85px !important;        /* 🔥 로고를 빨간 사각형만큼 키움 */
    width: auto !important;
    margin-right: 15px !important;  /* 로고와 글자 사이 간격 */
    max-height: none !important;
}

/* 4. Home 메뉴 등 컨테이너 왼쪽 밀착 */
.navbar-default .container {
    padding-left: 15px !important;
    margin-left: 0 !important;
    width: 100% !important;
}

/* 5. 메뉴 글자들도 로고 높이에 맞춰 세로 중앙 정렬 */
.navbar-default .navbar-nav > li > a {
    line-height: 100px !important;  /* 네비게이션 높이와 통일 */
    font-weight: 700 !important;
}
/* [로고 크게 + 글자 크게 + 노란바 이동] 통합본 */

/* 1. 모든 선 초기화 (오른쪽 막대기 제거) */
.navbar-default, .navbar-nav, .navbar-nav > li {
    border: none !important;
}

/* 2. 브랜드 로고 영역 (높이 키우고 오른쪽 바 생성) */
.navbar-default .navbar-brand {
    display: flex !important;
    align-items: center !important;
    height: 100px !important; /* 빨간 사각형만큼 높이 확보 */
    padding: 0 20px 0 0 !important; /* 왼쪽 여백 제거 */
    
    /* 🔥 왼쪽 막대기 대신 오른쪽에 굵은 노란바 배치 */
    border-right: 6px solid #f2af00 !important;
    margin-right: 20px !important;
    
    /* ORBIS MARINE 텍스트 굵고 크게 */
    font-size: 32px !important;
    font-weight: 900 !important;
    color: #222 !important;
}

/* 3. 로고 이미지 사이즈 (이미지 가이드 맞춤) */
.navbar-default .navbar-brand img {
    height: 80px !important; /* 🔥 로고를 시원하게 확대 */
    width: auto !important;
    max-height: none !important;
}

/* 4. Home 메뉴 등 전체 레이아웃 정렬 */
.navbar-default .container {
    margin-left: 20px !important;
    width: 98% !important;
}

.navbar-nav > li > a {
    line-height: 100px !important; /* 네비게이션 높이에 맞춤 */
}
/* =========================================================
   FINAL NAVBAR LOGO FIX
   - 흰색 네비 배경 높이 키우지 않음
   - 로고 이미지만 확대
   - ORBIS MARINE 글자 확대/굵게
   - 중복 노란 막대 제거
   - 노란 바는 ORBIS MARINE 오른쪽에 1개만 유지
   ========================================================= */

@media (min-width: 768px){

    /* 네비 전체 높이는 기존 V3 높이 유지 */
    :root{
        --ms-v3-navbar-h: 78px;
    }

    .navbar.navbar-default > .container{
        min-height: var(--ms-v3-navbar-h) !important;
        display: flex !important;
        align-items: center !important;
    }

    .navbar-default .navbar-header{
        height: var(--ms-v3-navbar-h) !important;
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
    }

    .navbar-default .navbar-brand,
    .navbar-default .navbar-brand.ms-brand{
        height: var(--ms-v3-navbar-h) !important;
        min-height: var(--ms-v3-navbar-h) !important;
        line-height: normal !important;

        display: flex !important;
        align-items: center !important;
        gap: 12px !important;

        padding: 0 14px 0 0 !important;
        margin: 0 12px 0 0 !important;

        background: transparent !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;

        font-size: 25px !important;
        font-weight: 900 !important;
        letter-spacing: 0.08em !important;
        white-space: nowrap !important;
    }

    /* 기존 왼쪽/오른쪽에 생기던 노란 가짜 막대 제거 */
    .navbar-default .navbar-brand.ms-brand::before,
    .navbar-default .navbar-brand.ms-brand::after{
        display: none !important;
        content: none !important;
    }

    /* 로고만 키움: 흰 배경 높이는 안 키움 */
    .navbar-default .navbar-brand img,
    .navbar-default .navbar-brand.ms-brand img,
    .navbar-default .navbar-brand .logo-img,
    .navbar-default .navbar-brand.ms-brand .logo-img{
        height: 74px !important;
        max-height: 74px !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 6px 0 0 !important;
        object-fit: contain !important;
        opacity: 1 !important;
    }

    /* ORBIS MARINE 글자 크게 + 굵게 */
    .navbar-default .navbar-brand .brand-text,
    .navbar-default .navbar-brand.ms-brand .brand-text{
        font-family: "Raleway", var(--font-sans), sans-serif !important;
        font-size: 25px !important;
        font-weight: 900 !important;
        letter-spacing: 0.08em !important;
        line-height: 1 !important;
        color: #0A2342 !important;
        white-space: nowrap !important;
    }

    /* 노란 바는 글자 오른쪽에 1개만 */
    .navbar-default .navbar-brand .brand-bar,
    .navbar-default .navbar-brand.ms-brand .brand-bar{
        display: block !important;
        order: 3 !important;
        width: 4px !important;
        height: 34px !important;
        flex: 0 0 4px !important;
        margin-left: 8px !important;
        margin-right: 2px !important;
        border-radius: 999px !important;
        background: #F9B700 !important;
    }

    /* 이전 코드에서 생긴 우측 노란 선 강제 제거 */
    .navbar-default .navbar-brand{
        border-right: none !important;
    }
}

/* 스크롤 내려서 navbar 줄어들 때 로고도 같이 줄임 */
@media (min-width: 768px){

    .navbar-default.navbar-fixed-top.is-shrink .navbar-brand.ms-brand{
        height: 62px !important;
        min-height: 62px !important;
        line-height: normal !important;
        font-size: 21px !important;
    }

    .navbar-default.navbar-fixed-top.is-shrink .navbar-brand.ms-brand img,
    .navbar-default.navbar-fixed-top.is-shrink .navbar-brand.ms-brand .logo-img{
        height: 56px !important;
        max-height: 56px !important;
    }

    .navbar-default.navbar-fixed-top.is-shrink .navbar-brand.ms-brand .brand-text{
        font-size: 21px !important;
    }

    .navbar-default.navbar-fixed-top.is-shrink .navbar-brand.ms-brand .brand-bar{
        height: 28px !important;
    }
}

/* 태블릿 폭에서 메뉴 밀림 방지 */
@media (min-width: 768px) and (max-width: 1199px){

    .navbar-default .navbar-brand img,
    .navbar-default .navbar-brand.ms-brand img,
    .navbar-default .navbar-brand .logo-img,
    .navbar-default .navbar-brand.ms-brand .logo-img{
        height: 66px !important;
        max-height: 66px !important;
    }

    .navbar-default .navbar-brand .brand-text,
    .navbar-default .navbar-brand.ms-brand .brand-text{
        font-size: 22px !important;
        letter-spacing: 0.06em !important;
    }

    .navbar-default .navbar-brand .brand-bar,
    .navbar-default .navbar-brand.ms-brand .brand-bar{
        height: 30px !important;
        margin-left: 6px !important;
    }
}
/* =========================================================
   BRAND BALANCE FIX
   - 이전 느낌 유지
   - 로고와 ORBIS MARINE만 더 선명하게
   - 흰색 navbar 배경 높이는 키우지 않음
   ========================================================= */

@media (min-width: 768px) {

    .navbar-default .navbar-brand.ms-brand {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;

        height: var(--ms-v3-navbar-h) !important;
        min-height: var(--ms-v3-navbar-h) !important;
        line-height: 1 !important;

        padding: 0 20px 0 10px !important;
        margin: 0 24px 0 0 !important;

        background: transparent !important;
        border: none !important;
        box-shadow: none !important;

        font-family: "Raleway", "Noto Sans KR", sans-serif !important;
        font-size: 26px !important;
        font-weight: 900 !important;
        letter-spacing: 0.07em !important;
        color: #0A2342 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    /* 기존 왼쪽 노란 바 제거 */
    .navbar-default .navbar-brand.ms-brand::before {
        display: none !important;
        content: none !important;
    }

    /* 오른쪽 노란 바 */
    .navbar-default .navbar-brand.ms-brand::after {
        content: "" !important;
        display: inline-block !important;

        width: 4px !important;
        height: 40px !important;
        margin-left: 4px !important;

        border-radius: 999px !important;
        background: #f2af00 !important;
        opacity: 0.95 !important;
    }

    /* 로고만 크게 */
    .navbar-default .navbar-brand.ms-brand img,
    .navbar-default .navbar-brand.ms-brand .logo-img {
        height: 68px !important;
        max-height: 68px !important;
        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        object-fit: contain !important;
        opacity: 1 !important;
        transition: none !important;
    }

    /* 로고에 마우스 올렸을 때 흐려지는 것 방지 */
    .navbar-default .navbar-brand.ms-brand img:hover,
    .navbar-default .navbar-brand.ms-brand .logo-img:hover {
        opacity: 1 !important;
    }

    .navbar-default .navbar-brand.ms-brand .brand-text {
        font-family: "Raleway", "Noto Sans KR", sans-serif !important;
        font-size: 26px !important;
        font-weight: 900 !important;
        letter-spacing: 0.07em !important;
        line-height: 1 !important;
        color: #0A2342 !important;
        white-space: nowrap !important;
    }
}
/* =========================================================
   BRAND YELLOW BAR FIX
   - 노란 바 2개 생기는 문제 해결
   - ORBIS MARINE 오른쪽에 1개만 표시
   ========================================================= */

@media (min-width: 768px) {

    /* 기존 왼쪽 노란 바 제거 */
    .navbar-default .navbar-brand.ms-brand::before {
        display: none !important;
        content: none !important;
    }

    /* HTML 안에 있는 brand-bar가 있으면 제거 */
    .navbar-default .navbar-brand.ms-brand .brand-bar,
    .navbar-default .navbar-brand .brand-bar {
        display: none !important;
    }

    /* 예전 코드의 border-right 노란 선 제거 */
    .navbar-default .navbar-brand,
    .navbar-default .navbar-brand.ms-brand {
        border-left: none !important;
        border-right: none !important;
    }

    /* 노란 바는 이것 하나만 사용 */
    .navbar-default .navbar-brand.ms-brand::after {
        content: "" !important;
        display: inline-block !important;

        width: 4px !important;
        height: 40px !important;
        margin-left: 6px !important;

        border-radius: 999px !important;
        background: #f2af00 !important;
        opacity: 0.95 !important;
        box-shadow: none !important;
    }
}
/* =========================================================
   LOGO SIZE UP - fill more of the logo area
   - 흰 navbar 배경 높이는 그대로
   - 로고만 더 크게 보이게
   ========================================================= */

@media (min-width: 768px) {

    .navbar-default .navbar-brand.ms-brand {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 0 18px 0 8px !important;
    }

    .navbar-default .navbar-brand.ms-brand img,
    .navbar-default .navbar-brand.ms-brand .logo-img {
        height: 100px !important;
        max-height: 100px !important;
        width: auto !important;
        max-width: none !important;
        object-fit: contain !important;
        display: block !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .navbar-default .navbar-brand.ms-brand img:hover,
    .navbar-default .navbar-brand.ms-brand .logo-img:hover {
        opacity: 1 !important;
    }
}
/* =========================================================
   FIX: KEEP BRAND SIZE ON SCROLL
   - OUR DIFFERENCE / ABOUT / RANGE 클릭 후
   - is-shrink 상태에서도 로고와 ORBIS MARINE 크기 유지
   ========================================================= */

@media (min-width: 768px) {

    .navbar-default.navbar-fixed-top.is-shrink .navbar-brand.ms-brand {
        height: var(--ms-v3-navbar-h) !important;
        min-height: var(--ms-v3-navbar-h) !important;
        line-height: 1 !important;

        display: flex !important;
        align-items: center !important;
        gap: 15px !important;

        padding: 0 20px 0 10px !important;
        margin: 0 24px 0 0 !important;

        font-size: 26px !important;
        font-weight: 900 !important;
        letter-spacing: 0.07em !important;
        color: #0A2342 !important;
    }

    .navbar-default.navbar-fixed-top.is-shrink .navbar-brand.ms-brand img,
    .navbar-default.navbar-fixed-top.is-shrink .navbar-brand.ms-brand .logo-img {
        height: 74px !important;
        max-height: 74px !important;
        width: auto !important;
        max-width: none !important;
        object-fit: contain !important;
        opacity: 1 !important;
    }

    .navbar-default.navbar-fixed-top.is-shrink .navbar-brand.ms-brand .brand-text {
        font-size: 26px !important;
        font-weight: 900 !important;
        letter-spacing: 0.07em !important;
        line-height: 1 !important;
        color: #0A2342 !important;
    }

    .navbar-default.navbar-fixed-top.is-shrink .navbar-brand.ms-brand::before {
        display: none !important;
        content: none !important;
    }

    .navbar-default.navbar-fixed-top.is-shrink .navbar-brand.ms-brand::after {
        content: "" !important;
        display: inline-block !important;
        width: 4px !important;
        height: 40px !important;
        margin-left: 4px !important;
        border-radius: 999px !important;
        background: #f2af00 !important;
        opacity: 0.95 !important;
    }

    .navbar-default.navbar-fixed-top.is-shrink .navbar-brand.ms-brand .brand-bar {
        display: none !important;
    }
}
/* =========================================================
   HERO TEXT ONE-LINE FIX
   - PC에서 heroP 각 줄이 중간에 꺾이지 않게 폭 확장
   - 모바일에서는 다시 자연스럽게 줄바꿈
   ========================================================= */

@media (min-width: 992px) {
    .hero-section .hero-text p {
        width: 100% !important;
        max-width: 1180px !important;
        white-space: nowrap !important;
        text-align: center !important;
        font-size: 21px !important;
        line-height: 1.55 !important;
    }
}

@media (max-width: 991px) {
    .hero-section .hero-text p {
        max-width: 92% !important;
        white-space: normal !important;
    }
}
/* =========================================================
   MENU ACTIVE UNDERLINE POSITION FIX
   - HOME / OUR DIFFERENCE / ABOUT / RANGE / CONTACT
   - 메뉴 아래 노란 밑줄 위치를 모두 동일하게 맞춤
   ========================================================= */

@media (min-width: 768px) {

    /* 모든 메뉴 링크의 기준 박스 통일 */
    .main-menu.navbar-nav > li > a,
    .navbar-default .navbar-nav > li > a {
        position: relative !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        height: 78px !important;
        line-height: 1 !important;

        padding: 0 18px !important;
        margin: 0 2px !important;

        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    /* active 배경도 HOME / 다른 메뉴 동일하게 */
    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus,
    .main-menu.navbar-nav > li > a.is-current,
    .main-menu.navbar-nav > li.active-manual > a {
        background: rgba(249, 183, 0, 0.08) !important;
        color: #0A2342 !important;
        border-radius: 12px !important;
    }

    /* 밑줄 기본값 통일 */
    .navbar-default .navbar-nav > li > a::after,
    .main-menu.navbar-nav > li > a::after {
        content: "" !important;
        position: absolute !important;

        left: 14px !important;
        right: 14px !important;
        width: auto !important;

        /* 핵심: 숫자가 작을수록 밑줄이 아래로 내려감 */
        bottom: 14px !important;

        height: 2px !important;
        border-radius: 999px !important;
        background: #f2af00 !important;

        transform: scaleX(0) !important;
        transform-origin: center !important;
        opacity: 0.95 !important;
    }

    /* HOME active / 스크롤 active 모두 같은 방식으로 밑줄 켜기 */
    .navbar-default .navbar-nav > .active > a::after,
    .navbar-default .navbar-nav > li > a.is-current::after,
    .navbar-default .navbar-nav > li.active-manual > a::after,
    .main-menu.navbar-nav > li > a.is-current::after,
    .main-menu.navbar-nav > li.active-manual > a::after {
        transform: scaleX(1) !important;
    }

    /* 언어 버튼은 밑줄 제외 */
    .main-menu.navbar-nav > li > a.external.lang-pill {
        height: 34px !important;
        line-height: 34px !important;
        padding: 0 12px !important;
        margin-top: 22px !important;
        margin-bottom: 22px !important;
        border-radius: 999px !important;
    }

    .main-menu.navbar-nav > li > a.external.lang-pill::after {
        display: none !important;
        content: none !important;
    }
}
/* =========================================================
   OUR DIFFERENCE POLISH
   - 아이콘 톤을 사이트 컬러에 맞게 정리
   - 문구 간격 살짝 정돈
   ========================================================= */

#our-difference .fa,
#service .fa,
.our-difference .fa,
.difference-section .fa {
    color: #0A2342 !important;
    border: none !important;
    font-size: 58px !important;
    margin-bottom: 22px !important;
}

#our-difference h4,
#service h4,
.our-difference .difference-title,
.difference-section h4 {
    color: #0A2342 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    margin-top: 12px !important;
}

#our-difference .section-subtitle,
#service .section-subtitle {
    color: #6b7d8c !important;
    font-size: 16px !important;
    margin-top: 12px !important;
    margin-bottom: 46px !important;
}
/* =========================================================
   OUR DIFFERENCE ICON COLOR FIX
   - 검정처럼 보이는 아이콘을 실제 네이비 톤으로 변경
   - FontAwesome / SVG 둘 다 대응
   ========================================================= */

#our-difference .fa,
#service .fa,
.our-difference .fa,
.difference-section .fa {
    color: #123B63 !important;
    -webkit-text-fill-color: #123B63 !important;
}

/* SVG 아이콘일 경우 */
#our-difference svg,
#our-difference svg *,
#service svg,
#service svg *,
.our-difference svg,
.our-difference svg *,
.difference-section svg,
.difference-section svg * {
    color: #123B63 !important;
    stroke: #123B63 !important;
    fill: none !important;
}
/* WHY WORK WITH US - 오른쪽 카드 본문 가독성 */
.why-card p,
.why-card .card-text,
.why-card .feature-text {
    color: rgba(255, 255, 255, 0.72) !important;
}
/* =========================================================
   FEATURE CARD TEXT READABILITY FIX
   ========================================================= */

.feature-strip .feature-card .feature-sub,
.feature-card p.feature-sub {
    color: rgba(255, 255, 255, 0.82) !important;
    opacity: 1 !important;
}
/* =========================================================
   MANUFACTURERS BOTTOM TEXT SPACING
   ========================================================= */

.manufacturers-bottom {
    margin-top: 28px !important;
    margin-bottom: 0 !important;
    color: rgba(10, 35, 66, 0.70) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    text-align: center !important;
}

.manufacturers-bottom a {
    color: #0A2342 !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
/* =========================================================
   MANUFACTURERS TITLE BAR ALIGN FIX
   - 제목 옆 노란 바가 글자와 겹치는 문제 수정
   ========================================================= */

.maker-card {
    position: relative !important;
    padding-top: 30px !important;
}

/* 기존 제목 안쪽 노란 바 제거 */
.maker-card-title::before {
    display: none !important;
    content: none !important;
}

/* 노란 바를 카드 왼쪽에 따로 고정 */
.maker-card::before {
    content: "" !important;
    position: absolute !important;
    left: 22px !important;
    top: 30px !important;
    width: 4px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: #F9B700 !important;
}

/* 제목은 카드 중앙 정렬 */
.maker-card-title {
    padding-left: 0 !important;
    margin: 0 auto 24px auto !important;
    text-align: center !important;
    max-width: 230px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    color: #0A2342 !important;
}
/* =========================================================
   ABOUT PHOTO CARD
   ========================================================= */

.about-photo-card {
    width: 100%;
    height: 310px;
    border-radius: 20px;
    overflow: hidden;
    background: #f3f5f7;
    box-shadow: 0 18px 42px rgba(8, 27, 45, 0.14);
}

.about-photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1 !important;
}

.about-photo-card img:hover {
    opacity: 1 !important;
    cursor: default !important;
}
/* =========================================================
   ABOUT PHOTO CARD - NO CROP FIX
   ========================================================= */

.about-photo-card {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 18px 42px rgba(8, 27, 45, 0.14) !important;
}

.about-photo-card img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 1 !important;
    border-radius: 20px !important;
}

.about-photo-card img:hover {
    opacity: 1 !important;
    cursor: default !important;
}
/* =========================================================
   ABOUT PHOTO CARD - REMOVE OUTER BORDER
   ========================================================= */

.about-photo-card {
    border: none !important;
    outline: none !important;
    box-shadow: 0 18px 42px rgba(8, 27, 45, 0.12) !important;
    background: transparent !important;
}

.about-photo-card img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
/* =========================================================
   ABOUT IMAGE - CLEAN BORDER STYLE
   테두리는 살리고 그림자는 과하지 않게
   ========================================================= */

#about .about-photo-card {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#about .about-photo-card img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;

    border-radius: 16px !important;
    border: 1px solid rgba(10, 35, 66, 0.10) !important;
    box-shadow: 0 14px 30px rgba(8, 27, 45, 0.08) !important;

    background: #ffffff !important;
    opacity: 1 !important;
}

#about .about-photo-card img:hover {
    opacity: 1 !important;
    cursor: default !important;
}
.footer-credit {
    opacity: 0.45;
    font-size: 12px;
    margin-left: 6px;
}