@charset "utf-8";

/* ---------- 공통 ---------- */
.blind {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 인트로 ---------- */
.dsp_intro {padding:var(--sec-padding) 0;background:var(--white);overflow:hidden}
.dsp_intro .intro_flex {display:flex;align-items:center;gap:clamp(44px,6vw,100px)}
.dsp_intro .txt_wrap {flex:1 1 52%}
.dsp_intro .txt_wrap .chk {display:flex;flex-direction:column;gap:12px 0;margin-top:clamp(26px,3vw,38px)}
.dsp_intro .txt_wrap .chk span {display:flex;align-items:flex-start;gap:0 10px;font-size:clamp(14px,1.2vw,17px);font-weight:500;color:var(--txt)}
.dsp_intro .txt_wrap .chk span::before {content:'';flex:0 0 auto;width:20px;height:20px;margin-top:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%233384FE'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain}
.dsp_intro .img_wrap {flex:1 1 44%;position:relative;padding:0 clamp(12px,1.6vw,24px) clamp(44px,4.6vw,64px) 0}
.dsp_intro .img_wrap .main_img {position:relative;border-radius:clamp(20px,2.4vw,34px);overflow:hidden;aspect-ratio:16/11;box-shadow:0 24px 56px rgba(27,43,75,.18)}
.dsp_intro .img_wrap .main_img::after {content:'';position:absolute;inset:0;background:linear-gradient(200deg, rgba(15,28,54,0) 55%, rgba(15,28,54,.34) 100%);pointer-events:none}
.dsp_intro .img_wrap .main_img img {display:block;width:100%;height:100%;object-fit:cover;object-position:center 28%}
.dsp_intro .img_wrap .sub_img {position:absolute;right:0;bottom:0;width:clamp(140px,15vw,216px);background:var(--white);border:solid 1px var(--line);border-radius:clamp(14px,1.6vw,20px);box-shadow:0 18px 44px rgba(27,43,75,.16);padding:10px;overflow:hidden}
.dsp_intro .img_wrap .sub_img img {display:block;width:100%;aspect-ratio:0.9;object-fit:cover;object-position:center 40%;border-radius:clamp(9px,1.1vw,13px)}
.dsp_intro .stat_list {display:grid;grid-template-columns:repeat(3, 1fr);border-top:solid 1px var(--line);margin-top:clamp(56px,7vw,100px)}
.dsp_intro .stat_list .item {padding:clamp(26px,3.2vw,46px) clamp(18px,2.4vw,40px) 0}
.dsp_intro .stat_list .item:not(:first-child) {border-left:solid 1px var(--line)}
.dsp_intro .stat_list .item .s {display:inline-flex;align-items:center;gap:0 8px;font-size:clamp(13px,1.05vw,15px);font-weight:700;color:var(--primary)}
.dsp_intro .stat_list .item .s::before {content:'';display:block;width:22px;height:3px;background:var(--secondary);border-radius:2px}
.dsp_intro .stat_list .item strong {display:block;font-family:'godo', sans-serif;font-size:clamp(21px,2vw,30px);font-weight:700;color:var(--tit);margin-top:12px;line-height:1.3}
.dsp_intro .stat_list .item strong em {font-family:'montserrat', sans-serif;font-weight:800;color:var(--primary)}
.dsp_intro .stat_list .item p {font-size:clamp(13.5px,1.1vw,16px);color:var(--txt-light);margin-top:10px}

/* ---------- 서비스 유형 ---------- */
.dsp_type {padding:var(--sec-padding) 0;background:var(--gray-bg)}
.dsp_type .type_grid {display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,36px);margin-top:clamp(44px,5vw,72px)}
.dsp_type .t_card {display:flex;flex-direction:column;background:var(--white);border:solid 1px var(--line);border-radius:clamp(20px,2.2vw,30px);padding:clamp(26px,3.2vw,52px);transition:box-shadow .3s, transform .3s}
.dsp_type .t_card:hover {box-shadow:0 24px 60px rgba(27,43,75,.12);transform:translateY(-4px)}
.dsp_type .t_card.monthly {border-top:solid 5px var(--primary)}
.dsp_type .t_card.daily {border-top:solid 5px var(--secondary)}
.dsp_type .t_card .badge {display:inline-flex;align-items:center;width:fit-content;height:34px;border-radius:100px;padding:0 16px;font-size:clamp(13px,1.05vw,15px);font-weight:700}
.dsp_type .t_card.monthly .badge {background:var(--primary);color:var(--white)}
.dsp_type .t_card.daily .badge {background:var(--secondary);color:#3B4455}
.dsp_type .t_card .tit {display:block;font-family:'godo', sans-serif;font-size:clamp(24px,2.3vw,36px);font-weight:700;color:var(--tit);margin-top:18px}
.dsp_type .t_card .eng_s {display:block;font-size:clamp(11px,.9vw,13px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9CA3AF;margin-top:8px}
.dsp_type .t_card .head p {font-size:clamp(14px,1.2vw,17px);color:var(--txt);line-height:1.7;margin-top:16px}
.dsp_type .t_card .visual {display:flex;justify-content:center;margin-top:clamp(20px,2.4vw,32px)}
.dsp_type .t_card .visual img {width:clamp(140px,13vw,184px);height:auto}
.dsp_type .t_card .pnt {display:flex;flex-direction:column;gap:10px 0;margin-top:clamp(20px,2.4vw,32px)}
.dsp_type .t_card .pnt li {display:flex;align-items:flex-start;gap:0 10px;font-size:clamp(13.5px,1.15vw,16.5px);font-weight:500;color:var(--txt)}
.dsp_type .t_card .pnt li::before {content:'';flex:0 0 auto;width:19px;height:19px;margin-top:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%233384FE'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain}
.dsp_type .t_card.daily .pnt li::before {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23FFB800'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain}
.dsp_type .t_card .fit {margin-top:clamp(22px,2.6vw,34px);background:var(--blue-bg);border-radius:clamp(14px,1.6vw,20px);padding:clamp(20px,2.4vw,30px)}
.dsp_type .t_card.daily .fit {background:var(--yellow-bg)}
.dsp_type .t_card .fit > strong {display:flex;align-items:center;gap:0 9px;font-size:clamp(15px,1.3vw,19px);font-weight:700;color:var(--tit)}
.dsp_type .t_card .fit > strong::before {content:'';display:block;width:6px;height:18px;border-radius:3px;background:var(--primary)}
.dsp_type .t_card.daily .fit > strong::before {background:var(--secondary-deep)}
.dsp_type .t_card .fit ul {display:flex;flex-direction:column;gap:9px 0;margin-top:14px}
.dsp_type .t_card .fit li {position:relative;padding-left:16px;font-size:clamp(13.5px,1.1vw,16px);color:var(--txt);line-height:1.55}
.dsp_type .t_card .fit li::before {content:'';position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--primary)}
.dsp_type .t_card.daily .fit li::before {background:var(--secondary-deep)}

/* ---------- 서비스 비교 표 ---------- */
.dsp_compare {padding:var(--sec-padding) 0;background:var(--white)}
.dsp_compare .table_scroll {overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:clamp(40px,4.6vw,64px);border:solid 1px var(--line);border-radius:clamp(14px,1.8vw,22px)}
.dsp_compare table {width:100%;min-width:760px;border-collapse:separate;border-spacing:0}
.dsp_compare thead th {height:clamp(60px,5.4vw,78px);font-size:clamp(15px,1.35vw,20px);font-weight:700;text-align:center;vertical-align:middle;font-family:'godo', sans-serif}
.dsp_compare thead th.g {background:var(--gray-bg);color:var(--txt-light);font-family:'pretendard', sans-serif;font-size:clamp(14px,1.15vw,16px)}
.dsp_compare thead th.m {background:var(--primary);color:var(--white)}
.dsp_compare thead th.d {background:var(--secondary);color:#3B4455}
.dsp_compare tbody th {background:var(--gray-bg);border-top:solid 1px var(--line);padding:clamp(16px,1.8vw,24px) 14px;font-size:clamp(14px,1.2vw,17px);font-weight:700;color:var(--tit);text-align:center;vertical-align:middle}
.dsp_compare tbody td {border-top:solid 1px var(--line);border-left:solid 1px var(--line);padding:clamp(16px,1.8vw,24px) clamp(14px,1.8vw,28px);font-size:clamp(14px,1.2vw,17px);color:var(--txt);text-align:center;vertical-align:middle;line-height:1.6}
.dsp_compare tbody td strong {display:block;color:var(--tit)}
.dsp_compare tbody td span {display:block;font-size:.85em;color:var(--txt-light);margin-top:5px}
.dsp_compare .scroll_hint {display:none;font-size:12px;color:#9CA3AF;text-align:center;margin-top:12px}
.dsp_compare .note_wrap {display:flex;flex-direction:column;gap:7px 0;margin-top:clamp(18px,2.2vw,28px)}
.dsp_compare .note_wrap p {font-size:clamp(13px,1.05vw,15px);color:var(--txt-light);line-height:1.6}

/* ---------- 카인드 차별점 ---------- */
.dsp_diff {padding:var(--sec-padding) 0;background:var(--navy);position:relative;overflow:hidden}
.dsp_diff::before {content:'';position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(closest-side, rgba(51,132,254,.3), transparent);top:-260px;right:-140px}
.dsp_diff::after {content:'';position:absolute;width:430px;height:430px;border-radius:50%;background:radial-gradient(closest-side, rgba(245,214,61,.15), transparent);bottom:-220px;left:-110px}
.dsp_diff .wrapper {position:relative;z-index:1}
.dsp_diff .title_box h2 em {color:var(--secondary)}
.dsp_diff .diff_grid {display:grid;grid-template-columns:repeat(4, 1fr);gap:clamp(14px,1.6vw,24px);margin-top:clamp(44px,5vw,72px)}
.dsp_diff .d_card {background:var(--white);border-radius:clamp(16px,1.8vw,22px);padding:clamp(26px,2.8vw,42px) clamp(18px,2vw,30px);text-align:center;transition:transform .3s}
.dsp_diff .d_card:hover {transform:translateY(-6px)}
.dsp_diff .d_card .ico {display:flex;align-items:center;justify-content:center;width:clamp(84px,7.6vw,110px);height:clamp(84px,7.6vw,110px);margin:0 auto;border-radius:50%;background:linear-gradient(135deg, #EAF2FF 0%, #F6F9FF 100%)}
.dsp_diff .d_card .ico img {width:60%;height:auto}
.dsp_diff .d_card strong {display:block;font-family:'godo', sans-serif;font-size:clamp(18px,1.55vw,23px);font-weight:700;color:var(--tit);margin-top:clamp(16px,1.8vw,24px)}
.dsp_diff .d_card p {font-size:clamp(13.5px,1.1vw,16px);color:var(--txt);line-height:1.65;margin-top:12px}

/* ---------- 선발·관리 프로세스 ---------- */
.dsp_process {padding:var(--sec-padding) 0;background:var(--white)}
.dsp_process .step_list {display:grid;grid-template-columns:repeat(3, 1fr);gap:clamp(16px,1.8vw,28px);margin-top:clamp(44px,5vw,72px);list-style:none;padding:0}
.dsp_process .item {position:relative;background:var(--white);border:solid 1px var(--line);border-radius:clamp(16px,1.8vw,22px);padding:clamp(24px,2.8vw,40px);transition:border-color .3s, box-shadow .3s}
.dsp_process .item:hover {border-color:var(--primary);box-shadow:0 18px 44px rgba(51,132,254,.12)}
.dsp_process .item .num {display:inline-block;font-size:clamp(28px,2.6vw,40px);font-weight:800;color:var(--primary);line-height:1;position:relative;z-index:0}
.dsp_process .item .num::after {content:'';position:absolute;left:-4px;bottom:-2px;width:calc(100% + 8px);height:38%;background:rgba(245,214,61,.5);border-radius:3px;z-index:-1}
.dsp_process .item strong {display:block;font-family:'godo', sans-serif;font-size:clamp(18px,1.55vw,23px);font-weight:700;color:var(--tit);margin-top:clamp(14px,1.6vw,22px)}
.dsp_process .item p {font-size:clamp(13.5px,1.15vw,16.5px);color:var(--txt);line-height:1.65;margin-top:10px}

/* ---------- 반응형 ---------- */
@media screen and (max-width: 1200px) {
    .dsp_intro .img_wrap {padding-right:0}
}
@media screen and (max-width: 1024px) {
    .dsp_intro .intro_flex {flex-direction:column;align-items:stretch}
    .dsp_intro .img_wrap {width:100%;max-width:620px;margin:0 auto}
    .dsp_intro .stat_list {margin-top:clamp(44px,6vw,70px)}
    .dsp_type .type_grid {grid-template-columns:1fr}
    .dsp_diff .diff_grid {grid-template-columns:repeat(2, 1fr)}
    .dsp_process .step_list {grid-template-columns:repeat(2, 1fr)}
}
@media screen and (max-width: 768px) {
    .sub_visual.dsp_visual {background-image:url('../img/stock/chauffeur-driving.jpg') !important;background-position:62% 30%}
    .dsp_intro .stat_list {grid-template-columns:1fr;border-top:0}
    .dsp_intro .stat_list .item {border-top:solid 1px var(--line);padding:22px 4px}
    .dsp_intro .stat_list .item:not(:first-child) {border-left:0}
    .dsp_compare .scroll_hint {display:block}
}
@media screen and (max-width: 480px) {
    .dsp_intro .img_wrap .sub_img {width:132px}
    .dsp_diff .diff_grid {grid-template-columns:1fr}
    .dsp_process .step_list {grid-template-columns:1fr}
    .dsp_type .t_card .visual img {width:132px}
}