/**
 * 프리코스 헤더 컴포넌트 - CSS
 * 버전: 1.0.0
 * 최종 수정: 2025-01-06
 *
 * 본 사이트(freecos.net)에 삽입하기 위한 서버 배포용 CSS
 * 모든 클래스에 'fc-' 접두사를 사용하여 충돌 방지
 */

/* ========================================
 CSS 변수
 ======================================== */
:root { --fc-primary: #2563eb; --fc-gray-50: #f9fafb; --fc-gray-100: #f3f4f6; --fc-gray-200: #e5e7eb; --fc-gray-300: #d1d5db; --fc-gray-400: #9ca3af; --fc-gray-500: #6b7280; --fc-gray-600: #4b5563; --fc-gray-700: #374151; --fc-gray-800: #1f2937;  } 

/* ========================================
 PC 헤더 (768px 이상)
 ======================================== */
.fc-pc-header-wrapper { background: #fff; border-bottom: 1px solid var(--fc-gray-200);  } 
.fc-pc-header { display: flex; align-items: center; padding: 20px; background: #fff; gap: 50px; max-width: 1400px; margin: 0 auto; } 
.fc-logo { 
 font-size: 32px; 
 font-weight: bold; 
 color: #1a365d; 
 letter-spacing: -1px; 
 flex-shrink: 0; 
 margin-left: 20px; 
 } 

.fc-search-box { 
 display: flex; 
 align-items: center; 
 border: 2px solid var(--fc-primary); 
 border-radius: 4px; 
 overflow: hidden; 
 width: 280px; 
 flex-shrink: 0; 
 } 

.fc-search-box input { 
 flex: 1; 
 padding: 10px 14px; 
 border: none; 
 outline: none; 
 font-size: 14px; 
 color: var(--fc-gray-500); 
 } 

.fc-search-box input::placeholder { 
 color: var(--fc-gray-400); 
 } 

.fc-search-box button { 
 background: #fff; 
 border: none; 
 padding: 10px 14px; 
 color: var(--fc-primary); 
 font-size: 16px; 
 cursor: pointer; 
 transition: background 0.2s, color 0.2s; 
 } 

.fc-search-box button:hover { 
 background: var(--fc-primary); 
 color: #fff; 
 } 

.fc-header-spacer { 
 flex: 1; 
 } 

/* PC: 헤더 우측 아이콘 버튼 (프리코스 스타일) */
.fc-icon-buttons-container { 
 display: flex; 
 align-items: center; 
 gap: 10px; 
 margin-left:auto;
 margin-top:7px;
 margin-right: -9px;
 } 

.fc-icon-btn { 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 justify-content: center; 
 width: 70px; 
 padding: 0; 
 text-decoration: none; 
 color: var(--fc-gray-600); 
 background: transparent; 
 border-radius: 6px; 
 transition: all 0.2s ease; 
 } 

.fc-icon-btn:hover { 
 color: var(--fc-primary); 
 transform: translateY(-2px); 
 } 

.fc-icon-btn:hover .fc-icon-img { 
 transform: scale(1.05); 
 } 

.fc-icon-btn .fc-icon-img { 
 width: 36px; 
 height: 36px; 
 margin-bottom: 6px; 
 object-fit: contain; 
 transition: transform 0.2s ease; 
 } 

.fc-icon-btn .fc-icon-svg { 
 width: 36px; 
 height: 36px; 
 margin-bottom: 0; 
 stroke: #555; 
 stroke-width: 1.5; 
 fill: none; 
 transition: all 0.2s ease; 
 } 

.fc-icon-btn:hover .fc-icon-svg { 
 stroke: var(--fc-primary); 
 transform: scale(1.05); 
 } 

.fc-icon-btn .fc-text { 
 font-family: "Noto Sans KR", sans-serif;
 font-size: 11px; 
 font-weight: 500; 
 text-align: center; 
 white-space: nowrap; 
 color: var(--fc-gray-700); 
 transition: color 0.2s ease; 
 } 

.fc-icon-btn:hover .fc-text { 
 color: var(--fc-primary); 
 } 

/* 비활성화 스타일 */
.fc-icon-btn.fc-disabled { 
 opacity: 0.5; 
 cursor: not-allowed; 
 } 

.fc-icon-btn.fc-disabled:hover { 
 transform: none; 
 color: var(--fc-gray-600); 
 } 

.fc-icon-btn.fc-disabled:hover .fc-icon-svg { 
 stroke: #555; 
 transform: none; 
 } 

.fc-icon-btn.fc-disabled:hover .fc-text { 
 color: var(--fc-gray-700); 
 } 

/* 드롭다운 메뉴 */
.fc-icon-btn-wrapper { 
 position: relative; 
 display: inline-block; 
 } 

.fc-dropdown-menu { 
 display: none; 
 position: absolute; 
 top: 100%; 
 left: 50%; 
 transform: translateX(-50%); 
 background: #fff; 
 border: 1px solid var(--fc-gray-200); 
 border-radius: 8px; 
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
 min-width: 140px; 
 z-index: 1000; 
 overflow: hidden; 
 } 

.fc-dropdown-menu.show { 
 display: block; 
 } 

.fc-dropdown-menu a { 
 display: block; 
 padding: 10px 14px; 
 color: var(--fc-gray-700); 
 font-size: 12px; 
 text-decoration: none; 
 border-bottom: 1px solid var(--fc-gray-100); 
 transition: background 0.2s; 
 } 

.fc-dropdown-menu a:last-child { 
 border-bottom: none; 
 } 

.fc-dropdown-menu a:hover { 
 background: var(--fc-gray-50); 
 color: var(--fc-primary); 
 } 

/* ========================================
 모바일 헤더 (768px 미만)
 ======================================== */
.fc-mobile-header { 
 display: none; 
 align-items: center; 
 justify-content: space-between; 
 padding: 15px 20px; 
 background: #fff; 
 border-bottom: 1px solid var(--fc-gray-200); 
 } 

.fc-mobile-header .fc-logo { 
 font-size: 26px; 
 margin-left: 0; 
 } 

.fc-header-icons { 
 display: flex; 
 align-items: center; 
 gap: 18px; 
 } 

.fc-header-icons a { 
 color: var(--fc-gray-500); 
 font-size: 22px; 
 transition: color 0.2s; 
 text-decoration: none; 
 } 

.fc-header-icons a:hover { 
 color: var(--fc-primary); 
 } 

/* 모바일: 헤더 아래 버튼 섹션 */
.fc-mobile-button-section { 
 display: none; 
 padding: 6px 15px; 
 background: #fff; 
 border-bottom: 1px solid var(--fc-gray-200); 
 } 

/* 모바일 아이콘 그리드 (프리코스 스타일) */
.fc-mobile-icon-grid { 
 display: grid; 
 grid-template-columns: repeat(6, 1fr); 
 gap: 4px; 
 padding: 0; 
 background: #fff; 
 } 

.fc-mobile-icon-btn { 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 justify-content: center; 
 padding: 6px 2px; 
 text-decoration: none; 
 color: var(--fc-gray-600); 
 background: transparent; 
 border-radius: 8px; 
 transition: all 0.2s ease; 
 } 

.fc-mobile-icon-btn:hover,
.fc-mobile-icon-btn:active { 
 color: var(--fc-primary); 
 transform: translateY(-2px); 
 } 

.fc-mobile-icon-btn:hover .fc-icon-img,
.fc-mobile-icon-btn:active .fc-icon-img { 
 transform: scale(1.05); 
 } 

.fc-mobile-icon-btn .fc-icon-img { 
 width: 28px; 
 height: 28px; 
 margin-bottom: 4px; 
 object-fit: contain; 
 transition: transform 0.2s ease; 
 } 

.fc-mobile-icon-btn .fc-icon-svg { 
 width: auto; 
 height: 9vw; 
 margin-bottom: 0; 
 stroke: #555; 
 stroke-width: 1.5; 
 fill: none; 
 transition: all 0.2s ease; 
 } 

.fc-mobile-icon-btn:hover .fc-icon-svg,
.fc-mobile-icon-btn:active .fc-icon-svg { 
 stroke: var(--fc-primary); 
 transform: scale(1.05); 
 } 

.fc-mobile-icon-btn .fc-text { 
 font-size: 9px; 
 font-weight: 500; 
 text-align: center; 
 white-space: nowrap; 
 color: var(--fc-gray-700); 
 transition: color 0.2s ease; 
 } 

.fc-mobile-icon-btn:hover .fc-text,
.fc-mobile-icon-btn:active .fc-text { 
 color: var(--fc-primary); 
 } 

/* 모바일 비활성화 스타일 */
.fc-mobile-icon-btn.fc-disabled { 
 opacity: 0.5; 
 cursor: not-allowed; 
 } 

.fc-mobile-icon-btn.fc-disabled:hover,
.fc-mobile-icon-btn.fc-disabled:active { 
 transform: none; 
 color: var(--fc-gray-600); 
 } 

.fc-mobile-icon-btn.fc-disabled:hover .fc-icon-svg,
.fc-mobile-icon-btn.fc-disabled:active .fc-icon-svg { 
 stroke: #555; 
 transform: none; 
 } 

.fc-mobile-icon-btn.fc-disabled:hover .fc-text,
.fc-mobile-icon-btn.fc-disabled:active .fc-text { 
 color: var(--fc-gray-700); 
 } 

/* 모바일 드롭다운 */
.fc-mobile-dropdown-overlay { 
 display: none; 
 position: fixed; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 background: rgba(0, 0, 0, 0.4); 
 z-index: 9998; 
 } 

.fc-mobile-dropdown-overlay.show { 
 display: block; 
 } 

.fc-mobile-dropdown-menu { 
 display: none; 
 position: fixed; 
 top: 50%; 
 left: 50%; 
 transform: translate(-50%, -50%); 
 background: #fff; 
 border: 1px solid var(--fc-gray-200); 
 border-radius: 12px; 
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); 
 min-width: 200px; 
 z-index: 9999; 
 overflow: hidden; 
 } 

.fc-mobile-dropdown-menu.show { 
 display: block; 
 } 

.fc-mobile-dropdown-menu a { 
 display: block; 
 padding: 16px 20px; 
 color: var(--fc-gray-700); 
 font-size: 14px; 
 text-decoration: none; 
 border-bottom: 1px solid var(--fc-gray-100); 
 transition: background 0.2s; 
 text-align: center; 
 } 

.fc-mobile-dropdown-menu a:last-child { 
 border-bottom: none; 
 } 

.fc-mobile-dropdown-menu a:hover,
.fc-mobile-dropdown-menu a:active { 
 background: var(--fc-primary); 
 color: #fff; 
 } 

/* 모바일 검색 박스 */
.fc-mobile-search-overlay { 
 display: none; 
 position: fixed; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 background: rgba(0, 0, 0, 0.5); 
 z-index: 9998; 
 } 

.fc-mobile-search-overlay.show { 
 display: block; 
 } 

.fc-mobile-search-box { 
 display: none; 
 position: fixed; 
 top: 80px; 
 left: 50%; 
 transform: translateX(-50%); 
 width: calc(100% - 40px); 
 max-width: 400px; 
 background: #fff; 
 border-radius: 12px; 
 box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); 
 z-index: 9999; 
 padding: 8px; 
 } 

.fc-mobile-search-box.show { 
 display: flex; 
 align-items: center; 
 gap: 8px; 
 } 

.fc-mobile-search-box input { 
 flex: 1; 
 padding: 12px 16px; 
 border: 2px solid var(--fc-gray-200); 
 border-radius: 8px; 
 font-size: 16px; 
 outline: none; 
 } 

.fc-mobile-search-box input:focus { 
 border-color: var(--fc-primary); 
 } 

.fc-mobile-search-box button { 
 width: 44px; 
 height: 44px; 
 border: none; 
 border-radius: 8px; 
 background: var(--fc-primary); 
 color: #fff; 
 font-size: 18px; 
 cursor: pointer; 
 } 

.fc-mobile-search-box button.fc-close { 
 background: var(--fc-gray-200); 
 color: var(--fc-gray-600); 
 } 

/* 모바일 네비게이션 메뉴 */
.fc-mobile-nav-overlay { 
 display: none; 
 position: fixed; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 background: rgba(0, 0, 0, 0.5); 
 z-index: 9998; 
 } 

.fc-mobile-nav-overlay.show { 
 display: block; 
 } 

.fc-mobile-nav-menu { 
 display: none; 
 position: fixed; 
 top: 0; 
 right: -280px; 
 width: 280px; 
 height: 100%; 
 background: #fff; 
 z-index: 9999; 
 box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15); 
 transition: right 0.3s ease; 
 overflow-y: auto; 
 } 

.fc-mobile-nav-menu.show { 
 display: block; 
 right: 0; 
 } 

.fc-mobile-nav-header { 
 display: flex; 
 justify-content: space-between; 
 align-items: center; 
 padding: 20px; 
 border-bottom: 1px solid var(--fc-gray-200); 
 background: var(--fc-primary); 
 color: #fff; 
 } 

.fc-mobile-nav-header span { 
 font-size: 18px; 
 font-weight: 600; 
 } 

.fc-mobile-nav-header button { 
 width: 32px; 
 height: 32px; 
 border: none; 
 background: rgba(255, 255, 255, 0.2); 
 color: #fff; 
 border-radius: 50%; 
 font-size: 16px; 
 cursor: pointer; 
 } 

.fc-mobile-nav-menu>a { 
 display: block; 
 padding: 16px 20px; 
 color: var(--fc-gray-700); 
 font-size: 15px; 
 font-weight: 500; 
 text-decoration: none; 
 border-bottom: 1px solid var(--fc-gray-100); 
 transition: background 0.2s; 
 } 

.fc-mobile-nav-menu>a:hover,
.fc-mobile-nav-menu>a:active { 
 background: var(--fc-gray-50); 
 color: var(--fc-primary); 
 } 

/* ========================================
   네비게이션 바
   ======================================== */
.fc-nav-bar {
    background: var(--fc-primary);
}

.fc-nav-bar ul {
    display: flex;
    list-style: none;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 네비게이션 바 로그인 영역 */
.fc-nav-login-item {
    margin-left: auto !important;
	margin-right:1px !important;
	padding:0 !important;
    font-family: "Noto Sans KR", sans-serif;
}

.fc-nav-user-wrapper {
    position: relative;
}

.fc-nav-login-text {
    display: block;
    padding: 18px 20px !important;
    color: rgba(255,255,255,0.9) !important;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    background: transparent;
}

.fc-nav-login-text:hover {
    background: #4974ba;
    color: #fff;
}

.fc-nav-login-brand {
    font-weight: 700;
}

.fc-nav-user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    margin-top: 0;
    background: #4974ba;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    min-width: 130px;
    z-index: 1000;
    overflow: hidden;
}

.fc-nav-user-dropdown.show {
    display: block;
}

.fc-nav-user-dropdown a {
    display: block;
    padding: 12px 16px;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    transition: background 0.2s;
}

.fc-nav-user-dropdown a:last-child {
    border-bottom: none;
}

.fc-nav-user-dropdown a:hover {
    background: #1b51ab !important;
    color: #fff;
}

.fc-nav-bar li a {
    display: block;
    padding: 14px 20px;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
    font-size: 15px;
    transition: background 0.2s;
    text-decoration: none;
}

.fc-nav-bar li a:hover {
    background: #4974ba;
    color: #fff;
}

.fc-nav-bar li a.active {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-weight: 600;
}

/* ========================================
 서브 카테고리 바 (메뉴 호버 시 표시)
 ======================================== */
.fc-sub-category-bar { 
 background: #fff; 
 border-bottom: 1px solid var(--fc-gray-200); 
 max-height: 0; 
 opacity: 0; 
 overflow: hidden; 
 transition: max-height 0.4s ease, opacity 0.3s ease; 
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); 
 } 

.fc-sub-category-bar.active { 
 max-height: 400px; 
 opacity: 1; 
 } 

.fc-sub-category-bar-inner { 
 max-width: 1400px; 
 margin: 0 auto; 
 padding: 12px 20px; 
 display: grid; 
 grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); 
 gap: 6px; 
 } 

.fc-mega-item { 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 justify-content: center; 
 padding: 8px 4px; 
 text-decoration: none; 
 color: var(--fc-gray-700); 
 background: var(--fc-gray-50); 
 border-radius: 8px; 
 transition: all 0.2s ease; 
 border: 1px solid transparent; 
 min-height: 60px; 
 } 

.fc-mega-item:hover { 
 color: var(--fc-primary); 
 background: #fff; 
 transform: translateY(-2px); 
 border-color: var(--fc-primary); 
 box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12); 
 } 

.fc-mega-icon { 
 font-size: 18px; 
 margin-bottom: 4px; 
 opacity: 0.9; 
 } 

.fc-mega-text { 
 font-size: 11px; 
 font-weight: 500; 
 text-align: center; 
 line-height: 1.2; 
 } 

/* ========================================
 카테고리 배너 슬라이드
 ======================================== */
.fc-category-banner-section { 
 display: none; 
 /* 배너 비활성화 - 업체 선정 후 제거 */
 position: relative; 
 max-width: 1400px; 
 margin: 0 auto; 
 padding: 0 20px; 
 overflow: hidden; 
 max-height: 0; 
 opacity: 0; 
 transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease; 
 } 

.fc-category-banner-section.active { 
 /* display: block; */
 /* 배너 비활성화 - 업체 선정 후 활성화 */
 max-height: 400px; 
 opacity: 1; 
 padding: 20px; 
 } 

/* 닫기 버튼 */
.fc-banner-close-btn { 
 position: absolute; 
 top: 25px; 
 right: 25px; 
 width: 36px; 
 height: 36px; 
 border-radius: 50%; 
 border: none; 
 background: rgba(255, 255, 255, 0.9); 
 color: var(--fc-gray-600); 
 font-size: 16px; 
 cursor: pointer; 
 transition: all 0.2s; 
 z-index: 20; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 
 } 

.fc-banner-close-btn:hover { 
 background: #fff; 
 color: var(--fc-gray-800); 
 transform: scale(1.1); 
 } 

.fc-category-banner-wrap { 
 position: relative; 
 display: flex; 
 gap: 12px; 
 border-radius: 10px; 
 overflow: hidden; 
 } 

/* 메인 배너 (좌측 큰 배너) */
.fc-main-slide-banner { 
 flex: 0 0 45%; 
 position: relative; 
 border-radius: 10px; 
 overflow: hidden; 
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
 } 

.fc-slide-item { 
 display: none; 
 height: 200px; 
 padding: 25px 30px; 
 position: relative; 
 } 

.fc-slide-item.active { 
 display: flex; 
 align-items: center; 
 gap: 20px; 
 } 

.fc-slide-content { 
 flex: 1; 
 } 

.fc-slide-item .fc-company { 
 font-size: 13px; 
 margin-bottom: 8px; 
 opacity: 0.8; 
 } 

.fc-slide-item h3 { 
 font-size: 24px; 
 font-weight: 700; 
 line-height: 1.35; 
 margin-bottom: 10px; 
 } 

.fc-slide-image { 
 width: 120px; 
 height: 120px; 
 background: rgba(255, 255, 255, 0.3); 
 border-radius: 12px; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 font-size: 50px; 
 } 

/* 슬라이드 색상 */
.fc-slide-pink { 
 background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%); 
 color: #880e4f; 
 } 

.fc-slide-green { 
 background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); 
 color: #1b5e20; 
 } 

.fc-slide-purple { 
 background: linear-gradient(135deg, #ede7f6 0%, #d1c4e9 100%); 
 color: #4a148c; 
 } 

.fc-slide-orange { 
 background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); 
 color: #e65100; 
 } 

/* 슬라이드 컨트롤 */
.fc-slide-dots { 
 position: absolute; 
 bottom: 15px; 
 left: 50%; 
 transform: translateX(-50%); 
 display: flex; 
 gap: 8px; 
 } 

.fc-slide-dot { 
 width: 10px; 
 height: 10px; 
 border-radius: 50%; 
 border: none; 
 background: rgba(255, 255, 255, 0.5); 
 cursor: pointer; 
 transition: background 0.3s, transform 0.2s; 
 } 

.fc-slide-dot:hover { 
 background: rgba(255, 255, 255, 0.8); 
 transform: scale(1.2); 
 } 

.fc-slide-dot.active { 
 background: #fff; 
 } 

.fc-slide-arrow { 
 position: absolute; 
 top: 50%; 
 transform: translateY(-50%); 
 width: 36px; 
 height: 36px; 
 border-radius: 50%; 
 border: none; 
 background: rgba(255, 255, 255, 0.9); 
 cursor: pointer; 
 font-size: 14px; 
 color: var(--fc-gray-700); 
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
 z-index: 10; 
 transition: background 0.2s, transform 0.2s; 
 } 

.fc-slide-arrow:hover { 
 background: #fff; 
 transform: translateY(-50%) scale(1.1); 
 } 

.fc-slide-arrow.fc-prev { 
 left: 10px; 
 } 

.fc-slide-arrow.fc-next { 
 right: 10px; 
 } 

/* 서브 배너 (우측 3개) */
.fc-sub-banners { 
 flex: 1; 
 display: flex; 
 gap: 12px; 
 } 

.fc-sub-banner { 
 flex: 1; 
 background: #fff; 
 border-radius: 10px; 
 padding: 20px 15px; 
 text-align: center; 
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); 
 display: flex; 
 flex-direction: column; 
 justify-content: center; 
 transition: transform 0.2s, box-shadow 0.2s; 
 cursor: pointer; 
 text-decoration: none; 
 } 

.fc-sub-banner:hover { 
 transform: translateY(-3px); 
 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); 
 } 

.fc-sub-banner .fc-company { 
 font-size: 11px; 
 color: var(--fc-gray-500); 
 margin-bottom: 8px; 
 } 

.fc-sub-banner .fc-title { 
 font-size: 14px; 
 font-weight: 600; 
 color: var(--fc-gray-800); 
 line-height: 1.4; 
 margin-bottom: 6px; 
 } 

.fc-sub-banner .fc-desc { 
 font-size: 12px; 
 color: var(--fc-primary); 
 } 

/* 특수 스타일 서브 배너 */
.fc-sub-banner.fc-dark { 
 background: linear-gradient(135deg, #5a3d2b 0%, #8b6914 100%); 
 } 

.fc-sub-banner.fc-dark .fc-company { 
 color: rgba(255, 255, 255, 0.7); 
 } 

.fc-sub-banner.fc-dark .fc-title { 
 color: #fff; 
 } 

.fc-sub-banner.fc-dark .fc-desc { 
 color: rgba(255, 255, 255, 0.8); 
 } 

/* ========================================
 튜브 단가 모달
 ======================================== */
.fc-price-modal-overlay { 
 display: none; 
 position: fixed; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 background: rgba(0, 0, 0, 0.5); 
 z-index: 9999; 
 justify-content: center; 
 align-items: center; 
 overscroll-behavior: contain; 
 } 

.fc-price-modal-overlay.show { 
 display: flex; 
 } 

.fc-price-modal-container { 
 background: #fff; 
 padding: 20px; 
 border-radius: 16px; 
 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); 
 max-width: 420px; 
 width: calc(100% - 30px); 
 max-height: 90vh; 
 overflow-y: auto; 
 overscroll-behavior: contain; 
 -webkit-overflow-scrolling: touch; 
 animation: fcPriceModalSlideUp 0.3s ease-out; 
 } 

@keyframes fcPriceModalSlideUp { 
 from { 
 opacity: 0; 
 transform: translateY(20px); 
 } 

 to { 
 opacity: 1; 
 transform: translateY(0); 
 } 
 } 

.fc-price-modal-header { 
 display: flex; 
 justify-content: flex-end; 
 margin-bottom: 8px; 
 } 

.fc-price-modal-close { 
 width: 32px; 
 height: 32px; 
 border: none; 
 background: transparent; 
 color: #6b7280; 
 font-size: 24px; 
 cursor: pointer; 
 border-radius: 50%; 
 transition: all 0.2s; 
 } 

.fc-price-modal-close:hover { 
 background: #f3f4f6; 
 color: #374151; 
 } 

.fc-price-info-box { 
 background: #f3f4f6; 
 padding: 12px; 
 border-radius: 8px; 
 margin-bottom: 16px; 
 } 

.fc-price-info-box p { 
 font-size: 12px; 
 color: #4b5563; 
 margin-bottom: 4px; 
 line-height: 1.5; 
 } 

.fc-price-info-box .fc-note { 
 font-size: 11px; 
 color: #9ca3af; 
 } 

.fc-price-fields { 
 display: flex; 
 flex-direction: column; 
 gap: 12px; 
 } 

.fc-price-field label { 
 display: block; 
 font-size: 12px; 
 font-weight: 500; 
 color: #374151; 
 margin-bottom: 4px; 
 } 

.fc-price-field select { 
 width: 100%; 
 padding: 10px 12px; 
 border: 1px solid #d1d5db; 
 border-radius: 8px; 
 font-size: 14px; 
 color: #374151; 
 background: #fff; 
 cursor: pointer; 
 transition: border-color 0.2s; 
 appearance: none; 
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); 
 background-repeat: no-repeat; 
 background-position: right 12px center; 
 } 

.fc-price-field select:focus { 
 outline: none; 
 border-color: #2563eb; 
 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); 
 } 

.fc-price-result { 
 display: flex; 
 justify-content: space-between; 
 align-items: center; 
 padding: 16px; 
 border: 1px solid #e5e7eb; 
 border-radius: 8px; 
 margin-top: 16px; 
 } 

.fc-price-label { 
 font-size: 14px; 
 color: #374151; 
 } 

.fc-price-label .fc-sub { 
 font-size: 11px; 
 color: #9ca3af; 
 } 

.fc-price-value { 
 font-size: 22px; 
 font-weight: 700; 
 color: #1f2937; 
 } 

.fc-price-reset-btn { 
 width: 100%; 
 margin-top: 12px; 
 padding: 12px; 
 background: #4b5563; 
 color: #fff; 
 border: none; 
 border-radius: 8px; 
 font-size: 14px; 
 font-weight: 500; 
 cursor: pointer; 
 transition: background 0.2s; 
 } 

.fc-price-reset-btn:hover { 
 background: #374151; 
 } 

/* ========================================
 freecos.net iframe (테스트용)
 ======================================== */
.fc-iframe-container { 
 max-width: 1400px; 
 margin: 0 auto; 
 padding: 0 20px 20px; 
 display: block; 
 overflow: hidden; 
 border-radius: 8px; 
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); 
 } 

.fc-iframe { 
 width: 100%; 
 height: calc(100vh + 100px); 
 min-height: 1000px; 
 border: none; 
 background: #fff; 
 margin-top: -320px; 
 } 

/* ========================================
 반응형: 모바일 (768px 미만)
 ======================================== */
@media (max-width: 768px) { 

 /* PC 헤더 숨김, 모바일 헤더 표시 */
 .fc-pc-header-wrapper { 
 display: none; 
 } 

 .fc-mobile-header { 
 display: flex; 
 } 

 .fc-mobile-button-section { 
 display: block; 
 } 

 /* 모바일에서 iframe 숨김 */
 .fc-iframe-container { 
 display: none !important; 
 } 

 /* 모바일 카테고리 배너 - 세로 레이아웃 */
 .fc-category-banner-section { 
 padding: 0 15px; 
 } 

 .fc-category-banner-section.active { 
 padding: 15px; 
 max-height: 800px; 
 } 

 .fc-category-banner-wrap { 
 flex-direction: column; 
 gap: 10px; 
 } 

 .fc-main-slide-banner { 
 flex: none; 
 width: 100%; 
 } 

 .fc-slide-item { 
 height: 160px; 
 padding: 20px; 
 } 

 .fc-slide-item h3 { 
 font-size: 18px; 
 } 

 .fc-slide-image { 
 width: 80px; 
 height: 80px; 
 font-size: 36px; 
 } 

 .fc-sub-banners { 
 flex-direction: column; 
 gap: 8px; 
 width: 100%; 
 } 

 .fc-sub-banner { 
 padding: 15px; 
 width: 100%; 
 } 

 /* 모바일 닫기 버튼 */
 .fc-banner-close-btn { 
 top: 20px; 
 right: 20px; 
 width: 32px; 
 height: 32px; 
 font-size: 14px; 
 } 

 /* 네비게이션 */
 .fc-nav-bar { 
 overflow-x: auto; 
 } 

 .fc-nav-bar ul { 
 flex-wrap: nowrap; 
 min-width: max-content; 
 padding: 0 15px; 
 } 

 .fc-nav-bar li a { 
 padding: 12px 15px; 
 font-size: 14px; 
 white-space: nowrap; 
 } 

 /* 서브 카테고리 바 모바일 (메가 메뉴) */
 .fc-sub-category-bar.active { 
 max-height: 500px; 
 } 

 .fc-sub-category-bar-inner { 
 padding: 16px 12px; 
 grid-template-columns: repeat(3, 1fr); 
 gap: 8px; 
 } 

 .fc-mega-item { 
 padding: 12px 6px; 
 min-height: 70px; 
 border-radius: 10px; 
 } 

 .fc-mega-icon { 
 font-size: 20px; 
 margin-bottom: 6px; 
 } 

 .fc-mega-text { 
 font-size: 10px; 
 } 
 } 

/* ========================================
 반응형: 소형 모바일 (480px 미만)
 ======================================== */
@media (max-width: 480px) { 
 .fc-mobile-header { 
 padding: 12px 15px; 
 } 

 .fc-mobile-header .fc-logo { 
 font-size: 22px; 
 } 

 .fc-header-icons { 
 gap: 15px; 
 } 

 .fc-header-icons a { 
 font-size: 20px; 
 } 

 .fc-mobile-button-section { 
 padding: 13px 15px; 
 } 

 /* 소형 모바일 SVG 아이콘 그리드 */
 .fc-mobile-icon-grid { 
 } 

 .fc-mobile-icon-btn { 
 padding: 3px 1px; 
 } 

 .fc-mobile-icon-btn svg { 
 width: 18px; 
 height: 18px; 
 margin-bottom: 2px; 
 } 

 .fc-mobile-icon-btn .fc-text { 
 font-size: 11px; 
 } 

 /* 모달 모바일 */
 .fc-price-modal-container { 
 padding: 16px; 
 } 

 .fc-price-info-box p { 
 font-size: 11px; 
 } 

 .fc-price-field select { 
 padding: 8px 10px; 
 font-size: 13px; 
 } 

 .fc-price-value { 
 font-size: 18px; 
 } 
 }