.type-e {
  /* Scale the 502px reference to the embedded app width. */
  --e: calc(min(100vw, 460px) / 502);
  --e-ink: #003850;
  --e-sky: #00ace8;
  font-family: AppPretendard, Pretendard, sans-serif;
}
.type-e #app { max-width: 460px; margin-inline: auto; background: #fafafa; }
.e-home { background: var(--e-sky); color: #14191e; }
.e-home .e-header {
  height: calc(87 * var(--e));
  padding: 0 calc(26 * var(--e));
  background: transparent;
}
.e-header img { display: block; width: calc(144 * var(--e)); }
.e-tabs {
  display: flex;
  align-items: stretch;
  gap: calc(35 * var(--e));
  height: calc(61 * var(--e));
  padding-inline: calc(27 * var(--e));
  border-bottom: 1px solid #ffffff2c;
  color: #e0f3ff;
  font-size: calc(23 * var(--e));
}
.e-tabs > * { position: relative; display: grid; place-items: center; padding: 0; }
.e-tabs [aria-current] { color: white; font-weight: 700; }
.e-tabs [aria-current]::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: calc(3 * var(--e));
  border-radius: 3px;
  background: white;
}
.e-tiles {
  display: grid;
  grid-template-columns: minmax(0, 292fr) minmax(0, 140fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: calc(18 * var(--e));
  height: calc(292 * var(--e));
  margin: calc(30 * var(--e)) calc(25 * var(--e)) calc(35 * var(--e)) calc(27 * var(--e));
}
.e-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: calc(18 * var(--e)) calc(15 * var(--e));
  border-radius: calc(18 * var(--e));
  background: #14191f;
  color: white;
  text-align: left;
}
.e-tile strong, .e-tile span { position: relative; z-index: 1; }
.e-tile strong { font-size: calc(23 * var(--e)); line-height: 1.18; font-weight: 650; white-space: nowrap; }
.e-total {
  grid-row: span 2;
  padding: calc(22 * var(--e)) calc(21 * var(--e));
  color: #111315;
  background: linear-gradient(126deg, #ffcf71, #ffb53d);
}
.e-total strong { font-size: calc(38 * var(--e)); font-weight: 750; letter-spacing: -0.045em; }
.e-total span { margin-top: calc(7 * var(--e)); color: #674819; font-size: calc(21 * var(--e)); }
.e-tile img { position: absolute; bottom: calc(13 * var(--e)); right: calc(12 * var(--e)); height: calc(58 * var(--e)); width: auto; }
.e-total .e-owner-cycle { position: absolute; inset: auto calc(13 * var(--e)) calc(-2 * var(--e)) auto; width: calc(153 * var(--e)); height: calc(175 * var(--e)); }
.e-owner-cycle > :is(img, svg) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; animation-duration: 5s; }
@media (prefers-reduced-motion: reduce) {
  .e-owner-cycle > :is(img, svg) { animation: none; }
}
.e-history img { height: calc(63 * var(--e)); }
.e-content {
  padding: calc(31 * var(--e)) calc(29 * var(--e)) calc(41 * var(--e));
  border-radius: calc(24 * var(--e)) calc(24 * var(--e)) 0 0;
  background: linear-gradient(white 62%, #fafafa);
}
.e-invite-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(92 * var(--e));
  gap: calc(12 * var(--e));
  align-items: center;
  min-height: calc(82 * var(--e));
}
.e-invite-head h1, .e-content h2 { margin: 0; font-size: calc(25 * var(--e)); line-height: 1.2; }
.e-invite-head h1 { font-weight: 600; letter-spacing: -0.04em; }
.e-invite-head p { margin: calc(7 * var(--e)) 0 0; color: #626a71; font-size: calc(17 * var(--e)); line-height: 1.35; word-break: keep-all; }
.e-invite-head img { width: 100%; max-height: calc(76 * var(--e)); object-fit: contain; }
.e-progress {
  display: grid;
  grid-template-columns: 2fr 3fr;
  overflow: hidden;
  height: calc(52 * var(--e));
  margin-top: calc(26 * var(--e));
  border-radius: 99px;
  background: #e7ebed;
  color: #59636b;
  font-size: calc(17 * var(--e));
  font-weight: 650;
}
.e-progress span { display: flex; align-items: center; justify-content: flex-end; padding-inline: calc(20 * var(--e)); }
.e-progress span:first-child { justify-content: flex-start; border-radius: 0 calc(4 * var(--e)) calc(4 * var(--e)) 0; background: var(--e-sky); color: var(--e-ink); }
.e-share {
  width: 100%;
  min-height: calc(49 * var(--e));
  margin-top: calc(12 * var(--e));
  border-radius: calc(15 * var(--e));
  background: var(--e-sky);
  color: var(--e-ink);
  font-size: calc(18 * var(--e));
  font-weight: 700;
}

.e-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: calc(14 * var(--e)) calc(5 * var(--e)) calc(17 * var(--e));
  list-style: none;
  background: #f2f5f6;
  border-radius: calc(22 * var(--e));
}
.e-timeline::before { content: ''; position: absolute; top: calc(46 * var(--e)); inset-inline: 10%; border-top: 2px dotted #d5dce0; }
.e-timeline li { position: relative; display: grid; justify-items: center; gap: calc(3 * var(--e)); font-size: calc(19 * var(--e)); line-height: calc(22 * var(--e)); white-space: nowrap; }
.e-timeline li::before { grid-row: 2; content: ''; display: block; width: calc(10 * var(--e)); height: calc(10 * var(--e)); margin: calc(2 * var(--e)) 0 calc(8 * var(--e)); border-radius: 50%; background: #a0a8ad; box-shadow: 0 0 0 calc(7 * var(--e)) #e7ebed; }
.e-timeline li:first-child::before { background: var(--e-sky); box-shadow: 0 0 0 calc(7 * var(--e)) #d9edf9; }
.e-timeline .e-date { grid-row: 1; font-size: calc(15 * var(--e)); }
.e-timeline span { color: #606a73; }
.e-timeline strong { font-weight: 650; }
.e-recent, .e-installment { display: grid; gap: calc(11 * var(--e)); margin-top: calc(34 * var(--e)); padding: calc(23 * var(--e)); border-radius: calc(31 * var(--e)); background: white; box-shadow: 0 8px 28px #263e5b0d; }
.e-recent h2, .e-installment h2 { margin-bottom: calc(5 * var(--e)); }
.e-installment button { display: flex; align-items: center; gap: calc(14 * var(--e)); min-height: calc(60 * var(--e)); padding: 0 calc(16 * var(--e)); border-radius: calc(18 * var(--e)); background: #f3f5f6; color: #35434e; font-size: calc(19 * var(--e)); font-weight: 650; }
.e-installment img { width: calc(38 * var(--e)); height: calc(38 * var(--e)); object-fit: contain; }
/* Size the comparison by available width and keep the phone aspect ratio. */
.review-grid.a-only.with-e { width: min(100%, 390px); max-width: none; }
.review-grid.with-e .device, .review-grid.with-e .phone { width: 100%; }
@media (min-width: 701px) {
  .review:has(.with-e) { max-width: 2050px; padding-inline: clamp(16px, 1.4vw, 28px); }
  .review-grid.a-only.with-e {
    width: 100%;
    grid-template-columns: repeat(5, minmax(240px, 1fr));
    gap: clamp(14px, 1.35vw, 28px);
    overflow-x: auto;
  }
}

/* E안 초대 링크 버튼: D안 포인트 배지와 동일한 주기/각도의 빛 스윕 */
.e-share { position: relative; isolation: isolate; overflow: hidden; }
.e-share::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, #fff9 50%, transparent 75%);
  transform: translateX(-110%);
  animation: d-points-sheen 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .e-share::after { animation: none; } }

/* Revision: status bar above E header, with the same geometry as the other prototypes. */
body.type-e .e-home > .a-status {
  height: calc(53 * var(--e));
  padding: calc(6 * var(--e)) calc(27 * var(--e)) 0 calc(35 * var(--e));
  background: var(--e-sky);
  color: #071523;
  font-size: calc(21 * var(--e));
  font-weight: 600;
}
body.type-e .e-home > .a-status svg { color: #071523; }
/* Both character frames use matched transparent source canvases and identical coordinates. */
body.type-e .e-owner-cycle > img { inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }