/* ================================================================
   청춘배낭 메인 (Layer C)
   시안 styles.css → section-04-r3.css → correction-245.css → layout-1200-edge.css 를 같은 순서로 이어붙이고,
   헤더/푸터 규칙은 빼고, 나머지를 .ccb-main 안으로 가뒀다.
   값은 손대지 않았다. 이미지 경로만 테마 폴더로 옮겼다.
   ================================================================ */

/* 앵커 이동(#program 등)을 부드럽게. 시안 html 규칙 중 이것만 살린다. */
html { scroll-behavior: smooth; }

/* ---- from styles.css ---- */
.ccb-main, .ccb-main * {
  box-sizing: border-box;
}

.ccb-main {
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
  color: var(--navy);
  background: var(--cream);
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ccb-main a {
  color: inherit;
  text-decoration: none;
}

.ccb-main button {
  color: inherit;
  font: inherit;
}

.ccb-main img {
  display: block;
  user-select: none;
}

.ccb-main {
  position: relative;
  width: min(100%, 1200px);
  min-height: 671px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background: var(--cream);
  box-shadow: none;
}

.ccb-main .button {
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.ccb-main .button:hover,
.ccb-main .button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 9px 18px rgba(31, 49, 68, 0.18);
}

.ccb-main .hero {
  position: relative;
  min-height: 582px;
}

.ccb-main .hero-copy {
  position: relative;
  z-index: 20;
  width: 52%;
  min-height: 582px;
  padding: 118px 0 24px 44px;
}

.ccb-main .sparkle {
  position: absolute;
  top: 43px;
  left: 29px;
  width: 54px;
  height: 54px;
}

.ccb-main .hero h1 {
  position: relative;
  z-index: 3;
  width: max-content;
  margin: 0;
  color: var(--navy);
  font-size: clamp(48px, 5.02vw, 59px);
  font-weight: 950;
  line-height: 1.47;
  letter-spacing: -4.2px;
  word-break: keep-all;
  text-shadow: 0.35px 0 currentColor;
}

.ccb-main .headline-second {
  position: relative;
  display: block;
  width: max-content;
}

.ccb-main .headline-second img {
  position: absolute;
  z-index: -1;
  right: -7px;
  bottom: 5px;
  width: 310px;
  height: 25px;
}

.ccb-main .hero-description {
  margin: 22px 0 0 1px;
  color: #0a418d;
  font-size: 18px;
  font-weight: 700;
  line-height: 2;
  letter-spacing: -0.7px;
}

.ccb-main .hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
}

.ccb-main .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 53px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.55px;
}

.ccb-main .button-primary {
  gap: 15px;
  width: 184px;
  color: #fff;
  background: linear-gradient(135deg, #073d8b, #063579);
  box-shadow: 0 7px 12px rgba(7, 53, 121, 0.14);
}

.ccb-main .button-primary span {
  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
}

.ccb-main .button-secondary {
  width: 185px;
  border: 1.6px solid #0a4b9e;
  color: #0a438d;
  background: rgba(255, 255, 255, 0.18);
}

.ccb-main .curled-arrow {
  position: absolute;
  bottom: 58px;
  left: 13px;
  width: 103px;
  height: auto;
}

.ccb-main .hero-art {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 582px;
  pointer-events: none;
}

.ccb-main .art-stage {
  position: relative;
  width: 100%;
  height: 582px;
}

.ccb-main .hero-collage {
  position: absolute;
  z-index: 1;
  top: 1px;
  left: 567px;
  width: 575px;
  height: 568px;
  max-width: none;
}

.ccb-main .section-anchor {
  position: absolute;
  top: 0;
  left: 570px;
}

.ccb-main .program-showcase {
  position: relative;
  width: 100%;
  padding: 20px 36px 24px;
  background: var(--program-cream);
}

.ccb-main .program-layout {
  display: grid;
  grid-template-columns: minmax(265px, 0.76fr) repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.ccb-main .program-intro {
  position: relative;
  min-width: 0;
  padding: 22px 14px 10px 0;
  color: var(--navy);
}

.ccb-main .program-burst {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 0 27px 2px;
  object-fit: contain;
}

.ccb-main .program-eyebrow {
  margin: 0 0 31px;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 2.5px;
}

.ccb-main .program-heading {
  margin: 0;
  font-size: clamp(39px, 3.55vw, 47px);
  font-weight: 950;
  line-height: 1.46;
  letter-spacing: -3.5px;
  text-shadow: 0.35px 0 currentColor;
  word-break: keep-all;
}

.ccb-main .program-marker {
  display: block;
  width: min(100%, 268px);
  height: auto;
  margin: 8px 0 29px;
}

.ccb-main .program-lead {
  margin: 0;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.8;
  letter-spacing: -0.6px;
}

.ccb-main .program-plane {
  width: min(162px, 70%);
  height: auto;
  margin: 22px 0 -7px auto;
}

.ccb-main .program-memo {
  width: min(265px, 96%);
  height: auto;
  margin: 0 auto;
}

.ccb-main .program-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(12, 52, 111, 0.13);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 8px 24px rgba(52, 44, 34, 0.035);
}

.ccb-main .program-card-visual {
  width: 100%;
  height: auto;
}

.ccb-main .program-card-body {
  padding: 3px 20px 18px;
}

.ccb-main .program-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ccb-main .program-title-row h3 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(29px, 3vw, 38px);
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: -2.8px;
}

.ccb-main .program-deco-icon {
  flex: 0 0 auto;
  width: 66px;
  height: auto;
  object-fit: contain;
}

.ccb-main .heart-icon {
  width: 70px;
}

.ccb-main .program-description {
  min-height: 55px;
  margin: 5px 0 13px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: -0.6px;
}

.ccb-main .program-meta-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
}

.ccb-main .program-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 16px;
  min-width: 0;
}

.ccb-main .program-meta span,
.ccb-main .program-status-row span,
.ccb-main .program-fee-row > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.ccb-main .program-inline-icon,
.ccb-main .program-row-icon {
  flex: 0 0 auto;
  width: 24px;
  height: auto;
  object-fit: contain;
}

.ccb-main .program-row-icon {
  width: 29px;
}

.ccb-main .program-detail {
  flex: 0 0 auto;
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  transition: transform 160ms ease;
}

.ccb-main .program-detail:hover,
.ccb-main .program-detail:focus-visible {
  transform: translateY(-2px);
}

.ccb-main .program-detail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ccb-main .program-status-row,
.ccb-main .program-fee-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.ccb-main .program-status-row {
  min-height: 58px;
  border-top: 1px solid rgba(7, 59, 134, 0.13);
}

.ccb-main .program-status-row strong {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.8px;
}

.ccb-main .program-fee-row {
  min-height: 72px;
  margin: 0 -10px;
  padding: 13px 14px;
  border: 1px solid rgba(144, 115, 83, 0.18);
  background: rgba(250, 243, 234, 0.82);
  clip-path: polygon(2% 0, 98% 0, 100% 10%, 98% 20%, 100% 30%, 98% 40%, 100% 50%, 98% 60%, 100% 70%, 98% 80%, 100% 90%, 98% 100%, 2% 100%, 0 90%, 2% 80%, 0 70%, 2% 60%, 0 50%, 2% 40%, 0 30%, 2% 20%, 0 10%);
}

.ccb-main .program-fee-row strong {
  color: var(--navy);
  font-size: 21px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: -1px;
  text-align: right;
}

.ccb-main .program-fee-row em {
  margin-right: 9px;
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}

@media (min-width: 1041px) {
  .ccb-main .program-showcase {
      height: clamp(586px, 56.28vw, 675.4px);
      padding: 0;
      overflow: hidden;
      background:
        radial-gradient(circle at 9% 14%, rgba(255, 255, 255, 0.24), transparent 24%),
        linear-gradient(90deg, #fcf4eb 0%, var(--program-cream) 52%, #fdf5ec 100%);
    }
  
  .ccb-main .program-layout {
      grid-template-columns: 300.7fr 407.7fr 409.1fr;
      column-gap: 0.421%;
      height: 100%;
      padding: 0 3.525% 0 2.508%;
      align-items: start;
    }
  
  .ccb-main .program-intro {
      height: 100%;
      padding: 0;
    }
  
  .ccb-main .program-burst,
  .ccb-main .program-eyebrow,
  .ccb-main .program-heading,
  .ccb-main .program-marker,
  .ccb-main .program-lead,
  .ccb-main .program-plane,
  .ccb-main .program-memo {
      position: absolute;
      margin: 0;
    }
  
  .ccb-main .program-burst {
      top: clamp(21.8px, 2.092vw, 25.1px);
      left: 0;
      width: clamp(39.8px, 3.825vw, 45.9px);
      height: auto;
    }
  
  .ccb-main .program-eyebrow {
      top: clamp(79.8px, 7.667vw, 92px);
      left: 2.65%;
      font-size: clamp(11.5px, 1.083vw, 13px);
    }
  
  .ccb-main .program-heading {
      top: clamp(120.6px, 11.583vw, 139px);
      left: 2.3%;
      font-size: clamp(40.8px, 3.917vw, 47px);
      line-height: 1.46;
    }
  
  .ccb-main .program-marker {
      top: clamp(229.8px, 22.067vw, 264.8px);
      left: 0;
      width: min(92.85%, 279.2px);
      height: auto;
    }
  
  .ccb-main .program-lead {
      top: clamp(268px, 25.75vw, 309px);
      left: 2.3%;
      font-size: clamp(13px, 1.25vw, 15px);
      line-height: 1.9;
    }
  
  .ccb-main .program-plane {
      top: clamp(336.2px, 32.3vw, 387.6px);
      left: 37.25%;
      width: min(56.1%, 168.7px);
      height: auto;
    }
  
  .ccb-main .program-memo {
      top: clamp(392.3px, 37.683vw, 452.2px);
      left: 6.65%;
      width: min(85.95%, 258.4px);
      height: auto;
    }
  
  .ccb-main .program-card {
      position: relative;
      height: clamp(536.2px, 51.492vw, 617.9px);
      margin-top: clamp(30.5px, 2.933vw, 35.2px);
      overflow: visible;
      border-color: #eee9e4;
      border-radius: 15px;
      background: var(--program-card);
      box-shadow: 0 4px 14px rgba(52, 44, 34, 0.025);
    }
  
  .ccb-main .program-card-visual {
      position: absolute;
      z-index: 2;
      top: clamp(-15.1px, -1.258vw, -13.1px);
      left: 2.45%;
      width: 95.07%;
      height: auto;
      max-width: none;
    }
  
  .ccb-main .program-card-body {
      height: 100%;
      padding: clamp(244px, 23.417vw, 281px) 4.9% 0;
    }
  
  .ccb-main .program-title-row {
      position: static;
      display: block;
    }
  
  .ccb-main .program-title-row h3 {
      font-size: clamp(38.2px, 3.667vw, 44px);
      line-height: 1.12;
    }
  
  .ccb-main .program-deco-icon {
      position: absolute;
      z-index: 3;
      height: auto;
    }
  
  .ccb-main .program-card-military .lantern-icon {
      top: clamp(231.8px, 22.25vw, 267px);
      right: 8.1%;
      width: 17.25%;
    }
  
  .ccb-main .program-card-meeting .heart-icon {
      top: clamp(245.3px, 23.558vw, 282.7px);
      right: 3.55%;
      width: 17.72%;
    }
  
  .ccb-main .program-description {
      min-height: 0;
      margin: clamp(7px, 0.667vw, 8px) 0 0;
      font-size: clamp(14px, 1.333vw, 16px);
      line-height: 1.75;
    }
  
  .ccb-main .program-meta-action {
      margin-top: clamp(8px, 0.833vw, 10px);
      padding: 0;
    }
  
  .ccb-main .program-meta {
      flex-wrap: nowrap;
      gap: clamp(12px, 1.333vw, 16px);
    }
  
  .ccb-main .program-meta span,
  .ccb-main .program-status-row span,
  .ccb-main .program-fee-row > span {
      font-size: clamp(12.2px, 1.167vw, 14px);
    }
  
  .ccb-main .program-inline-icon {
      width: clamp(22.4px, 2.15vw, 25.8px);
    }
  
  .ccb-main .program-row-icon {
      width: clamp(26.1px, 2.508vw, 30.1px);
    }
  
  .ccb-main .program-detail {
      position: absolute;
      z-index: 4;
      top: clamp(325.4px, 31.25vw, 375px);
      right: 3.9%;
      width: clamp(72.9px, 7vw, 84px);
      height: clamp(72.9px, 7vw, 84px);
    }
  
  .ccb-main .program-status-row {
      position: absolute;
      top: clamp(396.7px, 38.083vw, 457px);
      right: 4.9%;
      left: 4.9%;
      min-height: clamp(54.7px, 5.25vw, 63px);
    }
  
  .ccb-main .program-status-row strong {
      font-size: clamp(14px, 1.333vw, 16px);
    }
  
  .ccb-main .program-fee-row {
      position: absolute;
      top: clamp(453px, 43.5vw, 522px);
      right: 2.95%;
      left: 2.95%;
      min-height: clamp(65.1px, 6.25vw, 75px);
      margin: 0;
      padding: clamp(11px, 1.083vw, 13px) 3.45%;
      background: #f4ece2;
    }
  
  .ccb-main .program-fee-row strong {
      font-size: clamp(18.2px, 1.75vw, 21px);
    }
}

.ccb-main .first-time-showcase {
  position: relative;
  isolation: isolate;
  width: 100%;
  background: var(--cream);
}

.ccb-main .first-time-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 30px 18px 45px;
  text-align: center;
}

.ccb-main .first-time-doodle {
  order: 1;
  position: relative;
  width: min(373px, 42%);
  height: 64px;
  margin: 0 auto -2px;
}

.ccb-main .first-time-doodle img {
  position: absolute;
  top: 0;
  left: 0;
  width: 47%;
  height: 100%;
  object-fit: fill;
}

.ccb-main .first-time-doodle span {
  position: absolute;
  top: 4px;
  left: 49%;
  color: #72a8d2;
  font-family: "Comic Relief", var(--handwriting-font);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1;
  white-space: nowrap;
  transform: rotate(-1.4deg);
}

.ccb-main .first-time-headline {
  order: 2;
  margin: 0;
  color: var(--navy);
  font-size: clamp(42px, 4.9vw, 57px);
  font-weight: 950;
  line-height: 1.2;
  letter-spacing: -3.8px;
  text-shadow: 0.35px 0 currentColor;
  word-break: keep-all;
}

.ccb-main .first-time-line {
  display: inline;
}

.ccb-main .first-time-highlight {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 0 3px 1px;
}

.ccb-main .first-time-highlight > img {
  position: absolute;
  z-index: -1;
  right: -7px;
  bottom: -6px;
  width: calc(100% + 14px);
  height: 0.78em;
  object-fit: fill;
  transform: rotate(-0.7deg);
}

.ccb-main .first-time-highlight > span {
  position: relative;
  z-index: 1;
}

.ccb-main .first-time-collage {
  order: 3;
  position: relative;
  width: min(1046px, calc(100% + 6px));
  max-width: none;
  aspect-ratio: 1372 / 450;
  margin: 16px auto 0;
}

.ccb-main .first-time-photo-frame {
  position: absolute;
  z-index: 1;
  top: 2%;
  left: 11.5%;
  width: 78%;
  aspect-ratio: 1957 / 804;
  transform: rotate(0.18deg);
}

.ccb-main .first-time-photo,
.ccb-main .first-time-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ccb-main .first-time-photo {
  z-index: 1;
  object-fit: fill;
}

.ccb-main .first-time-frame {
  z-index: 2;
  object-fit: fill;
  pointer-events: none;
}

.ccb-main .first-time-callout {
  position: absolute;
  z-index: 4;
  color: #082f68;
  font-family: var(--handwriting-font);
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.7px;
  word-spacing: 2px;
  text-align: center;
  text-shadow: 0.32px 0 currentColor, 0 0.22px currentColor;
  -webkit-text-stroke: 0.28px currentColor;
}

.ccb-main .first-time-callout img {
  width: 100%;
  height: auto;
}

.ccb-main .first-time-callout span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 7%;
  white-space: nowrap;
}

.ccb-main .callout-facilitator {
  top: 8%;
  left: 0.8%;
  width: 30.3%;
  transform: rotate(-5.5deg);
}

.ccb-main .callout-facilitator span {
  transform: rotate(-2deg);
  transform-origin: center;
}

.ccb-main .callout-small-group {
  top: 21%;
  right: 0.6%;
  width: 26.8%;
  color: #192d42;
  transform: rotate(7deg);
}

.ccb-main .callout-neighborhood {
  bottom: 3%;
  left: 0.5%;
  width: 27.3%;
  transform: rotate(2.2deg);
}

.ccb-main .first-time-decoration {
  position: absolute;
  z-index: 5;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.ccb-main .decoration-yellow-star {
  top: 1.5%;
  left: -2.3%;
  width: 4.6%;
}

.ccb-main .decoration-left-blue-star {
  bottom: 16%;
  left: -3.4%;
  width: 4.2%;
}

.ccb-main .decoration-right-lines {
  top: 13%;
  right: -1.8%;
  width: 5.7%;
}

.ccb-main .decoration-bottom-star {
  right: 9.5%;
  bottom: -5%;
  width: 4.4%;
}

.ccb-main .first-time-lead-wrap {
  order: 4;
  position: relative;
  margin-top: 1px;
}

.ccb-main .first-time-lead {
  margin: 0;
  color: var(--navy);
  font-size: clamp(17px, 1.75vw, 20px);
  font-weight: 850;
  line-height: 1.5;
  letter-spacing: -0.8px;
}

.ccb-main .first-time-squiggle {
  width: 96px;
  height: auto;
  margin: -2px auto 0;
}

.ccb-main [id] {
  scroll-margin-top: 96px;
}

.ccb-main :focus-visible {
  outline: 3px solid rgba(5, 72, 154, 0.42);
  outline-offset: 4px;
}

@media (max-width: 1040px) {
  .ccb-main .hero {
      display: flex;
      flex-direction: column;
      min-height: auto;
    }
  
  .ccb-main .hero-copy {
      order: 2;
      width: 100%;
      min-height: 570px;
      padding-left: clamp(28px, 7vw, 64px);
    }
  
  .ccb-main .hero-art {
      order: 1;
      position: relative;
      width: 100%;
      height: auto;
      overflow: hidden;
    }
  
  .ccb-main .art-stage {
      width: 100%;
      height: auto;
    }
  
  .ccb-main .hero-collage {
      position: relative;
      top: auto;
      left: auto;
      width: min(575px, 100%);
      height: auto;
      margin: 0 auto;
    }
  
  .ccb-main .section-anchor {
      left: 50%;
    }
  
  .ccb-main .program-showcase {
      padding: 58px clamp(22px, 5vw, 46px) 48px;
    }
  
  .ccb-main .program-layout {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
    }
  
  .ccb-main .program-intro {
      grid-column: 1 / -1;
      width: min(100%, 560px);
      margin: 0 auto 8px;
      padding: 0;
    }
  
  .ccb-main .program-heading {
      font-size: clamp(42px, 7vw, 59px);
      line-height: 1.3;
    }
  
  .ccb-main .program-marker {
      width: min(320px, 72%);
    }
  
  .ccb-main .program-lead {
      font-size: clamp(16px, 2.5vw, 20px);
    }
  
  .ccb-main .program-plane {
      width: min(225px, 55%);
      margin-top: 8px;
    }
  
  .ccb-main .program-memo {
      width: min(350px, 88%);
    }
  
  .ccb-main .program-card-body {
      padding-inline: clamp(17px, 2.5vw, 25px);
    }
  
  .ccb-main .program-card,
  .ccb-main .program-card > .program-card-visual {
      width: 100%;
    }
  
  .ccb-main .program-card {
      min-width: 0;
    }
  
  .ccb-main .first-time-layout {
      padding: 56px clamp(20px, 5vw, 48px) 54px;
    }
  
  .ccb-main .first-time-doodle {
      width: min(330px, 70%);
      height: 57px;
      margin: 0 auto 25px;
    }
  
  .ccb-main .first-time-doodle span {
      top: 4px;
      font-size: 24px;
      letter-spacing: 1.7px;
    }
  
  .ccb-main .first-time-headline {
      margin: 0;
      color: var(--navy);
      font-size: clamp(41px, 7.2vw, 61px);
      font-weight: 950;
      line-height: 1.27;
      letter-spacing: -3.5px;
      text-shadow: 0.35px 0 currentColor;
      word-break: keep-all;
    }
  
  .ccb-main .first-time-line {
      display: block;
    }
  
  .ccb-main .first-time-lead-wrap {
      order: 3;
      margin-top: 31px;
    }
  
  .ccb-main .first-time-lead {
      font-size: clamp(16px, 2.5vw, 20px);
      font-weight: 800;
      line-height: 1.72;
    }
  
  .ccb-main .first-time-collage {
      order: 4;
      width: min(900px, calc(100% + 42px));
      aspect-ratio: 2.2;
      margin-top: 26px;
    }
  
  .ccb-main .first-time-photo-frame {
      top: 22%;
      left: 9%;
      width: 82%;
    }
  
  .ccb-main .callout-facilitator {
      top: 0;
      left: 1%;
      width: 36%;
    }
  
  .ccb-main .callout-small-group {
      top: 7%;
      right: 1%;
      width: 33%;
    }
  
  .ccb-main .callout-neighborhood {
      bottom: 0;
      left: 2%;
      width: 35%;
    }
  
  .ccb-main .decoration-yellow-star {
      top: 0;
      left: -1%;
      width: 4.8%;
    }
  
  .ccb-main .decoration-left-blue-star {
      bottom: 17%;
      left: -2%;
      width: 4.4%;
    }
  
  .ccb-main .decoration-right-lines {
      top: 6%;
      right: -1%;
      width: 5.8%;
    }
  
  .ccb-main .decoration-bottom-star {
      right: 3%;
      bottom: 2%;
      width: 4.7%;
    }
}

@media (max-width: 620px) {
  .ccb-main {
      border-radius: 14px;
    }
  
  .ccb-main .hero-copy {
      min-height: 350px;
      padding: 54px 22px 46px;
    }
  
  .ccb-main .sparkle {
      top: 9px;
      left: 22px;
      width: 34px;
      height: 34px;
    }
  
  .ccb-main .hero h1 {
      font-size: clamp(36px, 10.6vw, 44px);
      line-height: 1.27;
      letter-spacing: -2.9px;
    }
  
  .ccb-main .headline-second img {
      bottom: 3px;
      width: 65%;
      height: auto;
    }
  
  .ccb-main .hero-description {
      margin-top: 14px;
      font-size: 14px;
      line-height: 1.65;
    }
  
  .ccb-main .hero-actions {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      margin-top: 16px;
    }
  
  .ccb-main .button {
      width: 100%;
      height: 42px;
      font-size: 14px;
    }
  
  .ccb-main .button-primary {
      width: 100%;
    }
  
  .ccb-main .button-secondary {
      width: 100%;
    }
  
  .ccb-main .curled-arrow {
      bottom: 3px;
      left: 10px;
      width: 72px;
    }
  
  .ccb-main .program-showcase {
      padding: 48px 14px 38px;
    }
  
  .ccb-main .program-layout {
      grid-template-columns: 1fr;
      gap: 13px;
    }
  
  .ccb-main .program-intro {
      grid-column: auto;
      width: 100%;
      margin-bottom: 0;
      padding-inline: 8px;
    }
  
  .ccb-main .program-burst {
      width: 42px;
      height: 42px;
      margin-bottom: 24px;
    }
  
  .ccb-main .program-heading {
      font-size: clamp(35px, 10vw, 42px);
      letter-spacing: -3px;
    }
  
  .ccb-main .program-marker {
      margin-bottom: 25px;
    }
  
  .ccb-main .program-lead {
      font-size: 16px;
    }
  
  .ccb-main .program-plane {
      width: min(110px, 32%);
      margin: 4px 5% -5px auto;
    }
  
  .ccb-main .program-memo {
      width: min(260px, 76%);
    }
  
  .ccb-main .program-card {
      display: grid;
      grid-template-columns: 46% 54%;
      width: min(100%, 570px);
      min-height: 112px;
      margin-inline: auto;
      overflow: hidden;
      background: var(--program-card);
    }
  
  .ccb-main .program-card > .program-card-visual {
      position: static;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  
  .ccb-main .program-card-body {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
      padding: 9px 10px;
    }
  
  .ccb-main .program-title-row {
      align-items: flex-start;
      gap: 6px;
    }
  
  .ccb-main .program-title-row h3 {
      font-size: clamp(18px, 5.2vw, 22px);
      letter-spacing: -1.3px;
    }
  
  .ccb-main .program-deco-icon {
      width: 30px;
    }
  
  .ccb-main .heart-icon {
      width: 33px;
    }
  
  .ccb-main .program-description,
  .ccb-main .program-status-row,
  .ccb-main .program-fee-row {
      display: none;
    }
  
  .ccb-main .program-meta-action {
      align-items: end;
      gap: 5px;
      margin-top: 7px;
      padding: 0;
    }
  
  .ccb-main .program-meta {
      display: grid;
      gap: 6px;
    }
  
  .ccb-main .program-meta span {
      gap: 5px;
      font-size: 10px;
    }
  
  .ccb-main .program-inline-icon {
      width: 15px;
    }
  
  .ccb-main .program-detail {
      position: static;
      width: 40px;
      height: 40px;
    }
  
  .ccb-main .program-eyebrow {
      margin-bottom: 25px;
      font-size: 13px;
    }
  
  .ccb-main .program-lead {
      font-size: 16px;
    }
  
  .ccb-main .program-plane {
      margin-top: 4px;
    }
  
  .ccb-main .program-memo {
      width: min(260px, 76%);
    }
  
  .ccb-main .first-time-layout {
      padding: 50px 17px 42px;
    }
  
  .ccb-main .first-time-doodle {
      width: min(250px, 72%);
      height: 44px;
      margin-bottom: 22px;
    }
  
  .ccb-main .first-time-doodle span {
      top: 2px;
      font-size: 18px;
      letter-spacing: 1.1px;
    }
  
  .ccb-main .first-time-headline {
      font-size: clamp(37px, 10.5vw, 48px);
      letter-spacing: -2.8px;
    }
  
  .ccb-main .first-time-lead {
      font-size: 15px;
      line-height: 1.75;
    }
  
  .ccb-main .first-time-lead-wrap {
      margin-top: 27px;
    }
  
  .ccb-main .first-time-collage {
      width: calc(100% + 24px);
      aspect-ratio: 1.72;
      margin-top: 24px;
    }
  
  .ccb-main .first-time-photo-frame {
      top: 31%;
      left: 6%;
      width: 88%;
    }
  
  .ccb-main .first-time-callout {
      font-size: clamp(12px, 3.8vw, 16px);
      letter-spacing: 0.25px;
      word-spacing: 1px;
    }
  
  .ccb-main .callout-facilitator {
      top: 0;
      left: 0;
      width: 43%;
    }
  
  .ccb-main .callout-small-group {
      top: 8%;
      right: 0;
      width: 40%;
    }
  
  .ccb-main .callout-neighborhood {
      bottom: 0;
      left: 1%;
      width: 43%;
    }
  
  .ccb-main .decoration-yellow-star {
      top: 0;
      left: -1%;
      width: 7%;
      transform: translate(-10%, -25%);
    }
  
  .ccb-main .decoration-left-blue-star {
      bottom: 20%;
      left: -2.5%;
      width: 6.3%;
    }
  
  .ccb-main .decoration-right-lines {
      top: 7%;
      right: -1%;
      width: 7.8%;
    }
  
  .ccb-main .decoration-bottom-star {
      right: 0;
      bottom: 1%;
      width: 6.5%;
    }
}

@media (prefers-reduced-motion: reduce) {
  .ccb-main, .ccb-main *,
  .ccb-main *::before,
  .ccb-main *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }
}

.ccb-main {
  border-radius: 0;
}

.ccb-main .hero {
  display: grid;
  grid-template-columns: 51% 49%;
  min-height: 609px;
}

.ccb-main .hero-copy {
  position: relative;
  z-index: 3;
  width: auto;
  min-height: 609px;
  padding: 120px 0 0 48px;
}

.ccb-main .hero-star {
  position: absolute;
  top: 25px;
  left: 5px;
  width: 85px;
  height: 97px;
  object-fit: contain;
}

.ccb-main .hero h1 {
  width: auto;
  font-size: 58px;
  line-height: 1.28;
  letter-spacing: -4.8px;
}

.ccb-main .hero h1 > span {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: inline-block;
  white-space: nowrap;
}

.ccb-main .hero h1 > span img {
  position: absolute;
  z-index: -1;
  right: -23px;
  bottom: -22px;
  width: 274px;
  height: auto;
  object-fit: contain;
}

.ccb-main .hero-description {
  margin: 31px 0 0;
  font-size: 17px;
  line-height: 2;
  letter-spacing: -0.65px;
}

.ccb-main .hero-actions {
  gap: 18px;
  margin-top: 31px;
}

.ccb-main .button {
  height: 52px;
  border: 1.5px solid var(--navy);
  font-size: 16px;
}

.ccb-main .button-primary {
  justify-content: space-between;
  gap: 0;
  width: 190px;
  padding: 0 25px 0 31px;
  background: var(--navy);
}

.ccb-main .button-secondary {
  width: 191px;
}

.ccb-main .hero-loop {
  position: absolute;
  bottom: 58px;
  left: 13px;
  width: 110px;
  height: 48px;
  object-fit: contain;
}

.ccb-main .hero-art {
  position: relative;
  z-index: 2;
  top: auto;
  left: auto;
  min-width: 0;
  width: auto;
  height: 609px;
  pointer-events: none;
}

.ccb-main .art-stage {
  position: absolute;
  top: 0;
  right: 0;
  width: 600px;
  height: 609px;
}

.ccb-main .photo-group {
  position: absolute;
  z-index: 2;
  top: 47px;
  left: 28px;
  width: 494px;
  height: 370px;
  transform: rotate(5deg);
  transform-origin: center;
}

.ccb-main .photo-window,
.ccb-main .photo,
.ccb-main .photo-frame {
  position: absolute;
  display: block;
}

.ccb-main .photo-window {
  z-index: 1;
  inset: 0;
  width: 494px;
  height: 370px;
  overflow: visible;
}

.ccb-main .photo {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.ccb-main .photo-frame {
  z-index: 2;
  inset: 0;
  width: 494px;
  height: 370px;
  object-fit: fill;
  pointer-events: none;
}

.ccb-main .yellow-note,
.ccb-main .white-note,
.ccb-main .blue-note {
  position: absolute;
  z-index: 5;
  color: #151c24;
  font-family: "Gaegu", cursive;
  transform-origin: center;
}

.ccb-main .yellow-note img,
.ccb-main .white-note img,
.ccb-main .blue-note img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(70, 48, 25, 0.16));
}

.ccb-main .yellow-note span,
.ccb-main .white-note p,
.ccb-main .blue-note p {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-weight: 400;
  text-shadow: none;
  white-space: nowrap;
}

.ccb-main .yellow-note span {
  font-weight: 700;
}

.ccb-main .yellow-note-a {
  z-index: 6;
  top: 12px;
  left: 7px;
  width: 150px;
  height: 64px;
  transform: rotate(-7.3deg);
}

.ccb-main .yellow-note-b {
  top: 55px;
  left: 51px;
  width: 164px;
  height: 66px;
  transform: rotate(-7.3deg);
}

.ccb-main .yellow-note-a span {
  top: 21px;
  left: 32px;
  font-size: 21px;
  letter-spacing: 0.4px;
}

.ccb-main .yellow-note-b span {
  top: 22px;
  left: 27px;
  font-size: 21px;
  letter-spacing: -0.3px;
}

.ccb-main .white-note {
  top: 297px;
  left: -34px;
  width: 248px;
  height: 169px;
  transform: rotate(-4.8deg);
}

.ccb-main .white-note p {
  top: 57px;
  left: 36px;
  font-size: 19px;
  line-height: 1.7;
  letter-spacing: -1px;
}

.ccb-main .blue-note {
  top: 337px;
  left: 285px;
  width: 244px;
  height: 136px;
  transform: rotate(-7.6deg);
}

.ccb-main .blue-note p {
  top: 42px;
  left: 35px;
  font-size: 19px;
  line-height: 1.6;
  letter-spacing: -1px;
}

.ccb-main .stamp {
  position: absolute;
  z-index: 6;
  top: 28px;
  right: 60px;
  width: 140px;
  height: 96px;
}

.ccb-main .flower {
  position: absolute;
  z-index: 6;
  right: 45px;
  bottom: 20px;
  width: 90px;
  height: 127px;
  object-fit: contain;
}

@media (max-width: 1040px) {
  .ccb-main .hero {
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
  
  .ccb-main .hero-art {
      order: 1;
      width: 100%;
      height: calc(609px * var(--art-scale, 1));
      overflow: hidden;
    }
  
  .ccb-main .art-stage {
      top: 0;
      left: 50%;
      width: 600px;
      height: 609px;
      transform: translateX(-50%) scale(var(--art-scale, 1));
      transform-origin: top center;
    }
  
  .ccb-main .hero-copy {
      order: 2;
      width: 100%;
      min-height: 510px;
      padding: 82px clamp(24px, 7vw, 58px) 52px;
    }
  
  .ccb-main .hero-star {
      top: 13px;
      left: 20px;
      width: 62px;
      height: 68px;
    }
  
  .ccb-main .hero h1 {
      font-size: clamp(43px, 9.2vw, 58px);
    }
  
  .ccb-main .hero-description {
      margin-top: 26px;
    }
  
  .ccb-main .hero-loop {
      bottom: 12px;
    }
}

@media (max-width: 620px) {
  .ccb-main {
      border-radius: 0;
    }
  
  .ccb-main .hero-copy {
      min-height: 440px;
      padding: 58px 22px 45px;
    }
  
  .ccb-main .hero h1 {
      font-size: clamp(37px, 10.4vw, 48px);
      line-height: 1.3;
      letter-spacing: -3.7px;
    }
  
  .ccb-main .hero h1 > span img {
      right: 0;
      bottom: -6px;
      width: 78%;
      height: auto;
    }
  
  .ccb-main .hero-description {
      margin-top: 23px;
      font-size: 14px;
      line-height: 1.75;
    }
  
  .ccb-main .hero-actions {
      flex-direction: column;
      gap: 9px;
      margin-top: 23px;
    }
  
  .ccb-main .button,
  .ccb-main .button-primary,
  .ccb-main .button-secondary {
      width: 100%;
      height: 46px;
    }
  
  .ccb-main .hero-loop {
      width: 94px;
    }
}

.ccb-main .programs {
  width: 1672px;
  min-height: 941px;
  margin: 0 auto;
  padding: 51px 62px 33px 50px;
  display: grid;
  grid-template-columns: 376px 1fr;
  gap: 44px;
  overflow: hidden;
  font-family: inherit;
  font-weight: 400;
}

.ccb-main .programs-intro {
  position: relative;
  min-width: 0;
  padding-top: 75px;
}

.ccb-main .programs-intro__star {
  position: absolute;
  top: -9px;
  left: 0;
  width: 52px;
  height: 52px;
}

.ccb-main .programs-intro__eyebrow {
  margin: 0 0 30px 3px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .16em;
}

.ccb-main .programs-intro h1 {
  margin: 0;
  width: 380px;
  font-size: 61px;
  line-height: 1.44;
  letter-spacing: -.06em;
  font-weight: 700;
  transform: scaleX(1.04);
  transform-origin: left top;
}

.ccb-main .programs-intro__underline {
  width: 376px;
  height: 20px;
  margin: 4px 0 27px -2px;
  object-fit: fill;
}

.ccb-main .programs-intro__copy {
  margin: 0;
  font-size: 22px;
  line-height: 1.92;
  letter-spacing: -.035em;
  font-weight: 400;
}

.ccb-main .programs-intro__airplane {
  position: absolute;
  top: 470px;
  right: -6px;
  width: 250px;
  height: 117px;
}

.ccb-main .memo {
  position: absolute;
  left: 0;
  top: 650px;
  width: 358px;
  height: 241px;
  transform: rotate(-1.5deg);
  transform-origin: center;
}

.ccb-main .memo__paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ccb-main .memo__copy {
  position: absolute;
  inset: 48px 28px auto 30px;
  padding-left: 40px;
  margin: 0;
  color: #151515;
  text-align: left;
  font-size: 25px;
  line-height: 1.9;
  letter-spacing: .06em;
  font-weight: 700;
  font-family: "Gaegu", cursive;
  transform: rotate(-4deg);
}

.ccb-main .program-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.ccb-main .program-card {
  position: relative;
  height: 857px;
  border: 1px solid #dedfdd;
  border-radius: 16px;
  background: rgba(255, 253, 249, .92);
  box-shadow: 0 4px 12px rgba(42, 52, 63, .04);
}

.ccb-main .program-card__tape {
  position: absolute;
  z-index: 6;
  top: -27px;
  left: calc(50% - 56px);
  width: 112px;
  height: 48px;
}

.ccb-main .program-card--enlistment .program-card__tape {
  transform: rotate(-1deg);
}

.ccb-main .program-card--meeting .program-card__tape {
  transform: rotate(.8deg);
}

.ccb-main .program-card__media {
  position: relative;
  z-index: 1;
  width: 530px;
  height: 333px;
  margin: 39px auto 0;
}

.ccb-main .program-card__photo {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 7px;
  width: 516px;
  height: 317px;
  object-fit: cover;
}

.ccb-main .program-card__frame {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 530px;
  height: 333px;
  pointer-events: none;
}

.ccb-main .topic-tag {
  position: absolute;
  z-index: 4;
  top: -27px;
  left: -8px;
  width: 175px;
  height: 72px;
}

.ccb-main .topic-tag img {
  position: absolute;
  inset: 0;
  width: 175px;
  height: 72px;
}

.ccb-main .topic-tag span {
  position: absolute;
  inset: 26px 6px auto;
  color: #111;
  text-align: center;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.025em;
  transform: rotate(-2deg);
  transform-origin: center;
}

.ccb-main .topic-tag--yellow {
  transform: rotate(-1deg);
}

.ccb-main .topic-tag--blue {
  transform: rotate(-.4deg);
}

.ccb-main .program-card__body {
  padding: 0 27px;
}

.ccb-main .program-card__heading {
  position: relative;
  min-height: 191px;
  padding-top: 26px;
}

.ccb-main .program-card__heading h2 {
  margin: 0 0 25px;
  font-size: 47px;
  line-height: 1.12;
  letter-spacing: -.065em;
  font-weight: 700;
}

.ccb-main .program-card__heading p {
  margin: 0;
  font-size: 22px;
  line-height: 1.58;
  letter-spacing: -.035em;
  font-weight: 400;
}

.ccb-main .program-card__ornament {
  position: absolute;
  object-fit: contain;
}

.ccb-main .program-card__ornament--lantern {
  right: -3px;
  top: 3px;
  width: 76px;
  height: 92px;
}

.ccb-main .program-card__ornament--heart {
  right: -9px;
  top: 11px;
  width: 96px;
  height: 64px;
}

.ccb-main .program-card__details {
  position: relative;
  height: 86px;
  display: flex;
  align-items: flex-start;
}

.ccb-main .metadata {
  display: flex;
  margin: 22px 0 0;
}

.ccb-main .metadata > div {
  display: flex;
  align-items: center;
  height: 31px;
}

.ccb-main .metadata > div + div {
  margin-left: 17px;
  padding-left: 17px;
  border-left: 1px solid #dddcd7;
}

.ccb-main .metadata dt,
.ccb-main .metadata dd {
  margin: 0;
}

.ccb-main .metadata dt img {
  width: 24px;
  height: 28px;
}

.ccb-main .metadata > div:nth-child(2) dt img {
  width: 26px;
  height: 26px;
}

.ccb-main .metadata dd {
  margin-left: 8px;
  white-space: nowrap;
  font-size: 19px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.04em;
}

.ccb-main .detail-link {
  position: absolute;
  right: -8px;
  top: -17px;
  width: 102px;
  height: 102px;
  color: var(--navy);
  text-decoration: none;
}

.ccb-main .detail-link span {
  position: absolute;
  z-index: 2;
  top: 29px;
  left: 50%;
  width: 80px;
  transform: translateX(-50%);
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.ccb-main .detail-link__circle {
  position: absolute;
  inset: 0;
  width: 102px;
  height: 102px;
}

.ccb-main .detail-link__arrow {
  position: absolute;
  left: 33px;
  top: 56px;
  width: 36px;
  height: 24px;
}

.ccb-main .status-row {
  height: 87px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
}

.ccb-main .status-row__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 400;
}

.ccb-main .status-row__label img {
  flex: none;
}

.ccb-main .status-row strong {
  font-size: 21px;
  font-weight: 700;
}

.ccb-main .fee-row {
  position: relative;
  height: 105px;
  margin: 0 -9px;
  padding: 0 29px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: none;
}

.ccb-main .fee-row::before,
.ccb-main .fee-row::after {
  content: none;
}

.ccb-main .fee-row__paper {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.ccb-main .fee-row > :not(.fee-row__paper) {
  position: relative;
  z-index: 1;
}

.ccb-main .fee-row strong {
  font-size: 31px;
  line-height: 1.25;
  letter-spacing: -.035em;
  font-weight: 700;
}

.ccb-main .fee-row__split {
  display: flex;
  flex-direction: column;
  font-size: 25px !important;
}

@media (max-width: 800px) {
  .ccb-main .programs {
      width: 100%;
      min-height: 100vh;
      padding: 18px 14px 28px;
      display: block;
      overflow: visible;
    }
  
  .ccb-main .programs-intro {
      height: 346px;
      padding: 64px 6px 0;
    }
  
  .ccb-main .programs-intro__star {
      top: -3px;
      left: 2px;
      width: 48px;
      height: 48px;
    }
  
  .ccb-main .programs-intro__eyebrow {
      margin: 0 0 10px;
      font-size: 12px;
      letter-spacing: .15em;
    }
  
  .ccb-main .programs-intro h1 {
      font-size: 30px;
      line-height: 1.18;
      letter-spacing: -.05em;
      width: auto;
      transform: none;
    }
  
  .ccb-main .programs-intro__underline {
      width: 186px;
      height: 10px;
      margin: 3px 0 10px -2px;
    }
  
  .ccb-main .programs-intro__copy {
      font-size: 14px;
      line-height: 1.65;
    }
  
  .ccb-main .programs-intro__airplane {
      top: 178px;
      right: 8px;
      width: 105px;
      height: auto;
    }
  
  .ccb-main .memo {
      left: 35px;
      top: 232px;
      width: 200px;
      height: 134px;
    }
  
  .ccb-main .memo__copy {
      inset: 28px 15px auto 18px;
      padding-left: 0;
      font-size: 14px;
      line-height: 1.5;
    }
  
  .ccb-main .program-cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
  
  .ccb-main .program-card {
      height: auto;
      min-height: 404px;
      border-radius: 12px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 126px minmax(0, 1fr);
      padding: 12px;
    }
  
  .ccb-main .program-card__tape {
      display: none;
    }
  
  .ccb-main .program-card__media {
      width: 126px;
      height: 110px;
      margin: 0;
      align-self: start;
    }
  
  .ccb-main .program-card__photo {
      top: 4px;
      left: 3px;
      width: 120px;
      height: 102px;
    }
  
  .ccb-main .program-card__frame {
      width: 126px;
      height: 110px;
    }
  
  .ccb-main .topic-tag {
      top: -10px;
      left: -7px;
      width: 102px;
      height: 42px;
    }
  
  .ccb-main .topic-tag img {
      width: 102px;
      height: 42px;
    }
  
  .ccb-main .topic-tag span {
      inset: 12px 2px auto;
      font-size: 12px;
    }
  
  .ccb-main .program-card__body {
      display: contents;
    }
  
  .ccb-main .program-card__heading {
      min-height: 128px;
      padding: 6px 0 0 12px;
    }
  
  .ccb-main .program-card__heading h2 {
      margin: 0 0 7px;
      padding-right: 43px;
      font-size: 23px;
      line-height: 1.1;
    }
  
  .ccb-main .program-card__heading p {
      padding-right: 50px;
      font-size: 14px;
      line-height: 1.5;
    }
  
  .ccb-main .program-card__heading p br {
      display: none;
    }
  
  .ccb-main .program-card__ornament--lantern {
      right: 0;
      top: -3px;
      width: 43px;
      height: 52px;
    }
  
  .ccb-main .program-card__ornament--heart {
      right: -3px;
      top: 2px;
      width: 51px;
      height: 35px;
    }
  
  .ccb-main .program-card__details {
      grid-column: 1 / -1;
      height: 51px;
      margin-top: 9px;
      padding: 8px 50px 0 3px;
      border-top: 1px solid var(--line);
    }
  
  .ccb-main .metadata {
      margin: 0;
    }
  
  .ccb-main .metadata > div {
      height: 25px;
    }
  
  .ccb-main .metadata > div + div {
      margin-left: 10px;
      padding-left: 10px;
    }
  
  .ccb-main .metadata dt img {
      width: 17px;
      height: 20px;
    }
  
  .ccb-main .metadata > div:nth-child(2) dt img {
      width: 18px;
      height: 18px;
    }
  
  .ccb-main .metadata dd {
      margin-left: 4px;
      font-size: 12px;
    }
  
  .ccb-main .detail-link {
      right: -1px;
      top: 1px;
      width: 45px;
      height: 45px;
    }
  
  .ccb-main .detail-link span {
      display: none;
    }
  
  .ccb-main .detail-link__circle {
      width: 45px;
      height: 45px;
    }
  
  .ccb-main .detail-link__arrow {
      left: 14px;
      top: 26px;
      width: 18px;
      height: 12px;
    }
  
  .ccb-main .status-row {
      grid-column: 1 / -1;
      height: 54px;
    }
  
  .ccb-main .status-row__label {
      gap: 7px;
      font-size: 13px;
    }
  
  .ccb-main .status-row__label img {
      width: auto;
      max-width: 24px;
      max-height: 20px;
    }
  
  .ccb-main .status-row strong {
      font-size: 14px;
    }
  
  .ccb-main .fee-row {
      grid-column: 1 / -1;
      height: 69px;
      margin: 0;
      padding: 0 18px;
    }
  
  .ccb-main .fee-row strong {
      font-size: 21px;
    }
  
  .ccb-main .fee-row__split {
      font-size: 16px !important;
    }
}

@media (min-width: 801px) and (max-width: 2000px) {
  .ccb-main .programs {
      width: 100%;
      grid-template-columns: minmax(300px, 376px) minmax(0, 1fr);
      padding-right: 24px;
      padding-left: 24px;
      gap: 28px;
    }
  
  .ccb-main .program-card__media {
      width: calc(100% - 34px);
    }
  
  .ccb-main .program-card__photo,
  .ccb-main .program-card__frame {
      width: 100%;
    }
}

/* ---- from section-04-r3.css ---- */
.ccb-main .reviews {
  /* 시안은 이 섹션만 #fbf3e6 을 썼다. 전체를 크림으로 바꿀 때 이 지역 재정의가
     안 잡혀 후기 섹션만 #fbf3e6, 나머지는 #fbf6ef 로 갈렸다(2026-07-30 실측).
     지역 선언을 없애 전역 --cream 을 상속한다. 이 블록에서 var(--cream) 은
     배경 3군데(.reviews, .reviews__stage)에만 쓰여 다른 영향은 없다. */
  --navy: #082f63;
  --blue: #68a8de;
  --yellow: #f8bb18;
  color: var(--navy);
  background: var(--cream);
}

.ccb-main .reviews,
.ccb-main .reviews * { box-sizing: border-box; }

.ccb-main .reviews img { display: block; max-width: 100%; }

.ccb-main .reviews {
  width: 100%;
  overflow: hidden;
  background: var(--cream);
}

.ccb-main .reviews__stage {
  position: relative;
  width: min(100%, 1200px);
  height: 800px;
  margin-inline: auto;
  background: var(--cream);
}

.ccb-main .reviews__eyebrow-wrap {
  position: absolute;
  z-index: 5;
  left: 101px;
  top: 87px;
  width: 132px;
}

.ccb-main .reviews__eyebrow {
  margin: 0;
  color: #2f6598;
  font-family: "Comic Relief", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .09em;
  white-space: nowrap;
}

.ccb-main .reviews__eyebrow-wrap img {
  width: 130px;
  height: 8px;
  margin-top: 4px;
  object-fit: contain;
}

.ccb-main .reviews__title {
  position: absolute;
  z-index: 5;
  left: 101px;
  top: 139px;
  margin: 0;
  color: var(--navy);
  font-size: 54px;
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -.065em;
}

.ccb-main .reviews__title > span { display: block; white-space: nowrap; }

.ccb-main .reviews__mobile-break { display: none; }

.ccb-main .reviews__title em {
  position: relative;
  z-index: 0;
  display: inline-block;
  font-style: normal;
}

.ccb-main .reviews__title em img {
  position: absolute;
  z-index: -1;
  left: -9px;
  right: -10px;
  bottom: 3px;
  width: calc(100% + 19px);
  height: 28px;
  object-fit: fill;
}

.ccb-main .reviews__intro {
  position: absolute;
  z-index: 5;
  left: 103px;
  top: 303px;
  margin: 0;
  color: var(--navy);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -.04em;
}

.ccb-main .reviews__photo {
  position: absolute;
  z-index: 2;
  left: 602px;
  top: 116px;
  width: 560px;
  height: 296px;
}

.ccb-main .reviews__photo-image,
.ccb-main .reviews__photo-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.ccb-main .reviews__photo-frame { z-index: 2; pointer-events: none; }

.ccb-main .reviews__note {
  position: absolute;
  z-index: 6;
  left: 768px;
  top: 67px;
  width: 202px;
  height: 88px;
  transform: rotate(-2deg);
  transform-origin: center;
}

.ccb-main .reviews__note > img { width: 100%; height: 100%; object-fit: fill; }

.ccb-main .reviews__note p {
  position: absolute;
  inset: 17px 12px auto;
  margin: 0;
  font-family: "Gaegu", cursive;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.02em;
  text-align: center;
  transform: rotate(-1deg);
}

.ccb-main .reviews__cards {
  position: absolute;
  z-index: 4;
  left: 61px;
  top: 417px;
  width: 1080px;
  height: 264px;
  display: grid;
  grid-template-columns: 337px 337px 343px;
  gap: 31px;
}

.ccb-main .review-card { position: relative; min-width: 0; height: 264px; }

.ccb-main .review-card__paper {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.ccb-main .review-card__tape {
  position: absolute;
  z-index: 4;
  left: 110px;
  top: -8px;
  width: 92px;
  height: 31px;
  object-fit: fill;
}

.ccb-main .review-card--center .review-card__tape { left: 105px; width: 96px; }

.ccb-main .review-card__portrait {
  position: absolute;
  z-index: 2;
  left: 24px;
  top: 34px;
  width: 129px;
  height: 132px;
  background-image: url("../img/youth/section-04-r3/04-group-photo.png");
  background-repeat: no-repeat;
  background-size: 285% auto;
  border-radius: 45% 55% 49% 51% / 39% 46% 54% 61%;
  transform: rotate(1deg);
}

.ccb-main .review-card__portrait--one { background-position: 58% 49%; }

.ccb-main .review-card__portrait--two { background-position: 43% 49%; }

.ccb-main .review-card__portrait--three { background-position: 80% 49%; }

.ccb-main .review-card__quote {
  position: absolute;
  z-index: 3;
  left: 170px;
  top: 42px;
  color: var(--blue);
  font-family: Georgia, serif;
  font-size: 47px;
  font-weight: 700;
  line-height: 1;
}

.ccb-main .review-card__quote--yellow { color: var(--yellow); }

.ccb-main .review-card blockquote {
  position: absolute;
  z-index: 3;
  left: 170px;
  top: 83px;
  width: 151px;
  margin: 0;
}

.ccb-main .review-card blockquote p {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.ccb-main .review-card--center .review-card__quote,
.ccb-main .review-card--center blockquote {
  left: 160px;
}

.ccb-main .review-card mark {
  color: inherit;
  background: linear-gradient(transparent 56%, rgba(248, 187, 24, .9) 56% 92%, transparent 92%);
}

.ccb-main .review-card__label {
  position: absolute;
  z-index: 4;
  right: 21px;
  bottom: 12px;
  width: 154px;
  height: 34px;
}

.ccb-main .review-card__label img { width: 100%; height: 100%; object-fit: fill; }

.ccb-main .review-card__label span {
  position: absolute;
  inset: 7px 8px auto;
  color: var(--navy);
  font-family: "Gaegu", cursive;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.ccb-main .review-card__star {
  position: absolute;
  z-index: 3;
  left: 31px;
  bottom: 38px;
  width: 28px;
  height: 31px;
  object-fit: contain;
}

.ccb-main .review-card__star--yellow { width: 31px; height: 34px; }

.ccb-main .reviews__footer-wrap {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 716px;
  transform: translateX(-50%);
}

.ccb-main .reviews__footer {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.ccb-main .reviews__footer-wrap img {
  width: 96px;
  height: 11px;
  margin: 2px auto 0;
  object-fit: fill;
}

.ccb-main .reviews__decor { position: absolute; z-index: 3; object-fit: contain; pointer-events: none; }

.ccb-main .reviews__decor--yellow-large { left: 47px; top: 161px; width: 38px; height: 43px; }

.ccb-main .reviews__decor--yellow-small { left: 71px; top: 198px; width: 27px; height: 30px; }

.ccb-main .reviews__decor--blue-middle { left: 566px; top: 282px; width: 32px; height: 35px; }

.ccb-main .reviews__decor--blue-rays-top { left: 960px; top: 50px; width: 32px; height: 32px; }

.ccb-main .reviews__decor--yellow-loop { left: 1125px; top: 354px; width: 35px; height: 50px; object-position: right; }

.ccb-main .reviews__decor--blue-rays-bottom { left: 793px; top: 705px; width: 33px; height: 33px; }

@media (max-width: 800px) {
  .ccb-main .reviews__stage {
      width: 100%;
      height: auto;
      padding: 54px 20px 58px;
    }
  
  .ccb-main .reviews__heading { display: block; }
  
  .ccb-main .reviews__eyebrow-wrap,
  .ccb-main .reviews__title,
  .ccb-main .reviews__intro,
  .ccb-main .reviews__photo,
  .ccb-main .reviews__note,
  .ccb-main .reviews__cards,
  .ccb-main .reviews__footer-wrap {
      position: relative;
      inset: auto;
    }
  
  .ccb-main .reviews__eyebrow-wrap { width: 132px; }
  
  .ccb-main .reviews__title { margin-top: 35px; font-size: clamp(37px, 10.2vw, 45px); line-height: 1.12; }
  
  .ccb-main .reviews__title > span { white-space: normal; }
  
  .ccb-main .reviews__mobile-break { display: block; }
  
  .ccb-main .reviews__title em img { height: 23px; }
  
  .ccb-main .reviews__intro { margin-top: 27px; font-size: 18px; line-height: 1.55; }
  
  .ccb-main .reviews__photo { width: min(100%, 560px); height: auto; aspect-ratio: 530 / 280; margin-top: 35px; }
  
  .ccb-main .reviews__note { width: 174px; height: 75px; margin: -19px 9px 0 auto; }
  
  .ccb-main .reviews__note p { inset: 14px 10px auto; font-size: 17px; }
  
  .ccb-main .reviews__cards {
      width: calc(100% + 20px);
      height: auto;
      margin-top: 36px;
      display: flex;
      gap: 14px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
  
  .ccb-main .reviews__cards::-webkit-scrollbar { display: none; }
  
  .ccb-main .review-card { flex: 0 0 337px; height: 264px; scroll-snap-align: start; }
  
  .ccb-main .reviews__footer-wrap { width: fit-content; margin: 42px auto 0; transform: none; }
  
  .ccb-main .reviews__footer { font-size: 16px; white-space: normal; text-align: center; }
  
  .ccb-main .reviews__decor { display: none; }
}

/* ---- from correction-245.css ---- */
@media (min-width: 801px) {
  .ccb-main .programs {
      width: 1672px;
      min-height: 941px;
      margin: 0 -472px -265px 0;
      padding: 51px 62px 33px 50px;
      grid-template-columns: 376px 1fr;
      gap: 44px;
      transform: scale(0.7177033493);
      transform-origin: left top;
    }
  
  .ccb-main .program-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
  
  .ccb-main .program-card__media {
      width: 530px;
      height: 332.549px;
    }
  
  .ccb-main .program-card__photo,
  .ccb-main .program-card__frame {
      inset: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      border-radius: 0;
      object-fit: contain;
    }
}

.ccb-main .reviews-photo {
  width: 45%;
  height: auto;
  aspect-ratio: 512 / 280;
}

.ccb-main .reviews-photo__image,
.ccb-main .reviews-photo__frame {
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
  object-fit: contain;
}

.ccb-main .reviews-continuation {
  display: none;
}

@media (max-width: 800px) {
  .ccb-main .program-card {
      height: auto;
      min-height: 0;
    }
  
  .ccb-main .program-card__media {
      width: 126px;
      height: auto;
      aspect-ratio: 510 / 320;
    }
  
  .ccb-main .program-card__photo,
  .ccb-main .program-card__frame {
      inset: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      border-radius: 0;
      object-fit: contain;
    }
  
  .ccb-main .reviews-photo {
      width: min(100%, 350px);
      height: auto;
      aspect-ratio: 512 / 280;
    }
  
  .ccb-main .reviews-continuation {
      position: relative;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      margin: 12px 0 0;
      color: #082f63;
      font-size: 17px;
      font-weight: 700;
      line-height: 1.2;
    }
  
  .ccb-main .reviews-continuation span {
      display: inline-block;
      color: #f0b819;
      font-size: 28px;
      line-height: 1;
      animation: reviews-continuation-nudge 1.4s ease-in-out infinite alternate;
    }
}

@keyframes reviews-continuation-nudge {
  from { transform: translateX(0); }
  to { transform: translateX(7px); }
}

@media (prefers-reduced-motion: reduce) {
  .ccb-main .reviews-continuation span {
      animation: none;
    }
}

/* ---- from layout-1200-edge.css ---- */
@media (min-width: 1200px) {
  .ccb-main .hero-copy,
  .ccb-main .programs,
  .ccb-main .first-time-layout,
  .ccb-main .reviews-stage {
      padding-inline: 0;
    }
}

/* ---- 좌우 배경 블리드 (시안에 없는 보정) ---- */
.ccb-main {
  box-shadow: 0 0 0 100vmax var(--cream);
  clip-path: inset(0 -100vmax);
}

/* ==== 모바일 정리 (2026-07-30) ==================================
   파일 끝에 둔다. 앞의 시안 규칙들과 특이성이 같아 순서로 이긴다
   (앞쪽 preamble 에 두면 뒤따라오는 원본에 그냥 밀린다).
   PC 폭에는 미디어쿼리 밖으로 새는 선언이 하나도 없다. */

@media (max-width: 800px) {
  /* 프로그램 카드 설명이 낱말 중간에서 끊겼다 — '루프탑에서 노 / 을 라이브'.
     한글 기본 줄바꿈이 글자 단위라서 그렇다. 낱말 단위로 끊게 바꾼다. */
  .ccb-main .program-card__heading h2,
  .ccb-main .program-card__heading p {
      word-break: keep-all;
      overflow-wrap: break-word;
    }
}

@media (max-width: 800px) {
  /* 후기 장식 4개(별·빛살·고리)는 2794 행에서 이미 display:none 을 받고 있는데 안 먹었다.
     .ccb-main .reviews img (0,2,1) 가 .ccb-main .reviews__decor (0,2,0) 를 특이성으로 이긴다.
     — 요소 선택자 하나가 붙어 클래스 두 개짜리를 눌렀다. 순서로는 못 이긴다.
     지금은 .reviews 의 overflow:hidden 이 가려 주고 있어 화면에 티가 안 나지만,
     left:566/793/960/1125px 인 PC 좌표 그대로 깔려 있다. 특이성을 한 단계 올려 끈다. */
  .ccb-main .reviews img.reviews__decor {
      display: none;
    }
}

@media (max-width: 620px) {
  /* 히어로 손글씨 메모가 왼쪽으로 29px 잘려 '사람과…' 첫 글자가 화면 끝에 붙었다.
     .art-stage 는 600px 짜리를 --art-scale(= 화면폭/600) 로 줄여 화면에 꼭 맞추는데,
     이 메모만 stage 밖 left:-34px 에 걸쳐 있어 그만큼 밖으로 나간다.
     PC 는 stage 옆에 여백이 있어 보이지만 모바일은 hero-art 의 overflow:hidden 이 자른다.
     stage 를 줄이면 히어로 사진까지 12% 작아지므로 메모만 안으로 들인다. */
  .ccb-main .white-note {
      left: 10px;
    }

}

@media (max-width: 800px) {
  /* 프로그램 카드가 모바일에서 '사진 126px + 오른쪽 글' 2단이라 카드가 아니라
     목록 한 줄처럼 보였다. /program.php 의 카드는 사진이 카드 폭 전체다.
     같은 상품·같은 사진인데 메인만 썸네일이라 화면이 초라해진다 — 1단으로 세운다.
     .program-card__body 가 display:contents 라 heading·details·status·fee 가
     그대로 카드 그리드의 행이 된다. 열을 하나로 만들면 사진 아래로 차례대로 쌓인다. */
  .ccb-main .program-card {
      grid-template-columns: minmax(0, 1fr);
      min-height: 0;
      padding: 14px 14px 16px;
    }

  .ccb-main .program-card__media {
      width: 100%;
      height: auto;
      aspect-ratio: 510 / 320;
    }

  /* 썸네일 시절 좌표(top:4 left:3 120x102)를 지운다. 남기면 사진만 구석에 붙는다. */
  .ccb-main .program-card__photo,
  .ccb-main .program-card__frame {
      inset: 0;
      width: 100%;
      height: 100%;
    }

  .ccb-main .program-card__heading {
      min-height: 0;
      padding: 15px 0 0;
    }

  .ccb-main .program-card__heading h2 {
      font-size: 25px;
    }

  .ccb-main .program-card__heading p {
      padding-right: 56px;
      font-size: 15px;
      line-height: 1.6;
    }

  /* 메타(진해 · 저녁 3시간)와 버튼의 세로 중심이 5px 어긋나 있었다 —
     메타는 위 패딩 8px 로 밀려 중심 1439, 버튼은 top:7px 라 중심 1444.
     위아래 패딩을 없애고 둘 다 행 한가운데로 맞춘다.
     오른쪽 패딩은 버튼(110px) 자리로 남긴다 — 메타가 길어져도 버튼 밑으로 안 들어간다. */
  .ccb-main .program-card__details {
      align-items: center;
      padding: 0 120px 0 0;
    }

  /* 글자 한 단계 키우기 (대표 지시 2026-07-30)
     진해·저녁 3시간 12 → 13 / 모집 현황·참가비 13 → 14 / 모집 상태값 14 → 15.
     금액(50,000원 21px)은 이미 제일 크므로 그대로 둔다. */
  .ccb-main .metadata dd {
      font-size: 13px;
    }

  .ccb-main .status-row__label {
      font-size: 14px;
    }

  .ccb-main .status-row strong {
      font-size: 15px;
    }

  /* 메모 종이(같은 고민을 가진…)의 아랫부분이 첫 카드에 덮여 잘렸다.
     .programs-intro 가 height:346px 고정인데 메모는 absolute 로 top:232 + 높이 139 =
     371 이라 22px 이 상자 밖으로 나간다. 뒤따르는 카드가 그 위를 덮는다(둘 다 z-index auto,
     카드가 DOM 뒤라 위에 그려진다). 메모를 위로 올리면 바로 위 소개문과 겹치므로
     상자를 메모에 맞춰 늘린다. 374 = 371 + 여유 3. */
  .ccb-main .programs-intro {
      height: 374px;
    }

  /* 태그 글자가 스티커 정가운데가 아니었다 — 위 10px / 아래 16px 로 3px 위에 붙어 있다.
     스티커가 44px 인데 12px 로 고정돼 있어서다. 15px 로 내려 위아래를 맞춘다. */
  .ccb-main .topic-tag span {
      inset: 15px 2px auto;
    }

  /* 장식(랜턴·하트)의 윗선을 제목 윗선에 맞춘다. (대표 지시 2026-07-30)
     둘 다 heading 기준 absolute 이고 heading 의 위 패딩이 15px 이라,
     top:15px 이면 제목 글상자 윗변과 정확히 같은 높이가 된다(실측).
     겸사겸사 랜턴이 사진에 3px 물려 고리가 잘리던 것도 없어진다 — 이제 15px 아래다.
     원래 값: 랜턴 -3px / 하트 2px. */
  .ccb-main .program-card__ornament--lantern,
  .ccb-main .program-card__ornament--heart {
      top: 15px;
    }

  /* '자세히 보기' 를 알약 버튼으로. (대표 지시 2026-07-30)
     PC 는 102px 원 안에 글자+화살표를 넣는 구조인데, 모바일에서 45px 로 줄이면서
     글자를 숨겨 동그라미만 남아 뭘 누르는지 알 수 없었다.
     원(circle SVG)은 접고, 링크 자체를 히어로 주 버튼과 같은 남색 알약으로 만든다.
     흐름에 안 끼는 absolute 라 줄 높이는 안 늘어난다. */
  .ccb-main .detail-link {
      right: 0;
      /* 행 한가운데. 고정값(7px)이면 메타와 5px 어긋난다. */
      top: 50%;
      transform: translateY(-50%);
      width: auto;
      height: 38px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0 15px;
      border-radius: 999px;
      background: #073d8b;
      color: #fff;
    }

  .ccb-main .detail-link span {
      display: block;
      position: static;
      width: auto;
      transform: none;
      font-size: 13px;
      font-weight: 800;
      color: #fff;
      white-space: nowrap;
    }

  .ccb-main .detail-link__circle {
      display: none;
    }

  /* 화살표 SVG 는 남색이라 남색 배경 위에서 안 보인다. 흰색으로 뒤집는다. */
  .ccb-main .detail-link__arrow {
      position: static;
      left: auto;
      top: auto;
      width: 16px;
      height: 11px;
      filter: brightness(0) invert(1);
    }

  /* 카드 설명의 <br> 을 되살린다. 2278 행이 숨기고 있었는데, 그건 사진이 126px
     썸네일이라 글 칸이 좁던 시절의 처리다. 사진을 카드 폭으로 세운 지금은
     칸이 넓어 두 줄이 그대로 들어간다. /program.php 와 같은 줄바꿈이 된다.
     숨긴 채로 두면 '노을 라이브 일상에 지친…' 처럼 두 문장이 한 문장으로 읽힌다. */
  .ccb-main .program-card__heading p br {
      display: inline;
    }
}

/* first-time 소개문 줄바꿈 — 모바일에서만 '순간까지,' 뒤에서 넘긴다. */
.ccb-main .ft-mo-break { display: none; }

/* ==== 후기 카드: 가로 스와이프 → 세로 3장 쌓기 (모바일 시안 4.png, 대표 확정 2026-07-31)
   7/30 에는 "스와이프 유지 + 밀어서 더 보기 안내" 로 갔었다. 시안이 세로라 뒤집는다.

   시안 실측(941px 폭 기준, 카드 종이 x 80~858 = 폭 779):
     원형 사진  카드 왼쪽에서 7.7%, 폭 22.3%
     글         카드 왼쪽에서 34.7%
     카드 비율  779 : 247 ≈ 3.15
     카드 간격  약 7px (pitch 254 - 높이 247)

   카드 속 요소가 전부 absolute 픽셀 좌표(337x264 가로카드 기준)라
   폭이 늘어나면 자리가 다 어긋난다. grid 2단으로 바꾸고 좌표를 푼다.
   종이(.review-card__paper)만 absolute inset:0 으로 남겨 배경 역할을 시킨다 —
   높이가 내용에 따라 늘어도 object-fit:fill 이라 알아서 늘어난다. */
@media (max-width: 620px) {
  .ccb-main .reviews__cards {
      width: 100%;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow: visible;
      scroll-snap-type: none;
    }

  .ccb-main .review-card {
      flex: none;
      width: 100%;
      height: auto;
      display: grid;
      /* 시안의 22.3% 는 '카드 전체 폭' 기준인데 grid 는 '패딩 안쪽' 기준이라
         좌우 패딩(7.7+6=13.7%)을 뺀 값으로 환산해야 같은 크기가 된다. */
      grid-template-columns: 26% minmax(0, 1fr);
      column-gap: 5.8%;
      align-content: center;
      padding: 26px 6% 26px 7.7%;
      scroll-snap-align: none;
    }

  /* 사진은 두 번째 칸(글) 세 줄 전체 높이에 걸쳐 가운데 정렬 */
  .ccb-main .review-card__portrait {
      position: static;
      grid-column: 1;
      grid-row: 1 / span 3;
      align-self: center;
      width: 100%;
      height: auto;
      aspect-ratio: 174 / 196;
      transform: rotate(1deg);
    }

  .ccb-main .review-card__quote {
      position: static;
      grid-column: 2;
      grid-row: 1;
      font-size: 34px;
      line-height: .8;
    }

  .ccb-main .review-card blockquote {
      position: static;
      grid-column: 2;
      grid-row: 2;
      width: auto;
      margin-top: 4px;
    }

  /* nowrap 은 337px 고정 카드 시절 것이다. 폭이 유동이 됐으니 풀고 낱말 단위로 끊는다.
     <br> 은 4줄용이라 숨긴다 — 마크업에 앞뒤 띄어쓰기를 넣어 뒀으므로 글자가 안 붙는다. */
  .ccb-main .review-card blockquote p {
      white-space: normal;
      word-break: keep-all;
      font-size: 14px;
      line-height: 1.6;
    }

  .ccb-main .review-card blockquote br {
      display: none;
    }

  /* static 으로 두면 안쪽 span(absolute) 의 기준이 카드로 넘어가 글자만 카드 맨 위로 튄다.
     흐름에는 넣되 relative 를 유지해야 span 이 라벨 안에 남는다. */
  .ccb-main .review-card__label {
      position: relative;
      inset: auto;
      grid-column: 2;
      grid-row: 3;
      width: 148px;
      height: 32px;
      margin-top: 10px;
    }

  .ccb-main .review-card__label span {
      inset: 6px 8px auto;
      font-size: 16px;
    }

  .ccb-main .review-card__tape {
      left: 42%;
      top: -6px;
      width: 17%;
      height: auto;
    }

  .ccb-main .review-card--center .review-card__tape {
      left: 40%;
      width: 18%;
    }

  .ccb-main .review-card__star {
      left: 2.5%;
      bottom: 14%;
      width: 24px;
      height: 26px;
    }

  /* 세로로 쌓으니 '밀어서 더 보기' 안내는 필요 없다 */
  .ccb-main .reviews-continuation {
      display: none;
    }
}

@media (max-width: 620px) {
  .ccb-main .ft-mo-break { display: inline; }

  /* ==== first-time 콜라주 — 새 모바일 에셋 기준으로 재배치 (2026-07-31)
     새 사진은 비율 1.25(1600x1280). 옛 것은 2.43 이라 배치를 통째로 다시 잡는다.

     시안 3.png 실측 (941px 폭):
       사진      x  43~908 (866)  y  744~1436 (693)   비율 1.25
       말풍선1   x  28~397 (370)  y  704~ 849 (146)   사진 위로 걸침
       말풍선2   x 477~873 (397)  y  742~ 879 (138)
       말풍선3   x  33~473 (441)  y 1330~1451 (122)   사진 아래쪽에 걸침

     콜라주 상자 = 말풍선까지 포함한 전체 = x 28~908(880) y 704~1451(748) → 비율 1.176
     그 안에서 사진은 top 5.3% / left 1.7% / 폭 98.4% / 높이 92.6% 다. */
  .ccb-main .first-time-collage {
      width: 100%;
      aspect-ratio: 880 / 748;
      margin-top: 26px;
    }

  .ccb-main .first-time-photo-frame {
      top: 5.3%;
      left: 1.7%;
      width: 98.4%;
      height: 92.6%;
      /* 옛 사진 비율(1957/804)이 박혀 있어 그대로 두면 새 사진이 눌린다 */
      aspect-ratio: auto;
    }

  .ccb-main .callout-facilitator {
      top: 0;
      left: 0;
      right: auto;
      width: 42%;
    }

  .ccb-main .callout-small-group {
      top: 5.1%;
      left: 51%;
      right: auto;
      width: 45%;
    }

  .ccb-main .callout-neighborhood {
      top: 83.7%;
      bottom: auto;
      left: 0.6%;
      width: 50%;
    }

  /* 곡선을 새 갈고리 화살표(정사각 200x200)로 바꿨다. 옛 것은 가로로 누운 곡선이라
     47% 폭 x 100% 높이 상자에 맞춰져 있었는데, 정사각이 되면 그 상자에서 납작해진다.
     시안처럼 'FIRST TIME?' 글자는 오른쪽 위, 곡선은 그 아래 왼쪽에서 제목을 가리킨다.
     곡선을 absolute 로 빼내 글자 줄 높이에 안 묶이게 한다. */
  .ccb-main .first-time-doodle {
      width: min(300px, 84%);
      height: 30px;
      overflow: visible;
    }

  .ccb-main .first-time-doodle span {
      left: 0;
      right: 0;
      top: 0;
    }

  /* 시안은 제목이 오른쪽에 치우쳐 있어 곡선이 들어갈 왼쪽 여백이 넓다.
     우리 제목은 가운데 정렬(x 85~348)이라 그 자리가 없다 —
     곡선을 상자 밖 왼쪽(-52px)으로 빼야 화살촉이 '혼자' 에 안 가린다.
     doodle 상자는 가운데 정렬돼 왼쪽에 66px 이 남아 있어 잘리지 않는다. */
  /* 화살표 에셋이 150x200(비율 0.75). 상자도 같은 비율로 잡아야
     object-fit:contain 이 안쪽에 여백을 만들지 않는다.

     left 는 -48px 이었다. 화살촉이 제목에 가려질까 봐 상자 밖으로 뺐던 것인데,
     그러니 화살표가 빈 공간을 가리켜 손짓이 죽었다. 0 으로 되돌린다 (대표 지시).
     상자 좌표로는 제목 첫 줄과 7~14px 겹치지만 그건 이미지의 투명 여백이고,
     실제 획은 '혼' 앞에서 멈춘다 — 390/401/355px 세 폭에서 확대해 확인했다. */
  .ccb-main .first-time-doodle img {
      left: 0;
      top: 2px;
      width: 82px;
      height: 109px;
      object-fit: contain;
      object-position: left top;
    }
}

@media (max-width: 1040px) {
  /* 히어로 그림이 왼쪽으로 쏠려 있었다 — 실측 왼쪽 여백 2px / 오른쪽 32px.
     translate 값이 틀린 게 아니라, 600px 무대 안에서 그림이 2.8~555.6 에 놓여
     오른쪽에 44px 을 비워 두기 때문이다. 무대는 -50% 로 정확히 가운데 있다.

     translateX 의 % 는 무대 폭 600px 기준이라 축소 배율을 타지 않는다.
     그래서 -48% 같은 값으로 보정하면 지금 폭(12px 이동)에서만 맞고,
     배율이 1 이 되는 넓은 폭에서는 21px 이 필요해 다시 어긋난다.

     scale 뒤에 밀기를 하나 더 붙이면 그 밀기는 배율을 같이 탄다.
     21px = (오른쪽 빈칸 44.4 - 왼쪽 빈칸 2.8) / 2. 모든 폭에서 가운데가 맞는다. */
  .ccb-main .art-stage {
      transform: translateX(-50%) scale(var(--art-scale, 1)) translateX(21px);
    }
}

@media (max-width: 620px) {
  /* 히어로 제목의 노란 마커가 글자를 가로질러 '답이 됩니다' 아래쪽 획을 덮었다.
     1704 행이 bottom:-6px 로 고정값을 쓰는데, PC 는 -22px 이고 글자도 58px 이라
     비율로 보면 -0.38em 이다. 모바일은 글자가 45px 로 줄었는데 오프셋만 -6px(-0.13em)
     이라 마커가 0.25em 위로 올라붙었다. em 으로 바꿔 글자 크기를 따라가게 한다.
     폭·오른쪽 걸침도 PC 비율(274/378 ≈ 73%, -23/58 ≈ -0.4em)에 맞춘다. */
  .ccb-main .hero h1 > span img {
      right: -0.4em;
      bottom: -0.38em;
      width: 73%;
    }

  /* 노란 별이 제목 첫 줄과 23px 겹쳐 아래 뾰족한 획이 글자 뒤로 숨었다.
     PC 는 제목 바로 위에 떠 있다(겹침 2px). 같은 모양이 되게 위로 올린다.
     위 패딩을 0 으로 만든 뒤에는 hero-copy 안에 별이 설 자리가 없어
     그림 영역까지 올려야 한다(-78px = 별 높이 68 + 여유 10).
     그 자리(x 20~82, y 436~504)는 그림이 비어 있는 곳이라 겹치지 않는다. */
  .ccb-main .hero-star {
      top: -78px;
    }

  /* 히어로 그림과 제목 사이가 72px 떠 있었다(그림 바닥 499 → 제목 572).
     위 패딩 58px 을 뺀다. 다만 화살표 낙서(.hero-loop)는 hero-copy 아래쪽에
     absolute 로 붙어 있어서 min-height 를 그대로 두면 글이 위로 간 만큼
     버튼과 낙서 사이가 64px → 122px 로 벌어진다. 같은 58px 을 min-height 에서도 뺀다. */
  .ccb-main .hero-copy {
      padding-top: 0;
      /* 화살표 낙서를 위로 올린다 (대표 지시). 낙서는 bottom:12px 로 이 상자
         아래쪽에 붙어 있으므로, 낙서만 옮기면 그 아래가 비어 버린다.
         상자 높이를 줄여야 낙서와 섹션 끝이 같이 올라온다.
         382 → 338 = 버튼과 낙서 사이 64px → 20px. */
      min-height: 338px;
    }

  /* 프로그램 소개 — 세로 배치로 간다. (대표 결정 2026-07-30)
     한 줄(글 왼쪽/메모 오른쪽)로 만들어 봤다가 되돌렸다. 아낀 높이는 146px,
     전체 페이지 5,900px 의 2.5% 뿐인데 그 대가로 메모가 189px 로 쪼그라들고
     종이비행기를 접어야 했다. 모바일에서 모자란 건 세로가 아니라 가로다.
     PC 도 세로 배치라 구조가 같아진다.

     대신 메모는 원래(200px)보다 키운다. 손글씨는 정보가 아니라 분위기라
     크게 보여야 값을 한다.

     높이는 auto 로 두고 아래 패딩으로 메모 자리를 만든다.
     % 패딩은 '가로 폭' 기준으로 계산되므로, 폭에 비례하는 메모와 항상 같이 움직인다.
       메모 높이 = 폭 62% ÷ (330/220) = 41.3%,  아래 여백 2% → 패딩 46% 면 위로 2.7% 남는다.
     메모를 top 이 아니라 bottom 으로 붙이는 이유: 소개문이 2줄이 되든 3줄이 되든
     메모와 카드 사이 간격이 안 변한다. */
  /* [시안 A] 비행기를 빼고 메모를 제목 오른쪽으로. 소개문이 빠져 자리가 났다. */
  .ccb-main .programs-intro {
      height: auto;
      padding: 56px 6px 24px;
      padding-right: 52%;
    }

  .ccb-main .memo {
      left: auto;
      right: 0;
      top: 58px;
      bottom: auto;
      /* 44% → 48% (대표 지시). 글 칸은 405-6-211 = 188px 이 남아
         제목 실폭 167px 이 그대로 한 줄에 들어간다(실측). */
      width: 48%;
      height: auto;
      aspect-ratio: 330 / 220;
    }

  .ccb-main .memo__copy {
      inset: 19% 7% auto 9%;
      font-size: clamp(13px, 3.8vw, 19px);
      line-height: 1.5;
      padding-left: 8px;
    }

  .ccb-main .programs-intro__airplane {
      display: none;
    }

  .ccb-main .programs-intro__underline {
      width: min(186px, 100%);
    }

  /* 355px 에서 '만나보 / 세요.' 로 낱말 중간이 끊겼다. 낱말 단위로 끊게 한다. */
  .ccb-main .programs-intro h1,
  .ccb-main .programs-intro__copy {
      word-break: keep-all;
    }

  /* 히어로 버튼 두 개를 세로 2단 → 가로 반반으로. (대표 지시 2026-07-30)
     1717 행이 flex-direction:column + width:100% 로 세워 둔 것을 되돌린다. */
  .ccb-main .hero-actions {
      flex-direction: row;
      gap: 10px;
    }

  .ccb-main .button,
  .ccb-main .button-primary,
  .ccb-main .button-secondary {
      /* flex:1 1 0 으로는 반반이 안 된다 — border-box 에서 flex-basis:0 은
         '패딩+테두리'가 바닥이라 0 이 되지 못한다. 주 버튼은 22px(패딩20+테두리2),
         보조는 2px 가 먼저 깔리고 남은 공간만 똑같이 나뉘어 200:180 으로 어긋났다(실측).
         남는 공간을 나누지 말고 폭 자체를 반으로 지정한다. 5px = 간격 10px 의 절반. */
      flex: 0 0 calc(50% - 5px);
      width: auto;
      min-width: 0;
      white-space: nowrap;
    }

  /* 폭이 절반이 되면 space-between 이 글자와 화살표를 양끝으로 밀어 사이가 비어 보인다.
     가운데로 모으고 화살표도 25px → 20px 로 줄여 균형을 맞춘다. */
  .ccb-main .button-primary {
      justify-content: center;
      gap: 8px;
      padding: 0 10px;
    }

  .ccb-main .button-primary span {
      font-size: 20px;
    }
}

@media (max-width: 1040px) {
  /* .first-time-collage 가 폭에 여분을 더해 둔다 — 620 이하는 calc(100% + 24px),
     그 위 구간은 calc(100% + 42px). 그런데 auto 마진은 폭이 넘치면 0 이 되어
     왼쪽 끝에 붙으므로, 여분이 전부 오른쪽으로만 나간다(한쪽만 잘린다).
     실측: 433px 에서 7px, 688px 에서 8px 넘침. 거기 붙은 말풍선·오른쪽 선·아래 별은
     right:-1% 라 더 나가서 14px 까지 잘렸다.
     여백 안으로 들이면 네 가지가 한 번에 들어온다. min(900px, …) 상한은 원본 그대로 둔다
     — 940px 이상에서는 어차피 900px 로 걸려 넘치지 않으므로 그 구간 모양은 안 바뀐다. */
  .ccb-main .first-time-collage {
      width: min(900px, 100%);
    }
}