/* 홈 첫 화면: 히어로 + 운세 마을 통합 (2026-09-24, Claude)
   원칙: 뷰포트 높이(vh)에 의존하지 않고 max-width 컨테이너 안에서만 배치 → 확대·축소해도 비율 유지 */
.bs-town{position:relative;background:linear-gradient(180deg,#8fd6fb 0%,#b9e8ff 38%,#e3f6ff 78%,#f4fbff 100%);padding:clamp(18px,3vw,40px) 0 clamp(22px,3vw,40px);overflow:hidden}
.bs-town::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0)) 8% 12%/min(420px,40%) min(260px,30%) no-repeat,radial-gradient(closest-side,rgba(255,255,255,.6),rgba(255,255,255,0)) 92% 8%/min(380px,36%) min(220px,26%) no-repeat}
.bs-town-inner{position:relative;width:min(1240px,calc(100% - 32px));margin:0 auto;display:grid;grid-template-columns:minmax(0,28fr) minmax(0,72fr);grid-template-areas:"copy copy" "head head" "mascot map" "spots spots";column-gap:clamp(6px,2vw,24px);align-items:end}
.bs-town-copy{grid-area:copy;text-align:center;color:#1B2A5B;margin-bottom:clamp(14px,2.4vw,24px)}
.bs-town-lead{margin:0;font-size:clamp(24px,2.2vw + 14px,44px);line-height:1.2;font-weight:900;letter-spacing:-.02em;word-break:keep-all}
.bs-town-lead strong{color:#9B5CF6;font-weight:900}
.bs-town-h1{margin:clamp(6px,1vw,12px) 0 0;font-size:clamp(17px,.8vw + 12px,26px);line-height:1.3;font-weight:800;color:#1B2A5B;font-family:inherit;word-break:keep-all}
.bs-town-h1 .wh-accent{color:#9B5CF6}
.bs-town-sub{margin:clamp(6px,.8vw,10px) 0 0;font-size:clamp(14px,.3vw + 13px,17px);line-height:1.55;color:#3E4C6B;word-break:keep-all}
.bs-town-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(12px,1.6vw,18px)}
.bs-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 clamp(18px,2vw,28px);border-radius:14px;font-size:16px;font-weight:900;text-decoration:none;white-space:nowrap}
.bs-btn-1{background:linear-gradient(180deg,#FFD84D,#F9B91B);color:#1B2A5B;box-shadow:0 4px 0 #E09A00}
.bs-btn-2{background:#fff;color:#1B2A5B;border:2px solid rgba(27,42,91,.12);min-height:44px}
.bs-btn:focus-visible{outline:3px solid #2F6BFF;outline-offset:3px}
.bs-town-mini{display:flex;justify-content:center;gap:16px;margin-top:10px;font-size:13px}
.bs-town-mini a{color:#1B2A5B;text-decoration:underline;text-underline-offset:3px}
.bs-town-head{grid-area:head;text-align:center;margin-bottom:clamp(6px,1.2vw,12px)}
.bs-town-h2{margin:0;font-size:clamp(18px,.9vw + 12px,26px);line-height:1.25;color:#1B2A5B;font-weight:900;font-family:inherit;word-break:keep-all}
.bs-town-desc{margin:4px 0 0;font-size:clamp(13px,.2vw + 12px,15px);color:#3E4C6B;word-break:keep-all}
/* 모바일·태블릿: 마스코트 | 마을 한 줄, 아이콘은 그 아래 */
.bs-town-scene,.bs-town-scene .home-village{display:contents}
.bs-town-mascot{grid-area:mascot;margin:0;align-self:end;position:relative}
.bs-town-mascot img{display:block;width:100%;height:auto;max-width:200px;margin:0 auto;position:relative;z-index:1}
.bs-town-mascot::after{content:"";position:absolute;left:12%;right:12%;bottom:-4%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(120,90,200,.35),rgba(120,90,200,0))}
.bs-town .home-village-map{grid-area:map;max-width:none}
.bs-town .home-village-spots{grid-area:spots}
@media(max-width:1199px){
  .bs-town .home-village-spot{position:static !important;transform:none !important}
  .bs-town .home-village-spots{display:flex;flex-wrap:wrap;justify-content:center;row-gap:clamp(10px,2vw,16px);max-width:720px;width:100%;margin:clamp(8px,2vw,14px) auto 0;padding:0}
  .bs-town .home-village-spots li{flex:0 0 25%;max-width:25%;display:flex;justify-content:center;min-width:0}
}
@media(min-width:720px) and (max-width:1199px){
  .bs-town .home-village-spots li{flex-basis:14.28%;max-width:14.28%}
}
/* 데스크톱(≥1200): 왼쪽 = 문구 + 마스코트, 오른쪽 = 마을(아이콘은 이미지 위) */
@media(min-width:1200px){
  .bs-town-inner{grid-template-columns:minmax(0,34fr) minmax(0,66fr);grid-template-areas:"copy scene" "mascot scene";row-gap:8px;align-items:end}
  .bs-town-copy{text-align:left;align-self:end;margin-bottom:0}
  .bs-town-btns,.bs-town-mini{justify-content:flex-start}
  .bs-town-mascot img{max-width:190px}
  .bs-town-lead{font-size:clamp(28px,1vw + 18px,38px)}
  .bs-town-copy{padding-top:clamp(8px,2vw,28px)}
  .bs-town-scene{display:block;grid-area:scene;align-self:end}
  .bs-town-scene .home-village{display:block;position:relative}
  .bs-town-head{text-align:center}
}
.bs-town-more{width:min(1240px,calc(100% - 32px));margin:clamp(12px,1.6vw,18px) auto 0}
.bs-town-more details{margin-top:12px}
@media(prefers-reduced-motion:reduce){.bs-btn{transition:none}}
/* 확대·축소 시 콘텐츠보다 창이 길어도 아래가 어둡게 비지 않도록 (홈 한정) */
html:has(.bs-town),body:has(.bs-town){background:#f4fbff}

/* 문구 축소(2026-09-24): 큰 문구를 h1로 승격 — 제목 태그 1개 유지 */
h1.bs-town-lead{font-family:inherit;color:#1B2A5B}
.bs-town-btns{margin-top:clamp(14px,2vw,22px)}

/* 모바일 압축(2026-09-24): 버튼 한 줄, 보조 설명 숨김 → 마을이 첫 화면에 보이도록 */
@media(max-width:599px){
  .bs-town{padding-top:14px}
  .bs-town-lead{font-size:clamp(22px,6.4vw,28px)}
  .bs-town-btns{flex-wrap:nowrap;gap:8px;margin-top:12px}
  .bs-town-btns .bs-btn{flex:1 1 0;min-width:0;min-height:46px;padding:0 10px;font-size:clamp(14px,3.9vw,16px);border-radius:12px}
  .bs-town-btns .bs-btn-2{min-height:46px}
  .bs-town-mini{margin-top:8px;font-size:12.5px}
  .bs-town-copy{margin-bottom:12px}
  .bs-town-h2{font-size:clamp(17px,4.8vw,20px)}
  .bs-town-desc{display:none}
}

/* 모바일 2차(2026-09-24): 아이콘 작게 5열, 블로그 배너 글자·수정구 축소 */
@media(max-width:599px){
  .bs-town .home-village-spots li{flex:0 0 20%;max-width:20%}
  .bs-town .home-village-spot img{width:40px;height:40px}
  .bs-town .home-village-spot span{font-size:11.5px;padding:2px 6px;white-space:nowrap}
  .bs-town .home-village-spots{row-gap:10px}
  .home-blog-v4 .home-blog-banner{min-height:140px;padding:18px 18px}
  .home-blog-v4 .home-blog-banner .sec-h2{font-size:clamp(20px,5.6vw,24px);margin:4px 0}
  .home-blog-v4 .home-blog-banner .sec-desc{font-size:13px;line-height:1.5}
  .home-blog-v4 .home-blog-banner-copy{max-width:74%}
  .home-blog-v4 .home-blog-banner::after{right:4%;font-size:54px;opacity:.9}
}

/* 모바일 라벨 겹침 방지(2026-09-24): 폰 글자 크기 설정이 커도 칸을 넘지 않게 줄바꿈 허용 */
@media(max-width:599px){
  .bs-town .home-village-spots li{padding:0 2px;box-sizing:border-box}
  .bs-town .home-village-spot{max-width:100%;min-width:0}
  .bs-town .home-village-spot span{white-space:normal;word-break:keep-all;text-align:center;line-height:1.2;max-width:100%;box-sizing:border-box;letter-spacing:-.02em;padding:2px 5px}
}