.toeic-part4 .t4-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .92), transparent 28%),
    linear-gradient(135deg, #f6f9ff 0%, #eef5ff 52%, #e4f5f0 100%);
}

.toeic-part4 .t4-hero__visual {
  min-height: 270px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(235, 244, 255, .84));
  overflow: hidden;
}

.t4-signal {
  position: absolute;
  left: 44px;
  top: 44px;
  width: 100px;
  height: 160px;
}

.t4-signal i {
  position: absolute;
  left: 43px;
  bottom: 0;
  width: 14px;
  height: 104px;
  border-radius: 10px;
  background: linear-gradient(#1368c6, #0a3f80);
  box-shadow: 0 14px 24px rgba(10, 63, 128, .22);
}

.t4-signal i::before {
  content: "";
  position: absolute;
  left: -15px;
  top: -24px;
  width: 44px;
  height: 44px;
  border: 8px solid #fff;
  border-radius: 50%;
  background: #11a47c;
  box-shadow: 0 7px 18px rgba(17, 164, 124, .28);
}

.t4-signal span {
  position: absolute;
  left: 50px;
  top: 20px;
  width: 42px;
  height: 42px;
  border: 3px solid rgba(19, 104, 198, .35);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(45deg);
}

.t4-signal span:nth-child(2) { width: 68px; height: 68px; left: 37px; top: 7px; opacity: .75; }
.t4-signal span:nth-child(3) { width: 94px; height: 94px; left: 24px; top: -6px; opacity: .48; }

.t4-script-card {
  position: absolute;
  right: 34px;
  top: 52px;
  width: 188px;
  min-height: 144px;
  padding: 24px 22px;
  border: 1px solid rgba(19, 104, 198, .18);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(23, 66, 112, .16);
  transform: rotate(3deg);
}

.t4-script-card strong { display: block; color: #0a4b94; font-size: 13px; letter-spacing: .16em; }
.t4-script-card i { display: block; height: 7px; margin-top: 14px; border-radius: 20px; background: #dbe8f7; }
.t4-script-card i:nth-of-type(2) { width: 82%; }
.t4-script-card i:nth-of-type(3) { width: 62%; }
.t4-script-card small { display: block; margin-top: 20px; color: #477193; font-size: 9px; font-weight: 800; letter-spacing: .08em; }

.toeic-part4 .t3-practice { background: linear-gradient(180deg, #092f59 0%, #0d4574 58%, #0a355f 100%); }
.toeic-part4 .t3-audio-stage { background: linear-gradient(145deg, #eff8ff 0%, #f4fbf8 100%); }

@media (max-width: 767px) {
  .toeic-part4 .t4-hero__visual { min-height: 220px; }
  .t4-signal { left: 24px; top: 34px; transform: scale(.84); transform-origin: top left; }
  .t4-script-card { right: 20px; top: 38px; width: 164px; min-height: 132px; padding: 20px 18px; }
}