@charset "utf-8";
/* ============ PLAY BADUK 메인 페이지 ============ */

.pb-main{ overflow:hidden; }
.pb-sec{ }
.pb-inner{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }

/* ---------- 1. 히어로 (배경 이미지 + 텍스트 컴포넌트 오버레이) ---------- */
.pb-hero{ position:relative; background:var(--pb-bg-cream); }
.pb-hero__stage{ position:relative; display:block; width:100%; max-width:1920px; margin:0 auto;
  container-type:inline-size; line-height:0; cursor:pointer; }
.pb-hero__bg{ width:100%; height:auto; display:block; }

/* 제목 컴포넌트 */
.pb-hero__title{ position:absolute; left:10.3%; top:15.5%; width:46%; margin:0;
  font-family:"Jalnan2",sans-serif; color:#011A59; font-weight:400; font-size:3cqw; line-height:1.32; letter-spacing:-.3px; word-break:keep-all; }
.pb-hero__title .b{ color:#2B73E2; }
.pb-hero__title .o{ color:#FF911E; }

/* SMART 카드 텍스트 컴포넌트 (배경 이미지의 카드/아이콘 위에 얹음) */
.pb-hero__smart{ position:absolute; inset:0; }
/* 각 SMART 박스(배경 이미지에 구워진 박스) 위에 텍스트 오버레이 · 가운데 정렬 */
.pb-hero__smart .hs{ position:absolute; top:60.3%; width:9.3%; display:block; text-align:center; }
/* 큰 글자는 왼쪽(배경 박스의 아이콘 옆)에 고정 — 가운데 정렬 시 아이콘과 겹침 방지 */
.pb-hero__smart .hs .l{ display:block; font-family:"Jalnan2",sans-serif; font-size:5cqw; line-height:.9; text-align:left; }
.pb-hero__smart .hs .e{ display:block; font-family:"Jalnan2",sans-serif; font-size:1.3cqw; line-height:1.05; margin-top:.7cqw; }
.pb-hero__smart .hs .k{ display:block; font-weight:600; font-size:.73cqw; color:#747474; line-height:1; margin-top:.5cqw; }
.pb-hero__smart .hs .d{ display:block; font-weight:600; font-size:.73cqw; color:#616161; line-height:1.34; margin-top:.55cqw; }
/* data-k별 메인 컬러(글자 S/라벨이 상속) */
.pb-hero__smart .hs[data-k=s]{ left:4.65%;  color:#2B73E2; }
.pb-hero__smart .hs[data-k=m]{ left:14.32%; color:#56B740; }
.pb-hero__smart .hs[data-k=a]{ left:25.26%; color:#FF911E; }
.pb-hero__smart .hs[data-k=r]{ left:36.04%; color:#874AF0; }
.pb-hero__smart .hs[data-k=t]{ left:46.98%; color:#F648A9; }

/* 히어로 하단 블루밴드 */
.pb-hero__band{ background:var(--pb-primary) url('../img/band.png') center/cover no-repeat; color:#fff; }
.pb-hero__band .inner{ max-width:1400px; margin:0 auto; padding:26px 40px; display:flex; align-items:center; gap:34px; min-height:131px; box-sizing:border-box; }
.pb-band__head{ flex-shrink:0; }
.pb-hero__band .kicker{ display:block; font-family:"IBMPlexSansKR",sans-serif; font-weight:700; letter-spacing:1.5px; font-size:13px; opacity:.85; margin-bottom:6px; }
.pb-hero__band .title{ font-family:"GothicA1",sans-serif; font-size:30px; font-weight:800; line-height:1.1; color:#fff; }
.pb-hero__band .desc{ font-family:"IBMPlexSansKR",sans-serif; font-weight:400; font-size:16px; line-height:1.6; color:#fdfdfd; }
@media (max-width:900px){ .pb-hero__band .inner{ flex-direction:column; align-items:flex-start; gap:10px; padding:22px; min-height:0; } .pb-hero__band .desc br{ display:none; } }

/* ---------- 모바일 전용 히어로 (≤768px) ---------- */
.pb-hero__mobile{ display:none; }
@media (max-width:768px){
  .pb-hero__stage{ display:none; }
  /* 모바일 히어로 = Figma 배너 이미지(풀블리드) + 하단 소개 밴드 이미지 */
  .pb-hero__mobile{ display:block; }
  .pb-herom__img{ display:block; line-height:0; }
  .pb-herom__img img{ display:block; width:100%; height:auto; }
  .pb-bandm__img{ display:block; width:100%; height:auto; }
}

/* ---------- 2. 프로그램 카드 ---------- */
.pb-programs{ padding:72px 0 10px; }
.pb-cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
/* 카드 자체 패딩 제거 → 버튼/사진 풀폭, 텍스트는 요소별 여백으로 보정 */
.pb-prog{ background:#fff; border:1px solid #e9e9e9; border-radius:14px; overflow:hidden; padding:0;
  box-shadow:0 4px 16px 4px rgba(223,223,223,.4); display:flex; flex-direction:column; text-align:center; }
.pb-prog h3{ font-weight:700; font-size:46px; line-height:1.1; margin-top:32px; padding:0 26px; }
.pb-prog.c-blue   h3{ color:#2d72e2; }
.pb-prog.c-green  h3{ color:#27ae60; }
.pb-prog.c-orange h3{ color:#ff911e; }
/* 소제목 2줄 높이 고정 → 카드 높이 통일(버튼 위 빈 여백 제거, 버튼 정렬 일치) */
.pb-prog__sub{ color:#333; margin-top:12px; font-size:20px; font-weight:500; line-height:1.5; min-height:60px; padding:0 26px; }
/* 행: 패딩 제거(사진 좌측 끝까지) + 높이 고정 → 사진 하단이 버튼 상단에 맞닿음 */
.pb-prog__row{ display:flex; align-items:stretch; gap:18px; margin:22px 0 0; padding:0; height:160px; text-align:left; }
/* 사진: <img> + object-fit:cover (배경이미지 상단 회색선 방지). 위 모서리만 둥글게, 행 높이만큼 늘려 버튼과 연결 */
.pb-prog__img{ width:150px; flex-shrink:0; align-self:stretch; height:160px; display:block; object-fit:cover; border-radius:14px 14px 0 0; }
.pb-prog__list{ flex:1; display:flex; flex-direction:column; gap:16px; min-width:0; padding-right:26px; }
.pb-prog__list li{ display:flex; align-items:flex-start; gap:9px; font-size:14px; color:#333; font-weight:500; line-height:1.4; }
.pb-check{ width:17px; height:19px; flex-shrink:0; margin-top:1px; }
/* 버튼: 행 바로 아래 부착(간격 0), 아래 모서리만 둥글게(위는 각지게) → 사진과 연결 */
.pb-prog__btn{ margin:0; display:flex; align-items:center; justify-content:center; gap:10px;
  height:60px; border-radius:0 0 12px 12px; font-weight:500; font-size:20px; color:#fff; }
/* 카드별 색상 (버튼=배경, 체크=currentColor) */
.pb-prog.c-blue   .pb-prog__btn{ background:#2d72e2; } .pb-prog.c-blue   .pb-check{ color:#2d72e2; }
.pb-prog.c-green  .pb-prog__btn{ background:#27ae60; } .pb-prog.c-green  .pb-check{ color:#27ae60; }
.pb-prog.c-orange .pb-prog__btn{ background:#ff911e; } .pb-prog.c-orange .pb-check{ color:#ff911e; }

/* ---------- 3. 액션 카드 ---------- */
.pb-actions{ padding:34px 0 80px; }
.pb-actions__grid{ grid-template-columns:repeat(var(--pb-act-cols,3),1fr); }
.pb-act{ border-radius:20px; padding:34px 32px; display:flex; flex-direction:column; }
.pb-act.c-blue{ background:#EAF1FD; }
.pb-act.c-pink{ background:#FDECEF; }
.pb-act.c-cream{ background:#FFF6E6; }
.pb-act__row{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; margin-bottom:24px; }
.pb-act__icon{ width:96px; height:96px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pb-act__icon img{ width:52px; height:52px; object-fit:contain; display:block; }
.pb-act__txt{ flex:1; min-width:0; }
.pb-act h3{ font-family:"GmarketSans",sans-serif; font-size:30px; font-weight:700; line-height:1.2; }
.pb-act.c-blue  h3{ color:#2D72E2; }
.pb-act.c-pink  h3{ color:#D77575; }
.pb-act.c-cream h3{ color:#E3814C; }
.pb-act p{ color:#333; margin-top:12px; font-size:24px; font-weight:500; line-height:1.5; }
.pb-act__btn{ align-self:center; display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:auto; padding-top:0;
  height:48px; padding:0 24px; border-radius:999px; font-weight:700; color:#fff; font-size:15px; }
.pb-act.c-blue  .pb-act__btn{ background:#2D72E2; }
.pb-act.c-pink  .pb-act__btn{ background:#F2607E; }
.pb-act.c-cream .pb-act__btn{ background:#F0A500; }

/* ---------- 4. 특별한 이유 ---------- */
.pb-reasons{ background:var(--pb-bg-soft); padding:46px 0; }
.pb-reasons__inner{ max-width:1280px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:10px; }
.pb-reasons__title{ font-size:30px; font-weight:700; color:#333; line-height:1.3; width:220px; flex-shrink:0; }
.pb-reasons__items{ flex:1; display:flex; align-items:center; }
.pb-reason{ flex:1; text-align:center; padding:0 14px; border-left:1px solid #e0e0e0; }
.pb-reason:first-child{ border-left:0; }
.pb-reason__ic{ font-size:40px; margin-bottom:14px; height:64px; display:flex; align-items:center; justify-content:center; }
.pb-reason__ic img{ height:60px; width:auto; object-fit:contain; }
.pb-reason p{ font-size:15px; color:#000; font-weight:600; line-height:1.4; }

/* ---------- 5. 후기 + 만족도 ---------- */
.pb-reviews{ position:relative; padding:70px 0 90px; background:linear-gradient(180deg,#fff 0%,#F4F8FF 100%); }
.pb-reviews__head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.pb-reviews__head .pb-rv-ic{ width:30px; height:30px; flex-shrink:0; }
.pb-reviews__head h2{ font-size:34px; font-weight:800; color:var(--pb-navy); }
.pb-reviews__head h2 .hl{ color:var(--pb-primary); font-weight:800; }
.pb-reviews__sub{ color:#000; font-size:16px; font-weight:500; margin-bottom:34px; }
.pb-reviews__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,285px)) 1fr; gap:20px; }
.pb-review{ background:#fff; border-radius:18px; padding:28px 24px; box-shadow:var(--pb-shadow); display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease; }
a.pb-review{ cursor:pointer; }
a.pb-review:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(7,25,70,.14); }
.pb-review__stars{ color:var(--pb-yellow); font-size:20px; letter-spacing:2px; text-align:left; }
/* 견적(타이틀) 2줄 높이 고정 → 카드별 body 시작 위치 수평 정렬 */
.pb-review__quote{ font-size:20px; font-weight:900; color:#071946; line-height:1.35; margin:16px 0 12px; min-height:calc(20px * 1.35 * 2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* 본문: 지정 줄 수(4줄) 초과 시 …으로 말줄임 (flex:1 제거 — line-clamp와 충돌해 초과줄 노출됨) */
.pb-review__body{ font-size:16px; color:#111; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
  max-height:calc(16px * 1.6 * 4); }
/* 사진(좌) + 이름·학년(우) 가로 배치, 메타는 위에서부터 — Figma 동일 */
.pb-review__bottom{ display:flex; align-items:flex-start; gap:12px; margin-top:auto; padding-top:18px; }
.pb-review__photo{ width:130px; height:160px; flex-shrink:0; border-radius:14px; align-self:flex-end;
  background:transparent; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.pb-review__photo img{ height:100%; width:auto; max-width:100%; object-fit:contain; }
.pb-review__meta{ flex:1; min-width:0; padding-top:6px; }
.pb-review__who{ font-weight:700; color:var(--pb-navy); font-size:16px; }
.pb-review__grade{ display:inline-block; margin-top:10px; background:#fff; color:var(--pb-primary);
  border:3px solid #B4CEF9; font-size:12px; font-weight:700; padding:6px 14px; border-radius:var(--pb-radius-pill); }

.pb-satis{ background:#fff; border-radius:18px; padding:30px 28px; box-shadow:var(--pb-shadow); }
.pb-satis__title{ color:var(--pb-primary); font-weight:800; font-size:18px; }
.pb-satis__big{ display:flex; align-items:center; gap:8px; margin:6px 0 22px; }
.pb-satis__big b{ font-size:58px; font-weight:900; color:var(--pb-navy); }
.pb-satis__big b span{ font-size:28px; }
.pb-satis__big i{ color:#BBD2F5; font-size:34px; }
.pb-metric{ margin-bottom:16px; }
.pb-metric__row{ display:flex; justify-content:space-between; font-size:14px; margin-bottom:6px; }
.pb-metric__row .l{ color:var(--pb-text); }
.pb-metric__row .v{ color:var(--pb-primary); font-weight:700; }
.pb-metric__track{ height:9px; background:#EAEFF6; border-radius:999px; overflow:hidden; }
.pb-metric__fill{ height:100%; background:var(--pb-primary); border-radius:999px; }
.pb-satis__note{ font-size:12px; color:var(--pb-text-mute); margin-top:18px; border-top:1px solid var(--pb-line); padding-top:14px; }

@media (max-width:1100px){
  .pb-hero__inner{ flex-direction:column; } .pb-hero__right{ width:100%; min-height:320px; }
  .pb-smart{ flex-wrap:wrap; } .pb-smart__col{ flex:1 1 30%; }
  .pb-cards3{ grid-template-columns:1fr; }
  .pb-reasons__inner{ flex-direction:column; align-items:flex-start; } .pb-reasons__title{ width:auto; }
  .pb-reasons__items{ flex-wrap:wrap; } .pb-reason{ flex:1 1 30%; border-left:0; margin-bottom:20px; }
  .pb-reviews__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .pb-hero h1{ font-size:30px; } .pb-smart__big{ font-size:44px; }
  .pb-reviews__grid{ grid-template-columns:1fr; }
}

/* ===== 모바일 메인 (Figma Mobile / 메인최종 일치) ===== */
@media (max-width:768px){
  /* 모바일은 밴드도 Figma 이미지(.pb-bandm__img)로 대체 → HTML 밴드 숨김 */
  .pb-hero__band{ display:none; }

  /* 특별한 이유: 세로 리스트(아이콘 좌 + 텍스트 우), 제목 가운데 */
  .pb-reasons{ padding:38px 0; }
  .pb-reasons__inner{ flex-direction:column; align-items:stretch; gap:8px; }
  .pb-reasons__title{ width:auto; text-align:center; font-size:24px; line-height:1.3; margin-bottom:12px; }
  .pb-reasons__items{ flex-direction:column; align-items:stretch; flex-wrap:nowrap; }
  .pb-reason{ flex:none; width:100%; display:flex; align-items:center; gap:16px;
    text-align:left; padding:15px 6px; border-left:0; border-bottom:1px solid #e3e9f2; margin-bottom:0; }
  .pb-reason:last-child{ border-bottom:0; }
  .pb-reason__ic{ flex:0 0 52px; width:52px; height:52px; margin-bottom:0; }
  .pb-reason__ic img{ height:46px; }
  .pb-reason p{ font-size:16px; }

  /* 학부모 만족도: 가운데 정렬 + 연한 파랑 카드 */
  .pb-satis{ background:#EAF2FF; text-align:center; }
  .pb-satis__big{ justify-content:center; }
}

/* ===== 모바일 본문 폰트/여백 축소 (360 기준 넘침 방지 · Figma 모바일 크기) ===== */
@media (max-width:768px){
  /* 프로그램 카드 */
  .pb-programs{ padding:40px 0 6px; }
  .pb-prog h3{ font-size:26px; margin-top:22px; }
  .pb-prog__sub{ font-size:15px; min-height:0; margin-top:8px; padding:0 20px; }
  .pb-prog__row{ height:auto; margin-top:16px; padding:0; }
  .pb-prog__img{ width:118px; height:auto; align-self:stretch; }
  .pb-prog__list{ gap:12px; padding-right:18px; }
  .pb-prog__list li{ font-size:14px; }
  .pb-prog__btn{ height:52px; font-size:16px; }
  /* 액션 카드 */
  .pb-actions{ padding:26px 0 56px; }
  .pb-act{ padding:26px 22px; }
  .pb-act h3{ font-size:22px; }
  .pb-act p{ font-size:15px; margin-top:8px; }
  .pb-act__btn{ height:46px; font-size:14px; }
  /* 후기 */
  .pb-reviews{ padding:48px 0 60px; }
  .pb-reviews__head h2{ font-size:24px; }
  .pb-reviews__sub{ font-size:14px; margin-bottom:22px; }
  .pb-review{ padding:22px 20px; }
  .pb-review__quote{ font-size:17px; min-height:0; margin:12px 0 10px; }
  .pb-review__body{ font-size:15px; }
  .pb-review__photo{ width:104px; height:128px; }
  /* 만족도 */
  .pb-satis__big b{ font-size:48px; } .pb-satis__big i{ font-size:28px; }
}