/* =========================================================
   로컬세무왕 — 광고/홍보 전용 원페이지 랜딩
   2026 트렌디 핀테크 + 프리미엄 컨시어지 무드
   ========================================================= */

:root{
  --blue-950:#0a1a3c;
  --blue-900:#0f2350;
  --blue-800:#15306b;
  --blue-700:#1c4394;
  --blue-600:#2857c4;
  --blue-500:#3f6ef2;
  --blue-400:#6f93f7;
  --blue-100:#e7edfe;
  --off-white:#f7f7f5;
  --white:#ffffff;
  --ink:#0d1117;
  --ink-soft:#4b5361;
  --line:#e7e5e1;
  --radius-lg:28px;
  --radius-md:20px;
  --radius-sm:14px;
  --shadow-soft:0 20px 50px -20px rgba(15,35,80,0.25);
  --ff: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--ff);
  background:var(--off-white);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:76px; /* space for sticky cta on mobile */
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;}

.section-tag{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--blue-600);
  background:var(--blue-100);
  padding:6px 14px;
  border-radius:100px;
  margin-bottom:18px;
}
.section-tag.light{
  color:var(--blue-100);
  background:rgba(255,255,255,0.12);
}

/* ============ NAV ============ */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:rgba(247,247,245,0.75);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(15,35,80,0.06);
}
.nav-inner{
  max-width:1100px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-logo{
  font-size:19px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--blue-900);
}
.nav-logo span{color:var(--blue-500);}
.nav-cta{
  font-size:14px;
  font-weight:700;
  color:var(--white);
  background:var(--blue-600);
  padding:9px 16px;
  border-radius:100px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px -6px rgba(40,87,196,0.5);}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:120px 20px 80px;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #eef2ff 0%, var(--off-white) 55%);
}
.hero-glow{
  position:absolute;
  width:600px;height:600px;
  top:-200px;left:50%;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(63,110,242,0.16) 0%, rgba(63,110,242,0) 70%);
  pointer-events:none;
  z-index:0;
}

/* 은은하게 떠다니는 그라데이션 블롭 — 배경에 색감/깊이감 추가 */
.hero-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(50px);
  pointer-events:none;
  z-index:0;
  opacity:0.55;
}
.hero-blob-1{
  width:280px;height:280px;
  top:8%;left:6%;
  background:radial-gradient(circle, rgba(111,147,247,0.55) 0%, rgba(111,147,247,0) 72%);
  animation:blobFloat1 9s ease-in-out infinite;
}
.hero-blob-2{
  width:240px;height:240px;
  bottom:10%;right:6%;
  background:radial-gradient(circle, rgba(255,196,102,0.4) 0%, rgba(255,196,102,0) 72%);
  animation:blobFloat2 11s ease-in-out infinite;
}
.hero-blob-3{
  width:180px;height:180px;
  top:38%;right:12%;
  background:radial-gradient(circle, rgba(140,110,255,0.35) 0%, rgba(140,110,255,0) 72%);
  animation:blobFloat3 8s ease-in-out infinite;
}
@keyframes blobFloat1{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(24px,18px) scale(1.08);}
}
@keyframes blobFloat2{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-20px,-16px) scale(1.1);}
}
@keyframes blobFloat3{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-14px,20px) scale(0.94);}
}
@media (prefers-reduced-motion: reduce){
  .hero-blob{animation:none;}
}

.hero-inner{
  position:relative;
  z-index:1;
  max-width:640px;
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:800;
  color:var(--blue-700);
  letter-spacing:0.04em;
  margin-bottom:26px;
  padding:8px 18px;
  border-radius:100px;
  background:linear-gradient(90deg, #eaf0ff, #f5eeff, #eaf0ff);
  background-size:200% 100%;
  border:1px solid rgba(63,110,242,0.25);
  box-shadow:0 6px 16px -8px rgba(63,110,242,0.35);
  opacity:0;
  animation:fadeUp .7s ease forwards, badgeSheen 4s linear infinite;
}
@keyframes badgeSheen{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
.hero-title{
  font-size:clamp(40px, 11vw, 76px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-0.03em;
  color:var(--blue-950);
  margin-bottom:28px;
}
.hero-title .line{
  display:block;
  opacity:0;
  animation:fadeUp .8s ease forwards;
}
.hero-title .line:nth-child(2){
  animation-delay:.12s;
  background:linear-gradient(100deg, var(--blue-950) 30%, var(--blue-600) 60%, var(--blue-400) 80%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-sub{
  font-size:clamp(19px,4.6vw,26px);
  font-weight:600;
  line-height:1.6;
  color:var(--blue-800);
  margin-bottom:18px;
  opacity:0;
  animation:fadeUp .8s ease forwards;
  animation-delay:.24s;
}
.hero-sub strong{font-weight:800;}
.hero-mark{
  position:relative;
  display:inline-block;
  white-space:nowrap;
}
.hero-mark::before{
  content:'';
  position:absolute;
  left:-4px;right:-4px;
  bottom:2px;
  height:0.5em;
  background:linear-gradient(90deg, #ffe27a, #ffd23f);
  border-radius:4px;
  z-index:-1;
  transform:scaleX(0);
  transform-origin:left;
  animation:markSweep .6s ease forwards;
  animation-delay:1.05s;
}
@keyframes markSweep{
  to{transform:scaleX(1);}
}
.hero-desc{
  font-size:clamp(15px,3.6vw,18px);
  line-height:1.7;
  color:var(--ink-soft);
  margin-bottom:38px;
  opacity:0;
  animation:fadeUp .8s ease forwards;
  animation-delay:.34s;
}
.hero-desc strong{color:var(--ink);font-weight:700;}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}

.btn-main{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  font-weight:800;
  color:var(--white);
  background:linear-gradient(135deg, var(--blue-600), var(--blue-700));
  padding:18px 30px;
  border-radius:100px;
  box-shadow:0 16px 34px -10px rgba(40,87,196,0.55);
  transition:transform .25s ease, box-shadow .25s ease;
  border:none;
  cursor:pointer;
  overflow:hidden;
}
.btn-main::after{
  content:'';
  position:absolute;
  top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,0.45), transparent);
  transform:skewX(-20deg);
  animation:btnShine 3.2s ease-in-out infinite;
}
@keyframes btnShine{
  0%{left:-60%;}
  40%{left:130%;}
  100%{left:130%;}
}
.btn-main:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 40px -8px rgba(40,87,196,0.6);}
.btn-main svg{transition:transform .25s ease;position:relative;z-index:1;}
.btn-main:hover svg{transform:translateX(3px);}

.hero-cta{
  opacity:0;
  animation:fadeUp .8s ease forwards;
  animation-delay:.46s;
}
.hero-note{
  margin-top:16px;
  font-size:13px;
  color:var(--ink-soft);
  opacity:0;
  animation:fadeUp .8s ease forwards;
  animation-delay:.56s;
}

.scroll-cue{
  position:absolute;
  bottom:28px;left:50%;
  transform:translateX(-50%);
  width:26px;height:42px;
  border:2px solid rgba(15,35,80,0.25);
  border-radius:20px;
  z-index:1;
}
.scroll-cue span{
  position:absolute;
  top:8px;left:50%;
  width:4px;height:8px;
  background:var(--blue-500);
  border-radius:4px;
  transform:translateX(-50%);
  animation:scrollDown 1.8s ease infinite;
}
@keyframes scrollDown{
  0%{opacity:1;top:8px;}
  70%{opacity:0;top:22px;}
  100%{opacity:0;top:22px;}
}

/* ============ COMPARE ============ */
.compare{
  background:var(--white);
  padding:100px 20px 110px;
  text-align:center;
}
.compare-inner{max-width:760px;margin:0 auto;}

.compare-pretitle{
  font-size:clamp(32px,9vw,52px);
  font-weight:800;
  line-height:1.18;
  letter-spacing:-0.03em;
  color:var(--blue-950);
  margin-bottom:40px;
}
.compare-pretitle.is-visible{animation:painPop .6s ease;}

/* ---- Pain point cards: 검색 오버로드 / 프로필 오버로드 ---- */
.pain-stack{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-bottom:6px;
}
.pain-card{
  background:var(--off-white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:26px 22px 24px;
  text-align:left;
  opacity:1;
  transform:translateY(0);
}
/* 카드 자체는 항상 보이며, 등장 시 살짝 강조되는 정도만 연출 */
.pain-card.is-visible{animation:painPop .5s ease;}
@keyframes painPop{
  from{transform:translateY(10px);}
  to{transform:translateY(0);}
}
.pain-card-label{
  font-size:clamp(19px,5vw,24px);
  font-weight:800;
  line-height:1.35;
  letter-spacing:-0.01em;
  color:var(--blue-900);
  margin-bottom:18px;
}
.pain-card-label-oneline{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  white-space:nowrap;
  gap:4px;
  font-size:clamp(14px,4.6vw,21px);
}
.brand-row{
  display:inline-flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:4px;
}
.brand-logo{
  display:inline-block;
  width:1em;
  height:1em;
  flex-shrink:0;
  border-radius:4px;
  object-fit:contain;
  margin-right:2px;
  vertical-align:-0.12em;
}
.brand-sep{
  color:var(--ink-soft);
  font-weight:700;
  margin:0 3px;
}

/* 검색창에 타이핑되는 듯한 효과 */
.type-searchbox{
  display:inline-flex;
  align-items:center;
  gap:2px;
  background:var(--blue-100);
  color:var(--blue-700);
  padding:3px 10px 3px 12px;
  border-radius:100px;
  border:1.5px solid var(--blue-400);
  font-weight:800;
  vertical-align:middle;
  white-space:nowrap;
}
.type-searchbox-text{
  min-width:2px;
}
.type-cursor{
  display:inline-block;
  width:2px;
  height:1em;
  background:var(--blue-600);
  margin-left:1px;
  vertical-align:-0.15em;
  animation:typeBlink .9s step-end infinite;
}
@keyframes typeBlink{
  0%, 50%{opacity:1;}
  51%, 100%{opacity:0;}
}
.pain-quote{
  margin-top:16px;
  font-size:clamp(15px,3.8vw,17px);
  font-weight:800;
  color:var(--blue-900);
  text-align:center;
}
.pain-quote strong{color:var(--blue-600);}

/* search mock */
.search-mock{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 14px 0;
  overflow:hidden;
  box-shadow:0 10px 26px -14px rgba(0,0,0,0.15);
}
.search-mock-topbar{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:12px;
}
.search-mock-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--line);
}
.search-mock-inputbar{
  margin-left:8px;
  flex:1;
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--off-white);
  border-radius:8px;
  padding:6px 10px;
  font-size:12px;
  font-weight:600;
  color:var(--ink-soft);
}
.result-bar{
  display:block;
  height:8px;
  border-radius:4px;
  background:var(--line);
}
.result-bar.w1{width:70%;background:#d9dee8;}
.result-bar.w2{width:45%;background:#e5e8ee;}
.search-mixed-row:nth-child(2) .result-bar.w1{width:55%;}
.search-mixed-row:nth-child(3) .result-bar.w1{width:82%;}
.search-mixed-row:nth-child(4) .result-bar.w1{width:60%;}
.search-mixed-row:nth-child(5) .result-bar.w1{width:74%;}
.search-mock-fade{
  position:absolute;
  left:0;right:0;bottom:0;
  height:56px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--white));
  pointer-events:none;
}

/* 검색 결과: 개인사무실 / 광고·플랫폼 뒤섞임 목업 */
.search-mixed-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.search-mixed-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.src-tag{
  flex-shrink:0;
  font-size:10.5px;
  font-weight:800;
  padding:3px 8px;
  border-radius:6px;
  white-space:nowrap;
}
.src-tag.office{
  background:#eef1f6;
  color:#5b6474;
}
.src-tag.platform{
  background:#fff1e0;
  color:#b56a1a;
}
.src-bars{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* 프로필 카드: 회원가입/카톡로그인/동의 목업 */
.signup-mock{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 26px -14px rgba(0,0,0,0.15);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.signup-kakao-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  background:#FEE500;
  color:#391B1B;
  font-weight:800;
  font-size:13px;
  padding:10px;
  border-radius:8px;
  border:none;
  cursor:default;
}
.signup-check-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.signup-check{
  flex-shrink:0;
  width:16px;height:16px;
  border-radius:4px;
  border:1.5px solid var(--line);
  position:relative;
}
.signup-check.checked{
  background:var(--blue-500);
  border-color:var(--blue-500);
}
.signup-check.checked::after{
  content:'';
  position:absolute;
  left:4px;top:1px;
  width:4px;height:8px;
  border:solid white;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.signup-check-label{
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-soft);
}
.signup-submit-btn{
  margin-top:4px;
  text-align:center;
  background:var(--blue-100);
  color:var(--blue-700);
  font-weight:800;
  font-size:13px;
  padding:11px;
  border-radius:8px;
}

/* 대비 카드: 로컬세무왕은 이런 거 없음 */
.no-nonsense-card{
  background:linear-gradient(150deg, var(--blue-900), var(--blue-700));
  border-radius:var(--radius-lg);
  padding:32px 24px;
  text-align:center;
  color:var(--white);
  margin-bottom:48px;
  box-shadow:0 24px 50px -20px rgba(15,35,80,0.45);
}
.no-nonsense-card.is-visible{animation:painPop .5s ease;}
.no-nonsense-title{
  font-size:clamp(19px,4.6vw,24px);
  font-weight:800;
  margin-bottom:22px;
  letter-spacing:-0.01em;
}
.no-nonsense-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
  margin-bottom:22px;
}
.no-nonsense-item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:12px;
  padding:12px 10px;
  font-size:13.5px;
  font-weight:700;
  text-decoration:line-through;
  text-decoration-color:rgba(255,255,255,0.5);
  color:rgba(255,255,255,0.75);
}
.no-nonsense-x{
  flex-shrink:0;
  width:20px;height:20px;
  border-radius:50%;
  background:rgba(255,90,90,0.25);
  color:#ff8a8a;
  font-size:12px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.no-nonsense-sub{
  font-size:15px;
  line-height:1.6;
  color:rgba(255,255,255,0.9);
}
.no-nonsense-sub strong{color:#ffe9a8;}

.pain-arrow-divider{
  display:flex;
  justify-content:center;
  color:var(--blue-400);
  margin:26px 0 40px;
}

.compare-stage{
  position:relative;
  margin-bottom:48px;
}

/* clean state (single, static flow — no background box) */
.clean{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  opacity:1;
}
.clean.is-visible{animation:painPop .6s ease;}
.clean-brand{
  font-size:14px;
  font-weight:800;
  color:var(--blue-500);
  letter-spacing:0.03em;
  margin-bottom:10px;
}
.clean-channel{
  font-size:clamp(17px,4.4vw,21px);
  font-weight:800;
  color:var(--blue-700);
  margin-bottom:26px;
  letter-spacing:-0.01em;
}
.clean-flow{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}
.clean-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  background:var(--white);
  border:1px solid var(--blue-100);
  padding:18px 16px;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
  min-width:110px;
  max-width:130px;
}
.clean-num{
  width:30px;height:30px;
  border-radius:50%;
  background:var(--blue-600);
  color:var(--white);
  font-weight:800;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.clean-label{font-size:13.5px;font-weight:700;color:var(--blue-900);line-height:1.4;text-align:center;}
.clean-arrow{font-size:20px;color:var(--blue-400);font-weight:700;}
.clean-guarantee{
  margin-top:22px;
  font-size:12.5px;
  font-weight:700;
  color:var(--blue-700);
  background:var(--blue-100);
  padding:7px 14px;
  border-radius:100px;
}

.compare-headline{
  font-size:clamp(28px,7vw,44px);
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--blue-950);
  margin-bottom:14px;
}
.compare-sub{
  font-size:clamp(16px,4vw,19px);
  color:var(--ink-soft);
}
.compare-sub strong{color:var(--blue-700);font-weight:800;}

/* ============ EMOTION ============ */
.emotion{
  background:linear-gradient(160deg, var(--blue-950), var(--blue-800));
  color:var(--white);
  padding:120px 20px;
  text-align:center;
}
.emotion-inner{max-width:680px;margin:0 auto;}
.emotion-title{
  font-size:clamp(28px,7.5vw,50px);
  font-weight:800;
  line-height:1.28;
  letter-spacing:-0.02em;
  margin-bottom:30px;
}
.emotion-title .line{display:block;}
.emotion-sub{
  font-size:clamp(17px,4.2vw,21px);
  line-height:1.6;
  color:rgba(255,255,255,0.88);
  margin-bottom:26px;
}
.emotion-sub strong{color:var(--white);}
.emotion-tagline{
  display:inline-block;
  font-size:14px;
  font-weight:700;
  color:var(--blue-100);
  border:1px solid rgba(255,255,255,0.25);
  padding:10px 20px;
  border-radius:100px;
}

/* ============ CONSULT ============ */
.consult{
  background:var(--blue-900);
  padding:100px 16px 120px;
  text-align:center;
}
.consult-inner{max-width:520px;margin:0 auto;}
.consult-title{
  font-size:clamp(28px,7vw,38px);
  font-weight:800;
  color:var(--white);
  margin-bottom:12px;
  letter-spacing:-0.02em;
}
.consult-sub{
  font-size:15px;
  color:rgba(255,255,255,0.65);
  margin-bottom:10px;
}
.consult-caption{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  color:#FEE500;
  background:rgba(254,229,0,0.12);
  border:1px solid rgba(254,229,0,0.35);
  padding:8px 16px;
  border-radius:100px;
  margin-bottom:34px;
}

/* ---- 실제 카카오톡 상담 예시 (읽기 전용 데모) ---- */
.kakao-demo{
  background:#B2C7DA;
  border-radius:var(--radius-lg);
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.4);
  overflow:hidden;
  text-align:left;
}
.kakao-demo-header{
  display:flex;
  align-items:center;
  gap:10px;
  background:#A7BFD6;
  padding:14px 18px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.kakao-demo-avatar{
  width:34px;height:34px;
  border-radius:50%;
  background:#FEE500;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.kakao-demo-name{font-size:14.5px;font-weight:800;color:#2b2b2b;}
.kakao-demo-status{font-size:12px;color:#4c5866;}

.kakao-demo-body{
  padding:20px 16px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:220px;
}
.kakao-msg{
  display:flex;
  flex-direction:column;
  gap:4px;
  max-width:86%;
  opacity:0;
  transform:translateY(8px);
}
.kakao-msg.is-visible{animation:bubbleIn .4s ease forwards;}
@keyframes bubbleIn{to{opacity:1;transform:translateY(0);}}
.kakao-msg.user{align-self:flex-end;align-items:flex-end;}
.kakao-msg.bot{align-self:flex-start;align-items:flex-start;}
.kakao-bubble{
  display:inline-block;
  padding:11px 15px;
  border-radius:16px;
  font-size:14.5px;
  line-height:1.5;
  font-weight:600;
}
.kakao-bubble.user{
  background:#FEE500;
  color:#391B1B;
  border-radius:16px 16px 4px 16px;
}
.kakao-bubble.bot{
  background:#ffffff;
  color:var(--ink);
  border-radius:16px 16px 16px 4px;
}
.kakao-time{
  font-size:10.5px;
  color:#4c5866;
  padding:0 2px;
}
.kakao-typing{
  display:flex;
  align-self:flex-start;
  gap:4px;
  background:#ffffff;
  padding:12px 16px;
  border-radius:16px 16px 16px 4px;
  opacity:0;
}
.kakao-typing.is-visible{opacity:1;}
.kakao-typing span{
  width:6px;height:6px;
  border-radius:50%;
  background:#9aa5b1;
  animation:typingBounce 1.2s infinite ease-in-out;
}
.kakao-typing span:nth-child(2){animation-delay:0.15s;}
.kakao-typing span:nth-child(3){animation-delay:0.3s;}
@keyframes typingBounce{
  0%, 60%, 100%{transform:translateY(0);opacity:0.5;}
  30%{transform:translateY(-4px);opacity:1;}
}

.consult-kakao-cta{margin-top:28px;}
.consult-note{
  margin-top:14px;
  font-size:13px;
  color:rgba(255,255,255,0.6);
}

/* ============ KAKAO ELEMENTS ============ */
.btn-kakao{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:800;
  color:#391B1B;
  background:#FEE500;
  padding:14px 24px;
  border-radius:100px;
  box-shadow:0 14px 30px -10px rgba(254,229,0,0.5);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-kakao:hover{transform:translateY(-2px) scale(1.02);}
.footer-kakao{margin-top:14px;}

.kakao-float{
  position:fixed;
  right:18px;
  bottom:96px;
  z-index:210;
  width:56px;height:56px;
  border-radius:50%;
  background:#FEE500;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 28px -8px rgba(0,0,0,0.35);
  transition:transform .25s ease, box-shadow .25s ease;
  animation:kakaoPulse 2.6s ease-in-out infinite;
}
.kakao-float:hover{transform:scale(1.08);}
@keyframes kakaoPulse{
  0%, 100%{box-shadow:0 12px 28px -8px rgba(0,0,0,0.35), 0 0 0 0 rgba(254,229,0,0.5);}
  50%{box-shadow:0 12px 28px -8px rgba(0,0,0,0.35), 0 0 0 10px rgba(254,229,0,0);}
}

@media (max-width: 720px){
  .kakao-float{bottom:88px; right:16px; width:52px; height:52px;}
}
@media (min-width: 721px){
  .kakao-float{bottom:28px;}
}

/* ============ FOOTER ============ */
.site-footer{
  background:var(--blue-950);
  color:var(--white);
  padding:90px 20px 60px;
  text-align:center;
}
.footer-inner{max-width:560px;margin:0 auto;}
.footer-final{
  font-size:clamp(26px,6.5vw,36px);
  font-weight:800;
  line-height:1.35;
  margin-bottom:34px;
}
.footer-final .line{display:block;}
.footer-cta{margin-bottom:18px;}
.footer-note{font-size:13px;color:rgba(255,255,255,0.6);margin-bottom:16px;}
.footer-home-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,0.85);
  border-bottom:1px solid rgba(255,255,255,0.4);
  padding-bottom:2px;
  margin-bottom:30px;
  transition:color .2s ease, border-color .2s ease;
}
.footer-home-link:hover{color:#ffffff;border-color:#ffffff;}
.footer-legal{font-size:12px;color:rgba(255,255,255,0.35);}

/* ============ STICKY MOBILE CTA ============ */
.sticky-cta{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:200;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  display:none;
}
.sticky-cta-btn{
  display:block;
  text-align:center;
  background:linear-gradient(135deg, var(--blue-600), var(--blue-700));
  color:var(--white);
  font-weight:800;
  font-size:16px;
  padding:15px;
  border-radius:100px;
  box-shadow:0 10px 24px -8px rgba(40,87,196,0.55);
}

@media (max-width: 720px){
  .sticky-cta{display:block;}
  .nav-cta{display:none;}
}

/* Desktop refinements */
@media (min-width: 900px){
  .hero-title{font-size:88px;}
}