/* IOS Safari 감지 */
@supports (-webkit-touch-callout: none) {
  .ios-specific {
    padding: 1.2rem;
    font-size: 0.9rem;
  }
}

/* iOS 전용 grid-3 스타일 */
@supports (-webkit-touch-callout: none) {
  .grid-3 div {
    font-size: clamp(0.9rem, 2.8vw, 1.1rem);
    font-weight: 550;
  }
}

/* 안드로이드 Chrome 감지 */
@supports not (-webkit-touch-callout: none) {
  .android-specific {
    padding: 1rem;
    font-size: 1rem;
  }
  .features-grid {
	  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  /* grid-3 안드로이드 전용 스타일 */
  .grid-3 div {
    font-size: clamp(1rem, 3vw, 1.5rem) !important;
    font-weight: 600 !important;
  }
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
  margin: 0 auto;
  letter-spacing: -1px;
  font-family: 'SCoreDream', -apple-system, BlinkMacSystemFont, sans-serif;
  max-width: 950px;
  font-size: clamp(14px, 4vw, 18px);
}

/* 공통 
h2, h3, h4 { margin: 0; }
p { margin: 0; }
*/
/* 헤더 */
header {
  text-align: center;
  padding: 10px;
  background: #fff;
}
header img {
  max-width: min(180px, 80vw);
  height: auto;
}

.hour24 {
  font-size: clamp(20px, 5vw, 33px);
  background: #0c2A44;
  color: white;
  text-align: center;
  padding: 15px 10px;
  word-break: keep-all;
}

header .phone {
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  font-weight: bold;
  color: #003366;
}
.container {
            max-width: 50rem;
            margin: 0 auto;
            background-color: white;
        }
        
        .header {
            text-align: center;
            padding: 1.25rem;
            background-color: white;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 0.625rem;
        }
        
        .logo::before {
            content: "💛";
            margin-right: 0.5rem;
        }
        
        .contact-banner {
            background-color: #1e3a5f;
            color: white;
            text-align: center;
            padding: 0.9375rem;
            font-size: 1.25rem;
            font-weight: bold;
            letter-spacing: 0.0625rem;
        }
        
        .form-section {
            padding: 1.875rem;
            background-color: white;
        }
        
        .form-title {
            font-size: 1.5rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 1.875rem;
        }
        
        .form-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1.875rem;
			border-top: 3px solid #001530;
        }
        
        .form-table td {
            padding: 0.75rem 0.9375rem;
            border-bottom: 1px solid #eee;
            vertical-align: middle;
        }
        .form-table tr:last-child td {
			border-bottom: 3px solid #001530;
		}
		
        .form-table td.label {
            width: 12.5rem;
            font-size: 1rem;
            color: #333;
            font-weight: 500;
            background-color: #f8f9fa;
        }
        
		.form-table td.label .essential {
            color: #163A77;
        }
		
        .form-table td.input {
            width: auto;
        }
        
        .form-table input {
            width: 18.75rem;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 0.25rem;
            font-size: 0.875rem;
            color: #333;
            background-color: white;
        }
        
        .form-table textarea {
            width: 100%;
            max-width: 31.25rem;
            height: 7.5rem;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 0.25rem;
            font-size: 0.875rem;
			font-family: inherit;
            color: #333;
            background-color: white;
            resize: none;
        }
        
        .form-table input:focus,
        .form-table textarea:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 0.125rem rgba(0, 123, 255, 0.25);
        }
        
        .memo-hint {
            font-size: 0.75rem;
            color: #999;
            margin-top: 0.25rem;
			
        }
        
        .info-text {
            margin: 1.875rem 0;
            line-height: 1.6;
            color: #555;
        }
        
        .info-text p {
            margin-bottom: 0.5rem;
        }
        
        .submit-btn {
            display: block;
            width: 12.5rem;
            margin: 1.875rem auto;
            padding: 0.9375rem;
            background-color: #1e3a5f;
            color: white;
            font-size: 1rem;
            font-weight: bold;
            border: none;
            border-radius: 0.25rem;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .submit-btn:hover {
            background-color: #2d4a6b;
        }
        
        .required {
            color: #e74c3c;
            margin-left: 0.25rem;
        }
        
        .divider {
            height: 1px;
            background-color: #ddd;
            margin: 1.875rem 0;
        }
        
        /* 모바일 반응형 */
        @media (max-width: 768px) {
            .header {
                padding: 1rem;
            }
            
            .logo {
                font-size: 1.25rem;
            }
            
            .contact-banner {
                padding: 0.75rem;
                font-size: 1rem;
            }
            
            .form-section {
                padding: 1rem;
            }
            
            .form-title {
                font-size: 1.25rem;
                margin-bottom: 1.5rem;
            }
            
            .form-table td.label {
                width: 10rem;
                font-size: 0.9rem;
            }
            
            .form-table input {
                width: 15rem;
            }
            
            .submit-btn {
                width: 100%;
                max-width: 18.75rem;
            }
        }
        
        @media (max-width: 480px) {
            .form-section {
                padding: 0.75rem;
            }
            
            .form-title {
                font-size: 1.125rem;
            }
            
            .contact-banner {
                font-size: 0.875rem;
            }
            
            .form-table td.label {
                width: 8rem;
                font-size: 0.85rem;
            }
            
            .form-table input {
                width: 12rem;
            }
        }