/* Homecare Service Page Specific Styles */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

:root {
    --hc-primary-teal: #1A7B76;
    --hc-dark-teal: #0E4A47;
    --hc-light-blue: #EAF8F9;
    --hc-text-dark: #333333;
    --hc-text-gray: #666666;
    --hc-border-radius: 20px;
}

body.homecare-body {
    background-color: #ffffff;
    color: var(--hc-text-dark);
    font-family: 'Pretendard', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    word-break: keep-all;
}

/* Header/Nav */
.hc-header {
    background: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #eee;
}

.hc-logo {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--hc-primary-teal);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Hero Section */
.hc-hero {
    background: linear-gradient(135deg, #e0f7fa 0%, #ffffff 100%);
    padding: 30px 20px;
    text-align: center;
}

.hc-hero h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--hc-text-dark);
    margin-bottom: 10px;
    line-height: 1.3;
}

.hc-hero p {
    font-size: 1rem;
    color: var(--hc-text-gray);
    margin-bottom: 30px;
}

.hc-hero-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.hc-btn {
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    font-size: 1rem;
    transition: transform 0.2s;
}

.hc-btn-primary {
    background-color: var(--hc-dark-teal);
    color: white;
}

.hc-btn-outline {
    border: 1px solid var(--hc-dark-teal);
    color: var(--hc-dark-teal);
    background: white;
}

/* Intro Section */
.hc-intro {
    padding: 50px 20px;
    text-align: center;
    background: #fff;
}

.hc-intro h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    font-weight: 800;
}

.hc-intro p {
    color: var(--hc-text-gray);
    max-width: 600px;
    margin: 0 auto;
}

/* Stats Grid */
.hc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.hc-stat-card {
    background: #f9f9f9;
    padding: 30px;
    border-radius: var(--hc-border-radius);
    text-align: center;
    border: 1px solid #eee;
}

.hc-stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--hc-primary-teal);
    margin-bottom: 10px;
}


/* Feature Image Cards */
.hc-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.hc-feature-card {
    background: white;
    border-radius: var(--hc-border-radius);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Thicker shadow for premium feel */
    transition: transform 0.3s ease;
    border: 1px solid var(--hc-border-color);
}

.hc-feature-card:hover {
    transform: translateY(-5px);
}

.hc-feature-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.hc-feature-content {
    padding: 25px;
    text-align: center;
}

.hc-feature-content h3 {
    color: var(--hc-primary-teal);
    margin-bottom: 10px;
    font-size: 1.4rem;
    font-weight: 800;
}

.hc-feature-content p {
    color: var(--hc-text-gray);
    font-size: 1rem;
    margin: 0;
}



/* Checklist Section */
.hc-checklist {
    background-color: #f8fbfa;
    /* Very light teal/grey */
    padding: 60px 20px;
    text-align: center;
}

.hc-checklist h2 {
    font-size: 1.8rem;
    color: var(--hc-dark-teal);
    margin-bottom: 40px;
    font-weight: 800;
}

.hc-checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.hc-check-box {
    background: white;
    padding: 25px;
    border-radius: var(--hc-border-radius);
    border: 1px solid var(--hc-dark-teal);
    /* Highlight border */
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.hc-check-box:hover {
    transform: translateY(-3px);
    background-color: var(--hc-primary-teal);
}

.hc-check-box:hover span,
.hc-check-box:hover i {
    color: white;
}

.hc-check-box i {
    color: var(--hc-primary-teal);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.hc-check-box span {
    font-weight: 600;
    font-size: 1rem;
    color: var(--hc-text-dark);
}

/* Pricing Section - New Grid Style 8 Cards */
.hc-pricing {
    background: #fff;
    /* White background as per image, or keep light blue? Image looks white/clean */
    padding: 60px 20px;
}

.hc-pricing-header {
    text-align: center;
    margin-bottom: 40px;
}

.hc-pricing-header h2 {
    font-size: 2rem;
    color: #4472C4;
    /* Matching blue color */
    font-weight: 800;
    margin-bottom: 10px;
}

.hc-pricing-header p {
    color: #4472C4;
    font-size: 1rem;
}

.hc-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns fixed */
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.hc-price-card-new {
    background: white;
    border: 2px solid #BDD7EE;
    /* Light blue border */
    border-radius: 20px;
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.hc-card-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #4472C4;
    /* Blue text */
    margin-bottom: 5px;
}

.hc-card-sub {
    font-size: 0.8rem;
    color: #333;
    font-weight: 600;
    margin-bottom: 20px;
}

.hc-price-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.hc-discount-badge {
    background-color: #0055FF;
    /* Blue badge */
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    align-self: flex-end;
    /* Align bottom */
    margin-bottom: 5px;
}

.hc-price-group {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.hc-price-original {
    font-size: 0.9rem;
    color: #999;
    text-decoration: line-through;
    position: relative;
    margin-bottom: 0px;
}

/* Add the little arrow for original price if possible, but line-through is good for now. 
   Image has a swooping arrow, might be an SVG or image. We'll stick to css line-through. */

.hc-price-final {
    font-size: 1.6rem;
    font-weight: 800;
    color: #000;
}

/* Responsive: 1 column on mobile */
@media (max-width: 768px) {
    .hc-pricing-grid {
        grid-template-columns: 1fr;
    }

    .hc-price-card-new {
        min-height: auto;
    }
}

/* Sticky Footer */
.hc-sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    z-index: 1000;
}

.hc-footer-btn {
    padding: 15px 0;
    text-align: center;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Responsive helper */
@media (max-width: 768px) {
    .hc-hero h1 {
        font-size: 1.6rem;
    }

    .hc-hero {
        padding: 5px 20px;
    }

    .hc-sticky-footer {
        grid-template-columns: 1fr 1fr;
        /* 2 columns, will auto-wrap to 2 rows for 4 items */
    }

    .hc-footer-btn {
        padding: 12px 5px;
        /* Adjust padding for 2-line layout */
        font-size: 0.95rem;
        /* Larger text for mobile readability */
        flex-direction: row;
        /* Horizontal icon + text for better spread? Or stack? Reference looks like row or stack. Let's stick to flex row if text is long or column if icon is top. Reference shows Icon Left, Text Right or Stacked. Let's try Row for 2x2. */
        /* Actually reference image shows Icon Left, Text Right for these 2x2 buttons usually, or centered. 
           The reference image provided shows centered icon and text, or icon left? 
           "카카오톡상담하기" with icon. It looks centered. */
        flex-direction: row;
        gap: 8px;
        border: 1px solid rgba(0, 0, 0, 0.05);
        /* Separator */
    }
}

/* Quote Form Section */
.hc-quote-section {
    background-color: #6E86B7;
    /* Matching the footer blog button color or similar slate blue */
    padding: 80px 20px;
    color: white;
    text-align: center;
}

.hc-quote-container {
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 40px 30px;
    background: transparent;
}

.hc-quote-section h2 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: white;
}

.hc-quote-desc {
    font-size: 0.95rem;
    margin-bottom: 30px;
    opacity: 0.9;
    line-height: 1.5;
    color: white;
}

.hc-quote-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hc-quote-input,
.hc-quote-textarea {
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    border: none;
    font-size: 1rem;
    font-family: 'Pretendard', sans-serif;
    box-sizing: border-box;
}

.hc-quote-textarea {
    resize: vertical;
    min-height: 120px;
}

.hc-quote-check {
    text-align: left;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    color: #333;
    /* Image shows dark text on blue? No, usually white on blue. Let's assume text is readable. */
    color: #333;
    /* Wait, if the section bg is blue, text should be white. But in the image, the checkbox text "개인정보..." looks black? No, it looks dark grey. */
    /* Let's double check the image. The image background is blue. The text "개인정보..." is dark gray? That would be low contrast.
       Ah, looking at the image provided... the background is blue. Text "무료 견적 요청" is white. Description is white.
       Checkbox text "개인정보 처리 방침..." looks like it's black/dark grey. That's weird contrast. 
       Let's stick to black/dark grey if that's what's in the image, or white for better a11y. 
       The image shows the text as black. I will use black/dark grey. */
    color: #333;
}

.hc-quote-btn {
    background-color: #218c74;
    /* Teal Green */
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 10px;
    width: 100%;
    /* Full width button */
    transition: background 0.3s;
}

.hc-quote-btn:hover {
    background-color: #166d5a;
}

/* Utility: Mobile Break */
.mo-br {
    display: none;
}

@media (max-width: 768px) {
    .mo-br {
        display: inline;
    }
}


/* Privacy Group & Link */
.hc-privacy-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Spread check and link */
    margin-top: 5px;
    margin-bottom: 15px;
}

.hc-quote-check {
    margin-top: 0;
    /* Reset margin since it's now in flex container */
    margin-bottom: 0;
}

.hc-privacy-link {
    color: rgba(255, 255, 255, 0.7);
    /* Lighter white for contrast on blue bg */
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

/* Privacy Modal Styles */
.hc-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    text-align: left;
    /* Reset center align from body/section */
}

.hc-modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 30px;
    border: 1px solid #888;
    width: 90%;
    max-width: 600px;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.hc-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 15px;
    right: 20px;
    cursor: pointer;
}

.hc-close:hover,
.hc-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.hc-modal-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--hc-text-dark);
    border-bottom: 2px solid var(--hc-primary-teal);
    padding-bottom: 10px;
}

.hc-modal-body {
    font-size: 0.9rem;
    color: var(--hc-text-gray);
    line-height: 1.6;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
}