@charset "utf-8";

  
        :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;
        }
        
        /* 상단 메뉴 스타일 */
        .navbar {
            background-color: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 0.5rem 0;
        }
        
        .navbar-brand {
            font-weight: 700;
            color: var(--primary-color) !important;
            font-size: 1.5rem;
        }
        
        .navbar-nav .nav-link {
            color: var(--secondary-color) !important;
            font-weight: 500;
            padding: 0.5rem 1.2rem;
            transition: all 0.3s;
        }
        
        .navbar-nav .nav-link:hover {
            color: var(--primary-color) !important;
        }
        
        .navbar-nav .nav-item.active .nav-link {
            color: var(--primary-color) !important;
            font-weight: 600;
        }
        
        /* 메인 컨텐츠 영역 */
        .main-container {
            max-width: 1230px;
            margin: 0 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);
                -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;
        }
        
        /* 드롭다운 스타일 */
        .navbar-nav .dropdown-menu.dropdown-menu-elevated {
            --menu-bg: rgba(255,255,255,0.9);
            background: var(--menu-bg);
            backdrop-filter: blur(10px);
            border: 1px solid #e9ecef;
            border-radius: 14px;
            box-shadow: 0 12px 30px rgba(0,0,0,0.12);
            padding: 8px;
            min-width: 260px;
        }
        
        .navbar-nav .dropdown-item {
            position: relative;
            display: flex;
            align-items: center;
            gap: 10px;
            border-radius: 10px;
            padding: 10px 12px;
            font-weight: 500;
            color: var(--secondary-color);
            transition: color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease;
        }
        
        .navbar-nav .dropdown-item i {
            color: var(--primary-color);
            transition: transform .15s ease;
        }
        
        .navbar-nav .dropdown-item:hover, 
        .navbar-nav .dropdown-item:focus {
            background: #fff7f8;
            color: var(--secondary-color);
            box-shadow: inset 0 0 0 1px rgba(255,71,87,0.2);
        }
        
        .navbar-nav .dropdown-item:hover i, 
        .navbar-nav .dropdown-item:focus i {
            transform: translateX(2px);
        }
        
        /* 데스크톱: 호버로 드롭다운 열림 */
        @media (min-width: 992px) and (pointer: fine) {
            .nav-item.dropdown {
                position: relative;
            }
            .nav-item.dropdown > .dropdown-menu {
                display: block;
                visibility: hidden;
                opacity: 0;
                transform: translateY(8px);
                transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
                margin-top: 10px;
            }
            .nav-item.dropdown:hover > .dropdown-menu,
            .nav-item.dropdown:focus-within > .dropdown-menu {
                visibility: visible;
                opacity: 1;
                transform: translateY(0);
                transition-delay: 0s;
            }
            
            /* 2컬럼 드롭다운 */
            .navbar-nav .dropdown-menu.dropdown-menu-2col {
                display: grid;
                grid-template-columns: repeat(2, minmax(160px, 1fr));
                gap: 4px 8px;
                padding: 8px;
                width: auto;
                min-width: 360px;
                max-width: calc(100vw - 24px);
                overflow-x: hidden;
                max-height: min(70vh, 600px);
                overflow-y: auto;
            }
            
            .navbar-nav .dropdown-menu.dropdown-menu-2col.dropdown-menu-end {
                right: 0;
                left: auto;
            }
            
            .navbar-nav .dropdown-menu.dropdown-menu-2col .dropdown-item {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                line-height: 1.25;
                padding: 10px 12px;
            }
        }
        
        /* 모바일 스타일 */
        @media (max-width: 991.98px) {
            .navbar-nav .nav-item > .nav-link {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
                padding: 12px 14px;
            }
            
            .navbar-nav .nav-item > .nav-link .nav-label {
                flex: 1 1 auto;
                min-width: 0;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            
            .navbar-nav .nav-item.dropdown > .nav-link .nav-caret {
                flex: 0 0 auto;
                width: 1.2em;
                text-align: right;
                color: var(--dark-gray, #747d8c);
                opacity: .9;
                transform: translateY(1px);
            }
            
            .navbar-nav .nav-item.dropdown > .nav-link .nav-caret::before {
                content: '▼';
                font-size: .8rem;
                line-height: 1;
            }
            
            .navbar-nav .nav-item.dropdown.show > .nav-link .nav-caret::before {
                display: inline-block;
                transform: rotate(180deg);
                transition: transform .18s ease;
            }
            
            .navbar-nav .dropdown-menu.dropdown-menu-elevated {
                position: static;
                float: none;
                box-shadow: none;
                border-radius: 12px;
                border: 1px solid #f1f2f6;
                padding: 6px;
                margin: 6px 0 10px;
                background: #fff;
            }
        }
        
        @media (min-width: 992px) {
            .navbar-nav .nav-item > .nav-link .nav-caret {
                display: none;
            }
        }
        

		

        
        .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;
        }