@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-mck-page {
  margin: 0;
  color: #141413;
  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-mck-page * {
  box-sizing: border-box;
}

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

/* [S01] Hero — the one section with a genuinely different mobile/desktop
   structure (per docs/작업지시서_aiers-mck.md §"히어로"); every other
   section shares one DOM across breakpoints.

   The hero copy/visual are authored as a fixed 375px-wide Figma canvas, not
   a fluid layout. Below 1280px this canvas is scaled to fill whatever the
   real viewport width is (100vw / 375) instead of being pinned at a literal
   375px — real phones are 320-430px wide, never exactly 375, so without
   this scale step the visual (fixed at left:0, width:375px) overflowed or
   fell short of the viewport and got clipped by this section's own
   `overflow: hidden`, and the whole copy+visual composition sat off-center
   on any device that wasn't exactly 375px wide. Scaling keeps every
   element's position relative to the others exactly as designed, on any
   width. */
.aiers-mck-hero {
  position: relative;
  /* Scale factor for the 375px canvas below, capped at 1.6x (effective
     600px-wide content) so the portrait doesn't keep ballooning as the
     viewport widens all the way to the 1280px desktop breakpoint — past
     600px the extra width just shows more background, not a bigger photo.
     `100vw / 375px` (dividing by a UNITED 375px, not a bare 375) is what
     resolves to a unitless number here, since min()/scale() both reject a
     length. */
  --hero-scale: min(calc(100vw / 375px), 1.6);
  /* NOTE: `560px * (100vw / 375)` is INVALID calc() (length * length) and
     silently computes to nothing, collapsing this to auto/content height —
     that was the actual, unnoticed bug behind every past "mobile layout is
     broken" report. `var(--hero-scale) * 560px` (number * length) is valid. */
  height: calc(var(--hero-scale) * 560px);
  overflow: hidden;
  background: linear-gradient(180deg, #002234 10.6%, #00162c 133.2%);
  isolation: isolate;
}

.aiers-mck-hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Single warm glow behind the portrait only, matching the real Figma
     hero reference — an earlier bottom-left glow blob here didn't match
     the source and read as a stray hazy patch on the copy side. */
  background: radial-gradient(60% 50% at 78% 28%, rgba(255, 138, 61, 0.22), transparent 70%);
  mix-blend-mode: screen;
}

.aiers-mck-hero__inner {
  position: relative;
  height: 100%;
  width: 375px;
  /* Centers the (possibly-capped) scaled box horizontally once it stops
     growing with the viewport — margin:auto centers the pre-transform
     375px box, and scaling from a top-CENTER origin keeps it centered as
     --hero-scale grows, instead of anchoring growth to the left edge. */
  margin: 0 auto;
  padding: 27px 24px 0;
  transform: scale(var(--hero-scale));
  transform-origin: top center;
}

.aiers-mck-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.aiers-mck-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  color: #121212;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.12px;
  white-space: nowrap;
}

.aiers-mck-hero__badge--accent {
  background: #ff8a3d;
}

.aiers-mck-hero__badge--white {
  background: #fff;
}

.aiers-mck-hero__eyebrow {
  margin: 0 0 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.aiers-mck-hero__copy h1 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.6px;
}

.aiers-mck-hero__copy h1 strong {
  color: #ff8a3d;
  font-weight: 700;
}

.aiers-mck-hero__description {
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.24px;
}

.aiers-mck-hero__description strong {
  color: #fff;
  font-weight: 700;
}

/* Hero visual — a real layered composite (portrait cutout + icon badges +
   sparkle accents + cursor), built directly from the source Figma assets
   (node 3071:14121 "PC" / 3071:12186 "[S01]_Hero -1") instead of a single
   flattened screenshot crop. The old screenshot approach baked in a fixed
   pixel resolution (soft/blurry once scaled) and an opaque rectangular
   background (needing a mask-fade hack to hide the seam); every asset here
   is either a native alpha-cutout PNG or a vector icon, so nothing needs
   masking and nothing loses quality when the (min-width:1280px) block below
   swaps in the desktop coordinates. Positions are copied 1:1 from Figma's
   own px values for each breakpoint's frame (375px mobile / 1920px desktop),
   not eyeballed. */
.aiers-mck-hero__visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Faint rotated "McKinsey & Company" sign behind the portrait (Figma node
   3071:14123 / 3071:12200, "image 2775") — mix-blend-mode:saturation makes
   it read as a near-invisible tonal texture rather than legible signage,
   which is the actual intended effect, not a bug.

   This is a SIBLING of .aiers-mck-hero__inner, not a descendant, and that's
   load-bearing: mix-blend-mode only sees as far back as the nearest
   ancestor that itself has a `transform` — it can't see past one into
   whatever that ancestor's own backdrop was. .aiers-mck-hero__inner carries
   `transform: scale(...)` below 1280px, so nesting the sign inside it (as
   it originally was) silently broke the blend into a fully-saturated,
   plainly-legible navy box instead of the intended near-invisible texture,
   even though the exact same CSS rendered correctly at the 1280px+
   breakpoint (where .aiers-mck-hero__inner resets transform to none).
   Living outside that ancestor and applying the scale directly on this
   element instead sidesteps the issue — a transform on the blending
   element ITSELF doesn't break it, only one on an ancestor does.

   Because it's no longer inside the 375px scaled canvas, its own transform
   has to reproduce that canvas's scaling by hand: translateY's
   `368.19 * (scale - 1)` term re-centers the image on the same top-anchored
   scale origin .aiers-mck-hero__inner uses (368.19 = this image's own
   local top + half its own height), so it tracks the portrait/copy
   scaling 1:1 instead of scaling from its own center. */
.aiers-mck-hero__sign {
  position: absolute;
  left: calc(50% - 186.72px);
  top: 243.22px;
  width: 373.44px;
  height: 249.94px;
  transform: translateY(calc(368.19px * (var(--hero-scale) - 1))) scale(var(--hero-scale)) rotate(12.41deg);
  mix-blend-mode: saturation;
  pointer-events: none;
}

.aiers-mck-hero__portrait {
  position: absolute;
  left: 46px;
  top: 228px;
  width: 289.95px;
  height: 485.14px;
}

.aiers-mck-hero__portrait-glow,
.aiers-mck-hero__portrait-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The blurred duplicate Figma layers behind the portrait for a soft glow —
   both layers are the SAME source photo (Figma bakes the blur in at render
   time via filter+blend, not as a separate pre-blurred asset). */
.aiers-mck-hero__portrait-glow {
  top: 7px;
  filter: blur(13px);
  mix-blend-mode: soft-light;
  opacity: .5;
}

.aiers-mck-hero__icon {
  position: absolute;
  width: 80px;
  height: 80px;
}

.aiers-mck-hero__icon--sparkle {
  left: 242.15px;
  top: 330.15px;
  transform: rotate(19.71deg);
}

.aiers-mck-hero__icon--chatgpt {
  left: 36.99px;
  top: 446.99px;
  transform: rotate(-15deg);
}

.aiers-mck-hero__spark {
  position: absolute;
  display: block;
}

.aiers-mck-hero__spark img {
  display: block;
  width: 100%;
  height: 100%;
}

.aiers-mck-hero__spark--a-big { left: 30.29px; top: 410.16px; width: 27.06px; height: 30.84px; }
.aiers-mck-hero__spark--a-small { left: 24px; top: 403.87px; width: 13.22px; height: 16.36px; }
.aiers-mck-hero__spark--b-big { left: 300px; top: 297px; width: 26.77px; height: 30.51px; }
.aiers-mck-hero__spark--b-small { left: 319.92px; top: 290.77px; width: 13.08px; height: 16.19px; }

.aiers-mck-hero__cursor {
  position: absolute;
  left: 235.88px;
  top: 478.38px;
  width: 52.81px;
  height: 55.48px;
  transform: rotate(-40.06deg) skewX(.6deg);
  transform-origin: 50% 45%;
}

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

  /* Figma's desktop hero (node 3071:14121) is NOT built on the 1230px
     2-column grid the rest of the body uses below — every element is
     absolutely positioned against the full 1920px frame. Text happens to
     start at the same 345px offset the 1230 column would (1920-1230)/2,
     but the portrait/icon cluster does not respect that column's right
     edge, so it must NOT be laid out with flex justify-content:space-between
     inside a 1230px box (that redistributes the gap and pushes it ~52px
     too far right). Position both halves relative to hero center instead. */
  .aiers-mck-hero__inner {
    position: relative;
    height: 100%;
    width: auto;
    margin: 0;
    padding: 0;
    /* Reset the <1280px scale-to-viewport transform — without this, the
       375px scale factor computed for a 1920px+ viewport (~5.1x) still
       applied on top of the desktop absolute-positioning values below,
       blowing the whole composition far outside the visible frame. */
    transform: none;
  }

  .aiers-mck-hero__copy {
    position: absolute;
    left: calc(50% - 615px);
    top: calc(50% - 12px);
    transform: translateY(-50%);
    max-width: 656px;
  }

  .aiers-mck-hero__badges {
    gap: 10px;
  }

  .aiers-mck-hero__badge {
    padding: 6px 12px;
    font-size: 18px;
    letter-spacing: -.54px;
    border-radius: 6px;
  }

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

  .aiers-mck-hero__copy h1 {
    font-size: 60px;
  }

  .aiers-mck-hero__description {
    font-size: 20px;
    letter-spacing: -.4px;
  }

  /* Desktop hero visual coordinates, copied 1:1 from Figma node 3071:14121
     ("PC", 1920px frame) — same center-relative-offset pattern as
     .aiers-mck-hero__copy above (offset = figma_x - 960, since 960 is the
     1920px frame's own center). */
  .aiers-mck-hero__sign {
    left: calc(50% - 91.023px);
    top: 33.979px;
    width: 862.67px;
    height: 577.37px;
    transform: rotate(12.41deg);
  }

  .aiers-mck-hero__portrait {
    left: calc(50% + 117px);
    top: 10px;
    width: 446px;
    height: 746px;
  }

  .aiers-mck-hero__portrait-glow {
    top: 11px;
  }

  .aiers-mck-hero__icon {
    width: 120px;
    height: 120px;
  }

  .aiers-mck-hero__icon--sparkle {
    left: calc(50% + 416.583px);
    top: 170.583px;
    transform: rotate(15.13deg);
  }

  .aiers-mck-hero__icon--chatgpt {
    left: calc(50% + 99.965px);
    top: 415.725px;
    transform: rotate(-15deg);
  }

  .aiers-mck-hero__spark--a-big { left: calc(50% + 51.11px); top: 474.11px; width: 34.89px; height: 39.75px; }
  .aiers-mck-hero__spark--a-small { left: calc(50% + 43px); top: 466px; width: 17.04px; height: 21.09px; }
  .aiers-mck-hero__spark--b-big { left: calc(50% + 557px); top: 157.47px; width: 36.44px; height: 41.53px; }
  .aiers-mck-hero__spark--b-small { left: calc(50% + 584.12px); top: 149px; width: 17.8px; height: 22.03px; }

  .aiers-mck-hero__cursor {
    left: calc(50% + 420.9px);
    top: 448.8px;
    width: 87.19px;
    height: 91.65px;
    transform: rotate(-40.06deg) skewX(.6deg);
    transform-origin: 50% 45%;
  }
}

/* 2026-07-31 Figma hero refresh. The supplied desktop/mobile nodes include
   the final composited art (portrait, signage, badges, sparkles and cursor).
   Keep the copy in HTML; clipping only its raster duplicate preserves the
   page's semantic heading while rendering the revised key visual verbatim. */
.aiers-mck-hero__keyvisual {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.aiers-mck-page img.aiers-mck-hero__keyvisual {
  max-width: none;
}

.aiers-mck-hero__keyvisual--mobile {
  top: 0;
  left: 50%;
  width: 375px;
  height: 560px;
  transform: translateX(-50%) scale(var(--hero-scale));
  transform-origin: top center;
  clip-path: inset(235px 0 0);
}

.aiers-mck-hero__keyvisual.aiers-mck-hero__keyvisual--desktop {
  display: none;
}

.aiers-mck-hero__inner {
  z-index: 1;
}

@media (min-width: 1280px) {
  .aiers-mck-hero__keyvisual.aiers-mck-hero__keyvisual--mobile {
    display: none;
  }

  .aiers-mck-hero__keyvisual.aiers-mck-hero__keyvisual--desktop {
    top: 0;
    left: 50%;
    display: block;
    width: 1920px;
    height: 600px;
    transform: translateX(-50%);
    clip-path: inset(0 0 0 860px);
  }
}

/* [S02] course application information */
.aiers-mck-detail {
  background: #fff;
  color: #141413;
}

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

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

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

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

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

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

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

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

.aiers-mck-course-info__row strong,
.aiers-mck-sticky-course__row strong {
  color: #ff843b;
  font-weight: 700;
}

.aiers-mck-course-info__row del,
.aiers-mck-sticky-course__row del {
  color: #141413;
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: none;
}

.aiers-mck-course-info__schedule,
.aiers-mck-sticky-course__schedule {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.24px;
  line-height: 1.2;
  text-align: right;
}

.aiers-mck-course-info__schedule em,
.aiers-mck-sticky-course__schedule em {
  color: #ff843b;
  font-style: normal;
}

.aiers-mck-course-info__schedule strong,
.aiers-mck-sticky-course__schedule strong {
  color: #141413;
  font-weight: 600;
}

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

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

.aiers-mck-course-info__timer strong,
.aiers-mck-sticky-course__timer strong {
  color: #ff843b;
}

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

.aiers-mck-course-info__cta,
.aiers-mck-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;
  text-decoration: none;
  background: #ff843b;
  border: 0;
  border-radius: 4px;
}

/* Mid-width band: 860-1279px stays single-column (no separate tablet Figma
   yet, per docs/작업지시서_aiers-mck.md) — the 2-column grid below only
   activates at 1280px+. */
.aiers-mck-detail__aside {
  display: none;
}

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

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

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

  .aiers-mck-detail__aside {
    display: block;
  }

  .aiers-mck-sticky-course {
    position: sticky;
    /* LikeLion's desktop GNB occupies the top of the viewport. */
    top: 110px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
  }

  .aiers-mck-sticky-course__card {
    display: flex;
    align-items: center;
    padding: 40px 32px 32px;
    background: rgba(255, 255, 255, 0);
    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-mck-sticky-course__content {
    display: flex;
    flex-direction: column;
    gap: 36px;
    width: 100%;
  }

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

  .aiers-mck-sticky-course__list {
    gap: 12px;
    padding: 0 4px;
    background: none;
    border: 0;
    border-radius: 0;
  }

  .aiers-mck-sticky-course__row {
    padding-bottom: 12px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 14px;
    white-space: normal;
  }

  .aiers-mck-sticky-course__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

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

  .aiers-mck-sticky-course__schedule {
    font-size: 14px;
  }

  .aiers-mck-sticky-course__timer {
    border-radius: 12px;
  }

  .aiers-mck-sticky-course__cta {
    border-radius: 12px;
  }
}

/* [S03] 제작진 크레딧 — 수상 배지 */
.aiers-mck-credits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 60px 16px;
  background: linear-gradient(180deg, #111 0%, #000218 181.05%);
  text-align: center;
}

.aiers-mck-credits__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aiers-mck-credits__heading h2 {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.aiers-mck-credits__heading h2 strong {
  font-weight: 700;
  background: linear-gradient(90deg, #ff6406, #ff9d61);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.aiers-mck-credits__heading p {
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

.aiers-mck-credits__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 249px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiers-mck-credits__list li {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}

/* Raster crops pulled from Figma bake in the section's own gradient at the
   sampled position rather than true alpha transparency — feather the edges
   so they don't show a hard rectangle against this section's own gradient. */
.aiers-mck-credits__laurel {
  flex: none;
  width: 32px;
  height: auto;
  -webkit-mask-image: radial-gradient(ellipse 60% 85% at center, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 85% at center, #000 55%, transparent 100%);
}

.aiers-mck-credits__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1 0 0;
}

.aiers-mck-credits__stat strong {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.92px;
  background: linear-gradient(90deg, #ff6406, #ff9d61);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.aiers-mck-credits__stat span {
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.84px;
}

.aiers-mck-credits__footnote {
  margin: 0;
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.26px;
}

@media (min-width: 1280px) {
  .aiers-mck-credits {
    gap: 64px;
    padding: 120px 32px;
  }

  .aiers-mck-credits__heading {
    gap: 24px;
  }

  .aiers-mck-credits__heading h2 {
    font-size: 48px;
  }

  .aiers-mck-credits__heading p {
    font-size: 28px;
  }

  .aiers-mck-credits__list {
    max-width: 498px;
    gap: 80px;
  }

  .aiers-mck-credits__list li {
    gap: 40px;
  }

  .aiers-mck-credits__laurel {
    width: 63px;
  }

  .aiers-mck-credits__stat strong {
    font-size: 64px;
    letter-spacing: -3.84px;
  }

  .aiers-mck-credits__stat span {
    font-size: 28px;
    letter-spacing: -1.68px;
  }

  .aiers-mck-credits__footnote {
    font-size: 26px;
  }
}

/* [S04] 가격 */
.aiers-mck-price {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 24px;
  background: #fff;
}

/* .aiers-mck-price is flex-column with no width cap on its children, so
   between 375-1279px (nothing here is Figma's real desktop layout — that
   only starts at 1280px) heading/chart/card just stretched to fill
   whatever the viewport was, growing indefinitely instead of settling at a
   sane reading width. Capping at 600px + margin:auto keeps it centered and
   bounded; the 1280px+ block below removes the cap since that's the real
   desktop layout, sized to its own 750px left column instead. */
.aiers-mck-price__heading,
.aiers-mck-price__chart,
.aiers-mck-price__card {
  /* width:100% first — a flex item with an auto margin on the cross axis
     doesn't stretch to fill the parent by default (per the flexbox spec),
     it shrinks to fit its own content instead. Without this, adding
     margin-left/right:auto alone shrank .aiers-mck-price__heading down to
     its longest text line's width (~265px) rather than centering a
     full-width block, which read as "stuck to the left," not centered. */
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.aiers-mck-price__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.aiers-mck-price__heading h2 strong {
  color: #ff843b;
  font-weight: 700;
}

.aiers-mck-price__heading p {
  margin: 0;
  color: #5e5d59;
  font-size: 14px;
  line-height: 1.5;
}

/* The whole badge + trend arrow + bars + divider is ONE svg with a fixed
   327x141 viewBox (Figma node 3071:12484's own reference frame) instead of
   a cluster of separately-positioned elements — every earlier version of
   this (hand-drawn dashes, then Figma's own exported vector pieces
   individually positioned with CSS %/px) drifted out of alignment somehow
   at real viewport widths. One svg with everything drawn in the same
   internal coordinate space can't drift relative to itself; only the price
   labels stay as real HTML text below it (kept selectable, and immune to
   font-loading differences an <svg><text> would be exposed to). */
.aiers-mck-price__chart {
  position: relative;
}

.aiers-mck-price__chart-svg {
  display: block;
  width: 100%;
  height: auto;
}

.aiers-mck-price__bar-labels {
  display: flex;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.aiers-mck-price__bar-labels li {
  flex: 1 0 0;
  color: #5e5d59;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -.24px;
  text-align: center;
}

.aiers-mck-price__bar-labels strong,
.aiers-mck-price__bar-labels b {
  display: block;
  color: #ff843b;
  font-weight: 700;
}

.aiers-mck-price__bar-labels b {
  color: #121212;
  font-weight: 700;
}

.aiers-mck-price__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

/* Figma (node 3071:12515) doesn't lay this out as a single row — the title
   is forced to one line (white-space:nowrap) and the price sits in its own
   row below, right-aligned. The original side-by-side flex row squeezed the
   title's available width down against the nowrap price, wrapping the
   title mid-phrase where Figma never wraps it. */
.aiers-mck-price__card-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aiers-mck-price__card-head h3 {
  margin: 0;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.4px;
  white-space: nowrap;
}

.aiers-mck-price__card-head h3 span {
  display: block;
  margin-top: 2px;
  color: rgba(0, 0, 0, .7);
  font-size: 14px;
  font-weight: 700;
}

.aiers-mck-price__card-price {
  align-self: flex-end;
  margin: 0;
  color: #000;
  font-size: 24px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.aiers-mck-price__card-price del {
  display: block;
  color: rgba(0, 0, 0, .6);
  font-size: 13px;
  font-weight: 500;
}

.aiers-mck-price__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 47px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  background: #ff843b;
  border-radius: 4px;
}

@media (min-width: 1280px) {
  .aiers-mck-price {
    gap: 48px;
    padding: 80px 48px;
  }

  /* Real desktop layout starts here — this section now lives in the
     750px-wide left column, not a viewport-width canvas, so the 600px
     mobile/tablet cap above needs to come off. */
  .aiers-mck-price__heading,
  .aiers-mck-price__chart,
  .aiers-mck-price__card {
    max-width: none;
  }

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

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

  .aiers-mck-price__bar-labels {
    gap: 8px;
    margin-top: 12px;
  }

  .aiers-mck-price__bar-labels li {
    font-size: 24px;
  }

  .aiers-mck-price__card {
    gap: 20px;
    padding: 32px;
    border-width: 2px;
    border-radius: 8px;
  }

  .aiers-mck-price__card-head h3 {
    font-size: 40px;
  }

  .aiers-mck-price__card-head h3 span {
    font-size: 28px;
  }

  .aiers-mck-price__card-price {
    font-size: 48px;
  }

  .aiers-mck-price__card-price del {
    font-size: 26px;
  }

  .aiers-mck-price__cta {
    height: 94px;
    font-size: 36px;
  }
}

/* [S05] 무료 세미나 — 리드 확보용 퍼널 */
.aiers-mck-webinar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 60px 24px;
  background: #121212;
}

.aiers-mck-webinar__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.aiers-mck-webinar__heading h2 {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.72px;
  line-height: 1.25;
}

.aiers-mck-webinar__heading h2 strong {
  color: #ff843b;
  font-weight: 700;
}

.aiers-mck-webinar__heading p {
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  letter-spacing: -.28px;
  line-height: 1.5;
}

.aiers-mck-webinar__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 311px;
  padding: 32px 20px 24px;
  background: rgba(42, 42, 42, .2);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
}

.aiers-mck-webinar__badge {
  display: inline-flex;
  padding: 4px 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.24px;
  white-space: nowrap;
  background: #ff843b;
  border-radius: 999px;
}

.aiers-mck-webinar__quote {
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.4px;
  text-align: center;
  line-height: 1.5;
}

.aiers-mck-webinar__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiers-mck-webinar__list li {
  display: flex;
  gap: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  font-size: 13px;
  letter-spacing: -.26px;
  line-height: 1.5;
}

.aiers-mck-webinar__list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.aiers-mck-webinar__list li span:first-child {
  flex: none;
  color: #ff843b;
  font-weight: 700;
}

.aiers-mck-webinar__list li span:last-child {
  color: rgba(255, 255, 255, .8);
  font-weight: 500;
}

.aiers-mck-webinar__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 47px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  background: #ff843b;
  border-radius: 4px;
}

@media (min-width: 1280px) {
  .aiers-mck-webinar {
    gap: 64px;
    padding: 120px 32px;
  }

  .aiers-mck-webinar__heading {
    gap: 24px;
  }

  .aiers-mck-webinar__heading h2 {
    font-size: 48px;
  }

  .aiers-mck-webinar__heading p {
    font-size: 28px;
  }

  .aiers-mck-webinar__card {
    max-width: 654px;
    gap: 40px;
    padding: 64px 40px 48px;
    border-radius: 16px;
  }

  .aiers-mck-webinar__badge {
    padding: 8px 24px;
    font-size: 24px;
  }

  .aiers-mck-webinar__quote {
    font-size: 40px;
  }

  .aiers-mck-webinar__list li {
    font-size: 26px;
  }

  .aiers-mck-webinar__cta {
    height: 94px;
    font-size: 36px;
  }
}

/* [S11] 공감 A */
.aiers-mck-empathy {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 60px 24px;
  background: #fafafa;
}

.aiers-mck-empathy h2 {
  margin: 0;
  color: #121212;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

/* Figma only defines two reference sizes for this card — 327px mobile
   (node 3071:12557) and 654px desktop (node 3099:21547) — and every value
   between them (copy padding, font sizes, image offset) is EXACTLY 2x, no
   exceptions. That means the honest shape of this component is "one fluid
   size that scales with its own width," not "two fixed states swapped at a
   breakpoint." The previous version had exactly that: a fixed 238px card
   height + a 248px image max-width that only got replaced at 1280px,
   while .aiers-mck-empathy__list had no width cap below 860px — so at
   anything from ~750-1279px the list stretched edge-to-edge while the card
   and image stayed pinned at mobile size, a small image floating inside an
   oversized card. Capping the list at the Figma desktop width (654px) and
   making the card a cqw-driven container removes the breakpoint entirely:
   the card is always exactly as wide as its column (never more than 654px)
   and every px value below is expressed as %-of-327 (`1cqw` here = 3.27px
   at the Figma reference, so `Npx` becomes `(N/327*100)cqw`), so it tracks
   the actual rendered width continuously instead of jumping between two
   states. */
.aiers-mck-empathy__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.aiers-mck-empathy__card {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 327 / 238;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 2.45cqw;
}

.aiers-mck-empathy__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.22cqw;
  padding: 6.12cqw 6.12cqw 0;
}

.aiers-mck-empathy__tag {
  color: #ff843b;
  font-size: 3.98cqw;
  font-weight: 700;
  letter-spacing: -.08cqw;
}

.aiers-mck-empathy__copy p {
  margin: 0;
  color: #333;
  font-size: 4.89cqw;
  font-weight: 700;
  line-height: 1.4;
}

.aiers-mck-empathy__img {
  position: absolute;
  z-index: 1;
  height: auto;
}

/* Cards 1-2 are desk-scene illustrations whose own artwork already includes
   a peach desk-color background (Figma nodes 3071:12564, 3071:12572).
   Positioned by TOP, not bottom — the previous bottom offset (12.23cqw)
   was actually .aiers-mck-empathy__bar's height copy-pasted onto the
   image by mistake, not a value derived from the image's own Figma
   position. Anchoring from the bottom with that wrong offset meant every
   width fix pushed the image's top edge further up (a taller image
   anchored at the same bottom point rises further into the copy), which
   is why it kept visibly "climbing" card to card. Figma positions these by
   top, and right goes slightly NEGATIVE (bleeds past the card's own edge,
   cropped by its overflow:hidden) — visible in the reference as the
   laptop's edge getting cut off, not a bug to "fix" by pulling it inward. */
.aiers-mck-empathy__img--desk-a {
  top: 30.59%;
  right: -12.54%;
  width: 81.04%;
}

.aiers-mck-empathy__img--desk-b {
  top: 35.63%;
  right: -9.17%;
  width: 75.84%;
}

/* Card 3's persona (Figma node 3071:12582) is a tall standing figure, not a
   landscape desk scene like cards 1-2 — anchoring it from the bottom like
   the others would clip the head and show only the legs. Figma positions
   it from the TOP instead, letting the card's own overflow:hidden crop the
   legs off the bottom (matching the reference: torso and face visible,
   feet cut off). */
.aiers-mck-empathy__img--tall {
  top: 23%;
  right: 9.5%;
  bottom: auto;
  width: 43%;
}

.aiers-mck-empathy__paper {
  position: absolute;
  top: 32%;
  left: 86%;
  z-index: 1;
  width: 17%;
  height: auto;
}

/* top (not bottom-anchored) so its exact Figma offset (204.8px of a 238px
   card, i.e. 62.63cqw down from the top) lines up with where each desk
   illustration's own background actually ends — anchoring from the bottom
   with a guessed height was what created the visible seam, since the gap
   between "where the image's desk-tone stops" and "where this rectangle
   starts" showed up as bare white card between two different oranges. */
.aiers-mck-empathy__bar {
  position: absolute;
  right: 0;
  top: 62.63cqw;
  left: 0;
  z-index: 0;
  height: 12.23cqw;
  background: #fdab82;
}

/* Figma colors this rectangle to match each specific illustration's own
   desk tone (nodes 3071:12562 / 3071:12567 / 3071:12575) — it's not one
   shared accent color, it's a seam-hider, so it has to be exact per card.
   Card 2 (3071:12567) already matches the shared #fdab82 default above. */
.aiers-mck-empathy__bar--a {
  background: #fdb28b;
}

@media (min-width: 1280px) {
  .aiers-mck-empathy {
    gap: 64px;
    padding: 120px 32px;
    align-items: center;
  }

  .aiers-mck-empathy h2 {
    font-size: 48px;
  }

  .aiers-mck-empathy__list {
    gap: 32px;
  }

  /* Card sizing/typography above is already fluid (aspect-ratio + cqw) and
     tracks the list's 654px cap continuously — only the border thickens at
     the true desktop breakpoint, since a hairline border doesn't need to
     scale with content the way text and spacing do. */
  .aiers-mck-empathy__card {
    border-width: 2px;
  }
}

/* [S07] 반전 카피 + 올인원 다이어그램 */
.aiers-mck-allinone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 60px 24px;
  background: #121212;
}

.aiers-mck-allinone__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
  text-align: center;
}

.aiers-mck-allinone__heading h2 {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.72px;
  line-height: 1.25;
}

.aiers-mck-allinone__heading h2 strong {
  color: #ff843b;
  font-weight: 700;
}

.aiers-mck-allinone__heading p {
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  letter-spacing: -.28px;
  line-height: 1.5;
}

.aiers-mck-allinone__scatter-viewport {
  width: 100%;
  overflow: hidden;
  opacity: .4;
}

.aiers-mck-allinone__scattered {
  display: flex;
  gap: 10px;
  width: max-content;
  /* margin-inline:auto centers the row when it's narrower than the
     viewport (true at any width between the mobile and desktop card
     sizes, e.g. tablet) instead of sticking to the left with dead space
     on the right. The per-row stagger is a transform (not margin-left)
     so it composes with the centering instead of fighting it — when the
     row IS wider than its container it still bleeds off both edges,
     just staggered from a centered baseline rather than a left one. */
  margin: 0 auto 8px;
  padding: 0;
  list-style: none;
}

.aiers-mck-allinone__scattered--row1 {
  transform: translateX(24px);
}

.aiers-mck-allinone__scattered--row2 {
  transform: translateX(-18px);
}

.aiers-mck-allinone__scattered li {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  width: 232px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .05);
  border-radius: 8px;
}

.aiers-mck-allinone__scattered li > * {
  min-width: 0;
}

.aiers-mck-allinone__scattered li {
  flex-wrap: wrap;
}

.aiers-mck-allinone__scattered em {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.aiers-mck-allinone__platform--f {
  color: #f62955;
}

.aiers-mck-allinone__platform--i {
  color: #20c75a;
}

.aiers-mck-allinone__scattered strong {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.aiers-mck-allinone__arrow {
  display: block;
  align-self: stretch;
  width: 100%;
  height: auto;
}

.aiers-mck-allinone__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 327px;
  padding: 24px 20px;
  background: rgba(42, 42, 42, .2);
  border-radius: 8px;
}

.aiers-mck-allinone__eyebrow {
  margin: 0;
  color: #999;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.12px;
}

.aiers-mck-allinone__title {
  margin: 4px 0 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.36px;
  line-height: 1.5;
}

.aiers-mck-allinone__title strong {
  color: #ff843b;
  font-weight: 700;
}

.aiers-mck-allinone__checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  list-style: none;
}

.aiers-mck-allinone__checks li {
  position: relative;
  padding-left: 24px;
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -.39px;
  line-height: 1.5;
}

.aiers-mck-allinone__checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #ff843b;
  font-weight: 700;
}

@media (min-width: 1280px) {
  .aiers-mck-allinone {
    gap: 40px;
    padding: 120px 32px;
  }

  .aiers-mck-allinone__heading h2 {
    font-size: 40px;
  }

  .aiers-mck-allinone__heading p {
    font-size: 24px;
  }

  .aiers-mck-allinone__scattered {
    gap: 20px;
  }

  .aiers-mck-allinone__scattered li {
    width: 464px;
    padding: 24px 32px;
  }

  .aiers-mck-allinone__scattered em {
    font-size: 20px;
  }

  .aiers-mck-allinone__scattered strong {
    font-size: 22px;
  }

  /* Figma 3130:20036 sits at x:2 in the 750px desktop main column, so it
     spans beyond this section's 32px content inset on both sides. */
  .aiers-mck-page img.aiers-mck-allinone__arrow {
    align-self: center;
    width: calc(100% + 60px);
    max-width: none;
    margin-right: -30px;
    margin-left: -30px;
  }

  .aiers-mck-allinone__card {
    max-width: 560px;
    padding: 40px;
    border-radius: 16px;
  }

  .aiers-mck-allinone__title {
    font-size: 28px;
  }

  .aiers-mck-allinone__checks li {
    font-size: 18px;
  }
}

/* [S11] 공감 B — 강사 신뢰도 */
.aiers-mck-bio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px 24px 60px;
  background: #1f2020;
}

.aiers-mck-bio h2 {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.72px;
  line-height: 1.25;
  text-align: center;
}

.aiers-mck-bio h2 strong {
  color: #ff843b;
  font-weight: 700;
}

.aiers-mck-bio__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 327px;
  padding: 16px;
  background: #2a2a2a;
  border-radius: 8px;
}

.aiers-mck-bio__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.aiers-mck-bio__avatar {
  flex: none;
  width: 80px;
  height: 80px;
  background: #ff843b;
  border-radius: 3.5px;
  object-fit: cover;
  object-position: center bottom;
}

.aiers-mck-bio__role {
  margin: 0;
  color: #ff7710;
  font-size: 12px;
  font-weight: 700;
}

.aiers-mck-bio__fullname {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.aiers-mck-bio__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
  width: 100%;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  list-style: none;
}

.aiers-mck-bio__list li {
  position: relative;
  padding-left: 12px;
  color: #d4d4d4;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

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

.aiers-mck-bio__logos-caption {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.aiers-mck-bio__logos-caption strong {
  color: #ff843b;
  font-weight: 700;
}

.aiers-mck-bio__logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: 24px 16px;
  width: 100%;
  max-width: 327px;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: .92;
}

.aiers-mck-bio__logos li {
  display: flex;
  grid-column: span 2;
  align-items: center;
  justify-content: center;
}

.aiers-mck-bio__logos li:nth-child(4),
.aiers-mck-bio__logos li:nth-child(5),
.aiers-mck-bio__logos li:nth-child(6),
.aiers-mck-bio__logos li:nth-child(7) {
  grid-column: span 3;
}

.aiers-mck-bio__logos img {
  height: 28px;
  width: auto;
  max-width: 100%;
}

@media (min-width: 1280px) {
  .aiers-mck-bio {
    gap: 64px;
    padding: 80px 32px 120px;
  }

  .aiers-mck-bio h2 {
    font-size: 48px;
  }

  .aiers-mck-bio__card {
    max-width: 654px;
    gap: 32px;
    padding: 32px;
    border-radius: 16px;
  }

  .aiers-mck-bio__head {
    gap: 32px;
  }

  .aiers-mck-bio__avatar {
    width: 160px;
    height: 160px;
    border-radius: 7px;
  }

  .aiers-mck-bio__role {
    font-size: 24px;
  }

  .aiers-mck-bio__list {
    gap: 4px;
    padding-top: 32px;
  }

  .aiers-mck-bio__list li {
    padding-left: 22px;
    font-size: 28px;
  }

  .aiers-mck-bio__list li::before {
    top: 15px;
    width: 6px;
    height: 6px;
  }

  .aiers-mck-bio__fullname {
    font-size: 32px;
  }

  .aiers-mck-bio__logos-caption {
    font-size: 36px;
  }

  .aiers-mck-bio__logos {
    max-width: 750px;
    gap: 32px 48px;
  }

  .aiers-mck-bio__logos img {
    height: 40px;
  }
}

/* [S11] 공감 C — 후기 */
.aiers-mck-reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 62px 20px;
  background: linear-gradient(180deg, #012133, #000c12);
}

.aiers-mck-reviews h2 {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.72px;
  line-height: 1.25;
  text-align: center;
}

.aiers-mck-reviews__list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: 311px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiers-mck-reviews__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  box-shadow: 0 0 19px rgba(0, 0, 0, .08);
}

.aiers-mck-reviews__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.aiers-mck-reviews__head strong {
  color: #121212;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.25px;
}

.aiers-mck-reviews__stars {
  color: #ff843b;
  font-size: 13px;
  letter-spacing: 1px;
}

.aiers-mck-reviews__card p {
  margin: 0;
  color: rgba(0, 0, 0, .8);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.25px;
  line-height: 1.5;
}

@media (min-width: 1280px) {
  .aiers-mck-reviews {
    gap: 64px;
    padding: 123px 40px;
  }

  .aiers-mck-reviews h2 {
    font-size: 48px;
  }

  .aiers-mck-reviews__list {
    max-width: 623px;
    gap: 30px;
  }

  .aiers-mck-reviews__card {
    gap: 8px;
    padding: 36px;
    border-width: 2px;
    border-radius: 8px;
  }

  .aiers-mck-reviews__head strong {
    font-size: 25px;
  }

  .aiers-mck-reviews__stars {
    font-size: 22px;
  }

  .aiers-mck-reviews__card p {
    font-size: 25px;
  }
}

/* [S06] 해결책 — 4주 커리큘럼 */
.aiers-mck-curriculum {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  padding: 60px 24px;
  background: #fafafa;
}

.aiers-mck-curriculum__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.aiers-mck-curriculum__heading h2 {
  margin: 0;
  color: #121212;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.72px;
  line-height: 1.25;
}

.aiers-mck-curriculum__heading h2 strong {
  color: #ff843b;
  font-weight: 700;
}

.aiers-mck-curriculum__heading p {
  margin: 0;
  color: rgba(18, 18, 18, .8);
  font-size: 14px;
  letter-spacing: -.28px;
  line-height: 1.5;
}

.aiers-mck-curriculum__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 311px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiers-mck-curriculum__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding: 20px;
  background: #fff;
  border: 1px solid #e6dfd8;
  border-radius: 8px;
}

.aiers-mck-curriculum__card--active {
  border-color: #ff843b;
}

.aiers-mck-curriculum__week {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 8px;
  color: #ff843b;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 119, 16, .08);
  border: 1px solid #ff843b;
  border-radius: 4px;
}

.aiers-mck-curriculum__card h3 {
  margin: 7px 0 0;
  color: #141413;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.54;
}

.aiers-mck-curriculum__card p {
  margin: 0;
  color: rgba(20, 20, 19, .7);
  font-size: 14px;
  line-height: 1.5;
}

.aiers-mck-curriculum__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiers-mck-curriculum__tags li {
  padding: 4px 8px;
  color: #ff843b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -.33px;
  background: rgba(255, 132, 59, .08);
  border-radius: 4px;
}

.aiers-mck-curriculum__arrow {
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 12px solid #ff843b;
}

@media (min-width: 1280px) {
  .aiers-mck-curriculum {
    gap: 88px;
    padding: 120px 32px;
  }

  .aiers-mck-curriculum__heading {
    gap: 24px;
  }

  .aiers-mck-curriculum__heading h2 {
    font-size: 48px;
    letter-spacing: -1.44px;
  }

  .aiers-mck-curriculum__heading p {
    font-size: 28px;
    letter-spacing: -.56px;
  }

  .aiers-mck-curriculum__list {
    max-width: 622px;
    gap: 20px;
  }

  .aiers-mck-curriculum__card {
    gap: 28px;
    padding: 40px;
    border-width: 2px;
    border-radius: 16px;
  }

  .aiers-mck-curriculum__week {
    padding: 8px 16px;
    font-size: 24px;
    border-width: 2px;
  }

  .aiers-mck-curriculum__card h3 {
    margin-top: 14px;
    font-size: 36px;
  }

  .aiers-mck-curriculum__card p {
    font-size: 28px;
  }

  .aiers-mck-curriculum__tags {
    gap: 8px 12px;
  }

  .aiers-mck-curriculum__tags li {
    padding: 8px 16px;
    font-size: 22px;
    letter-spacing: -.66px;
    border-radius: 8px;
  }

  .aiers-mck-curriculum__arrow {
    border-left-width: 28px;
    border-right-width: 28px;
    border-top-width: 24px;
  }
}

/* 상세 탭 내비게이션 — aiers-chatgpt와 동일한 sticky layout */
.aiers-mck-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-mck-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-mck-detail-tabs__item.is-active {
  color: #ff843b;
  border-bottom-color: #ff843b;
}

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

@media (min-width: 1280px) {
  .aiers-mck-detail__main {
    display: flex;
    flex-direction: column;
  }

  .aiers-mck-detail-tabs {
    order: -1;
    top: 64px;
  }

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

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

/* Tab navigation scrolls to these heading IDs. Leave room for the sticky
   host GNB plus the sticky tab bar so the selected heading is not covered. */
.aiers-page #aiers-mck-credits-title,
.aiers-page #aiers-mck-curriculum-title,
.aiers-page #aiers-mck-results-title,
.aiers-page #aiers-mck-bio-title,
.aiers-page #aiers-mck-faq-title {
  scroll-margin-top: 112px;
}

@media (min-width: 1280px) {
  .aiers-page #aiers-mck-credits-title,
  .aiers-page #aiers-mck-curriculum-title,
  .aiers-page #aiers-mck-results-title,
  .aiers-page #aiers-mck-bio-title,
  .aiers-page #aiers-mck-faq-title {
    scroll-margin-top: 128px;
  }
}

/* SEC 11-13 · WEEK 상세 (재사용 챕터 카드 패턴) */
.aiers-mck-week {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 60px 24px;
  background: #fff;
}

/* WEEK 2 (3099:21944) swaps the section/card colors vs WEEK 1: warm-tinted
   section background with plain white cards, instead of white section with
   #fafafa cards. */
.aiers-mck-week--tint {
  background: #fffbf9;
}

.aiers-mck-week--tint .aiers-mck-week__chapter {
  background: #fff;
}

/* WEEK 4 (3099:22212) is the dark capstone section: #121212 bg, white
   heading text, plain white cards, and one highlighted orange CH19 card. */
.aiers-mck-week--dark {
  background: #121212;
}

.aiers-mck-week--dark .aiers-mck-week__heading h2 {
  color: #fff;
}

/* Figma (node 3099:22218) sets this to 80%-opacity white, not solid white
   — sharing one rule with h2 above flattened both to #fff, losing the
   contrast between the heading and its supporting text. */
.aiers-mck-week--dark .aiers-mck-week__desc {
  color: rgba(255, 255, 255, .8);
}

.aiers-mck-week--dark .aiers-mck-week__chapter {
  background: #fff;
}

/* Compound with the base class (.aiers-mck-week__chapter.--highlight, not
   just --highlight alone) so these beat .aiers-mck-week__chapter h3 etc. on
   specificity — the same rule vs. source-order collision as the hero image
   toggle bug. Relying on "defined later in the file" is fragile. */
.aiers-mck-week__chapter.aiers-mck-week__chapter--highlight {
  background: rgba(255, 132, 59, .1);
  border-color: #ff843b;
}

.aiers-mck-week__chapter.aiers-mck-week__chapter--highlight h3,
.aiers-mck-week__chapter.aiers-mck-week__chapter--highlight .aiers-mck-week__checks li {
  color: #fff;
}

.aiers-mck-week__chapter.aiers-mck-week__chapter--highlight .aiers-mck-week__chapter-sub {
  color: rgba(255, 255, 255, .8);
}

.aiers-mck-week__chapter.aiers-mck-week__chapter--highlight .aiers-mck-week__result {
  color: #fff;
  background: #ff843b;
}

.aiers-mck-week__chapter.aiers-mck-week__chapter--highlight .aiers-mck-week__result span {
  color: #ff843b;
  background: #fff;
}

.aiers-mck-week__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.aiers-mck-week__eyebrow {
  margin: 0;
  color: #ff843b;
  font-size: 14px;
  font-weight: 700;
}

.aiers-mck-week__heading h2 {
  margin: 0;
  color: #121212;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.aiers-mck-week__desc {
  margin: 0;
  color: rgba(18, 18, 18, .8);
  font-size: 14px;
  line-height: 1.5;
}

.aiers-mck-week__chapters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiers-mck-week__chapter {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}

.aiers-mck-week__chapter > div,
.aiers-mck-week__chapter-tag {
  align-self: flex-start;
}

.aiers-mck-week__chapter-tag {
  display: inline-flex;
  padding: 5px 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.24px;
  white-space: nowrap;
  background: #ff843b;
  border-radius: 4px;
}

.aiers-mck-week__chapter h3 {
  margin: 8px 0 4px;
  color: #121212;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.34px;
  line-height: 1.25;
}

.aiers-mck-week__chapter-sub {
  margin: 0;
  color: #444;
  font-size: 13px;
  letter-spacing: -.26px;
  line-height: 1.25;
}

.aiers-mck-week__checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.aiers-mck-week__checks li {
  position: relative;
  padding-left: 26px;
  color: rgba(18, 18, 18, .8);
  font-size: 13px;
  letter-spacing: -.39px;
  line-height: 1.5;
}

.aiers-mck-week__checks li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 16px;
  height: 16px;
  background: #ff843b;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.aiers-mck-week__result {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 39px;
  padding: 8px 12px;
  margin: 24px 0 0;
  color: #121212;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.52px;
  background: rgba(0, 34, 53, .05);
  border-radius: 8px;
}

.aiers-mck-week__result span {
  flex: none;
  padding: 3px 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
  background: #002235;
  border-radius: 4px;
}

@media (min-width: 1280px) {
  .aiers-mck-week {
    gap: 64px;
    padding: 120px 48px;
    align-items: center;
  }

  .aiers-mck-week__heading {
    gap: 24px;
    width: 654px;
  }

  .aiers-mck-week__eyebrow {
    font-size: 28px;
  }

  .aiers-mck-week__heading h2 {
    font-size: 48px;
  }

  .aiers-mck-week__desc {
    font-size: 28px;
  }

  .aiers-mck-week__chapters {
    gap: 32px;
    width: 654px;
  }

  .aiers-mck-week__chapter {
    /* Figma 3116:11209 groups the card content into two stacks. The source
       markup is flat, so its group gaps are represented by the element
       margins below rather than one gap between every direct child. */
    gap: 0;
    padding: 40px;
    border-width: 2px;
    border-radius: 16px;
  }

  .aiers-mck-week__chapter-tag {
    padding: 10px 16px;
    font-size: 24px;
    letter-spacing: -.48px;
    border-radius: 8px;
  }

  .aiers-mck-week__chapter h3 {
    margin: 16px 0 0;
    font-size: 34px;
    letter-spacing: -.68px;
  }

  .aiers-mck-week__chapter-sub {
    margin-top: 8px;
    font-size: 26px;
    letter-spacing: -.52px;
  }

  .aiers-mck-week__checks {
    gap: 16px;
    margin-top: 32px;
  }

  .aiers-mck-week__checks li {
    padding-left: 52px;
    font-size: 26px;
    letter-spacing: -.78px;
  }

  .aiers-mck-week__checks li::before {
    width: 32px;
    height: 32px;
  }

  .aiers-mck-week__result {
    margin-top: 48px;
    height: 78px;
    gap: 24px;
    padding: 16px 24px;
    font-size: 26px;
    letter-spacing: -1.04px;
    border-radius: 16px;
  }

  .aiers-mck-week__result span {
    padding: 6px 12px;
    font-size: 24px;
    border-radius: 8px;
  }
}

/* [S14] 결과물 */
.aiers-mck-results {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 20px 32px 60px;
  background: #121212;
}

.aiers-mck-results__heading {
  display: flex;
  flex-direction: column;
  gap: 13px;
  text-align: center;
}

.aiers-mck-results__heading h2 {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.aiers-mck-results__heading h2 strong {
  color: #ff843b;
  font-weight: 700;
}

.aiers-mck-results__heading p {
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  line-height: 1.5;
}

.aiers-mck-results__sample {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}

.aiers-mck-image-carousel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 900 / 506;
}

.aiers-mck-image-carousel > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  transition: opacity .35s ease;
}

.aiers-mck-image-carousel > img.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .aiers-mck-image-carousel > img {
    transition: none;
  }
}

.aiers-mck-results__sample img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.aiers-mck-results__sample figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 6px;
}

.aiers-mck-results__sample-title {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.36px;
  line-height: 1.25;
}

.aiers-mck-results__sample-title strong {
  color: #ff843b;
  font-weight: 700;
}

.aiers-mck-results__sample-desc {
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 15px;
  letter-spacing: -.3px;
  line-height: 1.45;
}

.aiers-mck-results__bonus {
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.aiers-mck-results__bonus-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.18px;
}

.aiers-mck-results__bonus-title strong {
  color: #ff843b;
  font-weight: 800;
  letter-spacing: .92px;
  text-transform: uppercase;
}

.aiers-mck-results__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiers-mck-results__grid li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 16px;
  background: rgba(42, 42, 42, .2);
  border: 1px solid #333;
  border-radius: 8px;
}

.aiers-mck-results__grid img {
  width: 40px;
  height: 40px;
}

.aiers-mck-results__grid strong {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.aiers-mck-results__grid span {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, .8);
  font-size: 12px;
}

@media (min-width: 1280px) {
  .aiers-mck-results {
    gap: 80px;
    padding: 40px 64px 120px;
    align-items: center;
  }

  .aiers-mck-results__heading {
    gap: 26px;
    width: 622px;
  }

  .aiers-mck-results__heading h2 {
    font-size: 48px;
  }

  .aiers-mck-results__heading p {
    font-size: 28px;
  }

  .aiers-mck-results__sample {
    gap: 40px;
    width: 622px;
  }

  .aiers-mck-results__sample img {
    height: 350px;
    object-fit: cover;
    border-radius: 16px;
  }

  .aiers-mck-results__sample figcaption {
    gap: 12px;
    padding: 0 12px;
  }

  .aiers-mck-results__sample-title {
    font-size: 36px;
    letter-spacing: -.72px;
  }

  .aiers-mck-results__sample-desc {
    font-size: 30px;
    letter-spacing: -.6px;
    line-height: 1.45;
  }

  .aiers-mck-results__bonus {
    gap: 38px;
    width: 622px;
  }

  .aiers-mck-results__bonus-title {
    font-size: 40px;
  }

  .aiers-mck-results__grid {
    gap: 18px;
  }

  .aiers-mck-results__grid li {
    gap: 24px;
    padding: 40px 32px;
    border-width: 2px;
    border-radius: 16px;
  }

  .aiers-mck-results__grid img {
    width: 80px;
    height: 80px;
  }

  .aiers-mck-results__grid strong {
    font-size: 28px;
  }

  .aiers-mck-results__grid span {
    margin-top: 4px;
    font-size: 24px;
  }
}

/* 평생 무제한 수강 */
.aiers-mck-unlimited-access {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  padding: 72px 24px 84px;
  color: #fff;
  background: #121212;
}

.aiers-mck-unlimited-access::after {
  position: absolute;
  top: -6%;
  left: 50%;
  width: 132.8%;
  height: 107.5%;
  content: "";
  background: url("./figma/sections/unlimited-access/glow-surface.svg") center / 100% 100% no-repeat;
  transform: translateX(-50%);
}

.aiers-mck-unlimited-access__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.aiers-mck-unlimited-access header h2,
.aiers-mck-unlimited-access header p,
.aiers-mck-unlimited-access__notice {
  margin: 0;
}

.aiers-mck-unlimited-access header h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.84px;
  line-height: 1.25;
}

.aiers-mck-unlimited-access header h2 strong {
  color: #ff843b;
}

.aiers-mck-unlimited-access header p {
  margin-top: 22px;
  color: rgba(255, 255, 255, .8);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.3px;
  line-height: 1.5;
}

.aiers-mck-unlimited-access__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 486px);
  margin: 44px 0 34px;
}

.aiers-mck-unlimited-access__infinity {
  display: block;
  width: 100%;
  height: auto;
}

.aiers-mck-unlimited-access__star {
  position: absolute;
  z-index: 1;
  object-fit: contain;
}

.aiers-mck-unlimited-access__star--left {
  top: 17%;
  left: -13%;
  width: 54px;
}

.aiers-mck-unlimited-access__star--right {
  right: -14%;
  bottom: 24%;
  width: 96px;
}

.aiers-mck-unlimited-access__notice {
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  line-height: 1.5;
}

@media (min-width: 1280px) {
  .aiers-mck-unlimited-access {
    height: 962px;
    padding: 115px 56px 116px;
  }

  .aiers-mck-unlimited-access::after {
    top: -59px;
    width: 996px;
    height: 1034px;
  }

  .aiers-mck-unlimited-access header h2 {
    font-size: 48px;
    letter-spacing: -1.44px;
  }

  .aiers-mck-unlimited-access header p {
    margin-top: 24px;
    font-size: 28px;
    letter-spacing: -.56px;
  }

  .aiers-mck-unlimited-access__art {
    width: 487px;
    margin: 66px 0 76px;
  }

  .aiers-mck-unlimited-access__star--left {
    width: 67px;
  }

  .aiers-mck-unlimited-access__star--right {
    width: 135px;
  }

  .aiers-mck-unlimited-access__notice {
    font-size: 24px;
  }
}

.aiers-mck-onlyhere {
  padding: 60px 24px;
  background: #fff;
}

.aiers-mck-onlyhere__heading {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: center;
  margin-bottom: 32px;
}

.aiers-mck-onlyhere__eyebrow {
  font-size: 14px;
  font-weight: 700;
  color: #ff843b;
}

.aiers-mck-onlyhere__heading h2 {
  margin: 6px 0 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: #121212;
}

.aiers-mck-onlyhere__sub {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(18, 18, 18, 0.8);
}

.aiers-mck-onlyhere__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.aiers-mck-onlyhere__callout {
  background: rgba(255, 132, 59, 0.05);
  border: 1px solid #ff843b;
  border-radius: 8px;
  padding: 24px 20px;
}

.aiers-mck-onlyhere__callout h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.36px;
  color: #121212;
  margin-bottom: 12px;
}

.aiers-mck-onlyhere__callout h3 em {
  font-style: normal;
  color: #ff6000;
}

.aiers-mck-onlyhere__callout p {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(18, 18, 18, 0.8);
}

.aiers-mck-onlyhere__tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.aiers-mck-onlyhere__tags-row {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiers-mck-onlyhere__tags li {
  border: 1px solid #fde8dd;
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.48px;
  color: #222;
  white-space: nowrap;
}

.aiers-mck-onlyhere__tags-solid {
  background: #ff6000 !important;
  color: #fff !important;
  border-color: #fde8dd !important;
  font-weight: 700 !important;
}

.aiers-mck-onlyhere__cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiers-mck-onlyhere__cards li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100px;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  overflow: hidden;
  padding: 0 100px 0 19px;
}

.aiers-mck-onlyhere__cards strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.64px;
  color: #121212;
}

.aiers-mck-onlyhere__cards span {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.52px;
  color: #444;
  line-height: 1.4;
}

.aiers-mck-onlyhere__cards img {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  object-fit: contain;
}

.aiers-mck-onlyhere__cards li:nth-child(1) img { width: 65px; height: 76px; }
.aiers-mck-onlyhere__cards li:nth-child(2) img { width: 81px; height: 81px; }
.aiers-mck-onlyhere__cards li:nth-child(3) img { width: 74px; height: 74px; }
.aiers-mck-onlyhere__cards li:nth-child(4) img { width: 81px; height: 81px; }

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

  .aiers-mck-onlyhere__heading {
    margin-bottom: 64px;
  }

  .aiers-mck-onlyhere__eyebrow {
    font-size: 28px;
  }

  .aiers-mck-onlyhere__heading h2 {
    margin: 12px 0 24px;
    font-size: 48px;
  }

  .aiers-mck-onlyhere__sub {
    font-size: 28px;
  }

  .aiers-mck-onlyhere__body {
    gap: 40px;
    max-width: 622px;
    margin: 0 auto;
  }

  .aiers-mck-onlyhere__callout {
    border-width: 2px;
    border-radius: 16px;
    padding: 48px 40px;
  }

  .aiers-mck-onlyhere__callout h3 {
    font-size: 36px;
    letter-spacing: -0.72px;
    margin-bottom: 24px;
  }

  .aiers-mck-onlyhere__callout p {
    font-size: 28px;
    line-height: 1.4;
  }

  .aiers-mck-onlyhere__tags {
    gap: 16px;
    margin-top: 16px;
  }

  .aiers-mck-onlyhere__tags-row {
    gap: 12px;
  }

  .aiers-mck-onlyhere__tags li {
    padding: 12px 20px;
    font-size: 24px;
    letter-spacing: -0.96px;
  }

  .aiers-mck-onlyhere__cards {
    gap: 20px;
  }

  .aiers-mck-onlyhere__cards li {
    height: 200px;
    border-width: 2px;
    border-radius: 16px;
    padding: 0 210px 0 38px;
  }

  .aiers-mck-onlyhere__cards strong {
    font-size: 32px;
    letter-spacing: -1.28px;
  }

  .aiers-mck-onlyhere__cards span {
    margin-top: 4px;
    font-size: 26px;
  }

  .aiers-mck-onlyhere__cards img {
    right: 32px;
  }

  .aiers-mck-onlyhere__cards li:nth-child(1) img { width: 130px; height: 152px; }
  .aiers-mck-onlyhere__cards li:nth-child(2) img { width: 162px; height: 162px; }
  .aiers-mck-onlyhere__cards li:nth-child(3) img { width: 148px; height: 148px; }
  .aiers-mck-onlyhere__cards li:nth-child(4) img { width: 162px; height: 162px; }
}

.aiers-mck-coaching {
  padding: 60px 24px;
  background: #f5f5f8;
}

.aiers-mck-coaching__heading {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: center;
  margin-bottom: 32px;
}

.aiers-mck-coaching__eyebrow {
  font-size: 14px;
  font-weight: 700;
  color: #ff843b;
}

.aiers-mck-coaching__heading h2 {
  margin: 6px 0 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: #121212;
}

.aiers-mck-coaching__sub {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(18, 18, 18, 0.8);
}

.aiers-mck-coaching__options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 10px;
}

.aiers-mck-coaching__option {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 20px;
}

.aiers-mck-coaching__option--highlight {
  border: 2px solid #ff843b;
  box-shadow: 0 0 20px 0 rgba(255, 132, 59, 0.2);
}

.aiers-mck-coaching__badge {
  display: inline-flex;
  align-items: center;
  background: #002235;
  color: #fff;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.48px;
  margin-bottom: 6px;
}

.aiers-mck-coaching__badge--solid {
  background: #ff843b;
}

.aiers-mck-coaching__option h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #121212;
}

.aiers-mck-coaching__desc {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.26px;
  color: #444;
}

.aiers-mck-coaching__option hr {
  border: none;
  border-top: 1px solid #e6e6e6;
  margin: 12px 0;
}

.aiers-mck-coaching__checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}

.aiers-mck-coaching__checks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: -0.39px;
  color: rgba(18, 18, 18, 0.8);
}

.aiers-mck-coaching__checks svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.aiers-mck-coaching__price {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 20px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.48px;
  color: #002235;
}

.aiers-mck-coaching__price span {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
  color: #444;
}

.aiers-mck-coaching__steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.aiers-mck-coaching__steps li {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 20px 18px;
}

.aiers-mck-coaching__steps span {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #ff843b;
  margin-bottom: 4px;
}

.aiers-mck-coaching__steps strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.28px;
  color: #121212;
}

.aiers-mck-coaching__steps p {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.24px;
  color: rgba(18, 18, 18, 0.8);
  line-height: 1.4;
}

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

  .aiers-mck-coaching__heading {
    margin-bottom: 64px;
  }

  .aiers-mck-coaching__eyebrow {
    font-size: 28px;
  }

  .aiers-mck-coaching__heading h2 {
    margin: 12px 0 24px;
    font-size: 48px;
  }

  .aiers-mck-coaching__sub {
    font-size: 28px;
  }

  .aiers-mck-coaching__options {
    gap: 32px;
    margin-bottom: 32px;
    max-width: 654px;
    margin-left: auto;
    margin-right: auto;
  }

  .aiers-mck-coaching__option {
    border-width: 2px;
    border-radius: 16px;
    padding: 40px;
  }

  .aiers-mck-coaching__option--highlight {
    border-width: 4px;
    box-shadow: 0 0 40px 0 rgba(255, 132, 59, 0.2);
  }

  .aiers-mck-coaching__badge {
    padding: 8px 16px;
    font-size: 24px;
    letter-spacing: -0.96px;
    margin-bottom: 12px;
  }

  .aiers-mck-coaching__option h3 {
    font-size: 40px;
    letter-spacing: -0.8px;
  }

  .aiers-mck-coaching__desc {
    margin-top: 4px;
    font-size: 26px;
    letter-spacing: -0.52px;
  }

  .aiers-mck-coaching__option hr {
    margin: 24px 0;
    border-top-width: 2px;
  }

  .aiers-mck-coaching__checks {
    gap: 16px;
  }

  .aiers-mck-coaching__checks li {
    gap: 20px;
    font-size: 26px;
    letter-spacing: -0.78px;
  }

  .aiers-mck-coaching__checks svg {
    width: 32px;
    height: 32px;
  }

  .aiers-mck-coaching__price {
    gap: 12px;
    margin-top: 40px;
    font-size: 48px;
    letter-spacing: -0.96px;
  }

  .aiers-mck-coaching__price span {
    font-size: 32px;
    letter-spacing: -0.64px;
  }

  .aiers-mck-coaching__steps {
    gap: 20px;
    max-width: 654px;
    margin-left: auto;
    margin-right: auto;
  }

  .aiers-mck-coaching__steps li {
    padding: 40px 36px;
  }

  .aiers-mck-coaching__steps span {
    font-size: 32px;
    margin-bottom: 8px;
  }

  .aiers-mck-coaching__steps strong {
    font-size: 28px;
    letter-spacing: -0.56px;
  }

  .aiers-mck-coaching__steps p {
    margin-top: 4px;
    font-size: 24px;
    letter-spacing: -0.48px;
  }
}

.aiers-mck-ceo {
  padding: 60px 24px 20px;
  background: linear-gradient(to bottom, #121212, #00071b);
}

.aiers-mck-ceo__heading {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: center;
  margin-bottom: 32px;
}

.aiers-mck-ceo__eyebrow {
  font-size: 14px;
  font-weight: 700;
  color: #ff843b;
}

.aiers-mck-ceo__heading h2 {
  margin: 6px 0 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

.aiers-mck-ceo__sub {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.aiers-mck-ceo__sub strong {
  font-weight: 700;
  color: #fff;
}

.aiers-mck-ceo__slide {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 40px;
}

/* Fixed px heights (175px mobile / 350px desktop below) only matched the
   source image's real 900x506 ratio by coincidence at the 622px desktop
   width — at the 860-1279px tablet band, .aiers-mck-ceo__slide is ALSO
   capped to 622px (see the shared max-width rule above) but this height
   stayed fixed at 175px, force-cropping a 622x175 (3.55:1) window out of a
   1.78:1 image and cutting off most of the chart. aspect-ratio tracks the
   real image ratio at any container width instead of hard-coding one. */
.aiers-mck-ceo__slide img {
  display: block;
  width: 100%;
  aspect-ratio: 900 / 506;
  height: auto;
  object-fit: cover;
}

.aiers-mck-results__sample .aiers-mck-image-carousel > img,
.aiers-mck-ceo__slide.aiers-mck-image-carousel > img {
  height: 100%;
  aspect-ratio: auto;
}

.aiers-mck-ceo__lede {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.36px;
  color: #fff;
  margin-bottom: 16px;
}

.aiers-mck-ceo__lede span {
  color: #ff843b;
}

.aiers-mck-ceo__points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiers-mck-ceo__points li {
  background: rgba(42, 42, 42, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 20px 16px;
}

.aiers-mck-ceo__point-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.aiers-mck-ceo__point-head svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.aiers-mck-ceo__point-head strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #fff;
}

.aiers-mck-ceo__points p {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.28px;
  color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 1280px) {
  .aiers-mck-ceo {
    padding: 120px 48px 40px;
  }

  .aiers-mck-ceo__heading {
    margin-bottom: 64px;
  }

  .aiers-mck-ceo__eyebrow {
    font-size: 28px;
  }

  .aiers-mck-ceo__heading h2 {
    margin: 12px 0 24px;
    font-size: 48px;
  }

  .aiers-mck-ceo__sub {
    font-size: 28px;
  }

  .aiers-mck-ceo__slide {
    border-radius: 16px;
    max-width: 622px;
    margin: 0 auto 80px;
  }


  .aiers-mck-ceo__body {
    max-width: 622px;
    margin: 0 auto;
  }

  .aiers-mck-ceo__lede {
    font-size: 36px;
    letter-spacing: -0.72px;
    margin-bottom: 32px;
  }

  .aiers-mck-ceo__points {
    gap: 20px;
  }

  .aiers-mck-ceo__points li {
    border-width: 2px;
    padding: 40px 32px;
  }

  .aiers-mck-ceo__point-head {
    gap: 16px;
    margin-bottom: 12px;
  }

  .aiers-mck-ceo__point-head svg {
    width: 36px;
    height: 36px;
  }

  .aiers-mck-ceo__point-head strong {
    font-size: 30px;
    letter-spacing: -0.6px;
  }

  .aiers-mck-ceo__points p {
    font-size: 28px;
    letter-spacing: -0.56px;
  }
}

.aiers-mck-incomparable {
  position: relative;
  overflow: hidden;
  background: #00071b;
  padding: 42px 24px;
  text-align: center;
}

/* Figma (node 3099:22667/3099:22668) uses a real flame photo here, blurred
   and at 20% opacity — not a radial-gradient approximation. The gradient
   stood in as a guess at some point and never got swapped for the actual
   asset. */
.aiers-mck-incomparable__fire {
  position: absolute;
  left: 50%;
  top: -1px;
  transform: translateX(-50%);
  width: 1095px;
  height: 274px;
  object-fit: cover;
  opacity: .2;
  filter: blur(5px);
  pointer-events: none;
}

.aiers-mck-incomparable__title {
  position: relative;
  font-size: 60px;
  font-weight: 700;
  line-height: 1.45;
  background: linear-gradient(to right, #ff6406, #ff9d61);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.aiers-mck-incomparable__sub {
  position: relative;
  margin-top: 7px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.32px;
  color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 1280px) {
  .aiers-mck-incomparable {
    padding: 84px 48px;
  }

  .aiers-mck-incomparable__fire {
    width: 2190px;
    height: 548px;
    top: -3px;
    filter: blur(10px);
  }

  .aiers-mck-incomparable__title {
    font-size: 120px;
  }

  .aiers-mck-incomparable__sub {
    margin-top: 14px;
    font-size: 32px;
    letter-spacing: -0.64px;
  }
}

.aiers-mck-compare {
  padding: 60px 16px;
  background: #fff;
}

.aiers-mck-compare__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  margin-bottom: 32px;
}

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

.aiers-mck-compare__heading p {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(18, 18, 18, 0.8);
}

.aiers-mck-compare__heading strong {
  font-weight: 700;
}

/* Figma (node 3099:22679) has the "이 강의" card taller AND its top offset
   smaller than "타사 강의" — i.e. it overhangs on BOTH ends, not just the
   top. Default flex align-items:stretch was forcing both columns to the
   same stretched height, which made their bottoms land flush and hid the
   bottom overhang entirely (only the top offset survived, from
   .aiers-mck-compare__col--old's margin-top). flex-start lets each column
   keep its own natural height so both ends overhang correctly. */
.aiers-mck-compare__cards {
  display: flex;
  align-items: flex-start;
  max-width: 343px;
  margin: 0 auto;
}

.aiers-mck-compare__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 18px 13.5px;
  min-width: 0;
  overflow: hidden;
}

.aiers-mck-compare__col--old {
  flex: 0 0 162.474px;
  margin-top: 21.37px;
  min-height: 392px;
  background: #f1f1f1;
  border-radius: 7.2px 0 0 7.2px;
}

.aiers-mck-compare__col--new {
  flex: 0 0 181px;
  min-height: 434px;
  background: #002235;
  border-radius: 8px;
  position: relative;
  z-index: 1;
  padding: 20px 15.5px;
  gap: 16px;
}

.aiers-mck-compare__badge {
  display: inline-flex;
  align-items: center;
  background: #86898d;
  color: #fff;
  border-radius: 999px;
  padding: 5.4px 9px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.aiers-mck-compare__badge--solid {
  background: #ff843b;
  padding: 6px 10px;
  font-size: 13px;
}

.aiers-mck-compare__rows {
  display: flex;
  flex-direction: column;
  gap: 7.2px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.aiers-mck-compare__col--new .aiers-mck-compare__rows {
  gap: 8px;
}

.aiers-mck-compare__rows li {
  display: flex;
  align-items: center;
  gap: 7.2px;
  padding: 0 3.6px 7.2px;
  border-bottom: 0.9px solid #e0e0e0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.48px;
  color: #666;
  white-space: nowrap;
}

.aiers-mck-compare__col--new .aiers-mck-compare__rows li {
  gap: 8px;
  padding: 0 4px 8px;
  border-bottom-color: rgba(255, 255, 255, 0.15);
  border-bottom-width: 1px;
  font-size: 13px;
  letter-spacing: -0.52px;
  color: #fff;
}

.aiers-mck-compare__rows li:last-child {
  border-bottom: none;
}

.aiers-mck-compare__row--highlight {
  color: #ff843b !important;
  font-weight: 700 !important;
}

.aiers-mck-compare__rows svg {
  flex: none;
  width: 15px;
  height: 15px;
}

.aiers-mck-compare__col--new .aiers-mck-compare__rows svg {
  width: 16.25px;
  height: 16.25px;
}

.aiers-mck-compare__price {
  margin-top: auto;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.72px;
  color: #666;
  text-align: center;
}

.aiers-mck-compare__col--new .aiers-mck-compare__price {
  color: #ff843b;
}

.aiers-mck-compare__col--new .aiers-mck-compare__price strong {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.96px;
}

.aiers-mck-compare__col--new .aiers-mck-compare__price span {
  font-size: 16px;
}

@media (min-width: 1280px) {
  .aiers-mck-compare {
    padding: 120px 32px;
  }

  .aiers-mck-compare__heading {
    gap: 24px;
    margin-bottom: 64px;
  }

  .aiers-mck-compare__heading h2 {
    font-size: 48px;
  }

  .aiers-mck-compare__heading p {
    font-size: 28px;
  }

  .aiers-mck-compare__cards {
    max-width: 686px;
  }

  .aiers-mck-compare__col {
    gap: 36px;
    padding: 36px 27px;
  }

  .aiers-mck-compare__col--old {
    flex-basis: 324.947px;
    margin-top: 42.74px;
    min-height: 784px;
    border-radius: 14.4px 0 0 14.4px;
  }

  .aiers-mck-compare__col--new {
    flex-basis: 362px;
    min-height: 868px;
    border-radius: 16px;
    padding: 40px 31px;
    gap: 32px;
  }

  .aiers-mck-compare__badge {
    padding: 10.8px 18px;
    font-size: 24px;
  }

  .aiers-mck-compare__badge--solid {
    padding: 12px 20px;
    font-size: 26px;
  }

  .aiers-mck-compare__rows {
    gap: 14.4px;
  }

  .aiers-mck-compare__col--new .aiers-mck-compare__rows {
    gap: 16px;
  }

  .aiers-mck-compare__rows li {
    gap: 14.4px;
    padding: 0 7.2px 14.4px;
    border-bottom-width: 1.8px;
    font-size: 24px;
    letter-spacing: -0.96px;
  }

  .aiers-mck-compare__col--new .aiers-mck-compare__rows li {
    gap: 16px;
    padding: 0 8px 16px;
    border-bottom-width: 2px;
    font-size: 26px;
    letter-spacing: -1.04px;
  }

  .aiers-mck-compare__rows svg {
    width: 30px;
    height: 30px;
  }

  .aiers-mck-compare__col--new .aiers-mck-compare__rows svg {
    width: 32.5px;
    height: 32.5px;
  }

  .aiers-mck-compare__price {
    font-size: 36px;
    letter-spacing: -1.44px;
  }

  .aiers-mck-compare__col--new .aiers-mck-compare__price strong {
    font-size: 48px;
    letter-spacing: -1.92px;
  }

  .aiers-mck-compare__col--new .aiers-mck-compare__price span {
    font-size: 32px;
  }
}

.aiers-mck-journey {
  padding: 60px 24px;
  background: #fafafa;
  text-align: center;
}

.aiers-mck-journey h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.24px;
  color: #121212;
  margin-bottom: 40px;
}

.aiers-mck-journey__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 311px;
  margin: 0 auto;
}

.aiers-mck-journey__card {
  width: 100%;
  text-align: left;
  background: #f1f1f1;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
}

.aiers-mck-journey__card--after {
  background: rgba(255, 132, 59, 0.05);
  border: 1px solid #ff843b;
}

.aiers-mck-journey__badge {
  display: inline-flex;
  background: rgba(255, 132, 59, 0.05);
  border: 0.858px solid #ff843b;
  border-radius: 4px;
  padding: 3.43px 10.29px;
  font-size: 14px;
  font-weight: 700;
  color: #ff843b;
  margin-bottom: 19px;
}

.aiers-mck-journey__badge--solid {
  background: #ff843b;
  color: #fff;
}

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

.aiers-mck-journey__card li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.39px;
  color: rgba(18, 18, 18, 0.8);
}

.aiers-mck-journey__card--after li {
  color: #121212;
  font-weight: 500;
}

.aiers-mck-journey__card--after li strong {
  font-weight: 700;
}

.aiers-mck-journey__card li svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.aiers-mck-journey__arrow {
  width: 42px;
  height: 29px;
}

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

  .aiers-mck-journey h2 {
    font-size: 48px;
    letter-spacing: -0.48px;
    margin-bottom: 80px;
  }

  .aiers-mck-journey__stack {
    gap: 40px;
    max-width: 622px;
  }

  .aiers-mck-journey__card {
    border-width: 2px;
    border-radius: 16px;
    padding: 40px;
  }

  .aiers-mck-journey__badge {
    border-width: 1.715px;
    border-radius: 8px;
    padding: 6.86px 20.58px;
    font-size: 28px;
    margin-bottom: 38px;
  }

  .aiers-mck-journey__card ul {
    gap: 16px;
  }

  .aiers-mck-journey__card li {
    gap: 20px;
    font-size: 26px;
    letter-spacing: -0.78px;
  }

  .aiers-mck-journey__card li svg {
    width: 32px;
    height: 32px;
  }

  .aiers-mck-journey__arrow {
    width: 84px;
    height: 58px;
  }
}

.aiers-mck-fit {
  padding: 20px 24px 60px;
  background: #fafafa;
  text-align: center;
}

.aiers-mck-fit h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.24px;
  color: #121212;
  margin-bottom: 40px;
}

.aiers-mck-fit__stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 311px;
  margin: 0 auto;
}

.aiers-mck-fit__card {
  text-align: left;
  border-radius: 8px;
  padding: 19px;
  box-sizing: border-box;
}

.aiers-mck-fit__card--yes {
  background: rgba(255, 132, 59, 0.05);
  border: 1px solid #ff843b;
}

.aiers-mck-fit__card--no {
  background: #f1f1f1;
  border: 1px solid #e6e6e6;
  padding: 24px 20px;
}

.aiers-mck-fit__lede {
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #ff843b;
}

.aiers-mck-fit__card--no .aiers-mck-fit__lede {
  color: #121212;
}

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

.aiers-mck-fit__card li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.39px;
  color: #121212;
}

/* word-break:keep-all (set page-wide) only stops breaks between CJK
   characters — it doesn't stop them at a middle dot (·), which Unicode's
   line-breaking rules treat as a breakable separator regardless. That's
   what was splitting phrases like "주니어·일잘러 지망생" mid-word.
   nowrap keeps each emphasized phrase as one unbreakable unit; it still
   wraps normally as a whole at the flex line boundary. */
.aiers-mck-fit__card li strong {
  font-weight: 700;
  white-space: nowrap;
}

.aiers-mck-fit__card li svg {
  flex: none;
  width: 16.25px;
  height: 16.25px;
}

@media (min-width: 1280px) {
  .aiers-mck-fit {
    padding: 40px 48px 120px;
  }

  .aiers-mck-fit h2 {
    font-size: 48px;
    letter-spacing: -0.48px;
    margin-bottom: 80px;
  }

  .aiers-mck-fit__stack {
    gap: 32px;
    max-width: 622px;
  }

  .aiers-mck-fit__card {
    border-radius: 16px;
    padding: 38px;
    border-width: 2px;
  }

  .aiers-mck-fit__card--no {
    padding: 48px 40px;
  }

  .aiers-mck-fit__lede {
    font-size: 36px;
    margin-bottom: 40px;
  }

  .aiers-mck-fit__card ul {
    gap: 16px;
  }

  .aiers-mck-fit__card li {
    gap: 20px;
    font-size: 26px;
    letter-spacing: -0.78px;
  }

  .aiers-mck-fit__card li svg {
    width: 32.5px;
    height: 32.5px;
  }
}

.aiers-mck-faq {
  padding: 88px 16px 104px;
  background: #fff;
}

.aiers-mck-faq h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: #000;
  text-align: center;
  margin-bottom: 40px;
}

.aiers-mck-faq__list {
  max-width: 327px;
  margin: 0 auto;
}

.aiers-mck-faq__item {
  border-top: 1px solid #e6e6e6;
}

.aiers-mck-faq__item h3 {
  margin: 0;
}

.aiers-mck-faq__item:has(.aiers-mck-faq__trigger[aria-expanded="true"]) {
  background: #fafafa;
}

.aiers-mck-faq__trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.aiers-mck-faq__q {
  flex: none;
  font-size: 14px;
  font-weight: 700;
  color: #ff843b;
}

.aiers-mck-faq__question {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
}

.aiers-mck-faq__chevron {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.aiers-mck-faq__trigger[aria-expanded="true"] .aiers-mck-faq__chevron {
  transform: rotate(180deg);
}

.aiers-mck-faq__panel {
  padding: 0 16px 12px 42px;
}

.aiers-mck-faq__panel p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #737373;
}

.aiers-mck-faq__pending {
  font-style: italic;
  color: #b3b3b3;
}

@media (min-width: 1280px) {
  .aiers-mck-faq {
    padding: 176px 32px 208px;
  }

  .aiers-mck-faq h2 {
    font-size: 48px;
    margin-bottom: 80px;
  }

  .aiers-mck-faq__list {
    max-width: 654px;
  }

  .aiers-mck-faq__item {
    border-top-width: 2px;
  }

  .aiers-mck-faq__trigger {
    gap: 24px;
    padding: 24px 32px;
  }

  .aiers-mck-faq__q {
    font-size: 28px;
  }

  .aiers-mck-faq__question {
    font-size: 28px;
  }

  .aiers-mck-faq__chevron {
    width: 32px;
    height: 32px;
  }

  .aiers-mck-faq__panel {
    padding: 0 32px 24px 84px;
  }

  .aiers-mck-faq__panel p {
    font-size: 24px;
  }
}

.aiers-mck-final {
  position: relative;
  overflow: hidden;
  background: #121212;
  padding: 70px 16px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.aiers-mck-final__glow {
  position: absolute;
  left: 50%;
  bottom: -60px;
  transform: translateX(-50%);
  width: 374px;
  height: 290px;
  background: radial-gradient(ellipse at center, rgba(26, 26, 26, 1) 0%, rgba(41, 41, 41, 0) 100%);
  pointer-events: none;
}

.aiers-mck-final__heading {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aiers-mck-final__eyebrow {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.8px;
  color: #ff843b;
}

.aiers-mck-final__heading h2 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -1.28px;
  color: #fff;
}

.aiers-mck-final__timer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16.5px;
  width: 100%;
  max-width: 240px;
}

.aiers-mck-final__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.aiers-mck-final__unit {
  display: flex;
  gap: 3.2px;
}

.aiers-mck-final__unit i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  width: 50.85px;
  height: 70.3px;
  border-radius: 8px;
  background: linear-gradient(to bottom, #444, #000);
  font-family: "Inter", "Pretendard", sans-serif;
  font-weight: 600;
  font-size: 45px;
  color: #ff843b;
}

.aiers-mck-final__colon {
  font-family: "Inter", "Pretendard", sans-serif;
  font-weight: 600;
  font-size: 32px;
  color: #ff843b;
}

.aiers-mck-final__labels {
  display: flex;
  justify-content: space-between;
  font-family: "Inter", "Pretendard", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

.aiers-mck-final__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  padding: 14px 20px;
  border-radius: 8px;
  background: #ff843b;
  color: #121212;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.225px;
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 1280px) {
  .aiers-mck-final {
    padding: 140px 48px 80px;
    gap: 80px;
  }

  .aiers-mck-final__glow {
    width: 748px;
    height: 580px;
    bottom: -120px;
  }

  .aiers-mck-final__heading {
    gap: 16px;
  }

  .aiers-mck-final__eyebrow {
    font-size: 40px;
    letter-spacing: -1.6px;
  }

  .aiers-mck-final__heading h2 {
    font-size: 64px;
    letter-spacing: -2.56px;
  }

  .aiers-mck-final__timer {
    gap: 33px;
    max-width: 480px;
  }

  .aiers-mck-final__row {
    gap: 24px;
  }

  .aiers-mck-final__unit {
    gap: 6.5px;
  }

  .aiers-mck-final__unit i {
    width: 101.7px;
    height: 140.6px;
    border-radius: 16px;
    font-size: 90px;
  }

  .aiers-mck-final__colon {
    font-size: 64px;
  }

  .aiers-mck-final__labels {
    font-size: 27.5px;
  }

  .aiers-mck-final__cta {
    max-width: 640px;
    padding: 28px 40px;
    border-radius: 16px;
    font-size: 36px;
    letter-spacing: -0.45px;
  }
}

/* Tablet-band (860-1279px) width caps for sections whose base rule
   already sets a narrower max-width (e.g. mobile-authored lists/cards).
   This MUST come after every component's own rules in source order —
   same-specificity CSS lets whichever rule is declared later win, and
   this block used to sit near the top of the file, so many of its caps
   were silently overridden by each component's own (later) base rule.
   Scoped to max-width:1279px so it never fights the real 1280px+
   desktop rules, regardless of where either block lives in the file. */
@media (min-width: 860px) and (max-width: 1279px) {
  .aiers-mck-credits__list {
    max-width: 498px;
    margin-left: auto;
    margin-right: auto;
  }

  .aiers-mck-webinar__card {
    max-width: 654px;
    margin-left: auto;
    margin-right: auto;
  }

  .aiers-mck-allinone__card {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .aiers-mck-bio__card {
    max-width: 654px;
    margin-left: auto;
    margin-right: auto;
  }

  .aiers-mck-bio__logos {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
  }

  .aiers-mck-reviews__list {
    max-width: 623px;
    margin-left: auto;
    margin-right: auto;
  }

  .aiers-mck-curriculum__list {
    max-width: 622px;
    margin-left: auto;
    margin-right: auto;
  }

  .aiers-mck-onlyhere__heading,
  .aiers-mck-onlyhere__body {
    max-width: 622px;
    margin-left: auto;
    margin-right: auto;
  }

  .aiers-mck-coaching__heading,
  .aiers-mck-coaching__options,
  .aiers-mck-coaching__steps {
    max-width: 654px;
    margin-left: auto;
    margin-right: auto;
  }

  .aiers-mck-ceo__heading,
  .aiers-mck-ceo__slide,
  .aiers-mck-ceo__body {
    max-width: 622px;
    margin-left: auto;
    margin-right: auto;
  }

  /* .aiers-mck-week and .aiers-mck-results are both flex-direction:column,
     and a flex item with an auto cross-axis margin does NOT stretch to
     fill the parent by spec — it shrinks to its own content width instead.
     Without width:100% here, adding margin-left/right:auto alone shrank
     these down to their content's natural width (e.g. the heading
     shrinking to its longest text line) instead of centering a
     full-width, capped block. */
  .aiers-mck-week__heading,
  .aiers-mck-week__chapters,
  .aiers-mck-results__sample {
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .aiers-mck-compare__cards {
    max-width: 686px;
  }

  .aiers-mck-compare__heading {
    max-width: 686px;
    margin-left: auto;
    margin-right: auto;
  }

  .aiers-mck-journey__stack {
    max-width: 622px;
  }

  .aiers-mck-fit__stack {
    max-width: 622px;
  }

  .aiers-mck-faq__list {
    max-width: 654px;
    margin-left: auto;
    margin-right: auto;
  }

  .aiers-mck-final__timer {
    max-width: 480px;
  }

  .aiers-mck-final__cta {
    max-width: 640px;
  }
}

/* Fixed bottom CTA — ported from aiers-chatgpt's fixed CTA (desktop floating
   pill / mobile bottom strip), recolored to this page's key accent (#ff843b)
   and copy swapped to this page's existing "슈퍼 얼리버드" wording. The timer
   reuses the shared data-countdown/-kr elements already driven by
   countdown.js's rolling 3-day cycle fallback (countdownEndAt is still a
   TODO placeholder, so every countdown on this page already rolls on the
   same 3-day cycle). */
.aiers-mck-fixed-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  box-sizing: border-box;
}

.aiers-mck-fixed-cta * {
  box-sizing: border-box;
}

.aiers-mck-fixed-cta--desktop {
  display: none;
}

.aiers-mck-fixed-cta--mobile {
  display: block;
  padding: 0;
  background: #fff;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
}

.aiers-mck-fixed-cta--mobile .aiers-mck-fixed-cta__strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 16px;
  background: #ff843b;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.aiers-mck-fixed-cta--mobile .aiers-mck-fixed-cta__strip b {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.aiers-mck-fixed-cta--mobile .aiers-mck-fixed-cta__body {
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.aiers-mck-fixed-cta--mobile .aiers-mck-fixed-cta__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  border-radius: 8px;
  background: #ff843b;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}

.aiers-mck-page {
  padding-bottom: 118px;
}

@media (min-width: 1280px) {
  .aiers-mck-fixed-cta--mobile {
    display: none;
  }

  .aiers-mck-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);
    box-shadow: none;
  }

  .aiers-mck-fixed-cta--desktop .aiers-mck-fixed-cta__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
    text-align: left;
  }

  .aiers-mck-fixed-cta--desktop .aiers-mck-fixed-cta__copy p {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
  }

  .aiers-mck-fixed-cta--desktop .aiers-mck-fixed-cta__copy p span,
  .aiers-mck-fixed-cta--desktop .aiers-mck-fixed-cta__copy p strong {
    color: #ff843b;
    font-weight: 700;
  }

  .aiers-mck-fixed-cta--desktop .aiers-mck-fixed-cta__actions {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .aiers-mck-fixed-cta--desktop .aiers-mck-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-mck-fixed-cta--desktop .aiers-mck-fixed-cta__heart svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
  }

  .aiers-mck-fixed-cta--desktop .aiers-mck-fixed-cta__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    height: 56px;
    border-radius: 8px;
    background: #ff843b;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
  }

  .aiers-mck-page {
    padding-bottom: 130px;
  }
}

/* Apply sheet — bottom sheet on mobile, centered modal on desktop. Opened by
   every order CTA on the page ([data-apply-trigger]); see apply-sheet.js. */
.aiers-mck-apply-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
}

.aiers-mck-apply-sheet * {
  box-sizing: border-box;
}

.aiers-mck-apply-sheet[hidden] {
  display: none;
}

.aiers-mck-apply-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 19, .5);
}

.aiers-mck-apply-sheet__panel {
  position: relative;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 12px 20px 20px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  animation: aiers-mck-apply-sheet-up .25s ease-out;
}

@keyframes aiers-mck-apply-sheet-up {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.aiers-mck-apply-sheet__handle {
  width: 36px;
  height: 4px;
  margin: 0 auto 12px;
  background: #e6e6e6;
  border-radius: 2px;
}

.aiers-mck-apply-sheet__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #737373;
  background: none;
  border: 0;
  cursor: pointer;
}

.aiers-mck-apply-sheet__close svg {
  width: 20px;
  height: 20px;
}

.aiers-mck-apply-sheet__title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.4px;
}

.aiers-mck-apply-sheet__subtitle {
  margin: 0 0 20px;
  color: #5e5d59;
  font-size: 14px;
}

.aiers-mck-apply-sheet__base {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: #fafafa;
  border-radius: 12px;
}

.aiers-mck-apply-sheet__base-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aiers-mck-apply-sheet__base-tag {
  padding: 3px 8px;
  background: #121212;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 100px;
}

.aiers-mck-apply-sheet__base-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
}

.aiers-mck-apply-sheet__base-price {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
}

.aiers-mck-apply-sheet__base-original {
  color: #a3a3a3;
  font-size: 13px;
  text-decoration: line-through;
}

.aiers-mck-apply-sheet__base-badge {
  color: #ff843b;
  font-size: 13px;
  font-weight: 700;
}

.aiers-mck-apply-sheet__base-final {
  font-size: 18px;
  font-weight: 800;
  color: #141413;
}

.aiers-mck-apply-sheet__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.aiers-mck-apply-sheet__option-box {
  display: block;
  padding: 14px 16px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.aiers-mck-apply-sheet__option-box.is-checked {
  background: #fff6f0;
  border-color: #ff843b;
}

.aiers-mck-apply-sheet__option-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aiers-mck-apply-sheet__option-row input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #ff843b;
}

.aiers-mck-apply-sheet__option-name {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
}

.aiers-mck-apply-sheet__option-price {
  font-size: 15px;
  font-weight: 700;
  color: #ff843b;
}

.aiers-mck-apply-sheet__option-desc {
  display: block;
  margin-top: 8px;
  margin-left: 30px;
  color: #5e5d59;
  font-size: 13px;
  line-height: 1.5;
}

.aiers-mck-apply-sheet__option-period {
  display: block;
  margin-top: 4px;
  margin-left: 30px;
  color: #a3a3a3;
  font-size: 12px;
}

.aiers-mck-apply-sheet__footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e6e6e6;
}

.aiers-mck-apply-sheet__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
}

.aiers-mck-apply-sheet__total strong {
  font-size: 20px;
  font-weight: 800;
  color: #ff843b;
}

.aiers-mck-apply-sheet__confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  background: #ff843b;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
}

@media (min-width: 1280px) {
  .aiers-mck-apply-sheet {
    align-items: center;
  }

  .aiers-mck-apply-sheet__panel {
    width: 100%;
    max-width: 440px;
    padding: 28px;
    border-radius: 20px;
    animation: aiers-mck-apply-sheet-fade .2s ease-out;
  }

  .aiers-mck-apply-sheet__handle {
    display: none;
  }

  @keyframes aiers-mck-apply-sheet-fade {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}