/* -------------------- 차주모집 안내 -------------------- */
/* 2026-08-26 서체·색 정본 정렬: 잉크 #000/#3A3A3C/#7F7F8E, 선 #C9CFDA, kimm 은 hero h1 만, 제목 OnemobileT 초록, 본문 OnemobileG 1.6/1.4rem, 모서리 1rem/0.5rem/알약 */
:root{
  --bg:#FFFFFF;
  --bg-2:#F0F5F6;
  --bg-3:#F5F5F5;
  --surface:#FFFFFF;
  --surface-2:#F8F9FA;
  --line:#C9CFDA;
  --line-2:#D2DAE3;
  --ink:#000000;
  --ink-2:#3A3A3C;
  --ink-3:#7F7F8E;
  --ink-4:#B3B3B3;
  --accent:#FF5900;
  --accent-2:#FF5900; /* 파생 오렌지 없음. 어두운 바탕에서도 포인트색 그대로 */
  --accent-3:#F0F5F6; /* 아이콘·선택 칩 바탕 = 사이트 --bg-gray */
  --oc-green:#265E54;
  --oc-green-2:#269F8D;
  --error:#D93025;
  --error-bg:#FFF7F6;
  /* 슬라이더 트랙. 밝은 배경(신청 폼 카드)이 기본, 어두운 시뮬레이터 패널에서 덮어쓴다. */
  --range-track:var(--line-2);

  --hero:'kimm', -apple-system, BlinkMacSystemFont, sans-serif;
  --display:'OnemobileT', -apple-system, BlinkMacSystemFont, sans-serif;
  --body:'OnemobileG', -apple-system, system-ui, sans-serif;
  --sans:'Pretendard', -apple-system, system-ui, sans-serif;

  --maxw:152rem;  /* 사이트 .inner 와 동일 */
  --pad:6rem;
  --radius:1rem;
  --shadow-card:0 18px 50px -28px rgba(0,0,0,.30),0 4px 14px -6px rgba(0,0,0,.12);

  /* 고정 #header(8rem) 위에 sticky .carapply-nav(top:8rem + 66px)가 겹쳐 앉는다.
     둘 중 아래 경계는 146px. 여유 14px을 더한 값. */
  --anchor-offset:8.6rem;
}

/* 앵커 이동 시 헤더/내비에 가리지 않도록.
   페이지 내 스크롤(JS)과 페이지 간 해시 점프(브라우저) 양쪽에 동일하게 적용된다. */
.carapply-anchor{scroll-margin-top:var(--anchor-offset)}

html{scroll-behavior:smooth}

.sub_header {display:none;}
#s-container {padding-top:10rem;position:static;}
.container div, .container span, .container object, .container iframe,
.container h1, .container h2, .container h3, .container h4, .container h5, .container h6,
.container p, .container blockquote, .container pre,
.container abbr, .container address, .container cite, .container code,
.container del, .container dfn, .container em, .container img, .container ins,
.container kbd, .container q, .container samp,
.container small, .container strong, .container sub, .container sup, .container var,
.container b, .container i,
.container dl, .container dt, .container dd, .container ol, .container ul, .container li,
.container fieldset, .container form, .container label, .container legend,
.container article, .container aside, .container canvas, .container details,
.container figcaption, .container figure,
.container footer, .container header, .container hgroup, .container menu,
.container nav, .container section, .container summary,
.container time, .container mark, .container audio, .container video {line-height:1.6;}

.container .inner {max-width:none;padding:0;position:static;}
.carapply-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.carapply-narrow{max-width:840px}
@media(max-width:1200px){:root{--pad:4rem}}
@media(max-width:768px){:root{--pad:3rem}}

/* 페이지 제목 : 스티키 내비 왼쪽, 사이트 sub-title02 규격(2.8rem OnemobileT). 스크롤해 바가 붙으면 2rem 으로 축소 */
.carapply-page-title{display:block;margin:0;font-family:var(--display);font-weight:700;font-size:2.8rem;line-height:1.1;letter-spacing:-0.025em;color:var(--ink);white-space:nowrap;transition:font-size .25s ease}
.carapply-nav.carapply-scrolled .carapply-page-title{font-size:2rem}

  @media screen and (max-width: 1439px) {
    #s-container {padding-top:8rem;}
  }

/* ============ Reveal (스크롤 등장) ============ */
.carapply-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.carapply-reveal.carapply-in{opacity:1;transform:none}
.carapply-reveal[data-d="1"]{transition-delay:.08s}
.carapply-reveal[data-d="2"]{transition-delay:.16s}
.carapply-reveal[data-d="3"]{transition-delay:.24s}
.carapply-reveal[data-d="4"]{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.carapply-reveal{opacity:1;transform:none;transition:none}}

/* ============ Eyebrow (정본 배지) ============ */
.carapply-eyebrow{display:block;font-family:var(--body);font-size:1.6rem;font-weight:700;color:var(--oc-green);line-height:1.2}
.carapply-eyebrow.carapply-green{color:var(--oc-green)}

/* ============ Buttons (정본) ============ */
.carapply-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border-radius:50rem;font-family:var(--body);font-weight:700;font-size:1.6rem;transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,box-shadow .3s,border-color .3s;will-change:transform;letter-spacing:-0.01em;cursor:pointer;border:1.5px solid transparent}
.carapply-btn-primary{background:var(--accent);color:#fff}
.carapply-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,89,0,.3)}
.carapply-btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.carapply-btn-ghost:hover{border-color:var(--ink);background:var(--bg-2);transform:translateY(-2px)}
.carapply-btn-lg{padding:19px 36px;font-size:1.8rem}
.carapply-btn-block{width:100%}
.carapply-btn .carapply-arrow{display:inline-block;transition:transform .3s}
.carapply-btn:hover .carapply-arrow{transform:translateX(4px)}


/* ============ Section heads ============ */
.carapply-section{padding:clamp(64px,9vw,120px) 0}
.carapply-section-head{max-width:680px;margin-bottom:48px}
.carapply-section-head.carapply-center{margin-left:auto;margin-right:auto;text-align:center}
.carapply-section-head .carapply-eyebrow{margin-bottom:0.8rem}
.carapply-section-head h2{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,3.4vw,3.6rem);line-height:1.2;letter-spacing:-0.02em;color:var(--oc-green)}
.carapply-section-head h2 .carapply-it{color:var(--accent);font-style:normal}
.carapply-section-head .carapply-desc{font-family:var(--body);font-size:1.6rem;color:var(--ink-2);margin-top:18px;line-height:1.8}

/* ============ NAV ============ */
.carapply-nav{position:sticky;top:8rem;margin-top:4rem;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.carapply-nav.carapply-scrolled{border-color:var(--line);box-shadow:0 6px 24px -16px rgba(0,0,0,.25)}
.carapply-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:7.2rem}
.carapply-nav.carapply-scrolled .carapply-nav-inner{height:6.2rem}
.carapply-brand{flex:none;display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:2rem;letter-spacing:-.02em;color:var(--ink)}
.carapply-brand .carapply-dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.carapply-brand small{font-family:var(--body);font-weight:700;font-size:1.2rem;color:var(--ink-3)}
.carapply-nav-links{display:none;gap:30px;align-items:center;width:auto;margin-left:auto;margin-right:2rem}
.carapply-nav-links a{font-size:1.4rem;font-weight:700;color:var(--ink-2);transition:color .2s}
.carapply-nav-links a:hover{color:var(--accent)}
.carapply-nav .carapply-btn{flex:none;padding:11px 22px;font-size:1.4rem}

@media(max-width:1439px){
  .carapply-nav {top:7.7rem;transition:top .3s;}
  body:has(.header-hidden) .carapply-nav {top:0}
}
@media(min-width:900px){.carapply-nav-links{display:flex}}

/* ============ HERO ============ */
.carapply-hero{position:relative;padding:64px 0 76px;overflow:hidden}
@media(min-width:980px){.carapply-hero{padding:48px 0 124px;min-height:520px;display:flex;align-items:center}}
.carapply-hero-bg{position:absolute;inset:0;z-index:0;background:#FFFFFF}
.carapply-hero-grid{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse at 60% 40%,black 20%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse at 60% 40%,black 20%,transparent 78%)}
.carapply-hero-bg::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' seed='5'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/></svg>");opacity:.55;mix-blend-mode:multiply;pointer-events:none}
.carapply-hero-glow{position:absolute;z-index:0;width:560px;height:560px;right:-140px;top:-120px;background:radial-gradient(circle,rgba(255,140,66,.16) 0%,transparent 65%);pointer-events:none}

.carapply-hero-inner{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:980px){.carapply-hero-inner{grid-template-columns:1.05fr .95fr;gap:64px}}
.carapply-hero-text .carapply-eyebrow{margin-bottom:1.2rem}
.carapply-hero h1{font-family:var(--hero);font-weight:700;font-size:clamp(3.4rem,5vw,6rem);line-height:1.1;letter-spacing:-0.03em;margin-bottom:22px;color:var(--ink)}
.carapply-hero h1 .carapply-it{color:var(--accent);font-weight:700;font-style:normal}
.carapply-hero-sub{font-family:var(--body);font-size:1.6rem;color:var(--ink-2);max-width:520px;margin-bottom:32px;line-height:1.78}
.carapply-hero-sub strong{color:var(--ink);font-weight:700}
.carapply-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.carapply-hero-meta{display:flex;flex-wrap:wrap;gap:18px 34px;padding-top:24px;border-top:1px solid rgba(0,0,0,.12)}
.carapply-hero-meta .carapply-num{font-family:var(--display);font-weight:700;font-size:3.4rem;line-height:1;letter-spacing:-0.02em;color:var(--ink)}
.carapply-hero-meta .carapply-num em{font-style:normal;color:var(--accent);font-weight:700;line-height:1;}
.carapply-hero-meta .carapply-item:first-child .carapply-num em{color:var(--oc-green)}
.carapply-hero-meta .carapply-label{font-family:var(--body);font-size:1.2rem;font-weight:400;color:var(--ink-3);margin-top:6px}

/* Hero visual */
.carapply-hero-visual{position:relative;aspect-ratio:4/3;width:100%;border-radius:1rem;overflow:hidden;box-shadow:0 30px 80px -28px rgba(0,0,0,.40),0 8px 24px -8px rgba(0,0,0,.18);background:var(--bg-2)}
@media(min-width:980px){.carapply-hero-visual{aspect-ratio:5/6}}
@media(max-width:480px){.carapply-hero-visual{aspect-ratio:16/11;border-radius:1rem}}
.carapply-hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transform:scale(1.02);animation:slideFade 21s infinite}
.carapply-hero-slide:nth-child(1){animation-delay:0s}
.carapply-hero-slide:nth-child(2){animation-delay:-7s}
.carapply-hero-slide:nth-child(3){animation-delay:-14s}
.carapply-hero-visual:hover .carapply-hero-slide{animation-play-state:paused}
.carapply-hero-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.20) 0%,rgba(0,0,0,.04) 30%,rgba(0,0,0,.04) 70%,rgba(0,0,0,.34) 100%);pointer-events:none;z-index:2}
@keyframes slideFade{0%{opacity:0;transform:scale(1.02)}4%{opacity:1;transform:scale(1.02)}30%{opacity:1;transform:scale(1.08)}34%{opacity:0;transform:scale(1.08)}100%{opacity:0;transform:scale(1.02)}}
@media(prefers-reduced-motion:reduce){.carapply-hero-slide{animation:none;opacity:0}.carapply-hero-slide:nth-child(1){opacity:1}}
/* 히어로 비주얼 위 수익 배지 */
.carapply-hero-badge{position:absolute;z-index:3;left:18px;bottom:18px;right:18px;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:1rem;background:rgba(255,255,255,.68);backdrop-filter:blur(6px);box-shadow:0 12px 30px -14px rgba(0,0,0,.45)}
.carapply-hero-badge .carapply-ico{width:42px;height:42px;border-radius:0.5rem;background:var(--accent-3);display:grid;place-items:center;font-size:2rem;flex:0 0 auto}
.carapply-hero-badge .carapply-t{font-family:var(--body);font-size:1.2rem;font-weight:700;color:var(--ink-2)}
.carapply-hero-badge .carapply-v{font-family:var(--display);font-weight:700;font-size:2rem;color:var(--ink);letter-spacing:-.02em}
.carapply-hero-badge .carapply-v em{font-style:normal;color:var(--accent)}
/* 하단 배지: 3개 기준을 사진과 별개로 순환(루프) */
.carapply-hb-rot{position:relative;flex:1;min-width:0;height:4.4rem}
.carapply-hb-item{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;white-space:nowrap;animation:hbRot 10.5s infinite}
.carapply-hb-item:nth-child(1){animation-delay:0s}
.carapply-hb-item:nth-child(2){animation-delay:-3.5s}
.carapply-hb-item:nth-child(3){animation-delay:-7s}
@keyframes hbRot{0%{opacity:0;transform:translateY(calc(-50% + 7px))}4%{opacity:1;transform:translateY(-50%)}28%{opacity:1;transform:translateY(-50%)}33%{opacity:0;transform:translateY(calc(-50% - 7px))}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.carapply-hb-item{animation:none;opacity:0}.carapply-hb-item:nth-child(2){opacity:1}}

  /* 모바일: 두 버튼을 수익계산 버튼 기준으로 같은 폭·한 줄·같은 높이 (좌우 여백을 줄여 줄바꿈 방지) */
  @media screen and (max-width:540px) {
    .carapply-hero-actions .carapply-btn-primary,
    .carapply-hero-actions .carapply-btn-ghost {width:25rem;padding-left:2rem;padding-right:2rem;white-space:nowrap;}
  }

/* ============ Logos / trust strip ============ */
.carapply-trust-strip{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.carapply-trust-strip .carapply-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 36px;padding-top:26px;padding-bottom:26px}
.carapply-trust-strip .carapply-ts-item{display:flex;align-items:center;gap:9px;font-family:var(--body);font-size:1.4rem;color:var(--ink-2)}
.carapply-trust-strip .carapply-ts-item b{color:var(--ink);font-weight:700}
.carapply-trust-strip .carapply-ts-item .carapply-ck{color:var(--oc-green-2);font-weight:700}

/* ============ Pain / Why (문제 제기) ============ */
.carapply-why{background:var(--bg)}
.carapply-why-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:8px}
@media(min-width:760px){.carapply-why-grid{grid-template-columns:repeat(3,1fr)}}
.carapply-why-card{background:var(--surface);border:1px solid var(--line);border-radius:1rem;padding:30px 26px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.carapply-why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--line-2)}
.carapply-why-card .carapply-q{font-family:var(--display);font-size:1.4rem;font-weight:700;color:var(--oc-green)}
.carapply-why-card h3{font-family:var(--display);font-weight:700;font-size:2.2rem;line-height:1.3;margin:14px 0 10px;color:var(--ink);letter-spacing:-0.02em}
.carapply-why-card p{font-family:var(--body);font-size:1.4rem;color:var(--ink-2);line-height:1.75}
.carapply-why-card .carapply-arrow-sol{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:1.4rem;font-weight:700;color:var(--accent)}

/* ============ Benefits ============ */
.carapply-benefits{background:linear-gradient(180deg,#FFFFFF 0%,var(--bg-2) 100%);border-top:1px solid var(--line)}
.carapply-benefit-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:680px){.carapply-benefit-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.carapply-benefit-grid{grid-template-columns:repeat(3,1fr)}}
.carapply-benefit-card{background:var(--surface);border:1px solid var(--line);border-radius:1rem;padding:32px 28px;transition:transform .3s,box-shadow .3s}
.carapply-benefit-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.carapply-benefit-card .carapply-ico{width:54px;height:54px;border-radius:0.5rem;display:grid;place-items:center;font-size:2.4rem;background:var(--accent-3);margin-bottom:18px}
.carapply-benefit-card.carapply-g .carapply-ico{background:#D9EFE9}
.carapply-benefit-card h3{font-family:var(--display);font-weight:700;font-size:2rem;letter-spacing:-0.02em;margin-bottom:10px;color:var(--ink)}
.carapply-benefit-card p{font-family:var(--body);font-size:1.4rem;color:var(--ink-2);line-height:1.75}

/* ============ Full-bleed photo band (한 구간 전체 이미지) ============ */
.carapply-photoband{position:relative;min-height:clamp(420px,60vh,620px);display:flex;align-items:center;overflow:hidden;background:#000}
.carapply-photoband .carapply-pb-img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;object-position:center 72%;z-index:0;will-change:transform}
@media(max-width:780px){.carapply-photoband .carapply-pb-img{object-position:62% 78%}}
.carapply-photoband::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.62) 40%,rgba(0,0,0,.18) 75%,rgba(0,0,0,.30) 100%)}
@media(max-width:780px){.carapply-photoband::after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.5) 40%,rgba(0,0,0,.85) 100%)}}
.carapply-photoband .carapply-wrap{position:relative;z-index:2;width:100%;padding-top:4rem;padding-bottom:4rem;}
.carapply-photoband-inner{max-width:620px}
.carapply-photoband .carapply-eyebrow{color:#fff;margin-bottom:1.2rem}
.carapply-photoband h2{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,3.4vw,3.6rem);line-height:1.2;letter-spacing:-0.02em;color:#fff;margin-bottom:1rem;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.carapply-photoband h2 .carapply-it{color:var(--accent-2);font-style:normal}
.carapply-photoband p{font-family:var(--body);font-size:1.6rem;color:rgba(255,255,255,.86);line-height:1.8;max-width:520px;margin-bottom:26px}
.carapply-photoband .carapply-pb-stats{display:flex;flex-wrap:wrap;align-items: flex-start; gap:14px 36px;margin-bottom:30px}
.carapply-photoband .carapply-pb-stats .carapply-num{font-family:var(--display);font-weight:700;font-size:3.2rem;line-height:1;letter-spacing:-0.02em;color:#fff}
.carapply-photoband .carapply-pb-stats .carapply-num em{font-style:normal;color:var(--accent-2);line-height:1;}
.carapply-photoband .carapply-pb-stats .carapply-lb{font-family:var(--body);font-size:1.2rem;color:rgba(255,255,255,.62);margin-top:7px}
.carapply-photoband .carapply-btn-primary{background:#fff;color:var(--ink)}
.carapply-photoband .carapply-btn-primary:hover{background:var(--accent);color:#fff}

/* 운영 4단계 - 사진 헤더 추가 */
.carapply-steps-photo{position:relative;border-radius:var(--radius);overflow:hidden;margin-bottom:44px;aspect-ratio:21/7;box-shadow:var(--shadow-card)}
@media(max-width:680px){.carapply-steps-photo{aspect-ratio:16/9}}
.carapply-steps-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.carapply-steps-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.45) 100%)}
.carapply-steps-photo .carapply-cap{position:absolute;z-index:2;left:clamp(20px,4vw,40px);bottom:clamp(18px,3vw,30px);right:clamp(20px,4vw,40px)}
.carapply-steps-photo .carapply-cap b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,2.2vw,2.4rem);letter-spacing:-0.02em;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.carapply-steps-photo .carapply-cap span{font-family:var(--body);font-size:1.4rem;color:rgba(255,255,255,.82)}

/* ============ Revenue Simulator ============ */
.carapply-sim{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.carapply-sim::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 18% 20%,rgba(255,89,0,.22) 0%,transparent 55%),radial-gradient(ellipse at 85% 80%,rgba(38,159,141,.16) 0%,transparent 55%);pointer-events:none}
.carapply-sim .carapply-wrap{position:relative;z-index:1}
.carapply-sim .carapply-eyebrow{color:#fff}
.carapply-sim .carapply-section-head h2{color:#fff}
.carapply-sim .carapply-section-head h2 .carapply-it{color:var(--accent-2)}
.carapply-sim .carapply-section-head .carapply-desc{color:rgba(255,255,255,.7)}
.carapply-sim-panel{display:grid;grid-template-columns:1fr;gap:28px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:clamp(24px,4vw,44px)}
@media(min-width:880px){.carapply-sim-panel{grid-template-columns:1fr 1fr;gap:48px;align-items:center}}
.carapply-sim-field{margin-bottom:26px}
.carapply-sim-field:last-child{margin-bottom:0}
.carapply-sim-field label{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--body);font-size:1.4rem;color:rgba(255,255,255,.78);margin-bottom:14px}
.carapply-sim-field label .carapply-val{font-family:var(--display);font-weight:700;font-size:2rem;color:#fff;letter-spacing:-.02em}
.carapply-sim-field label .carapply-val em{font-style:normal;color:var(--accent-2)}
/* 어두운 시뮬레이터 패널 안에서만 트랙을 밝게 뒤집는다 */
.carapply-sim{--range-track:rgba(255,255,255,.16)}

.carapply-field input[type=range],
.carapply-sim-field input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:50rem;background:var(--range-track);outline:none}
.carapply-field input[type=range]::-webkit-slider-thumb,
.carapply-sim-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid #fff;box-shadow:0 4px 12px rgba(255,89,0,.5);transition:transform .15s}
.carapply-field input[type=range]::-webkit-slider-thumb:hover,
.carapply-sim-field input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
/* Firefox는 트랙과 썸을 별도 의사요소로 그린다. 벤더 접두어가 다르면 규칙을 나눠야 한다. */
.carapply-field input[type=range]::-moz-range-track,
.carapply-sim-field input[type=range]::-moz-range-track{height:6px;border-radius:50rem;background:var(--range-track);border:0}
.carapply-field input[type=range]::-moz-range-thumb,
.carapply-sim-field input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid #fff}
.carapply-field input[type=range]:focus-visible,
.carapply-sim-field input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.carapply-sim-seg{display:flex;gap:8px;flex-wrap:wrap}
.carapply-sim-seg button{flex:1;min-width:84px;padding:13px 10px;border-radius:0.5rem;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);color:rgba(255,255,255,.8);font-family:var(--body);font-size:1.4rem;font-weight:700;transition:all .2s}
.carapply-sim-seg button.carapply-on{background:var(--accent);border-color:var(--accent);color:#fff}
.carapply-sim-result{text-align:center;padding:8px 0}
.carapply-sim-result .carapply-cap{font-family:var(--body);font-size:1.4rem;color:rgba(255,255,255,.65);margin-bottom:10px}
.carapply-sim-result .carapply-big{font-family:var(--display);font-weight:700;font-size:clamp(40px,7vw,64px);line-height:1;letter-spacing:-0.02em;color:#fff}
.carapply-sim-result .carapply-big em{font-style:normal;color:var(--accent-2)}
.carapply-sim-result .carapply-unit{font-size:.45em;color:rgba(255,255,255,.6);margin-left:6px}
.carapply-sim-result .carapply-year{margin-top:14px;font-family:var(--body);font-size:1.6rem;color:rgba(255,255,255,.82)}
.carapply-sim-result .carapply-year b{color:var(--accent-2);font-weight:700}
.carapply-sim-note{margin-top:20px;font-size:1.2rem;color:rgba(255,255,255,.45);line-height:1.7}
.carapply-sim-result .carapply-btn{margin-top:24px}

/* ============ Steps (운영 4단계) ============ */
.carapply-steps{background:var(--bg)}
.carapply-step-list{display:grid;grid-template-columns:1fr;gap:18px;counter-reset:s}
@media(min-width:680px){.carapply-step-list{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.carapply-step-list{grid-template-columns:repeat(4,1fr)}}
.carapply-step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:1rem;padding:30px 26px 28px;counter-increment:s;overflow:hidden;transition:transform .3s,box-shadow .3s}
.carapply-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.carapply-step::before{content:"0" counter(s);position:absolute;top:14px;right:18px;font-family:var(--display);font-weight:700;font-size:5.4rem;line-height:1;color:var(--bg-2);z-index:0;letter-spacing:-0.02em}
.carapply-step>*{position:relative;z-index:1}
.carapply-step .carapply-ico{margin-bottom:14px}
/* 라인 SVG 아이콘 (컬러 이모지 대체) */
.carapply-ico svg{display:block;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.carapply-hero-badge .carapply-ico svg{width:24px;height:24px}
.carapply-benefit-card .carapply-ico svg{width:28px;height:28px}
.carapply-benefit-card.carapply-g .carapply-ico svg{stroke:#2E9E86}
.carapply-step .carapply-ico svg{width:30px;height:30px}
.carapply-step h3{font-family:var(--display);font-weight:700;font-size:1.8rem;letter-spacing:-0.02em;margin-bottom:8px;color:var(--ink)}
.carapply-step p{font-family:var(--body);font-size:1.4rem;color:var(--ink-2);line-height:1.7}

/* ============ FAQ ============ */
.carapply-faq{background:linear-gradient(180deg,var(--bg-2) 0%,#FFFFFF 100%);border-top:1px solid var(--line)}
.carapply-faq-list{max-width:840px;margin:0 auto}
.carapply-faq-item{border-bottom:1px solid var(--line);}
.carapply-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;padding:26px 4px;font-family:var(--display);font-weight:700;font-size:1.8rem;letter-spacing:-0.02em;color:var(--ink)}
/* +/× 기호는 글리프 대신 의사요소 막대 2개로 그린다. 폰트의 광학 중심에 영향받지 않는다.
   열림 상태의 rotate(45deg)가 십자를 그대로 ×로 만든다. */
.carapply-faq-q .carapply-pm{position:relative;box-sizing:border-box;flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-2);color:var(--accent);transition:transform .3s,background .3s,color .3s,border-color .3s}
.carapply-faq-q .carapply-pm::before,
.carapply-faq-q .carapply-pm::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:2px;border-radius:1px;background:currentColor;transform:translate(-50%,-50%)}
.carapply-faq-q .carapply-pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.carapply-faq-item.carapply-open .carapply-faq-q .carapply-pm{background:var(--accent);color:#fff;border-color:var(--accent);transform:rotate(45deg)}
.carapply-faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.8,.2,1)}
.carapply-faq-a-inner{padding:0 4px 26px;font-family:var(--body);font-size:1.4rem;color:var(--ink-2);line-height:1.8}

/* ============ Final CTA ============ */
/* 하단 이미지가 살짝 비치도록: 이미지 위에 오렌지 베일(투명도 완화) */
.carapply-cta{position:relative;overflow:hidden;color:#fff;text-align:center;background-color:var(--ink);background-image:linear-gradient(rgba(28,26,23,.88),rgba(28,26,23,.74)),url("/share/portal/img/Contents/carapply/cta-desk.png");background-size:cover;background-position:center 38%;background-repeat:no-repeat}
.carapply-cta::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at center,black 10%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at center,black 10%,transparent 72%)}
.carapply-cta .carapply-wrap{position:relative;z-index:1}
.carapply-cta h2{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,3.6vw,3.6rem);line-height:1.2;letter-spacing:-0.02em;margin-bottom:18px}
.carapply-cta p{font-family:var(--body);font-size:1.6rem;color:rgba(255,255,255,.9);max-width:540px;margin:0 auto 32px;line-height:1.75}
.carapply-cta .carapply-btn-primary{background:var(--accent);color:#fff}
.carapply-cta .carapply-btn-primary:hover{box-shadow:0 16px 36px rgba(255,89,0,.35)}

/* ============ Footer ============ */
.carapply-footer{background:var(--ink);color:rgba(255,255,255,.62);padding:4rem 0 4rem}
.carapply-footer-top{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}
.carapply-footer .carapply-brand{color:#fff;margin-bottom:12px}
/* 푸터 로고 BI: 원본 컬러 로고를 흰색으로 반전 표현 */
.carapply-footer-logo{height:42px;width:auto;display:block;filter:brightness(0) invert(1)}
.carapply-footer-desc{font-family:var(--body);font-size:1.4rem;line-height:1.8;max-width:380px}
.carapply-footer-links{display:flex;gap:28px;flex-wrap:wrap}
.carapply-footer-links a{font-size:1.4rem;color:rgba(255,255,255,.72);transition:color .2s}
.carapply-footer-links a:hover{color:var(--accent-2)}
.carapply-footer-bottom{font-size:1.4rem;line-height:1.8;color:rgba(255,255,255,.42)}

/* ============ Sticky mobile CTA ============ */
.carapply-sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(0,0,0,.4);transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.carapply-sticky-cta.carapply-show{transform:none}
.carapply-sticky-cta .carapply-btn{width:100%}
@media(min-width:900px){.carapply-sticky-cta{display:none}}

/* ============================================================
 * apply.html (자체 신청 페이지)
 * ============================================================ */
.carapply-apply-hero{position:relative;overflow:hidden;padding:56px 0 36px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.carapply-apply-hero .carapply-hero-grid{background-size:64px 64px}
.carapply-apply-hero .carapply-eyebrow{margin-bottom:0.8rem}
.carapply-apply-hero h1{font-family:var(--hero);font-weight:700;font-size:clamp(2.8rem,4vw,3.6rem);line-height:1.2;letter-spacing:-0.03em;color:var(--ink)}
.carapply-apply-hero h1 .carapply-it{color:var(--accent)}
.carapply-apply-hero p{font-family:var(--body);font-size:1.6rem;color:var(--ink-2);margin-top:14px;max-width:560px;line-height:1.75}
.carapply-apply-wrap{padding:clamp(40px,6vw,72px) 0 96px;background:var(--bg)}
.carapply-apply-grid{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:920px){.carapply-apply-grid{grid-template-columns:1fr 340px;gap:56px;align-items:start}}

/* progress */
.carapply-steps-bar{display:flex;align-items:center;gap:8px;margin-bottom:34px}
.carapply-steps-bar .carapply-sb{display:flex;align-items:center;gap:10px;flex:1}
.carapply-steps-bar .carapply-sb .carapply-n{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.6rem;background:var(--bg-2);color:var(--ink-4);border:1.5px solid var(--line);transition:all .3s}
.carapply-steps-bar .carapply-sb .carapply-lb{font-family:var(--body);font-size:1.4rem;color:var(--ink-3);transition:color .3s}
.carapply-steps-bar .carapply-sb .carapply-ln{flex:1;height:2px;background:var(--line);border-radius:2px}
.carapply-steps-bar .carapply-sb.carapply-active .carapply-n{background:var(--accent);color:#fff;border-color:var(--accent)}
.carapply-steps-bar .carapply-sb.carapply-active .carapply-lb{color:var(--ink);font-weight:700}
.carapply-steps-bar .carapply-sb.carapply-done .carapply-n{background:var(--oc-green);color:#fff;border-color:var(--oc-green)}
@media(max-width:640px){.carapply-steps-bar .carapply-sb .carapply-lb{display:none}.carapply-steps-bar .carapply-sb.carapply-active .carapply-lb{display:block}}

.carapply-form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,4vw,42px);box-shadow:var(--shadow-card)}
.carapply-fstep{display:none;animation:fadeStep .4s ease}
.carapply-fstep.carapply-on{display:block}
@keyframes fadeStep{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.carapply-fstep h2{font-family:var(--display);font-weight:700;font-size:2.2rem;letter-spacing:-0.02em;margin-bottom:6px;color:var(--ink)}
.carapply-fstep .carapply-sub{font-family:var(--body);font-size:1.4rem;color:var(--ink-3);margin-bottom:26px}
.carapply-field{margin-bottom:22px}
.carapply-field>label{display:block;font-family:var(--body);font-weight:700;font-size:1.4rem;color:var(--ink);margin-bottom:9px}
.carapply-field>label .carapply-req{color:var(--accent);margin-left:3px}
.carapply-field .carapply-hint{font-family:var(--body);font-size:1.2rem;color:var(--ink-3);margin-top:7px;line-height:1.6}
.carapply-field input[type=text],.carapply-field input[type=tel],.carapply-field input[type=email],.carapply-field input[type=number],.carapply-field select,.carapply-field textarea{width:100%;padding:15px 16px;border:1.5px solid var(--line-2);border-radius:0.5rem;background:var(--surface-2);color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s}
/* range 는 background 가 트랙 자체다. 여기에 #fff 를 씌우면 흰 카드 위에서 트랙이 사라진다. */
.carapply-field input:not([type=range]):focus,.carapply-field select:focus,.carapply-field textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px rgba(255,89,0,.1)}
.carapply-field textarea{min-height:110px;resize:vertical;line-height:1.7}
.carapply-chip-row{display:flex;flex-wrap:wrap;gap:10px}
.carapply-chip{position:relative}
.carapply-chip input{position:absolute;opacity:0;pointer-events:none}
.carapply-chip span{display:inline-flex;align-items:center;gap:7px;padding:13px 18px;border:1.5px solid var(--line-2);border-radius:0.5rem;background:var(--surface-2);font-family:var(--body);font-size:1.4rem;font-weight:700;color:var(--ink-2);transition:all .2s;cursor:pointer}
.carapply-chip input:checked+span{border-color:var(--accent);background:var(--accent-3);color:var(--accent)}
.carapply-chip input:focus-visible+span{box-shadow:0 0 0 4px rgba(255,89,0,.12)}
/* 유효성 오류 표시. 라디오는 opacity:0 으로 숨겨져 있어 개별 컨트롤이 아니라
   .carapply-field 래퍼에 .carapply-invalid 를 걸고 보이는 요소를 물들인다. */
.carapply-field.carapply-invalid>label{color:var(--error)}
.carapply-field.carapply-invalid input[type=text],
.carapply-field.carapply-invalid input[type=tel],
.carapply-field.carapply-invalid input[type=email],
.carapply-field.carapply-invalid input[type=number],
.carapply-field.carapply-invalid select,
.carapply-field.carapply-invalid textarea{border-color:var(--error);background:var(--error-bg)}
.carapply-field.carapply-invalid input:focus,
.carapply-field.carapply-invalid select:focus,
.carapply-field.carapply-invalid textarea:focus{border-color:var(--error);box-shadow:0 0 0 4px rgba(217,48,37,.12)}
.carapply-field.carapply-invalid .carapply-chip span{border-color:var(--error);background:var(--error-bg)}
/* 이미 고른 칩은 오류가 아니므로 강조색을 유지한다 */
.carapply-field.carapply-invalid .carapply-chip input:checked+span{border-color:var(--accent);background:var(--accent-3)}
.carapply-field.carapply-invalid.carapply-check label.carapply-cl{color:var(--error)}
.carapply-field.carapply-invalid.carapply-check input[type=checkbox]{outline:2px solid var(--error);outline-offset:2px}

/* 오류 문구. JS가 무효한 컨트롤 바로 뒤에 삽입한다. */
.carapply-err{display:none;font-family:var(--body);font-size:1.2rem;font-weight:700;color:var(--error);margin-top:7px;line-height:1.5}
.carapply-field.carapply-invalid>.carapply-err{display:block}

.carapply-form-nav{display:flex;gap:12px;margin-top:8px}
.carapply-form-nav .carapply-btn{flex:1}
.carapply-field.carapply-check label.carapply-cl{display:flex;align-items:flex-start;gap:10px;font-family:var(--body);font-size:1.4rem;color:var(--ink-2);line-height:1.6;cursor:pointer;font-weight:400}
.carapply-field.carapply-check input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent);flex:0 0 auto}
.carapply-field.carapply-check a{color:var(--accent);text-decoration:underline}

/* aside summary */
.carapply-apply-aside{position:sticky;top:84px;display:flex;flex-direction:column;gap:18px}
.carapply-aside-card{background:var(--bg-2);border:1px solid var(--line);border-radius:1rem;padding:26px 24px}
.carapply-aside-card h4{font-family:var(--display);font-weight:700;font-size:1.7rem;letter-spacing:-0.02em;margin-bottom:16px;color:var(--ink)}
.carapply-aside-card ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.carapply-aside-card li{display:flex;gap:10px;font-family:var(--body);font-size:1.4rem;color:var(--ink-2);line-height:1.5}
.carapply-aside-card li .carapply-ck{color:var(--oc-green-2);font-weight:700;flex:0 0 auto}
.carapply-aside-card.carapply-accent{background:var(--ink);color:#fff}
.carapply-aside-card.carapply-accent h4{color:#fff}
.carapply-aside-card.carapply-accent .carapply-est{font-family:var(--display);font-weight:700;font-size:3.2rem;letter-spacing:-0.02em;color:var(--accent-2);line-height:1}
.carapply-aside-card.carapply-accent .carapply-est small{font-family:var(--body);font-size:1.4rem;color:rgba(255,255,255,.6);display:block;margin-top:6px;font-weight:400}

/* success */
.carapply-apply-done{display:none;text-align:center;max-width:560px;margin:0 auto;padding:40px 0}
.carapply-apply-done.carapply-on{display:block}
.carapply-apply-done .carapply-big-ck{width:88px;height:88px;border-radius:50%;background:#D9EFE9;color:var(--oc-green);display:grid;place-items:center;font-size:4rem;margin:0 auto 26px;animation:popck .5s cubic-bezier(.2,1.4,.5,1)}
@keyframes popck{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.carapply-apply-done h2{font-family:var(--display);font-weight:700;font-size:2.6rem;letter-spacing:-0.02em;margin-bottom:14px;color:var(--ink)}
.carapply-apply-done p{font-family:var(--body);font-size:1.6rem;color:var(--ink-2);line-height:1.8;margin-bottom:28px}

/* ============ Responsive tweaks ============ */
@media(max-width:560px){
  .carapply-hero-meta{gap:14px 24px}
}