@charset "utf-8";

  
        /* 기존 CSS 유지 */
        :root {
            --primary-color: #ff4757;
            --secondary-color: #2f3542;
            --light-gray: #f1f2f6;
            --dark-gray: #747d8c;
            --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            
            --skt-color: #3617CE;
            --kt-color: #231F20;
            --lgu-color: #AF0030;
        }
        
        body {
            font-family: 'Nanum Gothic', sans-serif;
            background-color: #f8f9fa;
            padding-top: 70px;
            color: #333;
            transition: all 0.3s ease;
            position: relative;
            left: 0;
            overflow-x: hidden;
        }

        /* 메인 컨텐츠 영역 */
        .main-container {
            max-width: 1230px;
            margin: 0 auto;
        }
        
        /* 상단 메뉴 스타일 */
        .navbar { 
            background: linear-gradient(#fff,#f6fbff); 
            box-shadow:0 6px 18px rgba(15,23,42,0.06); 
            padding:.6rem 1rem; 
        }
        
        .nav-link { 
            color:#163243; 
            padding:.45rem .9rem; 
            border-radius:.325rem;
        }
        
        .nav-link:hover, .dropdown-item:hover{ 
            background-color: #007bff;
            color: white;
            border-radius: 6px;
            font-weight:700;
        }
        
        .dropdown-item { 
            padding:.45rem .75rem; 
        }
        
        .nav-link.active, .dropdown-item.active { 
            font-weight:700;
            background-color: #007bff;
            color: white;
            border-radius: 6px;
        }

        /* 데스크탑: hover로 드롭다운 표시 */
        @media (min-width: 992px) { 
            .navbar .dropdown { position: relative; }
            .navbar .dropdown-menu {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                margin: 0;
                margin-top: 0px;
                border-radius:.35rem;
                box-shadow: 0 8px 20px rgba(15,23,42,0.08);
                z-index: 2000;
            }
            
            .navbar .dropdown:hover > .dropdown-menu,
            .navbar .dropdown-menu:hover {
                display: block;
            }
            .submenu-toggle.d-lg-none { display:none !important; }
            
        } 
        
        /* 모바일: 오른쪽 서랍 메뉴 스타일 */
        @media (max-width: 991.98px) {
            /* 햄버거 메뉴 버튼 스타일 */
            .navbar-toggler {

                border: none;
                padding: 0.25rem 0.5rem;
                font-size: 1.25rem;
                z-index: 1060;
                position: relative;

            }
            
            /* 서랍 메뉴 컨테이너 */
            #navMain {
                position: fixed;
                top: 0;
                right: -80%;
                width: 80%;
                height: 100vh;
                background: white;
                z-index: 3001;
                overflow-y: auto;
                transition: right 0.3s ease;
                
				/*
				padding: 3rem 1rem 1rem 1rem;
				*/
				padding: 2rem 0.4rem 1rem 0.4rem;
				
                box-shadow: -5px 0 15px rgba(0, 0, 0, 0.15);
                margin: 0;
            }
            
            #navMain.show {
                right: 0;
            }
            
            /* 서랍 메뉴 닫기 버튼 - 위치 조정 */
            .drawer-close {
                position: absolute;
                top: 0.5rem;
                right: 0.5rem;
                font-size: 1.5rem;
                background: none;
                border: none;
                color: var(--secondary-color);
                z-index: 900;
                padding: 0rem 1.5rem 0rem 3.5rem;
				
            }
            
            /* 모바일 메뉴 아이템 스타일 */
            .navbar-nav {
                margin-top: 1rem;
				
            }
            
            .nav-item {
                margin-bottom: 0.5rem;
	
            }
            
            .nav-link {
                padding: 0.75rem 0.5rem;
                /* border-radius: 0.5rem; */
				border-radius:0rem;
                display: block;
				width: 75%;
				border-bottom:1px solid gray;
            }
			
            .nav-link:hover {
                border-bottom:0px;
				border-radius: 0.5rem;
            }
            
            /* 드롭다운 메뉴 스타일 */
            .navbar .dropdown-menu {
                position: static;
                background: transparent;
                padding-left: 1.5rem;
                margin: 0.35rem 0 0 0;
                border: 0;
                box-shadow: none;
                width: 100%;
            }
            
            .dropdown-item {
                background: #EFEFEF;
                margin-bottom: 0.35rem;
                border-radius: 6px;
                width: 90%;
                display: block;
            }
            
            .submenu-toggle {
                background: transparent;
			
                border: 0;
                /* padding: 0.15rem;*/
				paddding:0;
                color: #6c757d;
                border-radius: 6px;
                position: absolute;
                right: 0;
                /* top: 0.5rem;*/
				width:20%;
				margin:0;
				height:100%;
            }
            
            .submenu-toggle:focus {
                outline: none;
                box-shadow: none;
            }
            
            .nav-top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;
                width: 100%;
            }
            
            /* 네비게이션 바 브랜드 로고 */
            .navbar-brand {
                z-index: 10;
                position: relative;
            }
            
            /* 부트스트랩 collapse 기능 오버라이드 */
            .navbar-collapse {
                flex-basis: 100%;
                flex-grow: 0;
                align-items: center;
            }
            
            /* 오버레이 스타일 수정 - 화면 왼쪽 20%만 차지하도록 */
            .overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 20%;  /* 화면의 20%만 차지 */
                height: 100%;
                background: rgba(0, 0, 0, 0.3);
                z-index: 1040;
                opacity: 0;
                transition: opacity 0.3s ease;
            }
            
            body.menu-open .overlay {
                display: block;
                opacity: 1;
            }
            
            /* 메뉴 영역 클릭 시 이벤트 전파 방지 */
            #navMain {
                pointer-events: auto;
            }
            
            .overlay {
                pointer-events: auto;
            }
        }
		
		
		
	/*본문*/
        /* 고객센터 섹션 스타일 */
        .cs-section {
            background: white;
            border-radius: 16px;
            box-shadow: var(--box-shadow);
            padding: 30px;
            margin-bottom: 30px;
            border: 1px solid #e9ecef;
        }
        
        .section-title {
            font-weight: 700;
            color: var(--secondary-color);
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 15px;
            margin-bottom: 25px;
            position: relative;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 120px;
            height: 2px;
            background: var(--primary-color);
        }
        
        /* 문의하기 폼 스타일 */
        .form-label {
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .form-control, .form-select {
            border-radius: 12px;
            padding: 12px 15px;
            border: 1px solid #e9ecef;
            transition: all 0.3s;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.15);
        }
        
        .submit-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 12px;
            padding: 12px 25px;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s;
            box-shadow: 0 4px 10px rgba(255, 71, 87, 0.25);
            width: 100%;
            margin-top: 10px;
        }
        
        .submit-btn:hover {
            background: #ff2e43;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(255, 71, 87, 0.35);
        }
        
        /* 오른쪽 사이드바 */
        .sidebar {
            position: sticky;
            top: 85px;
            background: white;
            border-radius: 16px;
            box-shadow: var(--box-shadow);
            padding: 5px;
            margin-bottom: 10px;
        }
        
        .sidebar-box {
            background-color: #fff5f6;
            border: 2px solid #ffcccc;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 25px;
        }
        
        .sidebar-box h3 {
            color: var(--primary-color);
            font-weight: 700;
            margin-bottom: 15px;
        }
        
        .sidebar-box ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .sidebar-box li {
            padding: 8px 0;
            display: flex;
            align-items: center;
        }
        
        .sidebar-box li i {
            color: var(--primary-color);
            margin-right: 10px;
            font-size: 1.2rem;
        }
        
        /* 푸터 스타일 */
        footer {
            background: var(--secondary-color);
            color: white;
            padding: 40px 0;
            margin-top: 50px;
        }
        
        .footer-logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 20px;
        }
        
        .footer-links {
            list-style: none;
            padding: 0;
        }
        
        .footer-links li {
            margin-bottom: 10px;
        }
        
        .footer-links a {
            color: #ddd;
            text-decoration: none;
            transition: all 0.3s;
        }
        
        .footer-links a:hover {
            color: var(--primary-color);
        }
        
        .copyright {
            text-align: center;
            padding-top: 20px;
            margin-top: 30px;
            border-top: 1px solid #444;
            color: #aaa;
        }
        
        /* 모바일 스타일 */
        @media (max-width: 980px) {
            .sidebar {
                display: none;
            }
            
            .calc-months {
                display: flex;
                overflow-x: auto;
                gap: 5px;
                padding: 0 15px 15px 5px;
                flex: 1 0 auto;
                /*min-width: calc((90px * 12) + (5px * 11) + 40px);*/
				/*min-width:max-content;*/
				
                -webkit-overflow-scrolling: touch;
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            
            .calc-months::-webkit-scrollbar {
                display: none;
            }
        }
        
        /* 카테고리 네비게이션 */
        .cs-category-nav {
            background: white;
            border-radius: 16px;
            box-shadow: var(--box-shadow);
            padding: 15px;
            margin-bottom: 25px;
            display: flex;
            overflow-x: auto;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        .cs-category-nav::-webkit-scrollbar {
            display: none;
        }
        
        .cs-category-item {
            flex: 0 0 auto;
            padding: 10px 20px;
            margin-right: 10px;
            border-radius: 30px;
            background: #f8f9fa;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            white-space: nowrap;
        }
        
        .cs-category-item.active, .cs-category-item:hover {
            background: var(--primary-color);
            color: white;
        }
		
		
		
		
		
		/*요금*/

        
        .feature-list {
            list-style: none;
            padding: 0;
            margin: 20px 0;
        }
        
        .feature-list li {
            padding: 8px 0;
            display: flex;
            align-items: center;
        }
        
        .feature-list i {
            color: var(--primary-color);
            margin-right: 10px;
            font-size: 1.2rem;
        }
        
        /* 월별 계산 테이블 - 수정된 부분 */
        .monthly-calc-container {
            overflow-x: auto;
            margin: 0px 0;
            -ms-overflow-style: none;
            scrollbar-width: none;
            padding: 0px 0;
			font-size: 0.8rem;
			
        }
        
        .monthly-calc-container::-webkit-scrollbar {
            display: none;
        }
        
        .monthly-calc {
            display: flex;
            min-width: max-content;
			
        }
        
        .calc-category {
            flex: 0 0 auto;
            width: 85px;
            background-color: var(--light-gray);

            /*border-radius: 16px 0 0 16px;*/
            padding: 5px 0px 5px 2px;
            /*box-shadow: 0 2px 8px rgba(0,0,0,0.05);*/
            position: sticky;
            left: 0;
            z-index: 1;
        }
        
        .calc-category h3 {
            font-size: 0.8rem;
            font-weight: 700;
            margin-bottom: 4px;
            color: var(--secondary-color);
			border-bottom: 1px solid #dfe4ea;
        }
        
        .calc-category ul {
            list-style: none;
            padding: 0;
            margin: 0;
			flex-direction: column; /*row단위*/
        }
        
        .calc-category li {
            padding: 1px 0;
            font-weight: 500;
            border-bottom: 1px solid #dfe4ea;
			font-size: 0.8rem;
        }
        
        .calc-months {
            display: flex;
            gap: 1px;
            padding: 0px 1px 0px 0px;
        }
        
		
        /* PC에서만 스크롤바 표시 */
        @media (min-width: 981px) {
            .monthly-calc-container {
                -ms-overflow-style: auto;
                scrollbar-width: auto;
				
            }
            
            .monthly-calc-container::-webkit-scrollbar {
                display: block;
                height: 15px;
            }
            
            .monthly-calc-container::-webkit-scrollbar-thumb {
                background: var(--primary-color);
                border-radius: 3px;
            }
            
            .monthly-calc-container::-webkit-scrollbar-track {
                background: #f1f1f1;
            }
			

		
        }
        
        /* 월별 박스 디자인 개선 - 둥근 테두리 형태 */
        .calc-month {
            flex: 0 0 81px;
            padding: 0px;
            text-align: right;
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            border: 1px solid #eaeaea;
            position: relative;
            overflow: hidden;
			
			
        }
        
        .calc-month:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 5px rgba(0, 0, 0, 0.12);
			border: 1px solid red;
        }
        
        .calc-month.skt {
            border-top: 4px solid var(--skt-color);
        }
        
        .calc-month.kt {
            border-top: 4px solid var(--kt-color);
        }
        
        .calc-month.lgu {
            border-top: 4px solid var(--lgu-color);
        }
        
        .calc-month h4 {
            font-size: 0.75rem;
            font-weight: 700;
            margin-bottom: 5px;
            color: var(--secondary-color);
            position: relative;
			text-align: center;
			padding-top:3px;
        }
       
		/*
        .calc-month h4::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 0px;
            background: var(--light-gray);
        }
		*/
        
        .calc-month ul {
            list-style: none;
            padding: 0;
            margin: 0;
			flex-direction: column; /*row단위*/
        }
        
        .calc-month li {
            padding: 1px 2px 1px 0px;
            font-weight: 500;
            border-bottom: 1px solid #f0f0f0;
            transition: all 0.2s;
			font-size: 0.8rem;
        }
        
        .calc-month li:hover {
            background-color: #F1F2F6;
            border-radius: 4px;
        }
        
        .calc-month li:last-child {
            border-bottom: 0px;
            font-weight: 700;
            color: var(--primary-color);
            font-size: 0.8rem;
            /*padding-top: 15px;
            margin-top: 5px;*/
            background: linear-gradient(to right, #ffffff, #fff5f5);
            border-radius: 0 0 12px 12px;

        }
        

		
		
		
		
        /* 요금제 박스 스타일 */
        .plan-box {
            background: white;
            border-radius: 16px;
            box-shadow: var(--box-shadow);
            padding: 15px;
            margin-bottom: 30px;
            border: 1px solid #e9ecef;
            transition: all 0.3s ease;
            overflow: hidden;
        }
		
		.plan-box ul{
	
		  padding:0px;
		  margin:0px;
		  font-size: 0.9rem;
		  display:flex;
		  list-style: none;
		}

		.plan-box ul li{
		  
		  margin:0px 0px 0px 0px;
	  
		}
		
        .plan-box:hover {
            border: 2px solid var(--primary-color);
            transform: translateY(-5px);
            box-shadow: 0 5px 5px rgba(255, 71, 87, 0.2);
        }
        
        .plan-header {
         
			/*display:flex;
            justify-content: flex-start;*/
            align-items: center;
            margin-bottom: 0px;
            padding-bottom: 5px;
        }
        
		ul.plan-header li {
			margin-right:18px;
		
		}
		
        .carrier-bname {
		
            font-weight: 700;
            font-size: 0.9rem;
            color: var(--secondary-color);

        }
        
        .carrier-badge {

            background: var(--primary-color);
            color: white;
            padding: 0px 9px;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.8rem;
			
        }
		
		.carrier-band {

            font-weight: 700;
            font-size: 0.9rem;
            color: var(--secondary-color);

		}


        .carrier-contract {

            background: var(--primary-color);
            color: white;
            padding: 0px 9px;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.8rem;

        }

        .carrier-usim {

            border: 1px solid var(--primary-color);
            color: black;
            padding: 0px 9px;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.8rem;
			
        }
		
        .plan-title {
           
            font-size: 0.95rem;
            color: var(--secondary-color);
            padding-bottom: 3px;
			/*border-bottom: 2px solid var(--light-gray);*/
        }
		
        .plan-spec {
			font-weight:600;
            font-size: 1.0rem;
            color: var(--secondary-color);
            padding-bottom: 2px;
			/*border-bottom: 2px solid var(--light-gray);*/
        }
		
		.plan-box hr {
			padding:1px 0px 1px 0px;
			margin:0;
		}
		
        .price-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3px;
        }
		
        .plan-period {
            --background: var(--primary-color);
			border: 1px solid red;
            color: black;
            padding: 1px 9px 1px 9px;
            /*border-radius: 10px;*/
            font-weight: 500;
            font-size: 1.0rem;
			margin : 1px 0px 1px 0px;
			
			/*box-sizing: border-box;*/
			/*width: 16em;*/
			/*height: 3em;*/
			border-radius: 0.6em 2em 0.6em 2em;
        }
        
        /* 모바일 스타일 */
        @media (max-width: 991.98px) {
			.plan-box {
				padding: 4px;
			}
			
			ul.plan-header li {
				margin-right:4px;
			
			}
			
			
			
			.calc-category {
				width: 80px;
			}
			
			.calc-category h3 {
				font-size: 0.75rem;
			}
			
			.calc-category li {
				font-size: 0.75rem;
			}
			
			
			
			
			/*월별가격넓이*/
			.calc-month {
				flex: 0 0 75px;
			}

			.calc-month h4 {
				font-size: 0.65rem;
			}
			
			.calc-month li {
				padding: 1px 2px 1px 0px;
				font-size: 0.75rem;
			}
		}
        .back-yellow {
            background: yellow;
        }
		
        .price-tag {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--primary-color);
            margin: 15px 0;
			padding-left:10px;
        }
		
		ul.plan-spec2 li {
			font-size: 1.0rem;
			font-weight:500;
			margin-right:30px;
			maring-bottom:3px;
		}
		
        .plan-phone {
            font-size: 1.0rem;
            font-weight: 500;
            /*color: var(--primary-color);*/
            margin: 0px 0px 2px 0px;
		
			
        }
		
        .plan-sms {
            font-size: 1.0rem;
            font-weight: 500;
            /*color: var(--primary-color);*/
            margin: 0px 0px 2px 15px;
			/*padding-left:10px;*/
			
        }
		
		.price-header li {
			font-size: 1.0rem;
			font-weight:500;
		}
		
        /* 통신사 색상 */
        .skt-badge {
            background: var(--skt-color);
        }
        
        .kt-badge {
            background: var(--kt-color);
        }
        
        .lgu-badge {
            background: var(--lgu-color);
        }
        
        /* 월별 계산 헤더 */
        .monthly-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
			padding:0px;
            margin-bottom: 0px;
        }
        
        .monthly-title {
            font-weight: 600;
            color: var(--secondary-color);
            font-size: 0.9rem;
			padding:0px;
			margin:0px;
        }
        
        .monthly-note {
            color: var(--dark-gray);
            font-size: 0.9rem;
			padding:0px;
			margin:0px;
        }