:root{
    --brand:#1A237E;
    --gold:#8E6B3D;
    --ink:#222;
    --muted:#666;
    --bg:#fff;
    --alt:#faf8f5;
    --radius:16px;
    --shadow:0 4px 20px rgba(0,0,0,.1);
    --shadow-lg:0 8px 30px rgba(0,0,0,.15);
    --transition:all 0.3s ease;
}

*{box-sizing:border-box; max-width:100%}
html{scroll-behavior:smooth; font-size:16px; overflow-x:hidden}
html,body{margin:0;padding:0; width:100%; min-height:100%}
body{
    font-family:"Noto Sans KR",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--ink); background:var(--bg); line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    word-break:keep-all;
    word-wrap:break-word;
    position:relative;
}

/* 이미지 반응형 */
img{max-width:100%; height:auto}

/* 테이블 반응형 */
table{width:100%; table-layout:fixed}

/* 긴 단어 처리 */
.break-word{word-break:break-word; overflow-wrap:break-word}

/* 터치 최적화 */
a, button, input, select, textarea{touch-action:manipulation}

/* 스크롤 최적화 */
.container, .section, .header, .footer{position:relative}

/* Webkit 스크롤바 스타일링 (선택사항) */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#f1f1f1}
::-webkit-scrollbar-thumb{background:#c1c1c1; border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#a8a8a8}

.container{width:min(1120px,92%); margin-inline:auto}
.section{padding:72px 0}
.section--alt{background:var(--alt)}
.section__title{font-size:clamp(24px, 4vw, 32px); margin:0 0 24px; font-weight:700; text-align:center}

/* 접근성 개선 */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* 포커스 스타일 개선 */
:focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:4px}
a:focus-visible{outline-color:var(--gold)}

/* 로딩 애니메이션 */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* 스크롤 애니메이션 */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* 고성능 애니메이션을 위한 설정 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .slider .slide {
        transition: none;
    }
}

/* 헤더 메인 */
.header{
    position:sticky; 
    top:0; 
    z-index:50; 
    background:rgba(255,255,255,0.95); 
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(238,238,238,0.8); 
    box-shadow:0 2px 20px rgba(0,0,0,0.08);
    transition:var(--transition);
}

.header__inner{
    display:flex; 
    align-items:center; 
    gap:32px; 
    padding:16px 0; 
    position:relative;
}

/* 브랜드 로고 */
.brand{
    display:flex; 
    align-items:center; 
    text-decoration:none; 
    transition:var(--transition); 
    flex-shrink:0;
}

.brand:hover{
    transform:translateY(-2px);
}

.brand__logo{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
}

.brand:hover .logo-icon{
    transform:rotate(5deg) scale(1.05);
}

.brand__text{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.brand__name{
    font-size:24px;
    font-weight:700;
    color:var(--brand);
    line-height:1;
}

.brand__tagline{
    font-size:12px;
    color:var(--gold);
    font-weight:600;
    letter-spacing:0.5px;
}

/* 모바일 메뉴 토글 */
.menu-toggle{
    display:none; 
    flex-direction:column;
    justify-content:center;
    width:44px;
    height:44px;
    background:none; 
    border:none; 
    cursor:pointer; 
    padding:8px;
    border-radius:8px;
    transition:var(--transition);
    position:relative;
}

.menu-toggle:hover{
    background:rgba(26,35,126,0.1);
    transform:scale(1.05);
}

.menu-toggle__line{
    display:block;
    width:24px;
    height:2px;
    background:var(--ink);
    border-radius:2px;
    transition:all 0.3s ease;
    transform-origin:center;
}

.menu-toggle__line + .menu-toggle__line{
    margin-top:6px;
}

.menu-toggle.open .menu-toggle__line:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.menu-toggle.open .menu-toggle__line:nth-child(2){
    opacity:0;
    transform:translateX(-20px);
}

.menu-toggle.open .menu-toggle__line:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}

/* 헤더 액션 그룹 */
.header__actions{
    display:flex; 
    align-items:center; 
    gap:12px; 
    margin-left:auto;
}

/* CTA 버튼 */
.cta-button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 20px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    transition:var(--transition);
    position:relative;
    overflow:hidden;
    white-space:nowrap;
}

.cta-button:before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition:left 0.5s ease;
}

.cta-button:hover:before{
    left:100%;
}

.cta-button--primary{
    background:linear-gradient(135deg, var(--brand), #2196F3);
    color:#fff;
    box-shadow:0 4px 15px rgba(26,35,126,0.3);
}

.cta-button--primary:hover{
    background:linear-gradient(135deg, #1565C0, var(--brand));
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(26,35,126,0.4);
}

.cta-button--secondary{
    background:rgba(142,107,61,0.1);
    color:var(--gold);
    border:2px solid var(--gold);
}

.cta-button--secondary:hover{
    background:var(--gold);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 4px 15px rgba(142,107,61,0.3);
}

.cta-button__icon{
    transition:var(--transition);
}

.cta-button:hover .cta-button__icon{
    transform:scale(1.1);
}

.cta-button__text{
    font-weight:600;
}

/* 인증 메뉴 */
.auth-menu{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.auth-menu a{color:var(--ink); text-decoration:none; padding:8px 12px; border-radius:8px; transition:var(--transition); font-size:14px; white-space:nowrap}
.auth-menu a:hover{color:var(--brand); background:rgba(26,35,126,.05)}
.auth-menu .user-name{color:var(--brand); font-weight:600; white-space:nowrap}

/* 후기 관련 스타일 */
.review-summary{text-align:center; margin-bottom:32px; padding:24px; background:#fff; border:1px solid #eee; border-radius:var(--radius)}
.rating-overview{display:flex; flex-direction:column; align-items:center; gap:8px}
.avg-rating{display:flex; flex-direction:column; align-items:center; gap:4px}
.rating-number{font-size:32px; font-weight:700; color:var(--brand)}
.review-count{color:var(--muted); font-size:14px}

/* 별점 표시 */
.stars{display:flex; gap:2px}
.star{color:#ddd; font-size:20px; transition:var(--transition)}
.star.filled{color:#ffc107}

/* 후기 그리드 */
.review-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:20px; margin-bottom:32px}
.review-card{background:#fff; border:1px solid #eee; border-radius:var(--radius); padding:20px; transition:var(--transition)}
.review-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.review-card__header{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px}
.review-card__title{margin:0; font-size:16px; font-weight:600; color:var(--ink)}
.review-card__rating{display:flex; gap:2px}
.review-card__content{color:var(--muted); line-height:1.6; margin:12px 0}
.review-card__meta{display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:16px; border-top:1px solid #f0f0f0; font-size:12px; color:var(--muted)}
.review-card__service{background:var(--alt); padding:4px 8px; border-radius:4px; font-size:11px}

/* 후기 액션 버튼 */
.review-actions{display:flex; justify-content:center; gap:16px; flex-wrap:wrap}

/* 로딩 스피너 */
.loading{display:flex; justify-content:center; align-items:center; padding:40px; color:var(--muted)}
.spinner{width:24px; height:24px; border:2px solid #f0f0f0; border-top:2px solid var(--brand); border-radius:50%; animation:spin 1s linear infinite}

@keyframes spin{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

/* Well Dying 감성 스타일 */

/* 공통 섹션 설명 */
.section-description{
    font-size:18px; 
    line-height:1.8; 
    color:var(--muted); 
    text-align:center; 
    margin-bottom:40px;
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
}

/* 약속 섹션 */
.promise-intro{text-align:center; margin-bottom:50px}
.promise-text{font-size:20px; line-height:1.8; color:var(--ink); margin:0; font-weight:500}

.promises-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:32px}
.promise-card{
    background:#fff; 
    border:1px solid rgba(238,238,238,0.8); 
    border-radius:20px; 
    padding:40px; 
    text-align:center; 
    transition:var(--transition);
    position:relative;
    overflow:hidden;
}

.promise-card:before{
    content:''; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    height:4px; 
    background:linear-gradient(90deg, var(--brand), var(--gold));
}

.promise-card:hover{
    transform:translateY(-8px); 
    box-shadow:0 20px 60px rgba(0,0,0,0.1);
    border-color:var(--brand);
}

.promise-icon{font-size:48px; margin-bottom:20px}
.promise-card h3{color:var(--brand); font-size:24px; margin:0 0 16px; font-weight:700}
.promise-card p{color:var(--ink); line-height:1.7; margin:0 0 20px; font-size:16px}
.promise-detail{
    background:var(--alt); 
    border-radius:12px; 
    padding:16px; 
    margin-top:20px;
}
.promise-detail small{color:var(--muted); line-height:1.6}

/* 선택하는 이유 섹션 */
.why-us-intro{text-align:center; margin-bottom:50px}
.reasons-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px}
.reason-card{
    background:#fff; 
    border:1px solid #eee; 
    border-radius:20px; 
    padding:32px; 
    text-align:center; 
    transition:var(--transition);
}

.reason-card:hover{
    transform:translateY(-6px); 
    box-shadow:0 15px 50px rgba(0,0,0,0.08);
}

.reason-icon{font-size:40px; margin-bottom:16px}
.reason-card h3{color:var(--brand); font-size:20px; margin:0 0 12px; font-weight:700}
.reason-card p{color:var(--ink); line-height:1.6; margin:0 0 20px; font-size:15px}

.reason-features{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.feature-tag{
    background:rgba(26,35,126,0.1); 
    color:var(--brand); 
    padding:6px 12px; 
    border-radius:20px; 
    font-size:12px; 
    font-weight:600;
}

/* 배웅의 과정 */
.process-intro{text-align:center; margin-bottom:50px}
.process-timeline{display:grid; gap:40px; max-width:800px; margin:0 auto}
.process-step{display:grid; grid-template-columns:80px 1fr; gap:24px; align-items:start}

.step-icon{
    width:80px; 
    height:80px; 
    background:linear-gradient(135deg, var(--brand), var(--gold)); 
    border-radius:50%; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-size:32px; 
    box-shadow:0 8px 25px rgba(26,35,126,0.2);
}

.step-content h3{color:var(--brand); font-size:24px; margin:0 0 12px; font-weight:700}
.step-content p{color:var(--ink); line-height:1.8; margin:0 0 16px; font-size:16px}
.step-details{background:var(--alt); border-radius:12px; padding:16px}
.step-details small{color:var(--muted); line-height:1.6}

/* 마음의 이야기 */
.stories-intro{text-align:center; margin-bottom:40px}
.stories-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); gap:24px; margin-bottom:40px}
.stories-actions{text-align:center; margin-top:40px}

/* 회사 철학 */
.company-heart{max-width:900px; margin:0 auto}
.heart-message{text-align:center; margin-bottom:50px}
.heart-icon{font-size:60px; margin-bottom:20px}
.heart-message h3{color:var(--brand); font-size:28px; margin:0 0 20px; font-weight:700}
.heart-description{font-size:18px; line-height:1.8; color:var(--ink); margin:0}

.philosophy-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; margin-bottom:50px}
.philosophy-card{
    background:#fff; 
    border:1px solid #eee; 
    border-radius:16px; 
    padding:28px; 
    transition:var(--transition);
}

.philosophy-card:hover{transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,0.1)}
.philosophy-icon{font-size:36px; margin-bottom:12px}
.philosophy-card h4{color:var(--brand); font-size:18px; margin:0 0 12px; font-weight:700}
.philosophy-card p{color:var(--ink); line-height:1.7; margin:0; font-size:15px}

.commitment-message{
    text-align:center; 
    background:linear-gradient(135deg, var(--alt), rgba(142,107,61,0.1)); 
    border-radius:20px; 
    padding:40px;
}
.commitment-message h3{color:var(--brand); font-size:24px; margin:0 0 20px; font-weight:700}
.commitment-text p{font-size:18px; line-height:1.8; color:var(--ink); margin:0 0 16px; font-style:italic}
.signature{color:var(--gold); font-weight:600; font-style:normal}

/* 상조회사 전용 스타일 */

/* 상품 섹션 새 스타일 */
.product-intro{text-align:center; margin-bottom:50px}

.product-comparison{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:40px}
.product-card{
    background:#fff; 
    border:2px solid #eee; 
    border-radius:20px; 
    padding:32px; 
    transition:var(--transition); 
    position:relative; 
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.product-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg)}

.product-summary{margin-bottom:24px}
.product-highlight{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap}
.highlight-tag{
    background:var(--brand); 
    color:#fff; 
    padding:4px 12px; 
    border-radius:20px; 
    font-size:12px; 
    font-weight:600;
}

.product-card--premium .highlight-tag{background:var(--gold)}
.product-description{color:var(--muted); line-height:1.6; margin:0; font-size:15px}

.product-features-summary{margin-bottom:24px}
.feature-item{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.feature-icon{font-size:18px}
.feature-text{color:var(--ink); font-size:14px; line-height:1.4}

.product-cta{margin-top:auto}
.btn--outline{
    background:transparent; 
    border:2px solid var(--brand); 
    color:var(--brand); 
    padding:12px 24px; 
    border-radius:25px; 
    text-decoration:none; 
    font-weight:600; 
    transition:var(--transition);
    display:inline-block;
    text-align:center;
}

.btn--outline:hover{background:var(--brand); color:#fff}

.product-notice{
    background:linear-gradient(135deg, var(--alt), rgba(142,107,61,0.1)); 
    border-radius:16px; 
    padding:24px; 
    text-align:center;
}

.notice-content h4{color:var(--brand); margin:0 0 8px; font-size:18px}
.notice-content p{color:var(--ink); margin:0; font-size:15px; line-height:1.6}

/* 특별함 섹션 */
.why-special-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px}
.special-item{
    background:#fff; 
    border:1px solid #eee; 
    border-radius:16px; 
    padding:24px; 
    text-align:center; 
    transition:var(--transition);
}

.special-item:hover{transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,0.1)}
.special-icon{font-size:36px; margin-bottom:12px}
.special-item h3{color:var(--brand); font-size:16px; margin:0 0 8px; font-weight:700}
.special-item p{color:var(--muted); margin:0; font-size:14px; line-height:1.5}

.product-card--premium{border-color:var(--gold); background:linear-gradient(135deg, #fff 0%, #fef9f0 100%)}
.product-card--premium:before{content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--gold), var(--brand))}

.product-card--standard{border-color:var(--brand); background:linear-gradient(135deg, #fff 0%, #f0f4ff 100%)}
.product-card--standard:before{content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--brand), var(--gold))}

.product-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px}
.product-header h3{margin:0; font-size:28px; font-weight:700; color:var(--brand)}
.product-badge{background:var(--gold); color:#fff; padding:8px 16px; border-radius:20px; font-size:14px; font-weight:600}
.product-badge--standard{background:var(--brand)}

.product-features h4{color:var(--brand); font-size:18px; margin:24px 0 12px; border-bottom:2px solid var(--alt); padding-bottom:8px}
.product-features ul{margin:0 0 20px; padding:0 0 0 20px}
.product-features li{margin:8px 0; line-height:1.6}

.product-notice{background:#fff3cd; border:1px solid #ffeaa7; border-radius:12px; padding:24px; margin-top:32px}
.product-notice h4{color:#856404; margin:0 0 16px}
.product-notice ul{margin:0; padding:0 0 0 20px}
.product-notice li{margin:8px 0; color:#856404}

/* 서비스 그리드 */
.service-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px}
.service-item{background:#fff; border:1px solid #eee; border-radius:16px; padding:24px; text-align:center; transition:var(--transition)}
.service-item:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.service-icon{font-size:48px; margin-bottom:16px}
.service-item h3{margin:0 0 8px; color:var(--brand); font-size:18px}
.service-item p{margin:0 0 8px; font-weight:600}
.service-item small{color:var(--muted); font-size:12px}

/* 네트워크 정보 */
.network-info{background:#fff; border:1px solid #eee; border-radius:20px; padding:40px}
.network-stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; margin-bottom:40px; text-align:center}
.stat-item{padding:24px; background:var(--alt); border-radius:16px}
.stat-number{font-size:36px; font-weight:700; color:var(--brand); margin-bottom:8px}
.stat-label{color:var(--muted); font-size:14px; font-weight:600}

.network-coverage h3{color:var(--brand); margin-bottom:24px}
.coverage-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px}
.coverage-item{background:#fff; border:1px solid #eee; padding:20px; border-radius:12px; text-align:center}
.coverage-item strong{color:var(--brand); font-size:16px}
.coverage-item p{margin:8px 0 0; color:var(--muted); font-size:14px}

/* 프로세스 타임라인 */
.process-timeline{display:grid; grid-template-columns:repeat(5, 1fr); gap:20px}
.process-step{text-align:center; position:relative}
.step-number{width:60px; height:60px; background:var(--brand); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; margin:0 auto 16px}
.step-content h3{margin:0 0 8px; color:var(--brand); font-size:16px}
.step-content p{margin:0; font-size:14px; line-height:1.4; color:var(--muted)}

.process-step:not(:last-child):after{content:''; position:absolute; top:30px; left:calc(100% - 10px); width:calc(100% - 40px); height:2px; background:var(--alt); z-index:-1}

/* 고객센터 */
.support-info{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.contact-info{background:#fff; border:1px solid #eee; border-radius:20px; padding:32px}
.contact-main{text-align:center; margin-bottom:32px}
.contact-main h3{color:var(--brand); margin-bottom:16px}
.phone-number{font-size:32px; font-weight:700; margin:16px 0}
.phone-number a{color:var(--gold); text-decoration:none}

.contact-details{display:grid; gap:20px}
.contact-method{background:var(--alt); padding:16px; border-radius:12px}
.contact-method h4{margin:0 0 8px; color:var(--brand); font-size:14px}
.contact-method p{margin:0; font-size:14px}
.contact-method a{color:var(--brand); text-decoration:none}

.consultation-form{background:#fff; border:1px solid #eee; border-radius:20px; padding:32px}
.form select, .form textarea{border:2px solid #ddd; border-radius:12px; padding:12px 16px; font-size:16px; transition:var(--transition)}
.form select:focus, .form textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(26,35,126,.1)}
.form textarea{resize:vertical; min-height:100px; font-family:inherit}

/* 회사 정보 */
.company-info{display:grid; grid-template-columns:2fr 1fr; gap:40px}
.company-main h3{color:var(--brand); margin-bottom:16px}
.company-features{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px}
.feature-item{background:#fff; border:1px solid #eee; padding:20px; border-radius:12px}
.feature-item h4{margin:0 0 8px; color:var(--brand); font-size:16px}
.feature-item p{margin:0; font-size:14px; line-height:1.4}

.company-commitment{background:#fff; border:1px solid #eee; border-radius:16px; padding:24px}
.company-commitment h3{color:var(--brand); margin-bottom:16px}
.company-commitment ul{margin:0; padding:0 0 0 16px}
.company-commitment li{margin:8px 0; line-height:1.5}

/* 네비게이션 */
.nav{
    margin-left:auto; 
    display:flex; 
    gap:8px; 
    transition:var(--transition);
}

.nav__item{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--ink); 
    text-decoration:none; 
    padding:12px 16px; 
    border-radius:12px;
    transition:var(--transition); 
    position:relative;
    font-weight:500;
    font-size:14px;
}

.nav__item:hover{
    color:var(--brand); 
    background:rgba(26,35,126,0.08);
    transform:translateY(-2px);
}

.nav__item:active{
    transform:translateY(0) scale(0.98);
}

.nav__icon{
    font-size:16px;
    opacity:0.8;
    transition:var(--transition);
}

.nav__item:hover .nav__icon{
    opacity:1;
    transform:scale(1.1);
}

.cta{margin-left:12px; white-space:nowrap}
.cta--tel{color:#fff; background:var(--brand); padding:12px 16px; border-radius:999px; text-decoration:none; font-weight:600; transition:var(--transition); display:inline-flex; align-items:center; gap:8px}
.cta--tel:hover{background:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.cta--tel:active{transform:translateY(0)}

/* 모바일에서 전화번호 텍스트 숨기기 */
@media (max-width: 480px) {
    .tel-text { display: none; }
    .cta--tel { padding: 10px 12px; min-width: 44px; justify-content: center; }
}

.hero{position:relative; overflow:hidden}
.slider{position:relative; overflow:hidden; height:clamp(360px, 52vh, 600px); background:#000; touch-action:pan-y}
.slide{position:absolute; inset:0; opacity:0; transition:opacity .6s ease-in-out}
.slide img{width:100%; height:100%; object-fit:cover; object-position:center}

/* 가운데 원본 명함은 작게, 선명하게 */
.slide--card{display:flex; align-items:center; justify-content:center; padding:20px}
.slide--card .card-img{
    position:relative; z-index:1; display:block;
    max-width:min(560px, 90%); height:auto;
    border-radius:12px;
    box-shadow:var(--shadow-lg);
    transition:var(--transition);
}
.slide--card .card-img:hover{transform:scale(1.02)}

.slide.is-active{opacity:1}
.slider__btn{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.6); color:#fff; border:0; width:48px; height:48px; border-radius:50%; font-size:20px; cursor:pointer; transition:var(--transition); backdrop-filter:blur(4px)}
.slider__btn:hover{background:rgba(0,0,0,.8); transform:translateY(-50%) scale(1.1)}
.slider__btn:active{transform:translateY(-50%) scale(0.95)}
.slider__btn.prev{left:16px} .slider__btn.next{right:16px}

/* 슬라이더 인디케이터 */
.slider__dots{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10}
.slider__dot{width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.4); border:none; cursor:pointer; transition:var(--transition)}
.slider__dot.is-active{background:rgba(255,255,255,.9); transform:scale(1.2)}

.hero__copy{position:absolute; inset:0; display:flex; align-items:flex-end; pointer-events:none; padding:0}
.hero__copy > div{padding:20px}
.hero__copy h1{font-size:clamp(28px, 6vw, 40px); color:#fff; margin:0 0 8px; text-shadow:2px 2px 4px rgba(0,0,0,.3); font-weight:700}
.hero__copy p{color:#fff; opacity:.95; margin:0 0 20px; font-size:clamp(16px, 3vw, 18px); text-shadow:1px 1px 2px rgba(0,0,0,.3)}
.hero__actions{display:flex; gap:12px; pointer-events:auto; margin-bottom:32px; flex-wrap:wrap}

.btn{display:inline-flex; align-items:center; justify-content:center; padding:14px 20px; border-radius:12px; text-decoration:none; font-weight:600; transition:var(--transition); min-height:48px; font-size:16px; gap:8px}
.btn--primary{background:var(--gold); color:#fff; box-shadow:var(--shadow)}
.btn--primary:hover{background:#9d7440; transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{border:2px solid #fff; color:#fff; backdrop-filter:blur(4px); background:rgba(255,255,255,.1)}
.btn--ghost:hover{background:rgba(255,255,255,.2); transform:translateY(-2px)}
.btn--ghost:active{transform:translateY(0)}

.grid{display:grid; gap:20px}
.grid--4{grid-template-columns:repeat(auto-fit, minmax(250px, 1fr))}
.point{background:#fff; border:1px solid #eee; border-radius:var(--radius); padding:24px; transition:var(--transition); position:relative; overflow:hidden}
.point:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--brand)}
.point:before{content:''; position:absolute; top:0; left:0; width:100%; height:4px; background:linear-gradient(90deg, var(--brand), var(--gold)); transform:scaleX(0); transition:var(--transition)}
.point:hover:before{transform:scaleX(1)}
.point h3{margin:0 0 12px; color:var(--brand); font-size:18px; font-weight:700}
.point p{margin:0; line-height:1.6; color:var(--ink)}

.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:20px}
.card{background:#fff; border:1px solid #eee; border-radius:var(--radius); overflow:hidden; transition:var(--transition); cursor:pointer}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--brand)}
.card img{width:100%; height:180px; object-fit:cover; transition:var(--transition)}
.card:hover img{transform:scale(1.05)}
.card__body{padding:18px}
.card__body h3{margin:0 0 10px; font-size:16px; font-weight:700; color:var(--brand)}
.card__body p{margin:0; line-height:1.5; color:var(--muted); font-size:14px}

.steps{display:flex; gap:16px; flex-wrap:wrap; padding:0; list-style:none; justify-content:center}
.steps li{background:#fff; border:1px solid #eee; border-radius:999px; padding:12px 18px; transition:var(--transition); position:relative; overflow:hidden}
.steps li:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--brand)}
.steps li:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(135deg, var(--brand), var(--gold)); opacity:0; transition:var(--transition)}
.steps li:hover:before{opacity:0.05}
.steps span{background:var(--brand); color:#fff; border-radius:999px; padding:4px 10px; margin-right:10px; font-weight:700; position:relative; z-index:1}

.container--split{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:start}
.bullets{margin:16px 0 0 0; padding:0 0 0 20px}
.bullets li{margin:8px 0; line-height:1.6}
.bullets a{color:var(--brand); text-decoration:none; font-weight:600; transition:var(--transition)}
.bullets a:hover{color:var(--gold); text-decoration:underline}

.form{background:#fff; border:1px solid #eee; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); position:sticky; top:100px}
.form__title{margin:0 0 8px; font-size:22px; color:var(--brand); font-weight:700}
.form__desc{margin:0 0 20px; color:var(--muted); line-height:1.5}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.field span{font-weight:600; color:var(--ink); font-size:14px}
.field input{height:48px; padding:0 16px; border:2px solid #ddd; border-radius:12px; font-size:16px; transition:var(--transition); background:#fff}
.field input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(26,35,126,.1)}
.field input:invalid:not(:placeholder-shown){border-color:#e74c3c}
.check{display:flex; align-items:flex-start; gap:10px; margin:16px 0 20px}
.check input[type="checkbox"]{width:18px; height:18px; margin-top:2px}
.check span{line-height:1.5; font-size:14px}
.form__note{margin-top:12px; color:var(--muted); min-height:1.4em; font-size:14px}

/* 푸터 새 스타일 */
.footer{border-top:1px solid #eee; background:var(--alt); margin-top:40px; padding:50px 0 30px}
.footer__inner{display:flex; flex-direction:column; gap:30px}

.footer-content{display:grid; grid-template-columns:2fr 1fr; gap:40px; align-items:start}
.footer-message h4{color:var(--brand); font-size:20px; margin:0 0 12px; font-weight:700}
.footer-message p{color:var(--ink); margin:0 0 20px; line-height:1.6; font-size:16px}

.footer-contact{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.footer-phone{
    color:var(--brand); 
    text-decoration:none; 
    font-weight:700; 
    font-size:18px; 
    transition:var(--transition);
}
.footer-phone:hover{color:var(--gold)}
.footer-hours{color:var(--muted); font-size:14px}

.footer-links{display:flex; flex-direction:column; gap:12px}
.footer-links a{
    color:var(--muted); 
    text-decoration:none; 
    font-size:15px; 
    transition:var(--transition);
    padding:8px 0;
}
.footer-links a:hover{color:var(--brand)}

.footer-bottom{text-align:center; padding-top:20px; border-top:1px solid #eee}
.footer-bottom p{color:var(--muted); margin:0; font-size:14px}
.link-strong{font-weight:700; color:var(--brand); text-decoration:none; transition:var(--transition)}
.link-strong:hover{color:var(--gold)}

.modal{border:0; border-radius:20px; width:min(640px,92%); max-height:90vh; overflow:auto; box-shadow:var(--shadow-lg)}
.modal::backdrop{background:rgba(0,0,0,.5); backdrop-filter:blur(4px)}
.modal__card{padding:0}
.modal__header{display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid #eee}
.modal__header h3{margin:0; font-size:20px; color:var(--brand)}
.modal__footer{padding:16px 24px; border-top:1px solid #eee; border-bottom:0; text-align:right}
.modal__body{padding:24px; line-height:1.6}
.modal__close{border:0; background:none; font-size:24px; cursor:pointer; color:var(--muted); transition:var(--transition); width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center}
.modal__close:hover{background:var(--alt); color:var(--ink)}
.btn--ghost{border:1px solid #ddd; background:#fff; color:var(--ink)}
.btn--ghost:hover{border-color:var(--brand); color:var(--brand)}

/* 태블릿 (768px 이하) */
@media (max-width: 768px){
    .section{padding:48px 0}
    .container{width:94%; max-width:100%}
    
    /* 헤더 모바일 */
    .header__inner{padding:12px 0; gap:16px}
    .menu-toggle{display:flex}
    
    .nav{
        position:absolute; 
        top:100%; 
        left:0; 
        right:0; 
        background:rgba(255,255,255,0.98); 
        backdrop-filter:blur(20px);
        border-top:1px solid rgba(238,238,238,0.8); 
        flex-direction:column; 
        gap:0; 
        transform:translateY(-100%); 
        opacity:0; 
        visibility:hidden; 
        transition:var(--transition); 
        box-shadow:0 8px 30px rgba(0,0,0,0.1);
        border-radius:0 0 20px 20px;
        overflow:hidden;
    }
    
    .nav.is-open{
        transform:translateY(0); 
        opacity:1; 
        visibility:visible;
    }
    
    .nav__item{
        padding:20px 24px; 
        border-bottom:1px solid rgba(238,238,238,0.5); 
        width:100%; 
        justify-content:flex-start;
        font-size:16px;
        background:transparent;
    }
    
    .nav__item:last-child{
        border-bottom:none;
    }
    
    .nav__item:hover{
        background:rgba(26,35,126,0.05);
        transform:translateX(8px);
    }
    
    .nav__icon{
        font-size:18px;
    }
    
    /* 브랜드 모바일 */
    .brand__name{font-size:20px}
    .brand__tagline{font-size:11px}
    .logo-icon svg{width:40px; height:40px}
    
    /* CTA 버튼 모바일 */
    .header__actions{gap:8px}
    .cta-button{padding:10px 16px; font-size:13px}
    .cta-button__text{display:none}
    .cta-button__icon{width:18px; height:18px}
    
    /* 헤더 액션 */
    .header__actions{margin-left:auto; gap:8px}
    .auth-menu{gap:4px}
    .auth-menu a{padding:6px 8px; font-size:13px}
    .auth-menu .user-name{font-size:13px}
    .cta--tel{padding:8px 12px; font-size:13px}
    
    /* 브랜드 로고 */
    .brand svg{width:160px; height:auto}
    
    /* 그리드 조정 */
    .grid--4{grid-template-columns:repeat(2,1fr); gap:16px}
    .cards{grid-template-columns:repeat(2,1fr); gap:16px}
    .container--split{grid-template-columns:1fr; gap:24px}
    
    /* 폼 스타이키 제거 */
    .form{position:static; top:auto}
    
    /* 스텝 레이아웃 */
    .steps{flex-direction:column; align-items:center; gap:12px}
    .steps li{width:100%; max-width:300px; text-align:center; white-space:normal}
    
    /* 히어로 조정 */
    .hero__copy > div{padding:16px}
    .hero__actions{flex-direction:column; align-items:stretch; gap:12px}
    .btn{min-height:52px; font-size:16px}
    
    /* 슬라이더 버튼 */
    .slider__btn{width:40px; height:40px; font-size:16px}
    .slider__btn.prev{left:8px} .slider__btn.next{right:8px}
    
    /* 후기 그리드 */
    .review-grid{grid-template-columns:1fr; gap:16px}
    .review-card{padding:16px}
    
    /* 텍스트 개행 처리 */
    .point{text-align:left}
    .point h3{word-break:keep-all}
    .point p{word-break:keep-all}
    
    /* Well Dying 모바일 스타일 */
    .promises-grid{grid-template-columns:1fr; gap:24px}
    .why-special-grid{grid-template-columns:repeat(2, 1fr); gap:20px}
    .process-step{grid-template-columns:60px 1fr; gap:16px}
    .step-icon{width:60px; height:60px; font-size:24px}
    .philosophy-grid{grid-template-columns:1fr; gap:20px}
    .heart-message h3{font-size:24px}
    .heart-description{font-size:16px}
    .promise-card, .philosophy-card{padding:24px}
    .special-item{padding:20px}
    .commitment-message{padding:32px}
    .stories-grid{grid-template-columns:1fr; gap:20px}
    
    /* 기존 상조회사 모바일 스타일 */
    .product-comparison{grid-template-columns:1fr; gap:24px}
    .service-grid{grid-template-columns:1fr; gap:20px}
    .network-stats{grid-template-columns:1fr; gap:20px}
    .coverage-grid{grid-template-columns:repeat(2, 1fr); gap:16px}
    .support-info{grid-template-columns:1fr; gap:24px}
    .company-info{grid-template-columns:1fr; gap:24px}
    .company-features{grid-template-columns:1fr; gap:16px}
    .contact-main .phone-number{font-size:24px}
    .product-header h3{font-size:24px}
    .stat-number{font-size:28px}
}

/* 모바일 (480px 이하) */
@media (max-width: 480px){
    .section{padding:36px 0}
    .container{width:96%}
    
    /* 헤더 개선 */
    .header__inner{padding:8px 0; gap:12px}
    
    /* 브랜드 480px */
    .brand__name{font-size:18px}
    .brand__tagline{font-size:10px}
    .logo-icon svg{width:36px; height:36px}
    
    /* CTA 버튼 480px */
    .header__actions{gap:6px}
    .cta-button{padding:8px 12px; font-size:12px}
    .cta-button--secondary{display:none} /* 상품문의 버튼 숨김 */
    
    /* 인증 메뉴 480px */
    .auth-menu{gap:2px}
    .auth-menu a{padding:6px 8px; font-size:12px}
    .auth-menu .user-name{font-size:12px}
    
    /* 싱글 컬럼 */
    .grid--4{grid-template-columns:1fr; gap:16px}
    .cards{grid-template-columns:1fr; gap:16px}
    
    /* 타이포그래피 */
    .section__title{font-size:22px; margin-bottom:20px; line-height:1.3}
    
    /* 포인트 박스 */
    .point{padding:20px; text-align:left}
    .point h3{font-size:17px; line-height:1.4}
    .point p{font-size:14px; line-height:1.5}
    
    /* 카드 */
    .card__body{padding:16px}
    .card img{height:180px}
    .card__body h3{font-size:15px}
    .card__body p{font-size:13px}
    
    /* CTA 버튼 숨김 */
    .tel-text{display:none}
    .cta--tel{padding:8px 10px; min-width:44px; justify-content:center; font-size:16px}
    
    /* 히어로 */
    .slider{height:280px}
    .hero__copy h1{font-size:22px; line-height:1.3}
    .hero__copy p{font-size:15px; line-height:1.4}
    .hero__copy > div{padding:12px}
    .hero__actions{gap:8px}
    .btn{padding:12px 16px; font-size:15px; min-height:48px}
    
    /* 스텝 */
    .steps li{padding:12px 16px; font-size:14px; line-height:1.4}
    .steps span{padding:3px 8px; font-size:13px}
    
    /* 폼 */
    .form{padding:18px}
    .form__title{font-size:20px}
    .field input, .field select, .field textarea{height:44px; padding:0 14px; font-size:16px}
    .field textarea{height:auto; min-height:100px; padding:12px 14px}
    
    /* 후기 */
    .review-summary{padding:20px}
    .rating-number{font-size:28px}
    .review-card{padding:16px}
    .review-card__title{font-size:15px; line-height:1.4}
    .review-card__content{font-size:14px; line-height:1.5}
    .review-actions{flex-direction:column; gap:12px}
    .review-actions .btn{width:100%}
    
    /* 푸터 */
    /* 푸터 새 스타일 모바일 */
    .footer-content{grid-template-columns:1fr; gap:24px; text-align:center}
    .footer-message h4{font-size:18px}
    .footer-message p{font-size:15px}
    .footer-contact{justify-content:center}
    .footer-phone{font-size:16px}
    .footer-links{align-items:center}
    .footer__nav{justify-content:center; flex-wrap:wrap}
    .footer p{font-size:13px; line-height:1.4}
    
    /* 모달 */
    .modal{width:96%; margin:10px auto; max-height:90vh}
    .modal__header, .modal__body, .modal__footer{padding:16px 18px}
    .modal__header h3{font-size:18px}
    .modal__body{font-size:14px; line-height:1.5}
    
    /* Well Dying 모바일 480px */
    .promise-text{font-size:18px}
    .section-description{font-size:16px}
    .promise-card, .philosophy-card{padding:20px}
    .promise-icon{font-size:36px}
    .why-special-grid{grid-template-columns:1fr; gap:16px}
    .special-item{padding:18px}
    .special-icon{font-size:32px}
    .step-icon{width:50px; height:50px; font-size:20px}
    .step-content h3{font-size:20px}
    .step-content p{font-size:15px}
    .heart-icon{font-size:48px}
    .heart-message h3{font-size:22px}
    .heart-description{font-size:15px}
    .philosophy-icon{font-size:28px}
    .commitment-message{padding:24px}
    .commitment-text p{font-size:16px}
    
    /* 기존 상조회사 모바일 480px */
    .product-card{padding:20px}
    .service-item{padding:20px}
    .service-icon{font-size:36px}
    .network-info{padding:24px}
    .stat-item{padding:16px}
    .stat-number{font-size:24px}
    .coverage-grid{grid-template-columns:1fr}
    .contact-info, .consultation-form{padding:24px}
    .contact-main .phone-number{font-size:20px}
    .product-header h3{font-size:20px}
    .product-features h4{font-size:16px}
    .product-notice{padding:16px}
}

/* 초소형 모바일 (360px 이하) */
@media (max-width: 360px){
    .container{width:98%; max-width:100%}
    .section{padding:24px 0}
    
    /* 헤더 360px */
    .header__inner{gap:8px; padding:6px 0}
    
    /* 브랜드 360px */
    .brand__name{font-size:16px}
    .brand__tagline{font-size:9px}
    .logo-icon svg{width:32px; height:32px}
    
    /* CTA 버튼 360px */
    .header__actions{gap:4px}
    .cta-button{padding:6px 10px; font-size:11px}
    .cta-button__icon{width:16px; height:16px}
    
    /* 인증 메뉴 360px */
    .auth-menu a{padding:4px 6px; font-size:11px}
    .auth-menu .user-name{font-size:11px}
    
    /* 타이포그래피 */
    .section__title{font-size:20px; margin-bottom:16px}
    
    /* 포인트 박스 */
    .point{padding:16px}
    .point h3{font-size:16px}
    .point p{font-size:13px}
    
    /* 카드 */
    .card__body{padding:14px}
    .card img{height:160px}
    .card__body h3{font-size:14px}
    .card__body p{font-size:12px}
    
    /* 히어로 */
    .slider{height:260px}
    .hero__copy h1{font-size:20px; line-height:1.3}
    .hero__copy p{font-size:14px}
    .hero__copy > div{padding:10px}
    .hero__actions{gap:6px}
    .btn{padding:10px 14px; font-size:14px; min-height:44px}
    
    /* 스텝 */
    .steps li{padding:10px 14px; font-size:13px}
    .steps span{padding:2px 6px; font-size:12px}
    
    /* 폼 */
    .form{padding:16px}
    .form__title{font-size:18px}
    .field input, .field select, .field textarea{height:42px; padding:0 12px; font-size:15px}
    .field textarea{min-height:80px; padding:10px 12px}
    .field span{font-size:13px}
    
    /* 후기 */
    .review-summary{padding:16px}
    .rating-number{font-size:24px}
    .review-card{padding:14px}
    .review-card__title{font-size:14px}
    .review-card__content{font-size:13px}
    
    /* 푸터 */
    .footer p{font-size:12px}
    .footer__nav a{font-size:12px}
    
    /* 모달 */
    .modal{width:98%; margin:5px auto}
    .modal__header, .modal__body, .modal__footer{padding:12px 16px}
    .modal__header h3{font-size:16px}
    .modal__body{font-size:13px}
    
    /* 슬라이더 인디케이터 */
    .slider__dots{bottom:12px}
    .slider__dot{width:8px; height:8px}
    .slider__btn{width:36px; height:36px; font-size:14px}
    .slider__btn.prev{left:6px} .slider__btn.next{right:6px}
}