font-face {
  font-family: 'ROKAFSansMedium';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts2201-3@1.0/ROKAFSansMedium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
          @font-face {
  font-family: 'ROKAFSansBold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts2201-3@1.0/ROKAFSansBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}




          @font-face {
  font-family: 'KIMM_Light';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KIMM_Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}
          @font-face {
  font-family: 'KIMM_Bold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KIMM_Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}




@font-face {
  font-family: 'GangwonEduPowerExtraBoldA';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'JalnanGothic';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'ROEHOE-CHAN';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/ROEHOE-CHAN.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}




#quickkk {position:fixed; right:1%; bottom:5%; width:175px; height:auto; z-index:9999;  }
#quickkk ul {max-width:100%; border:0px solid #eee;  overflow:hidden; }
#quickkk ul li {text-align:center; padding:0; border-left:1px solid #eee; border-right:1px solid #eee; background:#fff;}
#quickkk ul li:nth-child(1) {text-align:center; padding:10px 0; background:#0250ce; border:none; border-radius:15px 15px 0 0;}
#quickkk ul li:last-child {border-bottom:1px solid #eee; border-radius: 0 0 15px 15px;}
#quickkk ul li .txt {padding:15px 0;}
#quickkk ul li .txt h2 {font-size:16px; font-weight:650; color:#000; padding:0;}
#quickkk ul li .txt h3 {font-size:28px; font-weight:650; color:#004ca1; padding:0; font-family: 'Montserrat', sans-serif;}
#quickkk ul li .txt h4 {font-size:19px; font-weight:650; color:#004ca1; padding:0; font-family: 'Montserrat', sans-serif; padding:0 0 10px 0;}
#quickkk ul li .txt h5 {width:90%; margin:0 auto; padding:8px 0 0 0; font-size:13px; font-weight:450; color:#000; font-family: 'Montserrat', sans-serif; border-top:1px solid #eee;}
#quickkk ul li .qframe {width:90%; height:200px; margin:0 auto; padding:0 0 0 0; border-top:0px solid #eee;}
#quickkk ul li .qframe h2 {font-size:18px; font-weight:650; color:#000; padding:0 0 5px 0;}

#quickkk p {text-align:center; margin:8px 0 0 0;}




#pagetop {position:relative; width:100%; height:420px; margin:0 auto; text-align:left; background:#fff; z-index: -2;}
#pagetop::before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url("/upload/img/main_slide/m1.jpg") no-repeat 50% 30%; background-size:cover; filter:blur(0px); opacity:0.80; z-index: -1;}
#pagetop ul {width:1100px; height:100%; margin:0 auto; text-align:left; color:#000; display: flex; align-items: center;}
#pagetop ul li {width:auto; margin-right:auto; color:#fff;}
#pagetop ul li h2 {font-size:27px; font-weight:400; padding:40px 0 0 0; font-family: 'S-CoreDream-4Regular'; color:#009fe9;}
#pagetop ul li h3 {font-size:38px; font-weight:650; padding:0 0 0 0;  letter-spacing:-1px; color:#0067b6; font-family: 'S-CoreDream-6Bold';}
#pagetop ul li h4 {font-size:25px; font-weight:400; padding:20px 0 0 0; font-family: 'Montserrat', sans-serif; letter-spacing:2px;}


#pagetop01 {position:relative; width:100%; min-height:280px; height:32vh; margin:0 auto; text-align:center; background:url('/upload/img/page/pagetop01_bg.png') no-repeat 50% 50% / cover; z-index: 1; display:flex; align-items:center; justify-content:center;}
#pagetop01::before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(15, 23, 42, 0.55); z-index: 1;}
#pagetop01 ul {position:relative; z-index:2; max-width:1200px; width:100%; margin:0 auto; text-align:center; color:#fff; }
#pagetop01 ul li {display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px;}
#pagetop01 ul li h2 {font-size: clamp(22px, 3.8vw, 38px); font-weight:700; color:#fff; margin:0 0 10px 0; padding:0; letter-spacing:-0.5px; text-shadow:0 2px 10px rgba(0,0,0,0.5); line-height: 1.35; word-break: keep-all; overflow-wrap: break-word; font-family: 'Pretendard', sans-serif;}
#pagetop01 ul li h1, #pagetop01 ul li p.sub-hero-subtitle {font-size: clamp(14px, 2vw, 20px); font-weight:400; color:rgba(255,255,255,0.92); margin:0; padding:0; letter-spacing:-0.3px; text-shadow:0 1px 6px rgba(0,0,0,0.5); line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; font-family: 'Pretendard', sans-serif;}
#pagetop01 ul li h2 span {font-weight:750;}

.title, h1.title {width:100%; max-width:1200px; box-sizing:border-box; font-size: clamp(20px, 3.2vw, 32px); font-weight:750; text-align:center; margin:0 auto; padding:60px 15px 40px 15px; color:#000; letter-spacing:-0.5px; line-height: 1.35; word-break: keep-all; overflow-wrap: break-word; font-family: 'Pretendard', sans-serif;}
.titles, h1.titles {width:100%; max-width:1200px; box-sizing:border-box; font-size: clamp(20px, 3.2vw, 32px); font-weight:750; text-align:left; margin:0 auto; padding:60px 15px 17px 15px; color:#000; letter-spacing:-0.5px; border-bottom:1px solid #eee; margin-bottom:40px; line-height: 1.35; word-break: keep-all; overflow-wrap: break-word; font-family: 'Pretendard', sans-serif;}

#tap {position:relative; z-index:10; width:100%; height:auto; margin:0 auto; color:#fff; font-size:clamp(15px, 1.8vw, 18px); font-weight:500; text-align:center; border-bottom:0px solid #eee; background:rgba(0,67,154,0.95); margin-top:-50px; border-radius:0 0 0 0; box-shadow:0 4px 15px rgba(0,0,0,0.15); font-family: 'Pretendard', sans-serif;}
#tap ul {width:1200px; max-width:100%; margin:0 auto; text-align:center;}
#tap li {display:inline-block; font-weight:400; padding:15px 0; font-family: 'Pretendard', sans-serif;}
#tap li::before {
    content: "";
    display: inline-block;
    vertical-align:middle;
    width: 1px; /* 막대의 너비를 조절할 수 있습니다. */
    height: 10px; /* 막대의 높이를 조절할 수 있습니다. */
    background-color:rgba(255,255,255,0.40); /* 막대의 색을 파란색으로 지정합니다. */
    margin:0 35px;}

#tap li:nth-child(1)::before {width: 0px;}
#tap li a {color:#fff; text-decoration:none; font-family: 'Pretendard', sans-serif; transition: color 0.2s ease, font-weight 0.2s ease;}
#tap li:hover a {font-weight:700; color:#fff; border-bottom:0px solid #fff;}
#tap li.active a {font-weight:700; color:#fff; border-bottom:0px solid #fff;}

/* #tap 모바일 레이아웃 & UI 최적화 */
@media (max-width: 768px) {
    #tap {
        margin-top: 0;
        background: #00439a;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #tap::-webkit-scrollbar {
        display: none;
    }
    #tap ul {
        width: max-content;
        min-width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 0 8px;
        box-sizing: border-box;
    }
    #tap li {
        display: inline-flex;
        align-items: center;
        padding: 0;
        margin: 0;
        flex: 0 0 auto;
    }
    #tap li::before {
        display: none;
    }
    #tap li a {
        display: block;
        padding: 14px 18px;
        font-size: 15px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        white-space: nowrap;
        position: relative;
    }
    #tap li.active a,
    #tap li:hover a {
        color: #ffffff;
        font-weight: 750;
    }
    #tap li.active a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 12px;
        right: 12px;
        height: 3px;
        background: #ffffff;
        border-radius: 3px 3px 0 0;
    }
}






.office01 {position:relative; width:100%; height:auto; margin:0 auto; text-align:center; padding:50px 0 60px 0; box-sizing:border-box;}
.office01 .img, .office01 .service-media-banner {width:1200px; max-width:100%; height:470px; margin:0 auto; overflow:hidden; background:#000; border-radius:10px; position:relative; box-sizing:border-box;}
.office01 .service-media-banner img {width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
.office01 .img ul {width:100%; height:auto; margin:0 auto; position:relative; z-index:1; }
.office01 .img ul li {position: relative; width:100%; text-align:center; color:#000; }
.office01 .img ul li:last-child {display:none;}
.office01 .img ul li img { width: 100%; height: auto; position: absolute; transform: translate(-50%, 0%); }

.office01 .img ul.x li img {width:100%; height: auto; position:absolute; transform: translate(-50%, 0%);}
.office01 .img ul.a li img {width: 100%; height: auto; position: absolute; transform: translate(-50%, -10%);}
.office01 .img ul.m li img {width:100%; height: auto; position:absolute; transform: translate(-50%, -20%);}
.office01 .img ul.h li img {width: 100%; height: auto; position: absolute; transform: translate(-50%, -30%);}
.office01 .img ul.hh li img {width: 100%; height: auto; position: absolute; transform: translate(-50%, -40%);}

.office01 ul, .service-intro-info {display:flex; flex-direction:column; align-items:center; justify-content:center; max-width:1200px; width:100%; height:auto; margin:0 auto; position:relative; z-index:1; background:#fff; padding:25px 15px 0 15px; text-align:center; box-sizing:border-box;}
.office01 ul h2, .office01 h2, .service-intro-info h2 {width:100%; font-size: clamp(20px, 3.2vw, 26px); font-weight: 700; padding:20px 0 15px 0; height:auto; letter-spacing:-0.5px; line-height:1.35; word-break: keep-all; overflow-wrap: break-word; font-family: 'Pretendard', sans-serif;}
.office01 ul li, .office01 p, .service-intro-info p {text-align:center; color:#333; font-size: clamp(14px, 1.8vw, 17px); font-weight:400; line-height:1.7; letter-spacing:0px; word-break: keep-all; overflow-wrap: break-word; font-family: 'Pretendard', sans-serif; margin: 0;}



/* 가로 나열 */

.office02 {width: 100%; height: auto; margin: 0 auto; text-align: center; padding: 60px 0; border-top:1px solid #eee; box-sizing:border-box;}
.office02 h2 {width:100%; font-size: clamp(20px, 3.2vw, 26px); font-weight: 700; padding:10px 0 20px 0; margin:0; letter-spacing:-0.5px; line-height:1.35; word-break: keep-all; font-family: 'Pretendard', sans-serif;}
.office02 > ul {max-width: 1200px; width:100%; margin: 0 auto; text-align: left; padding: 30px 15px 0 15px; box-sizing: border-box; display: flex; flex-direction: column; gap: 30px;}
.office02 > ul > li {position: relative; width: 100% !important; height:auto !important; background: #fff; color: #000; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 30px !important; padding: 30px !important; border: 1px solid #e2e8f0; border-radius: 12px; box-sizing: border-box;}
.office02 > ul > li .img {position: relative; flex: 0 0 45% !important; width: 45% !important; height: 280px !important; border-radius: 10px; overflow: hidden;}
.office02 > ul > li .img img {width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; position: absolute !important; top: 0 !important; left: 0 !important; transform: none !important;}

.office02 > ul > li .service-intro-info {flex: 1 1 52% !important; width: 52% !important; text-align: left !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important;}
.office02 > ul > li .service-intro-info h2 {width: 100% !important; border-bottom: 2px solid #002b5b !important; padding-bottom: 10px !important; margin-bottom: 15px !important; display: block !important;}
.office02 > ul > li .service-intro-info ul {width:100%; text-align:left; padding:15px 0 0 0; align-items:flex-start;}
.office02 > ul > li .service-intro-info ul li {font-size: clamp(14px, 1.6vw, 16px); font-weight: 400; line-height:1.7; color:#333; text-align:left; padding: 6px 0 6px 24px; position:relative; word-break: keep-all; overflow-wrap: break-word; font-family: 'Pretendard', sans-serif;}
.office02 > ul > li .service-intro-info ul li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #00439a;
    font-size: 15px;
    position: absolute;
    left: 0;
    top: 7px;
}



/* office03 Service Target Section Semantic Styles */
.office03 {width:100%; height:auto; margin:0 auto; text-align:center; padding:60px 0; border-top:1px solid #eee; box-sizing:border-box;}
.office03 h2 {width:100%; font-size: clamp(20px, 3.2vw, 26px); font-weight: 700; padding:10px 0 20px 0; margin:0; letter-spacing:-0.5px; line-height:1.35; word-break: keep-all; font-family: 'Pretendard', sans-serif;}
.office03 .img {max-width:1200px; width:100%; height:auto; margin:0 auto; padding:20px 0; box-sizing:border-box;}
.office03 .img ul {display:flex; justify-content:space-between; width:100%; padding:0; margin:0; list-style:none;}
.office03 .img ul li {width:49%; height:320px; border-radius:10px; overflow:hidden; position:relative;}
.office03 .img ul li img {width:100%; height:100%; object-fit:cover; object-position:center; display:block;}

.office03 > ul, .office03 .target-list {max-width:1200px; width:100%; margin:0 auto; padding:30px 0 0 0; text-align:left; display:flex; flex-wrap:wrap; justify-content:space-between; list-style:none; box-sizing:border-box;}
.office03 > ul > li, .office03 .target-list > li {width:49%; margin-bottom:20px; box-sizing:border-box;}
.office03 > ul > li .target-card, .office03 > ul > li {background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:20px 25px; box-sizing:border-box; height:100%;}
.office03 .target-card h2, .office03 > ul > li h2 {font-size: clamp(18px, 2.4vw, 22px) !important; font-weight:700; color:#002b5b; margin:0 0 8px 0; padding:0; line-height:1.35; font-family: 'Pretendard', sans-serif;}
.office03 p, .office03 .target-card p, .office03 > ul > li p {font-size: clamp(14px, 1.8vw, 17px) !important; font-weight:400; color:#334155; margin:0; padding:0; line-height:1.7; word-break:keep-all; overflow-wrap:break-word; font-family: 'Pretendard', sans-serif;}

@media screen and (max-width: 768px) {
    .title, h1.title, .titles, h1.titles {
        padding: 40px 15px 15px 15px !important;
        margin-bottom: 25px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .office01 .img, .office01 .service-media-banner {
        height: 260px !important;
    }
    .office02 > ul > li {
        width: 100% !important;
        flex-direction: column !important;
        padding: 15px !important;
        margin-bottom: 25px !important;
    }
    .office02 > ul > li .img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        height: 220px !important;
        min-height: 220px !important;
        margin-bottom: 15px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .office02 > ul > li .img img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    .office02 > ul > li .service-intro-info {
        width: 100% !important;
        padding: 0 !important;
    }
    .office03 > ul > li, .office03 .target-list > li {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    .office03 .img ul {
        flex-direction: column !important;
    }
    .office03 .img ul li {
        width: 100% !important;
        height: 200px !important;
        margin-bottom: 15px !important;
    }
}

/* 335px Breakpoint (Compact Mobile Devices - iPhone SE & Galaxy Fold) */
@media screen and (max-width: 375px) {
    .title, .titles, h1.title, h1.titles {
        font-size: 20px !important;
        padding: 30px 10px 10px 10px !important;
        margin-bottom: 20px !important;
    }
    .office01 {
        padding: 30px 0 40px 0 !important;
    }
    .office01 .img, .office01 .service-media-banner {
        height: 200px !important;
        border-radius: 8px !important;
    }
    .office01 ul h2, .office01 h2, .service-intro-info h2 {
        font-size: 19px !important;
        padding: 15px 0 10px 0 !important;
    }
    .office01 ul li, .office01 p, .service-intro-info p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    .office02 {
        padding: 40px 0 !important;
    }
    .office02 h2, .office03 h2 {
        font-size: 19px !important;
        padding: 10px 0 15px 0 !important;
    }
    .office02 > ul > li .img {
        height: 180px !important;
        border-radius: 8px !important;
    }
    .office02 > ul > li .service-intro-info h2 {
        font-size: 17px !important;
    }
    .office02 > ul > li .service-intro-info ul li {
        font-size: 13.5px !important;
        padding-left: 20px !important;
    }
    .office03 .target-card {
        padding: 15px 18px !important;
        border-radius: 8px !important;
    }
    .office03 .target-card h2 {
        font-size: 16px !important;
    }
}

/* .page .contents Scoped Typography System Alignment */
.page .contents h1.titles, .page .contents .titles {
    font-family: 'Pretendard', sans-serif !important;
    font-size: clamp(20px, 3.2vw, 32px) !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.5px !important;
    color: #000000 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
}

.page .contents .office03 h2,
.office03 > h2 {
    font-family: 'Pretendard', sans-serif !important;
    font-size: clamp(20px, 3.2vw, 26px) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.5px !important;
    color: #000000 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
}

.page .contents .office02 > ul > li .service-intro-info h2,
.page .contents .office03 .target-card h2,
.office03 ul li h2,
.office03 .target-card h2 {
    font-family: 'Pretendard', sans-serif !important;
    font-size: clamp(18px, 2.4vw, 22px) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.5px !important;
    color: #002b5b !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
}

.page .contents .office01 p,
.page .contents .service-intro-info p,
.page .contents .office03 .target-card p,
.office03 ul li,
.office03 .target-list li,
.office03 .target-card p {
    font-family: 'Pretendard', sans-serif !important;
    font-size: clamp(14px, 1.8vw, 17px) !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    letter-spacing: 0px !important;
    color: #334155 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
}

.page .contents .office02 > ul > li .service-intro-info ul li {
    font-family: 'Pretendard', sans-serif !important;
    font-size: clamp(14px, 1.6vw, 16px) !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    letter-spacing: 0px !important;
    color: #334155 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
}





.ceo01 {position:relative; width:100%; height:auto; margin:0 auto; text-align:left; padding:20px 0 60px 0; border-bottom:0px solid #eee; }
.ceo01 .img {width:100%; max-width:1200px; height:auto; margin:0 auto; background:none; overflow:hidden; box-sizing:border-box; padding:20px 0 40px 0;}
.ceo01 .img > ul {width:100%; height:auto; margin:0 auto; display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; gap:50px; box-sizing:border-box;}
.ceo01 .img > ul > li {color:#000;}
.ceo01 .img > ul > li:first-child {flex:0 0 460px; max-width:460px; text-align:center;}
.ceo01 .img > ul > li:first-child img {width:100%; max-width:460px; height:auto; display:block; margin:0 auto; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,0.06);}
.ceo01 .img > ul > li:last-child {flex:1; min-width:0; padding-left:10px;}
.ceo01 .img > ul > li h2 {font-size:clamp(28px, 3.2vw, 44px); font-weight:800; padding:0 0 16px 0; color:#0f172a; line-height:1.3; word-break:keep-all; letter-spacing:-0.5px;}
.ceo01 .img > ul > li h2 span {color:#064698; display:block; margin-top:4px;}
.ceo01 .img > ul > li h3 {font-size:clamp(14px, 1.5vw, 17px); font-weight:500; padding:0 0 20px 0; color:#64748b; font-family:'Montserrat', sans-serif; letter-spacing:1px; text-transform:uppercase;}
.ceo01 .img > ul > li h4 {font-size:clamp(16px, 1.8vw, 20px); font-weight:700; padding:8px 20px; color:#0369a1; background-color:#e0f2fe; border-radius:30px; display:inline-block;}

.ceo01 > ul {max-width:1200px; width:100%; height:auto; margin:0 auto; position:relative; z-index:1; padding:45px 40px; background:#f8fafc; margin-top:20px; border-radius:20px; border:1px solid #e2e8f0; box-sizing:border-box; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;}
.ceo01 > ul > li {position:relative; width:100%; margin:0 auto; color:#000; text-align:left;}

.ceo01 > ul > li > h2 {font-family:'Pretendard', sans-serif; font-size:clamp(20px, 2.4vw, 24px); font-weight:750; color:#0f172a; line-height:1.4; letter-spacing:-0.5px; margin-bottom:20px; word-break:keep-all; overflow-wrap:break-word;}
.ceo01 > ul > li > h2 span {color:#064698;}

.ceo01 > ul > li > h3 {font-family:'Pretendard', sans-serif; font-size:clamp(14px, 1.6vw, 16px); font-weight:400; color:#334155; line-height:1.75; letter-spacing:0px; margin-bottom:24px; word-break:keep-all; overflow-wrap:break-word;}

.ceo01 > ul > li > h4 {font-family:'Pretendard', sans-serif; font-size:clamp(15px, 1.7vw, 17px); font-weight:700; color:#1e293b; text-align:right; margin:0;}

/* Management Philosophy Section (.ceo03) Typography Standardization */
.ceo03 {width:100%; max-width:1200px; height:auto; margin:0 auto 70px auto; text-align:center;}
.ceo03 > h2 {font-family:'Pretendard', sans-serif; font-size:clamp(20px, 2.6vw, 28px); font-weight:700; color:#0f172a; line-height:1.35; letter-spacing:-0.5px; margin-bottom:30px;}
.ceo03 > h2 span {color:#064698;}
.ceo03 > ul {display:grid; grid-template-columns:repeat(2, 1fr); gap:30px; margin:0 auto; padding:0;}
.ceo03 > ul > li {background:#ffffff; border-radius:16px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,0.06); border:1px solid #e2e8f0; transition:transform 0.3s ease, box-shadow 0.3s ease; text-align:left;}
.ceo03 > ul > li:hover {transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,0.1);}
.ceo03 > ul > li .img {width:100%; height:240px; overflow:hidden;}
.ceo03 > ul > li .img img {width:100%; height:100%; object-fit:cover;}
.ceo03 > ul > li .txt {padding:30px;}
.ceo03 > ul > li .txt h3 {font-family:'Pretendard', sans-serif; font-size:clamp(18px, 2.2vw, 22px); font-weight:700; color:#0f172a; line-height:1.4; letter-spacing:-0.3px; margin-bottom:12px;}
.ceo03 > ul > li .txt h4 {font-family:'Pretendard', sans-serif; font-size:clamp(14px, 1.6vw, 16px); font-weight:400; color:#475569; line-height:1.7; letter-spacing:0px; word-break:keep-all; overflow-wrap:break-word; margin:0;}

/* Certificates Section (.papers) A4 Aspect Ratio & Clean Background */
.papers {width:100%; max-width:1200px; height:auto; margin:0 auto 70px auto; text-align:center;}
.papers .titles {font-family:'Pretendard', sans-serif; font-size:clamp(20px, 2.6vw, 28px); font-weight:700; color:#0f172a; line-height:1.35; letter-spacing:-0.5px; margin-bottom:30px; text-align:center; border:none; padding:0;}
.papers ul {display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; margin:0; padding:0;}
.papers ul li {background:#ffffff; border-radius:16px; padding:24px; text-align:center; border:1px solid #e2e8f0; box-shadow:0 4px 15px rgba(0,0,0,0.04);}
.papers ul li .img {width:100%; aspect-ratio:1 / 1.414; overflow:hidden; border-radius:8px; margin-bottom:16px; background:none; display:flex; align-items:center; justify-content:center;}
.papers ul li .img img {width:100%; height:100%; object-fit:contain;}
.papers ul li span {font-family:'Pretendard', sans-serif; font-size:clamp(15px, 1.8vw, 17px); font-weight:700; color:#1e293b; display:block;}

/* Location Map Section (.map01) Typography Standardization */
.map01 {width:100%; max-width:1200px; height:auto; margin:0 auto 60px auto;}
.map01 .titles {font-family:'Pretendard', sans-serif; font-size:clamp(20px, 2.6vw, 28px); font-weight:700; color:#0f172a; line-height:1.35; letter-spacing:-0.5px; margin-bottom:30px; text-align:center; border:none; padding:0;}
.map01 .wrap {background-color:#f8fafc; border-radius:16px; padding:30px 40px; border:1px solid #e2e8f0;}
.map01 .wrap h1, .map01 .wrap h2 {font-family:'Pretendard', sans-serif; font-size:clamp(18px, 2.2vw, 22px); font-weight:700; color:#0f172a; line-height:1.4; margin-bottom:20px;}
.map01 .wrap ul {display:flex; flex-direction:column; gap:16px; padding:0; margin:0; border:none;}
.map01 .wrap ul li {font-family:'Pretendard', sans-serif; font-size:clamp(14px, 1.6vw, 16px); font-weight:400; color:#334155; line-height:1.7; display:flex; align-items:center; gap:12px; border:none; padding:0; height:auto;}
.map01 .wrap ul li i {font-size:16px; color:#064698;}
.map01 .wrap ul li span {font-weight:700; color:#064698; display:inline-flex; align-items:center; gap:8px; min-width:140px;}

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .papers ul {grid-template-columns:repeat(2, 1fr);}
}

@media (max-width: 768px) {
    .cs, #online .cs {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 16px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        margin: 0 auto !important;
        text-align: center !important;
        align-items: center !important;
    }

    .cs img, #online .cs img, #online .cs p img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .ceo01 .img > ul {
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
    }

    .ceo01 .img > ul > li:first-child {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
    }

    .ceo01 .img > ul > li:last-child {
        width: 100% !important;
        padding-left: 0 !important;
        text-align: center !important;
    }

    .ceo01 > ul {
        padding: 24px 18px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .ceo03 > ul, .papers ul {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .papers ul li {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .map01 .wrap {
        padding: 20px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .map01 .wrap ul li {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        word-break: keep-all !important;
    }

    .map01 .wrap ul li span {
        min-width: auto !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   Gallery Board List UI & Numbered Pagination Styles
   ========================================================================== */
.gallery-board-section {
    padding: 30px 0 60px 0;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.gallery-cat-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 35px;
}

.gallery-cat-tab {
    padding: 10px 22px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 30px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.gallery-cat-tab:hover,
.gallery-cat-tab.active {
    background: #064698;
    color: #ffffff;
    border-color: #064698;
    box-shadow: 0 4px 12px rgba(6, 70, 152, 0.25);
}

.gallery-board-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 45px;
}

.gallery-board-card {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-board-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    border-color: #064698;
}

.gallery-board-card .card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.gallery-board-card .card-img-wrap {
    position: relative;
    width: 100%;
    height: 210px;
    overflow: hidden;
    background: #f8fafc;
}

.gallery-board-card .card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-board-card:hover .card-img-wrap img {
    transform: scale(1.06);
}

.gallery-board-card .card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(6, 70, 152, 0.9);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

.gallery-board-card .card-body {
    padding: 20px 22px;
}

.gallery-board-card .card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: #64748b;
    margin-bottom: 8px;
}

.gallery-board-card .card-meta .num {
    font-weight: 700;
    color: #064698;
}

.gallery-board-card .card-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.45;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: keep-all;
}

.gallery-board-card .card-footer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: #94a3b8;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

/* Numbered Pagination UI */
.pagination-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.pagination-list {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-list .page-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.pagination-list .page-btn:hover:not(.disabled):not(.active) {
    background: #f1f5f9;
    border-color: #064698;
    color: #064698;
}

.pagination-list .page-btn.active {
    background: #064698;
    color: #ffffff;
    border-color: #064698;
    box-shadow: 0 2px 8px rgba(6, 70, 152, 0.3);
}

.pagination-list .page-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media screen and (max-width: 1024px) {
    .gallery-board-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media screen and (max-width: 768px) {
    .gallery-board-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .gallery-cat-tab {
        padding: 8px 16px;
        font-size: 13px;
    }
    .gallery-board-card .card-img-wrap {
        height: 190px;
    }
    .gallery-board-card .card-title {
        font-size: 15.5px;
    }
}

/* ==========================================================================
   Gallery Detail View Styles (gallery_detail.html)
   ========================================================================== */
.gallery-detail-section {
    padding: 30px 0 60px 0;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

.gallery-detail-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    padding: 36px 32px;
}

.gallery-detail-header {
    border-bottom: 2px solid #064698;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.gallery-detail-header .meta-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.gallery-detail-header .cate-badge {
    background: #064698;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
}

.gallery-detail-header .detail-title {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.4;
    margin-bottom: 14px;
    word-break: keep-all;
}

.gallery-detail-header .info-row {
    display: flex;
    gap: 20px;
    font-size: 13.5px;
    color: #64748b;
    flex-wrap: wrap;
}

.gallery-detail-header .info-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gallery-detail-media {
    margin-bottom: 35px;
}

.gallery-main-img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.gallery-sub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.gallery-sub-grid img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.gallery-detail-body {
    background: #f8fafc;
    border-radius: 12px;
    padding: 28px 24px;
    border: 1px solid #f1f5f9;
    margin-bottom: 35px;
}

.gallery-detail-body h3 {
    font-size: 19px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gallery-detail-body h3 i {
    color: #064698;
}

.gallery-detail-body p {
    font-size: 15px;
    line-height: 1.75;
    color: #334155;
    margin-bottom: 20px;
    word-break: keep-all;
}

.gallery-specs-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
}

.gallery-specs-box .spec-item {
    font-size: 13.5px;
    color: #475569;
}

.gallery-specs-box .spec-item strong {
    color: #0f172a;
    margin-right: 6px;
}

.gallery-detail-cta {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.gallery-detail-cta .btn-list {
    padding: 14px 28px;
    background: #475569;
    color: #ffffff;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
}

.gallery-detail-cta .btn-list:hover {
    background: #334155;
}

.gallery-detail-cta .btn-inquiry {
    padding: 14px 32px;
    background: #064698;
    color: #ffffff;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease;
    box-shadow: 0 4px 14px rgba(6, 70, 152, 0.3);
}

.gallery-detail-cta .btn-inquiry:hover {
    background: #043370;
}

@media screen and (max-width: 768px) {
    .gallery-detail-card {
        padding: 24px 16px;
    }
    .gallery-detail-header .detail-title {
        font-size: 20px;
    }
    .gallery-sub-grid {
        grid-template-columns: 1fr;
    }
    .gallery-specs-box {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Modern SaaS Dashboard Online Inquiry Form Styles (online.html)
   ========================================================================== */
.saas-quote-section {
    padding: 30px 0 60px 0;
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
}

.saas-quote-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    padding: 40px 36px;
    box-sizing: border-box;
}

.saas-card-header {
    border-bottom: 2px solid #064698;
    padding-bottom: 22px;
    margin-bottom: 32px;
    text-align: center;
}

.saas-card-header .live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(6, 70, 152, 0.08);
    color: #064698;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.saas-card-header .live-badge i {
    color: #10b981;
}

.saas-card-header h2 {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.saas-card-header p {
    font-size: 14.5px;
    color: #64748b;
    margin: 0;
}

/* Vertical Single Column Form Layout */
.saas-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
}

.saas-form-group {
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #f1f5f9;
}

.saas-group-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.saas-group-title .step-num {
    background: #064698;
    color: #ffffff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.saas-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
    width: 100%;
}

.saas-field:last-child {
    margin-bottom: 0;
}

.saas-field label {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 4px;
}

.saas-field label span.req {
    color: #ef4444;
}

.saas-input,
.saas-select,
.saas-textarea {
    width: 100%;
    padding: 13px 16px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14.5px;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.saas-input:focus,
.saas-select:focus,
.saas-textarea:focus {
    border-color: #064698;
    box-shadow: 0 0 0 3px rgba(6, 70, 152, 0.15);
}

.saas-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.saas-agree-box {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #475569;
    padding: 8px 4px;
}

.saas-agree-box input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #064698;
    cursor: pointer;
}

.saas-submit-btn {
    width: 100%;
    padding: 16px;
    background: #064698;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 6px 20px rgba(6, 70, 152, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.saas-submit-btn:hover {
    background: #043370;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(6, 70, 152, 0.4);
}

@media screen and (max-width: 768px) {
    .saas-quote-card {
        padding: 24px 16px;
    }
    .saas-card-header h2 {
        font-size: 22px;
    }
    .saas-form-group {
        padding: 18px 14px;
    }
}

/* ==========================================================================
   WS Total Clean Ported Design Tokens & Styles for Nadoo Clean
   ========================================================================== */

/* 🏛️ WS Total Clean Premium Estimate Canvas Styles */
.premium-canvas-desk {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    padding: 44px 48px 48px;
    box-shadow: 0 15px 50px rgba(6, 70, 152, 0.05), 0 1px 4px rgba(0, 0, 0, 0.01);
    max-width: 880px;
    margin: 0 auto;
    box-sizing: border-box;
}

.estimate-form-single {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
}

.canvas-header {
    text-align: center;
    padding-bottom: 24px;
    border-bottom: 2px dashed rgba(6, 70, 152, 0.2);
    margin-bottom: 8px;
}

.canvas-header .eyebrow {
    font-family: 'Roboto', 'Pretendard', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    color: #064698;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.canvas-header h1, .canvas-header h2 {
    font-size: 28px;
    font-weight: 850;
    color: #0f172a;
    letter-spacing: -0.5px;
    margin-top: 8px;
}

.canvas-header p {
    font-size: 14.5px;
    color: #64748b;
    margin-top: 8px;
    line-height: 1.65;
    word-break: keep-all;
}

.premium-row-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

.premium-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.premium-field label {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.2px;
}

.premium-field label span.required-mark {
    color: #ef4444;
    margin-left: 3px;
}

.premium-field input[type="text"],
.premium-field input[type="email"],
.premium-field input[type="tel"],
.premium-field input[type="number"],
.premium-field input[type="date"],
.premium-field select,
.premium-field textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14.5px;
    font-weight: 500;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.premium-field input[type="text"],
.premium-field input[type="email"],
.premium-field input[type="tel"],
.premium-field input[type="number"],
.premium-field input[type="date"],
.premium-field select {
    min-height: 48px;
    padding: 0 14px;
}

.premium-field textarea {
    min-height: 130px;
    padding: 14px;
    resize: vertical;
    line-height: 1.6;
}

.premium-field input:focus,
.premium-field select:focus,
.premium-field textarea:focus {
    border-color: #064698;
    box-shadow: 0 0 0 3px rgba(6, 70, 152, 0.12);
}

.premium-phone-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.premium-phone-wrapper input {
    flex: 1;
    text-align: center;
}

.premium-phone-wrapper input:first-child {
    flex: 0 0 90px;
}

.phone-separator {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
}

.agree-scroll-box {
    width: 100%;
    max-height: 90px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    padding: 10px 14px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.6;
    word-break: keep-all;
}

.blue-submit-wrap {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.blue-submit-btn {
    min-height: 52px;
    padding: 0 48px;
    border: 0;
    border-radius: 26px;
    background: #064698;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(6, 70, 152, 0.25);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.blue-submit-btn:hover {
    background: #043370;
    box-shadow: 0 8px 24px rgba(6, 70, 152, 0.35);
    transform: translateY(-2px);
}

/* ==========================================================================
   Nadoo Clean Unified Brand Design System (Gallery & Estimate Pages)
   ========================================================================== */

/* 🏛️ Nadoo Clean Premium Estimate Canvas Form */
.section-estimate {
    background-color: #f8fafc;
    padding: 40px 0 80px;
}

.premium-canvas-desk {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 44px 48px;
    box-shadow: 0 10px 35px rgba(6, 70, 152, 0.06);
    max-width: 880px;
    margin: 0 auto;
    box-sizing: border-box;
}

.estimate-form-single {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
}

.canvas-header {
    text-align: center;
    padding-bottom: 24px;
    border-bottom: 2px dashed rgba(6, 70, 152, 0.25);
    margin-bottom: 8px;
}

.canvas-header .eyebrow {
    font-family: 'Roboto', 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #064698;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}

.canvas-header h1, .canvas-header h2 {
    font-size: 28px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.5px;
    margin-top: 6px;
}

.canvas-header p {
    font-size: 14.5px;
    color: #64748b;
    margin-top: 6px;
    line-height: 1.65;
    word-break: keep-all;
}

.premium-row-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

.premium-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.premium-field label {
    font-size: 14.5px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.2px;
}

.premium-field label span.required-mark {
    color: #ef4444;
    margin-left: 3px;
}

.premium-field input[type="text"],
.premium-field input[type="email"],
.premium-field input[type="tel"],
.premium-field input[type="number"],
.premium-field input[type="date"],
.premium-field select,
.premium-field textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #111827;
    font-size: 14.5px;
    font-weight: 500;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.premium-field input[type="text"],
.premium-field input[type="email"],
.premium-field input[type="tel"],
.premium-field input[type="number"],
.premium-field input[type="date"],
.premium-field select {
    min-height: 48px;
    padding: 0 14px;
}

.premium-field textarea {
    min-height: 130px;
    padding: 14px;
    resize: vertical;
    line-height: 1.6;
}

.premium-field input:focus,
.premium-field select:focus,
.premium-field textarea:focus {
    border-color: #064698;
    box-shadow: 0 0 0 3px rgba(6, 70, 152, 0.12);
}

.premium-phone-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.premium-phone-wrapper input {
    flex: 1;
    text-align: center;
}

.premium-phone-wrapper input:first-child {
    flex: 0 0 90px;
}

.phone-separator {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
}

.premium-file-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.premium-file-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    padding: 10px 14px;
    border-radius: 6px;
}

.premium-file-row .file-number {
    font-size: 13px;
    font-weight: 700;
    color: #064698;
    min-width: 75px;
}

.premium-file-input {
    font-size: 13px;
    color: #475569;
    width: 100%;
}

.file-attachment-divider {
    border: none;
    border-top: 1px dashed #e2e8f0;
    margin: 8px 0;
}

.agree-scroll-box {
    width: 100%;
    max-height: 95px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    padding: 12px 14px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.65;
    word-break: keep-all;
}

.blue-submit-wrap {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.blue-submit-btn {
    min-height: 52px;
    padding: 0 48px;
    border: 0;
    border-radius: 26px;
    background: #064698;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(6, 70, 152, 0.25);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.blue-submit-btn:hover {
    background: #043370;
    box-shadow: 0 8px 24px rgba(6, 70, 152, 0.35);
    transform: translateY(-2px);
}

/* 🖼️ Nadoo Clean Gallery Board System */
.gallery-board-section {
    background: #ffffff;
    padding: 20px 0 60px 0;
}

.gallery-board__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.48fr);
    gap: 32px;
    align-items: end;
    margin-bottom: 34px;
}

.gallery-board__head .eyebrow {
    color: #064698;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.gallery-board__head h1, .gallery-board__head h2 {
    margin-top: 6px;
    color: #111827;
    font-size: 32px;
    font-weight: 850;
    line-height: 1.2;
    word-break: keep-all;
}

.gallery-board__head > p {
    color: #64748b;
    font-size: 15px;
    line-height: 1.68;
    word-break: keep-all;
}

.gallery-board__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.gallery-board__tabs button,
.gallery-board__tabs a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0 18px;
    background: #ffffff;
    color: #475569;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.gallery-board__tabs button.is-active,
.gallery-board__tabs button:hover,
.gallery-board__tabs a.is-active,
.gallery-board__tabs a:hover {
    border-color: #064698;
    background: rgba(6, 70, 152, 0.08);
    color: #064698;
}

.gallery-board__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.gallery-board__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gallery-board__card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.gallery-board__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(6, 70, 152, 0.08);
}

.gallery-board__card figure {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #f8fafc;
    overflow: hidden;
    margin: 0;
    flex-shrink: 0;
}

.gallery-board__card figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.gallery-board__card:hover figure img {
    transform: scale(1.05);
}

.gallery-board__badge {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border-radius: 999px;
    padding: 0 12px;
    background: rgba(6, 70, 152, 0.9);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.gallery-board__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 10px;
    padding: 22px;
}

.gallery-board__meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: #064698;
    font-size: 13px;
    font-weight: 700;
}

.gallery-board__content h3 {
    color: #111827;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
    margin: 0;
    word-break: keep-all;
}

.gallery-board__content p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
    word-break: keep-all;
    margin-top: auto;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.pagination__num {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination__num.is-active,
.pagination__num:hover {
    border-color: #064698;
    background: #064698;
    color: #ffffff;
}

@media screen and (max-width: 992px) {
    .gallery-board__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .gallery-board__head {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media screen and (max-width: 768px) {
    .premium-canvas-desk {
        padding: 28px 18px;
        border-radius: 14px;
    }
    .premium-row-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .canvas-header h1, .canvas-header h2 {
        font-size: 22px;
    }
    .blue-submit-btn {
        width: 100%;
    }
}

@media screen and (max-width: 640px) {
    .gallery-board__grid {
        grid-template-columns: 1fr;
    }
    .gallery-board__head h1, .gallery-board__head h2 {
        font-size: 24px;
    }
}

/* 📱 Ultra-compact Mobile (335px - 350px) Responsive Optimization */
@media screen and (max-width: 350px) {
    .gallery-board__tabs button,
    .gallery-board__tabs a {
        padding: 0 12px;
        font-size: 13px;
        min-height: 38px;
    }
    .gallery-board__content {
        padding: 16px;
    }
    .premium-canvas-desk {
        padding: 20px 14px;
    }
    .canvas-header h1, .canvas-header h2 {
        font-size: 20px;
    }
}