/* ============================================================
   놀이동무토왕성 | about.php 전용 스타일
   - 공통 스타일은 css/style.css에서 적용
   - 소개 페이지 전용 스타일만 이 파일에서 적용
   - 기존 화면을 유지하기 위해 원래 CSS 순서를 보존
   ============================================================ */

/* ===== 기존 about.php 스타일 블록 1 ===== */
:root {
      --intro-ink: #20342A;
      --intro-body: #52615A;
      --intro-green: #356B55;
      --intro-green-dark: #285440;
      --intro-line: #D9E3DC;
      --intro-sage: #EDF4EF;
      --intro-oat: #FAF7F1;
      --intro-deep-sage: #5A786B;
      --intro-cta: #315D4C;
    }

    body {
      background: #FFFFFF;
      color: var(--intro-ink);
    }

    .intro-hero {
      background: #FFFFFF !important;
      border-bottom: 1px solid #E6ECE7;
    }

    .intro-hero .hero-title,
    .intro-hero .stat-num,
    .intro-hero .badge-text strong {
      color: var(--intro-ink) !important;
    }

    .intro-hero .highlight,
    .intro-hero .hero-eyebrow,
    .intro-hero .badge-text span {
      color: var(--intro-green) !important;
    }

    .intro-hero .hero-desc,
    .intro-hero .stat-label {
      color: var(--intro-body) !important;
    }

    .intro-hero .hero-img-badge {
      background: #FFFFFF;
      border: 1px solid var(--intro-line);
      box-shadow: 0 14px 30px rgba(31, 54, 42, 0.10);
    }

    .intro-hero .btn-primary {
      background: var(--intro-green) !important;
      border-color: var(--intro-green) !important;
      color: #FFFFFF !important;
    }

    .intro-hero .btn-primary:hover {
      background: var(--intro-green-dark) !important;
      border-color: var(--intro-green-dark) !important;
    }

    .intro-hero .btn-outline {
      color: var(--intro-green-dark) !important;
      border-color: #AFC3B6 !important;
      background: #FFFFFF !important;
    }

    .intro-hero .btn-outline:hover {
      background: #F2F7F3 !important;
      border-color: var(--intro-green) !important;
    }

    .pain-section {
      background: var(--intro-sage) !important;
      border-top: 1px solid #E0EAE2;
      border-bottom: 1px solid #E0EAE2;
    }

    .services-section,
    .reviews-section {
      background: #FFFFFF !important;
    }

    .product-section {
      background: var(--intro-oat) !important;
      border-top: 1px solid #EEE8DD;
      border-bottom: 1px solid #EEE8DD;
    }

    .pain-section .section-title,
    .services-section .section-title,
    .product-section .section-title,
    .reviews-section .section-title,
    .pain-section .pain-card h3,
    .services-section .service-card h3,
    .product-section .product-info h3,
    .reviews-section .reviewer-name {
      color: var(--intro-ink) !important;
    }

    .pain-section .section-desc,
    .services-section .section-desc,
    .product-section .section-desc,
    .reviews-section .section-desc,
    .pain-section .pain-card p,
    .services-section .service-card p,
    .product-section .product-info p,
    .reviews-section .review-text,
    .reviews-section .reviewer-role {
      color: var(--intro-body) !important;
    }

    .pain-section .section-eyebrow,
    .services-section .section-eyebrow,
    .product-section .section-eyebrow,
    .reviews-section .section-eyebrow,
    .pain-section .accent,
    .services-section .accent,
    .product-section .accent,
    .reviews-section .accent,
    .services-section .service-link,
    .reviews-section .review-highlight-word,
    .product-section .product-badge,
    .reviews-section .review-quote-mark {
      color: var(--intro-green) !important;
    }

    .pain-section .pain-card,
    .services-section .service-card,
    .product-section .product-card,
    .reviews-section .review-card {
      background: #FFFFFF !important;
      border-color: var(--intro-line) !important;
      box-shadow: 0 8px 22px rgba(31, 54, 42, 0.05);
    }

    .pain-section .pain-card:hover,
    .services-section .service-card:hover,
    .reviews-section .review-card:hover {
      border-color: #B8CDBE !important;
      box-shadow: 0 14px 32px rgba(31, 54, 42, 0.10);
    }

    .pain-section .pain-card::before {
      color: var(--intro-green) !important;
    }

    .pain-section .pain-answer {
      background: #E6F0E8 !important;
      color: var(--intro-green-dark) !important;
      border: 1px solid #D1E1D5;
    }

    .services-section .service-icon.icon-red,
    .services-section .service-icon.icon-green,
    .services-section .service-icon.icon-yellow,
    .services-section .service-icon.icon-blue,
    .res-section .res-icon-red,
    .res-section .res-icon-green,
    .res-section .res-icon-yellow {
      background: #E9F2EB !important;
      border: 1px solid #D4E2D7 !important;
      color: var(--intro-green) !important;
    }

    .services-section .service-tags .tag,
    .product-section .product-uses .use-tag {
      color: #53625A !important;
      background: #F7FAF7 !important;
      border-color: #DCE7DE !important;
    }

    .product-section .product-img-wrap {
      background: #F1EBDD !important;
    }

    .product-section .btn-primary {
      background: var(--intro-green) !important;
      border-color: var(--intro-green) !important;
      color: #FFFFFF !important;
    }

    .product-section .btn-outline {
      color: var(--intro-green-dark) !important;
      border-color: #AFC3B6 !important;
      background: transparent !important;
    }

    .res-section {
      background: var(--intro-deep-sage) !important;
      border-top: 1px solid #4E6C60;
      border-bottom: 1px solid #4E6C60;
    }

    .res-section .section-eyebrow,
    .res-section .section-title,
    .res-section .section-title .accent {
      color: #FFFFFF !important;
    }

    .res-section .section-eyebrow {
      opacity: 0.80;
    }

    .res-section .section-desc {
      color: rgba(255,255,255,0.90) !important;
    }

    .res-section .res-card {
      background: #FFFFFF !important;
      border-color: rgba(255,255,255,0.45) !important;
      box-shadow: 0 10px 24px rgba(21, 49, 38, 0.15);
    }

    .res-section .res-card h3 {
      color: var(--intro-ink) !important;
    }

    .res-section .res-card p {
      color: var(--intro-body) !important;
    }

    .res-section .res-btn-red,
    .res-section .res-btn-green,
    .res-section .res-btn-outline {
      background: var(--intro-green) !important;
      border-color: var(--intro-green) !important;
      color: #FFFFFF !important;
    }

    .res-section .res-btn-red:hover,
    .res-section .res-btn-green:hover,
    .res-section .res-btn-outline:hover {
      background: var(--intro-green-dark) !important;
      border-color: var(--intro-green-dark) !important;
      color: #FFFFFF !important;
    }

    .res-section .res-process {
      height: auto !important;
      min-height: 0 !important;
      margin-top: 34px !important;
      padding: 24px 28px !important;
      border-radius: 18px !important;
      background: #FFFFFF !important;
      border: 1px solid #D5E2D8 !important;
      box-shadow: 0 10px 24px rgba(21, 49, 38, 0.12) !important;
    }

    .res-section .res-process-title {
      color: var(--intro-ink) !important;
      font-size: 14px !important;
      font-weight: 800 !important;
      margin-bottom: 18px !important;
    }

    .res-section .process-steps {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 8px !important;
      margin-top: 0 !important;
    }

    .res-section .process-step {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      flex: 1 1 0 !important;
      min-width: 0 !important;
    }

    .res-section .step-num {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 28px !important;
      height: 28px !important;
      flex-shrink: 0 !important;
      border-radius: 50% !important;
      background: #EAF2EC !important;
      border: 1px solid #C6D8CA !important;
      color: var(--intro-green-dark) !important;
      font-size: 13px !important;
      font-weight: 800 !important;
    }

    .res-section .step-label {
      color: var(--intro-ink) !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      white-space: nowrap !important;
    }

    .res-section .step-arrow {
      color: #6B7C73 !important;
      font-size: 18px !important;
      flex-shrink: 0 !important;
    }

    .reviews-section .review-badge {
      background: #E9F2EB !important;
      color: var(--intro-green-dark) !important;
      border: 1px solid #D4E2D7;
    }

    .final-cta {
      background: var(--intro-cta) !important;
    }

    .final-cta h2 {
      color: #FFFFFF !important;
    }

    .final-cta p {
      color: rgba(255,255,255,0.84) !important;
    }

    .final-cta .btn-white {
      background: #FFFFFF !important;
      color: var(--intro-green-dark) !important;
      border-color: #FFFFFF !important;
    }

    .final-cta .btn-white-outline {
      background: transparent !important;
      color: #FFFFFF !important;
      border-color: rgba(255,255,255,0.76) !important;
    }

    .final-cta .btn-white-outline:hover {
      background: rgba(255,255,255,0.10) !important;
      border-color: #FFFFFF !important;
    }

    /* 히어로 상단 초록 라벨 */
    .intro-hero .hero-eyebrow {
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      padding: 8px 14px !important;
      border-radius: 999px !important;
      background: var(--intro-green) !important;
      color: #FFFFFF !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      letter-spacing: -0.01em !important;
      line-height: 1 !important;
      box-shadow: 0 8px 18px rgba(53, 107, 85, 0.16) !important;
    }

    .intro-hero .hero-eyebrow::before {
      content: '' !important;
      width: 6px !important;
      height: 6px !important;
      flex: 0 0 6px !important;
      border-radius: 50% !important;
      background: #FFFFFF !important;
    }

    /* 히어로 사진 영역 */
    .intro-hero .hero-visual {
      position: relative !important;
      min-height: 570px !important;
      display: block !important;
      overflow: visible !important;
    }

    .intro-hero .hero-photo-stack {
      position: relative;
      width: 100%;
      min-height: 570px;
    }

    .intro-hero .hero-photo-card {
      position: absolute;
      overflow: hidden;
      border-radius: 22px;
      background: #EAF2EC;
      border: 6px solid #FFFFFF;
      box-shadow: 0 18px 38px rgba(31, 54, 42, 0.18);
      isolation: isolate;
      z-index: 3;
    }

    .intro-hero .hero-photo-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg,
        rgba(17, 33, 25, 0) 42%,
        rgba(17, 33, 25, 0.46) 100%
      );
      pointer-events: none;
      z-index: 1;
    }

    .intro-hero .hero-photo-card img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.35s ease;
    }

    .intro-hero .hero-photo-card:hover img {
      transform: scale(1.035);
    }

    .intro-hero .hero-photo-school {
      top: 18px;
      left: 0;
      width: 61%;
      height: 400px;
      transform: rotate(-1.2deg);
    }

    .intro-hero .hero-photo-youngheung {
      right: 0;
      bottom: 28px;
      width: 61%;
      height: 400px;
      transform: rotate(1.5deg);
      z-index: 4;
    }

    .intro-hero .hero-photo-label {
      position: absolute;
      z-index: 2;
      left: 18px;
      bottom: 18px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(36, 84, 64, 0.94);
      color: #FFFFFF;
      font-size: 12px;
      font-weight: 800;
      box-shadow: 0 8px 16px rgba(17, 33, 25, 0.18);
    }

    .intro-hero .hero-photo-label::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #A8D2B2;
    }

    /* 사진 주변 장식 */
    .intro-hero .hero-deco-circle {
      position: absolute;
      top: -32px;
      right: -32px;
      width: 218px;
      height: 218px;
      border-radius: 50%;
      background: #EAF3EB;
      z-index: 0;
    }

    .intro-hero .hero-deco-arch {
      position: absolute;
      top: 185px;
      left: -52px;
      width: 224px;
      height: 224px;
      border-radius: 50%;
      background: #F2F7F2;
      z-index: 0;
    }

    .intro-hero .hero-deco-ring {
      position: absolute;
      left: -24px;
      bottom: 74px;
      width: 136px;
      height: 136px;
      border: 1px solid #BBD2C0;
      border-radius: 50%;
      z-index: 1;
    }

    .intro-hero .hero-deco-dots {
      position: absolute;
      top: 104px;
      right: 18px;
      width: 88px;
      height: 78px;
      opacity: 0.72;
      background-image: radial-gradient(#8AB09A 1.8px, transparent 1.8px);
      background-size: 14px 14px;
      z-index: 1;
    }

    .intro-hero .hero-deco-line {
      position: absolute;
      left: 8px;
      top: 90px;
      width: 92px;
      height: 92px;
      border-top: 2px solid #BBD2C0;
      border-left: 2px solid #BBD2C0;
      border-radius: 24px 0 0 0;
      opacity: 0.85;
      z-index: 1;
    }

    .intro-hero .hero-deco-spark {
      position: absolute;
      color: #78A687;
      font-size: 24px;
      line-height: 1;
      z-index: 2;
      pointer-events: none;
    }

    .intro-hero .hero-deco-spark-one {
      top: 8px;
      left: 59%;
    }

    .intro-hero .hero-deco-spark-two {
      bottom: 92px;
      right: 12px;
      font-size: 18px;
    }

    /* 사진을 가리지 않는 오른쪽 위 문구 카드 */
    .intro-hero .hero-note-card {
      position: absolute;
      z-index: 5;
      top: 22px;
      right: 0;
      width: 156px;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 12px 13px;
      border: 1px solid #D8E6DA;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.97);
      color: var(--intro-green-dark);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.45;
      box-shadow: 0 12px 24px rgba(31, 54, 42, 0.12);
      transform: rotate(1.5deg);
    }

    .intro-hero .hero-note-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      flex: 0 0 22px;
      border-radius: 50%;
      background: #E7F1E9;
      color: var(--intro-green);
      font-size: 13px;
    }

    /* 사진을 가리지 않는 왼쪽 아래 PLAY 카드 */
    .intro-hero .hero-mini-card {
      position: absolute;
      z-index: 5;
      left: 0;
      bottom: 0;
      width: 156px;
      padding: 12px 14px;
      border: 1px solid #D9E7DC;
      border-radius: 15px;
      background: #F6FAF6;
      box-shadow: 0 10px 20px rgba(31, 54, 42, 0.10);
      transform: rotate(-1.5deg);
    }

    .intro-hero .hero-mini-card strong {
      display: block;
      margin-bottom: 3px;
      color: var(--intro-green);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .intro-hero .hero-mini-card span {
      color: var(--intro-ink);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
    }

    @media (max-width: 900px) {
      .res-section .process-steps {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 12px 18px !important;
      }

      .res-section .process-step {
        flex: 0 0 auto !important;
      }

      .res-section .step-arrow {
        display: none !important;
      }

      .intro-hero .hero-visual,
      .intro-hero .hero-photo-stack {
        min-height: 500px !important;
      }

      .intro-hero .hero-photo-school,
      .intro-hero .hero-photo-youngheung {
        width: 62%;
        height: 350px;
      }

      .intro-hero .hero-photo-youngheung {
        bottom: 30px;
      }

      .intro-hero .hero-note-card {
        right: 0;
        top: 8px;
      }

      .intro-hero .hero-mini-card {
        bottom: 0;
      }
    }

    @media (max-width: 700px) {
      .res-section .res-process {
        padding: 22px 20px !important;
      }

      .res-section .process-step {
        width: 100% !important;
      }

      .res-section .step-label {
        white-space: normal !important;
      }

      .intro-hero .hero-visual,
      .intro-hero .hero-photo-stack {
        min-height: 430px !important;
      }

      .intro-hero .hero-photo-school {
        top: 16px;
        width: 66%;
        height: 280px;
        border-width: 4px;
        transform: rotate(-0.8deg);
      }

      .intro-hero .hero-photo-youngheung {
        width: 66%;
        height: 280px;
        right: -2px;
        bottom: 26px;
        border-width: 4px;
        transform: rotate(1deg);
      }

      .intro-hero .hero-photo-label {
        left: 12px;
        bottom: 12px;
        padding: 7px 10px;
        font-size: 11px;
      }

      .intro-hero .hero-deco-circle {
        top: -10px;
        right: -12px;
        width: 150px;
        height: 150px;
      }

      .intro-hero .hero-deco-arch {
        top: 145px;
        left: -38px;
        width: 150px;
        height: 150px;
      }

      .intro-hero .hero-deco-ring {
        left: -16px;
        bottom: 72px;
        width: 95px;
        height: 95px;
      }

      .intro-hero .hero-deco-dots {
        top: 78px;
        right: 0;
        width: 54px;
        height: 54px;
        background-size: 12px 12px;
      }

      .intro-hero .hero-deco-line {
        display: none;
      }

      .intro-hero .hero-deco-spark-one {
        top: 2px;
        left: 58%;
        font-size: 18px;
      }

      .intro-hero .hero-deco-spark-two {
        bottom: 72px;
        right: 4px;
        font-size: 14px;
      }

      .intro-hero .hero-note-card {
        top: 8px;
        right: -2px;
        width: 118px;
        gap: 6px;
        padding: 9px 9px;
        font-size: 10px;
        transform: rotate(1deg);
      }

      .intro-hero .hero-note-icon {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
        font-size: 10px;
      }

      .intro-hero .hero-mini-card {
        left: 0;
        bottom: 0;
        width: 112px;
        padding: 9px 10px;
      }

      .intro-hero .hero-mini-card strong {
        margin-bottom: 2px;
        font-size: 9px;
      }

      .intro-hero .hero-mini-card span {
        font-size: 10px;
      }
    }


/* ===== 기존 about.php 스타일 블록 2 ===== */
/* 2026 visual refresh: 차분한 에디토리얼 스타일 */
    :root {
      --intro-ink: #1D3027;
      --intro-body: #5F6E65;
      --intro-green: #2F6B56;
      --intro-green-dark: #234E3F;
      --intro-line: #DCE7DF;
      --intro-sage: #F4F8F4;
      --intro-oat: #FBFAF7;
      --intro-deep-sage: #476B5E;
      --intro-cta: #27483B;
    }

    body {
      background: #FCFCFA !important;
      color: var(--intro-ink) !important;
    }

    .header {
      background: rgba(255, 255, 255, .94) !important;
      border-bottom: 1px solid rgba(220, 231, 223, .92) !important;
      backdrop-filter: blur(12px) saturate(125%);
    }

    /* 히어로: 장식은 줄이고 두 장의 활동 사진에 집중 */
    .intro-hero {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 0% 0%, #E8F1EB 0, rgba(232, 241, 235, 0) 33%),
        linear-gradient(180deg, #FCFDFC 0%, #F4F8F5 100%) !important;
      border-bottom: 1px solid #E4EEE7 !important;
    }

    .intro-hero .hero-title {
      max-width: 600px;
      letter-spacing: -0.052em;
      line-height: 1.22 !important;
    }

    .intro-hero .hero-desc {
      max-width: 520px;
      font-size: 16px !important;
      line-height: 1.88 !important;
    }

    .intro-hero .hero-eyebrow {
      padding: 0 0 0 11px !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: var(--intro-green-dark) !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      line-height: 1.3 !important;
      letter-spacing: .02em !important;
      box-shadow: none !important;
      position: relative;
    }

    .intro-hero .hero-eyebrow::before {
      content: '' !important;
      position: absolute;
      left: 0;
      top: 50%;
      width: 3px !important;
      height: 14px !important;
      border-radius: 99px !important;
      transform: translateY(-50%);
      background: var(--intro-green) !important;
    }

    .intro-hero .hero-btns {
      gap: 10px !important;
      flex-wrap: wrap;
    }

    .intro-hero .btn-primary,
    .intro-hero .btn-outline,
    .product-section .btn-primary,
    .product-section .btn-outline,
    .res-section .res-btn-red,
    .res-section .res-btn-green,
    .res-section .res-btn-outline,
    .final-cta .btn-white,
    .final-cta .btn-white-outline {
      min-height: 46px;
      padding: 12px 18px !important;
      border-radius: 10px !important;
      box-shadow: none !important;
      font-weight: 700 !important;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease !important;
    }

    .intro-hero .btn-primary:hover,
    .intro-hero .btn-outline:hover,
    .product-section .btn-primary:hover,
    .product-section .btn-outline:hover,
    .res-section .res-btn:hover,
    .final-cta a:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 22px rgba(31, 65, 49, .11) !important;
    }

    .intro-hero .hero-stats {
      display: flex !important;
      gap: 0 !important;
      margin-top: 36px !important;
      padding-top: 23px;
      border-top: 1px solid #D9E5DC;
    }

    .intro-hero .stat-item {
      min-width: 0 !important;
      flex: 1 1 0;
      padding: 0 19px !important;
      border: 0 !important;
      border-left: 1px solid #D9E5DC !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .intro-hero .stat-item:first-child {
      padding-left: 0 !important;
      border-left: 0 !important;
    }

    .intro-hero .stat-num {
      display: block;
      color: var(--intro-ink) !important;
      font-size: clamp(25px, 2.5vw, 34px) !important;
      line-height: 1.05;
      letter-spacing: -0.055em;
    }

    .intro-hero .stat-label {
      display: block;
      margin-top: 7px;
      color: var(--intro-body) !important;
      font-size: 12px !important;
      line-height: 1.5;
    }

    .intro-hero .hero-visual,
    .intro-hero .hero-photo-stack {
      min-height: 550px !important;
    }

    .intro-hero .hero-photo-card {
      overflow: hidden;
      border: 4px solid #FFFFFF !important;
      border-radius: 20px !important;
      box-shadow: 0 22px 44px rgba(36, 62, 48, .13) !important;
      transform: none !important;
    }

    .intro-hero .hero-photo-school {
      top: 20px !important;
      left: 0;
      width: 64% !important;
      height: 370px !important;
    }

    .intro-hero .hero-photo-youngheung {
      right: 0;
      bottom: 24px !important;
      width: 59% !important;
      height: 330px !important;
      z-index: 4;
    }

    .intro-hero .hero-photo-card::after {
      background: linear-gradient(180deg, rgba(18, 39, 29, 0) 55%, rgba(18, 39, 29, .32) 100%) !important;
    }

    .intro-hero .hero-photo-label {
      left: 16px !important;
      bottom: 16px !important;
      padding: 7px 10px !important;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 7px !important;
      background: rgba(31, 68, 52, .90) !important;
      font-size: 11px !important;
      box-shadow: none !important;
    }

    .intro-hero .hero-photo-label::before,
    .intro-hero .hero-note-card,
    .intro-hero .hero-mini-card,
    .intro-hero .hero-deco-dots,
    .intro-hero .hero-deco-line,
    .intro-hero .hero-deco-spark {
      display: none !important;
    }

    .intro-hero .hero-deco-circle {
      top: -15px !important;
      right: -25px !important;
      width: 180px !important;
      height: 180px !important;
      background: #E7F0E9 !important;
    }

    .intro-hero .hero-deco-arch {
      top: auto !important;
      bottom: 65px !important;
      left: -35px !important;
      width: 160px !important;
      height: 160px !important;
      background: #F0F6F1 !important;
    }

    .intro-hero .hero-deco-ring {
      left: -16px !important;
      bottom: 95px !important;
      width: 110px !important;
      height: 110px !important;
      border-color: rgba(88, 131, 107, .30) !important;
    }

    /* 섹션: 라운딩과 그림자를 줄여 전문적인 인상으로 */
    .section .section-header {
      margin-bottom: 38px !important;
    }

    .section .section-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: var(--intro-green) !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      letter-spacing: .02em !important;
    }

    .section .section-eyebrow::before {
      content: '';
      width: 18px;
      height: 1px;
      background: currentColor;
      opacity: .75;
    }

    .section .section-title {
      margin-top: 13px !important;
      letter-spacing: -0.045em;
      line-height: 1.28 !important;
    }

    .section .section-desc {
      max-width: 620px;
      font-size: 15px !important;
      line-height: 1.78 !important;
    }

    .pain-section {
      background: #F4F8F4 !important;
      border-color: #E0EBE2 !important;
    }

    .services-section,
    .reviews-section {
      background: #FCFCFA !important;
    }

    .product-section {
      background: #FAF8F3 !important;
      border-color: #EEE8DD !important;
    }

    .pain-section .pain-card,
    .services-section .service-card,
    .product-section .product-card,
    .reviews-section .review-card,
    .res-section .res-card,
    .res-section .res-process {
      border: 1px solid #DCE7DF !important;
      border-radius: 14px !important;
      box-shadow: 0 10px 28px rgba(27, 49, 37, .045) !important;
    }

    .pain-section .pain-card,
    .services-section .service-card,
    .reviews-section .review-card {
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
    }

    .pain-section .pain-card:hover,
    .services-section .service-card:hover,
    .reviews-section .review-card:hover {
      transform: translateY(-3px);
      border-color: #C4D7CA !important;
      box-shadow: 0 16px 34px rgba(27, 49, 37, .075) !important;
    }

    .pain-section .pain-card h3,
    .services-section .service-card h3,
    .product-section .product-info h3,
    .res-section .res-card h3,
    .reviews-section .reviewer-name {
      letter-spacing: -0.035em;
      line-height: 1.4 !important;
    }

    .pain-section .pain-card p,
    .services-section .service-card p,
    .product-section .product-info p,
    .reviews-section .review-text,
    .res-section .res-card p {
      font-size: 14px !important;
      line-height: 1.82 !important;
    }

    .pain-section .pain-answer {
      border: 1px solid #D6E5D9 !important;
      border-radius: 9px !important;
      background: #EAF3EC !important;
      color: var(--intro-green-dark) !important;
      font-weight: 700 !important;
    }

    /* 이모지 대신 서비스 번호를 사용하여 톤 통일 */
    .services-section .service-icon,
    .res-section .res-card-icon {
      position: relative;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      width: 42px !important;
      height: 42px !important;
      flex: 0 0 42px;
      border: 1px solid #D3E2D6 !important;
      border-radius: 8px !important;
      background: #EEF5F0 !important;
      color: transparent !important;
      font-size: 0 !important;
      box-shadow: none !important;
    }

    .services-section .service-icon::after,
    .res-section .res-card-icon::after {
      color: var(--intro-green-dark);
      font-family: 'Noto Serif KR', serif;
      font-size: 14px;
      font-weight: 700;
    }

    .services-section .service-card:nth-child(1) .service-icon::after { content: '01'; }
    .services-section .service-card:nth-child(2) .service-icon::after { content: '02'; }
    .services-section .service-card:nth-child(3) .service-icon::after { content: '03'; }
    .services-section .service-card:nth-child(4) .service-icon::after { content: '04'; }
    .res-section .res-card:nth-child(1) .res-card-icon::after { content: '01'; }
    .res-section .res-card:nth-child(2) .res-card-icon::after { content: '02'; }
    .res-section .res-card:nth-child(3) .res-card-icon::after { content: '03'; }

    .services-section .service-card-top {
      gap: 15px !important;
      align-items: flex-start !important;
    }

    .services-section .service-tags .tag,
    .product-section .product-uses .use-tag,
    .reviews-section .review-badge {
      border-radius: 999px !important;
      font-size: 11px !important;
      font-weight: 700 !important;
    }

    .services-section .service-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-weight: 800 !important;
      text-decoration: none;
    }

    .services-section .service-link::after {
      content: '→';
      transition: transform .2s ease;
    }

    .services-section .service-card:hover .service-link::after {
      transform: translateX(3px);
    }

    .product-section .product-card {
      overflow: hidden;
      background: #FFFFFF !important;
    }

    .product-section .product-img-wrap {
      background: #F1ECE1 !important;
    }

    .res-section {
      background: linear-gradient(135deg, #506F63 0%, #3E6255 100%) !important;
      border-color: #4D7063 !important;
    }

    .res-section .section-eyebrow {
      color: rgba(255,255,255,.82) !important;
    }

    .res-section .res-card,
    .res-section .res-process {
      background: rgba(255,255,255,.98) !important;
    }

    .res-section .res-btn {
      background: var(--intro-green) !important;
      border-color: var(--intro-green) !important;
      color: #FFFFFF !important;
    }

    .res-section .step-num {
      width: 26px !important;
      height: 26px !important;
      border-radius: 7px !important;
      background: #EAF3EC !important;
      border-color: #D4E3D7 !important;
    }

    .final-cta {
      background: linear-gradient(135deg, #2A513F 0%, #213E32 100%) !important;
    }

    .footer {
      background: #FBFCFB !important;
      border-top: 1px solid #E5ECE7 !important;
    }

    @media (max-width: 900px) {
      .intro-hero .hero-visual,
      .intro-hero .hero-photo-stack {
        min-height: 500px !important;
      }

      .intro-hero .hero-photo-school {
        height: 335px !important;
      }

      .intro-hero .hero-photo-youngheung {
        height: 300px !important;
      }
    }

    @media (max-width: 700px) {
      .intro-hero .hero-desc {
        font-size: 15px !important;
      }

      .intro-hero .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 0 !important;
        margin-top: 28px !important;
        padding-top: 18px;
      }

      .intro-hero .stat-item,
      .intro-hero .stat-item:first-child {
        padding: 0 10px !important;
        border-left: 1px solid #D9E5DC !important;
      }

      .intro-hero .stat-item:first-child {
        padding-left: 0 !important;
        border-left: 0 !important;
      }

      .intro-hero .stat-num {
        font-size: 23px !important;
      }

      .intro-hero .stat-label {
        font-size: 10px !important;
        word-break: keep-all;
      }

      .intro-hero .hero-visual,
      .intro-hero .hero-photo-stack {
        min-height: 390px !important;
      }

      .intro-hero .hero-photo-school {
        top: 15px !important;
        width: 66% !important;
        height: 255px !important;
      }

      .intro-hero .hero-photo-youngheung {
        right: 0 !important;
        bottom: 18px !important;
        width: 63% !important;
        height: 230px !important;
      }

      .intro-hero .hero-photo-label {
        left: 10px !important;
        bottom: 10px !important;
        padding: 6px 8px !important;
        font-size: 10px !important;
      }

      .intro-hero .hero-deco-circle {
        width: 130px !important;
        height: 130px !important;
      }

      .intro-hero .hero-deco-arch {
        bottom: 54px !important;
        width: 110px !important;
        height: 110px !important;
      }

      .intro-hero .hero-deco-ring {
        bottom: 72px !important;
        width: 78px !important;
        height: 78px !important;
      }

      .pain-section .pain-card,
      .services-section .service-card,
      .product-section .product-card,
      .reviews-section .review-card,
      .res-section .res-card,
      .res-section .res-process {
        border-radius: 12px !important;
      }
    }


/* ===== 기존 about.php 스타일 블록 3 ===== */
/* 귀여운 일러스트와 실제 활동 사진을 함께 보여주는 메인 히어로 */
    .intro-hero.intro-hero-playful {
      position: relative;
      min-height: 720px;
      overflow: hidden;
      isolation: isolate;
      background:
        linear-gradient(90deg, #263D36 0%, #314B43 39%, rgba(49, 75, 67, .66) 53%, rgba(49, 75, 67, 0) 72%),
        linear-gradient(135deg, #EAF2ED 0%, #F9F7F1 56%, #EDF4EF 100%) !important;
      border-bottom: 0 !important;
    }

    .intro-hero.intro-hero-playful::after {
      content: '';
      position: absolute;
      z-index: -1;
      right: -110px;
      bottom: -160px;
      width: 480px;
      height: 480px;
      border-radius: 50%;
      background: rgba(190, 222, 204, .44);
      filter: blur(1px);
    }

    .intro-hero.intro-hero-playful .hero {
      width: min(100%, 1440px);
      min-height: 720px;
      margin: 0 auto;
      padding: 92px clamp(28px, 6vw, 118px) 78px;
      display: grid;
      grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr);
      gap: clamp(36px, 5.8vw, 86px);
      align-items: center;
    }

    .intro-hero.intro-hero-playful .hero-copy {
      position: relative;
      z-index: 3;
      color: #FFFFFF;
    }

    .intro-hero.intro-hero-playful .hero-eyebrow {
      display: inline-flex !important;
      align-items: center;
      gap: 8px;
      margin: 0 0 22px;
      padding: 8px 13px !important;
      border: 1px solid rgba(255,255,255,.28) !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,.10) !important;
      color: rgba(255,255,255,.88) !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      line-height: 1 !important;
      letter-spacing: .08em !important;
      box-shadow: none !important;
    }

    .intro-hero.intro-hero-playful .hero-eyebrow::before {
      position: static !important;
      display: block;
      width: 6px !important;
      height: 6px !important;
      transform: none !important;
      border-radius: 50% !important;
      background: #B8E0B9 !important;
    }

    .intro-hero.intro-hero-playful .hero-title,
    .intro-hero.intro-hero-playful .hero-title .highlight {
      max-width: 620px;
      margin: 0;
      color: #FFFFFF !important;
      font-family: 'Noto Serif KR', serif;
      font-size: clamp(38px, 4.05vw, 61px) !important;
      font-weight: 700;
      line-height: 1.34 !important;
      letter-spacing: -0.065em !important;
      text-shadow: 0 3px 18px rgba(15, 30, 24, .16);
    }

    .intro-hero.intro-hero-playful .hero-title .highlight {
      color: #F7FBF7 !important;
    }

    .intro-hero.intro-hero-playful .hero-desc {
      max-width: 465px;
      margin: 25px 0 0;
      color: rgba(255,255,255,.82) !important;
      font-size: 16px !important;
      font-weight: 500;
      line-height: 1.88 !important;
    }

    .intro-hero.intro-hero-playful .hero-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 31px;
    }

    .intro-hero.intro-hero-playful .btn-primary,
    .intro-hero.intro-hero-playful .btn-outline {
      min-height: 48px;
      padding: 12px 18px !important;
      border-radius: 8px !important;
      box-shadow: none !important;
      font-size: 14px !important;
      font-weight: 800 !important;
    }

    .intro-hero.intro-hero-playful .btn-primary {
      background: #FFFFFF !important;
      border-color: #FFFFFF !important;
      color: #285843 !important;
    }

    .intro-hero.intro-hero-playful .btn-primary:hover {
      background: #EAF4ED !important;
      border-color: #EAF4ED !important;
    }

    .intro-hero.intro-hero-playful .btn-outline {
      border-color: rgba(255,255,255,.55) !important;
      background: transparent !important;
      color: #FFFFFF !important;
    }

    .intro-hero.intro-hero-playful .btn-outline:hover {
      border-color: #FFFFFF !important;
      background: rgba(255,255,255,.12) !important;
    }

    .intro-hero.intro-hero-playful .hero-stats {
      width: min(100%, 500px);
      display: grid !important;
      grid-template-columns: repeat(3, 1fr);
      gap: 0 !important;
      margin-top: 38px !important;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,.24);
    }

    .intro-hero.intro-hero-playful .stat-item,
    .intro-hero.intro-hero-playful .stat-item:first-child {
      min-width: 0;
      padding: 0 16px !important;
      border: 0 !important;
      border-left: 1px solid rgba(255,255,255,.24) !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .intro-hero.intro-hero-playful .stat-item:first-child {
      padding-left: 0 !important;
      border-left: 0 !important;
    }

    .intro-hero.intro-hero-playful .stat-num,
    .intro-hero.intro-hero-playful .stat-num span {
      color: #FFFFFF !important;
      font-size: clamp(25px, 2.25vw, 33px) !important;
      font-weight: 800 !important;
      line-height: 1.05;
    }

    .intro-hero.intro-hero-playful .stat-label {
      margin-top: 7px;
      color: rgba(255,255,255,.72) !important;
      font-size: 11px !important;
      line-height: 1.45;
      word-break: keep-all;
    }

    .intro-hero.intro-hero-playful .hero-scene {
      position: relative;
      z-index: 2;
      min-height: 520px;
    }

    .intro-hero.intro-hero-playful .scene-photo {
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
      width: 78%;
      height: 368px;
      overflow: hidden;
      border: 7px solid rgba(255,255,255,.92);
      border-radius: 26px;
      background: #DCE9E0;
      box-shadow: 0 22px 42px rgba(26, 49, 41, .18);
    }

    .intro-hero.intro-hero-playful .scene-photo::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(20,43,34,0) 48%, rgba(20,43,34,.42) 100%);
      pointer-events: none;
    }

    .intro-hero.intro-hero-playful .scene-photo img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
    }

    .intro-hero.intro-hero-playful .scene-photo-caption {
      position: absolute;
      z-index: 2;
      left: 20px;
      bottom: 18px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #FFFFFF;
      font-size: 12px;
      font-weight: 800;
    }

    .intro-hero.intro-hero-playful .scene-photo-caption::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #B8E0B9;
    }

    .intro-hero.intro-hero-playful .scene-art-card {
      position: absolute;
      z-index: 3;
      left: 0;
      bottom: 0;
      width: 73%;
      min-height: 290px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.82);
      border-radius: 24px;
      background: linear-gradient(145deg, #FFFDF9 0%, #F7F7F1 100%);
      box-shadow: 0 20px 38px rgba(26, 49, 41, .18);
    }

    .intro-hero.intro-hero-playful .scene-art-card::before {
      content: '';
      position: absolute;
      top: -72px;
      right: -40px;
      width: 190px;
      height: 190px;
      border-radius: 50%;
      background: #E5F0E8;
    }

    .intro-hero.intro-hero-playful .scene-art-card svg {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      height: 290px;
    }

    .intro-hero.intro-hero-playful .scene-art-label {
      position: absolute;
      z-index: 2;
      top: 18px;
      left: 20px;
      margin: 0;
      color: #3D6E58;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .02em;
    }

    .intro-hero.intro-hero-playful .scene-art-label small {
      display: block;
      margin-top: 5px;
      color: #7E8D84;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0;
    }

    .intro-hero.intro-hero-playful .scene-chip {
      position: absolute;
      z-index: 4;
      right: 2%;
      bottom: 20px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 13px;
      border: 1px solid #DFE9E0;
      border-radius: 12px;
      background: rgba(255,255,255,.96);
      color: #315D4C;
      box-shadow: 0 12px 24px rgba(26, 49, 41, .12);
      font-size: 12px;
      font-weight: 800;
    }

    .intro-hero.intro-hero-playful .scene-chip span {
      display: inline-grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border-radius: 7px;
      background: #E8F3EA;
      color: #3E7960;
      font-size: 14px;
    }

    .intro-hero.intro-hero-playful .scene-cloud,
    .intro-hero.intro-hero-playful .scene-spark {
      position: absolute;
      z-index: 0;
      pointer-events: none;
    }

    .intro-hero.intro-hero-playful .scene-cloud-one {
      top: 36px;
      left: 16%;
      width: 85px;
      height: 26px;
      border-radius: 99px;
      background: rgba(255,255,255,.64);
      box-shadow: 20px -13px 0 2px rgba(255,255,255,.64), 44px 0 0 -2px rgba(255,255,255,.64);
    }

    .intro-hero.intro-hero-playful .scene-cloud-two {
      right: 14px;
      top: 70px;
      width: 72px;
      height: 23px;
      border-radius: 99px;
      background: rgba(174, 211, 191, .48);
      box-shadow: 17px -11px 0 2px rgba(174, 211, 191, .48), 38px 0 0 -2px rgba(174, 211, 191, .48);
    }

    .intro-hero.intro-hero-playful .scene-spark {
      top: 36px;
      right: 33%;
      color: #86B88F;
      font-size: 25px;
      line-height: 1;
    }

    @media (max-width: 1050px) {
      .intro-hero.intro-hero-playful .hero {
        grid-template-columns: 1fr;
        gap: 38px;
        padding-top: 86px;
      }

      .intro-hero.intro-hero-playful .hero-copy {
        max-width: 620px;
      }

      .intro-hero.intro-hero-playful .hero-scene {
        width: min(100%, 690px);
        margin-left: auto;
      }
    }

    @media (max-width: 700px) {
      .intro-hero.intro-hero-playful,
      .intro-hero.intro-hero-playful .hero {
        min-height: auto;
      }

      .intro-hero.intro-hero-playful .hero {
        padding: 70px 20px 54px;
        gap: 34px;
      }

      .intro-hero.intro-hero-playful .hero-title,
      .intro-hero.intro-hero-playful .hero-title .highlight {
        font-size: clamp(34px, 10vw, 45px) !important;
        line-height: 1.3 !important;
      }

      .intro-hero.intro-hero-playful .hero-desc {
        font-size: 14px !important;
      }

      .intro-hero.intro-hero-playful .hero-btns a {
        flex: 1 1 auto;
        text-align: center;
      }

      .intro-hero.intro-hero-playful .hero-stats {
        margin-top: 28px !important;
      }

      .intro-hero.intro-hero-playful .stat-item,
      .intro-hero.intro-hero-playful .stat-item:first-child {
        padding: 0 10px !important;
      }

      .intro-hero.intro-hero-playful .stat-label {
        font-size: 10px !important;
      }

      .intro-hero.intro-hero-playful .hero-scene {
        min-height: 385px;
      }

      .intro-hero.intro-hero-playful .scene-photo {
        width: 77%;
        height: 245px;
        border-width: 5px;
        border-radius: 18px;
      }

      .intro-hero.intro-hero-playful .scene-art-card {
        width: 78%;
        min-height: 218px;
        border-radius: 18px;
      }

      .intro-hero.intro-hero-playful .scene-art-card svg {
        height: 218px;
      }

      .intro-hero.intro-hero-playful .scene-art-label {
        top: 13px;
        left: 14px;
        font-size: 10px;
      }

      .intro-hero.intro-hero-playful .scene-art-label small {
        margin-top: 3px;
        font-size: 9px;
      }

      .intro-hero.intro-hero-playful .scene-chip {
        right: 0;
        bottom: 15px;
        padding: 9px 10px;
        font-size: 10px;
      }

      .intro-hero.intro-hero-playful .scene-chip span {
        width: 19px;
        height: 19px;
        font-size: 12px;
      }

      .intro-hero.intro-hero-playful .scene-photo-caption {
        left: 13px;
        bottom: 12px;
        font-size: 10px;
      }
    }


/* ===== 기존 about.php 스타일 블록 4 ===== */
/* 히어로 높이·제목 줄바꿈 보정: PC에서는 정확히 720px */
    .intro-hero.intro-hero-playful {
      height: 720px !important;
      min-height: 720px !important;
    }

    .intro-hero.intro-hero-playful .hero {
      height: 720px !important;
      min-height: 0 !important;
      box-sizing: border-box !important;
      grid-template-columns: minmax(520px, 1.05fr) minmax(460px, .95fr) !important;
      gap: clamp(34px, 4vw, 64px) !important;
      padding: 70px clamp(36px, 5.2vw, 96px) 56px !important;
      align-items: center !important;
    }

    .intro-hero.intro-hero-playful .hero-copy {
      align-self: center;
      padding-top: 2px;
    }

    .intro-hero.intro-hero-playful .hero-title,
    .intro-hero.intro-hero-playful .hero-title .highlight {
      max-width: none !important;
      font-size: clamp(41px, 3.3vw, 54px) !important;
      line-height: 1.27 !important;
      letter-spacing: -0.06em !important;
      word-break: keep-all;
    }

    .intro-hero.intro-hero-playful .hero-title .title-line {
      display: block;
      white-space: nowrap;
    }

    .intro-hero.intro-hero-playful .hero-desc {
      margin-top: 22px !important;
    }

    .intro-hero.intro-hero-playful .hero-btns {
      margin-top: 26px !important;
    }

    .intro-hero.intro-hero-playful .hero-stats {
      margin-top: 29px !important;
      padding-top: 18px !important;
    }

    .intro-hero.intro-hero-playful .hero-scene {
      min-height: 500px !important;
    }

    .intro-hero.intro-hero-playful .scene-photo {
      height: 340px !important;
    }

    .intro-hero.intro-hero-playful .scene-art-card {
      min-height: 270px !important;
    }

    .intro-hero.intro-hero-playful .scene-art-card svg {
      height: 270px !important;
    }

    @media (max-width: 1120px) and (min-width: 701px) {
      .intro-hero.intro-hero-playful {
        height: auto !important;
        min-height: 720px !important;
      }

      .intro-hero.intro-hero-playful .hero {
        height: auto !important;
        min-height: 720px !important;
        grid-template-columns: 1fr !important;
        padding: 76px clamp(32px, 7vw, 72px) 64px !important;
      }

      .intro-hero.intro-hero-playful .hero-copy {
        max-width: 680px;
      }

      .intro-hero.intro-hero-playful .hero-scene {
        width: min(100%, 700px);
        margin-left: auto;
      }
    }

    @media (max-width: 700px) {
      .intro-hero.intro-hero-playful,
      .intro-hero.intro-hero-playful .hero {
        height: auto !important;
        min-height: 0 !important;
      }

      .intro-hero.intro-hero-playful .hero {
        padding: 66px 20px 52px !important;
      }

      .intro-hero.intro-hero-playful .hero-title,
      .intro-hero.intro-hero-playful .hero-title .highlight {
        font-size: clamp(33px, 9.3vw, 44px) !important;
        line-height: 1.28 !important;
        letter-spacing: -0.055em !important;
      }

      .intro-hero.intro-hero-playful .hero-title .title-line {
        white-space: normal;
      }
    }


/* ===== 기존 about.php 스타일 블록 5 ===== */
/* 캐릭터 일러스트 대신 실제 활동 사진 두 장으로 구성한 히어로 */
    .intro-hero.intro-hero-playful .hero-scene {
      min-height: 500px !important;
    }

    .intro-hero.intro-hero-playful .scene-photo {
      overflow: hidden;
      border: 6px solid rgba(255,255,255,.96);
      border-radius: 22px;
      background: #DCE9E0;
      box-shadow: 0 20px 38px rgba(26, 49, 41, .18);
    }

    /* 큰 학교 수업 사진은 아래 오른쪽, 마을 사진은 위 왼쪽에 배치해
       두 사진이 겹쳐도 ‘학교로 찾아가는 놀이수업’ 문구가 가려지지 않습니다. */
    .intro-hero.intro-hero-playful .scene-photo-main {
      top: 128px !important;
      right: 0 !important;
      left: auto !important;
      bottom: auto !important;
      z-index: 1;
      width: 69% !important;
      height: 350px !important;
    }

    .intro-hero.intro-hero-playful .scene-photo-sub {
      top: 8px !important;
      right: auto !important;
      bottom: auto !important;
      left: 0 !important;
      z-index: 3;
      width: 53% !important;
      height: 206px !important;
    }

    .intro-hero.intro-hero-playful .scene-photo img {
      object-position: center;
      transition: transform .35s ease;
    }

    .intro-hero.intro-hero-playful .scene-photo:hover img {
      transform: scale(1.035);
    }

    .intro-hero.intro-hero-playful .scene-photo-sub::after {
      background: linear-gradient(180deg, rgba(20,43,34,0) 42%, rgba(20,43,34,.48) 100%);
    }

    .intro-hero.intro-hero-playful .scene-photo-caption {
      left: 17px;
      bottom: 15px;
      padding: 7px 10px;
      border: 1px solid rgba(255,255,255,.32);
      border-radius: 999px;
      background: rgba(27,57,45,.50);
      font-size: 11px;
      line-height: 1;
      backdrop-filter: blur(4px);
    }

    .intro-hero.intro-hero-playful .scene-photo-caption::before {
      width: 6px;
      height: 6px;
    }

    .intro-hero.intro-hero-playful .scene-chip {
      right: 0;
      bottom: 14px;
      z-index: 5;
      padding: 10px 12px;
      border-radius: 10px;
      font-size: 11px;
    }

    .intro-hero.intro-hero-playful .scene-chip span {
      width: 21px;
      height: 21px;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 800;
    }

    @media (max-width: 700px) {
      .intro-hero.intro-hero-playful .hero-scene {
        min-height: 360px !important;
      }

      .intro-hero.intro-hero-playful .scene-photo {
        border-width: 4px;
        border-radius: 16px;
      }

      .intro-hero.intro-hero-playful .scene-photo-main {
        top: 106px !important;
        right: 0 !important;
        width: 76% !important;
        height: 242px !important;
      }

      .intro-hero.intro-hero-playful .scene-photo-sub {
        top: 6px !important;
        right: auto !important;
        bottom: auto !important;
        left: 0 !important;
        width: 54% !important;
        height: 145px !important;
      }

      .intro-hero.intro-hero-playful .scene-photo-caption {
        left: 10px;
        bottom: 10px;
        padding: 6px 8px;
        font-size: 9px;
      }

      .intro-hero.intro-hero-playful .scene-photo-caption::before {
        width: 5px;
        height: 5px;
      }

      .intro-hero.intro-hero-playful .scene-chip {
        right: 0;
        bottom: 7px;
        padding: 8px 9px;
        font-size: 9px;
      }

      .intro-hero.intro-hero-playful .scene-chip span {
        width: 18px;
        height: 18px;
        font-size: 9px;
      }
    }


/* ===== 기존 about.php 스타일 블록 6 ===== */
/* 사진은 겹쳐 보이되, 학교 수업 문구는 겹치는 영역 밖인 오른쪽 위에 배치 */
    .intro-hero.intro-hero-playful .hero-scene {
      min-height: 500px !important;
    }

    /* 학교 수업 사진: 오른쪽 위 */
    .intro-hero.intro-hero-playful .scene-photo-main {
      top: 12px !important;
      right: 0 !important;
      left: auto !important;
      bottom: auto !important;
      z-index: 1 !important;
      width: 67% !important;
      height: 352px !important;
    }

    /* 마을 사진: 왼쪽 아래에서 학교 사진과 자연스럽게 겹침 */
    .intro-hero.intro-hero-playful .scene-photo-sub {
      top: auto !important;
      right: auto !important;
      bottom: 12px !important;
      left: 0 !important;
      z-index: 3 !important;
      width: 59% !important;
      height: 252px !important;
    }

    /* 학교 수업 문구는 겹치는 왼쪽 아래 대신, 가려질 일이 없는 오른쪽 위에 표시 */
    .intro-hero.intro-hero-playful .scene-photo-main .scene-photo-caption {
      top: 16px !important;
      right: 16px !important;
      bottom: auto !important;
      left: auto !important;
      z-index: 4 !important;
      white-space: nowrap;
      background: rgba(27, 57, 45, .78) !important;
    }

    /* 보조 칩도 사진을 가리지 않도록 숨김 */
    .intro-hero.intro-hero-playful .scene-chip {
      display: none !important;
    }
    @media (max-width: 700px) {
      .intro-hero.intro-hero-playful .hero-scene {
        min-height: 360px !important;
      }

      .intro-hero.intro-hero-playful .scene-photo-main {
        top: 8px !important;
        right: 0 !important;
        width: 73% !important;
        height: 222px !important;
      }

      .intro-hero.intro-hero-playful .scene-photo-sub {
        bottom: 8px !important;
        left: 0 !important;
        width: 67% !important;
        height: 182px !important;
      }

      .intro-hero.intro-hero-playful .scene-photo-main .scene-photo-caption {
        top: 10px !important;
        right: 10px !important;
        bottom: auto !important;
        left: auto !important;
        padding: 6px 8px !important;
        font-size: 9px !important;
      }
    }


/* ===== 기존 about.php 스타일 블록 7 ===== */
/*
      히어로 라벨 기준선 통일
      학교수업 페이지의 “학교로 찾아가는 놀이수업” 라벨 상단 위치를 기준으로,
      소개페이지 “놀이교육 전문 사회적기업” 라벨의 상단을 히어로 시작점에서 139px에 맞춥니다.
      사진·배경·버튼 등 다른 요소는 변경하지 않습니다.
    */
    @media (min-width: 1121px) {
      .intro-hero.intro-hero-playful .hero {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }

      .intro-hero.intro-hero-playful .hero-copy {
        align-self: start !important;
        padding-top: 79px !important;
      }
    }


/* ===== 기존 about.php 스타일 블록 8 ===== */
/* 모바일 전체 정리: 상단, 메뉴, 히어로, 카드, CTA, 푸터 */
    @media (max-width: 700px) {
      html,
      body {
        width: 100%;
        overflow-x: hidden;
      }

      body {
        background: #FCFCFA !important;
      }

      .header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        height: auto !important;
        background: rgba(255,255,255,.97) !important;
        border-bottom: 1px solid #E7ECE8 !important;
      }

      .nav-inner {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 72px !important;
        padding: 0 18px !important;
        gap: 12px !important;
      }

      .nav-logo {
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
      }

      .nav-logo img {
        width: 104px !important;
        max-height: 42px !important;
        object-fit: contain !important;
      }

      .nav-utils {
        display: none !important;
      }

      .nav-hamburger {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        display: inline-grid !important;
        place-items: center !important;
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 48px !important;
        margin-left: auto !important;
        padding: 0 !important;
        border: 1px solid #DEDAD2 !important;
        border-radius: 14px !important;
        background: #FFFFFF !important;
        box-shadow: 0 6px 15px rgba(31,49,37,.05) !important;
        z-index: 1002 !important;
      }

      .nav-hamburger svg {
        width: 24px !important;
        height: 24px !important;
      }

      .nav-menu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 14px !important;
        right: 14px !important;
        z-index: 1001 !important;
        display: none !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        width: auto !important;
        max-height: calc(100vh - 100px) !important;
        margin: 0 !important;
        padding: 10px !important;
        overflow-y: auto !important;
        list-style: none !important;
        border: 1px solid #E3E8E3 !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 18px 46px rgba(27, 49, 37, .16) !important;
        backdrop-filter: blur(10px) !important;
      }

      .nav-menu.menu-open,
      body.mobile-menu-open .nav-menu {
        display: grid !important;
      }

      .nav-menu li {
        width: 100% !important;
      }

      .nav-menu a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 44px !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        color: #20342A !important;
        font-size: 15px !important;
        font-weight: 700 !important;
      }

      .nav-menu a::after {
        content: '›';
        color: #8B978F;
        font-size: 18px;
        line-height: 1;
      }

      .nav-menu a.active,
      .nav-menu a:hover {
        background: #EEF5F0 !important;
        color: #2F6B56 !important;
      }

      .intro-hero.intro-hero-playful {
        height: auto !important;
        min-height: 0 !important;
        background:
          linear-gradient(180deg, rgba(37,61,53,.98) 0%, rgba(45,74,64,.94) 48%, #F7F8F4 48%, #F7F8F4 100%) !important;
      }

      .intro-hero.intro-hero-playful::after {
        display: none !important;
      }

      .intro-hero.intro-hero-playful .hero {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        width: 100% !important;
        padding: 44px 20px 44px !important;
      }

      .intro-hero.intro-hero-playful .hero-copy {
        max-width: none !important;
        padding: 0 !important;
        text-align: left !important;
      }

      .intro-hero.intro-hero-playful .hero-eyebrow {
        margin-bottom: 16px !important;
        padding: 7px 10px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255,255,255,.24) !important;
        background: rgba(255,255,255,.10) !important;
        color: rgba(255,255,255,.88) !important;
        font-size: 11px !important;
        letter-spacing: .05em !important;
      }

      .intro-hero.intro-hero-playful .hero-eyebrow::before {
        position: static !important;
        width: 6px !important;
        height: 6px !important;
        transform: none !important;
        border-radius: 50% !important;
        background: #B8E0B9 !important;
      }

      .intro-hero.intro-hero-playful .hero-title,
      .intro-hero.intro-hero-playful .hero-title .highlight {
        max-width: 100% !important;
        font-size: clamp(31px, 9vw, 39px) !important;
        line-height: 1.28 !important;
        letter-spacing: -.06em !important;
        word-break: keep-all !important;
      }

      .intro-hero.intro-hero-playful .hero-title .title-line {
        display: block !important;
        white-space: normal !important;
      }

      .intro-hero.intro-hero-playful .hero-desc {
        max-width: 100% !important;
        margin-top: 18px !important;
        color: rgba(255,255,255,.82) !important;
        font-size: 14px !important;
        line-height: 1.78 !important;
        word-break: keep-all !important;
      }

      .intro-hero.intro-hero-playful .hero-desc br {
        display: none !important;
      }

      .intro-hero.intro-hero-playful .hero-btns {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        margin-top: 24px !important;
      }

      .intro-hero.intro-hero-playful .hero-btns a,
      .intro-hero.intro-hero-playful .btn-primary,
      .intro-hero.intro-hero-playful .btn-outline {
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        text-align: center !important;
      }

      .intro-hero.intro-hero-playful .hero-stats {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0 !important;
        margin-top: 24px !important;
        padding-top: 18px !important;
        border-top: 1px solid rgba(255,255,255,.22) !important;
      }

      .intro-hero.intro-hero-playful .stat-item,
      .intro-hero.intro-hero-playful .stat-item:first-child {
        padding: 0 9px !important;
        border-left: 1px solid rgba(255,255,255,.18) !important;
      }

      .intro-hero.intro-hero-playful .stat-item:first-child {
        padding-left: 0 !important;
        border-left: 0 !important;
      }

      .intro-hero.intro-hero-playful .stat-num,
      .intro-hero.intro-hero-playful .stat-num span {
        font-size: 22px !important;
        letter-spacing: -.04em !important;
      }

      .intro-hero.intro-hero-playful .stat-label {
        margin-top: 6px !important;
        font-size: 10px !important;
        line-height: 1.4 !important;
      }

      .intro-hero.intro-hero-playful .hero-scene {
        min-height: 310px !important;
        margin-top: 34px !important;
        border-radius: 22px !important;
      }

      .intro-hero.intro-hero-playful .scene-photo {
        border-width: 4px !important;
        border-radius: 18px !important;
        box-shadow: 0 16px 30px rgba(26,49,41,.15) !important;
      }

      .intro-hero.intro-hero-playful .scene-photo-main {
        top: 0 !important;
        right: 0 !important;
        width: 73% !important;
        height: 205px !important;
      }

      .intro-hero.intro-hero-playful .scene-photo-sub {
        left: 0 !important;
        bottom: 0 !important;
        width: 63% !important;
        height: 155px !important;
      }

      .intro-hero.intro-hero-playful .scene-photo-caption,
      .intro-hero.intro-hero-playful .scene-photo-main .scene-photo-caption {
        top: auto !important;
        right: auto !important;
        left: 9px !important;
        bottom: 9px !important;
        max-width: calc(100% - 18px) !important;
        padding: 6px 8px !important;
        border-radius: 999px !important;
        background: rgba(27,57,45,.72) !important;
        color: #fff !important;
        font-size: 9px !important;
        white-space: nowrap !important;
      }

      .section {
        padding: 58px 20px !important;
      }

      .section-inner {
        width: 100% !important;
      }

      .section .section-header {
        margin-bottom: 24px !important;
        text-align: left !important;
      }

      .section .section-eyebrow {
        font-size: 11px !important;
      }

      .section .section-title {
        margin-top: 10px !important;
        font-size: clamp(26px, 7.6vw, 34px) !important;
        line-height: 1.32 !important;
        word-break: keep-all !important;
      }

      .section .section-desc {
        margin-top: 12px !important;
        font-size: 14px !important;
        line-height: 1.72 !important;
        word-break: keep-all !important;
      }

      .pain-grid,
      .service-grid,
      .res-grid,
      .review-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
      }

      .pain-section .pain-card,
      .services-section .service-card,
      .product-section .product-card,
      .reviews-section .review-card,
      .res-section .res-card {
        padding: 22px 20px !important;
        border-radius: 16px !important;
      }

      .pain-section .pain-card h3,
      .services-section .service-card h3,
      .product-section .product-info h3,
      .res-section .res-card h3,
      .reviews-section .reviewer-name {
        font-size: 20px !important;
        line-height: 1.42 !important;
        word-break: keep-all !important;
      }

      .pain-section .pain-card p,
      .services-section .service-card p,
      .product-section .product-info p,
      .reviews-section .review-text,
      .res-section .res-card p {
        font-size: 13.5px !important;
        line-height: 1.75 !important;
        word-break: keep-all !important;
      }

      .services-section .service-card-top {
        display: flex !important;
        gap: 13px !important;
      }

      .services-section .service-tags,
      .product-section .product-uses {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 7px !important;
      }

      .product-section .product-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
      }

      .product-section .product-img-wrap {
        padding: 22px !important;
        min-height: 230px !important;
      }

      .product-section .product-info {
        padding: 24px 20px !important;
      }

      .product-section .product-btns,
      .final-cta .final-cta-btns {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
      }

      .product-section .product-btns a,
      .res-section .res-btn,
      .final-cta .final-cta-btns a {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
      }

      .res-section {
        padding: 58px 20px !important;
      }

      .res-section .section-title br {
        display: none !important;
      }

      .res-section .res-process {
        margin-top: 18px !important;
        padding: 20px !important;
        border-radius: 16px !important;
      }

      .res-section .process-steps {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }

      .res-section .process-step {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
      }

      .res-section .step-arrow {
        display: none !important;
      }

      .review-footer {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: start !important;
      }

      .final-cta {
        padding: 60px 20px !important;
      }

      .final-cta-inner {
        width: 100% !important;
      }

      .final-cta h2 {
        font-size: clamp(27px, 8vw, 36px) !important;
        line-height: 1.34 !important;
        word-break: keep-all !important;
      }

      .final-cta p {
        max-width: 310px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 14px !important;
        line-height: 1.72 !important;
        word-break: keep-all !important;
      }

      .final-cta p br {
        display: none !important;
      }

      .footer {
        padding: 0 !important;
      }

      .footer-inner {
        padding: 34px 20px !important;
      }

      .footer-top {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
      }

      .footer-bottom {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-top: 26px !important;
      }

      .footer-info {
        font-size: 12px !important;
        line-height: 1.75 !important;
        word-break: keep-all !important;
      }
    }

    @media (max-width: 380px) {
      .intro-hero.intro-hero-playful .hero {
        padding-left: 17px !important;
        padding-right: 17px !important;
      }

      .intro-hero.intro-hero-playful .hero-title,
      .intro-hero.intro-hero-playful .hero-title .highlight {
        font-size: 30px !important;
      }

      .intro-hero.intro-hero-playful .stat-num,
      .intro-hero.intro-hero-playful .stat-num span {
        font-size: 20px !important;
      }

      .intro-hero.intro-hero-playful .hero-scene {
        min-height: 286px !important;
      }

      .intro-hero.intro-hero-playful .scene-photo-main {
        height: 190px !important;
      }

      .intro-hero.intro-hero-playful .scene-photo-sub {
        height: 145px !important;
      }
    }


/* ===== 기존 about.php 스타일 블록 9 ===== */
/* PC 디자인 보호: 아래 코드는 700px 이하 모바일에서만 적용됩니다. */
    @media (max-width: 700px) {
      .header {
        position: sticky !important;
        top: 0 !important;
        z-index: 99999 !important;
        background: rgba(255,255,255,.98) !important;
      }

      .nav-inner {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 68px !important;
        padding: 0 18px !important;
      }

      .nav-logo {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
      }

      .nav-logo img {
        width: 104px !important;
        max-height: 42px !important;
        object-fit: contain !important;
      }

      .nav-utils {
        display: none !important;
      }

      .nav-hamburger,
      #mobileMenuButton {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 46px !important;
        height: 46px !important;
        margin-left: auto !important;
        padding: 0 !important;
        border: 1px solid #DDE6DF !important;
        border-radius: 13px !important;
        background: #FFFFFF !important;
        box-shadow: 0 6px 16px rgba(24, 44, 34, .08) !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        z-index: 100001 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
      }

      .nav-hamburger svg,
      #mobileMenuButton svg {
        display: block !important;
        width: 23px !important;
        height: 23px !important;
        pointer-events: none !important;
      }

      .nav-menu,
      #mobileNavMenu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 14px !important;
        right: 14px !important;
        z-index: 100000 !important;
        display: none !important;
        width: auto !important;
        max-height: calc(100vh - 94px) !important;
        margin: 0 !important;
        padding: 10px !important;
        list-style: none !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        overflow-y: auto !important;
        border: 1px solid #DDE8E0 !important;
        border-radius: 18px !important;
        background: #FFFFFF !important;
        box-shadow: 0 18px 42px rgba(24, 44, 34, .18) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
      }

      .nav-menu.menu-open,
      .nav-menu.is-open,
      #mobileNavMenu.menu-open,
      #mobileNavMenu.is-open,
      body.mobile-menu-open .nav-menu,
      body.mobile-menu-open #mobileNavMenu {
        display: grid !important;
      }

      .nav-menu li,
      #mobileNavMenu li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
      }

      .nav-menu a,
      #mobileNavMenu a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 45px !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        color: #20342A !important;
        background: transparent !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-decoration: none !important;
      }

      .nav-menu a::after,
      #mobileNavMenu a::after {
        content: '›' !important;
        color: #8A978F !important;
        font-size: 18px !important;
      }

      .nav-menu a.active,
      .nav-menu a:hover,
      #mobileNavMenu a.active,
      #mobileNavMenu a:hover {
        background: #EEF5F0 !important;
        color: #2F6B56 !important;
      }
    }


/* ===== 인라인 스타일 정리 ===== */
.featured-product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.featured-product-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--light);
  font-size: 13px;
}