/* ============================================================
   꼬마숲(littleforest) — 지점(원) 템플릿 전용 CSS
   ------------------------------------------------------------
   · style.css(홈페이지/공용 base) 다음에 로드됨 (branch 페이지 한정)
   · 색은 basic.php 가 body.lf-branchpage에 주입한 --accent* / --g* 변수 사용
   · 공용 base 규칙과 충돌하는 부분을 여기서 명시적으로 재정의(오버라이드)
   ============================================================ */

/* ===== 헤더 높이 여유 (로고 잘림 방지) ===== */
body.lf-branchpage .lf-header__inner{min-height:84px;overflow:visible}

/* ===== 이름 워드마크 로고 (로고 미업로드 시 이름 자동 렌더) ===== */
.lf-wordmark{flex-shrink:0;display:flex;align-items:center}
.lf-wordmark__img{max-height:56px;width:auto}
.lf-wordmark__leaf{
  position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  white-space:nowrap;padding:10px 24px;border-radius:16px;line-height:1.12;
  background:linear-gradient(140deg,var(--accent),var(--accent-deep));color:var(--accent-ink);box-shadow:var(--sh-sm)}
.lf-wordmark__leaf b{font-family:var(--font-body);font-weight:800;font-size:19px;letter-spacing:.2px;white-space:nowrap}
.lf-wordmark__leaf small{font-size:10.5px;opacity:.92;letter-spacing:3px}
.lf-wordmark__leaf::before,.lf-wordmark__leaf::after{pointer-events:none}
/* ===== 유형별 로고(워드마크) 스타일 — 다양하게 ===== */
.lf-wm--1{border-radius:999px}                                      /* 둥근 pill */
.lf-wm--2{border-radius:30px 30px 30px 8px}                         /* 잎사귀 + 얇은 테 */
.lf-wm--2::before{content:"";position:absolute;inset:4px;border:2px solid rgba(255,255,255,.45);border-radius:24px 24px 24px 5px}
.lf-wm--3{background:#fff;color:var(--accent-deep);border:2px solid var(--accent);border-radius:16px}  /* 아웃라인(고스트) */
.lf-wm--4{border-radius:14px}                                       /* 점선 사각 */
.lf-wm--4::before{content:"";position:absolute;inset:4px;border:2px dashed rgba(255,255,255,.6);border-radius:9px}
.lf-wm--5{border-radius:18px 18px 18px 6px}                         /* 점선 기본형(왼쪽아래 각지게) */
.lf-wm--5::before{content:"";position:absolute;inset:4px;border:2px dashed rgba(255,255,255,.6);border-radius:13px 13px 13px 3px}
.lf-wm--6{border-radius:999px}                                      /* 이중 링 pill */
.lf-wm--6::before{content:"";position:absolute;inset:3px;border:1.5px solid rgba(255,255,255,.42);border-radius:999px}
.lf-wm--7{border-radius:22px}                                       /* 도트 테 */
.lf-wm--7::before{content:"";position:absolute;inset:4px;border:2px dotted rgba(255,255,255,.62);border-radius:17px}

/* ===== 메뉴 앞 아이콘 칩 + 간격 ===== */
body.lf-branchpage .lf-gnb>ul{gap:4px}
body.lf-branchpage .lf-gnb>ul>li>a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px}
.lf-mi{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-size:15px;line-height:1;
  background:var(--accent-soft);flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
body.lf-branchpage .lf-gnb>ul>li:hover>a .lf-mi{background:rgba(255,255,255,.28);box-shadow:none}

/* ===== 학부모 로그인 환영 밴드 ===== */
.lf-welcome{background:linear-gradient(100deg,var(--accent-soft),transparent 82%);border-bottom:1px solid var(--line)}
.lf-welcome__in{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:11px 0}
.lf-welcome__msg{display:flex;align-items:center;gap:10px;margin:0;font-size:15px;color:var(--ink)}
.lf-welcome__msg b{color:var(--accent-deep);font-weight:800}
.lf-welcome__av{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:17px;box-shadow:var(--sh-sm)}
.lf-welcome__links{display:flex;gap:8px;flex-wrap:wrap}
.lf-welcome__links a{font-size:13px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:999px;transition:.15s}
.lf-welcome__links a:hover{border-color:var(--accent);color:var(--accent-deep)}
.lf-welcome__out{color:var(--gray)!important}

/* ============================================================
   지점 홈 (방향 B · 밝은 카드형)
   ============================================================ */
.bb-banner{position:relative;max-width:1180px;margin:14px auto 0;padding:0 22px}
.bb-banner__s{display:none}.bb-banner__s.on{display:block}
.bb-banner__s img{width:100%;display:block;border-radius:18px;box-shadow:var(--shadow-sm)}
.bb-banner__dots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:6px;justify-content:center}
.bb-banner__dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.7);cursor:pointer}.bb-banner__dots button.on{background:#fff;width:20px;border-radius:5px}

/* HERO */
.bb-hero{background:linear-gradient(120deg,var(--accent-tint),transparent 72%)}
.bb-hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center;padding:40px 22px 44px}
.bb-eyebrow{display:inline-block;color:var(--accent-deep);font-weight:800;font-size:13px;background:#fff;padding:6px 14px;border-radius:999px;box-shadow:var(--sh-sm)}
.bb-hero__text h1{font-family:var(--font-body);font-size:clamp(26px,4vw,38px);line-height:1.22;margin:14px 0 10px;color:var(--forest-900);font-weight:800;letter-spacing:-.02em}
.bb-hero__text h1 b{color:var(--accent-deep)}
.bb-hero__text p{margin:0 0 20px;color:var(--gray);font-size:15.5px;max-width:44ch}
.bb-hero__btns{display:flex;gap:10px;flex-wrap:wrap}
.bb-btn{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:15px;padding:12px 22px;border-radius:14px;text-decoration:none;transition:transform .08s,filter .15s}
.bb-btn:active{transform:translateY(1px)}
.bb-btn--go{background:var(--accent);color:var(--accent-ink)}.bb-btn--go:hover{filter:brightness(1.05)}
.bb-btn--ln{background:#fff;color:var(--forest-900);border:1px solid var(--line)}
.bb-btn--wt{background:var(--sun);color:#7a4a12}
.bb-hero__art{position:relative;aspect-ratio:5/4;border-radius:22px;background:linear-gradient(160deg,#cdeefb,#eef7ff);box-shadow:var(--sh-sm);display:grid;place-items:center;overflow:hidden}
.bb-house{font-size:74px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.12))}
.bb-cloud{position:absolute;font-size:30px;opacity:.9}.bb-cloud.c1{top:22px;left:16%}.bb-cloud.c2{top:60px;right:14%;font-size:24px}
.bb-pin{position:absolute;left:14px;bottom:14px;background:#fff;color:var(--ink);font-size:12px;font-weight:700;padding:7px 13px;border-radius:999px;box-shadow:var(--sh-sm);z-index:2}
/* 유형별 히어로 이미지 */
.bb-hero__art.has-img{background:none}
.bb-hero__img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== 유형별 히어로 애니메이션 ===== */
/* 3·4·5 : 이미지 위 오버레이 (꽃잎·반딧불·낙엽) */
.bb-anim{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.bb-anim span{position:absolute;will-change:transform,opacity}
.a-fall{top:-10%;font-size:20px;animation-name:aFall;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes aFall{0%{transform:translateY(-10%) translateX(0) rotate(0);opacity:0}
  10%{opacity:1}50%{transform:translateY(180px) translateX(24px) rotate(180deg)}
  100%{transform:translateY(380px) translateX(-10px) rotate(360deg);opacity:.15}}
.a-fire{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle,#fff6b0,#ffcf3d);
  box-shadow:0 0 9px 2px rgba(255,214,90,.85);animation:aTwinkle 3s ease-in-out infinite}
@keyframes aTwinkle{0%,100%{opacity:.12;transform:scale(.6)}50%{opacity:1;transform:scale(1.15)}}

/* 1·2·6·7 : 배경(이미지) 자체를 은은하게 — 날아다니는 물체 없음 */
.bb-hero__img{transform-origin:center}
.fx-1 .bb-hero__img{animation:fxBreathe 16s ease-in-out infinite alternate}
@keyframes fxBreathe{from{transform:scale(1.02)}to{transform:scale(1.09)}}
/* 1: 햇살(sunshine) 레이가 천천히 퍼짐 */
.fx-1::after{content:"";position:absolute;inset:-60%;pointer-events:none;z-index:1;
  background:repeating-conic-gradient(from 0deg at 70% 8%, rgba(255,247,200,.17) 0deg 3.5deg, transparent 3.5deg 20deg);
  transform-origin:70% 8%;mix-blend-mode:screen;animation:fxRays 55s linear infinite}
@keyframes fxRays{to{transform:rotate(1turn)}}
.fx-2 .bb-hero__img{animation:fxPan 24s ease-in-out infinite alternate}
@keyframes fxPan{from{transform:scale(1.07) translateX(2%)}to{transform:scale(1.07) translateX(-2%)}}
/* 2 : 물빛 반짝임 — 쿨한 빛이 수면을 스침 */
.fx-2::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,transparent 40%,rgba(205,238,255,.55) 50%,transparent 60%);
  mix-blend-mode:screen;animation:fxSweep2 5s ease-in-out infinite}
@keyframes fxSweep2{0%,100%{transform:translateX(-55%);opacity:0}50%{transform:translateX(55%);opacity:.9}}
/* 6 : 은은한 줌 + 따뜻한 햇살 스윕 */
.fx-6 .bb-hero__img{animation:fxBreathe 18s ease-in-out infinite alternate}
.fx-6::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 34%,rgba(255,238,196,.5) 50%,transparent 66%);
  mix-blend-mode:screen;animation:fxSweep 8s ease-in-out infinite}
@keyframes fxSweep{0%,100%{transform:translateX(-45%);opacity:0}50%{transform:translateX(45%);opacity:1}}
/* 7 : 아침 안개 + 이슬방울 반짝임 */
.fx-7::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(0deg,rgba(255,255,255,.6),transparent 58%);animation:fxMist 11s ease-in-out infinite}
@keyframes fxMist{0%,100%{opacity:.3}50%{opacity:.82}}
.a-drop{width:11px;height:14px;border-radius:50% 50% 50% 50%/62% 62% 42% 42%;
  background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.95),rgba(200,240,235,.4) 58%,rgba(175,222,216,.18));
  box-shadow:0 1px 2px rgba(30,60,55,.18),inset 0 -2px 3px rgba(255,255,255,.55);
  animation:aDrop 4s ease-in-out infinite}
@keyframes aDrop{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.06)}}

@media(prefers-reduced-motion:reduce){
  .bb-anim span,.fx-1 .bb-hero__img,.fx-2 .bb-hero__img,.fx-6 .bb-hero__img{animation:none!important}
  .fx-1::after,.fx-2::after,.fx-6::after,.fx-7::after{animation:none!important;opacity:.3}
  .a-fire{opacity:.7}
}

/* ===== 타이틀 스타일 3종 (유형별) ===== */
/* A: 기본(2줄 굵게) — .bb-hero__text h1 기본 규칙 사용 */
/* B: 이름에 밑줄 하이라이트 */
.bb-hero__text.ts-b h1{letter-spacing:-.03em}
.bb-hero__text.ts-b h1 b{background:linear-gradient(transparent 62%,var(--accent-soft) 62%);padding:0 3px}
/* C: 이름을 강조색 뱃지로 + eyebrow 채움 */
.bb-hero__text.ts-c .bb-eyebrow{background:var(--accent);color:var(--accent-ink)}
.bb-hero__text.ts-c h1{line-height:1.35}
.bb-hero__text.ts-c h1 b{color:var(--accent-ink);background:var(--accent);padding:2px 14px;border-radius:12px;box-shadow:var(--sh-sm);-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* CHIPS */
.bb-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:-18px;position:relative;z-index:2}
.bb-chip{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 10px;text-decoration:none;color:var(--ink);text-align:center;box-shadow:var(--sh-sm);font-weight:700;font-size:14px;transition:transform .12s,border-color .15s}
.bb-chip:hover{transform:translateY(-4px);border-color:var(--accent)}
.bb-chip span{display:block;font-size:27px;margin-bottom:7px}

/* BODY */
.bb-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;padding:34px 22px 0}
.bb-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.bb-hd h2{font-family:var(--font-body);font-size:22px;margin:0;color:var(--forest-900);font-weight:800;letter-spacing:-.01em}
.bb-hd a{color:var(--accent-deep);text-decoration:none;font-weight:700;font-size:13.5px}
.bb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bb-photo{text-decoration:none;color:var(--ink)}
.bb-photo__img{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--accent-soft);border:1px solid var(--line)}
.bb-photo__img img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.bb-photo:hover .bb-photo__img img{transform:scale(1.05)}
.bb-photo__emo{font-size:34px}
.bb-photo__cap{display:block;margin-top:9px;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-empty{background:#fff;border:2px dashed var(--forest-300);border-radius:16px;padding:50px;text-align:center;color:var(--gray)}

.bb-side{display:flex;flex-direction:column;gap:18px}
.bb-panel{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.bb-panel__hd{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;background:var(--accent-soft)}
.bb-panel__hd h3{font-family:var(--font-body);font-size:16px;margin:0;color:var(--forest-900);font-weight:800}
.bb-panel__hd a{color:var(--accent-deep);text-decoration:none;font-size:12.5px;font-weight:700}
.bb-nlist{list-style:none;margin:0;padding:6px 8px 10px}
.bb-nlist li a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink)}
.bb-nlist li a:hover{background:var(--accent-soft)}
.bb-nlist .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.bb-nlist .d{color:var(--gray);font-size:12.5px;flex:none;font-variant-numeric:tabular-nums}
.bb-nlist .none{padding:22px;text-align:center;color:var(--gray)}
.bb-visit__body{padding:16px 18px 18px}
.bb-visit__body p{display:flex;gap:9px;align-items:flex-start;color:var(--ink);font-size:14px;line-height:1.55;margin:0 0 10px}
.bb-visit__body p span{flex:none}
.bb-visit__body a{color:var(--accent-deep);text-decoration:none;font-weight:600}
.bb-visit__btns{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.bb-visit__btns .bb-btn{font-size:13.5px;padding:10px 16px}

@media(max-width:880px){
  .bb-hero__in,.bb-body{grid-template-columns:minmax(0,1fr)}
  /* 모바일: 히어로 이미지를 화면 가로 꽉 차게(full-bleed) */
  .bb-hero__art{order:-1;margin:-40px -22px 20px;border-radius:0;aspect-ratio:4/3;max-height:none}
  .bb-chips{grid-template-columns:repeat(3,1fr);margin-top:18px}
  .bb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}