/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

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

/* Header */
.header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    z-index: 1000;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.logo h1 {
    font-size: 24px;
    font-weight: 700;
    color: #28a745;
    /* Brand Green */
}

.nav-center ul {
    display: flex;
    gap: 40px;
}

.nav-center a {
    font-size: 16px;
    font-weight: 500;
    color: #555;
    transition: color 0.3s;
}

.nav-center a:hover {
    color: #28a745;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-login {
    padding: 8px 20px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
    color: #666;
    transition: all 0.3s;
}

.btn-login:hover {
    background: #28a745;
    color: #fff;
    border-color: #28a745;
}

.contact {
    font-size: 16px;
    color: #333;
}

.contact strong {
    color: #28a745;
}

/* Hero Section */
.hero {
    position: relative;
    padding: 0 0 10px;
    background: linear-gradient(135deg, #f0f7f4 0%, #e6fcf5 100%);
    overflow: hidden;
}

.hero-container {
    max-width: 1200px;
    /* Wider container for cards */
    margin: 0 auto;
    position: relative;
    padding: 0;
    /* Removed padding for full width cards */
}

.slider-wrapper {
    overflow: hidden;
    padding: 0;
    /* Removed wrapper padding */
}

.slider-track {
    display: flex;
    transition: transform 0.5s ease;
}

.card {
    flex: 0 0 100%;
    /* Show one card at a time or simple scroll */
    min-width: 100%;
    padding: 0 20px;
}

.card-content {
    background: #fff;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    min-height: 400px;
    /* Reduced height to 2/3 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-left: 25%;
    /* Move content to 1/4 mark */
    padding-right: 5%;
    /* Add some right padding for balance */
}

.card-a .card-content {
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.6)), url('../images/card_bg_a_new.png');
}

.card-b .card-content {
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.6)), url('../images/card_bg_b_new.png');
}

.card-c .card-content {
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.6)), url('../images/card_bg_c_new.png');
}

.card-content h2,
.card-content h3 {
    font-size: 32px;
    color: #333;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.feature-list li {
    font-size: 18px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.feature-list li span {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: #28a745;
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    text-align: center;
    line-height: 24px;
    margin-right: 10px;
}

.deco-icon {
    position: absolute;
    bottom: 40px;
    right: 40px;
    font-size: 80px;
    opacity: 0.1;
}

.qa-box {
    margin-bottom: 25px;
}

.qa-box .q {
    font-weight: 700;
    color: #28a745;
    margin-bottom: 5px;
    font-size: 18px;
}

.qa-box .a {
    color: #555;
    padding-left: 20px;
    border-left: 3px solid #eee;
    font-size: 16px;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-size: 18px;
    color: #555;
    z-index: 10;
    transition: background 0.3s;
}

.slider-btn:hover {
    background: #28a745;
    color: #fff;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: background 0.3s;
}

.dot.active {
    background: #28a745;
    width: 20px;
    /* Stretch active dot */
    border-radius: 10px;
}

/* Notice & Inquiry Section */
.notice-section {
    background: #fff;
    padding: 30px 0;
    border-bottom: 1px solid #eee;
}

.main-content-wrapper {
    display: flex;
    gap: 40px;
    /* Space between columns */
    align-items: flex-start;
    /* Vertically center if heights differ, or use stretch */
}

/* Left: Notice Area (55%) */
.notice-area {
    flex: 0 0 55%;
    max-width: 55%;
}

.notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    /* Reduced margin */
}

.notice-header h2 {
    font-size: 20px;
    font-weight: 700;
}

.btn-more {
    font-size: 14px;
    color: #888;
}

.notice-list li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;
    padding: 10px 0;
    /* Slightly reduced padding */
}

.notice-list li:last-child {
    border-bottom: none;
}

.notice-list a {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #444;
}

.notice-list .badge {
    display: inline-block;
    padding: 2px 6px;
    background: #eee;
    font-size: 11px;
    margin-right: 8px;
    border-radius: 4px;
    color: #666;
}

.notice-list .date {
    font-size: 13px;
    color: #999;
    margin-left: 20px;
}

/* Right: Inquiry Area (45%) */
.inquiry-area {
    flex: 1;
    /* Takes remaining space */
    border: 2px solid #e74c3c;
    /* Red border as shown in reference, or use theme color. Reference showed red box. Let's use theme color or maybe red if requested specifically as 'capture image' style... User said 'apply like capture image'. Capture image has red box. I'll use a clean border. */
    /* Actually user just highlighted with red box in earlier images. 
       The latest image provided (uploaded_image_1768117986031.png) shows a clean white box with content. 
       The red box in previous request might have been just annotation. 
       However, the prompt says "apply like capture image" and refers to a red box in the capture. 
       "좌측???�각?��?... ?�측???�용??캡쳐?��?지?� 같이... 빨간???�각??2개�? ?�는??
       Ah, the red box IN THE CAPTURE was the ANNOTATION. 
       I should style the CONTENT inside to look like the content within the red box in the image.
       The content inside has big text.
    */
    border: 1px solid #ddd;
    /* Clean border */
    border-radius: 4px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    /* Match height of notice area if possible */
    min-height: 180px;
    /* Approximate height */
}

/* Inquiry Content Layout */
.inquiry-content {
    display: flex;
    align-items: center;
    /* Vertically center */
    justify-content: center;
    gap: 30px;
    /* Space between icon and text */
    text-align: left;
    /* Align text left within its box */
    width: 100%;
}

.inquiry-icon-box {
    flex: 0 0 auto;
}

.large-icon {
    width: 100px;
    /* Much larger icon */
    height: auto;
    display: block;
}

.inquiry-text-box h3 {
    font-size: 29px;
    /* Increased 1.2x from 24px */
    font-weight: 700;
    color: #333;
    margin: 0 0 10px 0;
}

.inquiry-text-box .desc {
    font-size: 21px;
    color: #28a745;
    font-family: 'Notebook', 'Gowun Dodum', sans-serif;
    line-height: 1.3;
    margin-bottom: 10px;
    font-weight: 500;
}

.inquiry-text-box .phone {
    font-size: 32px;
    font-weight: 700;
    color: #568203;
    /* Avocado color */
    font-style: italic;
    margin: 0;
}

/* Sections Common */
.section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h2 {
    font-size: 32px;
    margin-bottom: 10px;
    color: #333;
}

.section-title p {
    color: #666;
    font-size: 18px;
}

/* Group Section */
.section-group {
    background: #fff;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.partner-card {
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    transition: transform 0.3s;
}

.partner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.partner-card img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    max-height: 40px;
}

.section-content-text {
    background: #f8fcf9;
    padding: 40px;
    border-radius: 15px;
}

.section-content-text h3 {
    margin-bottom: 20px;
    color: #28a745;
}

.section-content-text ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
}

.section-content-text ul li::before {
    content: "\2022";
    color: #28a745;
    position: absolute;
    left: 0;
}

/* Consignment Section */
.section-consignment {
    background: #f4f6f8;
}

.content-box {
    display: flex;
    gap: 40px;
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    align-items: center;
}

.consignment-visual {
    flex: 1;
    text-align: center;
}

.consignment-info {
    flex: 2;
}

/* Coverage Section */
.section-coverage {
    background: #fff;
}

.coverage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.coverage-card {
    text-align: center;
    padding: 30px 20px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.02);
}

.coverage-card .icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.coverage-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
}

.coverage-card p {
    font-size: 14px;
    color: #666;
}

.coverage-note {
    background: #fefefe;
    border: 1px solid #f0f0f0;
    padding: 30px;
    border-radius: 10px;
}

.inquiry-note {
    margin-top: 20px;
    color: #28a745;
    font-weight: 500;
}

/* Insurance Tables */
.insurance-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.insurance-table th,
.insurance-table td {
    padding: 12px 15px;
    border: 1px solid #eee;
    text-align: left;
    font-size: 15px;
}

.insurance-table th {
    background: #28a745;
    color: #fff;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.insurance-table td:first-child {
    font-weight: 700;
    color: #333;
    text-align: center;
    background-color: #f9f9f9;
    white-space: nowrap;
}

.table-header-img {
    margin: 20px 0 10px;
    height: 30px;
    display: block;
}

/* Process List */
.process-list {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 10px;
    border-left: 5px solid #28a745;
    margin-top: 30px;
}

.process-list li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
}

.process-list li::before {
    content: "\2714";
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}

/* Footer */
.footer {
    background: #333;
    color: #aaa;
    padding: 40px 0;
    text-align: center;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .header .container {
        padding: 0 15px;
    }

    .nav-center {
        display: none;
    }

    /* Use mobile menu if needed, hidden for now */

    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-box {
        flex-direction: column;
    }


    /* Login Page Specifics */
    .login-page {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: linear-gradient(135deg, #f0f7f4 0%, #e6fcf5 100%);
        padding: 20px;
    }

    .login-card {
        background: white;
        padding: 60px 40px;
        border-radius: 20px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
        width: 100%;
        max-width: 420px;
        text-align: center;
    }

    .login-logo h1 {
        font-size: 32px;
        font-weight: 700;
        color: #28a745;
        margin-bottom: 40px;
        letter-spacing: -0.5px;
    }

    .login-form .input-group {
        margin-bottom: 20px;
        text-align: left;
    }

    .login-form label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        color: #666;
        font-weight: 500;
    }

    .login-form input[type="text"],
    .login-form input[type="password"] {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 16px;
        transition: border 0.3s;
        outline: none;
        font-family: inherit;
    }

    .login-form input[type="text"]:focus,
    .login-form input[type="password"]:focus {
        border-color: #28a745;
    }

    .btn-login-submit {
        width: 100%;
        padding: 15px;
        background: #28a745;
        color: white;
        border: none;
        border-radius: 10px;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.3s;
        margin-top: 10px;
    }

    .btn-login-submit:hover {
        background: #218838;
    }

    .btn-login-cancel {
        background: none;
        border: none;
        color: #999;
        margin-top: 20px;
        cursor: pointer;
        font-size: 14px;
    }