/* ============================================
   spaceone — 프로젝트 토큰 오버라이드 + 페이지 커스텀 스타일
   ============================================ */


/* ============================================
   1. 브랜드 토큰 (Semantic 레벨만 오버라이드)
   ============================================ */

:root {
  /* ─────────────────────────────────────────────────────────────
     spaceone 브랜드 = core --pl-red-40 (#f4686d) 기반
     이전엔 #F26B7A 직접 hex 였으나 시스템 정합을 위해 core 토큰으로 정렬.
     soft/deep/on-light/on-dark 도 같은 red scale 의 자연스러운 단계로 매핑.
     ───────────────────────────────────────────────────────────── */

  /* 브랜드 메인 (라이트/다크 동일) */
  --pl-fg-brand-primary:     var(--pl-red-40);
  --pl-bg-brand-default:     var(--pl-red-40);
  --pl-border-brand-default: var(--pl-red-40);

  /* 자동 반전 (라이트 톤 / 다크 톤) */
  --pl-bg-brand-soft:        var(--pl-red-5);    /* #fef5f5 */
  --pl-bg-brand-deep:        var(--pl-red-90);   /* #560407 */

  /* 배경 위 브랜드 텍스트 */
  --pl-fg-brand-on-light:    var(--pl-red-80);   /* #7e0a0e */
  --pl-fg-brand-on-dark:     var(--pl-red-20);   /* #f9b8bb */

  /* 브랜드 인터랙션 알파 — 호버/액티브 오버레이용
     라이브러리 기본은 lightblue alpha → 빨간 브랜드와 어긋나 red alpha 로 통일.
     영향: 모든 .pl-btn--outline / --primary 의 호버·액티브 오버레이, GNB CTA 등 */
  --pl-alpha-brand-08: var(--pl-alpha-red-08);
  --pl-alpha-brand-12: var(--pl-alpha-red-12);
  --pl-alpha-brand-24: var(--pl-alpha-red-24);
  --pl-alpha-brand-32: var(--pl-alpha-red-32);
  --pl-alpha-brand-48: var(--pl-alpha-red-48);

  /* 캠페인 컬러 */
  --pl-campaign-primary:     #000000;
  --pl-campaign-bg:          #F5F5F5;

  /* ─────────────────────────────────────────────────────────────
     인터랙션 토큰 정렬 (accent + static-violet → red-40)
     라이브러리 기본 accent(#416df0) / static-violet(#9b6bf4) 가
     spaceone 브랜드와 어긋나 모두 같은 red scale 로 통일.
     영향 범위:
       - 커리큘럼 탭 active (bg-accent-default + fg-accent-primary)
       - sticky 플로팅 바 "스페이스원이 처음이신가요?" 텍스트
       - sticky 바 상담 신청 버튼 배경 (static-violet)
     ───────────────────────────────────────────────────────────── */
  --pl-fg-accent-primary:    var(--pl-red-40);
  --pl-fg-accent-on-light:   var(--pl-red-80);
  --pl-fg-accent-on-dark:    var(--pl-red-20);
  --pl-bg-accent-default:    var(--pl-red-40);
  --pl-bg-accent-soft:       var(--pl-red-5);
  --pl-bg-accent-deep:       var(--pl-red-90);

  /* border-accent-* — 탭의 비활성 보더 등 (라이브러리 기본은 블루) */
  --pl-border-accent-default: var(--pl-red-40);
  --pl-border-accent-soft:    var(--pl-red-20);
  --pl-border-accent-deep:    var(--pl-red-90);

  --pl-static-violet:        var(--pl-red-40);
}


/* ============================================
   2. sections.css 선택적 오버라이드
   ============================================ */

.pl-intro--textblock {
  background: var(--pl-campaign-bg);
}

.pl-section-title__label {
  color: var(--pl-fg-brand-primary);
}

/* 라이브러리 .pl-label 칩 — 한글 baseline 시각 중앙 보정 (히어로 라벨 등) */
.pl-label {
  padding: 7px var(--pl-spacing-4) 6px;
  line-height: 1;
}


/* ============================================
   3. 신규 영역 자리표시자
   ============================================ */

.pl-placeholder {
  display: flex;
  justify-content: center;
  padding: var(--pl-layout-body-top) var(--pl-layout-padding) var(--pl-layout-body-bottom);
}
.pl-placeholder__inner {
  width: 100%;
  max-width: var(--pl-container-default);
  border: 2px dashed var(--pl-border-layer-soft);
  border-radius: var(--pl-radius-3);
  padding: var(--pl-spacing-13) var(--pl-spacing-7);
  text-align: center;
  background: var(--pl-bg-layer-soft);
}
.pl-placeholder__tag {
  display: inline-block;
  font-size: var(--pl-font-size-label-md);
  color: var(--pl-fg-brand-primary);
  background: var(--pl-bg-brand-soft);
  padding: var(--pl-spacing-2) var(--pl-spacing-4);
  border-radius: var(--pl-radius-1);
  font-weight: var(--pl-font-weight-bold);
  margin-bottom: var(--pl-spacing-5);
}
.pl-placeholder__title {
  font-size: var(--pl-font-size-title-lg);
  color: var(--pl-fg-neutral-secondary);
  font-weight: var(--pl-font-weight-bold);
  margin: 0 0 var(--pl-spacing-3);
}
.pl-placeholder__desc {
  font-size: var(--pl-font-size-body-sm);
  color: var(--pl-fg-neutral-tertiary);
  margin: 0;
  line-height: 1.6;
}


/* ============================================
   4. Core Values — 카드 3개 고정 (swipe 화살표 제거, PC 중앙 정렬)
   ============================================ */

.pl-core-values .pl-swipe-controls { display: none; }

/* 모바일: 가로 스와이프 → 세로 스택. 카드가 아래로 떨어지는 레이아웃 */
@container section (max-width: 639px) {
  .pl-core-values .pl-swipe-track {
    overflow-x: hidden;
  }
  .pl-core-values .pl-swipe-track__inner {
    flex-direction: column;
    width: 100%;
    padding: var(--pl-spacing-4) 20px;
    gap: var(--pl-spacing-6);
  }
  .pl-core-values .pl-swipe-card {
    width: 100%;
  }
}

@container section (min-width: 1200px) {
  .pl-core-values .pl-swipe-track__inner {
    padding-left: var(--pl-layout-padding);
    width: fit-content;
    margin: 0 auto;
  }
}

/* card-c(--split) 변형으로 변경됨 — 이미지가 카드 상단에 분리되어
   콘텐츠와 겹치지 않으므로 가독성용 흰 그라디언트 오버레이는 제거.
   (이전 --full 변형에서 이미지 위 텍스트가 겹쳐서 필요했던 처리)

   라이브러리 --split 은 height 463px 고정 + 자세히 보기 링크가
   하단을 차지하는 구조인데, 우리는 링크를 뺐으므로 textbox 하단에
   빈 공간이 남음 → 카드 높이를 텍스트에 맞춤. */
.pl-core-values .pl-swipe-card--split {
  height: auto;
  border: none; /* 라이브러리 1px border-layer-soft 제거 — shadow 만으로 분리 */
  cursor: default; /* 클릭 가능한 카드 아님 (보는 용도) — 라이브러리 cursor:pointer 해제 */
}
/* :active 시 클릭 인상 주는 알파 오버레이 제거 (보는 용도라 압력 피드백 불필요).
   :hover 의 box-shadow 인터랙션은 라이브러리 그대로 살림. */
.pl-core-values .pl-swipe-card--split:active::after {
  background: transparent;
}

.pl-core-values .pl-swipe-card--split .pl-swipe-card__content {
  flex: 0 0 auto;
  padding-bottom: var(--pl-spacing-8); /* 32px — 텍스트 하단 여백 */
}

.pl-core-values .pl-swipe-card--split .pl-swipe-card__desc {
  margin-bottom: 0; /* 라이브러리는 자세히 보기 띄우는 spacing-3 — 제거 */
}

/* 카테고리 라벨 — 메인 타이틀 위 (문해력/사고력/창의력) */
.pl-core-values__label {
  font-size: var(--pl-font-size-title-lg); /* 24px — 라벨이 시각 위계 상단 */
  font-weight: var(--pl-font-weight-bold);
  color: var(--pl-fg-brand-primary);
  margin-bottom: var(--pl-spacing-2);
}

/* 메인 타이틀(~힘) — 라벨보다 한 단계 작게 (위계 역전) */
.pl-core-values .pl-swipe-card--split .pl-swipe-card__title {
  font-size: var(--pl-font-size-body-md); /* 18px */
}


/* ============================================
   5. Spaces — 이미지 컨테이너 풀 사이즈 + 카드별 디졸브
   ============================================ */

.pl-about--feature-alt .pl-about__feature-image {
  padding: 0;
  min-height: 420px; /* 라이브러리 기본 480 → 420 */
}
.pl-about--feature-alt .pl-about__feature-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@container section (max-width: 1199px) {
  .pl-about--feature-alt .pl-about__feature-image { min-height: 320px; } /* 라이브러리 380 → 320 */
}
@container section (max-width: 639px) {
  .pl-about--feature-alt .pl-about__feature-image { min-height: 240px; } /* 라이브러리 300 → 240 */
  .pl-about__feature-text {
    gap: var(--pl-spacing-5); /* 라이브러리 spacing-7(24) → spacing-5(16) — 모바일 텍스트 묶음 더 타이트 */
  }
}

/* 카드별 이미지 캐러셀 — 같은 위치에 겹쳐 opacity 로 자동 전환 */
.pl-about__feature-image--carousel img {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.pl-about__feature-image--carousel img.is-active {
  opacity: 1;
}


/* ============================================
   6. Hero — 흰색 오버레이 + 캐러셀 페이드
   ============================================ */

.pl-hero--with-overlay .pl-hero__bg::after {
  background: var(--pl-alpha-white-60) !important; /* 텍스트 가독성 — 60% 흰 막 */
}

.pl-hero--with-overlay { min-height: 720px; }

/* 히어로 타이틀 강조 — '성장' 키워드 브랜드 액센트 */
.pl-hero__title-accent {
  color: var(--pl-fg-brand-primary);
}

/* 히어로 컨테이너 패딩 — 상단 120 / 하단 60 (CTA 호흡 더 주기) */
.pl-hero--full.pl-hero--with-overlay .pl-hero__container {
  padding: var(--pl-spacing-15) 0 var(--pl-spacing-11);
}

/* @media 사용 — @container section 이 hero 의 컨테이너 컨텍스트와
   맞지 않아 모바일 룰이 적용 안 되던 문제 해결 (viewport 기준 보장) */
@media (max-width: 1199px) {
  .pl-hero--with-overlay { min-height: 520px; }
  .pl-hero--full.pl-hero--with-overlay .pl-hero__container {
    padding: var(--pl-spacing-10) 0;
  }
}

@media (max-width: 639px) {
  .pl-hero--with-overlay { min-height: 480px; }
  .pl-hero--full.pl-hero--with-overlay .pl-hero__container {
    padding: var(--pl-spacing-14) 0 var(--pl-spacing-9) 0; /* top 80 (타이틀 윗 여백 ↑) / bottom 40 */
    min-height: 0; /* 라이브러리 모바일 .pl-hero__container { min-height: 800 } 해제 */
  }
  .pl-hero--full .pl-hero__content {
    gap: var(--pl-spacing-10);
  }
  /* 히어로 타이틀 — 토큰 적용 (모바일 display-md = 30px) */
  .pl-hero--full .pl-hero__title {
    font-size: var(--pl-font-size-display-md);
    line-height: 1.32;
  }
}

/* curriculum.html sub hero — 배경 영상 + 알파 오버레이 (.pl-hero--curriculum)
   @media 사용 — viewport 기준 (이전 @container 안 작동) */
.pl-hero.pl-hero--curriculum {
  min-height: 480px;
}

@media (max-width: 1199px) {
  .pl-hero.pl-hero--curriculum { min-height: 380px; }
  .pl-hero.pl-hero--curriculum .pl-hero__container {
    padding: var(--pl-spacing-8) 0;
  }
}

@media (max-width: 639px) {
  .pl-hero.pl-hero--curriculum { min-height: 320px; }
  .pl-hero.pl-hero--curriculum .pl-hero__container {
    padding: var(--pl-spacing-6) 0;
    gap: var(--pl-spacing-4);
    min-height: 0; /* 라이브러리 모바일 .pl-hero__container { min-height: 800 } 해제 */
  }
  .pl-hero.pl-hero--curriculum .pl-hero__content {
    gap: var(--pl-spacing-3);
  }
}

/* 배경 영상 — 이미지(img) 와 동일하게 cover */
.pl-hero--full .pl-hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* curriculum hero 도 60% 흰 알파 오버레이 (index hero 와 동일 패턴) */
.pl-hero--curriculum .pl-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pl-alpha-white-60);
  z-index: 1;
}

/* container 패딩 — 큰 hero 영역 안 텍스트 가운데 */
.pl-hero--curriculum .pl-hero__container {
  padding: var(--pl-spacing-9) 0; /* 40px */
  gap: var(--pl-spacing-7);
}

.pl-hero--curriculum .pl-hero__content {
  gap: var(--pl-spacing-5);
}

.pl-hero--full .pl-hero__bg--carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.pl-hero--full .pl-hero__bg--carousel img.is-active {
  opacity: 1;
}


/* ============================================
   7. GNB 로고
   ============================================ */

.pl-gnb__logo img { display: block; height: 28px; width: auto; }

/* GNB CTA — '프로그램 소개' (별도 페이지 진입점)
   PageLab .pl-btn--outline 표준 패턴 (::before 오버레이) 적용 — 페이지 무관 동일 스타일 */
.pl-gnb__cta,
.pl-gnb__mobile-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pl-spacing-3); /* 텍스트 ↔ 화살표 아이콘 */
  background: transparent;
  border: var(--pl-border-2) solid var(--pl-border-brand-default);
  border-radius: var(--pl-radius-circle);
  color: var(--pl-fg-brand-primary);
  font-weight: var(--pl-font-weight-bold);
  text-decoration: none;
  overflow: hidden;
  transition: all 0.2s ease;
}
/* 화살표 아이콘 — 호버 시 텍스트와 함께 brand-alpha 오버레이로 자연 tint */
.pl-gnb__cta-icon {
  flex-shrink: 0;
}
/* 상태 오버레이 — 표준 outline 버튼과 동일 (alpha-brand-12 / 24) */
.pl-gnb__cta::before,
.pl-gnb__mobile-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  transition: background 0.2s ease;
  pointer-events: none;
}
.pl-gnb__cta:hover::before,
.pl-gnb__mobile-cta:hover::before {
  background: var(--pl-alpha-brand-12);
}
.pl-gnb__cta:active::before,
.pl-gnb__mobile-cta:active::before {
  background: var(--pl-alpha-brand-24);
}
.pl-gnb__cta:focus-visible,
.pl-gnb__mobile-cta:focus-visible {
  outline: 2px solid var(--pl-border-brand-default);
  outline-offset: 2px;
}

/* PC 사이즈 */
.pl-gnb__cta {
  height: 36px;
  padding: 0 var(--pl-spacing-6);
  margin-left: var(--pl-spacing-4);
  font-size: 15px;
}

/* 모바일 사이즈 */
.pl-gnb__mobile-cta {
  height: 52px;
  margin-top: var(--pl-spacing-7);
  padding: 0 var(--pl-spacing-8);
  font-size: 18px;
}


/* ============================================
   8. Review — 카드 자동 높이 + 해시태그 뱃지

   - 본문 텍스트 밑 여백이 없는 건 카드가 height: 341px 고정이라
     긴 텍스트가 하단 패딩까지 채우기 때문.
     height → min-height 로 바꿔서 길면 늘어나도록 변경.
   - "스페이스원 학부모" 자리에 해시태그 칩 (.pl-hashtag-chip).
     pl-review-card 의 info 속성은 HTML 을 그대로 innerHTML 로 박아주므로
     칩 마크업을 직접 넘김 (index.html 참고).
   ============================================ */

/* 섹션 배경 — 라이브러리 기본 흰색 → 살몬 옅은 핑크 (브랜드 톤 깔기) */
.pl-review {
  background: var(--pl-bg-brand-soft);
}

.pl-review--grid .pl-review-card--grid {
  position: relative;          /* user-info(absolute) 의 컨테이닝 블록 */
  height: auto;
  min-height: 400px;
  padding-bottom: 84px;        /* 칩 영역 자리 확보 */
}

/* PC: 카드 3개를 컨테이너 폭에 균등 분배 (정사각 근사 비율)
   라이브러리 기본 flex: 0 0 300px → flex: 1 1 0 으로 override.
   max-width: var(--pl-container-wide) (1400) - padding 80 - gap 48 ≒ 카드당 424px → 정사각 근사. */
@container section (min-width: 1200px) {
  .pl-review--grid .pl-review-grid__row--first {
    align-items: stretch;       /* 카드 3개 같은 높이로 */
  }
  .pl-review--grid .pl-review-card--grid {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    min-height: 420px;          /* 폭(~424px) 과 비슷한 정사각 */
  }
}

@container section (max-width: 1199px) {
  .pl-review--grid .pl-review-card--grid {
    min-height: 390px;
    padding-bottom: 84px;
  }
}

@container section (max-width: 639px) {
  .pl-review--grid .pl-review-card--grid {
    min-height: 360px;
    padding-bottom: 76px;
  }
}

/* 해시태그 칩 그룹 — 본문 텍스트 아래(카드 하단) 로 absolute 배치
   이름 라인에서 칩 너비를 떼어내야 "엘디엄마, 요디" 같은 긴 닉네임이 깨지지 않음. */
.pl-review--grid .pl-review-card__user-info {
  position: absolute;
  left: var(--pl-spacing-7);
  right: var(--pl-spacing-7);
  bottom: var(--pl-spacing-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pl-spacing-2);
}

@container section (max-width: 1199px) {
  .pl-review--grid .pl-review-card__user-info {
    left: var(--pl-spacing-7);
    right: var(--pl-spacing-7);
    bottom: var(--pl-spacing-7);
  }
}

@container section (max-width: 639px) {
  .pl-review--grid .pl-review-card__user-info {
    left: var(--pl-spacing-6);
    right: var(--pl-spacing-6);
    bottom: var(--pl-spacing-6);
  }
}

/* ─────────────────────────────────────────────
   카드 레이아웃 재배치: photo 상단 가득 + 이름·칩을 본문 아래로
   요구사항 "지금 요소 그대로 위치만" → 마크업 미수정, CSS-only.

   reviewer 에 display: contents 를 주면 wrapper 가 무력화돼
   photo·user 가 article 의 직속 flex item 이 되고,
   order 로 자유 재배치 가능.

   순서:
     1. photo (정사각 이미지)
     2. stars
     3. content (본문)
     4. user (구분선 + 이름 + 해시태그 칩) — order 마지막
   ───────────────────────────────────────────── */

.pl-review--grid .pl-review-card--grid {
  padding: 0 0 var(--pl-spacing-7) 0; /* 라이브러리 좌우 24/상하 40 padding 해제 — 자식들이 직접 처리 */
  padding-bottom: var(--pl-spacing-7); /* user 영역 하단 24px */
  overflow: hidden; /* photo top corner radius 안전 */
}

.pl-review--grid .pl-review-card__reviewer {
  display: contents;
}

/* photo: 카드 상단 가득 + 명시적 높이 (정사각 X — 카드가 너무 세로로 길어지는 느낌 방지) */
.pl-review--grid .pl-review-card__photo {
  order: 1;
  width: 100%;
  height: 300px;
  border-radius: 0; /* 라이브러리 50% 동그라미 해제 */
  background: var(--pl-grayscale-10);
  overflow: hidden;
  margin: 0;
}
.pl-review--grid .pl-review-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* stars / content : 좌우 24px padding 자체 처리 */
.pl-review--grid .pl-review-card__stars {
  order: 2;
  margin: 0 var(--pl-spacing-7);
}
.pl-review--grid .pl-review-card--grid .pl-review-card__content {
  order: 3;
  margin: 0 var(--pl-spacing-7);
  flex: 1; /* 짧은 카드의 빈 공간 흡수 → user 영역이 카드 바닥에 정렬 */
}

/* user: 본문 아래로 + 위에 구분선 + column 레이아웃 (이름 / 칩) */
.pl-review--grid .pl-review-card__user {
  order: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pl-spacing-4);
  margin: 0 var(--pl-spacing-7);
  padding-top: var(--pl-spacing-5);
  border-top: 1px solid var(--pl-border-layer-soft);
}

/* __user-info: absolute(하단 고정) 해제 → 흐름 안으로 복귀 */
.pl-review--grid .pl-review-card__user-info {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
}

/* photo 영역이 추가됐으니 칩 자리 확보용 padding-bottom·min-height 무력화
   + 라이브러리가 강제하는 height(태블릿 327 / 모바일 304) 도 풀어줌 */
.pl-review--grid .pl-review-card--grid {
  min-height: 0;
  height: auto;
}

/* 리뷰 섹션 컨테이너 — row 1200px, 좌우 padding 없음 */
.pl-review--grid .pl-review-grid {
  padding: 0; /* 라이브러리 PC padding 좌우 40 제거 */
}

@container section (min-width: 1200px) {
  .pl-review--grid .pl-review-grid {
    max-width: 1200px;
  }
  .pl-review--grid .pl-review-card--grid {
    min-height: 0;
    height: auto;
  }
}

/* 태블릿: 라이브러리 2x2 grid + 3번째 풀폭(height 267) 패턴이
   카드 3개·photo 정사각 구조에 안 맞아 1,2 짜부 + 3번 안 보임.
   → 3 columns 균등 분배 + 라이브러리 마지막 카드 풀폭 룰 무력화. */
@container section (max-width: 1199px) {
  .pl-review--grid .pl-review-grid__row {
    grid-template-columns: repeat(3, 1fr);
  }
  .pl-review--grid .pl-review-grid__row .pl-review-card--grid:last-child:nth-child(odd) {
    grid-column: auto;
    height: auto;
  }
  .pl-review--grid .pl-review-card--grid {
    min-height: 0;
    height: auto;
    padding-bottom: var(--pl-spacing-7);
  }
  .pl-review--grid .pl-review-card__photo {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@container section (max-width: 639px) {
  /* 카드 사이 세로 갭 — 라이브러리 20 → 32 */
  .pl-review--grid .pl-review-grid__row,
  .pl-review--grid .pl-review-grid__row--first {
    gap: var(--pl-spacing-8);
  }
  .pl-review--grid .pl-review-card--grid {
    min-height: 0;
    height: auto;
    padding-bottom: var(--pl-spacing-6);
  }
  .pl-review--grid .pl-review-card__photo {
    height: auto;
    aspect-ratio: 2 / 1; /* width 카드 폭 유지, 높이 절반 (모바일 너무 크던 문제) */
  }
  .pl-review--grid .pl-review-card__stars,
  .pl-review--grid .pl-review-card--grid .pl-review-card__content,
  .pl-review--grid .pl-review-card__user {
    margin-left: var(--pl-spacing-6);
    margin-right: var(--pl-spacing-6);
  }
}

/* 해시태그 칩 — 옐로우 계열, 컴팩트 사이즈 */
.pl-hashtag-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--pl-spacing-3) 4px; /* top 3 / bottom 4 — 한글 baseline 시각 중앙 보정 */
  background: var(--pl-yellow-5);
  color: var(--pl-yellow-80);
  border-radius: var(--pl-radius-circle);
  font-size: 12px;
  font-weight: var(--pl-font-weight-bold);
  line-height: 1; /* 칩 내부 텍스트 가운데 정렬 — 불필요한 line-height 여백 제거 */
  white-space: nowrap;
}


/* ============================================
   9. Floating CTA — 스크롤 따라다니는 sticky 바

   원본은 .pl-cta--floating 섹션 안에 position: absolute 로 들어가 있었는데,
   해당 섹션은 container-type: inline-size 라 contain: layout 이 걸려
   안에서 position: fixed 를 줘도 컨테이닝 블록이 섹션이 돼버려
   스크롤을 따라가지 못함.
   → index.html 에서 바를 섹션 밖, body 직속으로 이동시킨 뒤
     아래 .pl-cta-floating-b--sticky 로 뷰포트 fixed 처리.
   섹션 밖이라 @container section 미디어쿼리는 동작 안 함 → @media 사용.
   ============================================ */

.pl-cta-floating-b--sticky {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  margin: 0;
  background: var(--pl-bg-layer-default);
  border-color: var(--pl-border-brand-default);
}

/* 콘텐츠 마지막 줄이 바에 가리지 않도록 body 하단 여유 */
body {
  padding-bottom: var(--pl-spacing-14); /* 100px */
}

@media (max-width: 1199px) {
  /* 태블릿 이하: 화면 폭 가득 차는 하단 고정 바 — 슬림하게 */
  .pl-cta-floating-b--sticky {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    height: auto;
    padding: 14px var(--pl-spacing-8) 18px;
    border-radius: 0;
    border-width: 2px 0 0 0;
    border-style: solid;
    box-shadow: none;
  }
  .pl-cta-floating-b--sticky .pl-cta-floating-b__text {
    font-size: 18px;
    text-align: center;
    white-space: normal;
  }
  .pl-cta-floating-b--sticky .pl-cta-floating-b__buttons {
    width: 100%;
    gap: 8px;
  }
  .pl-cta-floating-b--sticky.pl-cta-floating-b--single .pl-cta-floating-b__btn {
    min-width: auto;
  }
  .pl-cta-floating-b--sticky .pl-cta-floating-b__btn {
    flex: 1;
    height: 46px;
  }
  .pl-cta-floating-b--sticky .pl-cta-floating-b__label {
    font-size: 18px;
  }

  body {
    padding-bottom: 130px; /* 태블릿 바 높이 + 여유 */
  }
}

@media (max-width: 639px) {
  .pl-cta-floating-b--sticky {
    padding: 12px var(--pl-spacing-6) 16px;
    gap: 12px;
  }
  /* 모바일에서 "스페이스원이 처음이신가요?" 텍스트 숨김 (양쪽 페이지 공통) */
  .pl-cta-floating-b--sticky .pl-cta-floating-b__text {
    display: none;
  }
  .pl-cta-floating-b--sticky .pl-cta-floating-b__buttons {
    flex-direction: row;
    gap: 6px;
  }
  .pl-cta-floating-b--sticky .pl-cta-floating-b__btn {
    flex: 1;
    height: 44px;
    border-radius: 999px;
  }
  .pl-cta-floating-b--sticky .pl-cta-floating-b__label {
    font-size: 16px;
  }

  body {
    padding-bottom: 100px;
  }
}


/* ============================================
   11. Curriculum Gantt — 메인 페이지 연령 × 영역 차트

   lovable 레퍼런스 기반. 6 컬럼(0~1세 ~ 6세) × 3 영역(문해력/사고력/창의력).
   막대 클릭 → curriculum.html 해당 탭으로 hash 이동 (탭 활성화 로직 기존).
   컬러는 core scale (red/blue/green) 으로 직접 매핑.
   ============================================ */

.pl-curriculum-gantt {
  width: 100%;
  background: var(--pl-yellow-5); /* 연한 노란색 섹션 배경 */
  container-type: inline-size;
  container-name: section;
}

.pl-curriculum-gantt__container {
  display: flex;
  flex-direction: column;
  gap: var(--pl-spacing-12);
  padding: var(--pl-layout-body-top) var(--pl-layout-padding) var(--pl-layout-body-bottom);
  max-width: var(--pl-container-default);
  margin: 0 auto;
}

/* 2P 진입 CTA — 메인 간트(한눈) → curriculum.html(상세) 명시적 연결 */
.pl-curriculum-gantt__more {
  display: flex;
  justify-content: center;
  margin-top: var(--pl-spacing-8);
}

.pl-curriculum-gantt__chart {
  width: 100%;
  border-radius: var(--pl-radius-3);
  overflow: hidden;
  border: 1px solid var(--pl-border-layer-soft);
}

/* Row: 좌측 라벨(고정 폭) + 6 컬럼 콘텐츠 */
.pl-curriculum-gantt__row,
.pl-curriculum-gantt__group {
  display: flex;
  width: 100%;
}

.pl-curriculum-gantt__cols {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

/* ── 헤더 행 ── */
.pl-curriculum-gantt__corner {
  flex-shrink: 0;
  width: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pl-spacing-3) var(--pl-spacing-2);
  background: var(--pl-bg-brand-default);
  color: var(--pl-static-white);
  font-size: var(--pl-font-size-label-md);
  font-weight: var(--pl-font-weight-bold);
}

.pl-curriculum-gantt__age {
  padding: var(--pl-spacing-3) 0;
  text-align: center;
  font-size: var(--pl-font-size-label-md);
  font-weight: var(--pl-font-weight-bold);
}

/* 연령 진행에 따라 단계적으로 진해짐 (red scale) */
.pl-curriculum-gantt__age--1 { background: linear-gradient(135deg, var(--pl-red-10), var(--pl-red-20)); color: var(--pl-red-80); }
.pl-curriculum-gantt__age--2 { background: linear-gradient(135deg, var(--pl-red-20), var(--pl-red-30)); color: var(--pl-red-80); }
.pl-curriculum-gantt__age--3 { background: linear-gradient(135deg, var(--pl-red-30), var(--pl-red-40)); color: var(--pl-static-white); }
.pl-curriculum-gantt__age--4 { background: linear-gradient(135deg, var(--pl-red-40), var(--pl-red-50)); color: var(--pl-static-white); }
.pl-curriculum-gantt__age--5 { background: linear-gradient(135deg, var(--pl-red-50), var(--pl-red-50)); color: var(--pl-static-white); }
.pl-curriculum-gantt__age--6 { background: linear-gradient(135deg, var(--pl-red-50), var(--pl-red-60)); color: var(--pl-static-white); }

/* ── 영역 행 (group) ── */
.pl-curriculum-gantt__group {
  border-top: 1px solid var(--pl-border-layer-soft);
}

.pl-curriculum-gantt__group-label {
  flex-shrink: 0;
  width: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  font-size: var(--pl-font-size-label-md);
  font-weight: var(--pl-font-weight-bold);
  color: var(--pl-static-white);
  text-decoration: none;
  letter-spacing: 0.1em;
  transition: filter 0.2s ease;
  cursor: pointer;
}

.pl-curriculum-gantt__group-label:hover {
  filter: brightness(1.08);
}

.pl-curriculum-gantt__group-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pl-curriculum-gantt__bar-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 3px 4px;
  border-bottom: 1px solid var(--pl-border-layer-soft);
}

.pl-curriculum-gantt__bar-row:last-child {
  border-bottom: none;
}

.pl-curriculum-gantt__bar {
  grid-column: var(--c-start) / var(--c-end);
  margin: 0 3px; /* 막대 셀 사이 좁은 간격, 토큰 없음 */
  height: var(--pl-spacing-9); /* 40px */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pl-spacing-3);
  border-radius: var(--pl-radius-2);
  color: var(--pl-static-white);
  font-size: var(--pl-font-size-label-md);
  font-weight: var(--pl-font-weight-bold);
  text-decoration: none;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.pl-curriculum-gantt__bar:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 0 2px var(--pl-alpha-white-60);
}

/* ── 호버 툴팁 (body 직속 absolute, JS 가 위치 잡음) ── */
.pl-curriculum-gantt__tooltip {
  position: absolute;
  z-index: 100;
  background: var(--pl-bg-layer-default);
  border: 1px solid var(--pl-border-layer-soft);
  border-radius: var(--pl-radius-3);
  box-shadow: var(--pl-shadow-xl); /* = 0 8px 24px var(--pl-alpha-black-12) */
  padding: var(--pl-spacing-6); /* 20px */
  max-width: 320px;
  pointer-events: none;
  animation: pl-cg-tip-in 0.12s ease-out;
}

@keyframes pl-cg-tip-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 헤더: chip + name 한 행 */
.pl-curriculum-gantt__tooltip-head {
  display: flex;
  align-items: center;
  gap: var(--pl-spacing-3);
  margin-bottom: var(--pl-spacing-4); /* 12px — 헤더와 연령 사이 호흡 */
}

.pl-curriculum-gantt__tooltip-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--pl-spacing-1) var(--pl-spacing-3); /* 2px 8px */
  border-radius: var(--pl-radius-circle);
  font-size: var(--pl-font-size-label-sm); /* 14px */
  font-weight: var(--pl-font-weight-bold);
  color: var(--pl-static-white);
  line-height: 1.4;
  white-space: nowrap;
}
.pl-curriculum-gantt__tooltip-chip--literacy   { background: var(--pl-red-40); }
.pl-curriculum-gantt__tooltip-chip--thinking   { background: var(--pl-blue-30); }
.pl-curriculum-gantt__tooltip-chip--creativity { background: var(--pl-green-50); }

.pl-curriculum-gantt__tooltip-name {
  font-size: var(--pl-font-size-body-md); /* 18px */
  font-weight: var(--pl-font-weight-bold);
  color: var(--pl-fg-neutral-primary);
  line-height: 1.4;
}

/* 연령 — 브랜드 컬러 강조, 본문과 명확히 분리 */
.pl-curriculum-gantt__tooltip-age {
  font-size: var(--pl-font-size-label-sm); /* 14px — 부수 정보 톤다운 */
  color: var(--pl-fg-brand-primary);
  font-weight: var(--pl-font-weight-bold);
  line-height: 1.4;
  margin: 0 0 var(--pl-spacing-5); /* 16px — content 와 분리 */
}

/* 본문(content) + 효과(effect) */
.pl-curriculum-gantt__tooltip-content {
  font-size: var(--pl-font-size-label-sm); /* 14px — 부수 정보라 작게 */
  color: var(--pl-fg-neutral-tertiary);
  line-height: 1.6;
  margin: 0;
}

/* 영역별 컬러 — group label + bars 같은 톤 */
.pl-curriculum-gantt__group--literacy .pl-curriculum-gantt__group-label,
.pl-curriculum-gantt__group--literacy .pl-curriculum-gantt__bar {
  background: linear-gradient(135deg, var(--pl-red-30), var(--pl-red-40));
}
.pl-curriculum-gantt__group--literacy .pl-curriculum-gantt__group-bars {
  background: var(--pl-red-5);
}

.pl-curriculum-gantt__group--thinking .pl-curriculum-gantt__group-label,
.pl-curriculum-gantt__group--thinking .pl-curriculum-gantt__bar {
  background: linear-gradient(135deg, var(--pl-blue-20), var(--pl-blue-30));
}
.pl-curriculum-gantt__group--thinking .pl-curriculum-gantt__group-bars {
  background: var(--pl-blue-5);
}

.pl-curriculum-gantt__group--creativity .pl-curriculum-gantt__group-label,
.pl-curriculum-gantt__group--creativity .pl-curriculum-gantt__bar {
  background: linear-gradient(135deg, var(--pl-green-50), var(--pl-green-60));
}
.pl-curriculum-gantt__group--creativity .pl-curriculum-gantt__group-bars {
  background: var(--pl-green-5);
}

/* ── Tablet ── */
@container section (max-width: 1199px) {
  .pl-curriculum-gantt__corner,
  .pl-curriculum-gantt__group-label {
    width: 60px;
  }
  .pl-curriculum-gantt__age,
  .pl-curriculum-gantt__bar {
    font-size: var(--pl-font-size-label-sm);
  }
}

/* ── Mobile ── */
@container section (max-width: 639px) {
  .pl-curriculum-gantt__container {
    gap: var(--pl-spacing-10);
    padding: var(--pl-layout-body-top) var(--pl-spacing-6) var(--pl-layout-body-bottom);
  }
  .pl-curriculum-gantt__corner,
  .pl-curriculum-gantt__group-label {
    width: 44px;
  }
  .pl-curriculum-gantt__age,
  .pl-curriculum-gantt__bar {
    font-size: 11px; /* Figma 없음, 6컬럼 좁아서 차트 칸 가독성 한계로 직접 지정 */
  }
  .pl-curriculum-gantt__bar {
    height: 36px;
    margin: 0 2px;
    padding: 0 var(--pl-spacing-2);
  }
  .pl-curriculum-gantt__bar-row {
    padding: 2px 3px;
  }
}


/* ============================================
   12. Smooth scroll + 스크롤 진입 애니메이션

   - 헤더 메뉴 클릭 시 자연스러운 smooth scroll
   - scroll-padding-top 으로 GNB 높이만큼 anchor offset → 섹션 타이틀 위 여백 확보
   - 스크롤 중 viewport 진입한 주요 요소들이 fade-up (opacity + translateY)
   - JS(IntersectionObserver) 가 .is-visible 클래스 부여
   - prefers-reduced-motion 사용자에겐 모션 모두 disable
   ============================================ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 74px; /* PC GNB 높이 — 섹션 anchor 위 여백 */
}

@media (max-width: 1199px) {
  html { scroll-padding-top: 60px; } /* 태블릿 GNB */
}

@media (max-width: 639px) {
  html { scroll-padding-top: 66px; } /* 모바일 GNB */
}

.pl-anim-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.pl-anim-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pl-anim-fade-up,
  .pl-anim-fade-up.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================
   12b. Curriculum 2P — 탭 = scroll anchor + 영역 헤더

   - 탭은 anchor 점프 (panel toggle 아님)
   - 모든 panel 항상 펼침 → 스크롤로 영역 탐색
   - 스크롤에 따라 active 탭 자동 변경 (scroll spy, JS)
   - 탭 nav 는 viewport full width + GNB 아래 sticky
   ============================================ */

/* 모든 panel 펼치기 (라이브러리 .pl-tab-panel:not(.is-active) { display: none } override) */
.pl-about--tab .pl-tab-panel {
  display: block !important;
}

/* 사고력 영역만 viewport full 연한 옐로우 배경 — 마진 안 건드리고 box-shadow + clip-path 트릭 */
.pl-about--tab .pl-tab-panel#thinking {
  background: var(--pl-yellow-5);
  box-shadow: 0 0 0 100vmax var(--pl-yellow-5);
  clip-path: inset(0 -100vmax);
}

/* 탭 nav sticky + viewport full width — GNB 와 같은 패턴.
   기본(상단 미접촉): 보더 없음
   .is-stuck (스크롤로 GNB 아래 붙음): 하단 보더 표시 */
.pl-about--tab .pl-tab-nav,
.pl-about--tab .pl-tab-nav-mobile {
  position: sticky;
  top: 74px; /* PC GNB 높이 */
  z-index: 50;
  /* viewport 끝까지 (container 폭 무시) */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: var(--pl-spacing-5);
  padding-bottom: var(--pl-spacing-5);
  border: none;
  background: var(--pl-alpha-white-80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: none; /* 기본 — 보더 없음 */
  transition: box-shadow 0.2s ease;
}

.pl-about--tab .pl-tab-nav.is-stuck,
.pl-about--tab .pl-tab-nav-mobile.is-stuck {
  box-shadow: 0 1px 0 var(--pl-alpha-black-08);
}

/* 탭 버튼 — underline 디자인 (스크린샷 패턴) */
.pl-about--tab .pl-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: var(--pl-spacing-3) var(--pl-spacing-5);
  color: var(--pl-fg-neutral-tertiary);
  font-weight: var(--pl-font-weight-default);
  transition: color 0.2s, border-color 0.2s, font-weight 0.2s;
}
.pl-about--tab .pl-tab-btn:hover {
  background: transparent;
  color: var(--pl-fg-neutral-primary);
}
.pl-about--tab .pl-tab-btn.is-active {
  background: transparent;
  color: var(--pl-fg-brand-primary);
  border-bottom-color: var(--pl-fg-brand-primary);
  font-weight: var(--pl-font-weight-bold);
}

@media (max-width: 1199px) {
  .pl-about--tab .pl-tab-nav,
  .pl-about--tab .pl-tab-nav-mobile {
    top: 60px;
  }
}

@media (max-width: 639px) {
  .pl-about--tab .pl-tab-nav,
  .pl-about--tab .pl-tab-nav-mobile {
    top: 66px;
  }
}

/* 영역 헤더 — 칩 + 큰 타이틀 + 설명, 가운데 정렬 */
.pl-program-list__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--pl-spacing-5);
  padding: var(--pl-spacing-13) 0 var(--pl-spacing-9); /* 80 / 40 */
}

.pl-program-list__chip {
  display: inline-flex;
  align-items: center;
  padding: 7px var(--pl-spacing-5) 4px;
  border-radius: var(--pl-radius-circle);
  font-size: var(--pl-font-size-label-md);
  font-weight: var(--pl-font-weight-bold);
  color: var(--pl-static-white);
  line-height: 1;
}
.pl-program-list__chip--literacy   { background: var(--pl-red-40); }
.pl-program-list__chip--thinking   { background: var(--pl-blue-50); }
.pl-program-list__chip--creativity { background: var(--pl-green-50); }

.pl-program-list__title {
  font-size: var(--pl-font-size-header-lg); /* 34px PC */
  font-weight: var(--pl-font-weight-bold);
  color: var(--pl-fg-neutral-primary);
  line-height: 1.3;
  margin: 0;
}

.pl-program-list__desc {
  font-size: var(--pl-font-size-body-md);
  color: var(--pl-fg-neutral-secondary);
  line-height: 1.6;
  margin: 0;
}

@container section (max-width: 1199px) {
  .pl-program-list__header {
    padding: var(--pl-spacing-11) 0 var(--pl-spacing-8);
  }
  .pl-program-list__title {
    font-size: var(--pl-font-size-header-md); /* 30px */
  }
}

@container section (max-width: 639px) {
  .pl-program-list__header {
    padding: var(--pl-spacing-9) 0 var(--pl-spacing-7);
    gap: var(--pl-spacing-4);
  }
  .pl-program-list__title {
    font-size: var(--pl-font-size-header-sm); /* 26px */
  }
  .pl-program-list__desc {
    font-size: var(--pl-font-size-body-sm);
  }
}


/* ============================================
   13. Curriculum 2P — 프로그램 카드 (Row Alt 패턴)
   각 영역 탭 안에 4개 카드, 좌·우 교차 레이아웃.
   .pl-tab-panel 안에 직접 들어가는 spaceone 전용 컴포넌트.
   ============================================ */

.pl-program-alt {
  display: flex;
  flex-direction: column;
  gap: var(--pl-spacing-14); /* 100px */
  padding: var(--pl-spacing-10) 0;
}

.pl-program-alt__item {
  display: flex;
  align-items: center;
  gap: var(--pl-spacing-11); /* 60px */
  position: relative; /* logo absolute 컨테이닝 블록 */
}

.pl-program-alt__item--reverse {
  flex-direction: row-reverse;
}

/* 로고: 텍스트 영역의 헤드 row (카테고리 칩 옆) 우측에 위치
   - 모든 로고가 동일 박스 (120×40) 안에 contain 으로 fit → 시각 사이즈 일관 */
.pl-program-alt__head {
  display: flex;
  align-items: center; /* 카테고리 칩 + 로고 세로 중앙 정렬 */
  justify-content: space-between;
  gap: var(--pl-spacing-4);
}

/* 로고 — 기본 height 32px (가로형 로고들 대상)
   img 자체에 height 명시 → 박스는 자식에 맞춰 자연 크기 */
.pl-program-alt__logo {
  flex-shrink: 0;
  max-width: 160px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pl-program-alt__logo img {
  height: 32px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* 키즈스콜레만 세로형(거의 정사각)이라 더 크게 */
.pl-program-alt__logo img[src*="kidsshole"] {
  height: 56px;
}

/* 텍스트 */
.pl-program-alt__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--pl-spacing-5);
}

.pl-program-alt__category {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 5px var(--pl-spacing-4) 4px;
  border-radius: var(--pl-radius-circle);
  font-size: var(--pl-font-size-label-sm);
  font-weight: var(--pl-font-weight-bold);
  color: var(--pl-static-white);
  line-height: 1;
}
.pl-program-alt__category--literacy   { background: var(--pl-red-40); }
.pl-program-alt__category--thinking   { background: var(--pl-blue-50); }
.pl-program-alt__category--creativity { background: var(--pl-green-50); }

.pl-program-alt__title {
  font-size: var(--pl-font-size-header-md); /* 30px */
  font-weight: var(--pl-font-weight-bold);
  color: var(--pl-fg-neutral-primary);
  line-height: 1.4;
  margin: 0;
}

.pl-program-alt__desc {
  font-size: var(--pl-font-size-body-md);
  color: var(--pl-fg-neutral-secondary);
  line-height: 1.6;
  margin: 0;
}

/* 라인 뱃지 (해시태그) — 브랜드 컬러 outline */
.pl-program-alt__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-spacing-4); /* 12px — 뱃지 사이 여백 */
  margin: var(--pl-spacing-2) 0 0;
}

.pl-program-alt__tag {
  display: inline-flex;
  align-items: center;
  padding: 5px var(--pl-spacing-3) 4px;
  border: 1px solid var(--pl-fg-brand-primary);
  border-radius: var(--pl-radius-circle);
  font-size: var(--pl-font-size-label-sm);
  font-weight: var(--pl-font-weight-bold);
  color: var(--pl-fg-brand-primary);
  background: var(--pl-static-white);
  line-height: 1;
  white-space: nowrap;
}

/* 메타 — 대상 / 기간 / 시간 */
.pl-program-alt__meta {
  display: flex;
  flex-direction: column;
  gap: var(--pl-spacing-3);
  margin: var(--pl-spacing-5) 0 0;
  padding-top: var(--pl-spacing-5);
  border-top: 1px solid var(--pl-border-layer-soft);
}

.pl-program-alt__meta-item {
  display: flex;
  align-items: baseline;
  gap: var(--pl-spacing-4);
}

/* dt / dd — body-sm (16px, viewport 고정) */
.pl-program-alt__meta dt {
  flex-shrink: 0;
  width: 60px;
  font-size: var(--pl-font-size-body-sm); /* 16px */
  font-weight: var(--pl-font-weight-bold);
  color: var(--pl-fg-neutral-tertiary);
  line-height: 1.4;
}

.pl-program-alt__meta dd {
  margin: 0;
  font-size: var(--pl-font-size-body-sm); /* dt 와 동일 16px */
  font-weight: var(--pl-font-weight-bold);
  color: var(--pl-fg-neutral-primary);
  line-height: 1.4;
}

.pl-program-alt__meta-empty {
  color: var(--pl-fg-neutral-lowest);
  font-style: italic;
  font-size: var(--pl-font-size-label-sm);
}

/* 이미지 */
.pl-program-alt__image {
  flex: 1;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--pl-grayscale-10);
  border-radius: var(--pl-radius-3);
  overflow: hidden;
}

.pl-program-alt__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Tablet ── */
@container section (max-width: 1199px) {
  .pl-program-alt {
    gap: var(--pl-spacing-11);
  }
  .pl-program-alt__item,
  .pl-program-alt__item--reverse {
    flex-direction: column;
    align-items: stretch; /* 모바일/태블릿 column 에서 텍스트·이미지 모두 풀 너비로 — 좌우 여백 비대칭 방지 */
    gap: var(--pl-spacing-7);
  }
  .pl-program-alt__title {
    font-size: var(--pl-font-size-header-sm); /* 26px */
  }
  .pl-program-alt__logo {
    max-width: 130px;
  }
  .pl-program-alt__logo img { height: 28px; }
  .pl-program-alt__logo img[src*="kidsshole"] { height: 48px; }
}

/* ── Mobile ── */
@container section (max-width: 639px) {
  /* 안쪽 tab-container 좌우 padding 제거 — 바깥 section__container 와 이중 겹침 방지 */
  .pl-about--tab .pl-tab-container {
    padding-left: 0;
    padding-right: 0;
  }
  .pl-program-alt {
    gap: var(--pl-spacing-13); /* 80px — 카드 사이 여백 여유 (이전 48) */
    padding: var(--pl-spacing-10) 0;
  }
  .pl-program-alt__item,
  .pl-program-alt__item--reverse {
    gap: var(--pl-spacing-9); /* 40px — 텍스트↔이미지 사이 여백 (이전 20) */
  }
  .pl-program-alt__title {
    font-size: var(--pl-font-size-title-lg); /* 24px */
  }
  .pl-program-alt__desc {
    font-size: var(--pl-font-size-body-sm);
  }
  .pl-program-alt__logo {
    max-width: 100px;
  }
  .pl-program-alt__logo img { height: 24px; }
  .pl-program-alt__logo img[src*="kidsshole"] { height: 40px; }
}


/* ============================================
   14. About 인포 박스 — 다크 카드 안 2컬럼
   좌: FLOOR GUIDE (green/teal 톤) — 우: STAY CONNECTED (red/coral 톤)
   ============================================ */

/* CTA finish 배경 — 라이브러리 기본 brand-soft(핑크) → 흰색.
   About 인포 박스 섹션이 핑크라 그 다음 CTA 도 핑크면 시각 분리가 사라짐 → 흰으로. */
.pl-cta--finish {
  background: var(--pl-bg-layer-default);
}


/* 섹션 배경 — 푸터(--pl-bg-layer-default)와 동일한 흰색으로 자연스러운 이어짐.
   푸터 border-top 한 줄로만 약하게 분리됨. */
.pl-about-info {
  width: 100%;
  background: var(--pl-bg-layer-default);
  container-type: inline-size;
  container-name: section;
}

.pl-about-info__container {
  max-width: var(--pl-container-default);
  margin: 0 auto;
  padding: var(--pl-layout-body-top) var(--pl-layout-padding) var(--pl-layout-body-bottom);
}

.pl-about-info__box {
  display: flex;
  flex-direction: column;
  gap: var(--pl-spacing-10); /* 타이틀 ↔ 그리드 */
  /* 컨텐츠 자체에 추가 상단 여백 — body-top 은 그대로 두고, 위쪽 빈 공간이
     아래(body-bottom)와 시각적으로 대칭되도록 차이만큼 보충 */
  padding-top: calc(var(--pl-layout-body-bottom) - var(--pl-layout-body-top));
}

/* 그리드 — 5:5 (FLOOR / SNS 동등 비중, 시각적으로 어느 한쪽 강조되지 않게) */
.pl-about-info__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pl-spacing-6);
}

/* 내부 카드 — 회색 1px 라인 + 투명 배경 (심플 정렬, 브랜드 컬러는 포인트로만) */
.pl-about-info__card {
  background: transparent;
  border-radius: var(--pl-radius-3);
  border: 1px solid var(--pl-border-layer-soft);
  padding: var(--pl-spacing-5);
  display: flex;
  flex-direction: column;
  box-shadow: none;
}

/* 카드 헤더 (아이콘 + 라벨 + 선) */
.pl-about-info__card-head {
  display: flex;
  align-items: center;
  gap: var(--pl-spacing-3);
  margin-bottom: var(--pl-spacing-4);
}

.pl-about-info__card-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--pl-radius-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--pl-font-weight-bold);
  flex-shrink: 0;
  background: var(--pl-bg-brand-soft);
  color: var(--pl-fg-brand-primary);
}

.pl-about-info__card-label {
  font-size: 11px;
  font-weight: var(--pl-font-weight-bold);
  letter-spacing: 0.2em;
  color: var(--pl-fg-brand-primary); /* 브랜드 컬러 포인트 */
}

.pl-about-info__card-line {
  flex: 1;
  height: 1px;
  background: var(--pl-border-layer-soft); /* 회색 라인 */
}

/* 항목 리스트 */
.pl-about-info__items {
  display: flex;
  flex-direction: column;
  gap: var(--pl-spacing-3);
  flex: 1;
}

.pl-about-info__item {
  display: flex;
  align-items: center;
  gap: var(--pl-spacing-3);
  padding: var(--pl-spacing-3) var(--pl-spacing-4);
  border-radius: var(--pl-radius-2);
  text-decoration: none;
  transition: background 0.2s ease;
  flex: 1;
  background: transparent;
}
.pl-about-info__item:hover {
  background: var(--pl-alpha-brand-12); /* 호버 시만 브랜드 알파 살짝 */
}

/* 층 배지 — 회색 톤 + 브랜드 컬러 텍스트만 포인트 */
.pl-about-info__floor-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 2px var(--pl-spacing-3);
  background: transparent;
  border: 1px solid var(--pl-border-layer-soft);
  color: var(--pl-fg-brand-primary);
  border-radius: var(--pl-radius-circle);
  font-size: 11px;
  font-weight: var(--pl-font-weight-bold);
  letter-spacing: 0.05em;
  flex-shrink: 0;
  line-height: 1.4;
}

/* SNS 아이콘 */
.pl-about-info__sns-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: var(--pl-font-weight-bold);
  font-size: var(--pl-font-size-body-md);
}

.pl-about-info__sns-icon--kakao     { background: #FEE500; color: #3B1E1E; }
.pl-about-info__sns-icon--blog      { background: #03C75A; color: var(--pl-static-white); }
.pl-about-info__sns-icon--instagram {
  background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF);
  color: var(--pl-static-white);
}

/* 항목 텍스트 */
.pl-about-info__item-text {
  flex: 1;
  font-size: var(--pl-font-size-label-sm);
  font-weight: var(--pl-font-weight-bold);
  color: var(--pl-fg-neutral-primary);
}

/* 외부 링크 아이콘 */
.pl-about-info__item-icon {
  color: var(--pl-fg-neutral-tertiary);
  flex-shrink: 0;
  transition: color 0.2s;
}
.pl-about-info__item:hover .pl-about-info__item-icon { color: var(--pl-fg-brand-primary); }

/* 반응형 — Tablet */
@media (max-width: 1199px) {
  .pl-about-info__box { padding: var(--pl-spacing-11) var(--pl-spacing-8); /* 60 / 32 */ }
}

/* 반응형 — Mobile: 1 컬럼 */
@media (max-width: 639px) {
  .pl-about-info__container { padding-left: var(--pl-spacing-6); padding-right: var(--pl-spacing-6); }
  .pl-about-info__box { padding: var(--pl-spacing-10) var(--pl-spacing-6); /* 48 / 20 */ }
  .pl-about-info__grid { grid-template-columns: 1fr; gap: var(--pl-spacing-8); /* 카드 사이 32px — 시각 분리 */ }

  /* FLOOR GUIDE 배지(L층 등) ↔ STAY CONNECTED 아이콘(원형) 의 시각 높이를
     28px 로 통일 → 두 카드 행 높이 균등 */
  .pl-about-info__floor-badge {
    min-width: 40px;
    height: 28px;
    padding: 0 var(--pl-spacing-3);
    line-height: 1;
    font-size: 12px;
  }

  .pl-about-info__sns-icon {
    width: 28px;
    height: 28px;
    font-size: var(--pl-font-size-label-md);
  }

  .pl-about-info__sns-icon svg {
    width: 14px;
    height: 14px;
  }
}


/* ============================================
   15. Footer — 운영시간 라인 제거
   config.json 에서 contact.hours 를 빈 문자열로 두고, 빈 <p> 가 남기는 공간 죽임
   ============================================ */
.pl-footer__call-time:empty {
  display: none;
}