* { font-family: 'Poppins', 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', 'Noto Sans', sans-serif; letter-spacing: 0.03em; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* ── 스크롤 리빌 ── */
.rv { opacity:0; transform:translateY(24px); filter:blur(3px);
      transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1); }
.rv.fr { transform:translateX(32px); }
.rv.fl { transform:translateX(-32px); }
.rv.fs { transform:scale(.96); }
.rv.on { opacity:1; transform:none; filter:blur(0); }
.d1{transition-delay:.15s} .d2{transition-delay:.30s} .d3{transition-delay:.45s} .d4{transition-delay:.60s}

/* ── 카드 호버 ── */
.ch { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1); }
.ch:hover { transform:translateY(-5px); }

/* ── Float ── */
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.float  { animation: floatY 4s ease-in-out infinite; }
.float2 { animation: floatY 4s 1.4s ease-in-out infinite; }

/* ── Pulse ── */
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.75)} }
.pulse { animation: pulse 2s ease-in-out infinite; }

/* ── 그린 그라데이션 텍스트 ── */
.grad-text {
  background: linear-gradient(130deg, #7DBE52 0%, #A3D470 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── 숫자 그라데이션 ── */
.num-grad {
  background: linear-gradient(135deg, #ffffff 0%, #7DBE52 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Mobile drawer ── */
#drawer { transform:translateY(-110%); transition:transform .4s cubic-bezier(.16,1,.3,1); }
#drawer.open { transform:translateY(0); }
.hb span { display:block; width:22px; height:2px; background:#0F1F1A; border-radius:2px;
           transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s; }
.hb.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hb.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hb.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── 스크롤바 ── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-thumb { background:#DCE8E2; border-radius:2px; }

/* ── Process step 연결선 ── */
.step-connector { position:relative; }
.step-connector:not(:last-child)::after {
  content:''; position:absolute; top:28px; left:calc(50% + 36px); width:calc(100% - 72px);
  height:1px; background:linear-gradient(to right, #7DBE52 0%, #DCE8E2 100%);
}
@media(max-width:767px) { .step-connector:not(:last-child)::after { display:none; } }

/* ── 이미지 그라데이션 마스크 ── */
.img-mask { mask-image: linear-gradient(to left, #000 60%, transparent 100%); -webkit-mask-image: linear-gradient(to left, #000 60%, transparent 100%); }

/* ── Bento card ── */
.bento-tall { grid-row: span 2; }

/* ── Form input dark ── */
.form-dark { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
             border-radius:12px; color:#fff; font-family:inherit; outline:none;
             transition: border-color .25s; }
.form-dark:focus { border-color:rgba(125,190,82,.6); }
.form-dark::placeholder { color:rgba(255,255,255,.3); }
.form-dark option { background:#0e2820; }

/* ── Tailwind CDN arbitrary-opacity 버그 수정
   bg-tr-green/10 등 커스텀 컬러에 opacity modifier가
   css clamp로 solid color 렌더링되는 현상 오버라이드 ── */
.bg-tr-green\/10,.bg-tr-green\/\[10\] { background-color:rgba(125,190,82,.10)!important }
.bg-tr-green\/12,.bg-tr-green\/\[12\] { background-color:rgba(125,190,82,.12)!important }
.bg-tr-green\/15,.bg-tr-green\/\[15\] { background-color:rgba(125,190,82,.15)!important }
.bg-tr-green\/\[22\]                  { background-color:rgba(125,190,82,.22)!important }
.bg-white\/\[4\]                      { background-color:rgba(255,255,255,.04)!important }
.bg-white\/\[6\]                      { background-color:rgba(255,255,255,.06)!important }
.bg-white\/\[8\]                      { background-color:rgba(255,255,255,.08)!important }
.bg-white\/\[12\]                     { background-color:rgba(255,255,255,.12)!important }
.border-tr-green\/20,.border-tr-green\/\[20\] { border-color:rgba(125,190,82,.20)!important }
.border-tr-green\/22,.border-tr-green\/\[22\] { border-color:rgba(125,190,82,.22)!important }
.border-tr-green\/25,.border-tr-green\/\[25\] { border-color:rgba(125,190,82,.25)!important }
.border-tr-green\/30,.border-tr-green\/\[30\] { border-color:rgba(125,190,82,.30)!important }
.border-white\/\[6\]                  { border-color:rgba(255,255,255,.06)!important }
.border-white\/\[8\]                  { border-color:rgba(255,255,255,.08)!important }
.border-white\/\[12\]                 { border-color:rgba(255,255,255,.12)!important }
.bg-white\/\[97\]                     { background-color:rgba(255,255,255,.97)!important }
.text-white\/\[18\]                   { color:rgba(255,255,255,.18)!important }
.text-white\/\[22\]                   { color:rgba(255,255,255,.22)!important }
