/* ===== 지점 하위 사이트 공용 스타일 (branch.css) =====
   style.css 위에 얹어 사용. 지점 폴더(/ansan/ 등)에서 ../branch.css 로 참조. */

/* 지점 배지: 헤더 브랜드 옆 지점 라벨 */
.logo .br-tag{display:inline-block; margin-left:8px; font-size:12px; font-weight:800; color:#fff;
  background:var(--red2); padding:3px 10px; border-radius:20px; vertical-align:middle}

/* "전체 지점으로" 복귀 링크 (서브히어로 위 얇은 바) */
.br-back{position:fixed; top:var(--header-h); left:0; right:0; z-index:80; background:#faf3f4;
  border-bottom:1px solid var(--line); font-size:13px; font-weight:600; color:#8a2632}
.br-back .wrap{display:flex; align-items:center; gap:8px; padding-top:9px; padding-bottom:9px}
.br-back a{color:var(--red2); font-weight:700}
.br-back .sep{color:#ccc}

/* 서브히어로 아래 여백 보정(br-back 높이만큼) */
.subhero.has-back{padding-top:calc(var(--header-h) + 74px + 40px)}

/* ===== 지점 퀵정보 3칸 (전화 / 주소 / 시간) ===== */
.binfo{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1000px; margin:0 auto}
.binfo .card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px 26px;
  text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.05)}
.binfo .ico{font-size:30px; margin-bottom:12px}
.binfo h4{font-size:15px; font-weight:700; color:var(--gray); margin-bottom:10px; letter-spacing:.02em}
.binfo .big{font-size:22px; font-weight:900; color:var(--ink); line-height:1.35}
.binfo .sub{font-size:14px; color:#666; margin-top:6px; line-height:1.6}
.binfo a.tel{color:var(--red2)}

/* ===== 지점 강점 카드 (reuse 가능하지만 라벨 강조형) ===== */
.bstrength{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px}
.bstrength .s{background:#fff; border:1px solid var(--line); border-radius:16px; padding:34px 26px;
  box-shadow:0 10px 30px rgba(0,0,0,.05)}
.bstrength .s .n{display:inline-block; font-size:14px; font-weight:800; color:var(--red2);
  border:1.5px solid var(--red2); border-radius:30px; padding:4px 14px; margin-bottom:16px}
.bstrength .s h4{font-size:20px; font-weight:800; margin-bottom:10px}
.bstrength .s p{font-size:15px; color:#666; line-height:1.7}

/* ===== 시설 갤러리 ===== */
.bgal{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.bgal figure{border-radius:14px; overflow:hidden; box-shadow:0 12px 34px rgba(0,0,0,.08); background:#eee; position:relative}
.bgal img{aspect-ratio:4/3; object-fit:cover; width:100%}
.bgal figcaption{padding:14px 18px; font-size:14px; font-weight:600; color:#444; background:#fff}
.bgal .ph{position:absolute; top:10px; left:10px; background:rgba(185,9,32,.9); color:#fff;
  font-size:11px; font-weight:700; padding:4px 9px; border-radius:6px; z-index:2}

/* ===== 오시는 길 ===== */
.bmap{display:grid; grid-template-columns:1.4fr 1fr; gap:28px; align-items:stretch; max-width:1060px; margin:0 auto}
.bmap .mapbox{border-radius:16px; overflow:hidden; min-height:360px; background:#e9e9e9; border:1px solid var(--line)}
.bmap .mapbox iframe{width:100%; height:100%; min-height:360px; border:0; display:block}
.bmap .mapbox .ph{width:100%; height:100%; min-height:360px; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px; color:#999; font-weight:600; text-align:center; padding:20px}
.bmap .info{background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px; box-shadow:0 10px 30px rgba(0,0,0,.05)}
.bmap .info .row{padding:16px 0; border-bottom:1px solid var(--line)}
.bmap .info .row:last-child{border-bottom:0}
.bmap .info .k{font-size:13px; font-weight:700; color:var(--gray); margin-bottom:5px}
.bmap .info .v{font-size:16px; font-weight:600; color:var(--ink); line-height:1.55}
.bmap .info .v a{color:var(--red2); font-weight:800}

/* ===== 다하고 요약(브랜드 공통 축약) ===== */
.bdahago{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:1000px; margin:0 auto}
.bdahago .st{background:#1c1c1c; border-radius:14px; padding:26px 20px; text-align:center}
.bdahago .st .tag{display:inline-block; border:1.4px solid var(--red2); color:#ff5560; font-weight:800;
  font-size:14px; padding:5px 16px; border-radius:30px; margin-bottom:12px}
.bdahago .st p{font-size:14px; color:#c4c4c4; line-height:1.6}

/* ===== 지점 선택 그리드 (지점 하단 + 메인 허브 공용) ===== */
.bpick{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.bpick a{display:block; background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 24px; color:var(--ink);
  box-shadow:0 8px 24px rgba(0,0,0,.06); transition:transform .15s, box-shadow .15s, border-color .15s}
.bpick a:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(185,9,32,.14); border-color:var(--red2)}
.bpick a.cur{border-color:var(--red2); background:#fff5f5}
.bpick .nm{font-size:20px; font-weight:900; margin-bottom:8px; color:var(--ink)}
.bpick .nm .badge-cur{font-size:11px; font-weight:800; color:#fff; background:var(--red2); border-radius:20px; padding:2px 9px; margin-left:7px; vertical-align:middle}
.bpick .ad{font-size:14px; color:#777; line-height:1.6; margin-bottom:12px}
.bpick .tl{font-size:15px; font-weight:800; color:var(--red2)}
.bpick .soon{color:#aaa; font-weight:700}
.bpick a.soon-card{opacity:.7; pointer-events:none}

/* 자기주도 관리 3열 (기본 4열 bdahago의 변형) */
.bdahago.three{grid-template-columns:repeat(3,1fr)}

/* ===== 이 지점의 두 공간 (독학재수학원 + 스터디카페) ===== */
.btwo{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1000px; margin:0 auto}
.btwo .hall{background:#fff; border:1px solid var(--line); border-top:5px solid var(--red2); border-radius:16px;
  padding:34px 30px; box-shadow:0 12px 34px rgba(0,0,0,.06)}
.btwo .hall.cafe{border-top-color:#2e7d5b}
.btwo .hall .hlabel{display:inline-block; font-size:13px; font-weight:800; color:var(--red2);
  background:#fef0f1; padding:6px 14px; border-radius:30px; margin-bottom:16px}
.btwo .hall.cafe .hlabel{color:#2e7d5b; background:#eaf6f0}
.btwo .hall h3{font-size:24px; font-weight:900; margin-bottom:10px; color:var(--ink)}
.btwo .hall p{font-size:15px; color:#666; line-height:1.7}

/* ===== 반 시스템 · 원비 표 ===== */
.feetbl{max-width:720px; margin:36px auto 0}
.feetbl table{width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.07); font-size:16px}
.feetbl th,.feetbl td{padding:16px 18px; text-align:center; border-bottom:1px solid var(--line)}
.feetbl thead th{background:var(--dark); color:#fff; font-weight:700; font-size:15px}
.feetbl tbody th{background:#fbf3f4; color:var(--ink); font-weight:800; text-align:left}
.feetbl tbody td{font-weight:700; color:var(--red2)}
.feetbl tbody tr:last-child th,.feetbl tbody tr:last-child td{border-bottom:0}
.feetbl .fee-note{margin-top:16px; font-size:13px; color:#888; line-height:1.6; text-align:center}

/* ===== 클래스업 패밀리 (함께하는 자산) ===== */
.cufam{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.cufam .cu{display:block; background:#fff; border:1px solid var(--line); border-radius:18px; padding:32px 28px;
  box-shadow:0 10px 30px rgba(0,0,0,.05); transition:transform .15s, box-shadow .15s, border-color .15s}
.cufam .cu:hover{transform:translateY(-4px); box-shadow:0 18px 44px rgba(108,96,244,.16); border-color:#6c60f4}
.cufam .wm{display:inline-flex; align-items:center; gap:3px; font-size:20px; font-weight:800; letter-spacing:-.02em;
  color:#6c60f4; background:#efedff; padding:8px 16px; border-radius:30px; margin-bottom:18px}
.cufam .wm .dot{width:6px; height:6px; border-radius:50%; background:#22c1a8; display:inline-block; margin-left:1px}
.cufam .wm b{font-weight:800; color:#5546e0}
.cufam .cu h4{font-size:20px; font-weight:800; margin-bottom:9px; color:var(--ink)}
.cufam .cu p{font-size:14.5px; color:#666; line-height:1.7}
.cufam .cu .go{display:inline-block; margin-top:14px; font-size:13px; font-weight:700; color:#6c60f4}

@media (max-width:900px){
  .cufam{grid-template-columns:1fr; gap:14px}
  .btwo{grid-template-columns:1fr; gap:14px}
  .binfo,.bstrength,.bgal,.bpick,.bdahago,.bdahago.three{grid-template-columns:1fr; gap:14px}
  .feetbl{overflow-x:auto}
  .feetbl table{font-size:14px}
  .feetbl th,.feetbl td{padding:12px 10px}
  .bmap{grid-template-columns:1fr}
  .br-back{font-size:12px}
  .subhero.has-back{padding-top:calc(var(--header-h) + 54px + 36px)}
  /* STEP 태그가 좁은 폭에서 단어 중간에 잘리던 문제 */
  .bdahago .st{padding:22px 18px}
  .bdahago .st .tag{white-space:nowrap}
  .bmap .mapbox,.bmap .mapbox .ph,.bmap .mapbox iframe{min-height:280px}
}