/* ==========================================================================
   aiers-acting — 인물이 연기하고 말하는 상업용 AI 필름
   Shell: hero, tabs, 750/80/400 two-column, sticky apply card, fixed CTA.
   Scoped under .aiers-acting-page; the /lpx host renders this inside a
   Shadow DOM, so there is no html/body selector anywhere in this file.
   Desktop grid mirrors the Figma stage (157:11741): 750px body + 80px gap
   + 400px aside, content boxed at 654px = the comp's own content width.
   ========================================================================== */

.aiers-acting-page {
  --acting-ink: #17191b;
  --acting-ink-soft: #4a4f52;
  --acting-muted: #7b8184;
  --acting-key: #17a868;
  --acting-key-strong: #0f7a4c;
  --acting-accent: #37cf8c;
  --acting-line: #e8ebe9;
  --acting-surface: #fff;
  margin: 0;
  color: var(--acting-ink);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.aiers-acting-page *,
.aiers-acting-page *::before,
.aiers-acting-page *::after { box-sizing: border-box; }

.aiers-acting-page img,
.aiers-acting-page video { display: block; max-width: 100%; }

/* ---------- hero -------------------------------------------------------
   Desktop 157:11745 (1920x600) and mobile 143:7883 (375x540) are each a fixed
   art canvas. `--u` is one canvas pixel expressed against the hero's own width,
   so every number below is literally the comp's coordinate and the whole thing
   scales without a single hand-tuned value.

   `transform: scale(calc(100cqw / 1920))` cannot be used for this: dividing a
   length by a number yields a length, and scale() needs a unitless number, so
   that declaration is dropped and the canvas overflows at full size.

   Measured from the comp (desktop / mobile), copy-relative tops:
     copy block   x 320 y 70 w 563   /  x 24 y 27 w 343
     badge        h 46, 20px/30      /  h 26, 13px/18
     eyebrow      top 62, 20px/30    /  top 36, 14px/20
     headline     top 108, 60px/75   /  top 64, 30px/38
     description  top 365, 20px/30   /  top 190, 12px/18
   -------------------------------------------------------------------------- */

.aiers-acting-hero {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 375 / 540;
  overflow: hidden;
  /* 1660:2186 · the frame's own fill */
  background: #17191b;
}

.aiers-acting-hero__stage {
  --u: calc(100cqw / 375);
  position: absolute;
  inset: 0;
}

/* mobile: the still sits under the copy (143:7884 · 0,275 375x266) */
.aiers-acting-hero__art {
  position: absolute;
  top: calc(275 * var(--u));
  left: 0;
  width: calc(375 * var(--u));
  height: calc(266 * var(--u));
  object-fit: cover;
  object-position: 60% 45%;
}

/* 1660:1162 · the same slab as desktop, rotated 90 so it runs top-to-bottom:
   375x371 from y=0, solid #010818 for the first 73.971% (275 of 371) and then
   a 70px fade out. The art starts at y=275, so the scrim is still fully opaque
   at the art's top edge and reveals it gradually — the old 120px fade started
   at 235 and was only ~67% opaque where the art began, which is what made the
   art pop in as a visible band instead of blending. */
.aiers-acting-hero__scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(375 * var(--u));
  height: calc(371 * var(--u));
  background: linear-gradient(to bottom, #010818 0%, #010818 73.971%, rgba(11, 2, 22, 0) 92.779%);
}

/* Left edge is page space, not canvas space, so it lands on the body column's
   left edge at every width. Everything else in the copy stays canvas-scaled so
   the comp's gaps and line breaks are preserved. */
.aiers-acting-hero__copy {
  position: absolute;
  top: calc(27 * var(--u));
  left: 24px;
  width: calc(343 * var(--u));
}

/* The file's shared `pc` badge component — same one aiers-brandfilm ships from
   this Figma: a 4px-radius slab with a 1px accent border, a gradient that fades
   out to the right, a blurred backdrop and two inset gloss highlights. Not a
   flat pill. Padding 4/8 and 13px/18 text here match this node's own measured
   box (h 26, text h 18) exactly, which is what identifies it as that component.
   Colours are this course's green in place of brandfilm's purple. */
.aiers-acting-hero__badge {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  height: calc(26 * var(--u));
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border: calc(1 * var(--u)) solid rgba(23, 168, 104, .8);
  border-radius: calc(4 * var(--u));
  background: linear-gradient(to left, rgba(23, 168, 104, .4), rgba(0, 0, 0, 0));
  backdrop-filter: blur(calc(20 * var(--u)));
  box-shadow:
    0 calc(8 * var(--u)) calc(30 * var(--u)) rgba(122, 255, 196, .12),
    inset 0 calc(-2 * var(--u)) calc(12 * var(--u)) rgba(175, 255, 214, .2),
    inset 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(255, 255, 255, .7);
  color: #d6f5e6;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  line-height: calc(18 * var(--u));
  letter-spacing: -.01em;
  white-space: nowrap;
}

.aiers-acting-hero__eyebrow {
  position: absolute;
  top: calc(36 * var(--u));
  left: 0;
  margin: 0;
  color: #dfe6e2;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: calc(20 * var(--u));
}

.aiers-acting-hero h1 {
  position: absolute;
  top: calc(64 * var(--u));
  left: 0;
  margin: 0;
  width: calc(267 * var(--u));
  color: #fff;
  font-size: calc(30 * var(--u));
  font-weight: 800;
  line-height: calc(38 * var(--u));
  letter-spacing: -.03em;
  word-break: keep-all;
}

.aiers-acting-hero h1 em { color: var(--acting-accent); font-style: normal; }

.aiers-acting-hero__description {
  position: absolute;
  top: calc(190 * var(--u));
  left: 0;
  margin: 0;
  width: calc(343 * var(--u));
  color: #c8d2cd;
  font-size: calc(12 * var(--u));
  font-weight: 500;
  line-height: calc(18 * var(--u));
  word-break: keep-all;
}

@media (min-width: 1280px) {
  .aiers-acting-hero { aspect-ratio: 1920 / 600; }

  .aiers-acting-hero__stage { --u: calc(100cqw / 1920); }

  /* 157:11746 · x 848 y -3 1072x603 */
  .aiers-acting-hero__art {
    top: calc(-3 * var(--u));
    left: calc(848 * var(--u));
    width: calc(1072 * var(--u));
    height: calc(603 * var(--u));
    object-position: 50% 50%;
  }

  /* 1660:2188 · a 1220x600 slab from the left edge, not a full-width wash.
     Figma writes it as `to left, rgba(11,2,22,0) 7.221%, #010818 26.029%`,
     which flipped is: solid #010818 for the first 73.971% (902 of 1220),
     then a 231px fade out. The copy therefore sits on a flat slab, not on a
     wash that lets the art bleed through from halfway — that difference is
     what made the art read far brighter than the comp. */
  .aiers-acting-hero__scrim {
    top: 0;
    left: 0;
    width: calc(1220 * var(--u));
    height: calc(600 * var(--u));
    background: linear-gradient(to right, #010818 0%, #010818 73.971%, rgba(11, 2, 22, 0) 92.779%);
  }

  /* Same rule the detail shell uses — min(1230px, 100% - 50px) centred — so the
     headline's left edge is the body column's left edge, not the comp's 320px
     canvas offset. */
  .aiers-acting-hero__copy {
    top: calc(70 * var(--u));
    left: max(25px, calc((100% - 1230px) / 2));
    width: calc(563 * var(--u));
  }

  /* 157:11759 · h 46 with its text at x16 y8 h30 — the same component at the
     desktop canvas's scale: 8/16 padding, 20px/30 text. */
  .aiers-acting-hero__badge {
    height: calc(46 * var(--u));
    padding: calc(8 * var(--u)) calc(16 * var(--u));
    font-size: calc(20 * var(--u));
    line-height: calc(30 * var(--u));
  }

  .aiers-acting-hero__eyebrow {
    top: calc(62 * var(--u));
    font-size: calc(20 * var(--u));
    line-height: calc(30 * var(--u));
  }

  .aiers-acting-hero h1 {
    top: calc(108 * var(--u));
    width: calc(563 * var(--u));
    font-size: calc(60 * var(--u));
    line-height: calc(75 * var(--u));
  }

  /* The comp's box is 511x60 — two lines at a 30px pitch. 20px overflows that
     box to three lines, so the face size is the one value here derived from
     the box rather than read off it. */
  .aiers-acting-hero__description {
    top: calc(365 * var(--u));
    width: calc(511 * var(--u));
    font-size: calc(17 * var(--u));
    line-height: calc(30 * var(--u));
  }
}

/* ---------- detail shell ------------------------------------------------- */

.aiers-acting-detail { background: var(--acting-surface); }

/* Every body section is a 750-wide canvas that scales off its own container,
   so the shell must not add a gutter: on a phone the comp is 375 edge to edge
   (--k lands on exactly 0.5) and the dark sections bleed to the screen edges
   the way they do in the comp. Capping at 750 stops the canvas growing past
   1:1 on tablet and laptop — above 1280 the grid below pins the same 750.
   Components that are NOT canvas sections (the inline apply card) carry their
   own inset instead. */
.aiers-acting-detail__shell {
  width: min(750px, 100%);
  margin-inline: auto;
  padding-block: 0 96px;
}

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

/* ---------- tabs (1660:2295 · 750x48 / 1660:1254 · 375x41) ----------------
   Solid white, five equal tracks, and NO rule under the bar itself — the only
   edge the comp draws is the active tab's own 2px underline. That underline is
   an inset shadow rather than a border because the comp keeps the tab on a
   flat 48 (and 41 on the phone) with the stroke on top of it, so a real border
   would push the bar 2px taller. */

.aiers-acting-page .aiers-acting-tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #fff;
}

.aiers-acting-page .aiers-acting-tabs__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 41px;
  padding: 10px 8px;
  border: 0;
  appearance: none;
  background: none;
  color: #5e5d59;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 20.8px;
  letter-spacing: -.234px;
  white-space: nowrap;
  cursor: pointer;
}

/* 1660:2296 · the current tab reads in 기서 green, not in ink. */
.aiers-acting-page .aiers-acting-tabs__item.is-active {
  box-shadow: inset 0 -2px 0 #006664;
  color: #006664;
}

/* The shell caps the column at 750 from this width up, which is exactly the
   desktop comp's tab bar, so the 48/16 form starts here rather than at the
   two-column switch. */
@media (min-width: 750px) {
  .aiers-acting-page .aiers-acting-tabs__item {
    height: 48px;
    padding-inline: 20px;
    font-size: 16px;
  }

  .aiers-acting-page [id="about"],
  .aiers-acting-page [id="curriculum"],
  .aiers-acting-page [id="results"],
  .aiers-acting-page [id="instructor"],
  .aiers-acting-page [id="faq"] { scroll-margin-top: 48px; }
}

/* The bar is sticky at the top of the column, so a tab target has to stop
   below it or the section's own heading lands underneath. main.js scrolls
   with scrollIntoView and lets this do the offset. */
.aiers-acting-page [id="about"],
.aiers-acting-page [id="curriculum"],
.aiers-acting-page [id="results"],
.aiers-acting-page [id="instructor"],
.aiers-acting-page [id="faq"] {
  scroll-margin-top: 41px;
}

/* ---------- spec rows (shared by inline card + sticky card) -------------- */

/* 1660:2212 · seven 20-tall rows on a 12 rhythm. Each row carries its own
   12px of trailing space plus the list gap, which puts the dashed rule
   exactly halfway between two rows and lands the block on Figma's 284.
   The rule is a pseudo-element because the Figma vector is 0 tall — a real
   1px border would grow every row. */
.aiers-acting-specs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiers-acting-specs li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px 12px;
  font-size: 14px;
  line-height: 19.5px;
}

.aiers-acting-specs li:last-child { padding-bottom: 0; }

/* 1660:2224 · stroke #E6E6E6, dasharray 2 2, inset 4 either side */
.aiers-acting-specs li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 0;
  left: 4px;
  height: 1px;
  background-image: repeating-linear-gradient(to right, #e6e6e6 0 2px, transparent 2px 4px);
}

.aiers-acting-specs__key {
  display: inline-flex;
  flex: none;
  gap: 8px;
  align-items: center;
  color: #121212;
  font-weight: 500;
}

.aiers-acting-specs__key img { width: 20px; height: 20px; }

.aiers-acting-specs__val {
  color: #121212;
  font-weight: 600;
  text-align: right;
  word-break: keep-all;
}

/* 1660:2277 · the fee row is the only Bold one, and only the discounted
   figure takes the key colour — the struck original stays ink. */
.aiers-acting-specs li:last-child .aiers-acting-specs__val { font-weight: 700; }
.aiers-acting-specs__val strong { color: #006664; }
.aiers-acting-specs__val del { color: #121212; font-weight: 700; }

/* ---------- inline apply card (mobile/tablet · 143:7895) ----------------- */

/* ---------- inline apply card (phone · 1660:1172 · 375x502) --------------
   Everything below is the PHONE comp, which is a different component from the
   desktop sticky panel even though both reuse `.aiers-acting-specs`: the rows
   are boxed on #fafafa at 12/19.5 on a 16px rhythm rather than loose at 14/12
   with a dashed rule. The card only ever renders below 1280, where the aside
   takes over, so these do not need a media query. */

.aiers-acting-page .aiers-acting-apply-inline {
  padding: 40px 16px 0;
}

.aiers-acting-page .aiers-acting-apply-inline h2 {
  margin: 0 0 12px;
  color: #121212;
  font-size: 18px;
  font-weight: 700;
  line-height: 25.5px;
  letter-spacing: 0;
}

/* 1660:1181 · #fafafa slab, 1px hairline, 4px corners, 16 of padding. Rows sit
   16 apart with the rule floating halfway between them. */
.aiers-acting-page .aiers-acting-apply-inline .aiers-acting-specs {
  gap: 16px;
  padding: 15px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background: #fafafa;
}

.aiers-acting-page .aiers-acting-apply-inline .aiers-acting-specs li {
  padding: 0;
  font-size: 12px;
  line-height: 19.5px;
}

.aiers-acting-page .aiers-acting-apply-inline .aiers-acting-specs li:not(:last-child)::after {
  right: 0;
  bottom: -8px;
  left: 0;
  background-image: none;
  background-color: #e6e6e6;
}

/* 1660:1248 / 1660:1252 · 45 and 47 tall, 12 apart, 12 under the card. */
.aiers-acting-page .aiers-acting-apply-inline__timer {
  height: 45px;
  padding: 12px 16px;
  font-size: 14px;
}

.aiers-acting-page .aiers-acting-apply-inline .aiers-acting-apply-inline__cta {
  height: 47px;
}

/* Flush against the offer card above: separate sections for funnel tracking,
   one card visually, as the comp draws it. */
.aiers-acting-page .aiers-acting-apply-inline--price {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 40px;
}

/* The 1280 grid pins the column at 750 itself, so the cap has to give way to
   `grid-template-columns` there or the aside loses its track. */
@media (min-width: 1280px) {
  .aiers-acting-detail__shell { width: min(1230px, calc(100% - 50px)); }
}



.aiers-acting-apply-inline h2 {
  margin: 0 0 18px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* 1660:2279 · 336x51. Figma draws the 1px edge outside the 15/16 padding,
   so the padding is trimmed by the border width to keep the row at 21. */
.aiers-acting-apply-inline__timer,
.aiers-acting-sticky__timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fafafa;
  color: #121212;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.aiers-acting-apply-inline__timer strong,
.aiers-acting-sticky__timer strong { color: #006664; }



/* 1660:2283 · 51 tall, 12 radius, 18/1.5 Bold reversed out of 기서 green.
   The base declarations were lost at some point and only the :hover half of
   this rule survived, which is why the button shipped unstyled. */
.aiers-acting-page .aiers-acting-apply-inline__cta,
.aiers-acting-page .aiers-acting-sticky__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 51px;
  padding: 10px 8px;
  border-radius: 12px;
  background: #006664;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.aiers-acting-page .aiers-acting-apply-inline__cta:hover,
.aiers-acting-page .aiers-acting-sticky__cta:hover { background: #0c6440; }

/* ---------- sticky aside (1660:2207 · 400x688) --------------------------- */
/* Rebuilt 1:1: card 400x628, a 16 gap, then the 44-tall like/share row.
   The card's 1px edge is drawn outside its 32 padding — Figma still gives
   the body 336 inside a 400 card — so the padding is trimmed to 31. */

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

.aiers-acting-sticky {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 400px;
}

.aiers-acting-sticky__card {
  width: 100%;
  padding: 31px;
  border: 1px solid rgba(0, 0, 0, .05);
  border-radius: 32px;
  background: transparent;
  box-shadow: 0 5px 8px rgba(0, 0, 0, .06), 0 1px 4px rgba(0, 0, 0, .04);
}

.aiers-acting-sticky__body {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.aiers-acting-sticky__title {
  margin: 0;
  color: #121212;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -.48px;
  word-break: keep-all;
}

/* 1660:2278 · the timer chip and the button are 10 apart, not on the 36
   rhythm the rest of the card uses. */
.aiers-acting-sticky__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 1660:2285 · sits under the card, not inside it — no divider above it. */
.aiers-acting-sticky__meta {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.aiers-acting-sticky__meta-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: 44px;
  padding: 1px 0 0;
  border: 0;
  background: none;
  color: #0c0c0c;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -.12px;
  cursor: pointer;
}

.aiers-acting-sticky__meta-item img {
  width: 24px;
  height: 24px;
}

/* ---------- fixed CTA ----------------------------------------------------
   Not a Figma node: neither the PC nor the MO frame draws a fixed bar, so
   this is the house component styled off the sticky card's own tokens —
   same 기서 green, same 12 radius, same 51-tall button.

   It carries the apply surface at every width where the aside is hidden,
   which includes laptop widths below the 1280 two-column switch, so the
   inner row is boxed to the body column instead of stretching edge to edge.
   -------------------------------------------------------------------- */

.aiers-acting-fixed-cta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  background: #fff;
  box-shadow: 0 -1px 0 #e6e6e6, 0 -8px 24px rgba(0, 0, 0, .06);
}

/* The two halves wrap as units, never mid-word: the countdown runs to
   "DD일 HH시간 MM분 SS초" at its longest, which cannot share a line with the
   label on a phone. */
.aiers-acting-fixed-cta__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  align-items: center;
  justify-content: center;
  width: min(750px, 100%);
  margin-inline: auto;
  padding: 8px 16px;
  color: #666;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.aiers-acting-fixed-cta__strip > * { white-space: nowrap; }

.aiers-acting-fixed-cta__strip b { color: #006664; font-weight: 700; }

.aiers-acting-fixed-cta__body {
  width: min(750px, 100%);
  margin-inline: auto;
  padding: 0 16px 12px;
  /* Clears the home indicator on iOS without adding space on other devices. */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.aiers-acting-page .aiers-acting-fixed-cta__button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 51px;
  border-radius: 12px;
  background: #006664;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.aiers-acting-page .aiers-acting-fixed-cta__button:hover { background: #0c6440; }

/* The bar is out of flow, so the page has to reserve its height or the
   closing section's last 20-odd pixels sit underneath it. Only where the
   bar actually renders — the aside takes over at 1280. */
@media (max-width: 1279px) {
  .aiers-acting-page {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- 860px+ : wider body, comp-width content box ------------------ */

@media (min-width: 860px) {
  /* The hero is a scaled art canvas and owns its own type + height; nothing
     about it belongs in this band. A stray `min-height: 600px` here combined
     with the canvas aspect-ratio resolved the hero's width to 1920px. */
  .aiers-acting-apply-inline h2 { font-size: 22px; }
}

/* ---------- 1280px+ : the comp's two-column stage ------------------------ */

@media (min-width: 1280px) {
  /* 30 of air under the hero before the two columns start. Figma opens the
     PC stage (1660:2206) flush with the hero's bottom edge and then puts BOTH
     the tab bar (1660:2294) and the sticky panel (1660:2207) at y=30 inside
     it, so the padding sits on the shell and moves the pair together.
     Single-column widths keep 0: the phone comp runs the tab bar straight
     off the inline apply card with no gap. */
  .aiers-acting-detail__shell {
    display: grid;
    grid-template-columns: 750px 400px;
    gap: 80px;
    align-items: start;
    padding-top: 30px;
  }

  /* The aside owns the apply surface on desktop, so the inline copy of it
     must not render — showing both was the defect the JIP build shipped.
     Scoped because the phone card's own rules are, and an unscoped hide
     would lose to them. */
  .aiers-acting-page .aiers-acting-apply-inline,
  .aiers-acting-page .aiers-acting-apply-inline--price { display: none; }

  .aiers-acting-detail__aside {
    display: block;
    position: sticky;
    top: 88px;
    align-self: start;
  }

  .aiers-acting-fixed-cta { display: none; }
}

/* ==========================================================================
   aiers-acting — body base layer
   ==========================================================================

   Scope
   -----
   The shared foundation the eighteen body sections build on: tokens, the
   section/wrap rhythm, and the text scale. Section-specific rules live below
   the `END OF BASE LAYER` marker, each under its own
   `.aiers-acting-{section}__*` block.

   Responsive model
   ----------------
   Ported from the JIP build, where the body sat in a 680px column and every
   gate was a container query against that column. Here the body is the AIERS
   two-column stage instead: a 750px column at 1280px+ with the content boxed
   at 654px — the comp's own content width, so sections render 1:1 with Figma
   rather than the 2% squeeze the 640px JIP column forced. The gates are now
   viewport media queries (`min-width: 860px`), matching the sibling AIERS
   pages; the shell above owns the 1280px two-column switch.
   ========================================================================== */

.aiers-acting-page {
  /* ink */
  --aiers-acting-ink: #17191b;
  --aiers-acting-ink-soft: #4a4f52;
  --aiers-acting-muted: #7b8184;

  /* key palette, lifted from the Figma hero (157:11745) */
  --aiers-acting-key: #17a868;
  --aiers-acting-key-strong: #0f7a4c;
  --aiers-acting-key-soft: #eefaf4;
  --aiers-acting-accent: #37cf8c;

  /* surfaces */
  --aiers-acting-surface: #fff;
  --aiers-acting-tint: #f4f8f6;
  --aiers-acting-dark: #17191b;
  --aiers-acting-dark-deep: #010818;
  --aiers-acting-line: #e4e8e6;
  --aiers-acting-line-dark: rgba(255, 255, 255, .16);

  /* geometry — the gutter is the ONE value that moves at the 672px gate */
  --aiers-acting-gutter: 24px;
  --aiers-acting-radius: 12px;
  --aiers-acting-radius-lg: 20px;
  position: relative;
  /* `clip`, not `hidden`: it contains a stray full-bleed child without
     establishing a scroll container, so the shell's sticky panel keeps
     working. */
  overflow-x: clip;
  color: var(--aiers-acting-ink);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -.01em;
}

/* A container query never matches its own container, so these cannot live on
   .aiers-acting-page (which declares acting-canvas). They ride the sections
   instead — every wrap and every text node is inside one, so the gutter token
   and the base size still reach everything they did before. */
@media (min-width: 860px) {
  .aiers-acting-section {
    --aiers-acting-gutter: 48px;
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   Element reset — scoped to the body wrapper so nothing leaks into the shell
   -------------------------------------------------------------------------- */

.aiers-acting-page h2,
.aiers-acting-page h3,
.aiers-acting-page h4,
.aiers-acting-page p,
.aiers-acting-page figure,
.aiers-acting-page blockquote,
.aiers-acting-page dl,
.aiers-acting-page dd {
  margin: 0;
}

.aiers-acting-page ul,
.aiers-acting-page ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiers-acting-page a {
  color: inherit;
  text-decoration: none;
}

.aiers-acting-page button {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.aiers-acting-page img,
.aiers-acting-page video {
  display: block;
  max-width: 100%;
}

/* Icon frames exported from Figma carry the frame's padding, so their box
   rarely matches the artwork ratio. `contain` keeps the reserved box and
   letterboxes the glyph instead of stretching it. Photos keep `cover`. */
.aiers-acting-page img[src$=".svg"] {
  object-fit: contain;
}

.aiers-acting-page table {
  width: 100%;
  border-collapse: collapse;
}

/* --------------------------------------------------------------------------
   Section rhythm — 64px normal, 80px emphasised. There is no third tier;
   neighbouring gaps therefore land on 128 / 144 / 160 (projects/jip/AGENTS.md).
   -------------------------------------------------------------------------- */

.aiers-acting-section {
  position: relative;
  padding: 64px 0;
  background: var(--aiers-acting-surface);
}

.aiers-acting-section--emphasis {
  padding: 80px 0;
}

/* For a section whose own artwork supplies the vertical breathing room. */
.aiers-acting-section--flush {
  padding: 0;
}

.aiers-acting-section--tint {
  background: var(--aiers-acting-tint);
}

.aiers-acting-section--key {
  background: var(--aiers-acting-key-soft);
}

.aiers-acting-section--dark {
  --aiers-acting-ink: #fff;
  --aiers-acting-ink-soft: rgba(255, 255, 255, .82);
  --aiers-acting-muted: rgba(255, 255, 255, .58);
  --aiers-acting-line: var(--aiers-acting-line-dark);
  background: var(--aiers-acting-dark);
  color: #fff;
}

.aiers-acting-section--deep {
  --aiers-acting-ink: #fff;
  --aiers-acting-ink-soft: rgba(255, 255, 255, .82);
  --aiers-acting-muted: rgba(255, 255, 255, .58);
  --aiers-acting-line: var(--aiers-acting-line-dark);
  background: var(--aiers-acting-dark-deep);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Content inset
   -------------------------------------------------------------------------- */

/* The 654px content column — the comp's content width inside the 750px
   body column, so section art and copy land at Figma's own measure. The
   gutter is added to the cap and taken back as padding, so the CONTENT box is
   640px on desktop and the wrap itself spans the full 680px column. */
.aiers-acting-wrap {
  width: 100%;
  max-width: calc(654px + var(--aiers-acting-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--aiers-acting-gutter);
}

/* Deliberate full-bleed: spans the whole 680px column with no inset. Use for
   section backgrounds and edge-to-edge media only. */
.aiers-acting-wrap--bleed {
  max-width: none;
  padding-inline: 0;
}

/* Horizontal rail that bleeds to the column edge but keeps the first and last
   card on the 640px inset. Put the cards straight inside it.

   The `50%` in the padding resolves against the rail's containing block, so the
   rail must be a DIRECT child of `.aiers-acting-section` (or of a
   `.aiers-acting-wrap--bleed`). Nest it inside a normal `.aiers-acting-wrap` and it
   measures 640px instead of 680px and the inset comes out wrong. */
.aiers-acting-rail {
  display: flex;
  gap: 12px;
  width: 100%;
  padding-inline: max(var(--aiers-acting-gutter), calc(50% - 654px / 2));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.aiers-acting-rail::-webkit-scrollbar {
  display: none;
}

.aiers-acting-rail > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   Text scale
   -------------------------------------------------------------------------- */

.aiers-acting-eyebrow {
  display: block;
  color: var(--aiers-acting-key);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.aiers-acting-heading {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.02em;
  word-break: keep-all;
}

.aiers-acting-heading--lg {
  font-size: 28px;
}

.aiers-acting-heading--sm {
  font-size: 18px;
  line-height: 1.45;
}

/* Inline emphasis inside a heading. Section authors: use <em> and this rule
   picks it up, so the accent colour lives in one place. */
.aiers-acting-heading em {
  color: var(--aiers-acting-key);
  font-style: normal;
  font-weight: inherit;
}

.aiers-acting-section--dark .aiers-acting-heading em,
.aiers-acting-section--deep .aiers-acting-heading em {
  color: var(--aiers-acting-accent);
}

.aiers-acting-lead {
  color: var(--aiers-acting-ink-soft);
  font-size: 15px;
  line-height: 1.65;
  word-break: keep-all;
}

.aiers-acting-text {
  color: var(--aiers-acting-ink-soft);
  font-size: 14px;
  line-height: 1.7;
  word-break: keep-all;
}

.aiers-acting-note {
  color: var(--aiers-acting-muted);
  font-size: 12px;
  line-height: 1.6;
}

@media (min-width: 860px) {
  .aiers-acting-eyebrow {
    font-size: 15px;
  }

  .aiers-acting-heading {
    font-size: 32px;
  }

  .aiers-acting-heading--lg {
    font-size: 38px;
  }

  .aiers-acting-heading--sm {
    font-size: 22px;
  }

  .aiers-acting-lead {
    font-size: 17px;
  }

  .aiers-acting-text {
    font-size: 16px;
  }

  .aiers-acting-note {
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   Spacing helpers — so eighteen sections do not invent eighteen different
   vertical rhythms. `--gap` is the knob; the default suits body copy.
   -------------------------------------------------------------------------- */

.aiers-acting-stack > * + * {
  margin-top: var(--gap, 16px);
}

.aiers-acting-stack--sm {
  --gap: 8px;
}

.aiers-acting-stack--lg {
  --gap: 32px;
}

/* Standard section header block: eyebrow + heading + lead, then the body. */
.aiers-acting-head {
  margin-bottom: 32px;
}

@media (min-width: 860px) {
  .aiers-acting-head {
    margin-bottom: 40px;
  }
}

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */

.aiers-acting-card {
  padding: 20px;
  border: 1px solid var(--aiers-acting-line);
  border-radius: var(--aiers-acting-radius-lg);
  background: var(--aiers-acting-surface);
}

.aiers-acting-section--dark .aiers-acting-card,
.aiers-acting-section--deep .aiers-acting-card {
  background: rgba(255, 255, 255, .04);
}

@media (min-width: 860px) {
  .aiers-acting-card {
    padding: 28px;
  }
}

.aiers-acting-media {
  width: 100%;
  height: auto;
  border-radius: var(--aiers-acting-radius);
  object-fit: cover;
}

.aiers-acting-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 8px;
  background: var(--aiers-acting-key);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transition: background-color .15s ease;
}

.aiers-acting-cta:hover {
  background: var(--aiers-acting-key-strong);
}

.aiers-acting-cta--full {
  display: flex;
  width: 100%;
}

.aiers-acting-cta--ghost {
  border: 1px solid var(--aiers-acting-key);
  background: transparent;
  color: var(--aiers-acting-key-strong);
}

.aiers-acting-cta--ghost:hover {
  background: var(--aiers-acting-key-soft);
}

.aiers-acting-section--dark .aiers-acting-cta--ghost,
.aiers-acting-section--deep .aiers-acting-cta--ghost {
  border-color: var(--aiers-acting-accent);
  color: var(--aiers-acting-accent);
}

.aiers-acting-section--dark .aiers-acting-cta--ghost:hover,
.aiers-acting-section--deep .aiers-acting-cta--ghost:hover {
  background: rgba(55, 207, 140, .14);
}

/* Accessible label that stays out of the visual composition. */
.aiers-acting-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* ==========================================================================
   END OF BASE LAYER — section styles go below, one block per section, in the
   same order as body.html.
   ========================================================================== */

/* ===== sections 01-06 ===== */
/* ==========================================================================
   aiers-acting — sections 01–06
   ==========================================================================

   Concatenated AFTER the base layer in assets/body/main.css, so nothing here
   restates a token, a section shell, a wrap, or a type step — those come from
   the base. Every rule below is scoped to one section block.

   Two conventions that matter when reading this file:

   1. Breakpoints are `@media (min-width: 860px)` only. The
      shell owns the viewport bands (861/1279/1280px); this file never sees them.
   2. `url()` here resolves against assets/body/, NOT against the page. So CSS
      says `./figma/sections/x.webp` while the HTML says
      `./assets/body/figma/sections/x.webp`. Both are correct.

   Sections 01–06 are all dark. They inherit the ink flip from
   `.aiers-acting-section--dark` / `--deep` and then repaint only the background,
   because the Figma comps use four different near-blacks rather than the two
   the base ships.
   ========================================================================== */

/* Media the Figma bridge could not export (large photo/video fills). The box is
   still reserved at the right ratio, so swapping the real file in later does not
   move anything. Paired with `data-asset-pending` in the HTML — grep for that
   attribute before shipping. */
.aiers-acting-shot--pending {
  background-color: #23262b;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, .035) 0 12px,
    transparent 12px 24px
  );
}

/* --------------------------------------------------------------------------
   01 · 결과물 프리뷰 — .aiers-acting-preview (157:16868 / 143:8052)
   -------------------------------------------------------------------------- */



/* 818 / 750 of the frame, centred — the comp's Group 2117914180. */
.aiers-acting-showcase__collage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  display: grid;
  width: 109.067%;
  grid-template-rows: 352fr 226fr;
  row-gap: 2.027%; /* 12 / 592 */
  opacity: .25;
  transform: translateX(-50%);
}

/* Deliberately wider than the canvas: the comp (Group 2117914180) lays the six
   tiles across 818px inside a 750px frame, so both outer tiles run off the edge.
   Declaring an explicit `fr` track per tile — rather than letting each file's
   intrinsic ratio decide the width — is what keeps the two rows on the comp:
   three of these six sources ship at a ratio the comp does not use. */
.aiers-acting-showcase__row {
  display: grid;
  column-gap: 1.467%; /* 12 / 818 */
  min-height: 0;
}

/* Row A · 264 + 264 + 266 ; Row B · 216 + 338 + 240 (157:16884–157:16889) */
.aiers-acting-showcase__row:first-child {
  grid-template-columns: 264fr 264fr 266fr;
}

.aiers-acting-showcase__row:last-child {
  grid-template-columns: 216fr 338fr 240fr;
}

.aiers-acting-showcase__row img {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 4px;
  object-fit: cover;
}

.aiers-acting-showcase__poster {
  position: absolute;
  top: 5.4%;
  left: 50%;
  width: auto;
  height: 89.5%;
  max-width: none;
  border-radius: 4px;
  box-shadow: 0 0 32px rgba(0, 0, 0, .4);
  transform: translateX(-50%);
}





@media (min-width: 860px) {
  .aiers-acting-showcase {
    margin: 132px 0 64px;
  }

  .aiers-acting-preview__head .aiers-acting-lead,
  .aiers-acting-awards__head .aiers-acting-lead {
    margin-top: 24px;
  }

  .aiers-acting-preview__closing .aiers-acting-lead {
    margin-top: 30px;
  }

  .aiers-acting-preview__rule {
    height: 110px;
    margin-bottom: 40px;
  }
}

/* --------------------------------------------------------------------------
   02 · 수상 실적 — .aiers-acting-awards (157:16891 / 143:8075)
   -------------------------------------------------------------------------- */

.aiers-acting-awards {
  background: #0d0e0e;
  overflow: hidden;
}

/* The comp's wash (157:16892) is a #872B5B ellipse under a 200px Gaussian
   blur, not a green one — the exported SVG carries the blur, so it is used
   directly rather than approximated. Box = the ellipse's 996x160 frame at
   (-124, 610) grown by the blur's spread (400px per side), i.e. the 1796x960
   canvas the export ships. */
.aiers-acting-awards::before {
  content: "";
  position: absolute;
  top: 16.3%;    /* (610 - 400) / 1288 */
  left: -69.87%; /* (-124 - 400) / 750 */
  width: 239.47%;  /* 1796 / 750 */
  height: 74.53%;  /* 960 / 1288 */
  background: url("./figma/sections/aiers-acting-awards-glow.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* The comp fades the laurel row into the background instead of ending it. Keep
   this shallow: the marquee sits directly above it, and a taller/steeper ramp
   blacks the laurels out instead of feathering their bottom edge. */
.aiers-acting-awards::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 20%;
  background: linear-gradient(180deg, rgba(13, 14, 14, 0) 0%, #0d0e0e 100%);
  pointer-events: none;
}

.aiers-acting-awards > * {
  position: relative;
  z-index: 1;
}

.aiers-acting-awards__head {
  text-align: center;
}

.aiers-acting-awards__head .aiers-acting-lead {
  margin-top: 16px;
}

.aiers-acting-awards__head strong {
  color: #fff;
  font-weight: 700;
}

.aiers-acting-awards__marquee {
  margin-top: 28px;
  overflow: hidden;
}

.aiers-acting-awards__track {
  display: flex;
  width: max-content;
  animation: aiers-acting-awards-roll 36s linear infinite;
}

.aiers-acting-awards__group {
  display: flex;
  align-items: center;
}

/* Margin on the item, never `gap` on the track: `gap` would add one extra
   space at the group seam and the loop would visibly stutter every cycle. */
.aiers-acting-awards__item {
  flex: 0 0 auto;
  margin-right: 8px;
}

.aiers-acting-awards__item img {
  width: auto;
  height: 118px;
  max-width: none;
}

@keyframes aiers-acting-awards-roll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .aiers-acting-awards__track {
    animation: none;
  }

  .aiers-acting-awards__marquee {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .aiers-acting-awards__marquee::-webkit-scrollbar {
    display: none;
  }
}

@media (min-width: 860px) {
  .aiers-acting-awards__marquee {
    margin-top: 52px;
  }

  .aiers-acting-awards__item img {
    height: 232px;
  }

  .aiers-acting-awards__item {
    margin-right: 12px;
  }
}

/* --------------------------------------------------------------------------
   03 · 브릿지 A / 05 · 브릿지 B — .aiers-acting-bridge
   (157:16908 / 143:8091) · (157:16992 / 143:8155)
   -------------------------------------------------------------------------- */

/* Both bridges are the same object: one dimmed still, centred copy, no media.
   They carry real headline copy — not decoration — so they are tagged with a
   funnel stage rather than `none`. */
.aiers-acting-bridge {
  display: flex;
  /* 157:16908 / 157:16992 are 600px and 560px tall in the comp INCLUDING their
     own breathing room, so the base `--emphasis` block padding is dropped and
     the height comes from `min-height` alone. */
  padding: 0;
  min-height: 300px;
  align-items: center;
  justify-content: center;
  background-color: #0d0d0d;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.aiers-acting-bridge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, .8);
  pointer-events: none;
}

/* The bridges are the only sections where the comp's height is the design —
   they exist to give the page a beat. `min-height` on the section plus centring
   keeps that beat without pinning the copy, which still grows if it wraps. */
.aiers-acting-bridge__copy {
  position: relative;
  z-index: 1;
  width: 100%;
}

.aiers-acting-bridge--a {
  background-image: url("./figma/sections/aiers-acting-still-dreamcore.webp");
}

/* Bridge A reads near-black in the comp; bridge B keeps its still legible.
   The still under A is a warm pink field, so a neutral scrim leaves it reading
   pinker and brighter than the comp — the scrim is cooled and deepened to sink
   it back to the comp's blue-black. */
.aiers-acting-bridge--a::before {
  background: rgba(9, 11, 15, .93);
}

.aiers-acting-bridge--b {
  min-height: 280px;
  background-image: url("./figma/sections/aiers-acting-still-moraeui-sup.webp");
}

.aiers-acting-bridge__body {
  margin-top: 12px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.02em;
  word-break: keep-all;
}

/* The comp's second accent. It is not the key green, so it cannot ride the
   `<em>` rule in the base layer — hence a separate element and class. */
.aiers-acting-bridge__alt {
  color: #e84c76;
  font-weight: inherit;
}

.aiers-acting-bridge--b .aiers-acting-lead {
  margin-top: 24px;
}

.aiers-acting-bridge--b strong {
  color: #fff;
  font-weight: 700;
}

@media (min-width: 860px) {
  .aiers-acting-bridge--a {
    min-height: 544px;
  }

  .aiers-acting-bridge--b {
    min-height: 508px;
  }

  /* The comp sets the headline and this paragraph on the same line pitch, so
     they read as one block rather than a head plus a sub. */
  .aiers-acting-bridge__body {
    margin-top: 16px;
    font-size: 28px;
  }

  .aiers-acting-bridge--b .aiers-acting-lead {
    margin-top: 40px;
  }
}

/* --------------------------------------------------------------------------
   04 · 공감 유도 · 3단계 예고 — .aiers-acting-pains (157:16919 / 143:9581)
   Owns id="about", the 강의 소개 tab target.
   -------------------------------------------------------------------------- */






/* The card is a white island inside a dark section: reset the ink tokens the
   `--dark` modifier flipped, or every child inherits white-on-white. The
   descendant selector is required — `.aiers-acting-section--dark
   .aiers-acting-card` in the base is two classes deep and would otherwise win. */




/* Neutral dark grey in the comp (157:16937) — the maroon belongs to the
   highlighted run inside the quote, not to this line. */


/* Flush to the content edge, sitting just above the divider (157:16939). */




/* The pre-rebuild rules for this section used to live here. Everything they
   targeted is gone from the markup except __who / __mark / __quote, and for
   those they were actively wrong — `__who { padding-bottom: 26px }` alone was
   stretching the card 28px past Figma's 390 and pushing the divider and the
   quote down with it. */

/* --------------------------------------------------------------------------
   06 · 연출 커리큘럼 티저 — .aiers-acting-directing (157:16998 / 143:9855)
   -------------------------------------------------------------------------- */


/* The comp insets this whole block 16/654 inside the content column, and the
   face and the top-right mark both hang above the bubble. All three offsets
   come off Group 2117914182 (157:17000). */




@supports (backdrop-filter: blur(40px)) {
  .aiers-acting-directing__bubble {
    backdrop-filter: blur(40px);
  }
}

/* Bottom-left, mostly INSIDE the bubble and hanging a little below it
   (157:17008 sits at 25.7 / 622 from the left edge). */



/* Voice block to section head is 236 / 654 in the comp; the connector fills
   most of it and the arrow head adds the last few px. */

/* The comp points this connector at the section head. */












@media (min-width: 860px) {
  .aiers-acting-directing__voice {
    padding-top: 81px;
    padding-inline: 16px;
  }

  .aiers-acting-directing__avatar {
    top: 25px;
    width: 96px;
    height: 100px;
  }

  .aiers-acting-directing__warning {
    top: 56px;
    width: 96px;
    height: 92px;
  }

  .aiers-acting-directing__bubble {
    padding: 61px 44px 50px;
    border-radius: 25px;
  }

  .aiers-acting-directing__alert {
    width: 60px;
    height: 53px;
  }

  .aiers-acting-directing__quote {
    font-size: 30px;
  }

  .aiers-acting-directing__sub {
    margin-top: 12px;
    font-size: 20px;
  }

  .aiers-acting-directing__rule {
    height: 118px;
    margin: 64px auto 32px;
  }

  .aiers-acting-directing__head {
    margin-bottom: 56px;
  }

  .aiers-acting-directing__block + .aiers-acting-directing__block {
    margin-top: 114px;
  }

  .aiers-acting-directing__label {
    margin-bottom: 39px;
    padding-inline: 8px;
  }

  .aiers-acting-directing__grid {
    gap: 16px;
  }

  .aiers-acting-directing__reel {
    gap: 76px;
  }

  .aiers-acting-directing__caption {
    margin-top: 31px;
    padding-inline: 16px;
  }
}

/* ===== sections 07-12 ===== */
/* ==========================================================================
   aiers-acting — sections 07–12
   ==========================================================================

   Append verbatim BELOW the `END OF BASE LAYER` marker in
   assets/body/main.css, between the section-06 block and the section-13
   block. Everything here assumes the base layer is already in scope:
   tokens on `.aiers-acting-page`, the `.aiers-acting-section` / `-wrap` /
   `-head` rhythm, and the type scale. Nothing above is re-declared.

   Breakpoints are `@media (min-width: 860px)` only —
   the column does not track the viewport, so a viewport `@media` here
   would fire at the wrong width (see the base layer's header note).

   url() paths resolve against main.css, i.e. assets/body/, so section
   artwork is referenced as `./figma/sections/...` — NOT the
   `./assets/body/figma/...` form the HTML uses.
   ========================================================================== */

/* --------------------------------------------------------------------------
   07 + 08 shared — the "학생 고민" quote card and the connector that drops
   from it into the section head. Both sections open with this exact block
   (Figma 157:17047 / 157:17107), so it is styled once.
   -------------------------------------------------------------------------- */



/* Sits above the card's top-right corner, tipped the way Figma tips it. */

/* Figma insets the quote card 16px inside the 654px content column while the
   two triangles keep reaching the column edge (157:17047 / 157:17107), so the
   card is narrower than the before/after stills below it. */

/* Reaches back out to the column edge the card is inset from, matching Figma
   where the arrow's left edge lines up with the stills below. */



@media (min-width: 860px) {
  .aiers-acting-pain__face {
    width: 96px;
  }

  .aiers-acting-pain__warn {
    width: 90px;
  }

  .aiers-acting-pain__card {
    margin-top: -54px;
    padding: 60px 44px 50px;
  }

  .aiers-acting-pain__tail {
    bottom: -22px;
    left: -16px;
    width: 76px;
  }

  .aiers-acting-pain__quote {
    font-size: 26px;
  }

  .aiers-acting-pain__sub {
    font-size: 19px;
  }
}

/* The green stem + arrowhead that links the quote to the section head. */



@media (min-width: 860px) {
  .aiers-acting-fix__head {
    margin-top: 64px;
    /* Figma 157:17059 → 157:17065 is a 64px gap. */
    margin-bottom: 64px;
    padding-top: 116px;
  }

  .aiers-acting-fix__head::before {
    height: 78px;
  }

  .aiers-acting-fix__head::after {
    top: 78px;
  }
}

/* --------------------------------------------------------------------------
   07 · Before/After — 합성 디테일 (157:17045 / 143:8204)
   -------------------------------------------------------------------------- */




/* Section 08 heads its single pair with a rule instead of a number. */




@media (min-width: 860px) {
  /* Figma 157:17066 → 157:17080 → 157:17090 are 120px apart. */
  .aiers-acting-fix__list {
    gap: 100px;
  }

  .aiers-acting-fix__title {
    font-size: 22px;
  }


  .aiers-acting-fix__note {
    margin-top: 32px;
    font-size: 23px;
  }
}

/* --------------------------------------------------------------------------
   08 · Before/After — 색보정 (157:17104 / 143:8259)

   The section is `--flush` because its closing band bleeds to the column
   edges; `__main` supplies the padding the section shell normally would.
   -------------------------------------------------------------------------- */

/* Figma 157:17104 ends 89px BELOW the blurred band (157:17105 spans
   2060→2486 in a 2576-tall section), so the band is not flush to the section
   foot. `--flush` zeroes the shell padding; this puts the tail back. */



/* Figma blurs the director's grading screenshot back to 30% and lets the
   copy sit on top of it. Purely atmospheric, hence a background layer
   rather than an <img>. */

/* The two glow ellipses Figma parks on the band: 157:17142 off the left edge
   near the top, 157:17141 past the bottom-right corner. */



@media (min-width: 860px) {
  .aiers-acting-grade {
    padding-bottom: 88px;
  }

  .aiers-acting-grade__main {
    padding: 80px 0 96px;
  }

  .aiers-acting-grade__band {
    padding: 88px 32px;
  }

  .aiers-acting-grade__punch {
    font-size: 32px;
  }
}

/* --------------------------------------------------------------------------
   09 · 수익화 포인트 (157:17143 / 143:8292) — the #results tab anchor.

   Figma swaps the green key for the 기서 crimson here and holds it through
   sections 11 and 12, so those three carry literal hex rather than the
   green tokens. See the fragment report if this needs normalising.
   -------------------------------------------------------------------------- */





/* The clay object overhangs the lower-right corner, so the card reserves
   room for it with padding rather than letting text run underneath. */

/* Figma 157:17157 is a single 100px ellipse blown out to a 580px blur, i.e. a
   wide low-opacity wash rather than the tight halo this used to draw. */



/* Each clay object has its own crop in Figma (157:17156 / 157:17163 /
   157:17170) and each PNG carries a different amount of transparent margin,
   so the three are placed individually. All three are clipped by the card's
   bottom edge, which is what `overflow: hidden` on the card is for. */




@media (min-width: 860px) {
  .aiers-acting-money__list {
    gap: 32px;
  }

  .aiers-acting-money__card {
    padding: 40px 36px 42%;
  }

  .aiers-acting-money__title {
    font-size: 26px;
  }

  .aiers-acting-money__desc {
    margin-top: 12px;
    font-size: 20px;
  }
}

/* --------------------------------------------------------------------------
   11 · 수강 후 제공물 (157:17346 / 143:8600)
   -------------------------------------------------------------------------- */

.aiers-acting-take {
  background: linear-gradient(180deg, #170d11 0%, #2d1421 100%);
}

.aiers-acting-take__head {
  text-align: center;
}

.aiers-acting-take__list {
  display: grid;
  gap: 16px;
}

.aiers-acting-take__card,
.aiers-acting-take__plus {
  position: relative;
  border: 2px solid rgba(179, 45, 81, .25);
  border-radius: 16px;
  background-image: linear-gradient(173deg, rgba(179, 45, 81, 0) 12%, rgba(179, 45, 81, .5) 100%);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, .2),
    inset 0 0 80px rgba(255, 49, 128, .08);
}

.aiers-acting-take__card {
  padding: 22px 110px 22px 20px;
}

/* Figma 157:17355 is a fixed 39px box, not a hugging pill. */
.aiers-acting-take__no {
  display: inline-block;
  min-width: 30px;
  padding: 4px 6px;
  border-radius: 4px;
  text-align: center;
  background: rgba(179, 45, 81, .15);
  color: #e5547b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.aiers-acting-take__title {
  margin-top: 10px;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.02em;
  word-break: keep-all;
}

.aiers-acting-take__icon {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 78px;
  height: auto;
  transform: translateY(-50%);
}

.aiers-acting-take__plus {
  margin-top: 52px;
  padding: 36px 20px;
  text-align: center;
}

.aiers-acting-take__plusicon {
  position: absolute;
  top: 0;
  left: 50%;
  width: 52px;
  height: auto;
  transform: translate(-50%, -50%);
}

.aiers-acting-take__plustext {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.03em;
  word-break: keep-all;
}

@media (min-width: 860px) {
  .aiers-acting-take__list {
    gap: 24px;
  }

  .aiers-acting-take__head {
    /* Figma 157:17348 → 157:17351 is an 80px gap. */
    margin-bottom: 64px;
  }

  .aiers-acting-take__card {
    padding: 48px 250px 48px 40px;
  }

  .aiers-acting-take__no {
    min-width: 40px;
    font-size: 17px;
  }

  .aiers-acting-take__title {
    margin-top: 12px;
    font-size: 24px;
  }

  .aiers-acting-take__icon {
    right: 64px;
    width: 122px;
  }

  .aiers-acting-take__plus {
    margin-top: 72px;
    padding: 56px 32px;
  }

  .aiers-acting-take__plusicon {
    width: 72px;
  }

  .aiers-acting-take__plustext {
    font-size: 26px;
  }
}

/* ===== sections 13-18 ===== */
/* ==========================================================================
   aiers-acting — sections 13–18

   Merge target: appended to assets/body/main.css AFTER the `END OF BASE LAYER`
   marker, in body.html order. Everything here assumes the base layer above it
   already defined the tokens, the `acting-canvas` container, the section/wrap
   rhythm and the type scale, and only adds what those primitives cannot say.

   Breakpoint: `@media (min-width: 860px)` only. The raw Figma
   numbers (750px desktop / 375px mobile) are canvas widths, not column widths,
   and never appear as CSS values.

   Palette
   -------
   The comp is NOT one palette. Figma runs three accents across this range and
   an earlier pass flattened all of them to the base layer's green, which read
   as a different page from the design. Each block below re-points the base
   `--aiers-acting-key*` tokens at the accent its own Figma frame actually uses,
   so every primitive that already reads those tokens (heading `em`, eyebrow,
   `.aiers-acting-cta`, `--ghost`) follows without being restated:

     13 · 강사 소개/후기   GISEO 600  #751d35   + GISEO 200 #e7c9d3 hairlines
     14 · 강사 인터뷰      GISEO 600  #751d35
     15 · 프로그램 안내    기서 Green #006664
     16 · 기초/심화 비교   기서 Green #006664
     17 · FAQ             기서 Green #006664
     18 · 마감 CTA         기서 Green 2 #37cf8c + #e84c76 on the lede

   Type stays on the house scale. The 750px Figma column is a 2× blow-up of the
   375px phone frame, so its raw 26/36/48px text and 2px hairlines halve to the
   values the base layer already ships. Only structure, colour and proportion
   are taken from Figma literally.
   ========================================================================== */

/* ==========================================================================
   SEC 02 · 수상 쇼케이스 — 1660:2307
   The comp canvas is 750 wide and so is this column, so these are the comp's
   own numbers at 1:1. Section height 2106; copy column 654 inset 48.
   ========================================================================== */

.aiers-acting-page .aiers-acting-preview {
  position: relative;
  overflow: hidden;
  height: 2106px;
  background: linear-gradient(180deg, #170d12 30.389%, #51062d 103.6%);
  color: #fff;
}

.aiers-acting-page .aiers-acting-preview__bg {
  position: absolute;
  left: 50%;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

/* 1660:2308 · 1228x2166 at top -60, color-dodge, full strength */
.aiers-acting-page .aiers-acting-preview__bg--dodge {
  top: -60px;
  width: 1228px;
  height: 2166px;
  object-fit: cover;
  mix-blend-mode: color-dodge;
}

/* 1660:2309 · 1722x1146 at top -186, screen @ 10%, with its own bottom fade to
   black layered over the raster. */
.aiers-acting-page .aiers-acting-preview__bg--screen {
  top: -186px;
  width: 1722px;
  height: 1146px;
  background:
    linear-gradient(180deg, rgba(102, 102, 102, 0) 78.185%, #000 100%),
    url("./figma/sections/aiers-acting-sec01-bg-screen.webp") center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: .1;
}

/* 1660:2310 · left 48 top 120 w 654, column gap 40 */
.aiers-acting-page .aiers-acting-preview__head {
  position: absolute;
  top: 120px;
  left: 48px;
  width: 654px;
  text-align: center;
}

.aiers-acting-page .aiers-acting-preview__head h2 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -1.44px;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-preview__head h2 em { color: #37cf8c; font-style: normal; }

.aiers-acting-page .aiers-acting-preview__head > p {
  margin: 24px 0 0;
  color: rgba(255, 255, 255, .8);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.56px;
  word-break: keep-all;
}

/* 1660:2315 · 654x384 r16 */
.aiers-acting-page .aiers-acting-preview__film {
  display: block;
  width: 654px;
  height: 384px;
  margin-top: 40px;
  border-radius: 16px;
  object-fit: cover;
  background: #1f1f22;
}

/* 1660:2321 · 750x592 at top 912, clipped */
.aiers-acting-page .aiers-acting-preview__collage {
  position: absolute;
  top: 912px;
  left: 50%;
  width: 750px;
  height: 592px;
  overflow: clip;
  transform: translateX(-50%);
}

.aiers-acting-page .aiers-acting-preview__tile {
  position: absolute;
  max-width: none;
  object-fit: cover;
  opacity: .25;
}

.aiers-acting-page .aiers-acting-preview__tile--moraeui2   { left: -68px; top: 366px; width: 216px; height: 226px; }
.aiers-acting-page .aiers-acting-preview__tile--2d         { left: 160px; top: 366px; width: 338px; height: 226px; }
.aiers-acting-page .aiers-acting-preview__tile--dreamcore  { left: 510px; top: 366px; width: 240px; height: 226px; }
.aiers-acting-page .aiers-acting-preview__tile--ver2a      { left: 242px; top: 2px;   width: 264px; height: 352px; }
.aiers-acting-page .aiers-acting-preview__tile--ver2b      { left: -34px; top: 2px;   width: 264px; height: 352px; }
.aiers-acting-page .aiers-acting-preview__tile--sweet      { left: 518px; top: 0;     width: 266px; height: 354px; }

/* 1660:2329 · 354x530 at top 32, centred, r4 */
.aiers-acting-page .aiers-acting-preview__poster {
  position: absolute;
  top: 32px;
  left: 50%;
  width: 354px;
  height: 530px;
  max-width: none;
  border-radius: 4px;
  box-shadow: 0 0 40.944px rgba(0, 0, 0, .4);
  object-fit: cover;
  transform: translateX(-50%);
}

/* 1660:2316 · left 48 top 1572 w 654, column gap 64, centred */
.aiers-acting-page .aiers-acting-preview__closing {
  position: absolute;
  top: 1572px;
  left: 48px;
  width: 654px;
  text-align: center;
}

/* 1660:2317 · Line 16 is a 116x4 gradient stroke rotated -90deg, so it reads as
   a 4px-wide vertical line 116 tall, solid at the bottom and fading out toward
   the top. Drawn rather than shipped as an <img>: an <img> of a 116x4 SVG has
   to be rotated to stand up, and stretching it instead renders the bar
   horizontally — which is exactly what it did. */
.aiers-acting-page .aiers-acting-preview__rule {
  display: block;
  width: 4px;
  height: 116px;
  margin: 0 auto;
  background: linear-gradient(to top, #17a868 0%, rgba(23, 168, 104, 0) 100%);
}

.aiers-acting-page .aiers-acting-preview__punch {
  margin: 64px 0 0;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -1.32px;
  white-space: nowrap;
}

.aiers-acting-page .aiers-acting-preview__punch em { color: #37cf8c; font-style: normal; }

.aiers-acting-page .aiers-acting-preview__note {
  width: 570px;
  margin: 32px auto 0;
  color: rgba(255, 255, 255, .8);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -1.92px;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-preview__note b { color: #fff; font-weight: 700; }

/* Below the two-column switch the column is narrower than the comp canvas, so
   the whole section scales as one piece rather than reflowing. */
@media (max-width: 1279px) {
  .aiers-acting-page .aiers-acting-preview {
    height: auto;
    aspect-ratio: 750 / 2106;
    container-type: inline-size;
  }

  .aiers-acting-page .aiers-acting-preview > * { --k: calc(100cqw / 750); }

  .aiers-acting-page .aiers-acting-preview__head { top: calc(120 * var(--k)); left: calc(48 * var(--k)); width: calc(654 * var(--k)); }
  .aiers-acting-page .aiers-acting-preview__head h2 { font-size: calc(48 * var(--k)); letter-spacing: calc(-1.44 * var(--k)); }
  .aiers-acting-page .aiers-acting-preview__head > p { margin-top: calc(24 * var(--k)); font-size: calc(28 * var(--k)); letter-spacing: calc(-.56 * var(--k)); }
  .aiers-acting-page .aiers-acting-preview__film { width: calc(654 * var(--k)); height: calc(384 * var(--k)); margin-top: calc(40 * var(--k)); border-radius: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-preview__collage { top: calc(912 * var(--k)); width: calc(750 * var(--k)); height: calc(592 * var(--k)); }
  .aiers-acting-page .aiers-acting-preview__tile--moraeui2  { left: calc(-68 * var(--k)); top: calc(366 * var(--k)); width: calc(216 * var(--k)); height: calc(226 * var(--k)); }
  .aiers-acting-page .aiers-acting-preview__tile--2d        { left: calc(160 * var(--k)); top: calc(366 * var(--k)); width: calc(338 * var(--k)); height: calc(226 * var(--k)); }
  .aiers-acting-page .aiers-acting-preview__tile--dreamcore { left: calc(510 * var(--k)); top: calc(366 * var(--k)); width: calc(240 * var(--k)); height: calc(226 * var(--k)); }
  .aiers-acting-page .aiers-acting-preview__tile--ver2a     { left: calc(242 * var(--k)); top: calc(2 * var(--k));   width: calc(264 * var(--k)); height: calc(352 * var(--k)); }
  .aiers-acting-page .aiers-acting-preview__tile--ver2b     { left: calc(-34 * var(--k)); top: calc(2 * var(--k));   width: calc(264 * var(--k)); height: calc(352 * var(--k)); }
  .aiers-acting-page .aiers-acting-preview__tile--sweet     { left: calc(518 * var(--k)); top: 0;                    width: calc(266 * var(--k)); height: calc(354 * var(--k)); }
  .aiers-acting-page .aiers-acting-preview__poster { top: calc(32 * var(--k)); width: calc(354 * var(--k)); height: calc(530 * var(--k)); }
  .aiers-acting-page .aiers-acting-preview__closing { top: calc(1572 * var(--k)); left: calc(48 * var(--k)); width: calc(654 * var(--k)); }
  .aiers-acting-page .aiers-acting-preview__rule { width: calc(4 * var(--k)); height: calc(116 * var(--k)); }
  .aiers-acting-page .aiers-acting-preview__punch { margin-top: calc(64 * var(--k)); font-size: calc(44 * var(--k)); letter-spacing: calc(-1.32 * var(--k)); }
  .aiers-acting-page .aiers-acting-preview__note { width: calc(570 * var(--k)); margin-top: calc(32 * var(--k)); font-size: calc(32 * var(--k)); letter-spacing: calc(-1.92 * var(--k)); }
  .aiers-acting-page .aiers-acting-preview__bg--dodge { top: calc(-60 * var(--k)); width: calc(1228 * var(--k)); height: calc(2166 * var(--k)); }
  .aiers-acting-page .aiers-acting-preview__bg--screen { top: calc(-186 * var(--k)); width: calc(1722 * var(--k)); height: calc(1146 * var(--k)); }
}

/* ==========================================================================
   SEC 03 · 완성작 상영관 (감독의 노하우) — 1660:2358
   750 canvas = this column, so these are the comp's own numbers at 1:1.
   Scoped under .aiers-acting-page because the base layer resets p/h2 margins
   with `.aiers-acting-page p` (0,1,1) and would otherwise win.
   ========================================================================== */

.aiers-acting-page .aiers-acting-pains {
  position: relative;
  overflow: hidden;
  padding: 120px 48px;
  background: #0d0e0e;
  color: #fff;
}

/* 1660:2359 · image 2811, 1280x1706 at top 0, with its own fade to the section
   colour from 74.795% down. */
.aiers-acting-page .aiers-acting-pains__bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1280px;
  height: 1706px;
  max-width: none;
  object-fit: cover;
  transform: translateX(-50%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 74.795%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 74.795%, transparent 100%);
}

/* 1660:2360 · #340C0E ellipse under a 200 blur, bleeding past the section's
   bottom edge so it reads as one continuous glow into the next section. */
.aiers-acting-page .aiers-acting-pains__glow {
  position: absolute;
  bottom: -828px; /* anchor box at -428, plus the blur's 400 spread */
  left: calc(50% - 1px);
  width: 3544px;
  height: 1310px;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

/* 1660:2361 · w654, column, gap 160 between the two groups */
.aiers-acting-page .aiers-acting-pains__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 160px;
  align-items: center;
  width: 654px;
  margin-inline: auto;
}

/* 1660:2363 / 1660:2410 · gap 64 between a group's title and its content */
.aiers-acting-page .aiers-acting-pains__group {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 100%;
}

.aiers-acting-page .aiers-acting-pains__heading {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -1.44px;
  text-align: center;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-pains__heading em { color: #37cf8c; font-style: normal; }

/* 1660:2368 · card stack, w622, gap 24 */
.aiers-acting-page .aiers-acting-pains__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 622px;
  margin-inline: auto;
}

/* 1660:2369 · p40 r24 white, gap 32 inside */
.aiers-acting-page .aiers-acting-pains__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: clip;
  padding: 40px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 24px rgba(0, 0, 0, .06);
}

/* 1660:2372 · avatar + id, gap 24 */
.aiers-acting-page .aiers-acting-pains__who {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* 1660:2373 · 120x120 r6.857 on 기서 버건디 */
.aiers-acting-page .aiers-acting-pains__avatar {
  position: relative;
  flex: none;
  width: 120px;
  height: 120px;
  overflow: clip;
  border-radius: 6.857px;
  background: #861433;
}

.aiers-acting-page .aiers-acting-pains__avatar img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 121px;
  max-width: none;
  transform: translateX(-50%);
}

.aiers-acting-page .aiers-acting-pains__id {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 344px;
}

.aiers-acting-page .aiers-acting-pains__role {
  margin: 0;
  color: #751d35;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.52px;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-pains__name {
  margin: 0;
  color: #121212;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.64px;
  white-space: nowrap;
}

/* 1660:2378 · Figma's own 52x42 mark in #F6F4FA — not a burgundy typographic
   quote. It is placed at (490, 96) inside the head block (1660:2371), which
   itself starts at the card's 40px padding, hence 530 / 136 here. */
.aiers-acting-page .aiers-acting-pains__mark {
  position: absolute;
  top: 136px;
  left: 530px;
  width: 52px;
  height: 42px;
  pointer-events: none;
}

/* 1660:2379 · Line 22 is a 0-height vector with its 2px stroke drawn ABOVE
   the box (`inset: -2px 0 0 0`), so it contributes nothing to the stack: the
   card is 120 avatar + 32 + 0 + 32 + 126 quote inside 40 of padding = 390.
   A real 2px element made it 392 and, with the stale padding above, 418. */
.aiers-acting-page .aiers-acting-pains__rule {
  position: relative;
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  background: none;
}

.aiers-acting-page .aiers-acting-pains__rule::before {
  content: "";
  position: absolute;
  top: -2px;
  right: 0;
  left: 0;
  height: 2px;
  background: #ece7f5;
}

/* 1660:2380 · quote block, 8px side inset */
.aiers-acting-page .aiers-acting-pains__quote {
  margin: 0;
  padding-inline: 8px;
}

/* No keep-all: Figma's text node is `break-word`, and forcing Korean phrases
   to stay whole pushed card 03 — the only quote without a <br> on every line —
   to four lines instead of three. */
.aiers-acting-page .aiers-acting-pains__quote p {
  margin: 0;
  color: #121212;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.56px;
}

.aiers-acting-page .aiers-acting-pains__quote b { color: #751d35; font-weight: 700; }

/* 1660:2415 · the three result blocks, gap 120 */
.aiers-acting-page .aiers-acting-pains__steps {
  display: flex;
  flex-direction: column;
  gap: 120px;
  width: 100%;
}

/* 1660:2416 · film then caption, gap 32 */
.aiers-acting-page .aiers-acting-pains__step {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.aiers-acting-page .aiers-acting-pains__film {
  width: 100%;
  height: 384px;
  border-radius: 16px;
  object-fit: cover;
  background: #1f1f22;
}

/* 1660:2418 · caption block, 16px side inset, gap 8 */
.aiers-acting-page .aiers-acting-pains__caption {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-inline: 16px;
}

.aiers-acting-page .aiers-acting-pains__num {
  margin: 0;
  color: #37cf8c;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.96px;
}

.aiers-acting-page .aiers-acting-pains__title {
  margin: 0;
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -1.08px;
  word-break: keep-all;
}

/* Below the two-column switch the column is narrower than the 750 canvas, so
   the section scales as one piece instead of reflowing. */
@media (max-width: 1279px) {
  .aiers-acting-page .aiers-acting-pains { container-type: inline-size; padding: 0; }
  /* On the children, not the container: 100cqw inside the element that
     establishes the container resolves against its ancestor, not itself.
     __bg and __glow are siblings of __inner and need the unit too. */
  .aiers-acting-page .aiers-acting-pains > * { --k: calc(100cqw / 750); }
  .aiers-acting-page .aiers-acting-pains__inner {
    width: calc(654 * var(--k));
    gap: calc(160 * var(--k));
    padding-block: calc(120 * var(--k));
  }
  .aiers-acting-page .aiers-acting-pains__group { gap: calc(64 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__heading { font-size: calc(48 * var(--k)); letter-spacing: calc(-1.44 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__cards { width: calc(622 * var(--k)); gap: calc(24 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__card { padding: calc(40 * var(--k)); border-radius: calc(24 * var(--k)); gap: calc(32 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__who { gap: calc(24 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__avatar { width: calc(120 * var(--k)); height: calc(120 * var(--k)); border-radius: calc(6.857 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__avatar img { width: calc(121 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__id { width: calc(344 * var(--k)); gap: calc(4 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__role { font-size: calc(26 * var(--k)); letter-spacing: calc(-.52 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__name { font-size: calc(32 * var(--k)); letter-spacing: calc(-.64 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__mark { top: calc(136 * var(--k)); left: calc(530 * var(--k)); width: calc(52 * var(--k)); height: calc(42 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__quote { padding-inline: calc(8 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__quote p { font-size: calc(28 * var(--k)); letter-spacing: calc(-.56 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__steps { gap: calc(120 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__step { gap: calc(32 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__film { height: calc(384 * var(--k)); border-radius: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__caption { padding-inline: calc(16 * var(--k)); gap: calc(8 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__num { font-size: calc(32 * var(--k)); letter-spacing: calc(-.96 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__title { font-size: calc(36 * var(--k)); letter-spacing: calc(-1.08 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__bg { width: calc(1280 * var(--k)); height: calc(1706 * var(--k)); }
  .aiers-acting-page .aiers-acting-pains__glow { bottom: calc(-828 * var(--k)); width: calc(3544 * var(--k)); height: calc(1310 * var(--k)); }
}

/* ==========================================================================
   SEC 21 — 1660:2437 · "카메라가 움직이고, 인물이 연기하기 시작합니다"
   750 canvas = this column, so these are the comp's own numbers at 1:1.
   ========================================================================== */

.aiers-acting-page .aiers-acting-teaser {
  padding: 160px 48px;
  background: #0b111a;
  color: #fff;
}

/* 1660:2438 · w654, column, gap 48 */
.aiers-acting-page .aiers-acting-teaser__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  width: 654px;
  margin-inline: auto;
}

/* 1660:2439 · the alert card with the warning mark and avatar overlapping it */
.aiers-acting-page .aiers-acting-teaser__alert {
  position: relative;
  width: 622px;
  padding-top: 84.71px; /* 26.44 + 58.27 — the avatar/mark overhang */
}

/* 1660:2440 · the 129.54 square is the ROTATED bounding box; the glyph itself
   is 96.821 turned -26.1deg. Feeding 129.54 straight to the image scales it up
   by a third and drops the tilt — the box holds the size, the image turns. */
.aiers-acting-page .aiers-acting-teaser__warning {
  position: absolute;
  top: 0;
  left: 476px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 129.54px;
  height: 129.54px;
}

.aiers-acting-page .aiers-acting-teaser__warning img {
  width: 96.821px;
  height: 96.821px;
  max-width: none;
  transform: rotate(-26.1deg);
}

/* 1660:2448 · 100x104.545 at x262, sitting on the bubble's top edge */
.aiers-acting-page .aiers-acting-teaser__avatar {
  position: absolute;
  top: 26.44px;
  left: 262px;
  width: 100px;
  height: 104.545px;
  object-fit: cover;
}

/* 1660:2443 · 622x300, 2px #d93334, r16, 10% red fill, blur 40, red glow */
.aiers-acting-page .aiers-acting-teaser__bubble {
  position: relative;
  height: 300px;
  border: 2px solid #d93334;
  border-radius: 16px;
  background: rgba(217, 51, 52, .1);
  backdrop-filter: blur(40px);
  box-shadow: 0 0 24px rgba(228, 74, 75, .4);
}

/* 1660:2447 · pointer off the bubble's lower-left corner. Box solved from the
   comp's percentage insets against the 622x300 bubble; the vector inside is
   63.11x56.53 turned 30deg (its hypot() sizing resolves to that here). */
.aiers-acting-page .aiers-acting-teaser__tail {
  position: absolute;
  top: 242.51px;
  left: -14.08px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82.7px;
  height: 80.74px;
}

.aiers-acting-page .aiers-acting-teaser__tail img {
  width: 63.11px;
  height: 56.53px;
  max-width: none;
  transform: rotate(30deg);
}

/* 1660:2444 · w530 centred, nudged 6px down, gap 8 */
.aiers-acting-page .aiers-acting-teaser__bubble-copy {
  position: absolute;
  top: calc(50% + 6px);
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 530px;
  text-align: center;
  transform: translate(-50%, -50%);
}

.aiers-acting-page .aiers-acting-teaser__quote {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -1.08px;
  white-space: nowrap;
}

.aiers-acting-page .aiers-acting-teaser__sub {
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.78px;
  word-break: keep-all;
}

/* 1660:2449 · Line 16 is a 153.5x23 arrow rotated -90deg, so it stands 140 tall */
/* 1660:2449 · a 153.5x23 arrow rotated -90deg inside a 140-tall, 0-wide box.
   Rotating the <img> alone leaves its 140px layout height in flow while the
   visual box collapses to 23px, which pushed the 48px gaps either side out to
   106px. The wrapper carries the 140 height; the image rotates inside it. */
.aiers-acting-page .aiers-acting-teaser__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 140px;
}

.aiers-acting-page .aiers-acting-teaser__rule img {
  flex: none;
  width: 140px;
  height: 23.094px;
  max-width: none;
  transform: rotate(-90deg);
}

/* 1660:2450 · gap 64 between the head and the blocks */
.aiers-acting-page .aiers-acting-teaser__body {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 100%;
}

/* 1660:2452 · gap 16 eyebrow -> title, then 24 title -> lead */
.aiers-acting-page .aiers-acting-teaser__head { text-align: center; }

.aiers-acting-page .aiers-acting-teaser__eyebrow {
  margin: 0;
  color: #37cf8c;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.56px;
}

.aiers-acting-page .aiers-acting-teaser__head h2 {
  margin: 16px 0 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -1.44px;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-teaser__lead {
  margin: 24px 0 0;
  color: rgba(255, 255, 255, .8);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.56px;
  word-break: keep-all;
}

/* 1660:2457 · gap 120 between the two curriculum blocks */
.aiers-acting-page .aiers-acting-teaser__blocks {
  display: flex;
  flex-direction: column;
  gap: 120px;
  width: 100%;
}

/* 1660:2459 · label -> media gap 40; 1660:2458 media -> caption gap 32 */
.aiers-acting-page .aiers-acting-teaser__block {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.aiers-acting-page .aiers-acting-teaser__label {
  margin: 0;
  padding-inline: 8px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -1.08px;
  white-space: nowrap;
}

.aiers-acting-page .aiers-acting-teaser__label em { color: #37cf8c; font-style: normal; }

/* 1660:2462 · 2x2, 500 tall, 16 gutters */
.aiers-acting-page .aiers-acting-teaser__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
  height: 500px;
  width: 100%;
}

.aiers-acting-page .aiers-acting-teaser__cell {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  background: #16202c;
}

.aiers-acting-page .aiers-acting-teaser__cap {
  margin: 0;
  padding-inline: 16px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.96px;
  word-break: keep-all;
}

/* the grid block's caption sits 32 below the media, not 40 */
.aiers-acting-page .aiers-acting-teaser__cap--grid { margin-top: -8px; }

/* 1660:2471 · gap 80 between the three emotion shots */
.aiers-acting-page .aiers-acting-teaser__shots {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
}

/* 1660:2472 · film 384 then caption, gap 32 */
.aiers-acting-page .aiers-acting-teaser__shot {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.aiers-acting-page .aiers-acting-teaser__film {
  width: 100%;
  height: 384px;
  border-radius: 16px;
  object-fit: cover;
  background: #16202c;
}

@media (max-width: 1279px) {
  .aiers-acting-page .aiers-acting-teaser { container-type: inline-size; padding: 0; }
  .aiers-acting-page .aiers-acting-teaser__inner {
    --k: calc(100cqw / 750);
    width: calc(654 * var(--k));
    gap: calc(48 * var(--k));
    padding-block: calc(160 * var(--k));
  }
  .aiers-acting-page .aiers-acting-teaser__alert { width: calc(622 * var(--k)); padding-top: calc(84.71 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__warning { left: calc(476 * var(--k)); width: calc(129.54 * var(--k)); height: calc(129.54 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__warning img { width: calc(96.821 * var(--k)); height: calc(96.821 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__avatar { top: calc(26.44 * var(--k)); left: calc(262 * var(--k)); width: calc(100 * var(--k)); height: calc(104.545 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__bubble { height: calc(300 * var(--k)); border-radius: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__tail { top: calc(242.51 * var(--k)); left: calc(-14.08 * var(--k)); width: calc(82.7 * var(--k)); height: calc(80.74 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__tail img { width: calc(63.11 * var(--k)); height: calc(56.53 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__bubble-copy { width: calc(530 * var(--k)); gap: calc(8 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__quote { font-size: calc(36 * var(--k)); letter-spacing: calc(-1.08 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__sub { font-size: calc(26 * var(--k)); letter-spacing: calc(-.78 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__rule { height: calc(140 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__rule img { width: calc(140 * var(--k)); height: calc(23.094 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__body { gap: calc(64 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__eyebrow { font-size: calc(28 * var(--k)); letter-spacing: calc(-.56 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__head h2 { margin-top: calc(16 * var(--k)); font-size: calc(48 * var(--k)); letter-spacing: calc(-1.44 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__lead { margin-top: calc(24 * var(--k)); font-size: calc(28 * var(--k)); letter-spacing: calc(-.56 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__blocks { gap: calc(120 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__block { gap: calc(40 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__label { padding-inline: calc(8 * var(--k)); font-size: calc(36 * var(--k)); letter-spacing: calc(-1.08 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__grid { height: calc(500 * var(--k)); gap: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__cell { border-radius: calc(12 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__cap { padding-inline: calc(16 * var(--k)); font-size: calc(32 * var(--k)); letter-spacing: calc(-.96 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__cap--grid { margin-top: calc(-8 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__shots { gap: calc(80 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__shot { gap: calc(32 * var(--k)); }
  .aiers-acting-page .aiers-acting-teaser__film { height: calc(384 * var(--k)); border-radius: calc(16 * var(--k)); }
}

/* ==========================================================================
   SEC 7 — 1660:2484 · "다시 뽑지 마세요. 고치는 법을 배우면 됩니다"
   Reuses the SEC 21 alert-card component wholesale (same node geometry), then
   three before/after blocks. 750 canvas = this column, numbers are 1:1.
   ========================================================================== */

.aiers-acting-page .aiers-acting-fix {
  padding: 40px 48px 160px;
  background: #0b111a;
  color: #fff;
}

.aiers-acting-page .aiers-acting-fix__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  width: 654px;
  margin-inline: auto;
}

.aiers-acting-page .aiers-acting-fix__body {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 100%;
}

/* 1660:2504 · gap 120 between the three blocks */
.aiers-acting-page .aiers-acting-fix__blocks {
  display: flex;
  flex-direction: column;
  gap: 120px;
  width: 100%;
}

/* 1660:2505 · label -> media gap 40 */
.aiers-acting-page .aiers-acting-fix__block {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.aiers-acting-page .aiers-acting-fix__label {
  margin: 0;
  padding-inline: 8px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -1.08px;
  white-space: nowrap;
}

.aiers-acting-page .aiers-acting-fix__label em { color: #37cf8c; font-style: normal; }

/* 1660:2509 · stills then caption, gap 32 */
.aiers-acting-page .aiers-acting-fix__media {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

/* 1660:2510 · BEFORE over AFTER, gap 20 */
.aiers-acting-page .aiers-acting-fix__pair {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.aiers-acting-page .aiers-acting-fix__shot {
  position: relative;
  height: 384px;
  overflow: clip;
  border-radius: 16px;
  background: #16202c;
}

.aiers-acting-page .aiers-acting-fix__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1660:2512 · chip at top 20, centred on 50% - 254 so it hugs the left edge */
.aiers-acting-page .aiers-acting-fix__chip {
  position: absolute;
  top: 20px;
  left: calc(50% - 254px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  border-radius: 8px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  transform: translateX(-50%);
}

.aiers-acting-page .aiers-acting-fix__chip--before { background: #666; color: rgba(255, 255, 255, .7); }
.aiers-acting-page .aiers-acting-fix__chip--after  { background: #006664; color: #fff; }

.aiers-acting-page .aiers-acting-fix__cap {
  margin: 0;
  padding-inline: 16px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.96px;
  word-break: keep-all;
}

@media (max-width: 1279px) {
  .aiers-acting-page .aiers-acting-fix { container-type: inline-size; padding: 0; }
  .aiers-acting-page .aiers-acting-fix__inner {
    --k: calc(100cqw / 750);
    width: calc(654 * var(--k));
    gap: calc(48 * var(--k));
    padding: calc(40 * var(--k)) 0 calc(160 * var(--k));
  }
  .aiers-acting-page .aiers-acting-fix__body { gap: calc(64 * var(--k)); }
  .aiers-acting-page .aiers-acting-fix__blocks { gap: calc(120 * var(--k)); }
  .aiers-acting-page .aiers-acting-fix__block { gap: calc(40 * var(--k)); }
  .aiers-acting-page .aiers-acting-fix__label { padding-inline: calc(8 * var(--k)); font-size: calc(36 * var(--k)); letter-spacing: calc(-1.08 * var(--k)); }
  .aiers-acting-page .aiers-acting-fix__media { gap: calc(32 * var(--k)); }
  .aiers-acting-page .aiers-acting-fix__pair { gap: calc(20 * var(--k)); }
  .aiers-acting-page .aiers-acting-fix__shot { height: calc(384 * var(--k)); border-radius: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-fix__chip { top: calc(20 * var(--k)); left: calc(50% - 254 * var(--k)); padding: calc(4 * var(--k)) calc(16 * var(--k)); border-radius: calc(8 * var(--k)); font-size: calc(24 * var(--k)); }
  .aiers-acting-page .aiers-acting-fix__cap { padding-inline: calc(16 * var(--k)); font-size: calc(32 * var(--k)); letter-spacing: calc(-.96 * var(--k)); }
}

/* ==========================================================================
   SEC 20 — 1660:2543 · "같은 소스가, 보정을 거치면 '팔리는 퀄리티'가 됩니다"
   A fixed 750x2576 canvas. The copy column is absolutely placed at (48,40);
   the band, punch line and the two blurred ellipses sit in section coords.
   ========================================================================== */

.aiers-acting-page .aiers-acting-grade {
  position: relative;
  height: 2576px;
  overflow: hidden;
  background: #0b111a;
  color: #fff;
}

/* 1660:2544 · 818x426 at top 2060.58, blur 4, exclusion, image at 30% */
.aiers-acting-page .aiers-acting-grade__band {
  position: absolute;
  top: 2060.58px;
  left: 50%;
  width: 818px;
  height: 426px;
  max-width: none;
  object-fit: cover;
  opacity: .3;
  filter: blur(4px);
  mix-blend-mode: exclusion;
  transform: translateX(-50%);
  pointer-events: none;
}

/* 1660:2580 / 1660:2581 · the blur lives inside each SVG, so the element is the
   full 1870/1922 canvas offset back by 800 from its 270/322 anchor box. */
.aiers-acting-page .aiers-acting-grade__glow {
  position: absolute;
  max-width: none;
  pointer-events: none;
}

.aiers-acting-page .aiers-acting-grade__glow--a {
  top: calc(2396.58px - 800px);
  left: calc(572px - 800px);
  width: 1870px;
  height: 1870px;
}

.aiers-acting-page .aiers-acting-grade__glow--b {
  top: calc(1974.58px - 800px);
  left: calc(-166px - 800px);
  width: 1922px;
  height: 1922px;
}

/* 1660:2545 · left 48, top 40, w654, column gap 48 */
.aiers-acting-page .aiers-acting-grade__inner {
  position: absolute;
  top: 40px;
  left: 48px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  width: 654px;
}

.aiers-acting-page .aiers-acting-grade__body {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 100%;
}

/* 1660:2579 · centred on x374.5 / y2271.58, 44px, lh 1.5 */
.aiers-acting-page .aiers-acting-grade__punch {
  position: absolute;
  top: 2271.58px;
  left: 374.5px;
  margin: 0;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -1.32px;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.aiers-acting-page .aiers-acting-grade__punch em { color: #d7496f; font-style: normal; }

@media (max-width: 1279px) {
  .aiers-acting-page .aiers-acting-grade {
    container-type: inline-size;
    height: auto;
    aspect-ratio: 750 / 2576;
  }

  .aiers-acting-page .aiers-acting-grade > * { --k: calc(100cqw / 750); }

  .aiers-acting-page .aiers-acting-grade__band { top: calc(2060.58 * var(--k)); width: calc(818 * var(--k)); height: calc(426 * var(--k)); }
  .aiers-acting-page .aiers-acting-grade__glow--a { top: calc((2396.58 - 800) * var(--k)); left: calc((572 - 800) * var(--k)); width: calc(1870 * var(--k)); height: calc(1870 * var(--k)); }
  .aiers-acting-page .aiers-acting-grade__glow--b { top: calc((1974.58 - 800) * var(--k)); left: calc((-166 - 800) * var(--k)); width: calc(1922 * var(--k)); height: calc(1922 * var(--k)); }
  .aiers-acting-page .aiers-acting-grade__inner { top: calc(40 * var(--k)); left: calc(48 * var(--k)); width: calc(654 * var(--k)); gap: calc(48 * var(--k)); }
  .aiers-acting-page .aiers-acting-grade__body { gap: calc(64 * var(--k)); }
  .aiers-acting-page .aiers-acting-grade__punch { top: calc(2271.58 * var(--k)); left: calc(374.5 * var(--k)); font-size: calc(44 * var(--k)); letter-spacing: calc(-1.32 * var(--k)); }
}

.aiers-acting-page .aiers-acting-money {
  background: #0c0b0c;
}
.aiers-acting-page .aiers-acting-money__head {
  text-align: center;
}
.aiers-acting-page .aiers-acting-money .aiers-acting-heading em {
  color: #ef4f7f;
}
.aiers-acting-page .aiers-acting-money__list {
  display: grid;
  gap: 24px;
}
.aiers-acting-page .aiers-acting-money__card {
  position: relative;
  padding: 24px 20px 44%;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 24px rgba(0, 0, 0, .12);
  overflow: hidden;
}
.aiers-acting-page .aiers-acting-money__card::after {
  content: "";
  position: absolute;
  right: 2%;
  bottom: 0;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 60, 110, .16), rgba(230, 60, 110, 0) 68%);
}
.aiers-acting-page .aiers-acting-money__title {
  color: #b32d51;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.02em;
}
.aiers-acting-page .aiers-acting-money__desc {
  margin-top: 10px;
  color: #202824;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  word-break: keep-all;
}
.aiers-acting-page .aiers-acting-money__object {
  position: absolute;
  z-index: 1;
  height: auto;
}
.aiers-acting-page .aiers-acting-money__list > li:nth-child(1) .aiers-acting-money__object {
  right: -11.9%;
  bottom: -31.5%;
  width: 61%;
}
.aiers-acting-page .aiers-acting-money__list > li:nth-child(2) .aiers-acting-money__object {
  right: -7.7%;
  bottom: -30.6%;
  width: 58.5%;
}
.aiers-acting-page .aiers-acting-money__list > li:nth-child(3) .aiers-acting-money__object {
  right: -5.5%;
  bottom: -23.5%;
  width: 53%;
}

@media (min-width: 860px) {
  .aiers-acting-page .aiers-acting-money__list {
    gap: 32px;
  }

  .aiers-acting-page .aiers-acting-money__card {
    padding: 40px 36px 42%;
  }

  .aiers-acting-page .aiers-acting-money__title {
    font-size: 26px;
  }

  .aiers-acting-page .aiers-acting-money__desc {
    margin-top: 12px;
    font-size: 20px;
  }
}

/* ==========================================================================
   10 · 커리큘럼 타임테이블 — .aiers-acting-timetable (1660:2611 / 143:8317)

   Rebuilt 1:1 against the 750 canvas. The desktop body column IS 750 wide
   (654 content + 48 padding either side), so every Figma number is used
   verbatim; below the two-column switch the whole section scales as one
   piece off `--k`.

   Scoped under .aiers-acting-page: the base layer's `.aiers-acting-page p`
   (0,1,1) resets margins and would otherwise beat every single-class rule
   in here.
   ========================================================================== */

.aiers-acting-page .aiers-acting-timetable {
  position: relative;
  overflow: hidden;
  padding: 160px 48px 120px;
  background: #f5f8f6;
}

/* 1660:2784 · the previous (dark) section bleeding down as a V notch. */
.aiers-acting-page .aiers-acting-timetable__notch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  pointer-events: none;
}

.aiers-acting-page .aiers-acting-timetable__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 654px;
  margin-inline: auto;
}

/* 1660:2613 · title block, gap 24 */
.aiers-acting-page .aiers-acting-timetable__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.aiers-acting-page .aiers-acting-timetable__heading {
  margin: 0;
  color: #121212;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-timetable__lead {
  margin: 0;
  color: #666;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.56px;
  word-break: keep-all;
}

/* 1660:2617 · the two PART blocks, gap 48 */
.aiers-acting-page .aiers-acting-timetable__parts {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.aiers-acting-page .aiers-acting-timetable__part {
  display: flex;
  flex-direction: column;
}

/* 1660:2619 · green band, p32, gap 16, top corners only */
.aiers-acting-page .aiers-acting-timetable__parthead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-radius: 16px 16px 0 0;
  background: #006664;
}

.aiers-acting-page .aiers-acting-timetable__partmeta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
}

.aiers-acting-page .aiers-acting-timetable__badge {
  flex: none;
  /* Figma's 2px stroke sits outside the 4px/16px padding box, so the padding
     is trimmed by the border width to keep the chip 44 tall. */
  padding: 2px 14px;
  border: 2px solid #006664;
  border-radius: 8px;
  background: #fff;
  color: #006664;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.aiers-acting-page .aiers-acting-timetable__span {
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  line-height: 39px;
  white-space: nowrap;
}

.aiers-acting-page .aiers-acting-timetable__parttitle {
  margin: 0;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
}

/* 1660:2630 · white card. Figma draws its 2px stroke outside the 654 frame,
   so the padding is trimmed by the border width to keep the content — and
   therefore the dividers — at exactly 590. */
.aiers-acting-page .aiers-acting-timetable__partbody {
  padding: 32px 30px 30px;
  border: 2px solid #006664;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: #fff;
}

.aiers-acting-page .aiers-acting-timetable__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiers-acting-page .aiers-acting-timetable__list--am { gap: 24px; } /* 1660:2631 */
.aiers-acting-page .aiers-acting-timetable__list--pm { gap: 20px; } /* 1660:2710 */

/* 1660:2646 · stroke #99978D, width 2, dasharray 4 4. The Figma vector is
   0 tall — the stroke is centred on the baseline and contributes nothing to
   the stack — so the rule is drawn by a pseudo-element that overflows a
   zero-height <li>. Giving the <li> a real 2px would push every divider's
   24px gap out to 26. */
.aiers-acting-page .aiers-acting-timetable__divider {
  position: relative;
  height: 0;
}

.aiers-acting-page .aiers-acting-timetable__divider::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 2px;
  background-image: repeating-linear-gradient(to right, #99978d 0 4px, transparent 4px 8px);
}

/* 1660:2632 · row + chips, gap 28 */
.aiers-acting-page .aiers-acting-timetable__item {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.aiers-acting-page .aiers-acting-timetable__row {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.aiers-acting-page .aiers-acting-timetable__time {
  flex: none;
  margin: 0;
  color: #121212;
  font-size: 28px;
  font-weight: 500;
  line-height: 39px;
  white-space: nowrap;
}

.aiers-acting-page .aiers-acting-timetable__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* kicker and name sit flush — the 8px belongs to body → desc only. */
.aiers-acting-page .aiers-acting-timetable__label {
  display: flex;
  flex-direction: column;
}

.aiers-acting-page .aiers-acting-timetable__kicker {
  margin: 0;
  color: #006664;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
}

.aiers-acting-page .aiers-acting-timetable__name {
  margin: 0;
  color: #121212;
  font-size: 28px;
  font-weight: 700;
  line-height: 39px;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-timetable__name--tight { letter-spacing: -.28px; }

/* 34px, not `1.4` — Figma rounds 24 x 1.4 up to a 34px line box and every
   desc block's height in the metadata (68 / 102 / 136 / 170) is a multiple
   of it. Leaving it fractional loses ~0.4px a line and drifts the section. */
.aiers-acting-page .aiers-acting-timetable__desc {
  margin: 0;
  color: #666;
  font-size: 24px;
  font-weight: 500;
  line-height: 34px;
  word-break: keep-all;
}

/* 1660:2655 · the chip stack runs the full 590 card width, level with the
   time column — it is a sibling of the row, not a child of the copy. */
.aiers-acting-page .aiers-acting-timetable__tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiers-acting-page .aiers-acting-timetable__tag {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  border-radius: 8px;
  background: #fafafa;
}

/* Figma wraps the chip in a `pt-[2px]` margin box (1660:2642) inside a
   centred row; the margin box is what gets centred, so a 2px top margin
   reproduces it exactly — including the row's 46px height. */
.aiers-acting-page .aiers-acting-timetable__tagkey {
  flex: none;
  width: 86px;
  margin-top: 2px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #006664;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: .8px;
  text-align: center;
}

.aiers-acting-page .aiers-acting-timetable__tagkey--out {
  width: auto;
  background: #751d35;
  white-space: nowrap;
}

.aiers-acting-page .aiers-acting-timetable__tagval {
  min-width: 0;
  color: #121212;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.36px;
  word-break: keep-all;
}

/* Below the two-column switch the column is narrower than the 750 canvas,
   so the section scales as one piece instead of reflowing. */
@media (max-width: 1279px) {
  .aiers-acting-page .aiers-acting-timetable { container-type: inline-size; padding: 0; }
  /* `--k` cannot live on the container itself: 100cqw inside the element that
     establishes the container resolves against its ANCESTOR container, not
     itself. Declaring it on the children is what makes the unit real. */
  .aiers-acting-page .aiers-acting-timetable > * { --k: calc(100cqw / 750); }
  .aiers-acting-page .aiers-acting-timetable__inner {
    width: calc(654 * var(--k));
    gap: calc(80 * var(--k));
    padding: calc(160 * var(--k)) 0 calc(120 * var(--k));
  }
  .aiers-acting-page .aiers-acting-timetable__notch { height: calc(72 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__head { gap: calc(24 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__heading { font-size: calc(48 * var(--k)); line-height: 1.25; }
  .aiers-acting-page .aiers-acting-timetable__lead { font-size: calc(28 * var(--k)); letter-spacing: calc(-.56 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__parts { gap: calc(48 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__parthead { gap: calc(16 * var(--k)); padding: calc(32 * var(--k)); border-radius: calc(16 * var(--k)) calc(16 * var(--k)) 0 0; }
  .aiers-acting-page .aiers-acting-timetable__partmeta { gap: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__badge { padding: calc(2 * var(--k)) calc(14 * var(--k)); border-width: calc(2 * var(--k)); border-radius: calc(8 * var(--k)); font-size: calc(24 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__span { font-size: calc(28 * var(--k)); line-height: calc(39 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__parttitle { font-size: calc(32 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__partbody { padding: calc(32 * var(--k)) calc(30 * var(--k)) calc(30 * var(--k)); border-width: calc(2 * var(--k)); border-top: 0; border-radius: 0 0 calc(16 * var(--k)) calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__list--am { gap: calc(24 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__list--pm { gap: calc(20 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__divider::before { top: calc(-1 * var(--k)); height: calc(2 * var(--k)); background-size: calc(8 * var(--k)) 100%; background-image: linear-gradient(to right, #99978d 0 50%, transparent 50% 100%); background-repeat: repeat-x; }
  .aiers-acting-page .aiers-acting-timetable__item { gap: calc(28 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__row { gap: calc(48 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__time { font-size: calc(28 * var(--k)); line-height: calc(39 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__body { gap: calc(8 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__kicker { font-size: calc(24 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__name { font-size: calc(28 * var(--k)); line-height: calc(39 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__name--tight { letter-spacing: calc(-.28 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__desc { font-size: calc(24 * var(--k)); line-height: calc(34 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__tags { gap: calc(8 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__tag { gap: calc(24 * var(--k)); padding: calc(12 * var(--k)) calc(24 * var(--k)); border-radius: calc(8 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__tagkey { width: calc(86 * var(--k)); margin-top: calc(2 * var(--k)); padding: calc(6 * var(--k)) calc(12 * var(--k)); border-radius: calc(8 * var(--k)); font-size: calc(22 * var(--k)); line-height: calc(32 * var(--k)); letter-spacing: calc(.8 * var(--k)); }
  .aiers-acting-page .aiers-acting-timetable__tagkey--out { width: auto; }
  .aiers-acting-page .aiers-acting-timetable__tagval { font-size: calc(26 * var(--k)); letter-spacing: calc(-.36 * var(--k)); }
}

/* ==========================================================================
   12 · 수강 여정 — .aiers-acting-journey (1660:2838 / 143:8755)

   Rebuilt 1:1 against the 750 canvas: section 750x2689, px 64 / py 160, so
   the content column is 622 and every Figma number is used verbatim.

   Figma draws the card and badge strokes OUTSIDE their frames (the 622-wide
   card still reports a 542 content box, the 147.16 badge still reports 106
   of text plus 20.58 padding either side). Every padding in here is
   therefore trimmed by its own border width so the outer box lands on the
   Figma number instead of overshooting it.
   ========================================================================== */

.aiers-acting-page .aiers-acting-journey {
  padding: 160px 64px;
  background: #751d35;
}

.aiers-acting-page .aiers-acting-journey__inner {
  width: 622px;
  margin-inline: auto;
}

/* 1660:2840 · 48/1.25 x 2 lines = the 120 the frame reports */
.aiers-acting-page .aiers-acting-journey__heading {
  margin: 0;
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.48px;
  text-align: center;
  word-break: keep-all;
}

/* 1660:2841 · y184 under a 120-tall title = a 64 gap, then 80 between cards */
.aiers-acting-page .aiers-acting-journey__list {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}

/* 1660:2842 · 622x676 = 46+2 top, 219.88 header, 40, 320.12 list, 46+2 */
.aiers-acting-page .aiers-acting-journey__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 46px 38px;
  border: 2px solid #e6e6e6;
  border-radius: 16px;
  background: #fff;
}

/* 1660:2858 · the D-DAY card is the only one with the 4px burgundy stroke;
   its padding is trimmed by 4 rather than 2 so the card is still 622x676. */
.aiers-acting-page .aiers-acting-journey__step--now {
  padding: 44px 36px;
  border: 4px solid #751d35;
}

/* 1660:2892 / 1660:2893 · the connector lives on the card ABOVE it, so a
   removed stage cannot leave a dangling arrow. Figma hand-places the two at
   slightly different offsets inside the same 80px gap; both are reproduced.
   (1660:2890 / 1660:2891 are the hidden duplicates sitting over the cards —
   they are not drawn.) */
.aiers-acting-page .aiers-acting-journey__arrow {
  position: absolute;
  /* `100%` is the card's PADDING box, which is inset by the border on both
     edges — the border width has to be added back or the arrow rides 2px
     high. Same reason the D-DAY card below adds 4 instead of 2. */
  top: calc(100% + 2px + 22.95px);
  left: 50%;
  width: 194px;
  height: 42px;
  transform: translateX(-50%);
  pointer-events: none;
}

.aiers-acting-page .aiers-acting-journey__step--now .aiers-acting-journey__arrow {
  top: calc(100% + 4px + 20.32px);
}

/* 1660:2844 · badge 55.72, gap 27.44, id block 136.72 = 219.88 */
.aiers-acting-page .aiers-acting-journey__head {
  display: flex;
  flex-direction: column;
  gap: 27.44px;
  align-items: flex-start;
}

/* The 1.715px stroke is drawn as an inset ring rather than a border: Chrome
   quantises sub-pixel border-widths (1.715 renders as 1.5), which would eat
   0.43 off the badge's 55.72 height. An inset shadow costs no layout at all,
   so the padding can stay on Figma's own 6.86 / 20.58. */
.aiers-acting-page .aiers-acting-journey__badge {
  margin: 0;
  padding: 6.86px 20.58px;
  box-shadow: inset 0 0 0 1.715px #751d35;
  border-radius: 8px;
  background: rgba(117, 29, 53, .05);
  color: #751d35;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.aiers-acting-page .aiers-acting-journey__badge--now {
  background: #751d35;
  color: #fff;
}

/* 1660:2847 · 78 title + 13.72 + 45 body */
.aiers-acting-page .aiers-acting-journey__id {
  display: flex;
  flex-direction: column;
  gap: 13.72px;
  width: 100%;
}

.aiers-acting-page .aiers-acting-journey__phase {
  margin: 0;
  color: #333;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.4;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-journey__promise {
  margin: 0;
  color: #751d35;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* 1660:2851 · three 96.04 rows, gap 16 */
.aiers-acting-page .aiers-acting-journey__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Unlike the card, the row's own 96.04 INCLUDES its 2px stroke — the label
   sits at x32, i.e. 2 of border plus 30 of padding. */
.aiers-acting-page .aiers-acting-journey__item {
  display: flex;
  align-items: center;
  height: 96.04px;
  padding: 0 30px;
  border: 2px solid #e6e6e6;
  border-radius: 8px;
  background: #fafafa;
  color: #121212;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.56px;
  white-space: nowrap;
}

.aiers-acting-page .aiers-acting-journey__step--now .aiers-acting-journey__item {
  border-color: #751d35;
  background: rgba(117, 29, 53, .05);
  color: #751d35;
  font-weight: 700;
}

/* Below the two-column switch the column is narrower than the 750 canvas,
   so the section scales as one piece instead of reflowing. */
@media (max-width: 1279px) {
  .aiers-acting-page .aiers-acting-journey { container-type: inline-size; padding: 0; }
  .aiers-acting-page .aiers-acting-journey > * { --k: calc(100cqw / 750); }
  .aiers-acting-page .aiers-acting-journey__inner { width: calc(622 * var(--k)); padding: calc(160 * var(--k)) 0; }
  .aiers-acting-page .aiers-acting-journey__heading { font-size: calc(48 * var(--k)); letter-spacing: calc(-.48 * var(--k)); }
  .aiers-acting-page .aiers-acting-journey__list { gap: calc(80 * var(--k)); margin-top: calc(64 * var(--k)); }
  .aiers-acting-page .aiers-acting-journey__step { gap: calc(40 * var(--k)); padding: calc(46 * var(--k)) calc(38 * var(--k)); border-width: calc(2 * var(--k)); border-radius: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-journey__step--now { padding: calc(44 * var(--k)) calc(36 * var(--k)); border-width: calc(4 * var(--k)); }
  .aiers-acting-page .aiers-acting-journey__arrow { top: calc(100% + (2 + 22.95) * var(--k)); width: calc(194 * var(--k)); height: calc(42 * var(--k)); }
  .aiers-acting-page .aiers-acting-journey__step--now .aiers-acting-journey__arrow { top: calc(100% + (4 + 20.32) * var(--k)); }
  .aiers-acting-page .aiers-acting-journey__head { gap: calc(27.44 * var(--k)); }
  .aiers-acting-page .aiers-acting-journey__badge { padding: calc(6.86 * var(--k)) calc(20.58 * var(--k)); box-shadow: inset 0 0 0 calc(1.715 * var(--k)) #751d35; border-radius: calc(8 * var(--k)); font-size: calc(28 * var(--k)); }
  .aiers-acting-page .aiers-acting-journey__id { gap: calc(13.72 * var(--k)); }
  .aiers-acting-page .aiers-acting-journey__phase { font-size: calc(56 * var(--k)); }
  .aiers-acting-page .aiers-acting-journey__promise { font-size: calc(32 * var(--k)); }
  .aiers-acting-page .aiers-acting-journey__items { gap: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-journey__item { height: calc(96.04 * var(--k)); padding: 0 calc(30 * var(--k)); border-width: calc(2 * var(--k)); border-radius: calc(8 * var(--k)); font-size: calc(28 * var(--k)); letter-spacing: calc(-.56 * var(--k)); }
}

/* ==========================================================================
   13 · 강사 소개 및 후기 — .aiers-acting-instructor (1660:2894 / 157:10797)

   Rebuilt 1:1 against the 750 canvas: section 750x3417 on a #fcf7f9 rose
   wash, px 48 / py 120, content column 654.

   Stroke alignment is not consistent inside this frame. The score and review
   cards report their content at Figma's 251 / 590, i.e. the 2px stroke is
   drawn OUTSIDE, so their padding is trimmed to 30 to land on the same
   numbers. The instructor card is the odd one out — Figma insets it 36 on
   the left but still gives its body a fixed 586, which overflows the padding
   box by 4. That is a mistake in the file, so the padding here is symmetric
   32 and the body lands on 586 honestly, 2px narrower an inset than Figma.
   ========================================================================== */

.aiers-acting-page .aiers-acting-instructor {
  padding: 120px 48px;
  background: #fcf7f9;
}

.aiers-acting-page .aiers-acting-instructor__inner {
  display: flex;
  flex-direction: column;
  gap: 120px;
  width: 654px;
  margin-inline: auto;
}

/* 1660:2896 · title 120 + 40 + card 1165 = 1325 */
.aiers-acting-page .aiers-acting-instructor__block {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.aiers-acting-page .aiers-acting-instructor__heading {
  margin: 0;
  color: #121212;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.48px;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-instructor__heading em {
  color: #751d35;
  font-style: normal;
}

/* 1660:2898 · 654x1165 */
.aiers-acting-page .aiers-acting-instructor__card {
  padding: 40px 32px;
  border: 2px solid #e7c9d3;
  border-radius: 16px;
  background: #fff;
}

.aiers-acting-page .aiers-acting-instructor__body,
.aiers-acting-page .aiers-acting-instructor__top {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 1660:2902 · 160 avatar, gap 24, 450 name block */
.aiers-acting-page .aiers-acting-instructor__id {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  height: 160px;
}

.aiers-acting-page .aiers-acting-instructor__photo {
  flex: none;
  width: 160px;
  height: 160px;
  border-radius: 16px;
  object-fit: cover;
}

.aiers-acting-page .aiers-acting-instructor__name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 450px;
}

.aiers-acting-page .aiers-acting-instructor__who {
  margin: 0;
  color: #121212;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
}

.aiers-acting-page .aiers-acting-instructor__role {
  margin: 0;
  color: #444;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.24px;
}

/* 1660:2907 · the divider vector is 0 tall, so the rule is drawn by a
   pseudo-element and the 32px gaps either side stay 32. */
.aiers-acting-page .aiers-acting-instructor__rule {
  position: relative;
  height: 0;
}

.aiers-acting-page .aiers-acting-instructor__rule::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 2px;
  background: #e6e6e6;
}

/* 1660:2910 · Figma writes the dashes into the text and lets wrapped lines
   run flush left, so the marker is an inline ::before rather than a list
   bullet with its own indent. 8 lines x 41 = the 328 the frame reports. */
.aiers-acting-page .aiers-acting-instructor__career {
  margin: 0;
  padding: 0;
  color: #121212;
  font-size: 28px;
  font-weight: 400;
  line-height: 41px;
  list-style: none;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-instructor__career > li::before {
  content: "- ";
}

/* 1660:2912 */
.aiers-acting-page .aiers-acting-instructor__links {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 0;
}

.aiers-acting-page .aiers-acting-instructor__chip {
  display: inline-flex;
  align-items: center;
  height: 66px;
  padding: 0 24px;
  border-radius: 1998px;
  background: rgba(117, 29, 53, .05);
  color: #751d35;
  font-size: 24px;
  font-weight: 700;
  line-height: 36.8px;
  letter-spacing: -.36px;
  text-decoration: none;
  white-space: nowrap;
}

.aiers-acting-page a.aiers-acting-instructor__chip:hover {
  background: rgba(117, 29, 53, .1);
}

/* 1660:2917 · 586x399, 9 lines of 39 inside 24/28 padding */
.aiers-acting-page .aiers-acting-instructor__quote {
  margin: 0;
  padding: 24px 28px;
  border-radius: 8px;
  background: #751d35;
  color: #fff;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.52px;
  text-align: center;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-instructor__quote p { margin: 0; }
.aiers-acting-page .aiers-acting-instructor__quote b { font-weight: 700; }

/* 1660:2928 · 228 head + 64 + 1440.25 stack */
.aiers-acting-page .aiers-acting-instructor__proof {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.aiers-acting-page .aiers-acting-instructor__proofhead {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 1660:2930 carries no tracking, unlike the section title above it. */
.aiers-acting-page .aiers-acting-instructor__proofhead .aiers-acting-instructor__heading {
  letter-spacing: 0;
}

.aiers-acting-page .aiers-acting-instructor__lead {
  margin: 0;
  color: #666;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-instructor__stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 1660:2935 · two 315 cards, gap 24 */
.aiers-acting-page .aiers-acting-instructor__scores {
  display: flex;
  gap: 24px;
  margin: 0;
}

.aiers-acting-page .aiers-acting-instructor__score {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  min-width: 0;
  height: 280px;
  padding: 22px 30px;
  border: 2px solid #e7c9d3;
  border-radius: 16px;
  background: #fff;
}

.aiers-acting-page .aiers-acting-instructor__scorekey {
  width: 100%;
  color: #751d35;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.aiers-acting-page .aiers-acting-instructor__scoreval {
  margin: 0;
  color: #121212;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.aiers-acting-page .aiers-acting-instructor__scorenote {
  width: 100%;
  margin: 0;
  color: #121212;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

.aiers-acting-page .aiers-acting-instructor__stars {
  flex: none;
  width: 243.112px;
  height: 46.752px;
}

/* 1660:2956 · 654 wide, 24/32 inset, inner column gap 12 */
.aiers-acting-page .aiers-acting-instructor__review {
  padding: 22px 30px;
  border: 2px solid #e7c9d3;
  border-radius: 16px;
  background: #fff;
}

.aiers-acting-page .aiers-acting-instructor__reviewbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.aiers-acting-page .aiers-acting-instructor__reviewtext {
  width: 100%;
  margin: 0;
  color: #121212;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
}

.aiers-acting-page .aiers-acting-instructor__reviewtext p { margin: 0; }

.aiers-acting-page .aiers-acting-instructor__reviewrule {
  position: relative;
  width: 100%;
  height: 0;
}

.aiers-acting-page .aiers-acting-instructor__reviewrule::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 2px;
  background: #e8d6d4;
}

.aiers-acting-page .aiers-acting-instructor__reviewby {
  width: 100%;
  margin: 0;
  color: #9a9a9a;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
}

/* Below the two-column switch the column is narrower than the 750 canvas,
   so the section scales as one piece instead of reflowing. */
@media (max-width: 1279px) {
  .aiers-acting-page .aiers-acting-instructor { container-type: inline-size; padding: 0; }
  .aiers-acting-page .aiers-acting-instructor > * { --k: calc(100cqw / 750); }
  .aiers-acting-page .aiers-acting-instructor__inner { width: calc(654 * var(--k)); gap: calc(120 * var(--k)); padding: calc(120 * var(--k)) 0; }
  .aiers-acting-page .aiers-acting-instructor__block { gap: calc(40 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__heading { font-size: calc(48 * var(--k)); letter-spacing: calc(-.48 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__card { padding: calc(40 * var(--k)) calc(32 * var(--k)); border-width: calc(2 * var(--k)); border-radius: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__body,
  .aiers-acting-page .aiers-acting-instructor__top { gap: calc(32 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__id { gap: calc(24 * var(--k)); height: calc(160 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__photo { width: calc(160 * var(--k)); height: calc(160 * var(--k)); border-radius: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__name { gap: calc(4 * var(--k)); width: calc(450 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__who { font-size: calc(36 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__role { font-size: calc(24 * var(--k)); letter-spacing: calc(-.24 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__rule::before { top: calc(-1 * var(--k)); height: calc(2 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__career { font-size: calc(28 * var(--k)); line-height: calc(41 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__links { gap: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__chip { height: calc(66 * var(--k)); padding: 0 calc(24 * var(--k)); font-size: calc(24 * var(--k)); line-height: calc(36.8 * var(--k)); letter-spacing: calc(-.36 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__quote { padding: calc(24 * var(--k)) calc(28 * var(--k)); border-radius: calc(8 * var(--k)); font-size: calc(26 * var(--k)); letter-spacing: calc(-.52 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__proof { gap: calc(64 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__proofhead { gap: calc(24 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__lead { font-size: calc(28 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__stack { gap: calc(24 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__scores { gap: calc(24 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__score { gap: calc(4 * var(--k)); height: calc(280 * var(--k)); padding: calc(22 * var(--k)) calc(30 * var(--k)); border-width: calc(2 * var(--k)); border-radius: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__scorekey { font-size: calc(28 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__scoreval { font-size: calc(64 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__scorenote { font-size: calc(24 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__stars { width: calc(243.112 * var(--k)); height: calc(46.752 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__review { padding: calc(22 * var(--k)) calc(30 * var(--k)); border-width: calc(2 * var(--k)); border-radius: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__reviewbody { gap: calc(12 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__reviewtext { font-size: calc(28 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__reviewrule::before { top: calc(-1 * var(--k)); height: calc(2 * var(--k)); }
  .aiers-acting-page .aiers-acting-instructor__reviewby { font-size: calc(24 * var(--k)); }
}

/* ==========================================================================
   14 · 강사 인터뷰 — .aiers-acting-interview (1660:3011 / 157:11035)

   Rebuilt 1:1 against the 750 canvas: 750x2411 on a #f5e9ed rose ground,
   px 48 / py 120, content column 654.

   The 2px GISEO 600 card stroke is drawn outside the frame — Figma insets
   the card body 48/40 and still gives it 574 of width — so the padding is
   trimmed by the border width. The avatar's blue ring is the opposite: it
   eats into its own 100px box, which is what leaves the photo at 96.
   ========================================================================== */

.aiers-acting-page .aiers-acting-interview {
  padding: 120px 48px;
  background: #f5e9ed;
}

.aiers-acting-page .aiers-acting-interview__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 654px;
  margin-inline: auto;
}

.aiers-acting-page .aiers-acting-interview__heading {
  margin: 0;
  color: #141413;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  word-break: keep-all;
}

/* 1660:3014 · three cards, gap 20 */
.aiers-acting-page .aiers-acting-interview__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 1660:3015 · 654 wide, 48/40 inset, 574 of body */
.aiers-acting-page .aiers-acting-interview__item {
  overflow: hidden;
  padding: 46px 38px;
  border: 2px solid #751d35;
  border-radius: 16px;
  background: #fff;
}

.aiers-acting-page .aiers-acting-interview__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 1660:3017 · avatar 100, gap 14, question block 145 */
.aiers-acting-page .aiers-acting-interview__ask {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.aiers-acting-page .aiers-acting-interview__avatar {
  display: block;
  flex: none;
  width: 100px;
  height: 100px;
  padding: 2px;
  border: 2px solid #6ca2de;
  border-radius: 50%;
  background: #2669b4;
}

.aiers-acting-page .aiers-acting-interview__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.aiers-acting-page .aiers-acting-interview__q {
  display: flex;
  flex-direction: column;
}

/* 45 and 50, not 1.6 / 1.4 — Figma rounds both line boxes, and the metadata
   heights (45 for the label, 100 for two title lines, 315 / 270 / 225 for
   the answers) are exact multiples of the rounded values. */
.aiers-acting-page .aiers-acting-interview__no {
  margin: 0;
  color: #751d35;
  font-size: 28px;
  font-weight: 700;
  line-height: 45px;
}

.aiers-acting-page .aiers-acting-interview__title {
  margin: 0;
  color: #121212;
  font-size: 36px;
  font-weight: 700;
  line-height: 50px;
}

.aiers-acting-page .aiers-acting-interview__answer {
  margin: 0;
  color: #444;
  font-size: 28px;
  font-weight: 500;
  line-height: 45px;
  letter-spacing: -.56px;
}

/* Below the two-column switch the column is narrower than the 750 canvas,
   so the section scales as one piece instead of reflowing. */
@media (max-width: 1279px) {
  .aiers-acting-page .aiers-acting-interview { container-type: inline-size; padding: 0; }
  .aiers-acting-page .aiers-acting-interview > * { --k: calc(100cqw / 750); }
  .aiers-acting-page .aiers-acting-interview__inner { width: calc(654 * var(--k)); gap: calc(64 * var(--k)); padding: calc(120 * var(--k)) 0; }
  .aiers-acting-page .aiers-acting-interview__heading { font-size: calc(48 * var(--k)); }
  .aiers-acting-page .aiers-acting-interview__list { gap: calc(20 * var(--k)); }
  .aiers-acting-page .aiers-acting-interview__item { padding: calc(46 * var(--k)) calc(38 * var(--k)); border-width: calc(2 * var(--k)); border-radius: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-interview__body { gap: calc(24 * var(--k)); }
  .aiers-acting-page .aiers-acting-interview__ask { gap: calc(14 * var(--k)); }
  .aiers-acting-page .aiers-acting-interview__avatar { width: calc(100 * var(--k)); height: calc(100 * var(--k)); padding: calc(2 * var(--k)); border-width: calc(2 * var(--k)); }
  .aiers-acting-page .aiers-acting-interview__no { font-size: calc(28 * var(--k)); line-height: calc(45 * var(--k)); }
  .aiers-acting-page .aiers-acting-interview__title { font-size: calc(36 * var(--k)); line-height: calc(50 * var(--k)); }
  .aiers-acting-page .aiers-acting-interview__answer { font-size: calc(28 * var(--k)); line-height: calc(45 * var(--k)); letter-spacing: calc(-.56 * var(--k)); }
}

/* ==========================================================================
   15 · 사용 프로그램 안내 — .aiers-acting-tools (1660:3039 / 157:17600)

   Rebuilt 1:1 against the 750 canvas: 750x2340 on #f5f8f6, px 64 / py 120,
   content column 622. ONE column of five full-width cards — Figma has no
   two-up state at any width, and splitting them into a grid orphans the
   fifth card mid-row.

   Card strokes are drawn outside again (48 of inset, 526 of body inside a
   622 card), so the 48 padding is trimmed to 46. The logo tiles are the
   opposite: their ring eats into their own 100px box.
   ========================================================================== */

.aiers-acting-page .aiers-acting-tools {
  padding: 120px 64px;
  background: #f5f8f6;
}

.aiers-acting-page .aiers-acting-tools__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 622px;
  margin-inline: auto;
}

.aiers-acting-page .aiers-acting-tools__heading {
  margin: 0;
  color: #121212;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-tools__heading em {
  color: #006664;
  font-style: normal;
}

.aiers-acting-page .aiers-acting-tools__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiers-acting-page .aiers-acting-tools__card {
  overflow: hidden;
  padding: 46px;
  border: 2px solid #e6e6e6;
  border-radius: 16px;
  background: #fafafa;
}

.aiers-acting-page .aiers-acting-tools__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 1660:3046 · 100 tile, gap 20, 446 of copy */
.aiers-acting-page .aiers-acting-tools__head {
  display: flex;
  gap: 20px;
  align-items: center;
}

.aiers-acting-page .aiers-acting-tools__logo {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100px;
  height: 100px;
  border: 2px solid #e6e6e6;
  border-radius: 8px;
  background: #fff;
}

/* 1660:3047 / 1660:3096 · the two bitmap tiles carry a 1.667 ring and a
   10px radius rather than the 2 / 8 the glyph tiles use. */
.aiers-acting-page .aiers-acting-tools__logo--mid,
.aiers-acting-page .aiers-acting-tools__logo--photo {
  border-width: 1.667px;
  border-radius: 10px;
}

.aiers-acting-page .aiers-acting-tools__logo--photo {
  border-width: 2px;
  border-radius: 12px;
  background: none;
}

.aiers-acting-page .aiers-acting-tools__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The glyph tiles hold a fixed-size mark instead of a cover-cropped photo. */
.aiers-acting-page .aiers-acting-tools__glyph--mid {
  width: 66.667px;
  height: 55.556px;
}

.aiers-acting-page .aiers-acting-tools__glyph--sq {
  width: 70px;
  height: 70px;
  transform: translate(1px, .74px);
}

.aiers-acting-page .aiers-acting-tools__id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 446px;
}

/* 1660:3052 · 22/1 inside 12/20 padding = the 46 the frame reports */
.aiers-acting-page .aiers-acting-tools__tag {
  padding: 12px 20px;
  border-radius: 1998px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.294px;
  white-space: nowrap;
}

.aiers-acting-page .aiers-acting-tools__tag--paid { background: rgba(255, 122, 138, .1); color: #ff426b; }
.aiers-acting-page .aiers-acting-tools__tag--free { background: #e8f8ee; color: #16a34a; }
.aiers-acting-page .aiers-acting-tools__tag--opt  { background: rgba(18, 18, 18, .1); color: #666; }

.aiers-acting-page .aiers-acting-tools__name {
  width: 100%;
  margin: 0;
  color: #141413;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
}

/* The blank line between the summary and the plan notes is a real (zero
   width) line in Figma, so it is an empty paragraph rather than a margin —
   that is what keeps the block on 210 / 252 / 42. */
.aiers-acting-page .aiers-acting-tools__desc {
  color: #666;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.5;
}

.aiers-acting-page .aiers-acting-tools__desc p { margin: 0; }

/* Below the two-column switch the column is narrower than the 750 canvas,
   so the section scales as one piece instead of reflowing. */
@media (max-width: 1279px) {
  .aiers-acting-page .aiers-acting-tools { container-type: inline-size; padding: 0; }
  .aiers-acting-page .aiers-acting-tools > * { --k: calc(100cqw / 750); }
  .aiers-acting-page .aiers-acting-tools__inner { width: calc(622 * var(--k)); gap: calc(64 * var(--k)); padding: calc(120 * var(--k)) 0; }
  .aiers-acting-page .aiers-acting-tools__heading { font-size: calc(48 * var(--k)); }
  .aiers-acting-page .aiers-acting-tools__list { gap: calc(20 * var(--k)); }
  .aiers-acting-page .aiers-acting-tools__card { padding: calc(46 * var(--k)); border-width: calc(2 * var(--k)); border-radius: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-tools__body { gap: calc(20 * var(--k)); }
  .aiers-acting-page .aiers-acting-tools__head { gap: calc(20 * var(--k)); }
  .aiers-acting-page .aiers-acting-tools__logo { width: calc(100 * var(--k)); height: calc(100 * var(--k)); border-width: calc(2 * var(--k)); border-radius: calc(8 * var(--k)); }
  .aiers-acting-page .aiers-acting-tools__logo--mid { border-width: calc(1.667 * var(--k)); border-radius: calc(10 * var(--k)); }
  .aiers-acting-page .aiers-acting-tools__logo--photo { border-width: calc(2 * var(--k)); border-radius: calc(12 * var(--k)); }
  .aiers-acting-page .aiers-acting-tools__glyph--mid { width: calc(66.667 * var(--k)); height: calc(55.556 * var(--k)); }
  .aiers-acting-page .aiers-acting-tools__glyph--sq { width: calc(70 * var(--k)); height: calc(70 * var(--k)); transform: translate(calc(1 * var(--k)), calc(.74 * var(--k))); }
  .aiers-acting-page .aiers-acting-tools__id { width: calc(446 * var(--k)); }
  .aiers-acting-page .aiers-acting-tools__tag { padding: calc(12 * var(--k)) calc(20 * var(--k)); font-size: calc(22 * var(--k)); letter-spacing: calc(-.294 * var(--k)); }
  .aiers-acting-page .aiers-acting-tools__name { font-size: calc(36 * var(--k)); }
  .aiers-acting-page .aiers-acting-tools__desc { font-size: calc(28 * var(--k)); }
}

/* ==========================================================================
   16 · 기초/심화 비교 추천 — .aiers-acting-compare (1660:3102 / 157:13058)

   Rebuilt 1:1 against the 750 canvas: 750x1911 on #fafafa, px 48 / py 120,
   content column 654. The two cards STACK — Figma puts 기초 at y=0 and 심화
   at y=727 inside one column, never side by side.

   Both cards are plain border-box here (padding 40, inset 42 and 44), which
   is what puts them on Figma's own 687 / 652. Figma additionally pins their
   bodies to a fixed 574 that overflows the padding box by 4 and 8; the body
   is 100% here instead, which changes no line break.

   The hollow star (U+2606) is missing from Pretendard and falls back to a
   filled glyph in several stacks, so the whole row is filled stars and the
   "empty" ones are knocked back instead.
   ========================================================================== */

.aiers-acting-page .aiers-acting-compare {
  padding: 120px 48px;
  background: #fafafa;
}

.aiers-acting-page .aiers-acting-compare__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 654px;
  margin-inline: auto;
}

.aiers-acting-page .aiers-acting-compare__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.aiers-acting-page .aiers-acting-compare__heading {
  margin: 0;
  color: #121212;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.25;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-compare__lead {
  margin: 0;
  color: #666;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.56px;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-compare__list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.aiers-acting-page .aiers-acting-compare__card {
  overflow: hidden;
  padding: 40px;
  border: 2px solid #e6e6e6;
  border-radius: 16px;
  background: #fff;
}

/* 1660:3135 · the course this page sells gets a 4px teal edge and a teal
   wash; that is the only thing separating it from the sibling card. */
.aiers-acting-page .aiers-acting-compare__card--now {
  border: 4px solid #006664;
  background: rgba(0, 102, 100, .05);
}

.aiers-acting-page .aiers-acting-compare__body,
.aiers-acting-page .aiers-acting-compare__top {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.aiers-acting-page .aiers-acting-compare__intro,
.aiers-acting-page .aiers-acting-compare__forwhom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

/* 1660:3113 · 24/1.25 inside 10/16 padding = the 50 the frame reports */
.aiers-acting-page .aiers-acting-compare__level {
  margin: 0;
  padding: 10px 16px;
  border-radius: 8px;
  background: #006664;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.48px;
  white-space: nowrap;
}

.aiers-acting-page .aiers-acting-compare__staroff {
  color: rgba(255, 255, 255, .35);
}

.aiers-acting-page .aiers-acting-compare__id {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.aiers-acting-page .aiers-acting-compare__name {
  margin: 0;
  color: #121212;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.72px;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-compare__card--now .aiers-acting-compare__name {
  color: #006664;
}

/* 38, not 1.45 — Figma rounds the 26px line box up, and the copy blocks it
   reports (76 for two lines, 38 for the label) are multiples of it. */
.aiers-acting-page .aiers-acting-compare__desc {
  margin: 0;
  color: #444;
  font-size: 26px;
  font-weight: 500;
  line-height: 38px;
  letter-spacing: -.52px;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-compare__label {
  margin: 0;
  color: #121212;
  font-size: 26px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: -.52px;
}

.aiers-acting-page .aiers-acting-compare__checks {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiers-acting-page .aiers-acting-compare__checks > li {
  display: flex;
  gap: 20px;
  align-items: center;
  color: rgba(18, 18, 18, .8);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.78px;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-compare__card--now .aiers-acting-compare__checks > li {
  color: #006664;
  font-weight: 600;
}

.aiers-acting-page .aiers-acting-compare__check {
  flex: none;
  width: 32px;
  height: 32px;
}

/* 1660:3133 · 28/1.5 inside 20 of padding and a 2px edge = 86 */
.aiers-acting-page .aiers-acting-compare__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 2px solid #006664;
  border-radius: 16px;
  color: #006664;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.84px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.aiers-acting-page .aiers-acting-compare__cta--solid {
  background: #006664;
  color: #fff;
}

/* Below the two-column switch the column is narrower than the 750 canvas,
   so the section scales as one piece instead of reflowing. */
@media (max-width: 1279px) {
  .aiers-acting-page .aiers-acting-compare { container-type: inline-size; padding: 0; }
  .aiers-acting-page .aiers-acting-compare > * { --k: calc(100cqw / 750); }
  .aiers-acting-page .aiers-acting-compare__inner { width: calc(654 * var(--k)); gap: calc(64 * var(--k)); padding: calc(120 * var(--k)) 0; }
  .aiers-acting-page .aiers-acting-compare__head { gap: calc(24 * var(--k)); }
  .aiers-acting-page .aiers-acting-compare__heading { font-size: calc(48 * var(--k)); }
  .aiers-acting-page .aiers-acting-compare__lead { font-size: calc(28 * var(--k)); letter-spacing: calc(-.56 * var(--k)); }
  .aiers-acting-page .aiers-acting-compare__list { gap: calc(40 * var(--k)); }
  .aiers-acting-page .aiers-acting-compare__card { padding: calc(40 * var(--k)); border-width: calc(2 * var(--k)); border-radius: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-compare__card--now { border-width: calc(4 * var(--k)); }
  .aiers-acting-page .aiers-acting-compare__body,
  .aiers-acting-page .aiers-acting-compare__top { gap: calc(40 * var(--k)); }
  .aiers-acting-page .aiers-acting-compare__intro,
  .aiers-acting-page .aiers-acting-compare__forwhom { gap: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-compare__level { padding: calc(10 * var(--k)) calc(16 * var(--k)); border-radius: calc(8 * var(--k)); font-size: calc(24 * var(--k)); letter-spacing: calc(-.48 * var(--k)); }
  .aiers-acting-page .aiers-acting-compare__id { gap: calc(8 * var(--k)); }
  .aiers-acting-page .aiers-acting-compare__name { font-size: calc(36 * var(--k)); letter-spacing: calc(-.72 * var(--k)); }
  .aiers-acting-page .aiers-acting-compare__desc,
  .aiers-acting-page .aiers-acting-compare__label { font-size: calc(26 * var(--k)); line-height: calc(38 * var(--k)); letter-spacing: calc(-.52 * var(--k)); }
  .aiers-acting-page .aiers-acting-compare__checks { gap: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-compare__checks > li { gap: calc(20 * var(--k)); font-size: calc(26 * var(--k)); letter-spacing: calc(-.78 * var(--k)); }
  .aiers-acting-page .aiers-acting-compare__check { width: calc(32 * var(--k)); height: calc(32 * var(--k)); }
  .aiers-acting-page .aiers-acting-compare__cta { padding: calc(20 * var(--k)); border-width: calc(2 * var(--k)); border-radius: calc(16 * var(--k)); font-size: calc(28 * var(--k)); letter-spacing: calc(-.84 * var(--k)); }
}

/* ==========================================================================
   17 · FAQ — .aiers-acting-faq (1660:3161 / 143:8950)

   Rebuilt 1:1 against the 750 canvas: 750x1742. This frame is NOT autolaid
   out — Figma pins the title at y176 and the accordion at y316, and the
   section runs 208 past the last row, so the geometry is expressed as
   padding 176 / 48 / 208 with an 80 gap rather than a shared rhythm.

   Figma shows all five rows expanded (1218 of accordion). The page ships the
   house single-open accordion instead, so only the open row measures 258 —
   a closed one is 90, the row minus its body and the 24 gap that goes with
   it. The markup contract (data-faq-list / article / button / is-open) is
   what jip-analytics-detail.js binds to and is load-bearing.

   Row rules are inset shadows, not borders: the rows stack at 0/258/516/774
   /996, i.e. exactly their own heights, so a real 2px border-top would push
   every row down by 2.
   ========================================================================== */

.aiers-acting-page .aiers-acting-faq {
  padding: 176px 48px 208px;
  background: #fff;
}

.aiers-acting-page .aiers-acting-faq__inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 654px;
  margin-inline: auto;
}

.aiers-acting-page .aiers-acting-faq__heading {
  margin: 0;
  color: #000;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.aiers-acting-page .aiers-acting-faq__list {
  display: flex;
  flex-direction: column;
}

/* 1660:3165 · 24/32 padding, 24 between the question and its answer */
.aiers-acting-page .aiers-acting-faq__item {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 32px;
  background: #fafafa;
  box-shadow: inset 0 2px 0 #e6e6e6;
}

/* 1660:3167 · Q label and question share a 24 gap; the chevron sits flush
   against the question's right edge (Figma's title track is 558 of 590). */
.aiers-acting-page .aiers-acting-faq__q {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.aiers-acting-page .aiers-acting-faq__no {
  flex: none;
  margin-right: 24px;
  color: #006664;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.aiers-acting-page .aiers-acting-faq__label {
  flex: 1 0 0;
  min-width: 0;
  color: #000;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
}

/* The glyph is 21.667x12.333 inside a 32 box — Figma's own outline-cheveron
   at its own size, not a scaled house icon. */
.aiers-acting-page .aiers-acting-faq__chevron {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #737373;
  /* Keeps `event.target` on the button itself, and stops the glyph from
     stealing the hit area at the right edge. */
  pointer-events: none;
}

.aiers-acting-page .aiers-acting-faq__chevron svg {
  width: 21.667px;
  height: 12.333px;
  transition: transform .18s ease;
}

.aiers-acting-page .aiers-acting-faq__item.is-open .aiers-acting-faq__chevron svg {
  transform: rotate(180deg);
}

/* 1660:3171 · the answer is indented to clear the Q label: 60 in, 32 out. */
.aiers-acting-page .aiers-acting-faq__a {
  padding: 0 32px 0 60px;
  border-radius: 16px;
}

.aiers-acting-page .aiers-acting-faq__a p {
  margin: 0;
  color: #737373;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
}

/* Driven from BOTH the state class and the `hidden` attribute that
   assets/main.js writes, so the two never disagree: with JS the attribute
   leads, without JS the class leaves exactly the first answer open. */
.aiers-acting-page .aiers-acting-faq__item:not(.is-open) .aiers-acting-faq__a,
.aiers-acting-page .aiers-acting-faq__a[hidden] {
  display: none;
}

/* Below the two-column switch the column is narrower than the 750 canvas,
   so the section scales as one piece instead of reflowing. */
@media (max-width: 1279px) {
  .aiers-acting-page .aiers-acting-faq { container-type: inline-size; padding: 0; }
  .aiers-acting-page .aiers-acting-faq > * { --k: calc(100cqw / 750); }
  .aiers-acting-page .aiers-acting-faq__inner { width: calc(654 * var(--k)); gap: calc(80 * var(--k)); padding: calc(176 * var(--k)) 0 calc(208 * var(--k)); }
  .aiers-acting-page .aiers-acting-faq__heading { font-size: calc(48 * var(--k)); }
  .aiers-acting-page .aiers-acting-faq__item { gap: calc(24 * var(--k)); padding: calc(24 * var(--k)) calc(32 * var(--k)); box-shadow: inset 0 calc(2 * var(--k)) 0 #e6e6e6; }
  .aiers-acting-page .aiers-acting-faq__no { margin-right: calc(24 * var(--k)); font-size: calc(28 * var(--k)); }
  .aiers-acting-page .aiers-acting-faq__label { font-size: calc(28 * var(--k)); }
  .aiers-acting-page .aiers-acting-faq__chevron { width: calc(32 * var(--k)); height: calc(32 * var(--k)); }
  .aiers-acting-page .aiers-acting-faq__chevron svg { width: calc(21.667 * var(--k)); height: calc(12.333 * var(--k)); }
  .aiers-acting-page .aiers-acting-faq__a { padding: 0 calc(32 * var(--k)) 0 calc(60 * var(--k)); border-radius: calc(16 * var(--k)); }
  .aiers-acting-page .aiers-acting-faq__a p { font-size: calc(24 * var(--k)); }
}

/* ==========================================================================
   18 · 마감 CTA — .aiers-acting-closing (1660:3205 / 157:13463)

   Rebuilt 1:1 against the 750 canvas: 750x1636 on #0e0d0d. Nothing in this
   frame is autolaid out — the raster, the content column and both glows are
   pinned, and the content column is 993.907 wide starting at -121.23, i.e.
   wider than the section, so the poster row bleeds past both edges.

   The 126.14 / 124.34 padding is what the pinned column works out to
   (1636 centre, 1385.52 of content); expressing it as padding rather than a
   fixed height keeps the section honest if a line ever reflows.

   Figma draws both glows AFTER the content, so they sit over it. They are
   heavily blurred at low opacity, which is exactly the intended veil.
   ========================================================================== */

.aiers-acting-page .aiers-acting-closing {
  position: relative;
  overflow: hidden;
  padding: 126.14px 0 124.34px;
  background: #0e0d0d;
  color: #fff;
}

/* 1660:3206 · the same raster section 01 opens on, at the same size, blend
   and offset. */
.aiers-acting-page .aiers-acting-closing__bg {
  position: absolute;
  top: -60px;
  left: calc(50% - 1px);
  width: 1228px;
  height: 2166px;
  max-width: none;
  object-fit: cover;
  transform: translateX(-50%);
  mix-blend-mode: color-dodge;
  pointer-events: none;
}

.aiers-acting-page .aiers-acting-closing__glow {
  position: absolute;
  max-width: none;
  pointer-events: none;
}

.aiers-acting-page .aiers-acting-closing__glow--a {
  top: -388px;  /* anchor at 412, less the blur's 800 spread */
  left: -228px; /* anchor at 572, same */
  width: 1870px;
  height: 1870px;
}

.aiers-acting-page .aiers-acting-closing__glow--b {
  top: -962px;
  left: -966px;
  width: 1922px;
  height: 1922px;
}

/* 1660:3207 · 993.907 wide from -121.23, which centres it on 375.72 */
.aiers-acting-page .aiers-acting-closing__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
  width: 993.907px;
  margin-left: -121.23px;
}

/* 1660:3208 · 315 / 339.907 / 315 with a 12 gutter = the full 993.907 */
.aiers-acting-page .aiers-acting-closing__posters {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
}

.aiers-acting-page .aiers-acting-closing__poster {
  flex: none;
  object-fit: cover;
  box-shadow: 0 8px 8px rgba(0, 0, 0, .25);
}

.aiers-acting-page .aiers-acting-closing__poster--main {
  width: 339.907px;
  height: 509.52px;
}

/* The flanking posters are knocked back so the centre one reads as the film
   this page is actually about. */
.aiers-acting-page .aiers-acting-closing__poster--side {
  width: 315px;
  height: 420px;
  opacity: .2;
  filter: blur(4px);
}

.aiers-acting-page .aiers-acting-closing__lede,
.aiers-acting-page .aiers-acting-closing__punch {
  width: 654px;
  margin: 0;
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -1.44px;
  text-align: center;
  word-break: keep-all;
}

.aiers-acting-page .aiers-acting-closing__lede em {
  color: #e84c76;
  font-style: normal;
}

.aiers-acting-page .aiers-acting-closing__punch {
  text-shadow: 0 0 80px rgba(55, 207, 140, .5);
}

.aiers-acting-page .aiers-acting-closing__punch em {
  color: #37cf8c;
  font-style: normal;
}

/* 1660:3213 · a 102x4 gradient rule rotated -90, so the solid end lands at
   the bottom. Drawn in CSS rather than stretched from the SVG, which would
   smear the gradient across the wrong axis. */
.aiers-acting-page .aiers-acting-closing__rule {
  display: block;
  width: 4px;
  height: 100px;
  background: linear-gradient(to top, #17a868 0%, rgba(23, 168, 104, 0) 100%);
}

.aiers-acting-page .aiers-acting-closing__tail {
  display: flex;
  flex-direction: column;
  gap: 84px;
  align-items: center;
  width: 640px;
}

.aiers-acting-page .aiers-acting-closing__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 654px;
}

.aiers-acting-page .aiers-acting-closing__note {
  width: 654px;
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.56px;
  text-align: center;
  word-break: keep-all;
}

/* 1660:3220 · 36/48 inside 28/40 padding = the 104 the frame reports */
.aiers-acting-page .aiers-acting-closing__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 640px;
  padding: 28px 40px;
  border-radius: 16px;
  background: #37cf8c;
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -.45px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.aiers-acting-page .aiers-acting-closing__cta:hover {
  background: #2fbb7c;
}

/* Below the two-column switch the column is narrower than the 750 canvas,
   so the section scales as one piece instead of reflowing. */
@media (max-width: 1279px) {
  .aiers-acting-page .aiers-acting-closing { container-type: inline-size; padding: 0; }
  .aiers-acting-page .aiers-acting-closing > * { --k: calc(100cqw / 750); }
  .aiers-acting-page .aiers-acting-closing__bg { top: calc(-60 * var(--k)); left: calc(50% - 1 * var(--k)); width: calc(1228 * var(--k)); height: calc(2166 * var(--k)); }
  .aiers-acting-page .aiers-acting-closing__glow--a { top: calc(-388 * var(--k)); left: calc(-228 * var(--k)); width: calc(1870 * var(--k)); height: calc(1870 * var(--k)); }
  .aiers-acting-page .aiers-acting-closing__glow--b { top: calc(-962 * var(--k)); left: calc(-966 * var(--k)); width: calc(1922 * var(--k)); height: calc(1922 * var(--k)); }
  .aiers-acting-page .aiers-acting-closing__inner { width: calc(993.907 * var(--k)); margin-left: calc(-121.23 * var(--k)); gap: calc(80 * var(--k)); padding: calc(126.14 * var(--k)) 0 calc(124.34 * var(--k)); }
  .aiers-acting-page .aiers-acting-closing__posters { gap: calc(12 * var(--k)); }
  .aiers-acting-page .aiers-acting-closing__poster--main { width: calc(339.907 * var(--k)); height: calc(509.52 * var(--k)); }
  .aiers-acting-page .aiers-acting-closing__poster--side { width: calc(315 * var(--k)); height: calc(420 * var(--k)); filter: blur(calc(4 * var(--k))); }
  .aiers-acting-page .aiers-acting-closing__lede,
  .aiers-acting-page .aiers-acting-closing__punch { width: calc(654 * var(--k)); font-size: calc(48 * var(--k)); letter-spacing: calc(-1.44 * var(--k)); }
  .aiers-acting-page .aiers-acting-closing__punch { text-shadow: 0 0 calc(80 * var(--k)) rgba(55, 207, 140, .5); }
  .aiers-acting-page .aiers-acting-closing__rule { width: calc(4 * var(--k)); height: calc(100 * var(--k)); }
  .aiers-acting-page .aiers-acting-closing__tail { width: calc(640 * var(--k)); gap: calc(84 * var(--k)); }
  .aiers-acting-page .aiers-acting-closing__copy { width: calc(654 * var(--k)); gap: calc(24 * var(--k)); }
  .aiers-acting-page .aiers-acting-closing__note { width: calc(654 * var(--k)); font-size: calc(28 * var(--k)); letter-spacing: calc(-.56 * var(--k)); }
  .aiers-acting-page .aiers-acting-closing__cta { max-width: calc(640 * var(--k)); padding: calc(28 * var(--k)) calc(40 * var(--k)); border-radius: calc(16 * var(--k)); font-size: calc(36 * var(--k)); line-height: calc(48 * var(--k)); letter-spacing: calc(-.45 * var(--k)); }
}