@charset "UTF-8";

/* ==================================연간 이용료 30% 할인 프로모션======================================== */

/* 앵커 이동 시 부드러운 스크롤 + 헤더 높이 보정 */
html { scroll-behavior: smooth; }
#calculator,
#leadform { scroll-margin-top: 80px; }

/* ========================================= 버튼 및 공통 요소 ========================================= */
.btn_wrap .btn_general, 
.btn_wrap .btn_ghost, 
.btn_wrap .btn_gradient {
    max-width: 300px; 
    width: 100%; 
    padding: 7px 60px 7px 68px;
    box-sizing: border-box;
}
.btn_wrap a {
    font-size: 24px;
    display: inline-block;
}

.btn_wrap .btn_gradient:hover {
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

/* 말풍선 스타일 (balance 박스 값 기반 + 꼬리/모션 추가) */
.bubble {
    position: absolute;          /* 버튼 위에 띄움 (흐름 밖) */
    bottom: calc(100% + -10px);
    left: 50%;
    padding: 8px 20px;
    color: #7337f5;
    border: 1px solid #8E38FF;
    background: #fff;
    border-radius: 12px;
    white-space: nowrap;
    text-align: center;
    animation: bubbleFloat 3s ease-in-out infinite;  /* 둥실 모션 */
}
/* 말풍선 꼬리 (아래 방향) */
.bubble::before,
.bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    transform: translateX(-50%);
}
.bubble::before {   /* 테두리색 삼각형 */
    border-width: 9px 8px 0 8px;
    border-color: #8E38FF transparent transparent transparent;
}
.bubble::after {    /* 흰색 삼각형 (1px 테두리 남김) */
    border-width: 8px 7px 0 7px;
    border-color: #fff transparent transparent transparent;
    margin-top: -1px;
}
@keyframes bubbleFloat {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, -6px); }
}

/* 간단 비교 견적 계산기 버튼 (아웃라인) */
.btn_wrap .btn_ghost {
    height: 78px;
    width: auto;          /* 내용 폭에 맞춰 (공통 규칙 300px 제한 해제) */
    max-width: none;
    padding: 10px 50px;
    color: #834AFF;
    background: #FFFFFF;
    border: 2.5px solid #834AFF;
    border-radius: 50px;
    box-sizing: border-box;
    white-space: nowrap;  /* 한 줄 유지 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.content .content_head .btn_wrap .btn_general {
    color: #fff;
    cursor: pointer;
    padding: 10px 50px 10px 50px;
    font-size: 24px;
    background: #252727;
    border-radius: 50px;
    white-space: nowrap;   /* 한 줄 유지 */
}
.content .content_head .btn_wrap .btn_general:hover {
    background: #494949;
}
/* 계산기(고스트) 버튼: hover 시 연한 보라 배경 */
.content .content_head .btn_wrap .btn_ghost {
    background: #FFFFFF;
    transition: background-color .2s ease;
}
.content .content_head .btn_wrap .btn_ghost:hover {
    background: #F3EDFF;
}

/* ========================================= 메인 상단 (Header) ========================================= */
.content {
    padding-top: 0px;
}

.content .content_head {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 120px 20px 120px;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 0;
  /* 보라 → 화이트 그라디언트 + 반짝임 (풀블리드 배경) */
    background: url("/images/promotion/main_bg.png") no-repeat center center;
    background-size: cover;
}

.content .content_head .head_inner {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    z-index: 2;                   
    text-align: center;            
}


.content .content_head .title_wrap {
    gap: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 타이틀 이미지 */
.content .content_head img.pc,{
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.content .content_head p.des {
    font-size: 22px;
    line-height: 160%;
    color: #ffffff;
    text-align: center;
}

.content .content_head .btn_wrap {
    margin-top: 64px !important;        /* 타이틀 ↔ 버튼 간격 */
    display: flex;
    justify-content: center; /* 버튼 영역 중앙 정렬 */
    align-items: flex-end;
    gap: 28px;
}

.content .content_head .btn_item_group {
    position: relative;      /* 말풍선(absolute) 기준 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ========================================= 절감 문구 롤링 ========================================= */
/* 롤링 텍스트 + 좌우 별 래퍼 */
.content .content_head .rolling_wrap {
    margin-top: 80px;      /* 버튼 아래 여백 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}
.content .content_head .rolling_wrap .star {
    flex-shrink: 0;
    display: block;
    z-index: 2;
}
/* star01 : 롤링텍스트 좌측 (둥실 + 회전/투명도) */
.content .content_head .rolling_wrap .star01 {
    width: 44px;
    margin-right: -20px;   
    animation: starFloatY 2.5s ease-in-out infinite;
}
/* star02 : 롤링텍스트 우측 (둥실 + 회전/투명도) */
.content .content_head .rolling_wrap .star02 {
    width: 56px;
    margin-left: -14px;  
    animation: starFloatY 2.7s ease-in-out infinite;
}
@keyframes starFloatY {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 1; }
    50%      { transform: translateY(-8px) rotate(8deg); opacity: 0.6; }
}

.content .content_head .rolling_txt {
    height: 45px;         
    overflow: hidden;
}
.content .content_head .rolling_txt ul {
    display: flex;
    flex-direction: column;
    /* 문구 5개(원본 4 + 복제 1)를 위로 롤링 */
    animation: rollUp 10s infinite;
}
.content .content_head .rolling_txt li {
    height: 45px;
    line-height: 45px;
    font-size: 28px;
    font-weight: 300;      
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
}
.content .content_head .rolling_txt li b {
    font-weight: 700;     
}

/* 5개 항목 → 한 칸 = 20%. 각 문구 정지 후 위로 이동 */
@keyframes rollUp {
    0%, 18%   { transform: translateY(0); }
    25%, 43%  { transform: translateY(-20%); }
    50%, 68%  { transform: translateY(-40%); }
    75%, 93%  { transform: translateY(-60%); }
    100%      { transform: translateY(-80%); }
}

@media (max-width: 959px) {
    .content .content_head .rolling_wrap {
        gap: 14px;
        margin-top: 48px;
    }
    .content .content_head .rolling_wrap .star01 { width: 32px; }
    .content .content_head .rolling_wrap .star02 { width: 40px; }
    /* 길어지면 잘리지 않고 2줄로 (li 높이 고정 → 롤링 유지) */
    .content .content_head .rolling_txt {
        height: 60px;
    }
    .content .content_head .rolling_txt li {
        height: 60px;
        line-height: 1.3;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: normal;   /* 줄바꿈 허용 */
        word-break: keep-all;
    }
}

/* 공통: 타이틀 ↔ 콘텐츠 간격은 섹션 gap(60px)으로 통일
   (content.css의 .function .title_wrap { margin-bottom:44px } 상속 제거) */
.content .area_problem .title_wrap,
.content .area_price .title_wrap,
.content .area_compare .title_wrap,
.content .area_calculate .title_wrap,
.content .area_reason .title_wrap {
    margin-bottom: 0;
}

/* ========================================= 2. 문제 제기 (area_problem) ========================================= */
.content .area_problem {
    width: 100%;
    padding: 120px 80px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 72px;   /* 타이틀 ↔ 카드 간격 (area_price/compare와 동일 방식) */
}

/* 타이틀 (balance area_price의 title_wrap과 동일) */
.content .area_problem .title_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.content .area_problem .title_wrap h2 {
    font-size: 48px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    letter-spacing: -1.92px;
}
.content .area_problem .title_wrap p.sub {
    font-size: 20px;
    color: #888;
    line-height: 1.5;
    letter-spacing: -0.8px;
}

/* 카드 3단 */
.content .area_problem .card_cont {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
}
.content .area_problem .card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 48px 40px;
    background-color: #fbfaff;
    border: 1px solid #ede8ff;
    border-radius: 24px;
    box-sizing: border-box;
}
.content .area_problem .card .ic {
    width: 84px;
    height: 84px;
    display: block;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.content .area_problem .card .ic_price    { background-image: url("/images/promotion/ic_price.png"); }
.content .area_problem .card .ic_function { background-image: url("/images/promotion/ic_function.png"); }
.content .area_problem .card .ic_pay      { background-image: url("/images/promotion/ic_pay.png"); }

.content .area_problem .card .text_wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.content .area_problem .card .tit {
    font-size: 24px;
    font-weight: 500;
    color: #333333;
    line-height: 1.5;
    letter-spacing: -0.78px;
}
.content .area_problem .card .desc {
    font-size: 20px;
    font-weight: 400;
    color: #888888;
    line-height: 1.5;
    letter-spacing: -0.6px;
    word-break: keep-all;   /* 단어 단위 줄바꿈 */
}

@media (max-width: 959px) {
    .content .area_problem {
        padding: 60px 20px;
        gap: 32px;   /* 다른 섹션과 동일하게 타이틀↔카드 간격 축소 */
    }
    .content .area_problem .title_wrap {
        gap: 8px;
    }
    .content .area_problem .title_wrap h2 {
        font-size: 24px;
        letter-spacing: -1px;
        word-break: keep-all;
    }
    .content .area_problem .title_wrap p.sub {
        font-size: 15px;
    }
    .content .area_problem .card_cont {
        flex-direction: column;
        gap: 16px;
    }
    .content .area_problem .card {
        gap: 20px;
        padding: 32px 24px;
    }
    .content .area_problem .card .ic {
        width: 52px;
        height: 52px;
    }
    .content .area_problem .card .tit {
        font-size: 20px;
    }
    .content .area_problem .card .desc {
        font-size: 16px;
    }
}

/* ========================================= 3. 요금제 (area_price) ========================================= */
.content .area_price {
    width: 100%;
    padding: 80px 120px 120px;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #ffffff 40%, #f4f1ff 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 72px;
}

/* 타이틀 (area_problem / area_price 동일) */
.content .area_price .title_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.content .area_price .title_wrap h2 {
    font-size: 48px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    letter-spacing: -1.92px;
}
.content .area_price .title_wrap p.sub {
    font-size: 20px;
    color: #888;
    line-height: 1.5;
    letter-spacing: -0.8px;
}

/* 카드 3단 */
.content .area_price .pricing-cards {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
}
.content .area_price .p_card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 48px 40px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 6px 20px rgba(143, 91, 248, 0.30);  /* 그림자 진하게 */
    box-sizing: border-box;
}
.content .area_price .p_card.active {/* 프리미엄 강조 (테두리 그라데이션 흐름) */
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90deg, #dcc1ff, #8659fb, #b8a7ff, #8659fb, #dcc1ff) border-box;
    background-size: 100% 100%, 200% 100%;
    background-repeat: no-repeat;
    box-shadow: 0 0 6px rgba(124, 77, 255, 0.15);
    animation: borderFlow 5s linear infinite;
}
@keyframes borderFlow {
    0%   { background-position: 0 0, 0% 0; }
    100% { background-position: 0 0, 100% 0; }
}

/* 헤더 */
.content .area_price .card-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.content .area_price .plan-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.content .area_price .plan-name {
    font-size: 24px;
    font-weight: 700;
    color: #1e1e1e;
    line-height: 1.4;
    letter-spacing: -1.04px;
}
.content .area_price .plan-name.purple { color: #8659fb; }
.content .area_price .plan-name.blue   { color: #2492ff; }
.content .area_price .badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.64px;
    white-space: nowrap;
}
.content .area_price .badge.purple { background: #f0e8ff; color: #8659fb; }
.content .area_price .badge.blue   { background: #ebf5ff; color: #2492ff; }
.content .area_price .badge.gray   { background: #F0F0F0; color: #7D7D7D; }
.content .area_price .plan-desc {
    font-size: 20px;
    color: #6b7072;
    line-height: 1.5;
    letter-spacing: -0.8px;
}

/* 구분선 */
.content .area_price .divider {
    width: 100%;
    height: 1px;
    background: #e9e7e7;
}

/* 가격 */
.content .area_price .card-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}
.content .area_price .card-price .origin {
    font-size: 22px;
    color: #888888;
    text-decoration: line-through;
    letter-spacing: -0.88px;
}
.content .area_price .card-price .amount {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 36px;
    font-weight: 700;
    color: #333;
    letter-spacing: -1.44px;
}
.content .area_price .card-price .amount .unit {
    font-size: 18px;
    font-weight: 600;
    color: #1e1e1e;
    letter-spacing: -0.72px;
}

/* 기능 리스트 */
.content .area_price .card-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    flex-grow: 1;   /* 각주를 하단으로 밀어 카드 정렬 */
}
.content .area_price .feature-title {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.8px;
}
.content .area_price .feature-title.purple { color: #885eff; }
.content .area_price .feature-title.blue   { color: #2492ff; }
.content .area_price .feature-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.content .area_price .feature-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 400;
    color: #333;
    letter-spacing: -0.8px;
}
.content .area_price .feature-list li::before {
    content: "";
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background: url("/images/promotion/ic_check.png") no-repeat center center;
    background-size: contain;
}

/* 각주 */
.content .area_price .footnote {
    width: 100%;
    font-size: 16px;
    color: #888;
    line-height: 1.5;
    letter-spacing: -0.72px;
}

/* CTA */
.content .area_price .btn_price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 24px 44px;
    background: #333;
    border-radius: 100px;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.56px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease;
}
.content .area_price .btn_price:hover { background: #111; }

@media (max-width: 959px) {
    .content .area_price {
        padding: 60px 20px;
        gap: 32px;
    }
    .content .area_price .title_wrap h2 {
        font-size: 24px;
        letter-spacing: -1px;
        word-break: keep-all;
    }
    .content .area_price .title_wrap p.sub {
        font-size: 15px;
        word-break: keep-all;
    }
    .content .area_price .pricing-cards {
        flex-direction: column;
        gap: 16px;
    }
    .content .area_price .p_card {
        gap: 16px;
        padding: 32px 24px;
    }
    .content .area_price .plan-name { font-size: 22px; }
    .content .area_price .plan-desc { font-size: 16px; }
    .content .area_price .card-price .origin { font-size: 16px; }
    .content .area_price .card-price .amount { font-size: 28px; }
    .content .area_price .card-price .amount .unit { font-size: 15px; }
    .content .area_price .feature-title { font-size: 16px; }
    .content .area_price .feature-list li { font-size: 16px; }
    .content .area_price .footnote { font-size: 14px; }
    .content .area_price .btn_price {
        font-size: 18px;
        padding: 14px 32px;
        white-space: normal;
        text-align: center;
    }
}

/* ========================================= 4. 비교 (area_compare) ========================================= */
.content .area_compare {
    width: 100%;
    padding: 120px 0 140px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 72px;
}

/* 타이틀 (앞 영역과 동일) */
.content .area_compare .title_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.content .area_compare .title_wrap h2 {
    font-size: 48px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    letter-spacing: -1.92px;
}
.content .area_compare .title_wrap p.sub {
    font-size: 20px;
    color: #888;
    line-height: 1.5;
    letter-spacing: -0.8px;
}

/* 표 */
.content .area_compare .compare_wrap {
    position: relative;
    max-width: 1200px;
    width: 100%;
}
.content .area_compare .compare_table {
    position: relative;   /* highlight 기준 (표와 함께 스크롤/정렬) */
    width: 100%;
    border: 1px solid #e7e7e7;
    border-radius: 20px;
    overflow: hidden;
}
.content .area_compare .compare_head,
.content .area_compare .compare_row {
    display: flex;
    align-items: stretch;
}
.content .area_compare .compare_head {
    height: 78px;
}
.content .area_compare .compare_row {
    height: 90px;
    border-top: 1px solid #f0f0f0;
}

/* 구분(라벨) 열 */
.content .area_compare .col_item {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 32px;
    font-size: 20px;
    color: #1e1e1e;
    letter-spacing: -0.8px;
}
.content .area_compare .compare_head .col_item {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.96px;
}

/* 타사 열 */
.content .area_compare .col_other {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    background-color: #f8f8f8;
    font-size: 20px;
    font-weight: 400;
    color: #888;
    letter-spacing: -0.8px;
    text-align: center;
    line-height: 1.4;
}
.content .area_compare .compare_head .col_other {
    font-size: 24px;
    font-weight: 500;
    color: #1e1e1e;
}

/* 다우오피스HR 열 (강조) */
.content .area_compare .col_daou {
    flex: 1;           /* 다른 열(X/Y/Z)과 동일 가변폭 */
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    background-color: #faf4ff;
    font-size: 20px;
    font-weight: 500;
    color: #1e1e1e;
    letter-spacing: -0.8px;
    text-align: center;
    line-height: 1.4;
}
.content .area_compare .compare_head .col_daou {
    font-size: 24px;
    font-weight: 500;
    color: #794aff;
}

/* 다우 열 강조 박스 (라인 모션) */
/* 핵심 기능 구성 행: 값 셀만 텍스트가 길어 2줄로 맞추기 위해 살짝 작게
   (라벨 col_item은 다른 행과 동일 크기 유지) */
.content .area_compare .feature_row .col_other,
.content .area_compare .feature_row .col_daou {
    font-size: 18px;
    word-break: keep-all;
}

.content .area_compare .highlight {
    position: absolute;
    top: 0;
    right: 0;
    width: calc((100% - 220px) / 4);   /* 다우 열(가변폭 1/4)에 정확히 맞춤 */
    height: 100%;
    border: 2px solid #b493fb;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(140, 89, 251, 0.15);
    pointer-events: none;
    z-index: 2;
    animation: comparePulse 3s ease-in-out infinite;
}
@keyframes comparePulse {
    0%, 100% {
        border-color: #b493fb;
        box-shadow: 0 4px 16px rgba(140, 89, 251, 0.15);
    }
    50% {
        border-color: #9a72f7;
        box-shadow: 0 6px 22px rgba(140, 89, 251, 0.28);
    }
}

@media (max-width: 959px) {
    .content .area_compare {
        padding: 60px 20px;
        gap: 32px;
    }
    .content .area_compare .title_wrap h2 {
        font-size: 24px;
        letter-spacing: -1px;
        word-break: keep-all;
    }
    .content .area_compare .title_wrap p.sub {
        font-size: 15px;
        word-break: keep-all;
    }
    /* 가로 스크롤 */
    .content .area_compare .compare_wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .content .area_compare .compare_table {
        min-width: 760px;
    }
    /* 모바일 라벨 열(150px)에 맞춰 강조 박스 폭 재계산 (표 안에 있어 함께 스크롤) */
    .content .area_compare .highlight {
        width: calc((100% - 150px) / 4);
    }
    .content .area_compare .col_item {
        width: 150px;
        padding: 0 20px;
        font-size: 16px;
    }
    .content .area_compare .compare_head .col_item,
    .content .area_compare .compare_head .col_other,
    .content .area_compare .compare_head .col_daou {
        font-size: 18px;
    }
    .content .area_compare .col_other,
    .content .area_compare .col_daou {
        font-size: 16px;
    }
    /* 핵심 기능 구성 행도 다른 셀과 동일 크기로 */
    .content .area_compare .feature_row .col_other,
    .content .area_compare .feature_row .col_daou {
        font-size: 16px;
    }
}

/* ========================================= 5. 견적 계산기 (area_calculate) ========================================= */
.content .area_calculate {
    width: 100%;
    padding: 120px 20px;
    box-sizing: border-box;
    background-color: #fbf8ff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 72px;
}

/* 타이틀 (앞 영역과 동일) */
.content .area_calculate .title_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.content .area_calculate .title_wrap h2 {
    font-size: 48px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    letter-spacing: -1.92px;
}
.content .area_calculate .title_wrap p.sub {
    font-size: 20px;
    color: #888;
    line-height: 1.5;
    letter-spacing: -0.8px;
}

/* 콘텐츠 */
.content .area_calculate .calc_cont {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}
.content .area_calculate .calc_cards {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 카드 공통 */
.content .area_calculate .calc_card {
    width: 100%;
    padding: 40px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 0 16px rgba(143, 91, 248, 0.15);
    box-sizing: border-box;
}

/* 입력 카드 */
.content .area_calculate .calc_input {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.content .area_calculate .calc_input .q {
    font-size: 24px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    letter-spacing: -0.96px;
}
.content .area_calculate .input_row {
    display: flex;
    align-items: center;
    gap: 40px;
    width: 100%;
}
.content .area_calculate .emp_range {
    flex: 1;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    border-radius: 5px;
    background: #e5e0f5;      /* 미채움 트랙 (JS가 채움 그라데이션 덮어씀) */
    cursor: pointer;
}
/* WebKit 트랙/핸들 */
.content .area_calculate .emp_range::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 5px;
}
.content .area_calculate .emp_range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    margin-top: -10px;       /* (30-10)/2 : 트랙 중앙 정렬 */
    border-radius: 50%;
    background: #6b3be9;
    border: 4px solid #fff;
    box-shadow: 0 2px 8px rgba(107, 59, 233, 0.45);
    cursor: pointer;
}
/* Firefox 트랙/채움/핸들 */
.content .area_calculate .emp_range::-moz-range-track {
    height: 10px;
    border-radius: 5px;
    background: #e5e0f5;
}
.content .area_calculate .emp_range::-moz-range-progress {
    height: 10px;
    border-radius: 5px;
    background: #6b3be9;
}
.content .area_calculate .emp_range::-moz-range-thumb {
    width: 30px;
    height: 30px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #6b3be9;
    box-shadow: 0 2px 8px rgba(107, 59, 233, 0.45);
    cursor: pointer;
}
.content .area_calculate .num_box {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}
.content .area_calculate .num_box input {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-size: 24px;
    color: #131313;
    letter-spacing: -0.28px;
    -moz-appearance: textfield;
    appearance: textfield;
}
.content .area_calculate .num_box input::-webkit-outer-spin-button,
.content .area_calculate .num_box input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.content .area_calculate .num_box span {
    flex-shrink: 0;
    font-size: 22px;
    color: #6b6b6b;
    letter-spacing: -0.96px;
}
.content .area_calculate .calc_input .guide {
    font-size: 20px;
    color: #666;
    line-height: 1.5;
    letter-spacing: -0.6px;
}
.content .area_calculate .calc_input .guide b {
    color: #6b3be9;
    font-weight: 700;
    text-decoration: underline;
}

/* '다우오피스HR' 단어 강조 */
.content .area_calculate .label .hl {
    color: #8248FF;
    font-weight: 700;
}

/* 정상가 카드 */
.content .area_calculate .calc_regular {
    display: flex;
    align-items: center;
    gap: 32px;
}
.content .area_calculate .calc_regular .label {
    flex: 1;
    min-width: 0;
    font-size: 24px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    letter-spacing: -0.96px;
}

/* 프로모션 카드 */
.content .area_calculate .calc_promo {
    border: 2px solid #9770ff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.content .area_calculate .calc_promo .promo_top {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
}
.content .area_calculate .calc_promo .promo_label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.content .area_calculate .calc_promo .promo_label .label {
    font-size: 24px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    letter-spacing: -0.96px;
}
.content .area_calculate .calc_promo .badge {
    flex-shrink: 0;
    padding: 4px 8px;
    background: #f0e8ff;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    color: #8659fb;
    letter-spacing: -0.64px;
    white-space: nowrap;
}
.content .area_calculate .calc_promo .save {
    width: 100%;
    text-align: right;
    font-size: 20px;
    color: #333;
    letter-spacing: -0.8px;
}
.content .area_calculate .calc_promo .save b {
    color: #6b3be9;
    font-weight: 600;
}

/* 가격 (정상가/프로모션 공통) */
.content .area_calculate .price {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    color: #6b3be9;
}
.content .area_calculate .price span {
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -1.0px;
}
.content .area_calculate .price em {
    font-size: 28px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: -1.12px;
}

/* 하단 안내 */
.content .area_calculate .calc_notice {
    font-size: 20px;
    color: #888;
    line-height: 1.5;
    letter-spacing: -0.8px;
    text-align: center;
}
.content .area_calculate .calc_notice .calc_br { display: none; }   /* 480 이하에서만 줄바꿈 */

@media (max-width: 959px) {
    .content .area_calculate {
        padding: 60px 20px;
        gap: 32px;
    }
    .content .area_calculate .title_wrap h2 {
        font-size: 24px;
        letter-spacing: -1px;
        word-break: keep-all;
    }
    .content .area_calculate .title_wrap p.sub {
        font-size: 15px;
        word-break: keep-all;
    }
    .content .area_calculate .calc_cont { gap: 24px; }
    .content .area_calculate .calc_card { padding: 24px; }
    .content .area_calculate .calc_input { gap: 16px; }
    .content .area_calculate .calc_input .q { font-size: 18px; }
    .content .area_calculate .input_row { gap: 16px; }
    .content .area_calculate .num_box { width: 130px; padding: 10px; }
    .content .area_calculate .num_box input,
    .content .area_calculate .num_box span { font-size: 18px; }
    .content .area_calculate .calc_input .guide { font-size: 15px; }

    /* 정상가/프로모션 카드 세로 정렬 */
    .content .area_calculate .calc_regular,
    .content .area_calculate .calc_promo .promo_top {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .content .area_calculate .calc_regular .label,
    .content .area_calculate .calc_promo .promo_label .label { font-size: 17px; }
    /* 프로모션 라벨: 태그를 텍스트 바로 뒤(inline)에 붙임 */
    .content .area_calculate .calc_promo .promo_label {
        display: block;
    }
    .content .area_calculate .calc_promo .promo_label .label {
        display: inline;
    }
    .content .area_calculate .calc_promo .promo_label .badge {
        display: inline-block;
        vertical-align: middle;
        margin-left: 6px;
    }
    .content .area_calculate .price { justify-content: flex-start; }
    .content .area_calculate .price span { font-size: 28px; }
    .content .area_calculate .price em { font-size: 20px; }
    .content .area_calculate .calc_promo .save { text-align: left; font-size: 15px; }
    .content .area_calculate .calc_notice { font-size: 14px; word-break: keep-all; }
}

/* ========================================= 6. 도입 이유 (area_reason) ========================================= */
.content .area_reason {
    width: 100%;
    padding: 120px 20px;
    box-sizing: border-box;
    background-color: #424242;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 72px;
}

/* 타이틀 (다크 배경용) */
.content .area_reason .title_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.content .area_reason .title_wrap h2 {
    font-size: 48px;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
    letter-spacing: -1.92px;
}
.content .area_reason .title_wrap p.sub {
    font-size: 20px;
    color: #b3b3b3;
    line-height: 1.5;
    letter-spacing: -0.8px;
}

/* 카드 3단 가로 배치 */
.content .area_reason .reason_cards {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
}
.content .area_reason .reason_card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background-color: #fafbfc;
    border: 1px solid #dfdfdf;
    border-radius: 24px;
    overflow: hidden;
    box-sizing: border-box;
}
/* 상단 텍스트 */
.content .area_reason .reason_card .card_text {
    flex: 1;              /* 이미지를 카드 하단으로 밀어 정렬 */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 32px 40px 20px;   /* 상하 여백 축소로 높이 감소 */
}
.content .area_reason .reason_card .tit {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    letter-spacing: -1px;
}
.content .area_reason .reason_card .desc {
    font-size: 20px;
    color: #6b6b6b;
    line-height: 1.5;
    letter-spacing: -0.72px;
    word-break: keep-all;
}
/* 하단 일러스트 : 전체 폭으로 두고 하단은 카드 밑단에서 클립 */
.content .area_reason .reason_card .card_img {
    height: 176px;
    overflow: hidden;
}
.content .area_reason .reason_card .card_img img {
    width: 100%;
    height: auto;          /* 자연 높이(전체 폭) → 넘치는 하단은 잘림 */
    display: block;
}
/* 세 번째 카드 일러스트는 세로가 길어 덜 잘리도록 높이 확대 */
.content .area_reason .reason_card:nth-child(3) .card_img {
    height: 212px;
}

@media (max-width: 959px) {
    .content .area_reason {
        padding: 60px 20px;
        gap: 32px;
    }
    .content .area_reason .title_wrap h2 {
        font-size: 24px;
        letter-spacing: -1px;
        word-break: keep-all;
    }
    .content .area_reason .title_wrap p.sub {
        font-size: 15px;
        word-break: keep-all;
    }
    /* 카드 세로 정렬 */
    .content .area_reason .reason_cards {
        flex-direction: column;
    }
    .content .area_reason .reason_card .card_text {
        padding: 28px 24px;
    }
    .content .area_reason .reason_card .tit {
        font-size: 18px;
        word-break: keep-all;
    }
    .content .area_reason .reason_card .desc {
        font-size: 15px;
    }
    /* 이미지 고정폭 중앙 배치 + 하단 살짝 클립 (의도한 형태) */
    .content .area_reason .reason_card .card_img,
    .content .area_reason .reason_card:nth-child(3) .card_img {
        height: 135px;
    }
    .content .area_reason .reason_card .card_img img {
        width: 100%;
        max-width: 240px;   /* 이미지 축소로 카드 높이 감소 */
        height: auto;
        margin: 0 auto;
    }
}

/* ========================================= 7. 유의사항 (area_notice) ========================================= */
.content .area_notice {
    width: 100%;
    padding: 80px;
    box-sizing: border-box;
    background-color: #6341B8;
    display: flex;
    justify-content: center;
}
.content .area_notice .info_cont {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.content .area_notice .info_cont p.title {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    line-height: 1.6;
    letter-spacing: -1.12px;
}
.content .area_notice .info_cont ul {
    list-style: disc;
    margin: 0;
}
.content .area_notice .info_cont li {
    font-size: 17px;
    color: #c9baeb;
    line-height: 1.8;
    letter-spacing: -0.6px;
}

@media (max-width: 959px) {
    .content .area_notice {
        padding: 48px 20px;
    }
    .content .area_notice .info_cont p.title {
        font-size: 20px;
    }
    .content .area_notice .info_cont li {
        font-size: 14px;
        line-height: 1.7;
        word-break: keep-all;
    }
}

/* ========================================= 8. 리드폼 (area_leadform) : startup .hr-landing 스타일 이식 ========================================= */
.event .section_leadform {width: 100%; background-color: #FAF5FF;}
.event .area_downloadforms {max-width: 1200px; padding: 120px 0px;}
.event .area_downloadforms .forms {display: flex; flex-direction: column; justify-content: center; text-align: left;}
.event .area_downloadforms .forms h2 {text-align: left; font-size: 48px; font-weight: 600; line-height: 140%; color: #333;}
.event .area_downloadforms .forms .desc {font-size: 18px !important; line-height: 140%; color: #888; font-weight: 400; padding-top: 0;}
.event .area_downloadforms .leadform {display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 40px 40px 48px; border: 2.5px solid transparent; border-radius: 20px; min-width: 540px; justify-content: center; --border-angle: 0deg; animation: leadformBorderRotate 3s linear infinite; background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--border-angle), #D1C6FC, #8B5DFF, #FDE1FC, #D1C6FC) border-box;}
.event .area_downloadforms .leadform .wrap_form {width: 100%;}   /* 카드 내부 필드 폭 채우기 */
.event .leadform .field_label {font-size: 16px; font-weight: 400; padding-top: 0; color: #333; margin-top: 28px;}
.event .leadform .wrap_form .field_label:first-of-type {margin-top: 0;}
.event .list_form textarea {display: block; width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; color: #222; background: #f8f8f8; box-sizing: border-box; outline: none; resize: vertical; font-family: 'Noto Sans KR', sans-serif; transition: border-color 0.2s;}
.event .list_form textarea:focus {border-color: #6B3BE9;}

/* 리드폼 테두리 회전 애니메이션 (키프레임/프로퍼티) */
@property --border-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes leadformBorderRotate { to { --border-angle: 360deg; } }

/* 리드폼 반응형 (startup .hr-landing 그대로 이식) */
@media (max-width: 959px) {
    .event .area_downloadforms {padding: 60px 6%; flex-direction: column; gap: 40px;}
    .event .area_downloadforms .forms {width: 100%;}
    .event .area_downloadforms .forms h2 {font-size: 48px;}
    .event .area_downloadforms .forms .desc {font-size: 18px !important;}
    .event .area_downloadforms .leadform {min-width: 0; width: 100%; flex: none;}
}
@media (max-width: 768px) {
    .event .area_downloadforms .forms h2 {font-size: 28px;}
    .event .area_downloadforms .forms .desc {font-size: 16px !important;}
    .event .section_leadform {padding: 0;}
}
@media (max-width: 480px) {
    .event .area_downloadforms {padding: 50px 6%;}
    .event .area_downloadforms .forms h2 {font-size: 28px;}
    .event .area_downloadforms .leadform {padding: 28px 20px 36px;}
}

/* =========================================================
   반응형 보강 : 히어로(content_head) & 공통 (959 / 768 / 480)
   ========================================================= */
@media (max-width: 959px) {
    /* 히어로 */
    .content .content_head { padding: 90px 20px; }
    .content .content_head .main_title img { max-width: 100%; height: auto; }
    .content .content_head p.des { font-size: 18px; }
    /* 버튼 세로 정렬 + 가운데 정렬 */
    .content .content_head .btn_wrap {
        margin-top: 48px !important;
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }
    .content .content_head .btn_wrap .btn_ghost,
    .content .content_head .btn_wrap .btn_general,
    .content .content_head .btn_item_group {
        width: 100%;
        max-width: 340px;
    }
    .content .content_head .btn_wrap .btn_ghost,
    .content .content_head .btn_wrap .btn_general {
        height: 64px;
        font-size: 20px;
        padding: 10px 24px;
    }
    /* 말풍선 살짝 작게 */
    .content .content_head .bubble {
        font-size: 14px;
        padding: 6px 16px;
    }
    /* 섹션 타이틀/서브 크기 상향 (기존 24/15 → 26/17) */
    .content .area_problem .title_wrap h2,
    .content .area_price .title_wrap h2,
    .content .area_compare .title_wrap h2,
    .content .area_calculate .title_wrap h2,
    .content .area_reason .title_wrap h2 { font-size: 26px; }
    .content .area_problem .title_wrap p.sub,
    .content .area_price .title_wrap p.sub,
    .content .area_compare .title_wrap p.sub,
    .content .area_calculate .title_wrap p.sub,
    .content .area_reason .title_wrap p.sub { font-size: 17px; }
}

@media (max-width: 768px) {
    /* 히어로 : 버튼 세로 정렬 */
    .content .content_head { padding: 72px 20px; }
    .content .content_head .btn_wrap {
        flex-direction: column;
        align-items: center;
        gap: 36px;
    }
    .content .content_head .btn_wrap .btn_ghost,
    .content .content_head .btn_wrap .btn_general,
    .content .content_head .btn_item_group {
        width: 100%;
        max-width: 320px;
    }
    .content .content_head .btn_wrap .btn_ghost,
    .content .content_head .btn_wrap .btn_general {
        height: 60px;
        font-size: 18px;
    }
    /* 섹션 타이틀 한 단계 더 축소 */
    .content .area_problem .title_wrap h2,
    .content .area_price .title_wrap h2,
    .content .area_compare .title_wrap h2,
    .content .area_calculate .title_wrap h2,
    .content .area_reason .title_wrap h2 { font-size: 24px; }
}

@media (max-width: 480px) {
    /* 히어로 */
    .content .content_head { padding: 52px 16px; }
    .content .content_head p.des { font-size: 15px; }
    .content .content_head .rolling_wrap { gap: 10px; }
    .content .content_head .rolling_wrap .star01 { width: 24px; margin-right: -12px; }
    .content .content_head .rolling_wrap .star02 { width: 30px; margin-left: -10px; }
    .content .content_head .rolling_txt { height: 52px; }
    .content .content_head .rolling_txt li { height: 52px; line-height: 1.3; font-size: 16px; }

    /* 섹션 세로 패딩 축소 */
    .content .area_problem,
    .content .area_price,
    .content .area_calculate,
    .content .area_reason { padding-top: 48px; padding-bottom: 48px; }
    .content .area_compare { padding-top: 48px; padding-bottom: 56px; }
    .content .area_notice { padding: 40px 20px; }

    /* 섹션 타이틀/서브 */
    .content .area_problem .title_wrap h2,
    .content .area_price .title_wrap h2,
    .content .area_compare .title_wrap h2,
    .content .area_calculate .title_wrap h2,
    .content .area_reason .title_wrap h2 { font-size: 22px; }
    .content .area_problem .title_wrap p.sub,
    .content .area_price .title_wrap p.sub,
    .content .area_compare .title_wrap p.sub,
    .content .area_calculate .title_wrap p.sub,
    .content .area_reason .title_wrap p.sub { font-size: 16px; }

    /* 프로모션 할인 태그는 더 작게 */
    .content .area_calculate .calc_promo .badge { font-size: 12px; padding: 3px 7px; border-radius: 6px; }
    /* 하단 안내: "상담을 통해"부터 줄바꿈 */
    .content .area_calculate .calc_notice .calc_br { display: inline; }
}