/* Main CSS for HLPSOLUTION */
* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'Noto Sans KR', sans-serif; line-height: 1.6; color: #333; background-color: #f8f9fa; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Header */
header { background-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 100; padding: 15px 0; transition: all 0.3s ease; }
header:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); }
header .container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 24px; font-weight: 700; color: #1a237e; transition: color 0.3s ease; }
.logo:hover { color: #283593; }

nav ul { display: flex; list-style: none; }
nav ul li { margin-left: 30px; }
nav ul li a { text-decoration: none; color: #333; font-weight: 500; transition: all 0.3s ease; position: relative; }
nav ul li a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background-color: #1a237e; transition: width 0.3s ease; }
nav ul li a:hover::after, nav ul li a.active::after { width: 100%; }
nav ul li a:hover, nav ul li a.active { color: #1a237e; }

/* Hero section */
.hero { background: linear-gradient(135deg, #1a237e, #283593); color: white; padding: 120px 0; text-align: center; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(26, 35, 126, 0.9), rgba(40, 53, 147, 0.9)); animation: gradientShift 10s ease infinite; }
.hero .container { position: relative; z-index: 1; }
.hero h2 { font-size: 42px; margin-bottom: 20px; font-weight: 700; animation: fadeInUp 1s ease; }
.hero p { font-size: 20px; max-width: 700px; margin: 0 auto; font-weight: 300; animation: fadeInUp 1s ease 0.3s; opacity: 0; animation-fill-mode: forwards; }

/* Features section */
.features { padding: 100px 0; background-color: #fff; }
.features .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; }
.feature-card { flex: 1 1 300px; padding: 40px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: all 0.4s ease; background: #fff; }
.feature-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(26, 35, 126, 0.1); }
.feature-card .icon { font-size: 48px; margin-bottom: 25px; transition: transform 0.3s ease; }
.feature-card:hover .icon { transform: scale(1.1); }
.feature-card h3 { font-size: 22px; margin-bottom: 15px; color: #1a237e; font-weight: 600; }
.feature-card p { color: #555; line-height: 1.8; }

/* About section */
.about { padding: 100px 0; background-color: #f0f4ff; position: relative; }
.about::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #1a237e, #283593); }
.about h2 { font-size: 32px; margin-bottom: 30px; text-align: center; color: #1a237e; font-weight: 700; }
.about p { max-width: 800px; margin: 0 auto; text-align: center; color: #444; line-height: 1.8; }

/* Company info section */
.company-info { padding: 80px 0; background-color: #fff; border-top: 1px solid #eee; }
.company-info .container { display: flex; flex-wrap: wrap; gap: 40px; }
.info-item { flex: 1 1 300px; transition: transform 0.3s ease; }
.info-item:hover { transform: translateX(10px); }
.info-item h4 { font-size: 20px; margin-bottom: 20px; color: #1a237e; font-weight: 600; }
.info-item p { margin-bottom: 10px; color: #555; font-size: 15px; line-height: 1.8; }

/* Terms page specific styles */
.terms-section { padding: 60px 0; background-color: #fff; }
.terms-section h2 { font-size: 28px; margin-bottom: 30px; color: #1a237e; }
.terms-section h3 { font-size: 20px; margin: 25px 0 15px; color: #333; }
.terms-section p, .terms-section li { margin-bottom: 15px; color: #555; }
.terms-section ul, .terms-section ol { margin-left: 20px; margin-bottom: 20px; }

/* Tab design */
.tabs { display: flex; margin-bottom: 30px; border-bottom: 1px solid #ddd; }
.tab-btn { padding: 12px 25px; font-size: 16px; font-weight: 500; color: #666; background: none; border: none; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.3s ease; }
.tab-btn.active { color: #1a237e; border-bottom: 3px solid #1a237e; }
.tab-btn:hover { color: #1a237e; }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* Content styling */
.policy-section { margin-bottom: 30px; }
.policy-section h3 { font-size: 20px; margin: 25px 0 15px; color: #1a237e; }
.policy-section p { margin-bottom: 15px; line-height: 1.6; }
.policy-section ul { margin-left: 20px; margin-bottom: 20px; }
.policy-section li { margin-bottom: 10px; }
.policy-article { margin-bottom: 30px; }

/* Animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Responsive design */
@media screen and (max-width: 768px) {
    .hero { padding: 80px 0; }
    .hero h2 { font-size: 32px; }
    .features .container, .company-info .container { flex-direction: column; }
    .feature-card { margin-bottom: 30px; }
    .info-item:hover { transform: none; }
    .tabs { flex-direction: column; }
    .tab-btn { width: 100%; text-align: left; }
}