@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/Pretendard-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/Pretendard-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/Pretendard-Bold.woff2") format("woff2");
}

.aiers-brandfilm-page {
  margin: 0;
  color: #121212;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  /* `clip` (not `hidden`) contains horizontal overflow WITHOUT establishing a
     scroll container, so the desktop sticky course card keeps working. */
  overflow-x: clip;
  word-break: keep-all;
}

.aiers-brandfilm-page * {
  box-sizing: border-box;
}

.aiers-brandfilm-page img {
  display: block;
  max-width: 100%;
}

.aiers-brandfilm-page button {
  font-family: inherit;
}

/* ==========================================================================
   [S01] Hero — the one section with a genuinely different mobile/desktop
   structure (docs/작업지시서_aiers-brandfilm.md §"히어로"). Structure follows
   aiers-kdrama's proven video-hero pattern (media layer + text layer, plain
   breakpoint switch) rather than aiers-mck's fixed-canvas scale() formula —
   simpler and avoids mck's own documented calc() pitfalls.
   ========================================================================== */
.aiers-brandfilm-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0b0216;
}

.aiers-brandfilm-hero__media {
  position: relative;
  order: 2;
  height: 266px;
}

.aiers-brandfilm-hero__keyvisual {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.aiers-brandfilm-hero__fade {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 266px;
  background: linear-gradient(180deg, #0b0216 0%, rgba(11, 2, 22, 0) 35%);
  pointer-events: none;
}

.aiers-brandfilm-hero__noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.aiers-brandfilm-hero__inner {
  position: relative;
  z-index: 2;
  order: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 27px 16px 21px;
}

.aiers-brandfilm-hero__badges {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(108, 77, 255, 0.8);
  border-radius: 4px;
  padding: 4px 8px;
  background: linear-gradient(to left, rgba(108, 77, 255, 0.4), rgba(0, 0, 0, 0));
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 30px 0 rgba(122, 166, 255, 0.12), inset 0 -2px 12px 0 rgba(175, 200, 255, 0.2), inset 0 2px 8px 0 rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
}

.aiers-brandfilm-hero__badges span {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.12px;
  color: #e0d2ff;
  white-space: nowrap;
}

.aiers-brandfilm-hero__eyebrow {
  max-width: 563px;
  margin: 0 0 16px;
  font-weight: 600;
  font-size: 13px;
  color: #ffffff;
}

.aiers-brandfilm-hero h1 {
  max-width: 563px;
  margin: 0 0 24px;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.6px;
  color: #ffffff;
}

.aiers-brandfilm-hero h1 strong {
  font-weight: 700;
  color: #b694ff;
}

.aiers-brandfilm-hero__description {
  max-width: 563px;
  margin: 0;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.24px;
  color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 1280px) {
  .aiers-brandfilm-hero {
    display: block;
    min-height: 600px;
  }

  .aiers-brandfilm-hero__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 44.17%;
    height: auto;
  }

  .aiers-brandfilm-hero__fade {
    top: 0;
    height: auto;
    background: linear-gradient(to right, #0b0216 47.5%, rgba(11, 2, 22, 0) 59%);
  }

  .aiers-brandfilm-hero__inner {
    padding: 100px 40px;
  }

  .aiers-brandfilm-hero__badges span {
    font-size: 20px;
  }

  .aiers-brandfilm-hero__eyebrow {
    font-size: 20px;
  }

  .aiers-brandfilm-hero h1 {
    font-size: 60px;
    white-space: nowrap;
  }

  .aiers-brandfilm-hero__description {
    font-size: 20px;
    letter-spacing: -0.4px;
  }
}

/* Detail shell */
.aiers-brandfilm-detail {
  background: #fff;
}

/* Course info + sticky card — ported from aiers-chatgpt S02 (layout only; accent swapped to #5832b8) */
.aiers-brandfilm-detail {
  background: #fff;
  color: #121212;
}

.aiers-brandfilm-detail__shell {
  width: 100%;
}

.aiers-brandfilm-course-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 40px 16px;
}

.aiers-brandfilm-course-info h2,
.aiers-brandfilm-sticky-course h2,
.aiers-brandfilm-course-info p,
.aiers-brandfilm-sticky-course p {
  margin: 0;
}

.aiers-brandfilm-course-info h2 {
  color: #121212;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 25.5px;
}

.aiers-brandfilm-course-info__list,
.aiers-brandfilm-sticky-course__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 16px;
  list-style: none;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

.aiers-brandfilm-course-info__row,
.aiers-brandfilm-sticky-course__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: #121212;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 19.5px;
  text-align: right;
  white-space: nowrap;
}

.aiers-brandfilm-course-info__row:not(:last-child)::after,
.aiers-brandfilm-sticky-course__row:not(:last-child)::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  content: "";
  background: url("./figma/course-info/divider-mobile.svg") center / 100% 1px no-repeat;
}

.aiers-brandfilm-course-info__label,
.aiers-brandfilm-sticky-course__label {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  color: #121212;
  font-size: 12px;
  font-weight: 500;
  line-height: 19.5px;
  text-align: left;
}

.aiers-brandfilm-course-info__label img,
.aiers-brandfilm-sticky-course__label img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Preserve the Figma vector frames inside the shared 20px label box.
   Calendar/place are 16.67px; the guarantee icon is 13.33 × 16.67px. */
.aiers-brandfilm-course-info__label img[src$="calendar.svg"],
.aiers-brandfilm-course-info__label img[src$="place.svg"],
.aiers-brandfilm-sticky-course__label img[src$="calendar.svg"],
.aiers-brandfilm-sticky-course__label img[src$="place.svg"] {
  padding: 1.6667px;
}

.aiers-brandfilm-course-info__label img[src$="guarantee.svg"],
.aiers-brandfilm-sticky-course__label img[src$="guarantee.svg"] {
  padding: 1.6667px 3.3333px;
}

.aiers-brandfilm-course-info__row > span:last-child,
.aiers-brandfilm-sticky-course__row > span:last-child {
  min-width: 0;
}

.aiers-brandfilm-course-info__row strong,
.aiers-brandfilm-sticky-course__row strong {
  color: #5832b8;
  font-weight: 700;
}

.aiers-brandfilm-course-info__row del,
.aiers-brandfilm-sticky-course__row del {
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: none;
}

.aiers-brandfilm-course-info__row--schedule,
.aiers-brandfilm-sticky-course__row--schedule {
  align-items: center;
}

.aiers-brandfilm-course-info__schedule,
.aiers-brandfilm-sticky-course__schedule {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 237px;
  color: #121212;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.24px;
  line-height: 14.4px;
  text-align: right;
}

.aiers-brandfilm-course-info__schedule strong,
.aiers-brandfilm-sticky-course__schedule strong {
  margin-bottom: 0;
  color: #5832b8;
  font-weight: 600;
}

.aiers-brandfilm-course-info__schedule span,
.aiers-brandfilm-sticky-course__schedule span {
  display: block;
  height: 18px;
}

.aiers-brandfilm-course-info__actions,
.aiers-brandfilm-sticky-course__actions {
  display: grid;
  gap: 11px;
}

.aiers-brandfilm-course-info__timer,
.aiers-brandfilm-sticky-course__timer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 46px;
  padding: 12px 16px;
  color: #121212;
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  white-space: nowrap;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

.aiers-brandfilm-course-info__timer > strong,
.aiers-brandfilm-sticky-course__timer > strong {
  color: #5832b8;
}

.aiers-brandfilm-course-info__timer strong,
.aiers-brandfilm-sticky-course__timer strong {
  color: #5832b8;
}

.aiers-brandfilm-course-info__cta,
.aiers-brandfilm-sticky-course__cta,
.aiers-brandfilm-sticky-course__utilities button {
  margin: 0;
  font-family: inherit;
  cursor: pointer;
}

.aiers-brandfilm-course-info__cta,
.aiers-brandfilm-sticky-course__cta {
  text-decoration: none;
}

.aiers-brandfilm-course-info__cta,
.aiers-brandfilm-sticky-course__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  padding: 10px 8px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  background: #5832b8;
  border: 0;
  border-radius: 4px;
}

.aiers-brandfilm-detail__aside {
  display: none;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-detail {
    overflow: visible;
  }

  .aiers-brandfilm-detail__shell {
    display: grid;
    grid-template-columns: 750px 400px;
    gap: 80px;
    width: min(1230px, calc(100% - 50px));
    margin: 0 auto;
  }

  .aiers-brandfilm-course-info {
    display: none;
  }

  .aiers-brandfilm-detail__aside {
    display: block;
    padding-top: 30px;
  }

  .aiers-brandfilm-sticky-course {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 400px;
  }

  .aiers-brandfilm-sticky-course__card {
    width: 400px;
    padding: 32px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 32px;
    box-shadow: 0 5px 8px rgba(0, 0, 0, .06), 0 1px 4px rgba(0, 0, 0, .04);
  }

  .aiers-brandfilm-sticky-course__content {
    display: flex;
    flex-direction: column;
    gap: 36px;
    width: 336px;
  }

  .aiers-brandfilm-sticky-course h2 {
    color: #121212;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.48px;
    line-height: 32px;
  }

  .aiers-brandfilm-sticky-course__list {
    gap: 24px;
    padding: 0 4px;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .aiers-brandfilm-sticky-course__row {
    font-size: 14px;
  }

  .aiers-brandfilm-sticky-course__row:not(:last-child)::after {
    bottom: -12px;
    background-image: url("./figma/course-info/divider-desktop.svg");
  }

  .aiers-brandfilm-sticky-course__label {
    font-size: 14px;
  }

  .aiers-brandfilm-sticky-course__schedule {
    font-size: 14px;
    letter-spacing: -.28px;
    line-height: 16.8px;
  }

  .aiers-brandfilm-sticky-course__actions {
    gap: 10px;
  }

  .aiers-brandfilm-sticky-course__timer {
    min-height: 51px;
    padding: 15px 16px;
    border-radius: 12px;
  }

  .aiers-brandfilm-sticky-course__cta {
    min-height: 51px;
    border-radius: 12px;
  }

  .aiers-brandfilm-sticky-course__utilities {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .aiers-brandfilm-sticky-course__utilities button {
    position: relative;
    display: grid;
    grid-template-rows: 24px 16px;
    justify-items: center;
    width: 40px;
    height: 44px;
    padding: 0;
    color: #0c0c0c;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -.12px;
    line-height: 16px;
    background: transparent;
    border: 0;
  }

  .aiers-brandfilm-sticky-course__utilities button:first-child {
    width: 42.92px;
  }

  .aiers-brandfilm-sticky-course__utilities img {
    width: 24px;
    height: 24px;
  }
}

/* Price — ported from aiers-chatgpt S04 */
.aiers-brandfilm-price {
  padding: 40px 16px;
  color: #121212;
  background: #fff;
}

.aiers-brandfilm-price__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 343px;
  margin: 0 auto;
}

.aiers-brandfilm-price__chart-area {
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 368px;
}

.aiers-brandfilm-price__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.aiers-brandfilm-price__heading h2,
.aiers-brandfilm-price__heading p,
.aiers-brandfilm-price__offer h3,
.aiers-brandfilm-price__offer p {
  margin: 0;
}

.aiers-brandfilm-price__heading h2 {
  color: #121212;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.aiers-brandfilm-price__heading h2 strong {
  color: #5832b8;
}

.aiers-brandfilm-price__heading p {
  color: #5e5d59;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.aiers-brandfilm-price__chart {
  position: relative;
  width: 343px;
  height: 201px;
}

.aiers-brandfilm-price__trend {
  position: absolute;
  top: 39.17px;
  left: 36.05px;
  z-index: 1;
  width: 275.118px;
  height: 8.66px;
  max-width: none;
  transform: rotate(-18.43deg);
  transform-origin: center;
}

img.aiers-brandfilm-price__trend--desktop,
img.aiers-brandfilm-price__stem--desktop,
img.aiers-brandfilm-price__dot--desktop,
img.aiers-brandfilm-price__baseline--desktop {
  display: none;
}

.aiers-brandfilm-price__discount {
  position: absolute;
  top: 6px;
  left: 0;
  z-index: 2;
  width: 88px;
  height: 100px;
}

.aiers-brandfilm-price__discount strong {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 36px;
  padding: 6px 13px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.32px;
  line-height: 1.5;
  white-space: nowrap;
  background: #5832b8;
  border-radius: 66.256px;
}

.aiers-brandfilm-price__stem {
  position: absolute;
  top: 18px;
  left: 44px;
  z-index: -1;
  width: 3px;
  height: 62px;
  max-width: none;
}

.aiers-brandfilm-price__dot {
  position: absolute;
  top: 68.75px;
  left: 37.76px;
  width: 13.251px;
  height: 13.251px;
  max-width: none;
}

/* The mobile trend is rotated; align the dot centre to the transformed line. */
.aiers-brandfilm-price__dot--mobile {
  top: 73.9px;
}

.aiers-brandfilm-price__bars {
  position: absolute;
  top: 32px;
  left: 0;
  width: 343px;
  height: 169px;
}

.aiers-brandfilm-price__bar {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.394px;
  width: 85.75px;
  color: #5e5d59;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.24px;
  line-height: 1.5;
  text-align: center;
}

.aiers-brandfilm-price__bar i {
  display: block;
  flex: none;
  width: 45.132px;
  background: #e6e6e6;
  border-radius: 4px 4px 0 0;
}

.aiers-brandfilm-price__bar span,
.aiers-brandfilm-price__bar strong {
  display: block;
  min-height: 36px;
  font-weight: inherit;
}

.aiers-brandfilm-price__bar strong {
  min-height: auto;
}

.aiers-brandfilm-price__bar--early { top: 75px; left: 0; color: #121212; font-weight: 700; }
.aiers-brandfilm-price__bar--early i { height: 33.473px; background: #5832b8; }
.aiers-brandfilm-price__bar--early strong { color: #5832b8; font-weight: 700; }
.aiers-brandfilm-price__bar--first { top: 57px; left: 85.75px; }
.aiers-brandfilm-price__bar--first i { height: 51.149px; }
.aiers-brandfilm-price__bar--end { top: 27px; left: 171.5px; }
.aiers-brandfilm-price__bar--end i { height: 81.989px; }
.aiers-brandfilm-price__bar--second { top: 0; left: 257px; }
.aiers-brandfilm-price__bar--second i { height: 109.068px; }

.aiers-brandfilm-price__baseline {
  position: absolute;
  top: 109px;
  left: 0;
  z-index: -1;
  width: 343px;
  height: 1px;
  max-width: none;
}

.aiers-brandfilm-price__offer {
  width: 343px;
  padding: 16px;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

.aiers-brandfilm-price__offer-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aiers-brandfilm-price__offer-head {
  position: relative;
  min-height: 128px;
}

.aiers-brandfilm-price__offer h3 {
  color: #000;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.4px;
  line-height: 1.5;
  white-space: nowrap;
}

.aiers-brandfilm-price__offer-head > div:first-child > p {
  color: rgba(0, 0, 0, .7);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.aiers-brandfilm-price__offer-price {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #000;
}

.aiers-brandfilm-price__offer-price del {
  color: rgba(0, 0, 0, .6);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: none;
}

.aiers-brandfilm-price__offer-price strong {
  color: #000;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}

.aiers-brandfilm-price__offer button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 47px;
  padding: 16px 12px;
  color: #fff;
  font: 700 18px/1.5 "Pretendard", sans-serif;
  background: #5832b8;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-price {
    padding: 80px 32px;
  }

  .aiers-brandfilm-price__inner {
    gap: 48px;
    width: 686px;
  }

  .aiers-brandfilm-price__chart-area {
    gap: 64px;
    height: 736px;
  }

  .aiers-brandfilm-price__heading {
    gap: 24px;
  }

  .aiers-brandfilm-price__heading h2 {
    font-size: 48px;
  }

  .aiers-brandfilm-price__heading p {
    font-size: 28px;
  }

  .aiers-brandfilm-price__chart {
    width: 686px;
    height: 402px;
  }

  img.aiers-brandfilm-price__trend--mobile,
  img.aiers-brandfilm-price__stem--mobile,
  img.aiers-brandfilm-price__dot--mobile,
  img.aiers-brandfilm-price__baseline--mobile {
    display: none;
  }

  img.aiers-brandfilm-price__trend--desktop,
  img.aiers-brandfilm-price__stem--desktop,
  img.aiers-brandfilm-price__dot--desktop,
  img.aiers-brandfilm-price__baseline--desktop {
    display: block;
  }

  /* Measured against the rotated line: 78.34/72.1 (carried over from
     aiers-chatgpt) left its start 11px below the dot's centre. Mobile already
     gets the matching nudge via .aiers-brandfilm-price__dot--mobile. */
  .aiers-brandfilm-price__trend {
    top: 67.12px;
    left: 74.66px;
    width: 550.236px;
    height: 17.32px;
  }

  .aiers-brandfilm-price__discount {
    top: 12px;
    width: 176px;
    height: 200px;
  }

  .aiers-brandfilm-price__discount strong {
    width: 176px;
    height: 72px;
    padding: 12px 26px;
    font-size: 32px;
    letter-spacing: -.64px;
    border-radius: 132.512px;
  }

  .aiers-brandfilm-price__stem {
    top: 36px;
    left: 88px;
    width: 6px;
    height: 124px;
  }

  .aiers-brandfilm-price__dot {
    top: 137.5px;
    left: 75.53px;
    width: 26.502px;
    height: 26.502px;
  }

  .aiers-brandfilm-price__bars {
    top: 64px;
    width: 686px;
    height: 338px;
  }

  .aiers-brandfilm-price__bar {
    gap: 12.787px;
    width: 171.5px;
    font-size: 24px;
    letter-spacing: -.48px;
  }

  .aiers-brandfilm-price__bar i {
    width: 90.263px;
    border-radius: 8px 8px 0 0;
  }

  .aiers-brandfilm-price__bar span {
    min-height: 72px;
  }

  .aiers-brandfilm-price__bar--early { top: 150px; left: 0; }
  .aiers-brandfilm-price__bar--early i { height: 66.945px; }
  .aiers-brandfilm-price__bar--first { top: 114px; left: 171.5px; }
  .aiers-brandfilm-price__bar--first i { height: 102.298px; }
  .aiers-brandfilm-price__bar--end { top: 54px; left: 343px; }
  .aiers-brandfilm-price__bar--end i { height: 163.978px; }
  .aiers-brandfilm-price__bar--second { top: 0; left: 514px; }
  .aiers-brandfilm-price__bar--second i { height: 218.136px; }

  .aiers-brandfilm-price__baseline {
    top: 218px;
    width: 686px;
    height: 2px;
  }

  .aiers-brandfilm-price__offer {
    width: 686px;
    padding: 32px;
    border-width: 2px;
    border-radius: 8px;
  }

  .aiers-brandfilm-price__offer-inner {
    gap: 20px;
  }

  .aiers-brandfilm-price__offer-head {
    min-height: 256px;
  }

  .aiers-brandfilm-price__offer h3 {
    font-size: 40px;
    letter-spacing: -.8px;
  }

  .aiers-brandfilm-price__offer-head > div:first-child > p {
    font-size: 28px;
  }

  .aiers-brandfilm-price__offer-price del {
    font-size: 26px;
  }

  .aiers-brandfilm-price__offer-price strong {
    font-size: 48px;
  }

  .aiers-brandfilm-price__offer button {
    height: 94px;
    padding: 32px 24px;
    font-size: 36px;
    border-radius: 8px;
  }
}

/* Detail tabs */
.aiers-brandfilm-detail-tabs {
  position: -webkit-sticky;
  position: sticky;
  top: 56px;
  z-index: 120;
  display: flex;
  align-items: center;
  width: 100%;
  height: 42px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(18, 18, 18, .08);
}

.aiers-brandfilm-detail-tabs__item {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 42px;
  padding: 10px 20px;
  color: #5e5d59;
  font: 700 14px/20.8px "Pretendard", sans-serif;
  letter-spacing: -.234px;
  white-space: nowrap;
  background: #fff;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.aiers-brandfilm-detail-tabs__item.is-active {
  color: #5832b8;
  border-bottom-color: #5832b8;
}

@media (max-width: 1279px) {
  .aiers-brandfilm-detail-tabs {
    position: -webkit-sticky;
    position: sticky;
    top: 56px;
    z-index: 120;
  }
}

@media (min-width: 1280px) {
  /* Desktop puts the tab bar at the very top of the main column, above S03.
     Mobile keeps it in DOM order, right after the refund band. */
  .aiers-brandfilm-detail__main {
    display: flex;
    flex-direction: column;
  }

  /* LikeLion's desktop GNB is 64px tall; 72px left a strip of page showing
     between the header and the stuck tab bar. */
  .aiers-brandfilm-detail-tabs {
    order: -1;
    top: 64px;
  }

  .aiers-brandfilm-detail-tabs,
  .aiers-brandfilm-detail-tabs__item {
    height: 48px;
  }

  .aiers-brandfilm-detail-tabs__item {
    font-size: 16px;
  }
}

.aiers-brandfilm-detail-tabs + section,
.aiers-brandfilm-detail-tabs ~ section[id] {
  scroll-margin-top: 112px;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-detail-tabs + section,
  .aiers-brandfilm-detail-tabs ~ section[id] {
    scroll-margin-top: 136px;
  }
}

.aiers-brandfilm-detail__main {
  min-width: 0;
}

.aiers-brandfilm-price__offer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 47px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  background: #5832b8;
  border-radius: 4px;
}

.aiers-brandfilm-sticky-course__utilities svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #0c0c0c;
  stroke-width: 1.6;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-price__offer-cta {
    height: 94px;
    font-size: 36px;
    border-radius: 8px;
  }
}

/* Fixed bottom CTA — aiers-chatgpt "v2": white body with a strip on mobile,
   floating blurred pill on desktop. */
.aiers-brandfilm-fixed-cta{position:fixed;left:0;right:0;bottom:0;z-index:900;box-sizing:border-box}
.aiers-brandfilm-fixed-cta *{box-sizing:border-box}
.aiers-brandfilm-fixed-cta--desktop{display:none}
.aiers-brandfilm-fixed-cta--mobile{display:block;padding:0;background:#fff;box-shadow:0 -4px 16px rgba(0,0,0,.12)}
.aiers-brandfilm-fixed-cta--mobile .aiers-brandfilm-fixed-cta__strip{display:flex;align-items:center;justify-content:center;gap:12px;height:36px;padding:0 16px;background:#5832b8;color:#fff;font-size:14px;font-weight:700;line-height:1.5;white-space:nowrap}
.aiers-brandfilm-fixed-cta--mobile .aiers-brandfilm-fixed-cta__strip strong{font-weight:700;font-variant-numeric:tabular-nums}
.aiers-brandfilm-fixed-cta--mobile .aiers-brandfilm-fixed-cta__body{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 16px calc(14px + env(safe-area-inset-bottom,0px))}
.aiers-brandfilm-fixed-cta--mobile .aiers-brandfilm-fixed-cta__seats{margin:0;color:#5e5d59;font-size:13px;font-weight:600;line-height:1.4}
.aiers-brandfilm-fixed-cta--mobile .aiers-brandfilm-fixed-cta__seats strong{color:#5832b8;font-weight:700}
.aiers-brandfilm-fixed-cta--mobile .aiers-brandfilm-fixed-cta__button{display:flex;align-items:center;justify-content:center;width:100%;height:48px;border-radius:8px;background:#5832b8;color:#fff;font-size:18px;font-weight:700;text-decoration:none}
/* site-mode b2b 하단 바: 응답 약속 한 줄 + 공유 버튼 + 문의 버튼. */
.aiers-brandfilm-fixed-cta--mobile .aiers-brandfilm-fixed-cta__body--quote{padding-top:10px}
.aiers-brandfilm-fixed-cta__note{margin:0;color:#5e5d59;font-size:13px;font-weight:500;line-height:1.4}
.aiers-brandfilm-fixed-cta__note b{color:#5832b8}
.aiers-brandfilm-fixed-cta__row{display:flex;gap:8px;width:100%}
.aiers-brandfilm-fixed-cta__row .aiers-brandfilm-fixed-cta__button{flex:1}
.aiers-brandfilm-fixed-cta__share{position:static;display:grid;flex:none;place-items:center;width:48px;height:48px;padding:0;border:1px solid #e6e6e6;border-radius:8px;background:#fff;color:#1d1d1f;cursor:pointer}
.aiers-brandfilm-fixed-cta__share[data-share-done]::after{content:"링크가 복사됐어요";position:absolute;bottom:calc(100% + 16px);left:50%;padding:12px 20px;border-radius:999px;background:rgba(29,29,31,.92);box-shadow:0 8px 24px rgba(0,0,0,.18);color:#fff;font-size:14px;font-weight:600;white-space:nowrap;transform:translateX(-50%);animation:aiers-share-toast 1.6s ease both}
@keyframes aiers-share-toast{0%{opacity:0;transform:translate(-50%,8px)}12%,82%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0)}}
@media(min-width:1280px){
.aiers-brandfilm-fixed-cta--mobile{display:none}
.aiers-brandfilm-fixed-cta--desktop{display:flex;align-items:center;justify-content:space-between;left:50%;right:auto;bottom:16px;width:min(712px,calc(100% - 32px));padding:16px 24px;transform:translateX(-50%);border-radius:16px;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.aiers-brandfilm-fixed-cta--desktop .aiers-brandfilm-fixed-cta__copy{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.aiers-brandfilm-fixed-cta--desktop .aiers-brandfilm-fixed-cta__copy p{margin:0;color:#fff;font-size:18px;font-weight:500;line-height:1.3;white-space:nowrap}
.aiers-brandfilm-fixed-cta--desktop .aiers-brandfilm-fixed-cta__copy span,
.aiers-brandfilm-fixed-cta--desktop .aiers-brandfilm-fixed-cta__copy strong{color:#b69aff;font-weight:700;font-variant-numeric:tabular-nums}
.aiers-brandfilm-fixed-cta--desktop .aiers-brandfilm-fixed-cta__actions{display:flex;align-items:center;gap:16px}
.aiers-brandfilm-fixed-cta--desktop .aiers-brandfilm-fixed-cta__heart{display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:7px;background:rgba(255,255,255,.2);cursor:pointer}
.aiers-brandfilm-fixed-cta--desktop .aiers-brandfilm-fixed-cta__heart svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2}
.aiers-brandfilm-fixed-cta--desktop .aiers-brandfilm-fixed-cta__button{display:flex;align-items:center;justify-content:center;width:260px;height:56px;border-radius:8px;background:#5832b8;color:#fff;font-size:18px;font-weight:700;text-decoration:none}
/* site-mode b2b: 문구 없이 버튼만 남으면 바를 버튼 크기로 줄여 가운데 둔다. */
.aiers-brandfilm-fixed-cta--desktop:not(:has(.aiers-brandfilm-fixed-cta__copy)){width:auto;padding:12px}
}

/* ==========================================================================
   환불 보장 (refund)
   ========================================================================== */
.aiers-brandfilm-refund {
  position: relative;
  overflow: hidden;
  padding: 44px 24px;
  text-align: center;
  background: linear-gradient(180deg, #7738ff 0%, #4307c5 100%);
  color: #ffffff;
}

.aiers-brandfilm-refund__badge {
  position: absolute;
  width: 80px;
  height: 80px;
  opacity: 0.5;
  pointer-events: none;
}

.aiers-brandfilm-refund__badge--1 {
  top: -32px;
  right: 24px;
  transform: rotate(30deg);
}

.aiers-brandfilm-refund__badge--2 {
  bottom: -24px;
  left: -32px;
  width: 112px;
  height: 112px;
  transform: rotate(-15deg);
}

.aiers-brandfilm-refund__eyebrow {
  position: relative;
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.aiers-brandfilm-refund__heading {
  position: relative;
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.5px;
}

.aiers-brandfilm-refund__note {
  position: relative;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-refund {
    padding: 88px 48px;
  }

  .aiers-brandfilm-refund__badge {
    width: 160px;
    height: 160px;
  }

  .aiers-brandfilm-refund__badge--2 {
    width: 224px;
    height: 224px;
  }

  .aiers-brandfilm-refund__eyebrow {
    font-size: 32px;
    margin-bottom: 24px;
  }

  .aiers-brandfilm-refund__heading {
    font-size: 52px;
    margin-bottom: 24px;
  }

  .aiers-brandfilm-refund__note {
    font-size: 32px;
  }
}

/* ==========================================================================
   SEC 02 · 수상 쇼케이스
   ========================================================================== */
.aiers-brandfilm-showcase {
  position: relative;
  overflow: hidden;
  padding: 60px 24px;
  background: linear-gradient(180deg, #0d0e17 76%, #1a0b30 105%);
  color: #ffffff;
  text-align: center;
}

.aiers-brandfilm-showcase__texture {
  position: absolute;
  left: 50%;
  top: -80px;
  width: 640px;
  max-width: none;
  transform: translateX(-50%);
  mix-blend-mode: screen;
  opacity: 0.1;
  pointer-events: none;
}

.aiers-brandfilm-showcase__inner {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
}

.aiers-brandfilm-showcase__heading {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.72px;
}

.aiers-brandfilm-showcase__heading strong {
  display: block;
  color: #b69aff;
  font-weight: 700;
}

.aiers-brandfilm-showcase__sub {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.aiers-brandfilm-showcase__media {
  height: 192px;
  border-radius: 8px;
  background: #1c1830;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  overflow: hidden;
}

.aiers-brandfilm-showcase__media img,
.aiers-brandfilm-showcase__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aiers-brandfilm-showcase__stats {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-bottom: 40px;
}

.aiers-brandfilm-showcase__stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.aiers-brandfilm-showcase__stat img {
  width: 27px;
  height: 64px;
}

.aiers-brandfilm-showcase__stat-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1px;
  background: linear-gradient(90deg, #5277ff, #9152ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.aiers-brandfilm-showcase__stat-label {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.aiers-brandfilm-showcase__divider {
  width: 58px;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 auto 24px;
}

.aiers-brandfilm-showcase__quote {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
}

.aiers-brandfilm-showcase__quote strong {
  color: #b69aff;
}

.aiers-brandfilm-showcase__quote-sub {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 1280px) {
  .aiers-brandfilm-showcase {
    padding: 120px 48px;
  }

  .aiers-brandfilm-showcase__inner {
    max-width: 654px;
  }

  .aiers-brandfilm-showcase__heading {
    font-size: 48px;
  }

  .aiers-brandfilm-showcase__sub {
    margin-bottom: 48px;
    font-size: 28px;
  }

  .aiers-brandfilm-showcase__media {
    height: 384px;
    border-radius: 16px;
    margin-bottom: 80px;
  }

  .aiers-brandfilm-showcase__stats {
    gap: 80px;
    margin-bottom: 80px;
  }

  .aiers-brandfilm-showcase__stat {
    gap: 48px;
  }

  .aiers-brandfilm-showcase__stat img {
    width: 54px;
    height: 128px;
  }

  .aiers-brandfilm-showcase__stat-title {
    font-size: 44px;
  }

  .aiers-brandfilm-showcase__stat-label {
    font-size: 28px;
  }

  .aiers-brandfilm-showcase__quote {
    font-size: 40px;
  }

  .aiers-brandfilm-showcase__quote-sub {
    font-size: 28px;
  }
}

/* ==========================================================================
   SEC 03 · 완성작 상영관
   ========================================================================== */
.aiers-brandfilm-screening {
  position: relative;
  overflow: hidden;
  padding: 88px 24px 60px;
  background: #313131;
  color: #ffffff;
  text-align: center;
}

.aiers-brandfilm-screening__grain {
  position: absolute;
  left: 50%;
  top: -6%;
  width: 260%;
  max-width: none;
  transform: translateX(-50%);
  opacity: 0.5;
  pointer-events: none;
}

.aiers-brandfilm-screening__frame {
  position: absolute;
  left: 50%;
  top: 0;
  width: 300%;
  max-width: none;
  transform: translateX(-50%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* `.aiers-brandfilm-page img { max-width: 100% }` outranks the single-class
   rules above, which capped both layers at the column width: the grain stopped
   short of the section's bottom and the film frame shrank to a block. */
.aiers-brandfilm-page .aiers-brandfilm-screening__grain,
.aiers-brandfilm-page .aiers-brandfilm-screening__frame {
  max-width: none;
}

.aiers-brandfilm-screening__inner {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
}

.aiers-brandfilm-screening__heading {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.72px;
}

.aiers-brandfilm-screening__sub {
  margin: 0 0 32px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.aiers-brandfilm-screening__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 60px;
}

.aiers-brandfilm-screening__media {
  height: 192px;
  border-radius: 8px;
  background: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  overflow: hidden;
}

.aiers-brandfilm-screening__media img,
.aiers-brandfilm-screening__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aiers-brandfilm-screening__quote {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 0 60px rgba(81, 0, 255, 0.6);
}

.aiers-brandfilm-screening__heading strong,
.aiers-brandfilm-screening__quote strong {
  color: #b69aff;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-screening {
    padding: 168px 48px 120px;
  }

  .aiers-brandfilm-screening__inner {
    max-width: 654px;
  }

  .aiers-brandfilm-screening__heading {
    font-size: 48px;
    letter-spacing: -1.44px;
  }

  .aiers-brandfilm-screening__sub {
    margin-bottom: 64px;
    font-size: 28px;
  }

  .aiers-brandfilm-screening__list {
    gap: 40px;
    margin-bottom: 120px;
  }

  .aiers-brandfilm-screening__media {
    height: 384px;
    border-radius: 16px;
  }

  .aiers-brandfilm-screening__quote {
    font-size: 44px;
  }
}

/* ==========================================================================
   SEC 04 · 고민 3인 카피
   ========================================================================== */
.aiers-brandfilm-pains {
  padding: 60px 24px;
  background: #f6f4fa;
  text-align: center;
}

.aiers-brandfilm-pains__heading {
  margin: 0 0 28px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.72px;
}

.aiers-brandfilm-pains__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  max-width: 420px;
  margin: 0 auto;
}

.aiers-brandfilm-pains__card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.06);
  padding: 20px;
}

.aiers-brandfilm-pains__person {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ececec;
}

.aiers-brandfilm-pains__avatar {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.aiers-brandfilm-pains__role {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #8b5fe8;
}

.aiers-brandfilm-pains__name {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
}

.aiers-brandfilm-pains__quote {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.aiers-brandfilm-pains__body {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #444444;
  line-height: 1.5;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-pains {
    padding: 160px 48px 120px;
  }

  .aiers-brandfilm-pains__heading {
    margin-bottom: 62px;
    font-size: 48px;
    letter-spacing: -1.44px;
  }

  .aiers-brandfilm-pains__list {
    gap: 24px;
    max-width: 622px;
  }

  .aiers-brandfilm-pains__card {
    border-radius: 24px;
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06);
    padding: 40px;
  }

  .aiers-brandfilm-pains__person {
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 32px;
  }

  .aiers-brandfilm-pains__avatar {
    width: 120px;
    height: 120px;
    border-radius: 8px;
  }

  .aiers-brandfilm-pains__role {
    font-size: 26px;
  }

  .aiers-brandfilm-pains__name {
    font-size: 32px;
  }

  .aiers-brandfilm-pains__quote {
    margin-bottom: 12px;
    font-size: 32px;
  }

  .aiers-brandfilm-pains__body {
    font-size: 28px;
  }
}

/* ==========================================================================
   브릿지 A — decorative transition strip (data-funnel="none")
   ========================================================================== */
.aiers-brandfilm-bridge {
  position: relative;
  overflow: hidden;
  min-height: 264px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: #270071;
  color: #ffffff;
  text-align: center;
}

.aiers-brandfilm-bridge__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 100%, rgba(145, 82, 255, 0.55), transparent 70%);
  pointer-events: none;
}

.aiers-brandfilm-bridge__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  mix-blend-mode: hue;
  pointer-events: none;
}

.aiers-brandfilm-bridge__copy {
  position: relative;
  max-width: 340px;
}

.aiers-brandfilm-bridge__eyebrow {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.aiers-brandfilm-bridge__heading {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.33;
  letter-spacing: -0.56px;
  color: #b69aff;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-bridge {
    min-height: 460px;
    padding: 60px;
  }

  .aiers-brandfilm-bridge__copy {
    max-width: 560px;
  }

  .aiers-brandfilm-bridge__eyebrow {
    font-size: 32px;
  }

  .aiers-brandfilm-bridge__heading {
    font-size: 52px;
  }
}

/* ==========================================================================
   SEC 05 · 재프레이밍 (3 use-case media cards)
   ========================================================================== */
.aiers-brandfilm-reframe {
  padding: 60px 24px;
  background: #121216;
  color: #ffffff;
  text-align: center;
}

.aiers-brandfilm-reframe__heading {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.72px;
}

.aiers-brandfilm-reframe__heading strong {
  color: #b69aff;
  font-weight: 700;
}

.aiers-brandfilm-reframe__sub {
  max-width: 420px;
  margin: 0 auto 40px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.aiers-brandfilm-reframe__list {
  display: flex;
  flex-direction: column;
  gap: 60px;
  max-width: 420px;
  margin: 0 auto 24px;
  text-align: left;
}

.aiers-brandfilm-reframe__media {
  height: 192px;
  border-radius: 8px;
  background: #1e1e24;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.aiers-brandfilm-reframe__media img,
.aiers-brandfilm-reframe__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aiers-brandfilm-reframe__num {
  display: block;
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: #b69aff;
  letter-spacing: -0.48px;
}

.aiers-brandfilm-reframe__label {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.54px;
}

.aiers-brandfilm-reframe__footnote {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 1280px) {
  .aiers-brandfilm-reframe {
    padding: 120px 48px;
  }

  .aiers-brandfilm-reframe__heading {
    font-size: 48px;
    letter-spacing: -1.44px;
  }

  .aiers-brandfilm-reframe__sub {
    max-width: 654px;
    margin-bottom: 64px;
    font-size: 28px;
  }

  .aiers-brandfilm-reframe__list {
    gap: 120px;
    max-width: 654px;
    margin-bottom: 64px;
  }

  .aiers-brandfilm-reframe__media {
    height: 384px;
    border-radius: 16px;
    margin-bottom: 32px;
  }

  .aiers-brandfilm-reframe__num {
    font-size: 32px;
  }

  .aiers-brandfilm-reframe__label {
    font-size: 36px;
  }

  .aiers-brandfilm-reframe__footnote {
    font-size: 26px;
  }
}

/* ==========================================================================
   SEC 06 · 반론 선제 처리
   ========================================================================== */
.aiers-brandfilm-rebuttal {
  position: relative;
  overflow: hidden;
  padding: 60px 24px;
  background: #f6f4fa;
  text-align: center;
}

.aiers-brandfilm-rebuttal__heading {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.72px;
}

.aiers-brandfilm-rebuttal__sub {
  max-width: 420px;
  margin: 0 auto 40px;
  font-size: 14px;
  color: rgba(18, 18, 18, 0.8);
}

/* Exact Figma coordinates (mobile 54:40302, desktop 77:54419) — the two
   cards overlap with an absolute layout, not a flex row, and card 2's
   compound rotate+scaleY is Figma's literal transform (a ~-176deg spin
   combined with a vertical flip nets a mirrored counter-tilt, not upside
   down — replicated as-is rather than approximated). --s scales the whole
   collage 1x mobile / 2x desktop, matching every other section's ratio. */
.aiers-brandfilm-rebuttal__collage {
  /* Figma's own 375px mobile canvas already lets card--1 bleed to x=425px
     (past its own 375px edge) — fine on an isolated canvas, not fine as a
     real page (causes horizontal scroll / mid-word clipping). 0.8 keeps
     the same 2x mobile→desktop ratio as everywhere else, just both tiers
     scaled down enough to stay inside the viewport. */
  --s: 0.8;
  position: relative;
  height: calc(384px * var(--s));
  margin: 0 0 32px;
}

.aiers-brandfilm-rebuttal__card {
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff;
  padding: calc(13px * var(--s)) calc(18px * var(--s)) calc(19px * var(--s));
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.08);
}

.aiers-brandfilm-rebuttal__card--1 {
  left: calc(147.35px * var(--s));
  width: calc(278.04px * var(--s));
  transform: rotate(-6.04deg);
}

.aiers-brandfilm-rebuttal__card--2 {
  left: calc(-52px * var(--s));
  top: calc(62px * var(--s));
  width: calc(269.64px * var(--s));
  transform: rotate(-175.68deg) scaleY(-1);
}

.aiers-brandfilm-rebuttal__card img {
  width: 100%;
  aspect-ratio: 211 / 220;
  object-fit: cover;
  margin-bottom: calc(6px * var(--s));
}

.aiers-brandfilm-rebuttal__card figcaption {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

/* Card 2's outer rotate(-175.68deg)+scaleY(-1) also mirrors its caption —
   Figma counter-rotates just the caption (rotate(179.85deg) scaleY(-1)) so
   only the photo ends up flipped, not the text. Net rotation cancels to
   ~4.17deg, matching card 1's -6.04deg tilt. */
.aiers-brandfilm-rebuttal__card--2 figcaption {
  transform: rotate(179.85deg) scaleY(-1);
}

.aiers-brandfilm-rebuttal__note {
  max-width: 420px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 16px;
  padding: 28px 20px;
  text-align: left;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.05);
}

.aiers-brandfilm-rebuttal__note p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.3px;
}

.aiers-brandfilm-rebuttal__note mark {
  /* Figma draws this as a short bar sitting under the lower half of each
     line (a highlighter-pen mark), not a full-height box — a bottom-
     weighted gradient reproduces that per line without needing to
     position separate bars behind exact line breaks. */
  background: linear-gradient(to bottom, transparent 55%, #dbcdff 55%);
  color: inherit;
  padding: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.aiers-brandfilm-rebuttal__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.aiers-brandfilm-rebuttal__tags span {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid #5832b8;
  border-radius: 999px;
  color: #5832b8;
  font-size: 12px;
  font-weight: 600;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-rebuttal {
    padding: 120px 48px;
  }

  .aiers-brandfilm-rebuttal__heading {
    font-size: 48px;
    letter-spacing: -1.44px;
  }

  .aiers-brandfilm-rebuttal__sub {
    max-width: 654px;
    margin-bottom: 64px;
    font-size: 28px;
  }

  .aiers-brandfilm-rebuttal__collage {
    --s: 1.6;
    margin-bottom: 64px;
  }

  .aiers-brandfilm-rebuttal__card figcaption {
    font-size: 30px;
  }

  .aiers-brandfilm-rebuttal__note {
    max-width: 622px;
    padding: 56px 40px;
  }

  .aiers-brandfilm-rebuttal__note p {
    margin-bottom: 40px;
    font-size: 30px;
  }

  .aiers-brandfilm-rebuttal__tags {
    gap: 12px;
  }

  .aiers-brandfilm-rebuttal__tags span {
    padding: 6px 16px;
    font-size: 24px;
  }
}

/* ==========================================================================
   SEC 07 · 강사 소개
   ========================================================================== */
.aiers-brandfilm-instructor {
  padding: 60px 24px;
  background: #121216;
  color: #ffffff;
  text-align: center;
}

.aiers-brandfilm-instructor__heading {
  margin: 0 0 32px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.72px;
}

.aiers-brandfilm-instructor__heading strong {
  color: #b69aff;
  font-weight: 700;
}

.aiers-brandfilm-instructor__card {
  max-width: 420px;
  margin: 0 auto;
  background: #2a2a2a;
  border-radius: 8px;
  padding: 16px;
  text-align: left;
}

.aiers-brandfilm-instructor__top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.aiers-brandfilm-instructor__avatar {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.aiers-brandfilm-instructor__role {
  margin: 0;
  font-size: 12px;
  color: #b69aff;
  line-height: 1.4;
}

.aiers-brandfilm-instructor__name {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
}

.aiers-brandfilm-instructor__quote {
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.32px;
}

.aiers-brandfilm-instructor__quote strong {
  font-weight: 700;
}

.aiers-brandfilm-instructor__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aiers-brandfilm-instructor__facts li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  color: #d4d4d4;
  line-height: 1.5;
  /* Figma tracking -0.42px keeps the 세종도서 line on one row. */
  letter-spacing: -0.42px;
}

.aiers-brandfilm-instructor__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d4d4d4;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-instructor {
    padding: 120px 48px;
  }

  .aiers-brandfilm-instructor__heading {
    margin-bottom: 64px;
    font-size: 48px;
    letter-spacing: -1.44px;
  }

  .aiers-brandfilm-instructor__card {
    max-width: 654px;
    border-radius: 16px;
    padding: 32px;
  }

  .aiers-brandfilm-instructor__top {
    gap: 32px;
    margin-bottom: 32px;
  }

  .aiers-brandfilm-instructor__avatar {
    width: 160px;
    height: 160px;
    border-radius: 8px;
  }

  .aiers-brandfilm-instructor__role {
    font-size: 24px;
  }

  .aiers-brandfilm-instructor__name {
    font-size: 32px;
  }

  .aiers-brandfilm-instructor__quote {
    margin-bottom: 32px;
    padding-bottom: 32px;
    font-size: 32px;
  }

  .aiers-brandfilm-instructor__facts {
    gap: 12px;
  }

  .aiers-brandfilm-instructor__facts li {
    padding-left: 28px;
    font-size: 28px;
  }

  .aiers-brandfilm-instructor__facts li::before {
    top: 18px;
    width: 6px;
    height: 6px;
  }
}

/* ==========================================================================
   SEC 08 · 연출 라이브러리 (6 direction cards)
   ========================================================================== */
.aiers-brandfilm-library {
  position: relative;
  padding: 20px 24px 80px;
  background: #121216;
  color: #ffffff;
  text-align: center;
}

.aiers-brandfilm-library__heading {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.72px;
}

.aiers-brandfilm-library__heading strong {
  color: #b69aff;
  font-weight: 700;
}

.aiers-brandfilm-library__sub {
  max-width: 420px;
  margin: 0 auto 60px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.aiers-brandfilm-library__sub strong {
  color: #ffffff;
  font-weight: 700;
}

.aiers-brandfilm-library__glow {
  position: absolute;
  left: 50%;
  bottom: 60px;
  width: 260px;
  transform: translateX(-50%);
  opacity: 0.6;
  pointer-events: none;
}

.aiers-brandfilm-library__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  max-width: 420px;
  margin: 0 auto 60px;
  text-align: left;
}

.aiers-brandfilm-library__media {
  height: 192px;
  border-radius: 8px;
  background: #1e1e24;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.aiers-brandfilm-library__media img,
.aiers-brandfilm-library__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aiers-brandfilm-library__num {
  display: block;
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: #b69aff;
}

.aiers-brandfilm-library__label {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.aiers-brandfilm-library__closing {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.66px;
}

.aiers-brandfilm-library__closing strong {
  color: #edc421;
  font-weight: 700;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-library {
    padding: 40px 48px 160px;
  }

  .aiers-brandfilm-library__heading {
    font-size: 48px;
  }

  .aiers-brandfilm-library__sub {
    max-width: 654px;
    margin-bottom: 120px;
    font-size: 28px;
  }

  .aiers-brandfilm-library__grid {
    grid-template-columns: 1fr;
    max-width: 654px;
    gap: 120px;
    margin-bottom: 120px;
  }

  .aiers-brandfilm-library__media {
    height: 384px;
    border-radius: 16px;
    margin-bottom: 32px;
  }

  .aiers-brandfilm-library__num {
    font-size: 32px;
  }

  .aiers-brandfilm-library__label {
    font-size: 36px;
  }

  .aiers-brandfilm-library__closing {
    font-size: 44px;
  }
}

/* ==========================================================================
   브릿지 B — decorative transition strip (data-funnel="none")
   ========================================================================== */
.aiers-brandfilm-bridge--b {
  background: #300057;
}

.aiers-brandfilm-bridge--b .aiers-brandfilm-bridge__glow {
  background: radial-gradient(120% 90% at 50% 0%, rgba(145, 82, 255, 0.5), transparent 70%);
}

.aiers-brandfilm-bridge--b .aiers-brandfilm-bridge__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  mix-blend-mode: lighten;
}

.aiers-brandfilm-bridge--b .aiers-brandfilm-bridge__heading {
  color: #edc421;
}

/* ==========================================================================
   [S10] 방법 — curriculum timeline (2 parts)
   ========================================================================== */
.aiers-brandfilm-method {
  padding: 80px 24px 80px;
  background: #f6f4fa;
  text-align: center;
}

.aiers-brandfilm-method__heading {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.aiers-brandfilm-method__sub {
  max-width: 420px;
  margin: 0 auto 40px;
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
}

.aiers-brandfilm-method__parts {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}

.aiers-brandfilm-method__part-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: #5832b8;
  border-radius: 8px 8px 0 0;
  color: #ffffff;
}

.aiers-brandfilm-method__part-head-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aiers-brandfilm-method__part-tag {
  display: inline-flex;
  flex-shrink: 0;
  padding: 2px 8px;
  background: #ffffff;
  border: 1px solid #5832b8;
  border-radius: 4px;
  color: #5832b8;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.aiers-brandfilm-method__part-time {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.aiers-brandfilm-method__part-title {
  display: block;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.aiers-brandfilm-method__part-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #5832b8;
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.aiers-brandfilm-method__row {
  padding-bottom: 14px;
  border-bottom: 1px solid #ececec;
}

/* Figma 54:40439 puts the 결과물 chip at x=0 spanning the row's full 295px, not
   indented behind the time gutter, so the time column and its text sit in their
   own flex line and the chip is a block sibling underneath. */
.aiers-brandfilm-method__row-main {
  display: flex;
  gap: 24px;
}

.aiers-brandfilm-method__row:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.aiers-brandfilm-method__row-time {
  flex-shrink: 0;
  font-size: 14px;
  color: #121212;
}

.aiers-brandfilm-method__row-tag {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #5832b8;
}

.aiers-brandfilm-method__row-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.14px;
}

.aiers-brandfilm-method__row-desc {
  margin: 4px 0 0;
  font-size: 12px;
  color: #666666;
  line-height: 1.4;
}

.aiers-brandfilm-method__result {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 6px 12px;
  background: #fafafa;
  border-radius: 4px;
}

.aiers-brandfilm-method__result span {
  flex-shrink: 0;
  padding: 3px 6px;
  background: #5832b8;
  border-radius: 4px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.aiers-brandfilm-method__result strong {
  font-size: 13px;
  font-weight: 700;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-method {
    padding: 100px 48px 80px;
  }

  .aiers-brandfilm-method__heading {
    font-size: 40px;
  }

  .aiers-brandfilm-method__sub {
    max-width: 654px;
    margin-bottom: 64px;
    font-size: 28px;
  }

  .aiers-brandfilm-method__parts {
    gap: 48px;
    max-width: 654px;
  }

  .aiers-brandfilm-method__part-head {
    gap: 12px;
    padding: 32px;
  }

  .aiers-brandfilm-method__part-tag {
    padding: 4px 16px;
    font-size: 24px;
  }

  .aiers-brandfilm-method__part-time {
    font-size: 26px;
  }

  .aiers-brandfilm-method__part-title {
    font-size: 32px;
  }

  .aiers-brandfilm-method__part-body {
    gap: 28px;
    padding: 32px;
  }

  .aiers-brandfilm-method__row {
    gap: 48px;
    padding-bottom: 28px;
  }

  .aiers-brandfilm-method__row-time {
    font-size: 26px;
  }

  .aiers-brandfilm-method__row-tag {
    font-size: 24px;
  }

  .aiers-brandfilm-method__row-title {
    font-size: 26px;
  }

  .aiers-brandfilm-method__row-desc {
    font-size: 22px;
  }

  .aiers-brandfilm-method__result {
    gap: 24px;
    margin-top: 24px;
    padding: 12px 24px;
  }

  .aiers-brandfilm-method__result span {
    padding: 6px 12px;
    font-size: 20px;
  }

  .aiers-brandfilm-method__result strong {
    font-size: 24px;
  }
}

/* ==========================================================================
   SEC 10 · Before/After (1) — 4 comparison rows
   ========================================================================== */
.aiers-brandfilm-mood {
  padding: 80px 24px;
  background: #121216;
  color: #ffffff;
  text-align: center;
}

.aiers-brandfilm-mood__heading {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.72px;
}

.aiers-brandfilm-mood__heading strong {
  color: #b69aff;
  font-weight: 700;
}

.aiers-brandfilm-mood__sub {
  max-width: 420px;
  margin: 0 auto 40px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.aiers-brandfilm-mood__list {
  display: flex;
  flex-direction: column;
  gap: 60px;
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}

.aiers-brandfilm-mood__pair {
  display: flex;
  border: 1px solid rgba(145, 82, 255, 0.4);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}

.aiers-brandfilm-mood__half {
  position: relative;
  flex: 1 1 50%;
}

.aiers-brandfilm-mood__half img {
  width: 100%;
  aspect-ratio: 163 / 185;
  object-fit: cover;
}

.aiers-brandfilm-mood__tag {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.aiers-brandfilm-mood__half--before .aiers-brandfilm-mood__tag {
  background: #666666;
  color: rgba(255, 255, 255, 0.7);
}

.aiers-brandfilm-mood__half--after .aiers-brandfilm-mood__tag {
  background: #5832b8;
  color: #ffffff;
}

.aiers-brandfilm-mood__num {
  display: block;
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: #b69aff;
}

.aiers-brandfilm-mood__label {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-mood {
    padding: 120px 48px;
  }

  .aiers-brandfilm-mood__heading {
    font-size: 48px;
  }

  .aiers-brandfilm-mood__sub {
    max-width: 654px;
    margin-bottom: 64px;
    font-size: 28px;
  }

  .aiers-brandfilm-mood__list {
    gap: 96px;
    max-width: 654px;
  }

  .aiers-brandfilm-mood__pair {
    border-radius: 16px;
    margin-bottom: 32px;
  }

  .aiers-brandfilm-mood__tag {
    top: 20px;
    padding: 4px 16px;
    font-size: 24px;
    border-radius: 8px;
  }

  .aiers-brandfilm-mood__num {
    font-size: 32px;
  }

  .aiers-brandfilm-mood__label {
    font-size: 36px;
  }
}

/* ==========================================================================
   SEC 11 · 수강 후, 이렇게 바뀝니다 (before/after cards)
   ========================================================================== */
.aiers-brandfilm-transform {
  padding: 60px 24px;
  background: #f6f4fa;
  text-align: center;
}

.aiers-brandfilm-transform__heading {
  margin: 0 0 40px;
  font-size: 24px;
  font-weight: 700;
}

.aiers-brandfilm-transform__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 420px;
  margin: 0 auto;
}

.aiers-brandfilm-transform__card {
  width: 100%;
  padding: 20px;
  border-radius: 8px;
  text-align: left;
}

.aiers-brandfilm-transform__card--before {
  background: #ffffff;
  border: 1px solid #e6e6e6;
}

.aiers-brandfilm-transform__card--after {
  background: rgba(119, 56, 255, 0.05);
  border: 1px solid #5832b8;
}

.aiers-brandfilm-transform__tag {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 20px;
}

.aiers-brandfilm-transform__card--before .aiers-brandfilm-transform__tag {
  background: rgba(119, 56, 255, 0.05);
  border: 1px solid #5832b8;
  color: #5832b8;
}

.aiers-brandfilm-transform__card--after .aiers-brandfilm-transform__tag {
  background: #5832b8;
  color: #ffffff;
}

.aiers-brandfilm-transform__card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aiers-brandfilm-transform__card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.aiers-brandfilm-transform__card--before li {
  color: rgba(18, 18, 18, 0.8);
}

.aiers-brandfilm-transform__card--after li {
  font-size: 14px;
  font-weight: 600;
  color: #121212;
}

.aiers-brandfilm-transform__card li img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.aiers-brandfilm-transform__arrow {
  width: 42px;
  height: 29px;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-transform {
    padding: 120px 48px;
  }

  .aiers-brandfilm-transform__heading {
    margin-bottom: 64px;
    font-size: 48px;
  }

  .aiers-brandfilm-transform__list {
    gap: 32px;
    max-width: 654px;
  }

  .aiers-brandfilm-transform__card {
    padding: 40px;
    border-radius: 16px;
  }

  .aiers-brandfilm-transform__tag {
    padding: 6px 20px;
    font-size: 24px;
    margin-bottom: 32px;
  }

  .aiers-brandfilm-transform__card ul {
    gap: 20px;
  }

  .aiers-brandfilm-transform__card li {
    gap: 16px;
    font-size: 22px;
  }

  .aiers-brandfilm-transform__card--after li {
    font-size: 24px;
  }

  .aiers-brandfilm-transform__card li img {
    width: 28px;
    height: 28px;
  }

  .aiers-brandfilm-transform__arrow {
    width: 72px;
    height: 50px;
  }
}

/* ==========================================================================
   SEC 12 · 가져가는 것 (deliverables)
   ========================================================================== */
.aiers-brandfilm-takeaways {
  padding: 80px 32px;
  background: linear-gradient(180deg, #0d0e17, #1f142d);
  color: #ffffff;
  text-align: center;
}

.aiers-brandfilm-takeaways__heading {
  margin: 0 0 40px;
  font-size: 24px;
  font-weight: 700;
}

.aiers-brandfilm-takeaways__heading strong {
  display: block;
  color: #b69aff;
  font-weight: 700;
}

.aiers-brandfilm-takeaways__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto 18px;
  text-align: left;
}

.aiers-brandfilm-takeaways__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 116px;
  padding: 24px 76px 24px 20px;
  border: 1px solid rgba(119, 56, 255, 0.25);
  border-radius: 8px;
  background: linear-gradient(173deg, rgba(119, 56, 255, 0) 12%, rgba(119, 56, 255, 0.5) 100%);
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.2), inset 0 0 40px 0 rgba(49, 76, 255, 0.08);
}

.aiers-brandfilm-takeaways__num {
  display: inline-flex;
  padding: 2px 4px;
  margin-bottom: 6px;
  background: rgba(182, 154, 255, 0.15);
  border-radius: 2px;
  color: #b69aff;
  font-size: 12px;
  font-weight: 700;
}

.aiers-brandfilm-takeaways__item-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.aiers-brandfilm-takeaways__item img {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  opacity: 0.9;
}

.aiers-brandfilm-takeaways__arrow {
  display: block;
  width: 42px;
  height: 29px;
  margin: 0 auto 12px;
}

.aiers-brandfilm-takeaways__summary {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  min-height: 100px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(119, 56, 255, 0.25);
  border-radius: 8px;
  background: linear-gradient(174deg, rgba(119, 56, 255, 0) 12%, rgba(119, 56, 255, 0.7) 100%);
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.2), inset 0 0 40px 0 rgba(49, 76, 255, 0.08);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.48px;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-takeaways {
    padding: 120px 48px;
  }

  .aiers-brandfilm-takeaways__heading {
    margin-bottom: 64px;
    font-size: 48px;
  }

  .aiers-brandfilm-takeaways__list {
    gap: 24px;
    max-width: 654px;
    margin-bottom: 36px;
  }

  .aiers-brandfilm-takeaways__item {
    min-height: 180px;
    padding: 32px 140px 32px 32px;
    border-radius: 16px;
  }

  .aiers-brandfilm-takeaways__num {
    padding: 4px 8px;
    margin-bottom: 12px;
    font-size: 20px;
  }

  .aiers-brandfilm-takeaways__item-title {
    font-size: 26px;
  }

  .aiers-brandfilm-takeaways__item img {
    right: 32px;
    width: 72px;
    height: 72px;
  }

  .aiers-brandfilm-takeaways__arrow {
    width: 72px;
    height: 50px;
    margin-bottom: 24px;
  }

  .aiers-brandfilm-takeaways__summary {
    max-width: 654px;
    min-height: 140px;
    padding: 32px;
    border-radius: 16px;
    font-size: 28px;
  }
}

/* ==========================================================================
   SEC 10 · Before/After (2) — audience-fit persona cloud
   ========================================================================== */
.aiers-brandfilm-audience {
  position: relative;
  overflow: hidden;
  padding: 80px 24px 80px;
  background: linear-gradient(180deg, #121216, #7738ff 278%);
  color: #ffffff;
  text-align: center;
}

.aiers-brandfilm-audience__heading {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.aiers-brandfilm-audience__heading strong {
  display: block;
  color: #b69aff;
  font-weight: 700;
}

.aiers-brandfilm-audience__sub {
  max-width: 420px;
  /* 59px puts the chip stage at the comp's y=253, measured from the title
     block ending at y=194 on the 375 canvas. */
  margin: 0 auto 59px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

/* The chip stage is a scatter, not a wrapping row: Figma pins all five pills at
   fixed coordinates inside a 319 x 168.09 box (54:40691, doubled on desktop at
   77:54808). Percentages off a locked aspect-ratio reproduce that layout at any
   width without a single hard-coded pixel. */
/* The stage owns the design's coordinate space: 1 design px = 1/319 of its
   width, so the whole scatter — chips, watermark, connector — scales from the
   375 comp to the 750 one with no per-breakpoint numbers. */
.aiers-brandfilm-audience__stage {
  width: 97.55%;
  max-width: 638px;
  margin: 0 auto;
  container-type: inline-size;
}

.aiers-brandfilm-audience__cloud {
  position: relative;
  width: 100%;
  aspect-ratio: 319 / 168.09;
}

.aiers-brandfilm-audience__watermark {
  position: absolute;
  left: -14.42%;
  top: -28.82%;
  width: 129.15%;
  height: 245.11%;
  background: linear-gradient(180deg, #a26fff, #161616);
  -webkit-mask: url("./figma/sections/sec10b/logo-watermark.png") center / 100% 100% no-repeat;
  mask: url("./figma/sections/sec10b/logo-watermark.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

.aiers-brandfilm-audience__chip {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31.03%;
  height: 24.99%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 0.505px solid #b3b3b3;
  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.25);
  color: #121212;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.28px;
  white-space: nowrap;
}

.aiers-brandfilm-audience__chip--planner { left: 5.64%; top: 0; }
.aiers-brandfilm-audience__chip--marketer { left: 68.97%; top: 0; }
.aiers-brandfilm-audience__chip--designer { left: 35.74%; top: 37.15%; }
.aiers-brandfilm-audience__chip--owner { left: 0; top: 68.42%; }
.aiers-brandfilm-audience__chip--solo { left: 68.97%; top: 74.96%; }

/* The chip label is the one value that cannot ride the stage percentages:
   container units resolve against a different container inside font-size. These
   steps read the stage itself. On the AIERS page the stage really does grow to
   ~638px and they fire; inside the JIP shell the body is a 375 canvas scaled by
   zoom, so the stage stays 319 layout px and the 14px base is already the comp.
   319 -> 14px is the comp ratio, and each step holds it. */
@container (min-width: 380px) {
  .aiers-brandfilm-audience__chip {
    font-size: 18px;
  }
}

@container (min-width: 480px) {
  .aiers-brandfilm-audience__chip {
    font-size: 21px;
  }
}

@container (min-width: 560px) {
  .aiers-brandfilm-audience__chip {
    font-size: 25px;
  }
}

@container (min-width: 620px) {
  .aiers-brandfilm-audience__chip {
    font-size: 28px;
  }
}

/* The SVG carries its own glow padding, so the drawn line starts 40 design px
   below its top edge and the diamond ends well above its bottom edge. Every
   value here is a share of the 319-wide stage, which lands the visible part on
   the comp's y=444.56 -> y=525.56 run at any width. */
.aiers-brandfilm-audience__connector {
  display: block;
  width: 28.7%;
  aspect-ratio: 91.547 / 166.773;
  height: auto;
  margin: -5.16% auto -4.63%;
}

.aiers-brandfilm-audience__closing {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.66px;
}

.aiers-brandfilm-audience__closing strong {
  color: #edc421;
  font-weight: 700;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-audience {
    padding: 160px 48px 160px;
  }

  .aiers-brandfilm-audience__heading {
    font-size: 48px;
  }

  .aiers-brandfilm-audience__sub {
    max-width: 654px;
    margin-bottom: 118px;
    font-size: 28px;
  }

  .aiers-brandfilm-audience__closing {
    font-size: 40px;
  }
}

/* ==========================================================================
   SEC 19 · 비교표
   ========================================================================== */
.aiers-brandfilm-compare {
  padding: 80px 16px;
  background: #ffffff;
  text-align: center;
}

.aiers-brandfilm-compare__heading {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.aiers-brandfilm-compare__sub {
  max-width: 420px;
  margin: 0 auto 32px;
  font-size: 14px;
  color: rgba(18, 18, 18, 0.8);
}

/* 162 + 181 fills the comp's 343px content box exactly, so a fixed-px pair had
   no slack and tipped the scroller on at any rounding. Shares of the same 343
   keep the ratio and always fit — there is nothing to scroll. */
.aiers-brandfilm-compare__table {
  display: flex;
  justify-content: center;
  max-width: 343px;
  margin: 0 auto;
}

/* The two columns are not the same component in Figma: the highlighted one runs
   a size up (13px/16.25px icon/10px rhythm at 20-15 padding, 54:40737) against
   the muted one's 12px/15px/9px at 18-13.5 (54:40713). Sharing one set of
   values is what made the right column read tight. */
.aiers-brandfilm-compare__col {
  flex: 0 0 47.23%;
  padding: 18px 13.5px;
  text-align: left;
}

.aiers-brandfilm-compare__col--new {
  padding: 20px 15px;
}

.aiers-brandfilm-compare__col--old {
  background: #f1f1f1;
  border-radius: 8px 0 0 8px;
}

.aiers-brandfilm-compare__col--new {
  flex-basis: 52.77%;
  background: #121216;
  color: #ffffff;
  border-radius: 8px;
  margin: -22px 0;
  padding-top: 20px;
  padding-bottom: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  z-index: 1;
}

.aiers-brandfilm-compare__badge {
  display: block;
  width: fit-content;
  margin: 0 auto 18px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #86898d;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.aiers-brandfilm-compare__col--new .aiers-brandfilm-compare__badge {
  margin-bottom: 16px;
  padding: 6px 10px;
  background: #5832b8;
  font-size: 13px;
}

.aiers-brandfilm-compare__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.aiers-brandfilm-compare__col--new ul {
  gap: 10px;
}

.aiers-brandfilm-compare__col li {
  display: flex;
  gap: 7.2px;
  align-items: center;
  /* Figma insets the row by 3.6px, but that inset plus the icon leaves the
     label 4px short of the 110px it needs and re-breaks "…잇지 못함" onto a
     third line. The inset is invisible; the line break is not. */
  padding-bottom: 7.2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 12px;
  font-weight: 600;
  color: #666666;
  line-height: 1.5;
  /* Figma tracking -0.48px. Without it "한 편의 광고로 잇지 못함" overflows the
     110px text column and drops "못함" onto a third line. */
  letter-spacing: -0.48px;
}

.aiers-brandfilm-compare__col--new li {
  gap: 8px;
  padding-bottom: 8px;
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.12);
  font-size: 13px;
  letter-spacing: -0.52px;
}

.aiers-brandfilm-compare__col li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.aiers-brandfilm-compare__col--new li:last-child {
  padding-bottom: 0;
}

.aiers-brandfilm-compare__col li img {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.aiers-brandfilm-compare__col--new li img {
  width: 16.25px;
  height: 16.25px;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-compare {
    padding: 140px 48px;
  }

  .aiers-brandfilm-compare__heading {
    font-size: 40px;
  }

  .aiers-brandfilm-compare__sub {
    max-width: 654px;
    margin-bottom: 56px;
    font-size: 26px;
  }

  .aiers-brandfilm-compare__table {
    max-width: 590px;
  }

  .aiers-brandfilm-compare__col {
    padding: 32px 24px;
  }

  .aiers-brandfilm-compare__col--new {
    margin: -32px 0;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .aiers-brandfilm-compare__badge {
    margin-bottom: 28px;
    padding: 8px 16px;
    font-size: 20px;
  }

  .aiers-brandfilm-compare__col--new .aiers-brandfilm-compare__badge {
    font-size: 22px;
  }

  .aiers-brandfilm-compare__col ul {
    gap: 14px;
  }

  .aiers-brandfilm-compare__col li {
    gap: 12px;
    padding-bottom: 14px;
    font-size: 20px;
  }

  .aiers-brandfilm-compare__col li img {
    width: 24px;
    height: 24px;
  }
}

/* ==========================================================================
   [S12] 여정 — 3-step journey (before/day/after)
   ========================================================================== */
.aiers-brandfilm-journey {
  padding: 80px 24px;
  background: #5832b8;
  color: #ffffff;
  text-align: center;
}

.aiers-brandfilm-journey__heading {
  max-width: 420px;
  margin: 0 auto 32px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.aiers-brandfilm-journey__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 420px;
  margin: 0 auto;
}

.aiers-brandfilm-journey__arrow {
  width: 40px;
  height: 20px;
  margin: 8px 0;
}

.aiers-brandfilm-journey__card {
  width: 100%;
  padding: 24px 20px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  text-align: left;
  color: #121212;
}

.aiers-brandfilm-journey__card--active {
  border: 2px solid #7738ff;
}

.aiers-brandfilm-journey__tag {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid #5832b8;
  background: rgba(119, 56, 255, 0.05);
  color: #5832b8;
  font-size: 14px;
  font-weight: 700;
}

.aiers-brandfilm-journey__card--active .aiers-brandfilm-journey__tag {
  background: #5832b8;
  color: #ffffff;
}

.aiers-brandfilm-journey__title {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 700;
  color: #333333;
}

.aiers-brandfilm-journey__desc {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 600;
  color: #5832b8;
}

.aiers-brandfilm-journey__card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aiers-brandfilm-journey__card li {
  padding: 14px 15px;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
}

.aiers-brandfilm-journey__card--active li {
  background: rgba(119, 56, 255, 0.05);
  border-color: #5832b8;
  color: #5832b8;
  font-weight: 700;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-journey {
    padding: 120px 48px;
  }

  .aiers-brandfilm-journey__heading {
    max-width: 654px;
    margin-bottom: 56px;
    font-size: 40px;
  }

  .aiers-brandfilm-journey__list {
    max-width: 654px;
  }

  .aiers-brandfilm-journey__arrow {
    width: 64px;
    height: 32px;
    margin: 16px 0;
  }

  .aiers-brandfilm-journey__card {
    padding: 40px 32px;
    border-radius: 16px;
  }

  .aiers-brandfilm-journey__tag {
    margin-bottom: 24px;
    padding: 6px 18px;
    font-size: 24px;
  }

  .aiers-brandfilm-journey__title {
    font-size: 44px;
  }

  .aiers-brandfilm-journey__desc {
    margin-bottom: 32px;
    font-size: 26px;
  }

  .aiers-brandfilm-journey__card ul {
    gap: 12px;
  }

  .aiers-brandfilm-journey__card li {
    padding: 22px 24px;
    font-size: 22px;
  }
}

/* ==========================================================================
   [S13] 약속 — "함께 만드는 것" 3 items with photos
   ========================================================================== */
.aiers-brandfilm-together {
  padding: 80px 24px;
  background: #ffffff;
  text-align: center;
}

.aiers-brandfilm-together__heading {
  max-width: 420px;
  margin: 0 auto 40px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.aiers-brandfilm-together__heading strong {
  color: #5832b8;
  font-weight: 700;
}

.aiers-brandfilm-together__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}

.aiers-brandfilm-together__media {
  aspect-ratio: 327 / 200;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #e0dce8;
}

.aiers-brandfilm-together__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aiers-brandfilm-together__num {
  color: #5832b8;
}

.aiers-brandfilm-together__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
}

.aiers-brandfilm-together__desc {
  margin: 0;
  font-size: 14px;
  color: #666666;
  line-height: 1.45;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-together {
    padding: 120px 48px;
  }

  .aiers-brandfilm-together__heading {
    max-width: 654px;
    margin-bottom: 64px;
    font-size: 40px;
  }

  .aiers-brandfilm-together__list {
    gap: 48px;
    max-width: 654px;
  }

  .aiers-brandfilm-together__media {
    border-radius: 16px;
    margin-bottom: 24px;
  }

  .aiers-brandfilm-together__title {
    font-size: 26px;
  }

  .aiers-brandfilm-together__desc {
    font-size: 22px;
  }
}

/* ==========================================================================
   [S14] 약속 — "처음이어도 완성" 4 numbered cards
   ========================================================================== */
.aiers-brandfilm-guide {
  padding: 60px 24px;
  background: #f6f4fa;
  text-align: center;
}

.aiers-brandfilm-guide__heading {
  max-width: 420px;
  margin: 0 auto 32px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.aiers-brandfilm-guide__heading strong {
  color: #5832b8;
  font-weight: 700;
}

.aiers-brandfilm-guide__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}

.aiers-brandfilm-guide__card {
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}

.aiers-brandfilm-guide__num {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 2px 8px;
  background: rgba(119, 56, 255, 0.05);
  border: 1px solid #5832b8;
  border-radius: 4px;
  color: #5832b8;
  font-size: 12px;
  font-weight: 600;
}

.aiers-brandfilm-guide__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.aiers-brandfilm-guide__desc {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
}

.aiers-brandfilm-guide__media {
  height: 164px;
  border-radius: 4px;
  overflow: hidden;
  background: #000000;
}

.aiers-brandfilm-guide__media img,
.aiers-brandfilm-guide__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aiers-brandfilm-guide__media--badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1edff;
}

/* The refund artwork already carries its own #f1edff board, so it is fitted
   rather than cropped. */
.aiers-brandfilm-guide__media--badge img {
  object-fit: contain;
}




@media (min-width: 1280px) {
  .aiers-brandfilm-guide {
    padding: 120px 48px;
  }

  .aiers-brandfilm-guide__heading {
    max-width: 654px;
    margin-bottom: 56px;
    font-size: 40px;
  }

  .aiers-brandfilm-guide__list {
    gap: 24px;
    max-width: 654px;
  }

  .aiers-brandfilm-guide__card {
    padding: 32px;
    border-radius: 16px;
  }

  .aiers-brandfilm-guide__num {
    margin-bottom: 20px;
    padding: 4px 14px;
    font-size: 20px;
  }

  .aiers-brandfilm-guide__title {
    font-size: 26px;
  }

  .aiers-brandfilm-guide__desc {
    margin-bottom: 20px;
    font-size: 22px;
  }

  .aiers-brandfilm-guide__media {
    height: 320px;
    border-radius: 8px;
  }
}

/* ==========================================================================
   이런 분께 추천합니다
   ========================================================================== */
.aiers-brandfilm-recommend {
  padding: 60px 24px;
  background: #fafafa;
  text-align: center;
}

.aiers-brandfilm-recommend__heading {
  margin: 0 0 40px;
  font-size: 24px;
  font-weight: 700;
}

.aiers-brandfilm-recommend__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}

.aiers-brandfilm-recommend__card {
  padding: 24px 20px;
  border-radius: 8px;
}

.aiers-brandfilm-recommend__card--yes {
  background: rgba(119, 56, 255, 0.05);
  border: 2px solid #7738ff;
}

.aiers-brandfilm-recommend__card--no {
  background: #f1f1f1;
  border: 1px solid #e6e6e6;
}

.aiers-brandfilm-recommend__card-title {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.aiers-brandfilm-recommend__card--no .aiers-brandfilm-recommend__card-title {
  color: #121212;
}

.aiers-brandfilm-recommend__card--yes .aiers-brandfilm-recommend__card-title {
  color: #5832b8;
}

.aiers-brandfilm-recommend__card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aiers-brandfilm-recommend__card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #121212;
}

.aiers-brandfilm-recommend__card li img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-recommend {
    padding: 120px 48px;
  }

  .aiers-brandfilm-recommend__heading {
    margin-bottom: 64px;
    font-size: 44px;
  }

  .aiers-brandfilm-recommend__list {
    gap: 32px;
    max-width: 654px;
  }

  .aiers-brandfilm-recommend__card {
    padding: 40px 32px;
    border-radius: 16px;
  }

  .aiers-brandfilm-recommend__card-title {
    margin-bottom: 32px;
    font-size: 30px;
  }

  .aiers-brandfilm-recommend__card ul {
    gap: 16px;
  }

  .aiers-brandfilm-recommend__card li {
    gap: 16px;
    font-size: 22px;
  }

  .aiers-brandfilm-recommend__card li img {
    width: 26px;
    height: 26px;
  }
}

/* FAQ — the shared AIERS accordion (aiers-openclaw .aiers-faq/.aiers-accordion),
   Q label recoloured to this page's accent. */
.aiers-brandfilm-faq{padding:88px 16px 104px;background:#fff;color:#000}
.aiers-brandfilm-faq h2{margin:0;font-size:24px;font-weight:700;line-height:1.25;text-align:center}
.aiers-brandfilm-faq__accordion{margin-top:40px}
.aiers-brandfilm-faq details{border-top:1px solid #e5e5e5;color:#000}
.aiers-brandfilm-faq details[open]{background:#fafafa}
.aiers-brandfilm-faq summary{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;font-size:14px;font-weight:700;line-height:1.5;list-style:none;cursor:pointer}
.aiers-brandfilm-faq summary::-webkit-details-marker{display:none}
.aiers-brandfilm-faq summary span{color:#5832b8}
.aiers-brandfilm-faq__chevron{flex:0 0 10.833px;width:10.833px;height:6.167px;margin-top:7px;margin-left:auto}
.aiers-brandfilm-faq__chevron--open{transform:rotate(180deg)}
.aiers-brandfilm-faq details .aiers-brandfilm-faq__chevron--open,.aiers-brandfilm-faq details[open] .aiers-brandfilm-faq__chevron--closed{display:none}
.aiers-brandfilm-faq details[open] .aiers-brandfilm-faq__chevron--open{display:block}
.aiers-brandfilm-faq details p{margin:0;padding:0 16px 12px 46px;color:#737373;font-size:12px;font-weight:400;line-height:1.5}
@media(min-width:1280px){
.aiers-brandfilm-faq{padding:144px 48px 180px}
.aiers-brandfilm-faq h2{font-size:48px}
/* 654px = the content width every other section in this 750px column uses. */
.aiers-brandfilm-faq__accordion{max-width:654px;margin:64px auto 0}
.aiers-brandfilm-faq summary{align-items:center;gap:14px;padding:20px 24px;font-size:18px}
.aiers-brandfilm-faq__chevron{margin-top:0}
.aiers-brandfilm-faq details p{padding:0 24px 20px 56px;font-size:16px}
}

/* Reserve bottom padding for the fixed CTA on mobile so it does not cover FAQ. */
.aiers-brandfilm-detail {
  padding-bottom: 110px;
}

@media (min-width: 1280px) {
  .aiers-brandfilm-detail {
    padding-bottom: 120px;
  }
}

/* 태블릿(750–1279px). 1280 미만은 모바일 조판이 뷰포트 폭으로 늘어나 본문이 961px 까지
   퍼진다. 데스크탑 시안이 375 조판의 정확히 2배(750px)이므로, 이 구간은 섹션마다
   375 조판을 750 컬럼에 2배로 키운다. 탭(nav)은 sticky 라 확대하지 않고, 확대된
   섹션의 scroll-margin 은 절반(112 -> 56)으로 둬야 실제 112px 이 된다. */
@media (min-width: 750px) and (max-width: 1279px) {
  .aiers-brandfilm-hero__inner {
    max-width: 375px;
    zoom: 2;
  }

  .aiers-brandfilm-hero__media,
  .aiers-brandfilm-hero__fade {
    height: 532px;
  }

  .aiers-brandfilm-detail__main {
    max-width: 750px;
    margin-inline: auto;
  }

  .aiers-brandfilm-detail__main > section {
    zoom: 2;
  }

  .aiers-brandfilm-detail-tabs + section,
  .aiers-brandfilm-detail-tabs ~ section[id] {
    scroll-margin-top: 56px;
  }

  .aiers-brandfilm-fixed-cta--mobile .aiers-brandfilm-fixed-cta__body {
    max-width: 750px;
    margin-inline: auto;
  }
}

/* Portrait clips sit letterboxed inside the landscape media frame, the way the
   Figma comps show them — bars take the clip's dominant colour via --jip-pillar
   so the frame reads as one surface instead of a hard crop. */
.aiers-brandfilm-reframe__media--pillar,
.aiers-brandfilm-library__media--pillar {
  background: var(--jip-pillar, #1e1e24);
}

.aiers-brandfilm-reframe__media--pillar video,
.aiers-brandfilm-library__media--pillar video {
  object-fit: contain;
}

.aiers-brandfilm-page.is-aiers-sold-out [data-apply-trigger] {
  background: #bdbdbd;
  color: #fff;
  pointer-events: none;
  cursor: default;
}