@charset "UTF-8";

/* 251216 메인 페이지 리뉴얼 ========== */
/* a.top-line-banner {
  padding: 14px 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  background: #2b3640 url("/_dg/hq/img/main/nb-topbar-bg.png") center center / cover no-repeat;
  text-decoration: none;
}
.top-line-banner:hover,
.top-line-banner:focus {
  text-decoration: none;
} */

/* 상단 전국지점안내 바 — Figma 9237:60870 (메인 노출, 링크 없음) */
.top-line-banner.top-branch-bar {
  justify-content:center;
  padding: 0;
  background: #2b3640 url("/_dg/hq/img/main/nb-topbar-bg.png") center center / cover no-repeat;
}
.top-branch-inner {
  display: flex;
  align-items: center;
  padding: 8px 0;
}
.top-branch-badge {
  margin-right: 4px;
  padding: 6px 10px;
  border-radius: 2px;
  background: rgba(108, 111, 117, 0.62);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.top-branch-list { display: flex; align-items: center; }
.tb-item {
  position: relative;
  padding: 0 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}
/* 지점 링크 — common.css 의 a:link/visited/hover(0,1,1)에 덮이지 않도록 가상클래스까지 지정 */
a.tb-item, a.tb-item:link, a.tb-item:visited, a.tb-item:focus { color: #fff; text-decoration: none; }
a.tb-item:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.tb-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.3);
}

.main-top-area {
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  gap: 26px;
}
.main-banner-area {
  
}
.main-banner-area .main-swiper {
	position: relative;
  width: 745px;
  height: 372px;
  border-radius: 12px;
  overflow: hidden;
	background-color: #f1f1f1;
}
.main-banner-area a {
  display: block;
}
.main-banner-area .swiper-slide img {
  width: 745px;
  height: 372px;
  object-fit: cover;
}

.main-top-title {
	margin: 8px 0;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--On-Color-Black-High-Emphasis, #1A1E27);
	font-size: 22px;
	font-weight: 600;
	line-height: 28px; /* 127.273% */
}

/* 쇼츠 영역 */
.main-shorts-feed {
	display: grid;
	gap:11px;
	grid-template-columns: repeat(2, minmax(0, 1fr));;
	width: 359px;
}
.feed-item {
	width: 100%;
}
.main-shorts-thumb {
	margin-bottom:6px;
	/* aspect-ratio: 9 / 16; */
	border-radius: 12px;
	overflow: hidden;
}
.main-shorts-thumb a{
	display: block
}
.main-shorts-thumb img{
	width:100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 174 / 332
}
.main-top-title-area {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
a.link-green {
	color: var(--mambo-green-100-secondary-a, #1EB99D);
	font-size: 16px;
	font-weight: 700;
}
a.link-green:hover,
a.link-green:focus {
	color: #1EB99D;
	text-decoration: none
}
.main-shorts-feed .badge-box{
	margin-top: 16px;
	gap: 3px;
}
.main-shorts-feed .badge-item {
	font-size: 12px;
	min-width: 80px;
}

.main-title {
  color: var(--On-Color-Black-High-Emphasis, #1a1e27);
  font-size: 26px;
  font-weight: 700;
  line-height: 145%; /* 37.7px */
  letter-spacing: 0.52px;
}
.main-sub-text {
  display: block;
  color: var(--On-Color-Black-Medium-Emphasis, #6c6f75);
  font-size: 16px;
  font-weight: 500;
  line-height: 145%;
  letter-spacing: 0.32px;
}
.menu-category-list {
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-category-list a:hover,
.menu-category-list a:focus {
  text-decoration: none;
  background-color: #d7dae1;
}
.menu-category-list .menu-category-item {
  padding: 24px 0;
  display: flex;
  width: 92px;
  height: 68px;
  padding: 12px 16px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  background-color: #F3F4F6;
  border-radius: 12px;
  transition: background 0.3s;
}
.menu-category-list .menu-category-item .menu-category-img-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
.menu-category-list .menu-category-item .category-list-name {
  margin: 0;
  color: var(--On-Color-Black-High-Emphasis, #1a1e27);
  font-size: 16px;
  font-weight: 600;
  line-height: 125%;
}
.menu-category-rounded-item .category-list-name {
  margin: 0;
  color: var(--On-Color-White-White, #fff);
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: -0.15px;
}

/* 슬라이드 좌우 화살표 (공용)
   — 맘보소식 메인 배너(index.jsp)와 포토 슬라이드(index-shared-bottom.jspf)가 함께 사용.
     부모에 position:relative 필요. 특정 섹션 전용이 아니므로 섹션 정리 시 같이 지우지 말 것. */
.swiper-custom-next,
.swiper-custom-prev {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #ffffff9e;
  border-radius: 999px;
}
.swiper-custom-next::after,
.swiper-custom-prev::after {
  color: #1a1e279e;
  font-size: 19px;
  font-weight: bold;
}
.swiper-custom-prev {
  left: 8px;
}
.swiper-custom-next {
  right: 8px;
}

/* 포토 슬라이드 */
.photo-section {
  margin: 99px auto 136px;
  overflow: hidden;
}
.photo-swiper {
  position: relative;
  margin: 8px auto;
}
.photo-swiper .swiper-slide {
  width: 316px;
  height: 240px;
}
.photo-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  overflow: hidden;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* //251216 메인 페이지 리뉴얼 ========== */

/* 메인 오른쪽 고정 배너 */
.right-fixed-banner {
	position: fixed;
	right: calc((100% - 1130px)/ 2 - 140px - 175px);
	bottom: 45px;
	display: block;
	z-index: 99999;
}

/* =========================================================================
   PC 메인 A/B 전용 스타일 (custom.css 에서 이동)
   · 히어로(.b-hero) / 공통하단(.nb-) / 간편문의 고정바(.pc-qi)
   · 헤더 우측 버튼(.gnb-actions/.gnb-btn-*)은 전역이므로 custom.css 에 유지.
   ========================================================================= */
/* =========================================================================
   PC 메인 B안 — 히어로 (Figma 9237:60904)
   · layout-1130(1130px 중앙정렬) 내부에 있지만 가로 풀폭(full-bleed)으로 표시.
   · 배경: /img/main/b-hero-bg.jpg (1920x600, 크림+골드 웨이브). 1x 스케일.
   ========================================================================= */
.b-hero {
    /* full-bleed: layout-1130 밖으로 빼내 뷰포트 전체 폭 차지 */
    margin-bottom:14px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 120px 20px 92px;
    background: #f4f6e8 url('/_dg/hq/img/main/b-hero-bg.jpg') center center / cover no-repeat;
    text-align: center;
    overflow: hidden;
    height: 620px;
    box-sizing: border-box;
}
.b-hero-inner {
    width: 394px;
    max-width: 100%;
    margin: 0 auto;
}
.b-hero-title {
    margin: 0;
    font-weight: 900;
    font-size: 50px;
    line-height: 1.35;
    letter-spacing: 1px;
    color: #0f1722;
    text-align: center
}
.b-hero-btns {
    display: flex;
    gap: 12px;
    margin-top: 52px;
}
.b-hero-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 17px 30px;
    border-radius: 13px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}
.b-hero-btn.primary { background: #16b176; color: #fff; }
.b-hero-btn.secondary { background: #fff; color: #0f1722; border: 2px solid #d1d2d4; }

/* =========================================================================
   PC 메인 공통 하단 (.nb-) — index-shared-bottom.jspf (A·B 공통)
   · layout-1130(1130px) 내부. 모바일 .nb- 의 PC판(1x 스케일).
   · 공통 프리미티브: .nb-h2 / .nb-lead / .nb-eyebrow
   ========================================================================= */
.nb { background: #fff; }

/* 공통 타이포 프리미티브 */
.nb-h2 {
    margin: 0;
    font-weight: 900;
    font-size: 44px;
    line-height: 1.28;
    letter-spacing: -0.66px;
    color: #0f1722;
}
.nb-lead {
    margin: 0;
    font-weight: 500;
    font-size: 16.5px;
    line-height: 1.58;
    color: #6b7280;
}
.nb-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border-radius: 999px;
    background: #e2f6ee;
    color: #0e9e68;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.4;
}

/* ① 골든서클 / 교육 철학 — Figma 9237:61001 */
.nb-philosophy { padding: 160px 0 40px; }
.nb-philosophy-inner {
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.nb-philosophy-text { display: flex; flex-direction: column; align-items: flex-start; }
.nb-philosophy-text .nb-h2 { margin-top: 18px; }
.nb-philosophy-text .nb-lead { margin-top: 18px; }
.nb-philosophy-circle { flex: 0 0 auto; width: 514px; }
.nb-philosophy-circle img { display: block; width: 514px; height: auto; }

/* ①-2 콜아웃 + 누적 통계 — Figma 9237:61036 */
.nb-callout-stats { padding: 0; }
.nb-cs-inner {
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.nb-callout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 22px 26px;
    border-radius: 18px;
    background: #e2f6ee;
}
.nb-callout-ico {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #16b176;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nb-callout p {
    margin: 0;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.35;
    color: #1a1e27;
    white-space: nowrap;
}
.nb-callout p b { color: #16b176; font-weight: 700; }
.nb-stats {
    display: flex;
    align-items: center;
    padding-top: 16px;
}
.nb-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.nb-stat .num {
    font-weight: 900;
    font-size: 38px;
    line-height: 1.4;
    letter-spacing: -0.57px;
    color: #0f1722;
}
.nb-stat .num.green { color: #16b176; }
.nb-stat .cap {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    color: #6b7280;
}
.nb-stat-div { width: 1px; height: 46px; background: #eef0f2; }
.nb-footnote {
    margin: 0;
    padding-top: 12px;
    font-weight: 500;
    font-size: 12.5px;
    line-height: 1.4;
    color: #9ca3af;
    text-align: center;
}

/* ② 진짜 교육 / 원리 비교 + 실험 — Figma 9237:61060 */
.nb-principle { display: flex; flex-direction: column; align-items: flex-start; padding: 160px 0 80px; }
.nb-principle .nb-h2 { font-size: 32px; line-height: 1.4; }
.nb-principle-title { margin-top: 16px; letter-spacing: -0.384px; }
.nb-principle-lead { margin-top: 14px; max-width: 820px; font-size: 17px; line-height: 1.6; color: #4b5563; }

/* 비교 카드 */
.nb-compare { display: flex; gap: 20px; width: 100%; margin-top: 40px; }
.nb-compare-card { flex: 1; border: 1.2px solid #e1e4e8; border-radius: 20px; background: #fff; }
.nb-compare-card.real { border: 4px solid #16b176; }
.nb-compare-head { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 18px; }
.nb-compare-tag { align-self: flex-start; padding: 6px 13px; border-radius: 8px; font-weight: 700; font-size: 13px; line-height: 1.4; }
.nb-compare-tag.gray { background: #eff1f3; color: #9aa0aa; }
.nb-compare-tag.green { background: #e2f6ee; color: #0e9e68; }
.nb-compare-subtitle { margin: 0; font-weight: 700; font-size: 21px; line-height: 1.4; letter-spacing: -0.084px; color: #0f1722; }
.nb-compare-subtitle.gray { color: #6b7280; }
.nb-compare-list { list-style: none; margin: 0; padding: 0 28px 26px; display: flex; flex-direction: column; gap: 13px; }
.nb-compare-list li { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15.5px; line-height: 1.4; color: #2a3441; }
.nb-compare-list.gray li { color: #9ca3af; }
.nb-compare-list .mk { font-weight: 900; font-size: 15px; color: #16b176; }
.nb-compare-list.gray .mk { color: #9aa0aa; }

/* 데이터 실험 표 */
.nb-data-title { margin-top: 120px; font-size: 32px; line-height: 1.4; letter-spacing: -0.256px; }
.nb-data-lead { margin-top: 12px; max-width: 820px; font-size: 16px; line-height: 1.52; color: #6b7280; }
.nb-exp { width: 100%; margin-top: 28px; border: 1px solid #e1e4e8; border-radius: 20px; overflow: hidden; }
.nb-exp-head { padding: 16px; background: #0f1722; color: #fff; font-weight: 700; font-size: 22px; line-height: 1.4; text-align: center; }
.nb-exp-row { display: flex; align-items: stretch; }
.nb-exp-row + .nb-exp-row { border-top: 1px solid #eef0f2; }
.nb-exp-th { flex: 0 0 230px; display: flex; align-items: center; justify-content: center; padding: 16px; background: #a3a5aa; color: #fff; font-weight: 700; font-size: 16px; line-height: 1.38; text-align: center; }
.nb-exp-td { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 16px; font-weight: 500; font-size: 16px; line-height: 1.38; color: #4b5563; text-align: center; }
.nb-exp-td.shade { background: #f7f8fa; }
.nb-exp-td.green { font-weight: 700; color: #0e9e68; }
.nb-exp-td b { font-weight: 700; font-size: 19px; color: #0f1722; }
.nb-exp-td b.green { font-weight: 900; color: #0e9e68; }
.nb-exp-td span { font-weight: 500; font-size: 16px; color: #9ca3af; }
.nb-exp-td span.green { font-weight: 700; color: #16b176; }
.nb-exp-cake { display: flex; align-items: center; justify-content: center; width: 150px; height: 72px; border: 2px dashed #cbd2da; border-radius: 10px; background: #edeff2; }
.nb-exp-cake img { display: block; width: 40px; height: 40px; }

/* ②-2 인용 밴드 (풀폭) — Figma 9237:61161 */
.nb-quote-band {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 80px 20px;
    background: #f5f6f8;
}
.nb-quote-band p {
    margin: 0;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.4;
    color: #0a7e54;
    text-align: center;
}

/* ③ 목표별 Tracks — Figma 9237:61163 */
.nb-tracks { display: flex; flex-direction: column; align-items: flex-start; padding: 160px 0 9px; }
.nb-tracks-title { font-size: 32px; line-height: 1.4; letter-spacing: -0.32px; }
.nb-tracks-lead { margin-top: 12px; margin-bottom: 32px; max-width: 760px; font-size: 16px; line-height: 1.4; color: #6b7280; }
.nb-tracks-list { display: flex; gap: 20px; width: 100%; }
.nb-track-card { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px; border-radius: 20px; background: #f5f6f8; text-decoration: none; transition: background .15s ease; }
.nb-track-card:hover { background: #eef0f3; }
.nb-track-ico { width: 56px; height: 56px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; }
.nb-track-ico img { display: block; width: 36px; height: 36px; }
.nb-track-ico.teen { background: #e2f6ee; }
.nb-track-ico.adult { background: #fdf2d6; }
.nb-track-ico.startup { background: #e8f1fe; }
.nb-track-name { margin: 0; font-weight: 700; font-size: 20px; line-height: 1.4; letter-spacing: -0.08px; color: #0f1722; }
.nb-track-desc { margin: 0; font-weight: 500; font-size: 14.5px; line-height: 1.58; color: #4b5563; }
.nb-track-more { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13.5px; line-height: 1.4; color: #0e9e68; }

/* ④ Courses / 커리큘럼 — Figma 9237:61193 */
.nb-eyebrow.yellow { background: #fdf2d6; color: #c98a00; }
.nb-courses { display: flex; flex-direction: column; align-items: flex-start; padding: 120px 0 0; }
.nb-courses-title { margin: 16px 0 32px; font-size: 32px; line-height: 1.4; letter-spacing: -0.32px; }
.nb-courses-grid { display: flex; flex-wrap: wrap; gap: 16px; width: 100%; }
.nb-course-card { flex: 1 1 calc(50% - 8px); min-width: 0; box-sizing: border-box; display: flex; align-items: center; gap: 18px; height: 100px; padding: 24px; border: 1px solid #eef0f2; border-radius: 18px; background: #fff; text-decoration: none; transition: border-color .15s ease; }
.nb-course-card:hover { border-color: #d1d5db; text-decoration: none;}
.nb-course-ico { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; }
.nb-course-ico img { display: block; width: 30px; height: 30px; }
.nb-course-ico.bake { background: #fdf2d6; }
.nb-course-ico.barista { background: #e8f1fe; }
.nb-course-ico.cook { background: #fbe9ef; }
.nb-course-ico.gb { background: #e2f6ee; }
.nb-course-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.nb-course-top { display: flex; align-items: center; gap: 9px; }
.nb-course-name { font-weight: 700; font-size: 19px; line-height: 1.4; letter-spacing: -0.057px; color: #0f1722; }
.nb-course-badge { padding: 5px 10px; border-radius: 7px; background: #f1f3f5; font-weight: 700; font-size: 12px; line-height: 1.4; }
.nb-course-badge.bake { color: #c98a00; }
.nb-course-badge.barista { color: #3182f6; }
.nb-course-badge.cook { color: #f14654; }
.nb-course-badge.gb { color: #0e9e68; }
.nb-course-desc { margin: 0; font-weight: 500; font-size: 14px; line-height: 1.5; color: #6b7280; white-space: nowrap; overflow: hidden; }
.nb-course-arr { flex: 0 0 auto; margin-left: auto; color: #e1e4e8; font-size: 22px; line-height: 1; }

/* ⑤ 강사진 / 누가 가르칠까요? — Figma 9237:61246 */
.nb-team { display: flex; flex-direction: column; align-items: flex-start; padding: 120px 0; }
.nb-team-title { margin-bottom: 32px; font-size: 32px; line-height: 1.4; letter-spacing: -0.32px; }
.nb-team-row { display: flex; gap: 64px; align-items: center; width: 100%; }
.nb-team-left { flex: 0 0 460px; width: 460px; display: flex; flex-direction: column; gap: 2px; }
.nb-team-photo { display: block; width: 100%; height: auto; }
.nb-team-cap { margin: 0; font-weight: 600; font-size: 22px; line-height: 1.65; letter-spacing: 0.055px; color: rgba(53,57,65,0.62); }
.nb-team-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* 디렉터 카드 */
.nb-director { display: flex; flex-direction: column; gap: 24px; padding: 16px; border: 1px solid #eef0f2; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 1px 3px 1px rgba(0,0,0,.07); }
.nb-director-top { display: flex; gap: 24px; align-items: flex-start; }
.nb-director-photo { flex: 0 0 121px; width: 121px; height: 160px; border-radius: 12px; overflow: hidden; }
.nb-director-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nb-director-info { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.nb-director-tag { padding: 7px 13px; border-radius: 999px; background: #e4f7ef; color: #0e9e68; font-weight: 700; font-size: 11px; line-height: 1.4; }
.nb-director-name { margin: 0; font-weight: 900; font-size: 22px; line-height: 1.4; letter-spacing: -0.11px; color: #0f1722; }
.nb-director-desc { margin: 0; font-weight: 500; font-size: 15px; line-height: 1.54; color: #4b5563; }
.nb-director-link:link {position:relative; display: inline-flex; align-items: center; gap: 6px; padding-left: 4px; font-weight: 700; font-size: 16px; line-height: 1.4; color: #0e9e68; }
.nb-director-link:after {content:''; position: absolute;left:4px; bottom:0; width: 150px; height:2px; background: #0e9e68;}
.nb-director-link:hover,
.nb-director-link:visited {color: #0e9e68; text-decoration: none;}

/* 성과 바 */
.nb-ach-list { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.nb-ach { display: flex; align-items: center; gap: 12px; height: 64px; padding: 16px 32px; border-radius: 16px; background: #f0f2f4; box-sizing: border-box; }
.nb-ach-ico { flex: 0 0 24px; width: 24px; height: 24px; object-fit: contain; }
.nb-ach p { margin: 0; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 22px; line-height: 1.35; letter-spacing: 0.88px; white-space: nowrap; }
.nb-ach p span { color: #353941; font-size: inherit;}
.nb-ach p b { font-weight: 700; background: linear-gradient(90deg, #f87785, #e30018); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.nb-ach.grad { justify-content: center; height: auto; padding: 19px 32px; background: linear-gradient(90deg, #71a3fb, #a469fa); }
.nb-ach.grad p { color: #fff; letter-spacing: normal; }

/* ⑥ 수강생 후기 (풀폭 밴드) — Figma 9237:61292 */
.nb-reviews {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #f7f8fa;
    padding: 120px 0 0;
}
.nb-reviews-inner { width: 1130px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; }
.nb-reviews-title { margin: 16px 0 8px; font-size: 32px; line-height: 1.4; letter-spacing: -0.32px; }
.nb-reviews-lead { max-width: 760px; margin-bottom: 32px; font-size: 16px; line-height: 1.4; color: #6b7280; }
.nb-rv-row { display: flex; gap: 24px; align-items: flex-start; width: 100%; }

/* 왼쪽 영상 영역 (플레이스홀더) */
.nb-rv-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.nb-rv-video { width: 100%; height: 501px; border-radius: 12px; background: #e9ebee; overflow: hidden; }
.nb-rv-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.nb-rv-cap { display: flex; align-items: center; justify-content: start; gap: 6px; padding-left: 4px; }
.nb-rv-cap span { font-weight: 500; font-size: 16px; letter-spacing: 0.16px; color: rgba(53,57,65,0.52);}

/* 오른쪽 후기 카드 */
.nb-rv-cards { flex: 0 0 646px; width: 646px; display: flex; flex-direction: column; gap: 12px; }
.nb-rv-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid #eef0f2; border-radius: 16px; background: #fff; box-shadow: 0 5px 16px rgba(15,23,41,.05); }
.nb-rv-head { display: flex; align-items: center; justify-content: space-between; }
.nb-rv-person { display: flex; align-items: center; gap: 10px; }
.nb-rv-avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 999px; background: #f5f6f8; border: 1px dashed #cbd2da; display: inline-flex; align-items: center; justify-content: center; }
.nb-rv-avatar img { display: block; width: 24px; height: 24px; }
.nb-rv-meta { display: flex; flex-direction: column; gap: 1px; }
.nb-rv-name { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.4; color: #0f1722; }
.nb-rv-role { margin: 0; font-weight: 600; font-size: 13px; line-height: 1.4; color: #16b176; }
.nb-rv-stars { font-weight: 700; font-size: 11px; line-height: 1.4; color: #f2b400; white-space: nowrap; }
.nb-rv-quote { margin: 0; font-weight: 500; font-size: 15px; line-height: 1.54; color: #2a3441; }

/* ⑦ FAQ (풀폭 밴드) — Figma 9237:61351 */
.nb-faq {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #f7f8fa;
    padding: 120px 0;
}
.nb-faq-inner { width: 1130px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; }
.nb-faq-title { margin: 16px 0 32px; font-size: 32px; line-height: 1.4; letter-spacing: -0.32px; }
.nb-faq-grid { display: flex; flex-direction: column; gap: 30px; width: 100%; }
.nb-faq-row { display: flex; gap: 30px; width: 100%; align-items: stretch; }
.nb-faq-card { flex: 1; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 9px; padding: 18px; border-radius: 16px; background: #fff; }
.nb-faq-card--full { width: 100%; }
.nb-faq-q { display: flex; gap: 9px; align-items: flex-start; }
.nb-faq-badge { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; background: #16b176; color: #fff; font-weight: 900; font-size: 16px; line-height: 1.4; display: inline-flex; align-items: center; justify-content: center; }
.nb-faq-question { margin: 0; font-weight: 700; font-size: 19px; line-height: 1.42; letter-spacing: -0.057px; color: #0f1722; }
.nb-faq-answer { margin: 0; font-weight: 500; font-size: 19px; line-height: 1.58; color: #4b5563; }

/* ⑧ 전국 9개 지점 — Figma 9237:61395 (지도값은 모바일 참조) */
.nb-loc { display: flex; flex-direction: column; align-items: flex-start; padding: 120px 0 0; }
.nb-loc-title { font-size: 32px; line-height: 1.4; letter-spacing: -0.32px; }
.nb-loc-lead { margin-top: 12px; margin-bottom: 40px; max-width: 760px; font-size: 16px; line-height: 1.4; color: #6b7280; }
.nb-loc-row { display: flex; gap: 64px; align-items: stretch; width: 100%; }
.nb-loc-left { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.nb-loc-tabs { display: flex; flex-wrap: wrap; gap: 16px 8px; }
.nb-loc-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 96px; height: 48px; padding: 14px 16px; border: none; border-radius: 9999px; background: #eff1f3; color: #6c6f75; font-weight: 500; font-size: 16px; line-height: 20px; cursor: pointer; box-sizing: border-box; transition: background .15s ease, color .15s ease; }
.nb-loc-check { display: inline-flex; color: #bec0c4; }
.nb-loc-check svg { width: 20px; height: 20px; }
.nb-loc-tab.active { background: #feb015; color: #1a1e27; font-weight: 600; }
.nb-loc-tab.active .nb-loc-check { color: #1a1e27; }
.nb-loc-info { padding-top: 24px; }
.nb-loc-name { margin: 0; font-weight: 700; font-size: 20px; line-height: 1.4; color: #0f1722; }
.nb-loc-desc { margin: 8px 0 0; max-width: 553px; font-weight: 500; font-size: 15px; line-height: 1.58; color: #4b5563; }
.nb-loc-maps { flex: 0 0 553px; width: 553px; height: 360px; border-radius: 18px; overflow: hidden; background: #eff1f3; }
.nb-loc-map { display: none; width: 100%; height: 100%; }
.nb-loc-map.active { display: block; }
.nb-loc .root_daum_roughmap { width: 100% !important; height: 360px; }
.nb-loc .root_daum_roughmap_landing { width: 100% !important; }

/* ⑨ 카운트업 / 맘보, 너로 정했어! (풀폭 그라데이션) — Figma 9237:61474 */
.nb-reason {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 56px 20px 80px;
    background: linear-gradient(180deg, #edf4fb 11%, #d7ebfc 48.57%, #dff3f7 100%);
}
.nb-reason-inner { width: 1000px; max-width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 89px; }
.nb-reason-left { display: flex; flex-direction: column; gap: 16px; }
.nb-reason-title { margin: 0; font-weight: 700; font-size: 40px; line-height: 1.3; color: #1a1e27; }
.nb-reason-desc { margin: 0; font-weight: 600; font-size: 16px; line-height: 1.3; color: #6c6f75; }
.nb-reason-right { display: flex; flex-direction: column; gap: 56px; }
.nb-reason-stat { display: flex; flex-direction: column; gap: 12px; }
.nb-reason-label { margin: 0; font-weight: 700; font-size: 17px; line-height: 1; color: #1a1e27; }
.nb-reason-value-box { position: relative; display: inline-block; padding-bottom: 14px; }
.nb-reason-value { display: flex; align-items: center; margin: 0; font-weight: 700; font-size: 32px; line-height: 1; color: #1a1e27; white-space: nowrap; }
.nb-reason .reason-count, 
.nb-reason .reason-count span, 
.nb-reason .odometer-digit, 
.nb-reason .odometer-digit-inner, 
.nb-reason .odometer-value {
	color: #1A1E27;
	font-size: 32px;
	font-weight: 700;
	line-height: 100%;
}
.nb-reason-underline { position: absolute; left: 0; bottom: 0; width: 100%; }
.nb-reason-sparkle { position: absolute; top: -22px; right: -30px; width: 30px; height: auto; }
.nb-reason .reason-count,
.nb-reason .odometer,
.nb-reason .odometer-digit,
.nb-reason .odometer-value { font-weight: 700; font-size: 32px; line-height: 1; color: #1a1e27; vertical-align: middle; }

/* 간편 문의 하단 고정 바 (A·B 공통) — Figma 9237:61504 */
.pc-qi {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(218,219,222,0.22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(15,23,41,0.12);
}
.pc-qi-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: none;
    border-radius: 999px;
    background: #888a90;
    cursor: pointer;
}
.pc-qi-icon svg { display: block; }
.pc-qi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 236px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #e9fcf5, #d4e5fd);
    color: #1a1e27;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-decoration: none;
}

/* ===== PC 지점별 페이지 콘텐츠 (.pc-br-) — Figma 홍대 10555:52211 (1x, 컨테이너 1130)
   마크업: /WEB-INF/include/branch/branch-content.jspf — 메인 .menu-category-list 바로 아래에서 ${branchCode} 있을 때 렌더.
   common.css 리셋(p·span·h 14px #666)이 있어 글자 크기·색은 전부 명시한다. ===== */
.pc-br { display: block; padding: 60px 0 0; background: #fff; }
.pc-br-sec { padding-bottom: 160px; }
.pc-br-sec.pc-br-review {padding-bottom: 0}
.pc-br-h3 { margin: 0 0 24px; font-weight: 600; font-size: 24px; line-height: 1.3; letter-spacing: -0.24px; color: #0f1722; }
.pc-br-sec-head { display: flex; align-items: center; justify-content: space-between; }
.pc-br-sec-head .pc-br-h3 { margin-bottom: 0; }
.pc-br-sec-head + .pc-br-photo-swiper,
.pc-br-sec-head + .pc-br-teachers,
.pc-br-sec-head + .pc-br-reviews { margin-top: 24px; }
/* 링크 색: common.css 의 a:link/visited/hover(명시도 0,1,1)가 클래스 하나를 이기므로 가상클래스까지 붙여 덮는다 */
.pc-br-more, .pc-br-more:link, .pc-br-more:visited, .pc-br-more:focus { font-weight: 600; font-size: 15px; line-height: 1.3; color: #0e9e68; text-decoration: none; }
.pc-br-more:hover { color: #0e9e68; text-decoration: underline; }

/* ① 헤더 2단 */
.pc-br-hero { display: flex; gap: 40px; align-items: flex-start; padding: 160px 0;}
.pc-br-hero-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.pc-br-badge { display: inline-block; padding: 7px 12px; border-radius: 8px; background: #e4f7ef; color: #0e9e68; font-weight: 700; font-size: 13px; line-height: 1.3; }
.pc-br-title { display: flex; flex-direction: column; gap: 6px; }
.pc-br-title-sub { margin: 0; font-weight: 400; font-size: 16px; line-height: 1.3; color: #6c6f75; }
.pc-br-title-main { margin: 0; font-weight: 700; font-size: 40px; line-height: 50px; letter-spacing: -0.8px; color: #0f1722; }
.pc-br-intro { width: 100%; }
.pc-br-intro p { margin: 0 0 14px; font-weight: 500; font-size: 16px; line-height: 28px; color: #353941; }
.pc-br-intro p:last-child { margin-bottom: 0; }
.pc-br-stats-wrap { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.pc-br-stats { display: flex; align-items: center; padding: 24px 32px; border-radius: 16px; background: #f7f8fa; }
.pc-br-stat { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pc-br-stat .num { margin: 0; font-weight: 700; font-size: 28px; line-height: 1.3; letter-spacing: -0.28px; color: #0f1722; }
.pc-br-stat .num.green { color: #0e9e68; }
.pc-br-stat .cap { margin: 0; font-weight: 500; font-size: 13px; line-height: 1.3; color: #6c6f75; }
.pc-br-stat-div { flex: 0 0 1px; width: 1px; height: 40px; background: #eff1f3; }
.pc-br-stats-note { margin: 0; font-weight: 400; font-size: 12px; line-height: 1.3; color: #888a90; }

/* 지점 정보 카드 */
.pc-br-info-card { flex: 0 0 430px; width: 430px; box-sizing: border-box; padding: 28px; border: 1px solid #eff1f3; border-radius: 16px; background: #fff; box-shadow: 0 8px 12px rgba(15,23,33,.06); }
.pc-br-info-title { margin: 0 0 12px; font-weight: 600; font-size: 18px; line-height: 1.3; color: #0f1722; }
.pc-br-info { margin: 0; }
.pc-br-info-row { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #eff1f3; }
.pc-br-info-row:last-child { border-bottom: 0; }
.pc-br-info-row dt { flex: 0 0 72px; margin: 0; font-weight: 500; font-size: 14px; line-height: 22px; color: #888a90; }
.pc-br-info-row dd { flex: 1; min-width: 0; margin: 0; font-weight: 500; font-size: 15px; line-height: 22px; color: #1a1e27; }
.pc-br-info-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.pc-br-btn, .pc-br-btn:link, .pc-br-btn:visited, .pc-br-btn:hover, .pc-br-btn:focus { display: flex; align-items: center; justify-content: center; height: 52px; padding: 0 24px; border-radius: 999px; box-sizing: border-box; font-weight: 600; font-size: 16px; line-height: 1; color: #1a1e27; text-decoration: none; }
.pc-br-btn.primary { background: #feb015; }
.pc-br-btn.primary:hover { background: #fcc659; }
.pc-br-btn.secondary { background: #fff; border: 1px solid #dadbde; }
.pc-br-btn.secondary:hover { background: #f7f8fa; }

/* ② 시설 사진 4장 */
/* Swiper (공통하단 .photo-swiper 와 같은 크기·동작: 316×240, 간격 8). 1130 안에 3장 + 4번째가 잘려 보여 다음 사진이 있음을 알림 */
.pc-br-photo-swiper { position: relative; overflow: hidden; }
.pc-br-photo-swiper .swiper-slide { width: 316px; height: 240px; border-radius: 12px; overflow: hidden; background: #edeff2; }
.pc-br-photo-swiper .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ③ 오시는 길 */
.pc-br-map { width: 100%; height: 420px; border-radius: 16px; overflow: hidden; background: #eff1f3; }
.pc-br-map .root_daum_roughmap { width: 100% !important; height: 420px; }
.pc-br-map .root_daum_roughmap_landing { width: 100% !important; }
.pc-br-map-caption { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 16px 20px; border-radius: 12px; background: #f7f8fa; }
.pc-br-map-pin { flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #e4f7ef; }
.pc-br-map-caption p { flex: 1; min-width: 0; margin: 0; font-weight: 500; font-size: 15px; line-height: 24px; color: #353941; }

/* ④ 강사진 4명 */
.pc-br-teachers { display: flex; gap: 22px; }
.pc-br-teacher { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pc-br-teacher-photo { position: relative; width: 100%; height: 266px; margin-bottom: 8px; border-radius: 12px; overflow: hidden; background: #f5f5f7; }
.pc-br-teacher-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pc-br-teacher-ribbon { position: absolute; left: -6px; top: 0; display: block; width: 66px; height: 30px; background: url('/_dg/hq/img/icon/icon-ribbon-mgpt.svg') no-repeat center center; background-size: 66px 30px; }
.pc-br-teacher-name { margin: 0; font-weight: 600; font-size: 16px; line-height: 1.3; color: #0f1722; }
.pc-br-teacher-role { margin: 0; font-weight: 400; font-size: 14px; line-height: 1.3; color: #6c6f75; }

/* ⑤ 후기 2열 카드 */
.pc-br-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.pc-br-review { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 16px; background: #f7f8fa; }
.pc-br-review-head { display: flex; align-items: center; justify-content: space-between; }
.pc-br-review-who { display: flex; align-items: center; gap: 12px; }
.pc-br-review-avatar { flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #fff; }
.pc-br-review-avatar img { display: block; width: 28px; height: 28px; }
.pc-br-review-meta { display: flex; flex-direction: column; gap: 2px; }
.pc-br-review-meta .name { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.3; color: #0f1722; }
.pc-br-review-meta .role { margin: 0; font-weight: 500; font-size: 13px; line-height: 1.3; color: #0e9e68; }
.pc-br-review-stars { flex: 0 0 auto; font-weight: 400; font-size: 14px; line-height: 1.3; letter-spacing: 1px; color: #feb015; white-space: nowrap; }
.pc-br-review-quote { margin: 0; font-weight: 400; font-size: 15px; line-height: 26px; color: #353941; }
/* ===== //PC 지점별 페이지 ===== */