@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/NotoSansKR-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/NotoSansKR-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/NotoSansKR-Bold.woff2') format('woff2'); }

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif; line-height: 1.6; color: #333; background: #ededed; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; height: auto; }

/* Mobile Call Bar */
#callbook { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #e0efff; z-index: 9999; }
#callbook .bar-inner { display: flex; align-items: stretch; position: relative; }
#callbook a.actioncall, #callbook a.actionbook { flex: 1; display: flex; align-items: center; justify-content: center; padding: 18px 15px; font-size: 17px; font-weight: 600; font-family: 'Noto Sans KR', sans-serif; color: #000; }
#callbook a.actioncall svg { width: 22px; height: 22px; margin-right: 8px; }
#callbook a.actionbook svg { width: 22px; height: 22px; margin-left: 8px; }
#callbook a:hover { color: #ccc; }
#callbook .callbook_logo { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
#callbook .callbook_logo a { display: flex; align-items: center; justify-content: center; width: 75px; height: 75px; background: #e0efff; border-radius: 50%; color: #000; box-shadow: 0 -2px 8px rgba(0,0,0,0.15); }
#callbook .callbook_logo a svg { width: 45px; height: 45px; }
.callbook-icon { margin: 0 5px; }

/* Header */
.fusion-header-wrapper { background: #fff; position: relative; z-index: 1000; }
.fusion-header-wrapper.menu-hover { box-shadow: 0 3px 6px rgba(0,0,0,0.15); }
.fusion-header { max-width: 1100px; margin: 0 auto; padding: 25px 20px; display: flex; align-items: center; justify-content: space-between; }
.fusion-logo img { height: auto; max-height: 52px; width: auto; object-fit: contain; position: relative; top: 5px; }

/* Main Navigation - Avada Style */
.fusion-main-menu > ul { display: flex; height: 100%; }
.fusion-main-menu > ul > li { position: relative; display: flex; align-items: center; height: 102px; margin-top: -25px; margin-bottom: -25px; }
.fusion-main-menu > ul > li > a { display: flex; align-items: center; padding: 0 17px; height: 100%; font-size: 15px; font-weight: 700; color: #333; transition: all 0.2s; }
.fusion-main-menu > ul > li:hover > a { background: linear-gradient(to right, rgba(0,0,0,0.015), transparent 15px, transparent calc(100% - 15px), rgba(0,0,0,0.015)), #efefef; color: #0061b7; }
.fusion-main-menu > ul > li:hover > .sub-menu { display: block; }

/* Sub Menu - Avada Style (1단계 서브메뉴) */
.sub-menu { display: none; position: absolute; top: 100%; left: 0; background: #1a1a1a; min-width: 170px; border: none; z-index: 100; }
.sub-menu li { border-bottom: 1px solid #005ca3; position: relative; }
.sub-menu li:last-child { border-bottom: none; }
.sub-menu li a { display: block; padding: 10px 18px; font-size: 13px; color: #f2f2f2; transition: all 0.2s; background: transparent; }
.sub-menu li a:hover { background: #024487; color: #fff; }
.sub-menu .menu-section-title a { color: #fff; font-weight: 700; }
.sub-menu .menu-section-title a:hover { background: #024487; }
.sub-menu .menu-sub-item a::before { content: "-- "; color: #888; }

/* 3단계 서브메뉴 - 원본 사이트 스타일 */
.sub-menu > li.menu-item > ul.sub-menu {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    border-top: 0px !important;
    background: #1a1a1a;
}
.sub-menu > li.menu-item > ul.sub-menu > li a:before {
    content: "-- ";
    color: #888;
}

/* e-Catalog Button */
.btn-catalog { background: linear-gradient(to bottom, #5bc0de, #31b0d5); color: #fff !important; border-radius: 4px; padding: 8px 18px !important; font-size: 13px !important; border: 1px solid #31b0d5; }
.btn-catalog:hover { background: linear-gradient(to bottom, #31b0d5, #269abc); }

/* Mobile Menu Toggle */
.fusion-mobile-menu-icons { display: none; cursor: pointer; padding: 10px; position: relative; }
.fusion-mobile-menu-icons > span { display: block; width: 22px; height: 2px; background: #333; margin: 5px 0; }


/* PC/Mobile 메뉴 구분 */
.fusion-main-menu-mobile { display: none; }
.fusion-main-menu-pc { display: block; }

/* Hero Slider */
.fusion-slider-container { position: relative; width: 100%; height: 640px; overflow: hidden; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s; background-size: cover; background-position: center; }
.slide.active { opacity: 1; }
.slide-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; width: 90%; }
.slide-content h1 { font-size: 38px; font-weight: 400; margin-bottom: 15px; }
.slide-content h5 { font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.slide-content .title-sep { width: 60px; height: 1px; background: #fff; }
.slide-content .slider-phone { font-size: 80px; font-weight: 900; color: #fff; margin: 0; text-shadow: 3px 3px 6px rgba(0,0,0,0.8); letter-spacing: 2px; }
.slider-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 63px; height: 63px; background: rgba(0,0,0,0.4); color: #fff; font-size: 25px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; }
.slider-nav.prev { left: 0; }
.slider-nav.next { right: 0; }

/* Contact Bar */
.contact-bar { background: #00557a; padding: 18px 0; text-align: center; }
.contact-bar p { color: #e6e6e6; font-size: 26px; font-weight: 600; margin: 0; }
.contact-bar .phone { font-weight: 700; }
.contact-bar .kakao { color: #ffff00; font-weight: 700; }

/* Product Section - Full Width with Background */
.product-section { width: 100%; padding: 40px 20px 70px; background: url('../images/bg-pattern.jpg') center/cover; }
.product-inner { max-width: 1100px; margin: 0 auto; }
.product-header { text-align: center; margin-bottom: 30px; }
.product-header h2 { font-family: 'Times New Roman', serif; font-size: 36px; font-weight: 700; color: #000; }
.product-header p { font-size: 14px; color: #333; }

/* Size Title */
.size-title { font-family: Impact, Chicago, sans-serif; font-size: 20px; color: #333; padding-bottom: 8px; border-bottom: 1px solid #333; margin: 25px 0 15px; display: flex; align-items: center; }
.size-title a { font-family: 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: 700; color: #000; margin-left: 15px; }

/* Product Grid - 5 columns */
.product-row { display: flex; gap: 2%; margin-bottom: 5px; }
.product-item { flex: 0 0 18.4%; overflow: hidden; }
.product-item a { display: block; overflow: hidden; }
.product-item img { width: 100%; transition: transform 0.3s; }
.product-item a:hover img { transform: scale(1.1); }

/* WooRim Section */
.woorim-section { background: #ededed url('../images/woorim-bg.jpg') center/cover fixed; padding: 0 20px 70px; }
.woorim-inner { max-width: 1100px; margin: 0 auto; }
.triangle-divider { text-align: center; padding-top: 30px; margin-bottom: 50px; position: relative; }
.triangle-divider::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border-left: 21px solid transparent; border-right: 21px solid transparent; border-top: 21px solid #fff; }
.woorim-header { text-align: center; margin-bottom: 25px; }
.woorim-header h2 { font-family: 'Times New Roman', serif; font-size: 36px; font-weight: 700; color: #000; }
.woorim-header p { font-size: 14px; color: #333; }

/* WooRim Content - 4 Column Layout */
.woorim-content { display: flex; gap: 2%; align-items: stretch; }
.notice-section { flex: 0 0 48%; }
.tabs-nav { display: flex; border-bottom: 3px solid #028dce; }
.tabs-nav button { background: #d8d8d8; border: none; padding: 12px 20px; font-size: 17px; font-weight: 700; cursor: pointer; flex: 1; }
.tabs-nav button.active { background: transparent; }
.tab-content { padding: 15px 0; }
.notice-list { font-size: 13px; }
.notice-list li { padding: 8px 0; border-bottom: 1px dotted #ccc; }
.notice-list a:hover { color: #028dce; }

.image-links { flex: 0 0 23%; display: flex; flex-direction: column; gap: 2px; }
.image-links a { display: block; border: 1px solid #c9c9c9; overflow: hidden; }
.image-links img { width: 100%; transition: transform 0.3s; }
.image-links a:hover img { transform: scale(1.1); }

.button-links { flex: 0 0 21%; display: flex; flex-direction: column; gap: 3px; margin-left: auto; }
.button-links a { display: flex; align-items: center; justify-content: center; background: #51697f; color: #ededed; padding: 8px 15px; border-radius: 25px; font-size: 13px; border: 2px solid #ededed; transition: background 0.2s; gap: 6px; }
.button-links a:hover { background: #000; }
.button-links .btn-icon { flex-shrink: 0; }

/* Map Box */
.map-box { flex: 1; border: 1px solid #c9c9c9; overflow: hidden; }
.map-box iframe { width: 100%; height: 100%; display: block; }

/* Contact Info Box */
.contact-info-box { flex: 0 0 33%; background: #fff; border: 1px solid #c9c9c9; padding: 20px; }
.contact-info-box h4 { font-size: 16px; font-weight: 700; color: #333; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #51697f; }
.contact-info-box ul { list-style: none; }
.contact-info-box li { padding: 8px 0; font-size: 14px; color: #333; border-bottom: 1px solid #eee; white-space: nowrap; }
.contact-info-box li:last-child { border-bottom: none; }
.contact-info-box strong { display: inline-block; width: 60px; color: #51697f; font-weight: 600; }

/* Page Title Bar */
.page-title-bar { background: #00557a; padding: 40px 20px; text-align: center; }
.page-title-bar h1 { color: #fff; font-size: 28px; font-weight: 700; margin: 0; }

/* Estimate Section */
.estimate-section { background: #ededed; padding: 50px 20px 70px; }
.estimate-inner { max-width: 800px; margin: 0 auto; }
.estimate-form-container { background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.estimate-form-container h2 { font-size: 24px; color: #333; margin-bottom: 10px; text-align: center; }
.estimate-form-container .form-desc { text-align: center; color: #666; margin-bottom: 30px; font-size: 14px; }

/* Form Styles */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 14px; font-weight: 600; color: #333; margin-bottom: 8px; }
.form-group .required { color: #e74c3c; }
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group textarea { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; font-family: 'Noto Sans KR', sans-serif; transition: border-color 0.2s; }
.form-group input:focus,
.form-group textarea:focus { outline: none; border-color: #00557a; }
.form-group textarea { resize: vertical; min-height: 150px; }

/* Privacy Box */
.privacy-group { margin-top: 30px; }
.privacy-box { background: #f9f9f9; border: 1px solid #ddd; border-radius: 4px; padding: 20px; margin-bottom: 15px; }
.privacy-box h4 { font-size: 14px; font-weight: 700; color: #333; margin-bottom: 10px; }
.privacy-content { max-height: 120px; overflow-y: auto; font-size: 13px; color: #666; line-height: 1.8; }
.privacy-content p { margin-bottom: 5px; }
.checkbox-label { display: flex; align-items: center; cursor: pointer; font-size: 14px; color: #333; }
.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; margin-right: 10px; cursor: pointer; }

/* Captcha */
.captcha-group { margin-top: 20px; }
.captcha-box { display: flex; align-items: center; gap: 10px; margin-top: 8px; margin-bottom: 10px; }
.captcha-image { height: 50px; border: 1px solid #ccc; }
.captcha-refresh { background: #555; color: #fff; border: none; padding: 12px 20px; font-size: 14px; cursor: pointer; border-radius: 4px; }
.captcha-refresh:hover { background: #333; }
.captcha-group input[type="text"] { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }

/* Submit Button */
.form-submit { margin-top: 30px; text-align: center; }
.submit-btn { background: #00557a; color: #fff; border: none; padding: 15px 50px; font-size: 16px; font-weight: 600; border-radius: 4px; cursor: pointer; transition: background 0.2s; }
.submit-btn:hover { background: #003d59; }

/* Complete Page */
.complete-message { text-align: center; padding: 60px 20px; }
.complete-icon { width: 80px; height: 80px; background: #27ae60; color: #fff; font-size: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; }
.complete-message h2 { font-size: 24px; color: #333; margin-bottom: 15px; }
.complete-message p { font-size: 14px; color: #666; margin-bottom: 10px; }
.back-home-btn { display: inline-block; margin-top: 30px; background: #00557a; color: #fff; padding: 12px 30px; border-radius: 4px; font-size: 14px; font-weight: 600; transition: background 0.2s; }
.back-home-btn:hover { background: #003d59; }

/* Products Page - Original Style */
#main.clearfix { background: #fff; }
#main .fusion-row { max-width: 1100px; margin: 0 auto; padding: 40px 20px 60px; }
#content.full-width { width: 100%; }
.post-content { overflow: hidden; }
.fusion-fullwidth.fullwidth-box { padding: 0; }
.fusion-title.title { border-bottom: 3px solid #e0dede; margin-bottom: 20px; padding-bottom: 15px; }
.fusion-title-heading.title-heading-left { font-family: 'Noto Sans KR', sans-serif; font-weight: 400; }

/* Footer - Original Style */
.fusion-footer { background-color: #3b6a7c; padding: 0; }
.footer-copyright { background-color: #3b6a7c; padding: 30px 20px; text-align: center; }
.footer-copyright p { color: #fff; font-size: 13px; max-width: 1100px; margin: 0 auto; line-height: 2; }
.footer-copyright b { font-weight: 700; }

/* Responsive */
@media (max-width: 1024px) {
    .fusion-slider-container { height: 450px; }
    .slide-content h1 { font-size: 28px; }
    .woorim-content { flex-wrap: wrap; }
    .notice-section { flex: 0 0 100%; margin-bottom: 20px; }
    .image-links { flex: 0 0 48%; flex-direction: row; gap: 4%; }
    .image-links a { flex: 1; }
    .button-links { flex: 0 0 48%; }
}

@media (max-width: 800px) {
    .fusion-header-wrapper { position: relative; z-index: 1000; }
    .fusion-header { padding: 15px 20px; }
    .fusion-logo img { height: 40px; width: auto; }
    /* PC 메뉴 숨기고 모바일 메뉴 표시 */
    .fusion-main-menu-pc { display: none !important; }
    .fusion-main-menu-mobile { display: block !important; }
    /* 모바일 메뉴: 문서 흐름에 포함, 슬라이드 애니메이션 */
    .fusion-main-menu-mobile { position: static !important; background: #fff; box-shadow: none; border-top: 1px solid #eee; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
    .fusion-main-menu-mobile.active { max-height: 2000px; transition: max-height 0.5s ease-in; }
    .fusion-main-menu > ul { display: block !important; width: 100%; }
    .fusion-main-menu > ul > li { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; position: relative; }
    .fusion-main-menu > ul > li > a { display: block !important; width: 100% !important; padding: 12px 30px !important; height: auto !important; border-bottom: 1px solid #eee; font-size: 15px !important; font-weight: 700 !important; color: #333 !important; background: #fff !important; }
    .fusion-main-menu > ul > li:hover > a { background: #fff !important; color: #333 !important; }
    /* 모바일: 서브메뉴 항상 펼침 */
    .sub-menu { display: block !important; position: static !important; background: #fff !important; width: 100% !important; min-width: 100% !important; border: none !important; }
    .sub-menu li { display: block !important; width: 100% !important; border-bottom: 1px solid #eee !important; }
    .sub-menu li a { display: block !important; width: 100% !important; padding: 10px 30px 10px 50px !important; font-size: 14px !important; color: #555 !important; background: #fff !important; font-weight: 500 !important; }
    .sub-menu li a::before { content: "- " !important; color: #555 !important; }
    .sub-menu li a:hover { background: #f5f5f5 !important; color: #333 !important; }
    .sub-menu .menu-section-title a { color: #555 !important; font-weight: 600 !important; }
    .sub-menu .menu-section-title a::before { content: "- " !important; color: #555 !important; }
    .sub-menu .menu-sub-item a { padding-left: 80px !important; }
    .sub-menu .menu-sub-item a::before { content: "-- " !important; color: #555 !important; }
    /* e-카탈로그 모바일 스타일 */
    .fusion-main-menu > ul > li > a.btn-catalog { background: #fff !important; color: #333 !important; border: none !important; padding: 12px 30px !important; font-size: 15px !important; font-weight: 700 !important; border-radius: 0 !important; }
    .fusion-mobile-menu-icons { display: none; }
    /* 모바일 메뉴 기본 열림 상태 */
    .fusion-main-menu-mobile { max-height: 2000px !important; }
    #callbook { display: block; }
    body { padding-bottom: 60px; }
    .contact-bar { display: none; }
    .fusion-slider-container { height: 300px; }
    .slider-nav { width: 35px; height: 35px; font-size: 16px; }
    .slide-content h1 { font-size: 18px; }
    .slide-content .slider-phone { font-size: 28px; letter-spacing: 0; }
    .slide-content h5 { font-size: 12px; }
    .product-row { flex-wrap: wrap; }
    .product-item { flex: 0 0 100%; margin-bottom: 10px; }
    .image-links { flex: 0 0 100%; flex-direction: column; }
    .button-links { flex: 0 0 100%; }
    .map-box { flex: 0 0 100%; min-height: 200px; }
    .contact-info-box { flex: 0 0 100%; }
    /* Estimate page mobile */
    .page-title-bar { padding: 30px 15px; }
    .page-title-bar h1 { font-size: 22px; }
    .estimate-section { padding: 30px 15px 50px; }
    .estimate-form-container { padding: 25px 20px; }
    .estimate-form-container h2 { font-size: 20px; }
    .complete-message { padding: 40px 15px; }
    .complete-icon { width: 60px; height: 60px; font-size: 30px; }
    .complete-message h2 { font-size: 20px; }
    /* Products page mobile */
    #main .fusion-row { padding: 20px 15px 40px; }
}