/* BujaSaju Playful Theme v2 (20260923) — visual layer only.
   범위: index 히어로 + 서비스/무료운세, zodiac-animal. nav·결제·가격·인증 미포함.
   기존 :root 변수(--gold 등)와 body 전역 스타일은 건드리지 않음. */
:root{
  --pl-sky1:#5BB8FF;--pl-sky2:#BDE6FF;--pl-grass1:#6BD35F;--pl-grass2:#3FAF49;
  --pl-red:#F2463C;--pl-yellow:#FFC61A;--pl-blue:#2F6BFF;--pl-green:#22B35E;
  --pl-navy:#1B2A5B;--pl-muted:#596783;--pl-border:rgba(27,42,91,.12);
  --pl-shadow:0 16px 40px rgba(35,84,132,.16);
}

/* ① 히어로 — 기존 wh-hero 패치 스택을 이 섹션에서만 무력화 */
.wh-hero.playful-hero{position:relative!important;isolation:isolate;overflow:hidden!important;
  min-height:auto!important;height:auto!important;margin:0!important;
  padding:84px 16px 96px!important;
  background:linear-gradient(180deg,var(--pl-sky1) 0%,#8FD0FF 45%,var(--pl-sky2) 100%)!important;
  color:var(--pl-navy)!important;text-align:center!important;border:0!important}
.wh-hero.playful-hero::before{display:none!important;content:none!important}
.wh-hero.playful-hero::after{content:''!important;display:block!important;position:absolute!important;z-index:0!important;left:-20%!important;right:-20%!important;top:auto!important;bottom:-70px!important;width:auto!important;height:140px!important;opacity:1!important;
  border-radius:50% 50% 0 0;background:linear-gradient(var(--pl-grass1),var(--pl-grass2));
  box-shadow:inset 0 10px 20px rgba(255,255,255,.25)}
.playful-sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.playful-sky .pc{position:absolute;background:#fff;border-radius:999px;opacity:.95;
  box-shadow:0 8px 18px rgba(80,140,200,.18)}
.playful-sky .pc::before,.playful-sky .pc::after{content:'';position:absolute;background:#fff;border-radius:50%}
.pc1{width:120px;height:38px;left:-24px;top:92px}
.pc1::before{width:56px;height:56px;left:18px;top:-28px}.pc1::after{width:44px;height:44px;left:60px;top:-18px}
.pc2{width:96px;height:32px;right:-18px;top:150px}
.pc2::before{width:46px;height:46px;left:14px;top:-22px}.pc2::after{width:36px;height:36px;left:50px;top:-14px}
.pc3{width:80px;height:26px;left:38%;top:40px;opacity:.7}
.pc3::before{width:36px;height:36px;left:12px;top:-18px}.pc3::after{width:28px;height:28px;left:40px;top:-10px}
.playful-sky .pcoin{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFF3B0 0 12%,#FFD84A 35%,#E9A516 70%,#B97A06 100%);
  box-shadow:0 6px 12px rgba(120,80,0,.25),inset 0 -3px 0 rgba(0,0,0,.12)}
.playful-sky .pcoin::after{content:'';position:absolute;left:36%;top:36%;width:28%;height:28%;
  background:#C98A0A;border-radius:3px;box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.pcoin1{width:40px;height:40px;left:8%;bottom:60px;z-index:1}
.pcoin2{width:30px;height:30px;right:10%;top:88px}
.pcoin3{width:52px;height:52px;right:4%;bottom:74px;z-index:1}
.playful-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto}

/* 풍선 레터링 */
.playful-logo{display:flex;justify-content:center;align-items:flex-end;gap:.02em;
  font-family:'Noto Sans KR','Pretendard',sans-serif;font-weight:900;line-height:1;
  font-size:clamp(66px,21vw,140px);letter-spacing:-.05em;margin:0 0 24px;user-select:none}
.playful-logo .pl{display:inline-block;color:transparent;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 5px 0 var(--lo)) drop-shadow(0 14px 16px rgba(27,42,91,.25));
  transform:rotate(var(--r)) translateY(var(--y))}
.pl1{--lo:#A8201A;--r:-8deg;--y:4px;background:linear-gradient(165deg,#FFB3AD 0%,var(--pl-red) 38%,#C82B22 100%)}
.pl2{--lo:#C48A00;--r:5deg;--y:-6px;background:linear-gradient(165deg,#FFF1A8 0%,var(--pl-yellow) 40%,#E0A200 100%)}
.pl3{--lo:#1B44B0;--r:-4deg;--y:2px;background:linear-gradient(165deg,#AFC6FF 0%,var(--pl-blue) 40%,#1F4FD0 100%)}
.pl4{--lo:#14803F;--r:7deg;--y:-4px;background:linear-gradient(165deg,#A8F0C2 0%,var(--pl-green) 40%,#168A45 100%)}

/* 텍스트·버튼 */
.playful-text{max-width:560px;margin:0 auto;word-break:keep-all}
.playful-pill{display:inline-flex;border-radius:999px;background:var(--pl-blue);color:#fff;
  font-size:12px;font-weight:800;padding:7px 14px;margin-bottom:14px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.38),0 4px 0 #174BC7}
.wh-hero.playful-hero h1{margin:0!important;font-family:'Noto Sans KR','Pretendard',sans-serif!important;
  font-size:clamp(24px,6.6vw,40px)!important;line-height:1.25!important;font-weight:900!important;
  letter-spacing:-.04em!important;color:var(--pl-navy)!important;text-shadow:0 2px 0 rgba(255,255,255,.6)!important;
  text-align:center!important}
.wh-hero.playful-hero h1 *{color:inherit!important;-webkit-text-fill-color:currentColor!important;background:none!important}
.playful-sub{margin:12px auto 0;max-width:30em;font-size:clamp(14px,3.9vw,17px);line-height:1.7;
  color:#2A3F66;font-weight:600}
.playful-btns{display:grid;grid-template-columns:1fr;gap:12px;margin:22px auto 0;max-width:380px}
.playful-btn{display:flex;min-height:54px;align-items:center;justify-content:center;border-radius:18px;
  font-weight:900;font-size:16px;text-decoration:none!important;transition:transform .15s ease}
.playful-btn-main{background:linear-gradient(#FFE16E,#FFD234);color:var(--pl-navy)!important;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.65),0 6px 0 #D79D16,0 12px 22px rgba(108,76,8,.2)}
.playful-btn-sub{background:#fff;color:var(--pl-blue)!important;
  box-shadow:inset 0 3px 0 #fff,0 6px 0 #9CC8EC,0 12px 22px rgba(35,84,132,.14)}
.playful-btn:active{transform:translateY(4px)}
.playful-btn:focus-visible,.playful-links a:focus-visible{outline:3px solid var(--pl-blue);outline-offset:3px}
.playful-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:18px}
.playful-links a{color:var(--pl-navy)!important;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}

@media(min-width:760px){
  .wh-hero.playful-hero{padding:110px 28px 120px!important}
  .playful-btns{grid-template-columns:1fr 1fr;max-width:520px}
  .pc1{width:180px;height:54px;left:6%;top:110px}.pc2{width:150px;height:46px;right:8%;top:170px}
  .pcoin1{width:56px;height:56px;left:14%}.pcoin3{width:72px;height:72px;right:12%}
}
@media(max-width:380px){.pcoin2{display:none}.playful-logo{font-size:64px}}
@media(prefers-reduced-motion:no-preference){
  .pl{animation:pl-bob 3.6s ease-in-out infinite}
  .pl2{animation-delay:.3s}.pl3{animation-delay:.6s}.pl4{animation-delay:.9s}
  .pcoin{animation:pl-float 4.4s ease-in-out infinite}.pcoin2{animation-delay:1s}.pcoin3{animation-delay:2s}
  @keyframes pl-bob{50%{translate:0 -6px}}
  @keyframes pl-float{50%{translate:0 -10px;rotate:12deg}}
}

/* ② index 서비스 / 무료운세 섹션 */
.wh-services,.sec.sec-dark.free-hub{background:#F7FBFF!important;color:var(--pl-navy)!important}
.wh-services{padding:42px 16px 52px!important}
.wh-card,.free-card{background:rgba(255,255,255,.95)!important;border:1px solid var(--pl-border)!important;
  border-radius:24px!important;box-shadow:var(--pl-shadow)!important;color:var(--pl-navy)!important}
.wh-card:hover,.free-card:hover{transform:translateY(-4px)!important;border-color:rgba(47,107,255,.24)!important}
.wh-card-title,.free-name{color:var(--pl-navy)!important;font-weight:900!important}
.wh-card-desc{color:var(--pl-muted)!important}
.wh-card-tag,.free-badge{background:#EAF3FF!important;color:var(--pl-blue)!important;border-radius:999px!important}
.free-hub .sec-h2,.free-hub .sec-desc{color:var(--pl-navy)!important}
.free-hub .sec-tag{background:var(--pl-blue)!important;color:#fff!important;border-radius:999px!important;border:0!important}
.free-hub .more-hint{color:var(--pl-muted)!important}.free-hub .more-hint b{color:var(--pl-blue)!important}
.free-hub .btn-ghost{background:#fff!important;color:var(--pl-navy)!important;border:1px solid var(--pl-border)!important}

/* ③ zodiac-animal (JS 참조 클래스/ID는 스타일만, 이름 변경 없음) */
body:has(.zodiac-grid){background:linear-gradient(180deg,var(--pl-sky2) 0,#F7FBFF 30%,#fff 100%)!important}
body:has(.zodiac-grid) .hero{background:transparent!important;color:var(--pl-navy)!important}
body:has(.zodiac-grid) .hero *{color:inherit}
.zodiac-btn,.input-section,.result-card,.other-fortune{background:rgba(255,255,255,.95)!important;
  border:1px solid var(--pl-border)!important;border-radius:22px!important;
  box-shadow:0 10px 28px rgba(35,84,132,.11)!important;color:var(--pl-navy)!important}
.zodiac-btn:hover,.zodiac-btn.selected{border-color:var(--pl-blue)!important}
.zodiac-name,.zodiac-year,.result-title,.result-body{color:var(--pl-navy)!important}
.year-input{background:#fff!important;color:var(--pl-navy)!important;border:2px solid #DCE8F4!important;border-radius:16px!important}
.year-input:focus{border-color:var(--pl-blue)!important}
.btn-check{background:linear-gradient(#FFE16E,#FFD234)!important;color:var(--pl-navy)!important;border:0!important;
  border-radius:16px!important;box-shadow:inset 0 3px 0 rgba(255,255,255,.6),0 5px 0 #D79D16!important}
.other-link{background:#F1F7FF!important;color:var(--pl-navy)!important;border-color:#DCE8F4!important}
.free-hub .sec-tag{display:inline-flex!important;width:auto!important;max-width:max-content!important;margin-left:auto!important;margin-right:auto!important;padding:7px 14px!important;font-size:12px!important}

/* hero v3 20260923 */
.wh-hero.playful-v3{
  --hero-navy:#142052;
  --hero-purple:#9859e8;
  --hero-yellow:#ffd33d;
  --hero-yellow-deep:#f2aa12;
  --hero-surface:rgba(255,255,255,.90);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:calc(100dvh - 52px) !important;
  padding:0 !important;
  color:var(--hero-navy);
  background:
    radial-gradient(circle at 18% 26%,rgba(255,255,255,.9) 0 3%,transparent 10%),
    radial-gradient(circle at 82% 20%,rgba(255,255,255,.88) 0 4%,transparent 12%),
    linear-gradient(180deg,#69c9fa 0%,#bceaff 55%,#e9f9ff 73%,#9edb72 74%,#61b54f 100%);
}
.wh-hero.playful-v3::after{
  content:"";position:absolute;z-index:-3;left:-5%;right:-5%;bottom:-13%;height:39%;
  background:
    radial-gradient(ellipse at 20% 15%,#a7df78 0 38%,transparent 39%),
    radial-gradient(ellipse at 54% 5%,#8ed467 0 40%,transparent 41%),
    radial-gradient(ellipse at 85% 15%,#74c257 0 42%,transparent 43%);
}
.wh-hero.playful-v3 .wh-cloud{position:absolute;z-index:-2;background:rgba(255,255,255,.8);filter:blur(1px);border-radius:50%}
.wh-hero.playful-v3 .wh-cloud::before,.wh-hero.playful-v3 .wh-cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.wh-hero.playful-v3 .c1{width:190px;height:70px;left:-35px;top:8%}
.wh-hero.playful-v3 .c1::before{width:95px;height:95px;left:30px;top:-40px}
.wh-hero.playful-v3 .c1::after{width:110px;height:90px;right:15px;top:-35px}
.wh-hero.playful-v3 .c2{width:220px;height:78px;right:-45px;top:10%}
.wh-hero.playful-v3 .c2::before{width:110px;height:105px;left:35px;top:-45px}
.wh-hero.playful-v3 .c2::after{width:120px;height:90px;right:15px;top:-30px}
.wh-hero.playful-v3 .wh-stage{
  position:absolute;z-index:0;width:min(48vw,660px);height:140px;right:5%;bottom:8%;
  border-radius:50%;background:linear-gradient(#c9b8ff,#9c83e6);
  box-shadow:0 18px 0 #8870cf,0 30px 45px rgba(63,50,121,.24),inset 0 7px 0 rgba(255,255,255,.45);
}
.wh-hero.playful-v3 .wh-mascot{
  position:absolute;z-index:3;right:11%;bottom:13%;width:min(31vw,445px);height:auto;
  filter:drop-shadow(0 24px 18px rgba(40,43,72,.20));
}
.wh-hero.playful-v3 .wh-copy{
  position:relative;z-index:8;width:min(590px,46vw);padding-top:clamp(88px,13vh,135px);
  margin-left:max(7vw,calc((100vw - 1240px)/2));
}
.wh-hero.playful-v3 .wh-main-copy{
  word-break:keep-all;overflow-wrap:break-word;
  margin:0 0 13px;font-size:clamp(39px,4.1vw,62px);line-height:1.12;font-weight:900;letter-spacing:-.055em;
}
.wh-hero.playful-v3 .wh-main-copy strong{color:var(--hero-purple)}
.wh-hero.playful-v3 .wh-h1{
  word-break:keep-all;overflow-wrap:break-word;
  position:static;width:auto;height:auto;padding:0;margin:0; margin-bottom:13px !important;overflow:visible;
  clip:auto;clip-path:none;white-space:normal;border:0;
  color:var(--hero-navy);font-size:clamp(23px,2vw,31px) !important;line-height:1.25 !important;font-weight:900;letter-spacing:-.045em;
}
.wh-hero.playful-v3 .wh-h1 .wh-accent{color:var(--hero-purple)}
.wh-hero.playful-v3 .wh-sub{word-break:keep-all;overflow-wrap:break-word;margin:0 0 22px;font-size:clamp(17px,1.45vw,21px);line-height:1.5;font-weight:700;letter-spacing:-.03em}
.wh-hero.playful-v3 .wh-btns{width:min(405px,100%);display:grid !important;gap:12px}
.wh-hero.playful-v3 .wh-btn{
  min-height:64px;border-radius:24px;display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:var(--hero-navy);font-size:20px;font-weight:900;box-shadow:0 8px 18px rgba(40,45,90,.14);
}
.wh-hero.playful-v3 .wh-btn1{
  background:linear-gradient(#ffe76c,#ffc72d);border:2px solid #fff29b;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.7),0 7px 0 var(--hero-yellow-deep),0 13px 20px rgba(150,104,10,.18);
}
.wh-hero.playful-v3 .wh-btn2{background:var(--hero-surface);border:2px solid rgba(135,109,218,.25)}
.wh-hero.playful-v3 .wh-mini-links{display:flex !important;gap:18px;margin-top:18px;font-size:14px;font-weight:800}
.wh-hero.playful-v3 .wh-mini-links a{color:var(--hero-navy);text-decoration:none}
.wh-hero.playful-v3 .wh-moon,.wh-hero.playful-v3 .wh-heart,.wh-hero.playful-v3 .wh-crystal,.wh-hero.playful-v3 .wh-rainbow{position:absolute;z-index:2;pointer-events:none}
.wh-hero.playful-v3 .wh-moon{left:2.5%;top:9%;width:130px;height:130px;border-radius:50%;background:#ffd65a;box-shadow:inset 22px -8px 15px #e7a91f,0 12px 25px rgba(85,61,0,.15)}
.wh-hero.playful-v3 .wh-moon::after{content:"";position:absolute;width:112px;height:112px;border-radius:50%;background:#72cef9;left:44px;top:-9px}
.wh-hero.playful-v3 .wh-heart{width:72px;height:64px;right:7%;top:24%;transform:rotate(-45deg);background:#ff70ae;border-radius:50% 50% 12% 50%;box-shadow:inset 8px 8px 10px rgba(255,255,255,.35)}
.wh-hero.playful-v3 .wh-crystal{left:3%;bottom:4%;width:128px;height:128px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff 0 2%,transparent 3%),radial-gradient(circle at 55% 48%,#f7e6ff 0 4%,transparent 5%),radial-gradient(circle at 50% 50%,#d9c7ff,#8a7df1 55%,#7359ca);border:8px solid rgba(255,255,255,.45);box-shadow:0 15px 0 #d7a52e,0 20px 25px rgba(50,42,95,.2)}
.wh-hero.playful-v3 .wh-rainbow{right:-90px;top:23%;width:310px;height:310px;border-radius:50%;border:32px solid #ff789d;box-shadow:inset 0 0 0 30px #ffd665,inset 0 0 0 58px #7fd9b0,inset 0 0 0 86px #91aef9}
.wh-hero.playful-v3 .wh-spark{position:absolute;color:#ffd234;font-size:32px;font-weight:900;z-index:2}
.wh-hero.playful-v3 .s1{left:14%;top:10%}.wh-hero.playful-v3 .s2{right:34%;top:13%}

@media(max-width:700px){
  .wh-hero.playful-v3{min-height:calc(100dvh - 52px) !important;padding:0 !important}
  .wh-hero.playful-v3 .wh-copy{width:auto;margin:0;padding:64px 20px 0;text-align:center}
  .wh-hero.playful-v3 .wh-main-copy{font-size:32px;line-height:1.15;margin-bottom:9px}
  .wh-hero.playful-v3 .wh-h1{font-size:21px !important;line-height:1.25 !important;margin-bottom:8px !important}
  .wh-hero.playful-v3 .wh-sub{font-size:15px;line-height:1.42;margin:0 auto;max-width:350px}
  .wh-hero.playful-v3 .wh-mascot{width:63vw;right:18.5%;bottom:178px}
  .wh-hero.playful-v3 .wh-stage{width:78vw;height:74px;right:11%;bottom:160px;box-shadow:0 10px 0 #8870cf,0 20px 30px rgba(63,50,121,.18),inset 0 5px 0 rgba(255,255,255,.45)}
  .wh-hero.playful-v3 .wh-btns{position:absolute;z-index:10;left:20px;right:20px;bottom:22px;width:auto;display:grid !important;gap:9px}
  .wh-hero.playful-v3 .wh-btn{min-height:55px;border-radius:20px;font-size:18px}
  .wh-hero.playful-v3 .wh-btn1{box-shadow:inset 0 3px 0 rgba(255,255,255,.7),0 5px 0 var(--hero-yellow-deep),0 10px 16px rgba(150,104,10,.15)}
  .wh-hero.playful-v3 .wh-mini-links{display:none !important}
  .wh-hero.playful-v3 .wh-moon{width:74px;height:74px;left:-8px;top:28px}
  .wh-hero.playful-v3 .wh-moon::after{width:66px;height:66px;left:25px;top:-6px}
  .wh-hero.playful-v3 .wh-rainbow{width:170px;height:170px;right:-83px;top:165px;border-width:18px;box-shadow:inset 0 0 0 16px #ffd665,inset 0 0 0 32px #7fd9b0,inset 0 0 0 48px #91aef9}
  .wh-hero.playful-v3 .wh-heart{width:46px;height:42px;right:7%;top:250px}
  .wh-hero.playful-v3 .wh-crystal{width:80px;height:80px;left:-20px;bottom:95px;border-width:5px}
  .wh-hero.playful-v3 .s1{left:18%;top:60px;font-size:22px}
  .wh-hero.playful-v3 .s2{right:13%;top:90px;font-size:18px}
}
@media(max-width:370px),(max-height:760px) and (max-width:700px){
  .wh-hero.playful-v3 .wh-copy{padding-top:45px}
  .wh-hero.playful-v3 .wh-main-copy{font-size:28px}
  .wh-hero.playful-v3 .wh-h1{font-size:19px !important}
  .wh-hero.playful-v3 .wh-sub{font-size:14px}
  .wh-hero.playful-v3 .wh-mascot{width:57vw;right:21.5%;bottom:166px}
  .wh-hero.playful-v3 .wh-stage{bottom:151px}
  .wh-hero.playful-v3 .wh-btn{min-height:51px}
  .wh-hero.playful-v3 .wh-btns{bottom:14px}
}
@media(prefers-reduced-motion:reduce){
  .wh-hero.playful-v3 *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}
/* /hero v3 20260923 */

/* hero v3 mobile-fix 20260923c */
.wh-hero.playful-v3 .wh-hero-divider{display:none !important}
.wh-hero.playful-v3 .wh-main-copy,.wh-hero.playful-v3 .wh-h1,.wh-hero.playful-v3 .wh-sub{opacity:1 !important;color:var(--hero-navy) !important}
.wh-hero.playful-v3 .wh-h1 .wh-accent,.wh-hero.playful-v3 .wh-main-copy strong{color:var(--hero-purple) !important}
@media (max-width:700px){
  .wh-hero.playful-v3 .wh-copy{position:static !important}
  .wh-hero.playful-v3 .wh-btns{justify-content:stretch !important;grid-template-columns:1fr !important}
}

/* home v4 20260923d */
/* Index-only bright nav skin. Inline static colors are overridden; JS state styles are untouched. */
body:has(.wh-hero.playful-v3,.bs-town) #commonNav{
  height:52px !important;
  background:rgba(255,255,255,.92) !important;
  border-bottom:1px solid rgba(27,42,91,.08) !important;
  box-shadow:0 4px 18px rgba(39,72,120,.08) !important;
}
body:has(.wh-hero.playful-v3,.bs-town) #commonNav .nav-logo img{
  content:url("/img/playful/mascot-icon.webp");
  width:36px !important;height:36px !important;object-fit:cover !important;border-radius:50% !important;
}
body:has(.wh-hero.playful-v3,.bs-town) #commonNav .nav-logo span{color:#1B2A5B !important;font-family:inherit !important}
body:has(.wh-hero.playful-v3,.bs-town) #commonNav #navLoginBtn{
  color:#1B2A5B !important;border-color:rgba(27,42,91,.18) !important;background:rgba(255,255,255,.72) !important;
}
body:has(.wh-hero.playful-v3,.bs-town) #commonNav #menuBtn{color:#1B2A5B !important}
body:has(.wh-hero.playful-v3,.bs-town) #commonNav .nav-chatbot{
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;
  color:#1B2A5B;text-decoration:none;background:#EEF5FF;border:1px solid rgba(47,107,255,.14);font-size:18px;
}
body:has(.wh-hero.playful-v3,.bs-town) .bsn-drawer,
body:has(.wh-hero.playful-v3,.bs-town) .bsn-overlay{top:52px !important}

/* Live-device hero collision fixes. */
@media(max-width:700px){
  .wh-hero.playful-v3 .wh-moon{left:-42px;top:150px}
  .wh-hero.playful-v3 .wh-rainbow{right:-112px;top:300px}
  body:has(.wh-hero.playful-v3,.bs-town) #supportFloat{bottom:154px !important}
}

/* Image-first home service rail */
.home-v4{background:linear-gradient(180deg,#f4fbff 0,#f8f5ff 52%,#f5fbff 100%);color:#1B2A5B;padding:38px 0 64px}
.home-v4 .home-v4-inner{width:min(1180px,calc(100% - 32px));margin:0 auto}
.home-v4 .home-v4-head{text-align:center;margin-bottom:22px}
.home-v4 .sec-tag{display:inline-flex;background:#2F6BFF;color:#fff;border-radius:999px;padding:7px 13px;font-size:12px;font-weight:900;letter-spacing:.04em}
.home-v4 .sec-h2{color:#1B2A5B;font-family:inherit;font-size:clamp(25px,3vw,38px);line-height:1.2;margin:10px 0 8px;word-break:keep-all}
.home-v4 .sec-desc{color:#52617d;font-size:14px;line-height:1.6}
.home-v4-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.home-v4-card{
  min-width:0;position:relative;overflow:hidden;display:flex;min-height:210px;align-items:flex-end;
  border-radius:26px;text-decoration:none;color:#1B2A5B;background:#fff;
  border:1px solid rgba(27,42,91,.07);box-shadow:0 12px 30px rgba(50,79,128,.10);
}
.home-v4-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.home-v4-card .card-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:64px;background:linear-gradient(145deg,#dff3ff,#eee4ff)}
.home-v4-card .home-v4-label{
  position:relative;z-index:2;width:100%;padding:28px 14px 14px;background:linear-gradient(transparent,rgba(255,255,255,.96) 45%);
  font-size:15px;font-weight:900;text-align:center;
}
.home-v4-card.is-emoji .home-v4-label{padding-top:14px;background:rgba(255,255,255,.88)}
.home-v4-quick{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin:18px 0 0}
.home-v4-quick a{padding:10px 15px;border-radius:999px;background:#fff;color:#1B2A5B;text-decoration:none;font-size:13px;font-weight:800;border:1px solid rgba(27,42,91,.10)}
.home-v4 details,.home-blog-v4 details,.site-footer-v4 details{
  margin:20px auto 0;border:1px solid rgba(27,42,91,.10);background:rgba(255,255,255,.72);border-radius:18px;
}
.home-v4 summary,.home-blog-v4 summary,.site-footer-v4 summary{cursor:pointer;padding:14px 18px;font-weight:900;color:#1B2A5B}
.home-v4 .all-links{padding:0 18px 18px;display:flex;flex-wrap:wrap;gap:8px}
.home-v4 .all-links a{display:inline-flex;min-height:44px;align-items:center;padding:8px 12px;border-radius:12px;background:#fff;color:#1B2A5B;text-decoration:none;border:1px solid rgba(27,42,91,.09)}

/* Blog becomes one visual banner; loader remains intact inside a user-expandable details. */
.home-blog-v4{background:#f8f5ff;padding:24px 16px 54px;color:#1B2A5B}
.home-blog-v4 .home-blog-banner{
  width:min(1180px,100%);min-height:220px;margin:0 auto;display:flex;align-items:center;padding:34px;
  border-radius:30px;text-decoration:none;color:#1B2A5B;overflow:hidden;position:relative;
  background:radial-gradient(circle at 82% 30%,#fff 0 4%,transparent 5%),linear-gradient(135deg,#bde6ff,#e9ddff 55%,#fff1bc);
  box-shadow:0 14px 36px rgba(50,79,128,.10);
}
.home-blog-v4 .home-blog-banner::after{content:"🔮";position:absolute;right:7%;font-size:92px;filter:drop-shadow(0 10px 10px rgba(71,57,129,.15))}
.home-blog-v4 .home-blog-banner-copy{position:relative;z-index:2;max-width:560px}
.home-blog-v4 .home-blog-banner .sec-h2{margin:8px 0;color:#1B2A5B;font-family:inherit;font-size:clamp(28px,4vw,46px)}
.home-blog-v4 details{width:min(1180px,100%)}
.home-blog-v4 #homeBlogGrid{padding:0 16px 18px}
.home-blog-v4 #homeBlogGrid a{background:#fff !important;border-color:rgba(27,42,91,.10) !important}
.home-blog-v4 #homeBlogGrid a div{color:#1B2A5B !important}
.home-blog-v4 #homeBlogGrid .home-blog-desc{color:#52617d !important}

/* Bright compact legal footer; static footer prevents nav.js dark-footer injection. */
.site-footer-v4{background:linear-gradient(135deg,#dff3ff,#eee7ff);color:#1B2A5B;padding:26px 16px 22px;border-top:1px solid rgba(27,42,91,.08)}
.site-footer-v4 .footer-inner{width:min(1100px,100%);margin:0 auto}
.site-footer-v4 .footer-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-footer-v4 .footer-brand{font-weight:900}
.site-footer-v4 .footer-policy{display:flex;gap:14px;flex-wrap:wrap}
.site-footer-v4 a{color:#1B2A5B}
.site-footer-v4 .legal-summary{font-size:12px;line-height:1.7;color:#52617d;margin:12px 0 0}
.site-footer-v4 .footer-detail{padding:0 18px 18px;font-size:12px;line-height:1.9;color:#52617d}
.site-footer-v4 .footer-links{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.site-footer-v4 .footer-links a{display:block;margin:5px 0}

@media(max-width:700px){
  .home-v4{padding:28px 0 44px}
  .home-v4 .home-v4-inner{width:100%}
  .home-v4 .home-v4-head{padding:0 18px}
  .home-v4-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:4px 18px 18px;scrollbar-width:none}
  .home-v4-rail::-webkit-scrollbar{display:none}
  .home-v4-card{flex:0 0 70vw;min-height:250px;scroll-snap-align:start}
  .home-v4-quick{padding:0 18px}
  .home-v4 details{margin-left:18px;margin-right:18px}
  .home-blog-v4 .home-blog-banner{min-height:190px;padding:24px 22px}
  .home-blog-v4 .home-blog-banner::after{right:-5%;font-size:72px;opacity:.72}
  .home-blog-v4 .home-blog-banner-copy{max-width:76%}
  .site-footer-v4 .footer-links{grid-template-columns:1fr}
}
/* /home v4 20260923d */

/* home v4.1 20260923e */
/* Live overlap fixes */
@media (min-width:701px) and (max-width:1600px){
  .wh-hero.playful-v3 .wh-moon{left:-58px;top:64px}
}
@media(max-width:700px){
  .wh-hero.playful-v3 .wh-moon{left:-52px;top:176px}
  .wh-hero.playful-v3 .s1{left:auto;right:12px;top:118px}
  body:has(.wh-hero.playful-v3,.bs-town) #supportFloat{bottom:190px !important}
}

/* v4.1: compress all service cards into one visual rail/grid */
.home-v4.v41-services{padding:26px 0 36px}
.home-v4.v41-services .home-v4-head{margin-bottom:14px}
.home-v4.v41-services .sec-h2{font-size:clamp(21px,2.2vw,30px);margin:7px 0 4px}
.home-v4.v41-services .sec-desc{margin:0}
.home-v4.v41-services .home-v4-rail{
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:10px;
}
.home-v4.v41-services .home-v4-card{min-height:170px;border-radius:22px}
.home-v4.v41-services .home-v4-label{padding:24px 8px 10px;font-size:13px}
.home-v4.v41-services .all-links{padding-bottom:16px}
.home-v4.v41-services details{margin-top:14px}
@media(max-width:1100px) and (min-width:701px){
  .home-v4.v41-services .home-v4-rail{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:700px){
  .home-v4.v41-services{padding:20px 0 26px}
  .home-v4.v41-services .home-v4-head{padding:0 18px;margin-bottom:10px}
  .home-v4.v41-services .sec-h2{font-size:20px}
  .home-v4.v41-services .home-v4-rail{
    display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,132px);
    grid-auto-columns:112px;grid-template-columns:none;
    overflow-x:auto;gap:9px;padding:2px 18px 12px;scroll-snap-type:x proximity;
  }
  .home-v4.v41-services .home-v4-card{min-height:0;height:132px;min-width:112px;scroll-snap-align:start;border-radius:18px}
  .home-v4.v41-services .home-v4-label{padding:20px 5px 7px;font-size:12px}
  .home-v4.v41-services details{margin-top:10px}
}
/* /home v4.1 20260923e */

/* hero mobile flow 20260924 */
/* 모바일: 문장 → 마스코트 → 버튼을 일반 흐름으로 배치 (마스코트·장식이 텍스트/버튼을 덮지 않게) */
@media(max-width:700px){
  .wh-hero.playful-v3{min-height:auto !important;display:flex !important;flex-direction:column;align-items:center;padding:clamp(28px,5vh,40px) 20px 24px !important}
  .wh-hero.playful-v3 .wh-copy{display:contents}
  .wh-hero.playful-v3 .wh-main-copy{order:1;position:relative;z-index:8;margin:0 0 8px;font-size:clamp(26px,7.6vw,34px);text-align:center}
  .wh-hero.playful-v3 .wh-h1{order:2;position:relative;z-index:8;margin:0 0 6px !important;font-size:clamp(18px,5vw,22px) !important;text-align:center}
  .wh-hero.playful-v3 .wh-sub{order:3;position:relative;z-index:8;margin:0 auto;max-width:min(350px,100%);font-size:clamp(13.5px,3.7vw,15px);text-align:center}
  .wh-hero.playful-v3 .wh-mascot{
    order:4;position:static;z-index:3;display:block;flex:0 0 auto;
    width:auto;max-width:100%;height:clamp(140px,28vh,210px);margin:12px auto 0;padding:0 16% 4px;
    background:radial-gradient(ellipse 50% 9% at 50% 91%,#c9b8ff 0 95%,transparent 100%);
  }
  .wh-hero.playful-v3 .wh-stage{display:none}
  .wh-hero.playful-v3 .wh-btns{order:5;position:relative;left:auto;right:auto;bottom:auto;z-index:10;width:100%;max-width:420px;margin:14px auto 0;gap:8px}
  .wh-hero.playful-v3 .wh-btn{min-height:44px;border-radius:16px;font-size:clamp(15px,4.2vw,17px);padding:0 16px}
  .wh-hero.playful-v3 .wh-btn1{min-height:48px}
  /* 장식: 문장·버튼 영역 밖(상단 모서리, 마스코트 옆)으로만 */
  .wh-hero.playful-v3 .s1{left:12px;right:auto;top:6px;font-size:18px}
  .wh-hero.playful-v3 .s2{right:14px;left:auto;top:10px;font-size:16px}
  .wh-hero.playful-v3 .wh-moon{width:56px;height:56px;left:-30px;top:auto;bottom:250px}
  .wh-hero.playful-v3 .wh-moon::after{width:50px;height:50px;left:19px;top:-5px}
  .wh-hero.playful-v3 .wh-crystal{width:56px;height:56px;left:-18px;bottom:150px;border-width:4px;box-shadow:0 8px 0 #d7a52e,0 12px 16px rgba(50,42,95,.18)}
  .wh-hero.playful-v3 .wh-rainbow{width:130px;height:130px;right:-80px;top:auto;bottom:150px;border-width:14px;box-shadow:inset 0 0 0 12px #ffd665,inset 0 0 0 24px #7fd9b0,inset 0 0 0 36px #91aef9}
  .wh-hero.playful-v3 .wh-heart{width:32px;height:29px;right:14px;top:auto;bottom:300px}
  /* 상담 버튼: 오른쪽 아래 고정, 히어로 CTA가 흐름으로 들어왔으므로 190px 오프셋 해제 */
  body:has(.wh-hero.playful-v3,.bs-town) #supportFloat{bottom:calc(24px + env(safe-area-inset-bottom,0px)) !important}
  body:has(.wh-hero.playful-v3,.bs-town) .site-footer-v4{padding-bottom:calc(22px + 56px + 24px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:480px){
  body:has(.wh-hero.playful-v3,.bs-town) #supportFloat{right:16px !important;bottom:calc(16px + env(safe-area-inset-bottom,0px)) !important}
  body:has(.wh-hero.playful-v3,.bs-town) #supportFloat > div:first-child{width:48px !important;height:48px !important;font-size:22px !important}
  body:has(.wh-hero.playful-v3,.bs-town) #supportTooltip{right:56px !important}
  body:has(.wh-hero.playful-v3,.bs-town) .site-footer-v4{padding-bottom:calc(22px + 48px + 24px + env(safe-area-inset-bottom,0px))}
}
/* /hero mobile flow 20260924 */

/* pc deco + blog banner 20260924 */
/* 장식은 클릭을 가로채지 않고 텍스트 아래 층에 둔다 */
.wh-hero.playful-v3 .wh-spark,.wh-hero.playful-v3 .wh-cloud,.wh-hero.playful-v3 .wh-stage{pointer-events:none}
.wh-hero.playful-v3 .wh-copy{z-index:8}
/* 701~1600px: 달·별을 제목 영역(좌측 7vw~, 상단 88px~) 밖으로 */
@media(min-width:701px) and (max-width:1600px){
  .wh-hero.playful-v3 .wh-moon{width:88px;height:88px;left:-44px;top:12px}
  .wh-hero.playful-v3 .wh-moon::after{width:76px;height:76px;left:30px;top:-6px}
  .wh-hero.playful-v3 .s1{left:calc(max(7vw,(100vw - 1240px)/2) + 120px);top:26px;font-size:26px}
}
/* 블로그 배너: 단어 단위 줄바꿈, 설명 대비 4.5:1 이상 */
.home-blog-v4 .home-blog-banner .sec-h2{word-break:keep-all;overflow-wrap:break-word}
.home-blog-v4 .home-blog-banner .sec-desc{color:#3E4C6B !important;opacity:1;word-break:keep-all;overflow-wrap:break-word}
/* /pc deco + blog banner 20260924 */

/* home village 20260924 */
/* 서비스 섹션: 운세 마을 이미지(가장자리 알파) + 아이콘 위·라벨 아래 알약 */
.home-v4.v41-services{background:linear-gradient(180deg,#8fd6fb 0%,#bceaff 42%,#e9f9ff 100%) !important}
.home-v4.v41-services .home-v4-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.home-v4.v41-services .sec-desc{color:#3E4C6B;max-width:36em;margin:0 auto;word-break:keep-all}
.home-village{position:relative;width:100%;max-width:1180px;margin:0 auto}
.home-village-map{display:block;width:100%;height:auto;aspect-ratio:1774/887;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.home-village-spots{list-style:none;margin:0;padding:0}
.home-village-spot{
  display:flex;flex-direction:column;align-items:center;gap:3px;min-width:44px;
  text-decoration:none;color:#1B2A5B;-webkit-tap-highlight-color:transparent;
}
.home-village-spot img{display:block;width:44px;height:44px;filter:drop-shadow(0 3px 6px rgba(30,50,90,.25));transition:transform .15s ease}
.home-village-spot span{
  display:block;white-space:nowrap;padding:2px 9px;border-radius:999px;
  background:rgba(255,255,255,.95);box-shadow:0 3px 8px rgba(30,50,90,.16);
  font-size:13px;font-weight:800;line-height:1.35;
}
.home-village-spot:hover img,.home-village-spot:focus-visible img{transform:translateY(-2px) scale(1.06)}
.home-village-spot:focus-visible{outline:3px solid #2F6BFF;outline-offset:3px;border-radius:14px}
/* ≥1024px: 이미지 위 % 좌표. 묶음 중심 = 건물 중심에서 8% 위 */
@media(min-width:1024px){
  .home-village-spot{position:absolute;left:var(--x);top:calc(var(--y) - 8%);transform:translate(-50%,-50%);z-index:2}
}
/* <1024px: 이미지는 상단 배너, 아이콘은 4열(마지막 줄 가운데) */
@media(max-width:1023px){
  .home-village-spots{display:flex;flex-wrap:wrap;justify-content:center;row-gap:clamp(10px,2.5vw,16px);max-width:560px;margin:clamp(6px,2vw,12px) auto 0;padding:0 clamp(4px,2vw,16px)}
  .home-village-spots li{flex:0 0 25%;max-width:25%;display:flex;justify-content:center;min-width:0}
  .home-village-spot span{font-size:clamp(11.5px,3.2vw,13px);padding:2px clamp(6px,1.8vw,9px)}
}
@media(prefers-reduced-motion:reduce){.home-village-spot img{transition:none}}
/* /home village 20260924 */