/* 이용후기 */
.community-hero {
            position: relative;
            background: url('/common/img_24/bg/rv_mg.jpg') no-repeat center center;
           /* background-size: cover;*/
			background-size: 1920px 280px;
            padding:4rem 1rem;
            text-align: center;
            color: #fff;
            margin-bottom: 3rem;
        }
        .community-hero::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.4); z-index: 1;
        }
        .hero-content { position: relative; z-index: 2; }
        .hero-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.8rem; letter-spacing: -1px; }
        .hero-desc { font-size: 1.1rem; font-weight: 400; opacity: 0.9; margin: 0; }

       .sidebar-wrap {
            position: sticky;
            top: 100px;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.04);
            border: 1px solid var(--border-color);
            padding: 1.5rem 0;
            overflow: hidden;
        }

        .sidebar-group-title {
            display: flex;
            align-items: center;
            font-size: 0.8rem;      /* 타이틀 크기를 최소화하여 하위 active 메뉴를 돋보이게 함 */
            font-weight:600;
            color: #adb5bd;         /* 연한색 비강조 */
            text-transform: uppercase;
            letter-spacing: 0.08em; /* 자간을 넓혀 작은 텍스트에도 프리미엄한 질감 부여 */
            padding: 0 1.5rem;
            margin-top: 2rem;       /* 상단 여백을 늘려 선이 아닌 '여백'으로 이전 그룹과 완벽히 분리 */
            margin-bottom: 0.05rem;
        }

        /* 1. 마이크로 기하학 앵커: 텍스트 앞의 아주 얇고 작은 빈 원형 */
        .sidebar-group-title::before {
            content: "";
            display: inline-block;
            width: 6px;
            height: 6px;
            border: 2px solid #ccc;
            border-radius: 50%;
            margin-right: 8px;
            box-sizing: border-box;
            transition: border-color 0.2s ease;
        }

        /* 2. 페이드 아웃 디바이더: 끝으로 갈수록 투명해져 공간의 개방감 유지 */
        .sidebar-group-title::after {
            content: "";
            flex: 1;
            height: 1px;
            margin-left: 12px;
            background: linear-gradient(to right, #ccc, rgba(233, 236, 239, 0));
        }

        /* 그룹 타이틀에 마우스 호버 시 앵커 링에만 살짝 반응을 주어 상호작용(UX) 유도 */
        .sidebar-wrap:hover .sidebar-group-title::before {
            border-color: #dee2e6;
        }

        .sidebar-group-title:first-child { margin-top: 0; }
        .sidebar-menu { list-style: none; padding: 0; margin: 0; }
   
        .sidebar-menu li a {
            display: flex; align-items: center; gap: 10px;
            padding: 0.80rem 1.5rem;/*세로,가로*/
            color: #495057;
            text-decoration: none;
            font-weight: 500;
            font-size: 0.90rem;
            border-left: 3px solid transparent;
            transition: all 0.2s;
        }
        .sidebar-menu li a:hover { background-color: var(--bg-light); color: var(--main-color); }
        .sidebar-menu li a.active {
            background-color:var(--bg-light-thm);
            color: var(--main-color);
            border-left-color: var(--main-color);
            font-weight: 700;
        }
        .sidebar-menu li a i { font-size: 1.1rem; }

		/*목록 상단*/
        .board-header { margin-bottom: 2rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1.5rem;position: relative; }
        .board-subtitle { font-size: 0.9rem; color: var(--text-muted); font-weight:600; margin-bottom: 0.25rem; display: block; }
        .board-title-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; }
		.board-title-row img {	position: absolute;	bottom:10px;	right: 0;	background-size: cover;	background-position: center;	background-repeat: no-repeat;}/*이 부분 추가*/
        .board-title { text-align:left;font-size:2rem; font-weight: 700; color: var(--text-dark); margin: 0; }
        .board-desc { font-size: 0.95rem; color: var(--text-muted); margin-top: 0.5rem; margin-bottom: 0; }
        
		.btn-write,a.btn-write {
            background-color: var(--main-color); 
            color: #fff;
            border: none;
            padding: 0.7rem 1.5rem;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.95rem;
            display: inline-flex; align-items: center; gap: 6px;
            transition: background-color 0.2s;
            text-decoration: none;
        }
        .btn-write:hover,a.btn-write:hover { background-color: #4b36cc; color: #fff; }/*보라*/

        .board-stats { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--border-color); margin-bottom: 2rem; }
        .stat-score { font-size: 2.2rem; font-weight: 800; color: var(--text-dark); line-height: 1; }
        .stat-score span { font-size: 1rem; color: #adb5bd; font-weight: 500; }
        .stat-stars { color: #ffc107; font-size: 1.1rem; }
        .stat-divider { width: 1px; height: 20px; background-color: #dee2e6; margin: 0 0.5rem; }
        .stat-total { font-size: 0.95rem; color: var(--text-muted); }
        .stat-total strong { color: var(--text-dark); font-weight: 700; }
     /* 모바일 반응형: 이미지가 우측에 있기 좁을 때 위로 올리거나 세로로 배치 */
        @media (max-width: 767px) {
            .review-card { flex-direction: column; padding: 1.2rem; }
            .review-img-wrap { width: 100%; height: 180px; order: -1; margin-bottom: 0.5rem; }
            .rc-text { -webkit-line-clamp: 4; }
            .board-title-row { flex-direction: column; align-items: flex-start; }
            .btn-write { width: 100%; justify-content: center; margin-top: 1rem; }
        }

.btn-write.full-width {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 5px;
}


.btnnew {
	font-size: 12.8px;
	font-size: 0.8rem;
	padding: 18.528px 24.928px;
	padding: 1.533rem 1.933rem;
	cursor: pointer;
	font-weight: 600;
}

.btn-dark2 {
  background-color: #232323;
  color: #ffffff;
  border: 2px solid #232323; border-radius: 12px;
}
.btn-dark2:hover, 
 .btn-dark:focus {
  background-color: #555;color: #ffffff;
}



.custom-modal-content { border-radius: 20px; border: none; box-shadow: 0 15px 50px rgba(0,0,0,0.15); }
        .modal-header-custom { padding: 1.8rem 2rem 0.5rem; border: none; }
        .modal-title-custom { font-weight: 800; font-size: 1.5rem; color: #111; }
        .modal-body-custom { padding: 1rem 2rem 2rem; }
        .modal-footer-custom { border: none; display: flex; gap: 12px;}
         .modal-footer-custom .btn { flex: 1; padding: 1.1rem; border-radius: 12px; font-weight: 700; font-size: 1.05rem; }
        
        .btn-cancel-custom { background-color: #f4f5f8; color: #555; border: none; transition: background-color 0.2s; }
        .btn-cancel-custom:hover { background-color: #e9ecef; }
        .btn-submit-custom { background-color: #5c45f5; color: #fff; border: none; transition: background-color 0.2s; }
        .btn-submit-custom:hover { background-color: #4b36cc; color: #fff; }


        .modal-sub-desc { font-size: 0.9rem; color: #6c757d; margin-bottom: 1.5rem; }
        
        .rating-box { background-color: #f8f9fa; border-radius: 16px; padding: 2rem 1rem; text-align: center; margin-bottom: 2rem; }
        .rating-label { font-size: 0.95rem; font-weight: 700; color: #333; margin-bottom: 1rem; display: block; }
        .star-rating-custom { display: inline-flex; flex-direction: row-reverse; font-size: 2.5rem; gap: 0.3rem; }
        .star-rating-custom input { display: none; }
        .star-rating-custom label { color: #e4e5e9; cursor: pointer; transition: color 0.2s ease-in-out; margin: 0; line-height: 1; }
        .star-rating-custom input:checked ~ label,
        .star-rating-custom label:hover,
        .star-rating-custom label:hover ~ label { color: #ffbc00; }
        .rating-score-text { font-size: 0.95rem; color: #888; font-weight: 500; margin-top: 0.8rem; }
        .rating-score-text .score-num { color: #5c45f5; font-weight: 700; }

        .custom-input { background-color: #f4f5f8 !important; border: 1px solid #f4f5f8 !important; border-radius: 12px !important; padding: 1rem 1.2rem !important; box-shadow: none !important; font-size: 0.95rem; transition: border-color 0.2s, background-color 0.2s; }
        .custom-input:focus { border-color: #5c45f5 !important; background-color: #fff !important; }
        .custom-label { font-size: 0.9rem; font-weight: 600; color: #555; margin-bottom: 0.6rem; display: block; }
        .custom-label .required { color: #5c45f5; margin-left: 2px; }
        .form-text-custom { font-size: 0.8rem; color: #888; margin-top: 0.6rem; }
        .custom-file-input { padding: 0.8rem 1.2rem !important; }

        .custom-file-upload { width: 100%; }
        .upload-dropzone { 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            width: 100%; 
            padding: 1.5rem 1rem;
            background-color: #fafafa; 
            border: 1px dashed #ced4da; 
            border-radius: 12px; 
            cursor: pointer; 
            transition: all 0.2s ease; 
            margin: 0;
        }
        .upload-dropzone:hover { background-color: #f1f3f5; border-color: #adb5bd; }
        .upload-dropzone.has-file { border-color: var(--main-color); background-color: rgba(29, 60, 250, 0.03); border-style: solid; }
        .upload-dropzone.has-file .upload-icon { color: var(--main-color) !important; }
        .upload-dropzone.has-file #uploadText { color: var(--text-dark) !important; font-weight: 600 !important; }


/* 개인정보 동의 커스텀 라디오 (Segmented 버튼 스타일) */
        .privacy-radio-group { display: flex; gap: 12px; }
        .privacy-radio-wrap { flex: 1; position: relative; }
        .privacy-radio-wrap input[type="radio"] { display: none; }
        .privacy-radio-wrap label {
            display: block; width: 100%; text-align: center; padding: 0.9rem;
            background-color: #f4f5f8; border: 1px solid #f4f5f8; border-radius: 12px;
            font-weight: 600; color: #666; cursor: pointer; transition: all 0.2s; margin: 0;
        }
        /* 동의안함 (부정적) 선택 시 살짝 붉은 톤이나 짙은 회색 처리도 좋지만, 일관성을 위해 메인 테마 적용 */
        .privacy-radio-wrap input[type="radio"]:checked + label {
            background-color: rgba(43, 81, 255, 0.06); 
            border-color: var(--main-color); 
            color: var(--main-color);
        }


   .review-card-grid {
            display: flex;
            flex-direction: column;
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
            height: 100%;
        }
        .review-card-grid:hover { 
            transform: translateY(-5px); 
            box-shadow: 0 12px 35px rgba(0,0,0,0.06); 
            border-color: #ced4da;
        }
        .rcg-content { padding: 1.8rem; display: flex; flex-direction: column; flex-grow: 1; }
        .rcg-stars { color:var(--main-color); font-size: 0.95rem; margin-bottom: 1rem; display: flex; gap: 2px; }
        .rcg-text { 
            font-size: 0.85rem; color: #333; line-height: 1.6; margin: 0 0 1.5rem 0; flex-grow: 1;
            display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; 
        }
        .rcg-meta { 
            font-size: 0.85rem; color: #888; display: flex; align-items: center; justify-content: space-between;
            padding-top: 1rem; border-top: 1px dashed #e9ecef;
        }
        .rcg-meta-user { display: flex; align-items: center; gap: 0.5rem; }
        .rcg-meta-user::before {
            content: ''; display: inline-block; width: 24px; height: 24px;
            background-color: #e9ecef; border-radius: 50%;
        }

        .custom-pagination { display: flex; justify-content: center; margin-top: 3.5rem; gap: 0.5rem; list-style: none; padding: 0; }
        .page-item .page-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border-color); color: #555; text-decoration: none; font-weight: 500; transition: all 0.2s; }
        .page-item .page-link:hover { background-color: var(--bg-light); border-color: #ced4da; }
        .page-item.active .page-link { background-color: var(--main-color); border-color: var(--main-color); color: #fff; }
.badge-soft-primary { background-color: rgba(43, 81, 255, 0.1); color: var(--point-color); }


/* [추가] Hero Section - Style 3 (다크 임머시브) */
        .hero-style-3 {
            background-color: #0a0c10;
            background-image: radial-gradient(circle at 50% 0%, rgba(29, 60, 250, 0.25) 0%, transparent 60%);
            padding: 5rem 0rem;
            text-align: center;
            color: #ffffff;
            position: relative;
            overflow: hidden;
            margin-bottom: 3rem;
        }
        .hero-style-3::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wMykiLz48L3N2Zz4=') repeat;
            z-index: 1;
        }
        .hero-style-3-content { position: relative; z-index: 2; }
        .hero-style-3 h1 {
            font-size: 3rem; font-weight: 900; letter-spacing: -1.5px;
            margin-bottom: 1rem; text-shadow: 0 4px 20px rgba(0,0,0,0.5);
        }
        .hero-style-3 p {
            font-size: 1.1rem; color: #a0a5b1; max-width: 600px;
            margin: 0 auto; line-height: 1.6;
        }

		 @media (max-width: 767px) {
          /*모바일 분기처리*/
        }
        @media (max-width: 767px) {
            .hero-style-3 { padding: 4rem 1rem; margin-bottom: 2rem; }
            .hero-style-3 h1 { font-size: 2.2rem; }
        }

        /* [추가] Page Header - Style 4 (하이라이트 & 중앙정렬) */
        .header-style-4 { text-align: center; margin-bottom: 3rem; position: relative; }
        .header-style-4 .sub-text {
            display: block; color: var(--main-color); font-weight: 700;
            font-size: 0.9rem; letter-spacing: 1px; margin-bottom: 0.5rem;
        }
        .header-style-4 h2 {
            font-size: 2.2rem; font-weight: 800; color: #111; margin: 0;
            display: inline-block; position: relative; z-index: 1; letter-spacing: -0.5px;
        }
        .header-style-4 h2::after {
            content: ''; position: absolute; left: 0; bottom: 4px;
            width: 100%; height: 14px; background-color: rgba(29, 60, 250, 0.15);
            z-index: -1; border-radius: 2px;
        }

        /* 여백 충돌 방지를 위해 padding-top: 60px 제거 */
        main { min-height: calc(100vh - 250px); padding-bottom: 80px; }
        
        /* FAQ 그리드 컨테이너 */
        .faq-grid-wrapper {
            border-top: 1px solid #e0e0e0;
            border-left: 1px solid #e0e0e0;
            display: grid;
            /* 기본적으로 5칸 배치 */
            grid-template-columns: repeat(5, 1fr); 
            background-color: #fff;
        }

        .faq-item {
            border-right: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
            padding: 2.5rem 1rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: #333;
        }

        /* Hover 및 Active 효과 (어두운 반전) */
        .faq-item:hover {
            background-color: #262626;
            color: #ffffff;
        }

        .faq-num {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 0.8rem;
            transition: color 0.2s;
        }
        
        .faq-text {
            font-size: 0.9rem;
            line-height: 1.5;
            transition: color 0.2s;
        }
        
        /* 모바일 및 태블릿 반응형 처리 */
        @media (max-width: 991px) {
            .faq-grid-wrapper { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 767px) {
            .faq-grid-wrapper { grid-template-columns: repeat(2, 1fr); }
            .faq-item { padding: 2rem 1rem; }
            .faq-text { font-size: 0.85rem; }
        }

        /* 모달 팝업 내부 스타일 */
        .faq-modal-title-num { color: var(--main-color); font-weight: 800; margin-right: 10px; font-size: 1.5rem; }
        .faq-modal-answer { background-color: #f8f9fa; border-radius: 12px; padding: 1.5rem; font-size: 0.95rem; line-height: 1.7; color: #444; border: 1px solid #f1f1f1; }


		 /* 
    2. 개별 갤러리 아이템 
  */
  .gallery-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden; /* 호버 시 확대되는 이미지가 모서리를 삐져나가지 않도록 커팅 */
    aspect-ratio: 4 / 3; /* 모든 이미지를 4:3 비율로 통일하여 깔끔한 그리드 유지 */
    background-color: #e2e8f0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    /* 아이템 전체가 살짝 떠오르는 호버 효과를 위한 트랜지션 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  }


  /* 
    3. 이미지 스타일 
  */
  .gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 찌그러지지 않고 영역을 꽉 채우도록 설정 */
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);border-radius:6px; 
  }

  /* 호버 시 이미지 부드럽게 줌인(Zoom-in) */
  .gallery-item:hover .gallery-img {
    transform: scale(1.1);
  }

/*서브 탑 서브페이지*/
	 /* 공통 서브 */
			.sub-right {
            margin-bottom:5rem;
        }

.service-hero-dark { 
            background: linear-gradient(135deg, #e9463f 0%, #dc4c46 55%, #e9463f 100%); 
            padding: 2.5rem 0 0.5rem 0; /* 아래 폼과 겹치기 위해 하단 패딩을 깊게 줍니다. */
            text-align: center; 
            position: relative;
            overflow: hidden;
        }
        .service-hero-dark::before { /* 배경 패턴 (시각적 고급스러움) */
            content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
            background-size: 30px 30px; opacity: 0.4;
        }
        .hero-badge-dark { 
            display: inline-block; padding: 0.5rem 1.2rem; 
            background-color: rgba(255, 255, 255, 0.15); color: #ffffff; /* 가독성 확보를 위해 완전 흰색으로 변경 */
            font-weight: 700; border-radius: 50rem; font-size: 0.9rem; margin-bottom: 1rem; 
            backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.25);
            position: relative; z-index: 2;
        }
        .hero-title-dark { font-weight:700; font-size: 2.2rem; color: #ffffff; margin-bottom: 1rem; letter-spacing: -1px; position: relative; z-index: 2; line-height: 1.3; }
        .hero-desc-dark { font-size: 1.15rem; color: rgba(255, 255, 255, 0.9); /* 대비를 높여 텍스트가 묻히지 않도록 방어 */ line-height: 1.6; max-width: 600px; margin: 0 auto; position: relative; z-index: 2; }

        @media (max-width: 767px) {
            .service-hero-dark { padding: 2rem 1rem 1rem 1rem; }
            .hero-title-dark { font-size:1.5rem;  margin-bottom: 0.5rem; }
            .hero-desc-dark { font-size: 1rem; }
			.hero-badge-dark {  margin-bottom: 1rem;}     
    
        }

        .form-section-wrapper {
            position: relative;
            z-index: 10;
            margin-top:-60px; /* 배너 위로 폼 카드를 확 끌어올림 */
            padding-bottom:2rem;
        }
        
        .form-card {
            background-color: #ffffff;
            border-radius: 1.5rem;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08); /* 공중에 떠 있는 듯한 강한 그림자 */
            padding: 3rem;
            border: 1px solid #f1f3f5;
        }

        .form-card-header {
            text-align: center;
            margin-bottom: 2.5rem;
            padding-bottom: 2rem;
            border-bottom: 2px dashed #e9ecef;
        }
        
        .form-card-title { font-weight: 800; color: #111; font-size: 1.8rem; }
        .form-card-subtitle { color: #666; font-size: 1rem; margin-top: 0.5rem; }
        .form-label { font-weight: 600; color: #444; font-size: 0.95rem; margin-bottom: 0.1rem; margin-top:2rem; }
        .required-mark { color: var(--main-color); margin-left: 4px; font-weight: bold; }
        @media (max-width: 767px) {
            .form-section-wrapper { margin-top: -40px; padding: 0 10px; }
            .form-card { padding: 2rem 1.5rem; border-radius: 1.25rem; }
            .form-card-title { font-size: 1.5rem; }
			 .form-label { font-weight: 600; color: #444; font-size: 0.95rem; margin-bottom: 0.1rem; margin-top:1.5rem; }
        }

        
        
        .custom-form-control {
            background-color: #f4f5f8;
            border: 1px solid transparent; 
            border-radius: 0.75rem; 
            padding: 0.85rem 1.25rem;
            font-size: 1rem;
            color: #333;
            transition: all 0.2s ease-in-out;
            box-shadow: none;
        }
        .custom-form-control:focus {
            background-color: #ffffff;
            border-color: var(--main-color); 
            box-shadow: 0 0 0 0.15rem rgba(29, 60, 250, 0.15);
            outline: 0;
        }
        .custom-form-control::placeholder { color: #adb5bd; }
        
        .check-btn-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
        .check-btn-group .btn-outline-primary { border-color: #dce1e6; color: #555; background-color: #fff; }
        .check-btn-group .btn-check:checked + .btn-outline-primary { background-color: rgba(29, 60, 250, 0.1); border-color: var(--main-color); color: var(--main-color); font-weight: 700; box-shadow: none; }
        
        /* 장문형 리스트 전용 스타일 */
        .desc-check-group { display: flex; flex-direction: column; gap: 0.5rem; }
        .desc-check-label { 
            display: flex; 
            align-items: flex-start; 
            gap: 0.75rem; 
            padding: 1rem 1.25rem; 
            background-color: #fff; 
            border: 1px solid #dce1e6; 
            border-radius: 0.75rem; 
            color: #444; 
            cursor: pointer; 
            transition: all 0.2s ease; 
            text-align: left; 
            line-height: 1.5; 
            font-size: 0.95rem; 
            width: 100%; 
            word-break: keep-all; 
        }
        .desc-check-label:hover { border-color: #b0b8c1; background-color: #f8f9fa; }
        .desc-check-label::before { 
            content: '\F272'; /* 빈 동그라미 */
            font-family: 'bootstrap-icons'; 
            font-size: 1.25rem; 
            color: #ccc; 
            margin-top: -3px; 
            transition: color 0.2s, transform 0.2s; 
            flex-shrink: 0; 
        }
        .btn-check:checked + .desc-check-label { 
            background-color: rgba(29, 60, 250, 0.04); 
            border-color: var(--main-color); 
            color: #111; 
            font-weight: 600; 
            box-shadow: 0 4px 10px rgba(29, 60, 250, 0.05); 
        }
        .btn-check:checked + .desc-check-label::before { 
            content: '\F26A'; /* 채워진 동그라미 */
            color: var(--main-color); 
        }

        .char-counter { font-size: 0.8rem; color: #888; text-align: right; margin-top: 0.3rem; }
        
        .privacy-box {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 0.5rem;
            padding: 1rem;
            font-size: 0.85rem;
            color: #666;
            height:80px;
            overflow-y: auto;
            margin-bottom: 0.75rem;
            line-height: 1.6;
        }
        
        .custom-privacy-check {
            display: flex;
            align-items: flex-start;
        }
        .custom-privacy-check .form-check-input {
            width: 1.6rem;
            height: 1.6rem;
            margin-top: -0.1rem; 
            cursor: pointer;
            border-color: #b0b8c1;
            flex-shrink: 0;
        }
        .custom-privacy-check .form-check-input:checked {
            background-color: var(--main-color);
            border-color: var(--main-color);
        }
        .custom-privacy-check .form-check-label {
            padding-left: 0.6rem;
            padding-top: 0.15rem;
            font-size: 1.05rem;
            cursor: pointer;
            user-select: none;
        }

        /* 폼 제출 버튼 스타일 */
        .btn-submit-lg { 
            width: 100%;
            background: linear-gradient(135deg, var(--main-color), var(--sub-color));
            color: #fff; font-weight: 700; font-size: 1.25rem; 
            padding: 1.2rem; border-radius: 0.75rem; border: none; 
            box-shadow: 0 10px 20px rgba(29, 60, 250, 0.2);
            transition: all 0.3s ease; 
        }
        .btn-submit-lg:hover { transform: translateY(-3px); box-shadow: 0 15px 25px rgba(29, 60, 250, 0.3); color:#fff; }

        .sec-wrap { padding: 5rem 0; }
        .sec-header { text-align: center; margin-bottom: 3.5rem; }
        .sec-num { font-size: 1.2rem; font-weight: 800; color: var(--sub-color); margin-bottom: 0.5rem; display: block; }
        .sec-title { font-weight: 700; font-size: 2rem; color: #222; }

        .feature-card { background: #fff; border: 1px solid var(--border-color); border-radius: 1rem; padding: 2.5rem 2rem; height: 100%; transition: transform 0.3s, box-shadow 0.3s; text-align: center; }
        .feature-icon { width: 70px; height: 70px; background-color: var(--bg-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--main-color); margin: 0 auto 1.5rem; }
        .feature-title { font-weight: 700; font-size: 1.25rem; margin-bottom: 1rem; color: #333; }
        .feature-desc { color: #666; font-size: 0.95rem; line-height: 1.6; }
   /* =========================================================
           [2] Page Header 3가지 스타일
           ========================================================= */
        
        .header-demo-container {
            padding: 4rem 15px;
            max-width: 800px;
            margin: 0 auto;
        }

        .header-style-1 {
            border-left: 5px solid var(--main-color);
            padding-left: 1.2rem;
            margin-bottom: 2rem;
        }
        .header-style-1 h2 {
            font-size: 1.8rem;
            font-weight: 800;
            color: #111;
            margin: 0 0 0.4rem 0;
            letter-spacing: -0.5px;
        }
        .header-style-1 p {
            color: #666;
            margin: 0;
            font-size: 1rem;
        }

        .header-style-2 {
            text-align: center;
            margin-bottom: 2rem;
        }
        .header-style-2 .icon-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            background-color: #ffffff;
            color: var(--main-color);
            border-radius: 50%;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }
        .header-style-2 h2 {
            font-size: 2rem;
            font-weight: 700;
            color: #222;
            margin-bottom: 0.5rem;
            letter-spacing: -0.5px;
        }
        .header-style-2 p {
            color: #777;
            font-size: 0.95rem;
            margin: 0;
        }

        .header-style-3 {
            text-align: left;
            margin-bottom: 2rem;
            position: relative; margin-bottom: 2rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1.5rem;position: relative;
        }


        .header-style-3 .sub-text {
            display: block;
            color:#555;
            font-weight:600;
            font-size: 0.9rem;
            letter-spacing: 1px;
            margin-bottom: 0.5rem;
        }
        .header-style-3 h2 {
            font-size: 2.2rem;
            font-weight: 800;
            color: #111;
            margin: 0;
            display: inline-block;
            position: relative;
            z-index: 1;
        }
        /* 형광펜 효과 (가상요소) */
        .header-style-3 h2::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 4px;
            width: 100%;
            height: 14px;
            background-color: rgba(29, 60, 250, 0.15);
            z-index: -1;
            border-radius: 2px;
        }


 /* =========================================================
           공통 헤더 레이아웃 (Flexbox 적용)
           ========================================================= */
        .header-flex-layout {
            display: flex;
            justify-content: space-between;
            align-items: flex-end; /* 좌측 텍스트와 우측 요소의 하단 라인을 맞춤 */
            margin-bottom: 2rem;
            flex-wrap: wrap; /* 모바일에서 좁아질 경우 아래로 떨어지도록 처리 */
            gap: 1rem;position: relative; margin-bottom: 2rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1.5rem;position: relative;

        }
        .header-flex-layout img {
           max-height:70px;

        }
        .header-text-group {
            position: relative;
            z-index: 1;
        }

        .header-text-group .sub-text { 
            display: block; 
            color: var(--main-color); 
            font-weight: 600; 
            font-size:0.9rem; 
            letter-spacing: 1px; 
            margin-bottom: 0.25rem; 
        }
		  .header-text-group .board-desc { 
            font-size: 1rem; 
            margin-bottom: 0.25rem; 
        }
     
        .header-text-group h2 { 
            font-size: 2rem; 
            font-weight:700; 
            color: var(--text-dark); 
            margin: 0; 
            display: inline-block; 
            position: relative; 
            letter-spacing: -1px;
            line-height: 1.1;
        }
        
        /* 형광펜(하이라이트) 효과 */
        .header-text-group h2::after { 
            content: ''; 
            position: absolute; 
            left: 0; 
            bottom: 2px; 
            width: 100%; 
            height: 16px; 
            background-color: rgba(220, 76, 70, 0.15); 
            z-index: -1; 
            border-radius: 2px; 
        }

        /* 반응형 텍스트 크기 조절 */
        @media (max-width: 767px) {
            .header-text-group h2 { font-size:1.6rem; }
            .header-text-group h2::after { height: 12px; bottom: 2px; }
            .header-flex-layout { align-items: flex-start; flex-direction: column; }
			.header-flex-layout .btn-more { display: none !important; }

        }

  /* =========================================================
           Variation B - Style 3: 아웃라인(Outline) 버튼 스타일
           ========================================================= */
        .header-sub-nav-outline {
            display: flex;
            gap: 0.5rem;
        }

        .header-sub-nav-outline a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.4rem 1.25rem;
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text-muted);
            text-decoration: none;
            background-color: #fff;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            transition: all 0.2s ease;
        }

        .header-sub-nav-outline a:hover {
            border-color: #bbb;
            color: var(--text-dark);
        }

        .header-sub-nav-outline a.active {
            background-color: var(--footer-ny);
            /*border-color: var(--main-color);*/
            color: #fff;
        }

        /* 반응형 스타일 통합 */
        @media (max-width: 576px) {
            .header-sub-nav { width: 100%; }
            .header-sub-nav a { flex: 1; text-align: center; }
            
            .header-sub-nav-underline { width: 100%; justify-content: space-around; gap: 0; }
            
            .header-sub-nav-outline { width: 100%; }
            .header-sub-nav-outline a { flex: 1; text-align: center; }
        }

 @keyframes pulse {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
        }

       

        .list-container {
            width: 100%;
        }

        .list-header {
            display: grid;
            grid-template-columns: 80px 1fr 1.5fr 1fr 120px;
            padding: 1rem 1.5rem;
            background-color: var(--background-color);
            border-bottom: 1px solid var(--border-color);
            font-weight: 600;
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        /* 슬라이드 업 모션을 위한 컨테이너 속성 설정 */
        .list-body {
            position: relative;
            overflow: hidden;
            /* 10개 행이 보일 정도의 높이 설정 (행 높이 56px * 10) */
            height: 560px; 
            padding: 0.5rem 0;
        }

        .list-wrapper {
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .list-item {
            display: grid;
            grid-template-columns: 80px 1fr 1.5fr 1fr 120px;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--border-color);
            align-items: center;
            font-size: 0.8rem;
            height: 56px; /* 행 높이 고정 */
            background-color: var(--surface-color);
            transition: background-color 0.2s ease;
        }

        .list-item:hover {
            background-color: var(--hover-bg);
        }

        /* 새로 추가되는 항목 강조 효과 */
        .list-item.new-item {
            animation: highlightNew 2s ease-out forwards;
        }

        @keyframes highlightNew {
            0% { background-color: rgba(37, 99, 235, 0.1); }
            100% { background-color: var(--surface-color); }
        }

        .cell {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-right: 1rem;
        }

        .cell-id {
            font-family: monospace;
            color: var(--text-secondary);
        }

        .cell-status {
            display: inline-flex;
        }

        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            text-align: center;
        }

        .status-received {
            background-color: #dbeafe;
            color: #1d4ed8;
        }

        .status-processing {
            background-color: #fef3c7;
            color: #b45309;
        }
        
        .status-completed {
            background-color: #dcfce3;
            color: #15803d;
        }


/* 오피스 페이지*/
 /* --- 제휴사 배너 (와이드 무한 롤링) 방어코드 적용 --- */
        .partner-section {
            background-color: #eee;
            padding:0.5rem 0;
            overflow: hidden; /* 와이드 가로 스크롤 원천 차단 */
            border-top: 1px solid #e2e8f0;
        }
        .partner-title-wrap {
            text-align: center;
            margin-bottom: 2.5rem;
        }
        .partner-title-wrap h3 {
            font-size: 1.2rem;
            font-weight: 700;
            color: #64748b;
            letter-spacing: -0.5px;
        }
        .marquee-container {
            width: 100%;
            overflow: hidden;
            display: flex;
            position: relative;
        }
        /* 양끝 페이드 아웃 효과 (자연스러운 등장/퇴장 UX) */
        .marquee-container::before,
        .marquee-container::after {
            content: ''; position: absolute; top: 0; width: 120px; height: 100%; z-index: 2; pointer-events: none;
        }
        .marquee-container::before { left: 0; background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); }
        .marquee-container::after { right: 0; background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); }
        
        .marquee-track {
            display: flex;
            width: max-content;
            /* 60s 동안 부드럽게 무한 루프 배너 속도조정*/
            animation: marqueeScroll 60s linear infinite; 
        }
        .marquee-track:hover {
            animation-play-state: paused; /* 접근성: 호버 시 멈춤 */
        }
        .partner-logo-box {
            width: 200px; /* 고정 크기 200px */
            flex-shrink: 0; /* 화면 축소 시 찌그러짐 방어 */
            margin: 0 15px; 
            display: flex; justify-content: center; align-items: center;
            /*filter: grayscale(100%) opacity(0.4); /* 기본 상태는 흑백/반투명 */
            transition: filter 0.3s ease, transform 0.3s ease;
            cursor: pointer;
        }
        .partner-logo-box:hover {
            filter: grayscale(0%) opacity(1); /* 호버 시 컬러 복원 */
            transform: scale(1.05);
        }
        .partner-logo-box img { max-width:100%; height:150px; object-fit: contain; }
        
        /* 50% 이동 후 리셋 (동일한 요소 2세트가 존재하므로 완벽한 루프 발생) */
        @keyframes marqueeScroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); } 
        }

        /* --- PC 우측 플로팅 배너 --- */
        .pc-floating-sidebar {
            position: fixed; right: 30px; top: 50%; transform: translateY(-50%);
            z-index: 1040; display: flex; flex-direction: column; gap: 12px; width: 170px;
        }
        .floating-contact-card {
            background-color: #1e2126; border-radius: 20px; padding: 24px 16px;
            text-align: center; color: #ffffff; box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }
        .floating-icon-circle {
            width: 48px; height: 48px; background-color: #2a2d34; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
            font-size: 1.3rem; color: #ffffff;
        }
        .floating-contact-title { font-size: 0.85rem; color: #8c92a0; margin-bottom: 4px; font-weight: 700; }
        .floating-contact-number { font-size: 1.35rem; font-weight: 800; margin-bottom: 8px; letter-spacing: -0.5px; }
        .floating-contact-hours { font-size: 0.75rem; color: #737885; font-weight: 500; }
        .floating-action-btn {
            background-color: #1e2126; border-radius: 16px; padding: 12px 14px 12px 18px;
            display: flex; align-items: center; justify-content: space-between; color: #ffffff;
            text-decoration: none; box-shadow: 0 5px 15px rgba(0,0,0,0.15); transition: transform 0.2s ease, background-color 0.2s ease;
        }
        .floating-action-btn:hover { background-color: #2a2d34; color: #ffffff; transform: translateY(-3px); }
        .floating-action-text { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.5px;color: #ffffff; }
        .floating-action-icon {
            width: 34px; height: 34px; background-color: #2a2d34; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; font-size: 1.1rem;color: #ffffff;
        }
        
        /* --- 탑 버튼 (완벽한 원형, 테두리 제거 방어코드 적용) --- */
        .scroll-top-btn {
            width: 48px; height: 48px;
            flex-shrink: 0; /* 찌그러짐 방지 */
            padding: 0; border: none; outline: none;
            background-color: #ffffff; color: #333;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.4rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 50%;
            cursor: pointer; align-self: flex-end; 
            transition: opacity 0.3s ease, visibility 0.3s, transform 0.3s ease, background-color 0.2s, color 0.2s;
            opacity: 0; visibility: hidden; transform: translateY(15px);
        }
        .scroll-top-btn:focus { outline: none; }
        .scroll-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); }
        .scroll-top-btn:hover { background-color: var(--main-color); color: #ffffff; transform: translateY(-3px); }
        


/* 현장 사진 모든 페이지 슬라이드 슬릭 추가 */
.site-photo-section {
    width: 100%;
    margin: 3rem 0 2rem 0; /* 상하 여백 (디자인에 맞게 조절) */
    overflow: hidden; /* 슬라이드 로딩 전 가로 스크롤 방지 */
}

/* Slick 슬라이드 간격 유지 */
.photo-slick-slider .slick-slide {
    outline: none;
    padding: 0 5px; 
}

/* 개별 사진 아이템 래퍼 */
.photo-item {
    position: relative;
    cursor: pointer;
    /* [수정] 여기서 border-radius와 overflow: hidden을 제거합니다. 
       (padding 영역까지 둥글게 잘리거나 오버레이가 어긋나는 것을 방지) */
}

/* 이미지 강제 규격화 및 초기 흑백 처리 */
.photo-item img {
    width: 100%;
    height: 180px; 
    object-fit: cover; 
    
    /* [수정] 컨테이너 대신 이미지 자체에 둥근 모서리를 직접 부여합니다 */
    border-radius: 8px; 
    
     filter: grayscale(90%);/*흑백*/
	/*filter: grayscale(0%);/*원래 색*/
    transition: filter 0.4s ease; 
}

.photo-item:hover img {
    filter: grayscale(0%); 
}

/* 텍스트 오버레이 수정 */
.photo-overlay {
    position: absolute;
    bottom: 0; 
    
    /* [핵심] 좌우 패딩(5px)을 제외하고 이미지 너비와 완벽하게 일치시킵니다 */
    left: 5px; 
    width: calc(100% - 10px); 
    
    height: 40px;
    background: rgba(15, 23, 42, 0.75);
    
    /* [핵심] 오버레이 하단 모서리도 이미지와 동일하게 8px 둥글게 깎아줍니다 */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 튀어나가는 overflow: hidden 대신, 살짝 아래에서 위로 나타나는 투명도 애니메이션 적용 */
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.photo-overlay span {
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
}

/* 호버 시 오버레이가 제자리로 올라오며 선명해짐 */
.photo-item:hover .photo-overlay {
    opacity: 1;
    transform: translateY(0);
}



/* 1. 전체 섹션 여백 축소 및 배경색(아주 연한 회색) 유지 */
.process-flow-section {
    padding: 2.5rem 15px;
    background-color: #f8f9fa;
}

.process-flow-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.process-step {
    flex: 1;
    position: relative;
    text-align: center;
    padding: 0 1rem;
}

/* 2. 각 요소별 간격 및 크기 */
.step-header {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
    position: relative;
}

/* 숫자 원형 노드 */
.step-number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #2563eb;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    /* 여백 효과 섀도우는 점선 디자인에서 불필요하므로 제거하여 깔끔함 극대화 */
}

/* ========================================================
   [창의적 수정 포인트] 지도의 경로(Map Trail) 컨셉의 연결선
   ======================================================== */
.process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 21px; /* 44px 노드의 정중앙 (테두리 두께 2px 고려) */
    /* 노드 중심(50%)에서 반지름(22px) + 여백(10px)만큼 떨어진 곳에서 선 시작 */
    left: calc(50% + 32px); 
    /* 다음 노드 전까지 딱 떨어지도록 너비 계산 (양쪽 32px씩 제외) */
    width: calc(100% - 64px); 
    height: 0;
    
    /* 화살표와 실선 대신 점선을 사용하여 자연스러운 이동 경로(Flow) 암시 */
    border-top: 2px dashed #cbd5e1; 
    z-index: 1;
}

/* 기존의 작위적인 화살표(>) 완벽 삭제 */
/* .process-step:not(:last-child)::before 코드는 더 이상 사용하지 않습니다. */

/* 아이콘 크기 및 여백 */
.step-icon {
    width: 30px;
    height: 30px;
    margin: 0 auto 0.5rem;
    color: #2563eb;
}

/* 타이틀 및 설명 폰트 */
.step-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.4rem;
    letter-spacing: -0.5px;
}

.step-desc {
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.5;
    word-break: keep-all;
}

/* ========================================================
   모바일 & 태블릿 반응형 (세로 경로로 완벽 호환)
   ======================================================== */
@media (max-width: 991px) {
    .process-flow-container {
        flex-direction: column;
        padding-left: 15px;
    }

    .process-step {
        display: flex;
        text-align: left;
        padding: 0;
        margin-bottom: 2rem;
    }

    .process-step:last-child {
        margin-bottom: 0;
    }

    .step-header {
        margin-right: 1.25rem;
        margin-bottom: 0;
        justify-content: flex-start;
    }

    .step-body {
        padding-top: 0; 
    }

    .step-icon {
        margin: 0 0 0.4rem 0;
    }

    /* 세로 경로 점선으로 변경 */
    .process-step:not(:last-child)::after {
        top: 54px; /* 노드(44px) + 여백(10px) 아래에서 시작 */
        left: 21px; /* 44px의 세로 중앙 */
        width: 0;
        /* 다음 노드 위까지 딱 맞게 떨어지도록 높이 자동 연산 */
        height: calc(100% - 30px); 
        
        border-top: none;
        border-left: 2px dashed #cbd5e1; /* 가로 점선을 세로 점선으로 변경 */
    }
}



/* 우측에 견적이 있는 스타일 추가(원룸)
 /* 1. 부모 컨테이너에 기준점 설정 (기존 .hero-content 수정) */
.hero-content { 
    color: #ffffff; 
    position: relative; /* 자식 요소의 absolute 기준점이 됩니다 */
}
        .hero-title { font-size: 2rem; font-weight: 700; line-height: 1.3; letter-spacing: -1.5px; margin-bottom: 1.5rem; }
        .hero-title .highlight { color: #60a5fa; }
        .hero-desc { font-size: 1.15rem; color: #e2e8f0; line-height: 1.6; margin-bottom: 2rem; }

        .hero-form-card {
            background-color: #ffffff;
            border-radius: 16px;margin-top:40px;
            padding: 1.5rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }
        
        .hero-form-title { font-size: 1.5rem; font-weight: 800; text-align: center; color: var(--text-dark); margin-bottom: 0.5rem; }
        .hero-form-subtitle { text-align: center; font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1rem; }





/* 2. 안내 캐릭터 이미지 레이어 배치 */
.hero-character {
    position: absolute;
    /* 빨간 동그라미 위치에 맞게 아래 수치(bottom, right)를 조절하세요 */
    bottom: 20px;      /* 아래쪽에서의 거리 */
    right: 30px;       /* 오른쪽에서의 거리 (우측 폼과 너무 붙으면 음수값 ex: -20px도 가능) */
    
    width: 180px;      /* 캐릭터 이미지의 가로 크기 (비율에 맞춰 조절) */
    z-index: 10;       /* 뒤에 있는 박스나 배경보다 위로 올라오도록 설정 */
    
    /* (선택) 둥둥 떠 있는 듯한 애니메이션 효과 */
    animation: floatCharacter 3s ease-in-out infinite; 
}

/* (선택) 캐릭터 애니메이션 키프레임 */
@keyframes floatCharacter {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

        /* 
         * [버그 수정 포인트] 
         * Bootstrap의 form-floating을 그대로 사용하여 라벨과 placeholder가 겹치는 현상을 방지합니다. 
         * 추가적인 커스텀 height나 padding을 강제하지 않습니다.
         */
        .form-floating > .form-control,
        .form-floating > .form-select {
            border: 1px solid var(--border-color);
            border-radius: 8px;
        }
        .form-floating > .form-control:focus,
        .form-floating > .form-select:focus {
            border-color: var(--main-color);
            box-shadow: 0 0 0 0.25rem rgba(11, 74, 153, 0.15);
        }




.btn-submit {
            background-color: var(--main-color);
            color: #ffffff;
            font-weight: 700;
            font-size: 1.1rem;
            padding: 1rem;
            border-radius: 8px;
            width: 100%;
            border: none;
            transition: all 0.2s ease;
        }
.btn-submit:hover { background-color: var(--main-hover); transform: translateY(-2px); }

/* 
 * [임시 패치] 특정 브라우저(웨일) width:100% 서브픽셀 렌더링 오차 방어용 GPU 강제 할당
 * - 대상: 버튼에 라인이 생기는 현상 방어(네일 브라우저 업데이트 이후 발생한 오류, 다른 브라우저 크롬 등에서는 선이 보이지 않는데 네일에서만 발생 네일 자체 오류인 것 같음.
 * - 추후 브라우저 렌더링 엔진 업데이트 시 제거 검토
 */
.u-force-gpu {
    transform: translateZ(0);
    backface-visibility: hidden;
}
}
        .form-notice { font-size: 0.8rem; color: var(--text-muted); text-align: center; margin-top: 1rem; }

        /* 폼 2단계 스텝 인디케이터 CSS */
        .step-indicator-wrap { display: flex; justify-content: center; align-items: center; margin-bottom: 1.5rem; }
        .step-indicator { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; transition: all 0.3s; }
        .step-indicator.active { background-color: var(--main-color); color: #fff; }
        .step-indicator.inactive { background-color: #f1f5f9; color: var(--text-muted); border: 1px solid var(--border-color); }
        .step-line { width: 40px; height: 2px; background-color: var(--border-color); margin: 0 10px; transition: all 0.3s; }

     


/* 3. 모바일 환경(991px 이하) 대응 */
@media (max-width: 991px) {
    .hero-content { 
        display: none !important;
    } 
	.hero-form-card {
     margin-top:-40px;
    padding: 1.25rem;
    
  }
 .hero-form-title { font-size: 1.25rem; font-weight: 700; text-align: center; color: var(--text-dark); margin-bottom: 0.5rem; }
 .hero-form-subtitle { text-align: center; font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1rem; }
}


/* 1. 흰색 배경의 솔리드 말풍선 */
.hero-text-bubble {
    position: relative; /* 꼬리 배치를 위한 필수 속성 */
    background-color: #ffffff; 
    border: 2px solid #2563eb; /* 쨍한 블루 테두리로 형태를 명확히 함 */
    border-radius: 24px; /* 모든 모서리를 둥글게 처리 */
    
    padding: 2.5rem 3rem;
    display: inline-block;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    
    /* 붕 떠있는 느낌을 주는 부드러운 그림자 */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); 
}

/* 모던 아키텍처(구조적) 안내 표지판 스타일 */
.hero-text-bubble {
    position: relative;
    background-color: #ffffff; 
    
    /* 1. 표지판 프레임: 선명하고 두꺼운 딥 네이비 테두리로 각 잡힌 구조물 느낌 강조 */
    border: 3px solid var(--main-color); 
    border-radius: 16px; 
    
    padding: 3rem 3.5rem;
    display: inline-block;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    
    /* 2. 입체 보드 효과: 흐릿한 그림자 대신 로얄 블루 컬러의 솔리드 섀도우를 사용하여
     노란색 배경 위로 표지판이 물리적으로 툭 튀어나온 듯한 트렌디한 팝아웃 효과 부여 */
    box-shadow: 16px 16px 0px #2563eb; 
}

/* 표지판 디테일: 좌측 측면 클립으로 이동 */
.hero-text-bubble::before {
    content: '';
    position: absolute;
    
    /* 박스 좌측 밖으로 돌출되도록 위치 조정 */
    left: -14px; 
    top: 48px; /* 위에서 적당히 떨어진 위치 (텍스트 시작 라인과 맞춤) */
    
    /* 가로형에서 세로형으로 크기 반전 */
    width: 20px;
    height: 64px;
    background-color: #2563eb;
    
    border: 3px solid var(--main-color);
    border-radius: 8px;
}

/* 3. 표지판 디테일: 상단에  클립
.hero-text-bubble::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 48px;
    
    width: 64px;
    height: 20px;
    background-color: #2563eb;
    
    border: 3px solid var(--footer-bg);
    border-radius: 8px;
} */

/* 4. 고대비 텍스트: 흐릿함을 배제하고 시각적으로 쨍하게 떨어지도록 명도/채도 세팅 */
.hero-text-bubble .hero-title {
    color: var(--footer-bg); /* 비비드한 다크 네이비/블랙 */
    letter-spacing: -1.5px;
}

.hero-text-bubble .hero-title .highlight {
    color: #2563eb; /* 솔리드 섀도우, 클립과 동일한 쨍한 로얄 블루 */
}

.hero-text-bubble .hero-desc {
    color: #334155; 
    font-weight: 600;
    margin-top: 1rem;
}
/* 모바일 환경(991px 이하) 대응 */
@media (max-width: 991px) {
    .hero-text-bubble {
        /* 모바일에서는 말풍선 꼬리를 중앙 하단으로 변경하거나 둥글게 통일 */
        border-radius: 20px;
        padding: 1.5rem;
    }
}



/* 박스 기본 디자인 */
.input-display-box {
    width: 100%; 
    padding: 0.8rem 1rem; 
    font-size: 0.95rem; 
    border: 1px solid #cbd5e1; 
    border-radius: 8px; 
    margin-bottom: 1rem;
    background-color: #fff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.input-display-box:hover, 
.input-display-box:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* 라벨과 값을 가로로 나란히 (겹침 방지) */
.value-wrapper {
    display: flex;
    align-items: center;
    gap: 0.8rem; /* 라벨과값 사이의 간격 (원하시는 대로 조절 가능) */
    flex: 1;
}

/* 왼쪽 라벨  */
.modal-placeholder-text {
    color: #94a3b8;
    white-space: nowrap; 
}

/* 값 스타일 */
.modal-value-text {
    color: #334155;
    font-weight: 600; 
}

.search-icon-inside {
    color: #cbd5e1;
    font-size: 1.1rem;
}

/* 두 번째 값에 적용될 강조색으로 구분할까? */
.text-red {
    color: #cc0000; /**/
    font-weight: 600;
    margin-left: 4px; /* 첫 번째 값과 여백 조정 */
}



/* 서브*/
.home-section {
            position: relative;
            background-image: url('/common/img_24/bg/home_bgnew.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            padding: 3rem 0;
            overflow: hidden;
        }

        /* 배경 어둡게 처리하여 가독성 확보 */
 .home-section::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.6) 100%);
            z-index: 1;
        }



/* 서브 섹션*/
.keep-section {
            position: relative;
            background-image: url('/common/img_24/bg/keep_bg.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            padding: 3rem 0;
            overflow: hidden;
        }

        /* 배경 어둡게 처리하여 가독성 확보 */
        .keep-section::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.6) 100%);
            z-index: 1;
        }


        .hero-container {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            min-height: 500px;
        }

        .hero-text-area {
            color: #ffffff;
            flex: 1;
            padding-right: 2rem;
        }

        .hero-title {
            font-size: 3rem;
            font-weight: 800;
            line-height: 1.3;
            letter-spacing: -1px;
            margin-bottom: 1rem;
        }
        
        .hero-title .highlight {
            color: var(--point-color); /* 시각적 포인트를 위한 파스텔톤 블루 */
        }

        .hero-desc {
            font-size: 1.1rem;
            color: #eee;
            line-height: 1.6;
            margin-bottom: 2rem;
            word-break: keep-all;
        }

        .hero-badges {
            display: flex;
            gap: 1rem;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 600;
            backdrop-filter: blur(4px);
        }
        .hero-badge i { margin-right: 0.5rem; color: var(--point-color); }

        .hero-form-area {
            flex: 0 0 480px; /* 폼 고정 너비 지정 */
            width: 100%;
        }

        

 @media (max-width: 991px) {/*모바일*/
            .home-section { padding:5rem 0 0rem 0; }
            .hero-container {min-height:400px; max-height:450px;flex-direction: column; text-align: center; }
            .hero-text-area { display: none !important;padding-right: 0; }
           

        }

	.form-select-custom {
            width: 100%; padding: 0.7rem 1rem; font-size: 0.95rem; font-weight: 500;
            color: #334155; background-color: #fff; border: 1px solid #cbd5e1;
            border-radius: 8px; margin-bottom: 1.5rem;
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
            background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 12px;
        }
        .form-select-custom:focus { border-color: var(--point-color); outline: none; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); }
        
        .form-input-custom {
             width: 100%; padding: 0.8rem 1rem; font-size: 0.95rem;
             border: 1px solid #cbd5e1; border-radius: 8px; margin-bottom: 1rem;
        }
        .form-input-custom:focus { border-color: var(--point-color); outline: none; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); }

  /* 우측 퀵메뉴 */
.event-banner-card {
            background: linear-gradient(135deg, var(--sub-color) 0%, var(--main-color) 100%);
            border-radius: 1.2rem;
            padding: 1.25rem 1rem;
            color: #ffffff;
            text-align: center;
            box-shadow: 0 10px 30px rgba(29, 60, 250, 0.2);
            position: relative;
            overflow: hidden;
        }
 
        .event-banner-card::before {
            content: ''; position: absolute; top: -20px; right: -20px; width: 100px; height: 100px;
            background: rgba(255,255,255,0.1); border-radius: 50%;
        }
        .event-banner-card::after {
            content: ''; position: absolute; bottom: -30px; left: -10px; width: 80px; height: 80px;
            background: rgba(255,255,255,0.1); border-radius: 50%;
        }
        .banner-label { display: inline-block; padding: 0.4rem 1rem; background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); border-radius: 50rem; font-size: 0.85rem; font-weight: 700; margin-bottom: 1.1rem; }
        .banner-title { font-size:1rem; font-weight: 700; margin-bottom: 0.1rem; line-height: 1.4; word-break: keep-all; }
        .banner-desc { font-size: 0.95rem; color:var(--point-y); margin-bottom: 1rem; }
        .banner-btn { background: #ffffff; color:var(--main-color); border: none; padding: 0.8rem 1.25rem; border-radius: 8px; font-weight: 700; width: 100%; transition: transform 0.2s, box-shadow 0.2s; }
        .banner-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }