/* ===========================================
   YepRun Home Page — style.css
   =========================================== */

/* Naming guide
   - yeprun-app-*  : app shell shared by every page
   - yeprun-home-* : home page sections and their child elements
   - is-*          : temporary UI state applied by JavaScript
   Keep new page styles behind their own page prefix, e.g. yeprun-running-*.
*/

@font-face {
  font-family: "Bebas Neue";
  src: url("/font/BebasNeue-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: #f0f0f0;
  font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}

button:focus-visible {
  outline: 2px solid var(--yeprun-color-green-primary);
  outline-offset: 3px;
}

/* ---- CSS 변수 ---- */
:root {
  --yeprun-color-green-primary: #2BBF7E;
  --yeprun-color-green-dark:    #1A9E6A;
  --yeprun-color-green-light:   #E8F9F1;
  --yeprun-color-green-bg:      #25B871;
  --yeprun-color-yellow-bg:     #FFF4A3;
  --yeprun-color-yellow-dark:   #E8DC6A;
  --yeprun-color-text-primary:  #1a1a1a;
  --yeprun-color-text-secondary:#6b7280;
  --yeprun-color-text-muted:    #9ca3af;
  --yeprun-color-border:        #e5e7eb;
  --yeprun-color-card-bg:       #ffffff;
  --yeprun-radius-sm:     8px;
  --yeprun-radius-md:     12px;
  --yeprun-radius-lg:     16px;
  --yeprun-radius-xl:     20px;
  --yeprun-shadow-sm:     0 1px 4px rgba(0,0,0,0.06);
  --yeprun-shadow-md:     0 2px 12px rgba(0,0,0,0.08);
  --yeprun-layout-page-gutter:   24px;
  --yeprun-layout-content-gap:   28px;
  --yeprun-app-bottom-tab-height: 84px;
  --yeprun-app-safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---- 폰 래퍼 ---- */
.yeprun-app-mobile-frame {
  width: 375px;
  height: 844px;
  margin: 20px auto;
  background: #f7f8fa;
  border-radius: 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (max-width: 430px) {
  .yeprun-app-mobile-frame {
    width: 100%;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ---- 헤더 ---- */
.yeprun-app-mobile-frame .yeprun-app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px 14px;
  background: #ffffff;
}

.yeprun-app-mobile-frame .yeprun-app-logo {
  display: block;
  width: 160px;
  height: 15px;
  object-fit: contain;
}

.yeprun-app-mobile-frame .yeprun-app-icon-button {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  color: #374151;
  transition: background 0.15s;
}

.yeprun-app-mobile-frame .yeprun-app-notification-icon {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
}

.yeprun-app-mobile-frame .yeprun-app-icon-button:hover {
  background: var(--yeprun-color-green-light);
}

.yeprun-app-mobile-frame .yeprun-app-icon-button .yeprun-app-notification-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  display: none;
  background: #ef4444;
  border-radius: 50%;
  border: 1.5px solid #fff;
}

.yeprun-app-mobile-frame .yeprun-app-notification-button.is-notification-visible .yeprun-app-notification-badge {
  display: block;
}

/* ---- 서브 페이지 공통 ---- */
.yeprun-app-mobile-frame .yeprun-app-sub-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 24px;
  background: #ffffff;
  flex: none;
}

.yeprun-app-mobile-frame .yeprun-app-sub-header-title {
  position: absolute;
  left: 72px;
  right: 72px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.408px;
  color: #181A1A;
  text-align: left;
}

.yeprun-app-mobile-frame .yeprun-app-sub-header-button,
.yeprun-app-mobile-frame .yeprun-app-sub-header-spacer {
  width: 36px;
  height: 36px;
  flex: none;
}

.yeprun-app-mobile-frame .yeprun-app-sub-header-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 18px;
  color: #191F28;
}

.yeprun-app-mobile-frame .yeprun-app-standalone-home-indicator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(33px + var(--yeprun-app-safe-area-bottom));
  padding-bottom: var(--yeprun-app-safe-area-bottom);
  background: #ffffff;
  z-index: 20;
}

/* ---- 스크롤 영역 ---- */
.yeprun-app-mobile-frame .yeprun-app-scroll-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: calc(var(--yeprun-app-bottom-tab-height) + var(--yeprun-app-safe-area-bottom));
}

.yeprun-app-mobile-frame .yeprun-app-scroll-area::-webkit-scrollbar {
  display: none;
}

/* ---- 히어로 배너 ---- */
.yeprun-home-page .yeprun-home-hero-banner {
  margin: 28px var(--yeprun-layout-page-gutter) 0;
  background: url("/images/202606_yeprun/BannerContainer_Hero1.png") center / 100% 100% no-repeat;
  border-radius: var(--yeprun-radius-sm);
  padding: 17px;
  overflow: hidden;
  aspect-ratio: 327 / 129;
  position: relative;
}

.yeprun-home-page .yeprun-home-hero-text {
  position: absolute;
  z-index: 1;
  width: calc(100% - 32px);
  height: 95px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.yeprun-home-page .yeprun-home-hero-greeting {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
}

.yeprun-home-page .yeprun-home-hero-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
}

.yeprun-home-page .yeprun-home-hero-sub {
  font-size: 13px;
  color: #ffffff;
  line-height: 1.2;
}

/* ---- 섹션 공통 ---- */
.yeprun-home-page .yeprun-home-section {
  padding: var(--yeprun-layout-content-gap) var(--yeprun-layout-page-gutter) 0;
}

.yeprun-home-page .yeprun-home-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--yeprun-color-text-primary);
  margin-bottom: 12px;
}

.yeprun-home-page .yeprun-home-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.yeprun-home-page .yeprun-home-section-header .yeprun-home-section-title {
  margin-bottom: 0;
}

.yeprun-home-page .yeprun-home-section-more-button {
  font-size: 15px;
  line-height: 1;
  color: var(--yeprun-color-text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.yeprun-home-page .yeprun-home-section-more-text {
  display: block;
  transform: translateY(1px);
}

.yeprun-home-page .yeprun-home-section-more-button i {
  font-size: 12px;
  line-height: 1;
}

/* ---- 빠른시작 ---- */
.yeprun-home-page .yeprun-home-quick-menu-list {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.yeprun-home-page .yeprun-home-quick-menu-list::-webkit-scrollbar {
  display: none;
}

.yeprun-home-page .yeprun-home-quick-menu-button {
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--yeprun-radius-sm);
  transition: transform 0.15s, opacity 0.15s;
}

.yeprun-home-page .yeprun-home-quick-menu-button:hover {
  transform: translateY(-2px);
}

.yeprun-home-page .yeprun-home-quick-menu-button:active {
  opacity: 0.75;
}

.yeprun-home-page .yeprun-home-quick-menu-image {
  width: 64px;
  height: 94px;
  display: block;
  object-fit: contain;
  transition: transform 0.15s;
}

.yeprun-home-page .yeprun-home-quick-menu-image-ai {
  width: 66px;
}

/* ---- 공유 배너 ---- */
.yeprun-home-page .yeprun-home-share-banner-slider {
  margin: var(--yeprun-layout-content-gap) var(--yeprun-layout-page-gutter) 0;
  width: calc(100% - (var(--yeprun-layout-page-gutter) * 2));
}

.yeprun-home-page .yeprun-home-share-banner-viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--yeprun-radius-sm);
}

.yeprun-home-page .yeprun-home-share-banner-track {
  display: flex;
  transition: transform 0.35s ease;
}

.yeprun-home-page .yeprun-home-share-banner-slide {
  flex: 0 0 100%;
  aspect-ratio: 327 / 85;
  overflow: hidden;
  border-radius: var(--yeprun-radius-sm);
  cursor: pointer;
  transition: opacity 0.15s;
}

.yeprun-home-page .yeprun-home-share-banner-slide:hover {
  opacity: 0.92;
}

.yeprun-home-page .yeprun-home-share-banner-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yeprun-home-page .yeprun-home-share-banner-counter {
  position: absolute;
  left: clamp(13px, 4%, 20px);
  bottom: clamp(8px, 9.4%, 14px);
  min-width: 25px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(84, 100, 59, 0.62);
  color: #ffffff;
  font-size: 7.5px;
  font-weight: 700;
  line-height: 1;
  z-index: 2;
}

.yeprun-home-page .yeprun-home-share-banner-nav {
  display: none;
  position: absolute;
  top: 0;
  width: 36px;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.42);
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}

.yeprun-home-page .yeprun-home-share-banner-prev {
  left: 0;
}

.yeprun-home-page .yeprun-home-share-banner-next {
  right: 0;
}

.yeprun-home-page .yeprun-home-share-banner-slider.is-multiple .yeprun-home-share-banner-nav {
  display: flex;
}

.yeprun-home-page .yeprun-home-share-banner-slider.is-multiple .yeprun-home-share-banner-viewport:hover .yeprun-home-share-banner-nav {
  opacity: 1;
}

/* ---- 혜택 카드 ---- */
.yeprun-home-page .yeprun-home-checkin-benefit-card {
  width: 100%;
  background: var(--yeprun-color-card-bg);
  border-radius: var(--yeprun-radius-md);
  /* border: 1px solid var(--yeprun-color-border); */
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--yeprun-shadow-sm);
  cursor: pointer;
  transition: box-shadow 0.15s;
  text-align: left;
}

.yeprun-home-page .yeprun-home-checkin-benefit-card:hover {
  box-shadow: var(--yeprun-shadow-md);
}

.yeprun-home-page .yeprun-home-checkin-benefit-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.yeprun-home-page .yeprun-home-checkin-benefit-icon {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.yeprun-home-page .yeprun-home-checkin-benefit-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--yeprun-color-text-primary);
  margin-bottom: 2px;
}

.yeprun-home-page .yeprun-home-checkin-benefit-desc {
  display: block;
  font-size: 12px;
  color: var(--yeprun-color-text-secondary);
}

.yeprun-home-page .yeprun-home-checkin-benefit-reward {
  width: 78px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 125.2%;
  color: #E87E0E;
  background: #FFFDF0;
  border-radius: 999px;
  padding: 4px 8px;
  text-align: center;
  white-space: nowrap;
  flex: none;
}

/* ---- 챌린지 카드 ---- */
.yeprun-home-page .yeprun-home-weekly-challenge-card {
  min-height: 133px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: var(--yeprun-color-card-bg);
  border-radius: var(--yeprun-radius-sm);
  padding: 8px 16px 12px;
  cursor: pointer;
}

.yeprun-home-page .yeprun-home-weekly-challenge-card:focus-visible {
  outline: 2px solid #10B861;
  outline-offset: 3px;
}

.yeprun-home-page .yeprun-home-weekly-challenge-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 32px;
}

.yeprun-home-page .yeprun-home-weekly-challenge-message {
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #181A1A;
}

.yeprun-home-page .yeprun-home-weekly-challenge-percent {
  font-family: 'Inter', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: #10B861;
}

.yeprun-home-page .yeprun-home-weekly-challenge-stepper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 63px;
  padding: 13px 6px 6px;
  isolation: isolate;
}

.yeprun-home-page .yeprun-home-weekly-challenge-stepper::before,
.yeprun-home-page .yeprun-home-weekly-challenge-stepper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 13px;
  height: 22px;
  border-radius: 999px;
}

.yeprun-home-page .yeprun-home-weekly-challenge-stepper::before {
  background: #F2F4F6;
  z-index: 0;
}

.yeprun-home-page .yeprun-home-weekly-challenge-stepper::after {
  right: auto;
  width: var(--yeprun-home-weekly-challenge-progress, 0%);
  background: linear-gradient(90deg, rgba(16, 187, 97, 0.8) -13.02%, #10B861 95.83%), #F2F4F6;
  box-shadow: 0 0 23.6px rgba(49, 130, 246, 0.3);
  z-index: 1;
}

.yeprun-home-page .yeprun-home-weekly-challenge-step-item {
  position: relative;
  z-index: 2;
  width: 39.33px;
  min-width: 39.33px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 39.33px;
}

.yeprun-home-page .yeprun-home-weekly-challenge-step-button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'SF Pro', 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 590;
  line-height: 15px;
  background: #ffffff;
  color: rgba(0, 19, 43, 0.58);
  border: 2px solid #ffffff;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  cursor: pointer;
}

.yeprun-home-page .yeprun-home-weekly-challenge-step-button.is-complete {
  background: #17A55B;
  color: #ffffff;
  border-color: #17A55B;
  font-weight: 700;
}

.yeprun-home-page .yeprun-home-weekly-challenge-step-label {
  width: 100%;
  font-family: 'SF Pro', 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 590;
  line-height: 15px;
  color: rgba(0, 19, 43, 0.58);
  text-align: center;
}

.yeprun-home-page .yeprun-home-weekly-challenge-step-button.is-complete + .yeprun-home-weekly-challenge-step-label {
  font-weight: 700;
  color: rgba(0, 12, 30, 0.8);
}

/* ---- 오늘의 추천 ---- */
.yeprun-home-page .yeprun-home-daily-recommend-card {
  min-height: 174px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  background: var(--yeprun-color-card-bg);
  border-radius: var(--yeprun-radius-sm);
  padding: 14px 16px 18px;
  box-shadow: var(--yeprun-shadow-sm);
}

.yeprun-home-page .yeprun-home-daily-recommend-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  width: 100%;
}

.yeprun-home-page .yeprun-home-daily-recommend-badge {
  width: 90px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #E5FBF2;
  color: #077D3F;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  border-radius: 999px;
  padding: 4px 10px;
  flex: none;
}

.yeprun-home-page .yeprun-home-daily-recommend-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.yeprun-home-page .yeprun-home-daily-recommend-title {
  width: 100%;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  color: #191F28;
}

.yeprun-home-page .yeprun-home-daily-recommend-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-family: 'Inter', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #6B7684;
}

.yeprun-home-page .yeprun-home-daily-recommend-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #6B7684;
  flex: none;
}

.yeprun-home-page .yeprun-home-daily-recommend-start-button {
  width: 100%;
  height: 48px;
  background: #10B861;
  color: #ffffff;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 145%;
  text-align: center;
  border-radius: var(--yeprun-radius-sm);
  padding: 0;
  letter-spacing: 0;
  transition: background 0.15s, transform 0.1s;
}

.yeprun-home-page .yeprun-home-daily-recommend-start-button:hover {
  background: var(--yeprun-color-green-dark);
}

.yeprun-home-page .yeprun-home-daily-recommend-start-button:active {
  transform: scale(0.98);
}

/* ---- 결제 섹션 ---- */
.yeprun-home-page .yeprun-home-payment-card {
  min-height: 143px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  background: var(--yeprun-color-card-bg);
  border-radius: var(--yeprun-radius-sm);
  padding: 16px 16px 20px;
  box-shadow: var(--yeprun-shadow-sm);
}

.yeprun-home-page .yeprun-home-payment-status-badge {
  width: 130px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #F7EAFF;
  color: #A234C7;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  border-radius: 999px;
  padding: 3px 10px;
  flex: none;
  text-transform:capitalize;
}

.yeprun-home-page .yeprun-home-payment-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.yeprun-home-page .yeprun-home-payment-title {
  width: 100%;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  color: #191F28;
}

.yeprun-home-page .yeprun-home-payment-progress-label {
  width: 100%;
  font-family: 'Inter', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #6B7684;
}

.yeprun-home-page .yeprun-home-payment-progress-track {
  width: 100%;
  height: 8px;
  background: #F2F4F6;
  border-radius: 999px;
  overflow: hidden;
}

.yeprun-home-page .yeprun-home-payment-progress-fill {
  width: 0;
  height: 100%;
  background: #A234C7;
  border-radius: 999px;
  transition: width 0.6s ease;
}

.yeprun-home-page .yeprun-home-bottom-spacer {
  height: 48px;
}

/* ---- 하단 탭바 ---- */
.yeprun-app-bottom-tab {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: var(--yeprun-app-bottom-tab-height);
  padding: 0;
  background: #ffffff;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: rgba(0, 27, 55, 0.1);
  border-radius: 24px 24px 0 0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
}

.yeprun-app-bottom-tab .yeprun-app-bottom-tab-menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 0 18px;
  flex: none;
}

.yeprun-app-bottom-tab .yeprun-app-bottom-tab-menu .yeprun-app-tab-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 63px;
  min-width: 46px;
  height: 43px;
  padding: 0;
  flex: 1 1 0;
  isolation: isolate;
  transition: opacity 0.15s, transform 0.15s;
}

.yeprun-app-bottom-tab .yeprun-app-bottom-tab-menu .yeprun-app-tab-item:active {
  transform: translateY(1px);
}

.yeprun-app-bottom-tab .yeprun-app-bottom-tab-menu .yeprun-app-tab-item .yeprun-app-tab-icon {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: block;
  width: 63px;
  height: 43px;
  margin: 0 auto;
  object-fit: contain;
  transition: opacity 0.15s;
}

.yeprun-app-bottom-tab .yeprun-app-bottom-tab-menu .yeprun-app-tab-item .yeprun-app-tab-icon-active {
  opacity: 0;
}

.yeprun-app-bottom-tab .yeprun-app-bottom-tab-menu .yeprun-app-tab-item.is-active .yeprun-app-tab-icon-default {
  opacity: 0;
}

.yeprun-app-bottom-tab .yeprun-app-bottom-tab-menu .yeprun-app-tab-item.is-active .yeprun-app-tab-icon-active {
  opacity: 1;
}

.yeprun-app-bottom-tab .yeprun-app-bottom-tab-menu .yeprun-app-tab-item .yeprun-app-tab-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.yeprun-app-bottom-tab .yeprun-app-ios-home-indicator {
  position: relative;
  width: 100%;
  height: 33px;
  padding-bottom: var(--yeprun-app-safe-area-bottom);
  background: #ffffff;
  flex: 1 1 auto;
}

.yeprun-app-bottom-tab .yeprun-app-ios-home-indicator .yeprun-app-ios-home-indicator-bar {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 134px;
  height: 5px;
  transform: translateX(calc(-50% - 0.5px));
  background: #191F28;
  border-radius: 6px;
}

/* ---- 혜택 페이지 ---- */
.yeprun-benefit-page,
.yeprun-point-page,
.yeprun-point-guide-page {
  background: #ffffff;
  padding-bottom: calc(var(--yeprun-app-bottom-tab-height) + var(--yeprun-app-safe-area-bottom) + 48px);
}

.yeprun-app-mobile-frame .yeprun-app-scroll-area.yeprun-benefit-page,
.yeprun-app-mobile-frame .yeprun-app-scroll-area.yeprun-point-page,
.yeprun-app-mobile-frame .yeprun-app-scroll-area.yeprun-point-guide-page {
  padding-bottom: calc(var(--yeprun-app-bottom-tab-height) + var(--yeprun-app-safe-area-bottom) + 48px);
}

.yeprun-benefit-page {
  padding-left: 24px;
  padding-right: 24px;
}

.yeprun-benefit-toast {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 80;
  min-width: 220px;
  max-width: min(327px, calc(100vw - 40px));
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.88);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.yeprun-benefit-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.yeprun-benefit-page .yeprun-benefit-point-summary-card {
  width: 100%;
  height: 70px;
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  background: #FFFDF0;
  border: 1px solid #FFF7D6;
  border-radius: 14px;
  color: #191F28;
}

.yeprun-benefit-page .yeprun-benefit-point-summary-value,
.yeprun-point-page .yeprun-point-total {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.yeprun-benefit-page .yeprun-benefit-point-summary-value strong,
.yeprun-point-page .yeprun-point-total strong {
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
}

.yeprun-benefit-page .yeprun-benefit-coin-icon,
.yeprun-point-page .yeprun-benefit-coin-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #FFD628;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  box-shadow: inset 0 0 0 3px rgba(255, 187, 0, 0.45);
  flex: none;
}

.yeprun-benefit-page .yeprun-benefit-section {
  margin-top: 42px;
}

.yeprun-benefit-page .yeprun-benefit-section-title {
  margin-bottom: 8px;
  padding: 0 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 140%;
  color: #181A1A;
}

.yeprun-benefit-page .yeprun-benefit-daily-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.yeprun-benefit-page .yeprun-benefit-mission-card {
  position: relative;
  min-height: 100px;
  padding: 10px 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: #FBFBFB;
  border: 0.2px solid #F4F4F4;
  border-radius: 8px;
}

.yeprun-benefit-page .yeprun-benefit-mission-card.is-complete {
  background: #F5FFF5;
  border-color: #E7F5EA;
}

.yeprun-benefit-page .yeprun-benefit-mission-icon,
.yeprun-benefit-page .yeprun-benefit-special-icon {
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex: none;
}

.yeprun-benefit-page .yeprun-benefit-mission-icon-image {
  position: absolute;
  inset: 0;
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
  transition: opacity 0.15s;
}

.yeprun-benefit-page .yeprun-benefit-mission-icon-complete {
  opacity: 0;
}

.yeprun-benefit-page .yeprun-benefit-mission-card.is-complete .yeprun-benefit-mission-icon-default {
  opacity: 0;
}

.yeprun-benefit-page .yeprun-benefit-mission-card.is-complete .yeprun-benefit-mission-icon-complete {
  opacity: 1;
}

.yeprun-benefit-page .yeprun-benefit-mission-reward,
.yeprun-benefit-page .yeprun-benefit-special-reward {
  position: absolute;
  right: 10px;
  top: 10px;
  min-width: 43px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 0.2px solid #048943;
  border-radius: 999px;
  color: #048943;
  background: #F9FEF7;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
}

.yeprun-benefit-page .yeprun-benefit-mission-reward {
  top: 48px;
  width: 43px;
  min-width: 43px;
  height: 20px;
  padding: 4px 8px;
  gap: 2px;
  box-sizing: border-box;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  line-height: 109%;
  text-align: center;
}

.yeprun-benefit-page .yeprun-benefit-mission-card.is-complete .yeprun-benefit-mission-reward {
  width: 61px;
  min-width: 61px;
  color: #048943;
  background: #F9FEF7;
}

.yeprun-benefit-page .yeprun-benefit-mission-title {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 115%;
  color: #191F28;
}

.yeprun-benefit-page .yeprun-benefit-mission-count {
  margin-top: 6px;
  font-size: 14px;
  line-height: 115%;
  color: #666666;
}

.yeprun-benefit-page .yeprun-benefit-special-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yeprun-benefit-page .yeprun-benefit-special-card {
  position: relative;
  width: 100%;
  min-height: 65px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 8px;
  background: #FBFBFB;
  border-radius: 8px;
  border: 0.2px solid #F4F4F4;
  text-align: left;
}

.yeprun-benefit-page .yeprun-benefit-special-card.is-complete {
  background: #F5FFF5;
}

.yeprun-benefit-page .yeprun-benefit-special-icon {
  width: 37px;
  height: 37px;
  background: transparent;
  overflow: hidden;
}

.yeprun-benefit-page .yeprun-benefit-special-icon img {
  width: 37px;
  height: 37px;
  display: block;
  object-fit: contain;
}

.yeprun-benefit-page .yeprun-benefit-special-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.yeprun-benefit-page .yeprun-benefit-special-copy strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 115%;
  color: #191F28;
}

.yeprun-benefit-page .yeprun-benefit-special-copy em {
  margin-left: 4px;
  color: #10B861;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  line-height: 115%;
}

.yeprun-benefit-page .yeprun-benefit-special-copy span {
  margin-top: 4px;
  font-size: 11px;
  line-height: 115%;
  color: #666666;
}

.yeprun-benefit-page .yeprun-benefit-special-reward {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 65px;
  min-width: 65px;
  height: 20px;
  padding: 4px 7px;
  gap: 2px;
  box-sizing: border-box;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  line-height: 109%;
  text-align: center;
}

.yeprun-benefit-page .yeprun-benefit-special-card.is-complete .yeprun-benefit-special-reward {
  width: 61px;
  min-width: 61px;
}

/* ---- 옙 포인트 페이지 ---- */
.yeprun-point-page .yeprun-point-summary-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* width: min(327px, calc(100% - 48px)); */
  height: 40px;
  margin: 40px 24px 24px;
  padding: 0;
  gap: 12px;
}

.yeprun-point-page .yeprun-point-total {
  width: auto;
  min-width: 88px;
  height: 40px;
  padding: 8px 2px 8px 0;
  gap: 6px;
  border-radius: 10px;
  flex: none;
}

.yeprun-point-page .yeprun-point-total .yeprun-benefit-coin-icon {
  width: 24px;
  height: 24px;
}

.yeprun-point-page .yeprun-point-total strong {
  width: auto;
  min-width: 48px;
  height: 20px;
  font-size: 24px;
  font-weight: 600;
  line-height: 20px;
  color: #181A1A;
  text-align: center;
}

.yeprun-point-page .yeprun-point-use-button {
  width: 145px;
  height: 36px;
  padding: 8px 16px;
  border-radius: 20px;
  background: #FFE432;
  color: #000000;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  flex: none;
  white-space: nowrap;
}

.yeprun-point-page .yeprun-point-tab-list {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 38px;
  padding: 0 0 0 14px;
  border-bottom: 1px solid rgba(0, 27, 55, 0.1);
  background: #ffffff;
}

.yeprun-point-page .yeprun-point-tab-button {
  position: relative;
  width: 64px;
  min-width: 64px;
  height: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  color: rgba(0, 19, 43, 0.58);
  font-size: 17px;
  font-weight: 600;
  line-height: 125.2%;
  text-align: center;
}

.yeprun-point-page .yeprun-point-tab-button.is-active {
  color: rgba(0, 12, 30, 0.8);
  font-weight: 700;
}

.yeprun-point-page .yeprun-point-tab-button.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: #333D4B;
  border-radius: 10px;
}

.yeprun-point-page .yeprun-point-guide-link {
  width: 100%;
  height: 43px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 24px;
  color: #181A1A;
  font-size: 15px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: -0.439453px;
  text-align: left;
}

.yeprun-point-page .yeprun-point-guide-link i {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #666666;
  font-size: 12px;
}

.yeprun-point-page .yeprun-point-history-list {
  border-top: 0;
}

.yeprun-point-page .yeprun-point-history-item {
  box-sizing: border-box;
  width: 100%;
  min-height: 74.33px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10.42px;
  padding: 16.6667px 24px;
  border-bottom: 0.7px solid #EEEEEE;
}

.yeprun-point-page .yeprun-point-history-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 244.58px;
  height: 41px;
  min-width: 0;
  flex: 1 1 auto;
}

.yeprun-point-page .yeprun-point-history-copy strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 150%;
  color: #1D1D1D;
}

.yeprun-point-page .yeprun-point-history-copy time {
  font-size: 13px;
  font-weight: 400;
  line-height: 140%;
  color: #7E7E7E;
}

.yeprun-point-page .yeprun-point-history-amount {
  width: 72px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  color: #10BB61;
  font-size: 18px;
  font-weight: 700;
  line-height: 125.2%;
  text-align: center;
  white-space: nowrap;
  flex: none;
}

.yeprun-point-page .yeprun-point-history-amount.is-use {
  color: #4E5968;
}

.yeprun-point-page .yeprun-point-history-amount.is-earn {
  color: #10BB61;
}

.yeprun-point-page .yeprun-point-empty-state {
    min-height: min(485px, calc(100vh - 262px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px 24px 0;
    text-align: center;
}

@supports (min-height: 100dvh) {
  .yeprun-point-page .yeprun-point-empty-state {
    min-height: min(485px, calc(100dvh - 262px));
  }
}

.yeprun-point-page .yeprun-point-empty-state[hidden],
.yeprun-point-page .yeprun-point-history-list[hidden] {
  display: none;
}

.yeprun-point-page .yeprun-point-empty-image {
  display: block;
  width: 164px;
  height: 179px;
  object-fit: contain;
  margin: 0 auto;
}

.yeprun-point-page .yeprun-point-empty-copy {
  width: 317px;
  min-height: 47px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
  color: rgba(0, 0, 0, 0.9);
}

.yeprun-point-page .yeprun-point-empty-copy strong {
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  color: inherit;
}

.yeprun-point-page .yeprun-point-empty-copy p {
  width: 317px;
  margin-top: -1px;
  font-size: 13px;
  font-weight: 500;
  line-height: 27px;
  color: inherit;
}

/* ---- 포인트 페이지 페이지네이션 ---- */
.yeprun-point-page .yeprun-point-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 16px 20px 8px;
}

.yeprun-point-page .yeprun-point-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #4E5968;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.yeprun-point-page .yeprun-point-page-btn:hover {
  background: #f4f4f6;
  color: #1D1D1D;
}

.yeprun-point-page .yeprun-point-page-btn.is-active {
  background: #000c1e;
  color: #ffffff;
  font-weight: 700;
  pointer-events: none;
}

.yeprun-point-page .yeprun-point-page-btn.is-disabled {
  color: #c8cdd4;
  pointer-events: none;
  cursor: default;
}

.yeprun-point-page .yeprun-point-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 34px;
  font-size: 12px;
  color: #b0b8c1;
  pointer-events: none;
  letter-spacing: 1px;
  padding-bottom: 4px;
}

/* ---- 포인트 안내사항 페이지 ---- */
.yeprun-point-guide-page {
  position: relative;
  padding: 64px 24px calc(var(--yeprun-app-bottom-tab-height) + var(--yeprun-app-safe-area-bottom) + 48px);
}

.yeprun-point-guide-page .yeprun-point-guide-close-button {
  position: absolute;
  right: 24px;
  top: 64px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #191F28;
}

.yeprun-point-guide-page .yeprun-point-guide-title {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin: 0;
  padding-right: 48px;
  font-size: 28px;
  font-weight: 800;
  line-height: 38px;
  color: #191F28;
}

.yeprun-point-guide-page .yeprun-point-guide-section {
  margin-top: 44px;
}

.yeprun-point-guide-page .yeprun-point-guide-section + .yeprun-point-guide-section {
  margin-top: 28px;
}

.yeprun-point-guide-page .yeprun-point-guide-section h2 {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 800;
  line-height: 26px;
  color: #191F28;
}

.yeprun-point-guide-page .yeprun-point-guide-section ul {
  padding-left: 18px;
}

.yeprun-point-guide-page .yeprun-point-guide-section li {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: #191F28;
}

/* ---- 애니메이션 ---- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.yeprun-home-page .yeprun-home-hero-banner,
.yeprun-home-page .yeprun-home-quick-menu-section,
.yeprun-home-page .yeprun-home-share-banner-slider,
.yeprun-home-page .yeprun-home-benefit-section,
.yeprun-home-page .yeprun-home-weekly-challenge-section,
.yeprun-home-page .yeprun-home-daily-recommend-section,
.yeprun-home-page .yeprun-home-payment-section {
  animation: fadeInUp 0.4s ease both;
}

.yeprun-home-page .yeprun-home-hero-banner       { animation-delay: 0.05s; }
.yeprun-home-page .yeprun-home-quick-menu-section       { animation-delay: 0.10s; }
.yeprun-home-page .yeprun-home-share-banner-slider      { animation-delay: 0.15s; }
.yeprun-home-page .yeprun-home-benefit-section   { animation-delay: 0.20s; }
.yeprun-home-page .yeprun-home-weekly-challenge-section { animation-delay: 0.25s; }
.yeprun-home-page .yeprun-home-daily-recommend-section { animation-delay: 0.30s; }
.yeprun-home-page .yeprun-home-payment-section   { animation-delay: 0.35s; }


/* ──────────────────────────────────────────
   jQuery 인터랙션 스타일
────────────────────────────────────────── */

/* 헤더 스크롤 그림자 */
.yeprun-app-mobile-frame .yeprun-app-header.is-scrolled {
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* 퀵 아이콘 바운스 */
@keyframes is-bouncing {
  0%, 100% { transform: translateY(0); }
  40%       { transform: translateY(-8px); }
  70%       { transform: translateY(-4px); }
}

.yeprun-home-page .yeprun-home-quick-menu-image.is-bouncing {
  animation: is-bouncing 0.45s ease;
}

/* 토스트 메시지 */
.yeprun-app-mobile-frame .yeprun-app-toast {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(30, 30, 30, 0.88);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 50px;
  width: max-content;
  max-width: calc(100% - 48px);
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 999;
  text-align: center;
  line-height: 1.4;
}

.yeprun-app-mobile-frame .yeprun-app-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ──────────────────────────────────────────
   YepRun Run Result Page
   - Scope: .yeprun-run-result-page
────────────────────────────────────────── */
.yeprun-run-result-page {
  --run-result-safe-bottom: env(safe-area-inset-bottom, 0px);
  --run-result-green: #10b861;
  --run-result-text: #181a1a;
  --run-result-muted: #8a949e;
  --run-result-card: #ffffff;
  --run-result-line: rgba(0, 27, 55, 0.1);
  --run-result-shadow: 0 16px 34px rgba(37, 46, 57, 0.12);
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background: #ffffff;
  color: var(--run-result-text);
  font-family: "Pretendard", "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

body.yeprun-run-result-body {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.yeprun-run-result-page,
.yeprun-run-result-page * {
  box-sizing: border-box;
}

.yeprun-run-result-page button,
.yeprun-run-result-page input,
.yeprun-run-result-page textarea,
.yeprun-run-result-page select {
  font: inherit;
}

.yeprun-run-result-page button {
  border: 0;
  cursor: pointer;
}

.yeprun-run-result-page img {
  display: block;
  max-width: 100%;
}

.yeprun-run-result-page .yeprun-run-result-frame {
  position: relative;
  width: 100%;
  max-width: 375px;
  min-height: 100vh;
  background: #ffffff;
  overflow: hidden;
}

.yeprun-run-result-page .yeprun-run-result-scroll {
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px calc(108px + var(--run-result-safe-bottom));
  scrollbar-width: none;
}

.yeprun-run-result-page .yeprun-run-result-scroll::-webkit-scrollbar {
  display: none;
}

.yeprun-run-result-page .yeprun-run-result-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  margin-right: -20px;
  margin-left: -20px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}

.yeprun-run-result-page .yeprun-run-result-header .yeprun-run-result-nav {
  height: 54px;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  padding: 0 20px;
}

.yeprun-run-result-page .yeprun-run-result-header .yeprun-run-result-nav-button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #222222;
  font-size: 25px;
  line-height: 1;
}

.yeprun-run-result-page .yeprun-run-result-header .yeprun-run-result-title {
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

/* .yeprun-run-result-page .yeprun-run-result-content {
  padding-top: 20px;
} */

.yeprun-run-result-page .yeprun-run-result-hero {
  position: relative;
  min-height: 558px;
  margin-top: 15px;
  padding: 24px 14px 18px;
  --yeprun-run-result-accent: #a17a50;
  --yeprun-run-result-accent-strong: #d4a574;
  --yeprun-run-result-title: #a17a50;
  --yeprun-run-result-copy: #a97848;
  --yeprun-run-result-bg-top: rgba(212, 165, 116, 0.18);
  --yeprun-run-result-bg-bottom: rgba(212, 165, 116, 0.55);
  border: 0;
  border-radius: 25px;
  background:
    radial-gradient(circle at 50% 27%, rgba(255, 255, 255, 0.58) 0 92px, rgba(255, 255, 255, 0.2) 93px 166px, transparent 167px),
    linear-gradient(180deg, var(--yeprun-run-result-bg-top) 0%, var(--yeprun-run-result-bg-bottom) 100%);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
}

.yeprun-run-result-page .yeprun-run-result-hero::before,
.yeprun-run-result-page .yeprun-run-result-hero::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.yeprun-run-result-page .yeprun-run-result-hero::before {
  width: 270px;
  height: 270px;
  left: -56px;
  top: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0));
}

.yeprun-run-result-page .yeprun-run-result-hero::after {
  width: 9px;
  height: 9px;
  right: 36px;
  bottom: 120px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    -178px -26px 0 -2px #ffffff,
    -16px 37px 0 -3px #ffffff,
    -184px 30px 0 -3px #ffffff;
}

.yeprun-run-result-page .yeprun-run-result-hero .yeprun-run-result-character {
  position: relative;
  z-index: 1;
  display: block;
  width: 252px;
  height: 305px;
  margin: 0 auto 2px;
  transform: none;
  object-fit: contain;
  filter: drop-shadow(0 15px 16px rgba(81, 54, 28, 0.16));
}

.yeprun-run-result-page .yeprun-run-result-hero .yeprun-run-result-sparkle {
  display: none;
}

.yeprun-run-result-page .yeprun-run-result-hero .yeprun-run-result-sparkle:nth-of-type(1) {
  left: 22px;
  top: 298px;
}

.yeprun-run-result-page .yeprun-run-result-hero .yeprun-run-result-sparkle:nth-of-type(2) {
  right: 46px;
  top: 336px;
}

.yeprun-run-result-page .yeprun-run-result-hero .yeprun-run-result-type {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--yeprun-run-result-title);
  text-align: center;
  font-size: 31px;
  font-weight: 900;
  line-height: 1.2;
}

.yeprun-run-result-page .yeprun-run-result-hero .yeprun-run-result-type-desc {
  position: relative;
  z-index: 1;
  margin: 13px auto 0;
  max-width: 230px;
  color: var(--yeprun-run-result-copy);
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  white-space: pre-line;
}

.yeprun-run-result-page .yeprun-run-result-hero .yeprun-run-result-action-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}

.yeprun-run-result-page .yeprun-run-result-hero .yeprun-run-result-hero-button {
  height: 48px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid var(--yeprun-run-result-accent-strong);
  background: #ffffff;
  color: var(--yeprun-run-result-accent);
  font-size: 15px;
  font-weight: 700;
}

.yeprun-run-result-page .yeprun-run-result-hero .yeprun-run-result-hero-button-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: none;
}

.yeprun-run-result-page .yeprun-run-result-hero .yeprun-run-result-hero-button.is-filled {
  border-color: var(--yeprun-run-result-accent-strong);
  background: var(--yeprun-run-result-accent-strong);
  color: #ffffff;
}

.yeprun-run-result-share-capture-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 800px;
  min-height: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
  opacity: 1;
  z-index: 2147483647;
  transform: translateX(-1200px);
}

.yeprun-run-result-share-capture-stage .yeprun-run-result-share-card {
  position: relative;
  width: 800px;
  height: 800px;
  margin: 0;
  padding: 32px 44px 44px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.72) 0 190px, rgba(255, 255, 255, 0.25) 191px 340px, transparent 341px),
    linear-gradient(180deg, var(--run-result-share-bg-top, rgba(212, 165, 116, 0.18)) 0%, var(--run-result-share-bg-bottom, rgba(212, 165, 116, 0.55)) 100%);
  color: var(--run-result-share-title, #a17a50);
  text-align: center;
  box-shadow: none;
}

.yeprun-run-result-share-capture-stage .yeprun-run-result-share-card::before,
.yeprun-run-result-share-capture-stage .yeprun-run-result-share-card::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.yeprun-run-result-share-capture-stage .yeprun-run-result-share-card::before {
  width: 510px;
  height: 510px;
  left: -92px;
  top: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
}

.yeprun-run-result-share-capture-stage .yeprun-run-result-share-card::after {
  width: 16px;
  height: 16px;
  right: 86px;
  bottom: 178px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    -522px -34px 0 -5px #ffffff,
    -42px 84px 0 -7px #ffffff,
    -558px 70px 0 -7px #ffffff,
    -92px -358px 0 -6px #ffffff;
}

.yeprun-run-result-share-capture-stage .yeprun-run-result-share-card.is-type-cheetah {
  --run-result-share-bg-top: rgba(255, 194, 84, 0.18);
  --run-result-share-bg-bottom: rgba(240, 151, 50, 0.55);
  --run-result-share-title: #c77620;
  --run-result-share-copy: #b66c20;
}

.yeprun-run-result-share-capture-stage .yeprun-run-result-share-card.is-type-zebra {
  --run-result-share-bg-top: rgba(225, 229, 234, 0.55);
  --run-result-share-bg-bottom: rgba(155, 166, 177, 0.58);
  --run-result-share-title: #5b6570;
  --run-result-share-copy: #66717d;
}

.yeprun-run-result-share-capture-stage .yeprun-run-result-share-card.is-type-camel {
  --run-result-share-bg-top: rgba(212, 165, 116, 0.18);
  --run-result-share-bg-bottom: rgba(212, 165, 116, 0.55);
  --run-result-share-title: #a17a50;
  --run-result-share-copy: #a97848;
}

.yeprun-run-result-share-capture-stage .yeprun-run-result-share-card.is-type-kangaroo {
  --run-result-share-bg-top: rgba(247, 190, 151, 0.22);
  --run-result-share-bg-bottom: rgba(223, 134, 88, 0.56);
  --run-result-share-title: #bd714f;
  --run-result-share-copy: #ac6647;
}

.yeprun-run-result-share-capture-stage .yeprun-run-result-share-card.is-type-penguin {
  --run-result-share-bg-top: rgba(210, 229, 241, 0.5);
  --run-result-share-bg-bottom: rgba(135, 167, 190, 0.58);
  --run-result-share-title: #566e84;
  --run-result-share-copy: #5f7488;
}

.yeprun-run-result-share-capture-stage .yeprun-run-result-share-card.is-type-wolf {
  --run-result-share-bg-top: rgba(224, 229, 236, 0.5);
  --run-result-share-bg-bottom: rgba(132, 144, 160, 0.58);
  --run-result-share-title: #525e6d;
  --run-result-share-copy: #5f6976;
}

.yeprun-run-result-share-capture-stage .yeprun-run-result-share-brand {
  position: relative;
  z-index: 1;
  color: #078c4e;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  text-align: left;
}

.yeprun-run-result-share-capture-stage .yeprun-run-result-share-visual {
  position: relative;
  z-index: 1;
  width: 620px;
  height: 470px;
  margin: -4px auto 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yeprun-run-result-share-capture-stage .yeprun-run-result-share-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(81, 54, 28, 0.14));
}

.yeprun-run-result-share-capture-stage .yeprun-run-result-share-card h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--run-result-share-title, #a17a50);
  font-size: 72px;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -1.4px;
}

.yeprun-run-result-share-capture-stage .yeprun-run-result-share-card p {
  position: relative;
  z-index: 1;
  margin: 18px auto 0;
  max-width: 680px;
  color: var(--run-result-share-copy, #a97848);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.45;
  word-break: keep-all;
  white-space: pre-line;
}

.yeprun-run-result-page .yeprun-run-result-toast {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 80;
  min-width: 220px;
  max-width: min(327px, calc(100vw - 40px));
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.88);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.yeprun-run-result-page .yeprun-run-result-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.yeprun-attendance-challenge-page .yeprun-run-result-toast {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 80;
  min-width: 220px;
  max-width: min(327px, calc(100vw - 40px));
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.88);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.yeprun-attendance-challenge-page .yeprun-run-result-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.yeprun-run-result-page .yeprun-run-result-summary-card {
  margin-top: 16px;
  padding: 19px 15px 15px;
  border: 1px solid #e4e7ea;
  border-radius: 13px;
  background: #ffffff;
}

.yeprun-run-result-page .yeprun-run-result-summary-card .yeprun-run-result-summary-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
}

.yeprun-run-result-page .yeprun-run-result-summary-card .yeprun-run-result-summary-title {
  margin: 0;
  color: #202427;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
}

.yeprun-run-result-page .yeprun-run-result-summary-card .yeprun-run-result-summary-copy {
  margin: 4px 0 0;
  color: #9aa3ab;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.yeprun-run-result-page .yeprun-run-result-summary-card .yeprun-run-result-score-wrap {
  min-width: 60px;
  text-align: right;
}

.yeprun-run-result-page .yeprun-run-result-summary-card .yeprun-run-result-score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fff8df;
  color: #f5a814;
  font-size: 11px;
  font-weight: 700;
}

.yeprun-run-result-page .yeprun-run-result-summary-card .yeprun-run-result-score {
  margin-top: 4px;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.1;
  color: #202427;
}

.yeprun-run-result-page .yeprun-run-result-summary-card .yeprun-run-result-score small {
  font-size: 14px;
  font-weight: 700;
}

.yeprun-run-result-page .yeprun-run-result-summary-card .yeprun-run-result-progress {
  height: 7px;
  margin-top: 16px;
  border-radius: 999px;
  background: #f1f2f3;
  overflow: hidden;
}

.yeprun-run-result-page .yeprun-run-result-summary-card .yeprun-run-result-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--run-result-green);
}

.yeprun-run-result-page .yeprun-run-result-summary-card .yeprun-run-result-progress .yeprun-run-result-progress-bar {
  width: 74%;
}

.yeprun-run-result-page .yeprun-run-result-summary-card .yeprun-run-result-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 14px;
}

.yeprun-run-result-page .yeprun-run-result-summary-card .yeprun-run-result-stat-item {
  min-height: 60px;
  padding: 10px 8px;
  border-radius: 8px;
  background: #fafafa;
}

.yeprun-run-result-page .yeprun-run-result-summary-card .yeprun-run-result-stat-label {
  color: #9aa3ab;
  font-size: 11px;
  font-weight: 500;
}

.yeprun-run-result-page .yeprun-run-result-summary-card .yeprun-run-result-stat-value {
  margin-top: 4px;
  color: #171b20;
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
}


.yeprun-run-result-page .yeprun-run-result-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  height: 46px;
  margin-top: 42px;
  border-radius: 13px;
  background: #f8f8f8;
  overflow: hidden;
}

.yeprun-run-result-page .yeprun-run-result-tabs .yeprun-run-result-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  color: #8d9399;
  font-size: 14px;
  font-weight: 700;
}

.yeprun-run-result-page .yeprun-run-result-tabs .yeprun-run-result-tab.is-active {
  border: 1px solid #eceff1;
  border-radius: 13px;
  background: #ffffff;
  color: #41474d;
  box-shadow: 0 4px 12px rgba(31, 39, 47, 0.08);
}

.yeprun-run-result-page .yeprun-run-result-tabs .yeprun-run-result-tab-lock {
  width: 14px;
  height: 14px;
  display: inline-block;
  object-fit: contain;
  flex: none;
}

.yeprun-run-result-page .yeprun-run-result-view {
  display: none;
  margin-top: 24px;
}

.yeprun-run-result-page .yeprun-run-result-view.is-active {
  display: block;
}

.yeprun-run-result-page .yeprun-run-result-section-card {
  padding: 19px 15px;
  border: 1px solid #e6e8eb;
  border-radius: 13px;
  background: #ffffff;
}

.yeprun-run-result-page .yeprun-run-result-section-card + .yeprun-run-result-section-card {
  margin-top: 14px;
}

.yeprun-run-result-page .yeprun-run-result-section-card .yeprun-run-result-pattern-box,
.yeprun-run-result-page .yeprun-run-result-pattern-box {
  margin-top: 12px;
  border: 0;
  background: #fafafa;
}

.yeprun-run-result-page .yeprun-run-result-section-card .yeprun-run-result-section-chip {
  display: inline-flex;
  gap: 7px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff4e8;
  color: #c48648;
  font-size: 12px;
  font-weight: 800;
}

.yeprun-run-result-page .yeprun-run-result-section-card .yeprun-run-result-section-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b9834b;
  flex: none;
}

.yeprun-run-result-page .yeprun-run-result-section-card .yeprun-run-result-section-title {
  margin: 13px 0 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}

.yeprun-run-result-page .yeprun-run-result-section-card .yeprun-run-result-section-title.yeprun-run-result-section-title-flush {
  margin-top: 0;
}

.yeprun-run-result-page .yeprun-run-result-section-card .yeprun-run-result-section-copy {
  margin: 12px 0 0;
  color: #778088;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}

.yeprun-run-result-page .yeprun-run-result-section-card .yeprun-run-result-pattern-title {
  display: block;
  color: #5f666d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.yeprun-run-result-page .yeprun-run-result-section-card .yeprun-run-result-pattern-list {
  display: grid;
  gap: 4px;
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
}

.yeprun-run-result-page .yeprun-run-result-section-card .yeprun-run-result-pattern-item {
  position: relative;
  padding-left: 8px;
  color: #778088;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}

.yeprun-run-result-page .yeprun-run-result-section-card .yeprun-run-result-pattern-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
}

.yeprun-run-result-page .yeprun-run-result-section-card .yeprun-run-result-pattern-item strong {
  color: #5f666d;
  font-weight: 800;
}

.yeprun-run-result-page .yeprun-run-result-section-card .yeprun-run-result-highlight {
  color: var(--run-result-green);
  font-weight: 800;
}

.yeprun-run-result-page .yeprun-run-result-feature-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.yeprun-run-result-page .yeprun-run-result-feature-list .yeprun-run-result-feature-item {
  position: relative;
  padding-left: 16px;
  color: #5e6872;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
}

.yeprun-run-result-page .yeprun-run-result-feature-list .yeprun-run-result-feature-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--run-result-green);
}

.yeprun-run-result-page .yeprun-run-result-detail-link {
  width: 100%;
  height: 42px;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  color: #9aa1a8;
  font-size: 14px;
  font-weight: 600;
}

.yeprun-run-result-page .yeprun-run-result-radar-section > .yeprun-run-result-detail-link {
  height: 34px;
  margin-top: 6px;
  color: #6b6b6b;
  font-weight: 400;
  line-height: 23px;
}

.yeprun-run-result-page .yeprun-run-result-arrow-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: none;
}

.yeprun-run-result-page .yeprun-run-result-challenge {
  margin-top: 14px;
  padding: 18px 14px;
  border: 1px solid #e6e8eb;
  border-radius: 13px;
  background: #ffffff;
}

.yeprun-run-result-page .yeprun-run-result-challenge .yeprun-run-result-challenge-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: #202427;
  font-size: 15px;
  font-weight: 800;
}

.yeprun-run-result-page .yeprun-run-result-challenge .yeprun-run-result-challenge-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.yeprun-run-result-page .yeprun-run-result-challenge .yeprun-run-result-challenge-title-icon {
  width: 19px;
  height: 19px;
  object-fit: contain;
  flex: none;
}

.yeprun-run-result-page .yeprun-run-result-challenge .yeprun-run-result-challenge-progress-head {
  margin-top: 8px;
}

.yeprun-run-result-page .yeprun-run-result-challenge .yeprun-run-result-challenge-progress-label {
  color: #8e969e;
  font-size: 13px;
  font-weight: 600;
}

.yeprun-run-result-page .yeprun-run-result-challenge .yeprun-run-result-challenge-percent {
  color: var(--run-result-green);
  font-size: 16px;
}

.yeprun-run-result-page .yeprun-run-result-challenge .yeprun-run-result-challenge-progress {
  height: 7px;
  margin: 13px 0;
  border-radius: 999px;
  background: #f1f2f3;
  overflow: hidden;
}

.yeprun-run-result-page .yeprun-run-result-challenge .yeprun-run-result-challenge-progress span {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--run-result-green);
  border-radius: inherit;
}

.yeprun-run-result-page .yeprun-run-result-challenge .yeprun-run-result-challenge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  color: #67717a;
  font-size: 14px;
  font-weight: 500;
}

.yeprun-run-result-page .yeprun-run-result-challenge .yeprun-run-result-challenge-row strong {
  color: #202427;
  font-size: 15px;
  font-weight: 800;
}

.yeprun-run-result-page .yeprun-run-result-challenge .yeprun-run-result-challenge-reward {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #eceff1;
  color: #777f87;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

.yeprun-run-result-page .yeprun-run-result-challenge .yeprun-run-result-challenge-reward-icon {
  font-size: 12px;
  line-height: 1;
  flex: none;
}

.yeprun-run-result-page .yeprun-run-result-share-reward-button {
  width: 100%;
  height: 50px;
  margin-top: 14px;
  border-radius: 7px;
  background: #171b1c;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.yeprun-run-result-page .yeprun-run-result-share-reward-button .yeprun-run-result-share-reward-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: none;
}

.yeprun-run-result-page .yeprun-run-result-product {
  margin-top: 16px;
  padding: 18px;
  min-height: 140px;
  border-radius: 13px;
  background: linear-gradient(135deg, #d9bd79 0%, #15c76b 92%);
  color: #ffffff;
}

.yeprun-run-result-page .yeprun-run-result-product .yeprun-run-result-product-label {
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.yeprun-run-result-page .yeprun-run-result-product .yeprun-run-result-product-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: none;
}

.yeprun-run-result-page .yeprun-run-result-product .yeprun-run-result-product-title {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 800;
}

.yeprun-run-result-page .yeprun-run-result-product .yeprun-run-result-product-copy {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
  font-weight: 700;
}

.yeprun-run-result-page .yeprun-run-result-product .yeprun-run-result-product-price {
  margin-top: 16px;
  font-size: 21px;
  font-weight: 800;
}

.yeprun-run-result-page .yeprun-run-result-product .yeprun-run-result-product-price del {
  margin-left: 9px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}

.yeprun-run-result-page .yeprun-run-result-lock-card {
  min-height: 315px;
  margin: 56px auto 0;
  padding: 49px 24px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(37, 46, 57, 0.12);
  text-align: center;
}

.yeprun-run-result-page .yeprun-run-result-view .yeprun-run-result-lock-card[hidden],
.yeprun-run-result-page .yeprun-run-result-view [data-run-result-analysis-open][hidden],
.yeprun-run-result-page .yeprun-run-result-view [data-run-result-exercise-open][hidden] {
  display: none;
}

.yeprun-run-result-page .yeprun-run-result-lock-card .yeprun-run-result-lock-icon {
  width: 65px;
  height: 65px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  object-fit: contain;
}

.yeprun-run-result-page .yeprun-run-result-lock-card .yeprun-run-result-lock-title {
  margin: 26px 0 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
}

.yeprun-run-result-page .yeprun-run-result-lock-card .yeprun-run-result-lock-copy {
  margin: 12px 0 0;
  color: #858b91;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}

.yeprun-run-result-page .yeprun-run-result-lock-card .yeprun-run-result-subscribe-button {
  width: 224px;
  height: 48px;
  margin-top: 28px;
  border-radius: 999px;
  background: linear-gradient(105deg, #12c967 0%, #a24ff0 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
}

.yeprun-run-result-page .yeprun-run-result-radar-section .yeprun-run-result-analysis-title,
.yeprun-run-result-page .yeprun-run-result-exercise-section .yeprun-run-result-analysis-title {
  margin: 0;
  color: #262c31;
  font-size: 20px;
  font-weight: 600;
  line-height: 140%;
}

.yeprun-run-result-page .yeprun-run-result-radar-section .yeprun-run-result-analysis-title.yeprun-run-result-analysis-title-spaced {
  margin-top: 36px;
  margin-bottom: 6px;
}

.yeprun-run-result-page .yeprun-run-result-radar-section .yeprun-run-result-analysis-subtitle,
.yeprun-run-result-page .yeprun-run-result-exercise-section .yeprun-run-result-analysis-subtitle {
  margin: 0 0 24px;
  color: #778088;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.yeprun-run-result-page .yeprun-run-result-rla-section .yeprun-run-result-analysis-subtitle.yeprun-run-result-rla-hint {
  margin: 6px 0 0;
  color: #6a7282;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.0644531px;
  text-align: center;
}

.yeprun-run-result-page .yeprun-run-result-radar-wrap {
  position: relative;
  width: 298px;
  height: 290px;
  margin: 36px auto 0;
}

.yeprun-run-result-page .yeprun-run-result-radar-wrap .yeprun-run-result-radar-grid {
  position: absolute;
  inset: 34px 38px;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background:
    linear-gradient(30deg, transparent 49%, rgba(126, 91, 220, 0.16) 50%, transparent 51%),
    linear-gradient(90deg, transparent 49%, rgba(126, 91, 220, 0.16) 50%, transparent 51%),
    linear-gradient(150deg, transparent 49%, rgba(126, 91, 220, 0.16) 50%, transparent 51%),
    #faf8ff;
  border: 1px solid rgba(126, 91, 220, 0.16);
}

.yeprun-run-result-page .yeprun-run-result-radar-wrap .yeprun-run-result-radar-fill {
  position: absolute;
  inset: 59px 70px 49px 58px;
  clip-path: polygon(50% 5%, 86% 30%, 82% 75%, 50% 95%, 17% 75%, 14% 29%);
  background: radial-gradient(circle, rgba(137, 42, 255, 0.82) 0%, rgba(170, 103, 255, 0.58) 55%, rgba(185, 139, 255, 0.42) 100%);
  filter: blur(0.2px);
}

.yeprun-run-result-page .yeprun-run-result-radar-wrap .yeprun-run-result-radar-label {
  position: absolute;
  color: #101010;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
  line-height: 16px;
}

.yeprun-run-result-page .yeprun-run-result-radar-wrap .yeprun-run-result-radar-label strong {
  display: block;
  margin-top: 1px;
  color: #9231ee;
  font-size: 13px;
  font-weight: 600;
  line-height: 13px;
}

.yeprun-run-result-page .yeprun-run-result-radar-label.is-top { left: 50%; top: -2px; transform: translateX(-50%); }
.yeprun-run-result-page .yeprun-run-result-radar-label.is-right-top { right: 10px; top: 58px; }
.yeprun-run-result-page .yeprun-run-result-radar-label.is-right-bottom { right: 6px; bottom: 64px; }
.yeprun-run-result-page .yeprun-run-result-radar-label.is-bottom { left: 50%; bottom: -3px; transform: translateX(-50%); }
.yeprun-run-result-page .yeprun-run-result-radar-label.is-left-bottom { left: 4px; bottom: 64px; }
.yeprun-run-result-page .yeprun-run-result-radar-label.is-left-top { left: 0; top: 50px; }

.yeprun-run-result-page .yeprun-run-result-radar-desc {
  min-height: 74px;
  margin-top: 25px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f5f3ff;
  color: #181a1a;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
}

.yeprun-run-result-page .yeprun-run-result-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 9px;
  margin-top: 0;
}

.yeprun-run-result-page .yeprun-run-result-metric-card {
  min-height: 107px;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(244, 246, 247, 0.5);
}

.yeprun-run-result-page .yeprun-run-result-metric-card .yeprun-run-result-metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: #262c31;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

.yeprun-run-result-page .yeprun-run-result-metric-card .yeprun-run-result-metric-name {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.yeprun-run-result-page .yeprun-run-result-metric-card .yeprun-run-result-metric-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.78;
}

.yeprun-run-result-page .yeprun-run-result-metric-card .yeprun-run-result-metric-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 15px;
}

.yeprun-run-result-page .yeprun-run-result-metric-card .yeprun-run-result-metric-state {
  width: 55px;
  height: 55px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 5px solid #5ee09f;
  color: #262c31;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.yeprun-run-result-page .yeprun-run-result-metric-card .yeprun-run-result-metric-state.is-good {
  border-color: #58d896;
}

.yeprun-run-result-page .yeprun-run-result-metric-card .yeprun-run-result-metric-state.is-best {
  border-color: #72caff;
}

.yeprun-run-result-page .yeprun-run-result-metric-card .yeprun-run-result-metric-state.is-warn {
  border-color: #f05b3e;
}

.yeprun-run-result-page .yeprun-run-result-metric-card .yeprun-run-result-metric-value {
  text-align: right;
  color: #262c31;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.16px;
}

.yeprun-run-result-page .yeprun-run-result-metric-card .yeprun-run-result-metric-value small {
  margin-left: 2px;
  color: #adb4ba;
  font-size: 11px;
  font-weight: 600;
  line-height: 13px;
}

.yeprun-run-result-page .yeprun-run-result-rla-section {
  margin-top: 32px;
}

.yeprun-run-result-page .yeprun-run-result-rla-section .yeprun-run-result-rla-title {
  margin: 0;
  color: #262c31;
  font-size: 20px;
  font-weight: 600;
  line-height: 140%;
}

.yeprun-run-result-page .yeprun-run-result-rla-section .yeprun-run-result-rla-subhead {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  color: #444444;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}

.yeprun-run-result-page .yeprun-run-result-rla-section .yeprun-run-result-rla-subhead span:first-child {
  font-weight: 500;
}

.yeprun-run-result-page .yeprun-run-result-rla-section .yeprun-run-result-rla-toggle {
  display: grid;
  grid-template-columns: minmax(0, 203fr) minmax(0, 124fr);
  gap: 0;
  margin-top: 5px;
}

.yeprun-run-result-page .yeprun-run-result-rla-section .yeprun-run-result-rla-pill {
  height: 23px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  line-height: 16px;
  background: #45b178;
}

.yeprun-run-result-page .yeprun-run-result-rla-section .yeprun-run-result-rla-pill.is-blue {
  background: #5192dc;
}

.yeprun-run-result-page .yeprun-run-result-rla-section .yeprun-run-result-rla-image {
  width: 100%;
  height: 62.75px;
  margin-top: 6px;
  object-fit: cover;
}

.yeprun-run-result-page .yeprun-run-result-rla-section .yeprun-run-result-rla-labels {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 11px;
  margin-top: 6px;
  color: #0a0a0a;
  font-size: 13px;
  font-weight: 500;
  line-height: 145%;
  text-align: center;
}

.yeprun-run-result-page .yeprun-run-result-rla-section .yeprun-run-result-rla-card {
  min-height: 172px;
  margin-top: 16px;
  padding: 19px 20px;
  border-radius: 16px;
  background: #ffedd4;
}

.yeprun-run-result-page .yeprun-run-result-rla-section .yeprun-run-result-rla-card-title {
  color: #101828;
  font-size: 17px;
  font-weight: 600;
  line-height: 23px;
}

.yeprun-run-result-page .yeprun-run-result-rla-section .yeprun-run-result-rla-card-title strong {
  color: #101828;
}

.yeprun-run-result-page .yeprun-run-result-rla-section .yeprun-run-result-rla-card-copy {
  margin: 9px 0 0;
  color: #364153;
  font-size: 15px;
  font-weight: 400;
  line-height: 145%;
  letter-spacing: -0.01em;
}

.yeprun-run-result-page .yeprun-run-result-rla-section .yeprun-run-result-rla-button {
  width: 100%;
  height: 42px;
  margin-top: 16px;
  border: 1px solid #ededed;
  border-radius: 8px;
  background: #ffffff;
  color: #181a1a;
  font-size: 14px;
  font-weight: 400;
  line-height: 145%;
}

.yeprun-run-result-page .yeprun-run-result-change-card {
  margin: 14px 20px 0;
  padding: 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, #10bb61 0%, #0fb860 14.29%, #0eb65e 28.57%, #0db35d 42.86%, #0db15c 57.14%, #0cae5b 71.43%, #0bac59 85.71%, #0aa958 100%);
  color: #ffffff;
}

.yeprun-run-result-page .yeprun-run-result-change-card .yeprun-run-result-change-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.439453px;
}

.yeprun-run-result-page .yeprun-run-result-change-card .yeprun-run-result-change-copy {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.150391px;
}

.yeprun-run-result-page .yeprun-run-result-change-card .yeprun-run-result-change-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.yeprun-run-result-page .yeprun-run-result-change-card .yeprun-run-result-change-item {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.150391px;
}

.yeprun-run-result-page .yeprun-run-result-change-card .yeprun-run-result-change-item strong {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.yeprun-run-result-page .yeprun-run-result-report-link {
  width: calc(100% - 40px);
  height: 91px;
  margin: 14px 20px 0;
  padding: 21px 13px 21px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1.62585px solid #e8e8e8;
  border-radius: 14px;
  background: #ffffff;
  color: #181a1a;
  text-align: left;
}

.yeprun-run-result-page .yeprun-run-result-report-link strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.3125px;
}

.yeprun-run-result-page .yeprun-run-result-report-link span {
  display: block;
  margin-top: 4px;
  color: #6b7684;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.150391px;
}

.yeprun-run-result-page .yeprun-run-result-radar-section {
  margin-right: -20px;
  margin-left: -20px;
}

.yeprun-run-result-page .yeprun-run-result-radar-section .yeprun-run-result-knee-detail-link {
  width: 100%;
  min-height: 34px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #ffffff;
  color: #6b6b6b;
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
  text-align: left;
}

.yeprun-run-result-page .yeprun-run-result-radar-section .yeprun-run-result-knee-detail-link .yeprun-run-result-arrow-icon {
  width: 20px;
  height: 20px;
  opacity: 0.78;
}

.yeprun-run-result-page .yeprun-run-result-exercise-section .ai-workout-page {
  background-color: #ffffff;
  padding-bottom: 0;
}

.yeprun-run-result-page .yeprun-run-result-exercise-section .ai-content {
  padding: 0;
}

.yeprun-run-result-page .yeprun-run-result-exercise-section .exercise-item {
  cursor: pointer;
}

.yeprun-run-result-page .yeprun-run-result-exercise-section .exercise-item:focus-visible {
  outline: 2px solid #12c46b;
  outline-offset: 3px;
}

.yeprun-run-result-page .yeprun-run-result-exercise-section .title-area {
  margin-bottom: 0;
}

.yeprun-run-result-page .yeprun-run-result-exercise-section .title-area h2 {
  margin-bottom: 0;
}

.yeprun-run-result-page .yeprun-run-result-exercise-list {
  display: grid;
  gap: 11px;
  margin-top: 16px;
}

.yeprun-run-result-page .yeprun-run-result-exercise-card {
  min-height: 81px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #eef0f2;
  border-radius: 10px;
  background: #ffffff;
}

.yeprun-run-result-page .yeprun-run-result-exercise-card .yeprun-run-result-exercise-thumb {
  width: 72px;
  height: 58px;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(16, 184, 97, 0.82), rgba(110, 80, 217, 0.72)),
    url("/images/202606_yeprun/camel.png") center 60% / 88px auto no-repeat;
  overflow: hidden;
}

.yeprun-run-result-page .yeprun-run-result-exercise-card .yeprun-run-result-exercise-status {
  display: inline-flex;
  height: 19px;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 5px;
  background: #fff2d9;
  color: #e89a21;
  font-size: 10px;
  font-weight: 800;
}

.yeprun-run-result-page .yeprun-run-result-exercise-card .yeprun-run-result-exercise-status.is-done {
  background: #e9f1ff;
  color: #6092e8;
}

.yeprun-run-result-page .yeprun-run-result-exercise-card .yeprun-run-result-exercise-title {
  margin-top: 4px;
  color: #22272c;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.yeprun-run-result-page .yeprun-run-result-exercise-card .yeprun-run-result-exercise-tag {
  margin-top: 3px;
  color: #9aa2aa;
  font-size: 12px;
  font-weight: 600;
}

.yeprun-run-result-page .yeprun-run-result-exercise-card .yeprun-run-result-exercise-link {
  color: var(--run-result-green);
  background: transparent;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.yeprun-run-result-page .yeprun-run-result-routine-card {
  margin-top: 32px;
  padding: 16px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, #12c46b 0%, #9231ee 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  color: #ffffff;
}

.yeprun-run-result-page .yeprun-run-result-routine-card .yeprun-run-result-routine-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.yeprun-run-result-page .yeprun-run-result-routine-card .yeprun-run-result-routine-label-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex: none;
}

.yeprun-run-result-page .yeprun-run-result-routine-card .yeprun-run-result-routine-title {
  margin: 4px 0 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.2px;
}

.yeprun-run-result-page .yeprun-run-result-routine-card .yeprun-run-result-routine-point {
  margin: 4px 0 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 23px;
}

.yeprun-run-result-page .yeprun-run-result-routine-card .yeprun-run-result-routine-box {
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
}

.yeprun-run-result-page .yeprun-run-result-routine-card .yeprun-run-result-routine-box:first-of-type {
  min-height: 132px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.yeprun-run-result-page .yeprun-run-result-routine-card .yeprun-run-result-routine-box + .yeprun-run-result-routine-box {
  margin-top: 11px;
}

.yeprun-run-result-page .yeprun-run-result-routine-card .yeprun-run-result-routine-box-title {
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.yeprun-run-result-page .yeprun-run-result-routine-card .yeprun-run-result-routine-row {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.yeprun-run-result-page .yeprun-run-result-routine-card .yeprun-run-result-routine-row strong {
  color: #ffffff;
  font-weight: 600;
}

.yeprun-run-result-start-button {
  width: 100%;
  height: 48px;
  margin-top: 16px;
  border-radius: 999px;
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  border:solid 1px #ccc !important;
}

.yeprun-run-result-page .yeprun-run-result-bottom-action {
/*  position: absolute;*/
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 10px 21px calc(11px + var(--run-result-safe-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(0, 27, 55, 0.08);
}

.yeprun-run-result-page .yeprun-run-result-bottom-action .yeprun-run-result-bottom-primary {
  width: 100%;
  height: 49px;
  border-radius: 8px;
  background: var(--run-result-green);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.yeprun-run-result-page .yeprun-run-result-bottom-action .yeprun-run-result-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.yeprun-run-result-page .yeprun-run-result-bottom-action .yeprun-run-result-bottom-secondary {
  height: 49px;
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #ffffff;
  color: #191f28;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.yeprun-run-result-page .yeprun-run-result-home-indicator {
  width: 134px;
  height: 5px;
  margin: 9px auto 0;
  border-radius: 999px;
  background: #111820;
}

.yeprun-run-result-page .yeprun-record-share-sheet[hidden] {
  display: none;
}

.yeprun-run-result-page .yeprun-record-share-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.yeprun-run-result-page .yeprun-record-share-dim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.82);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.yeprun-run-result-page .yeprun-record-share-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  /* max-width: 375px; */
  padding: 24px 24px calc(24px + var(--run-result-safe-bottom));
  border-radius: 24px 24px 0 0;
  background: #ffffff;
  transform: translateY(100%);
  transition: transform 0.22s ease;
}

.yeprun-run-result-page .yeprun-record-share-sheet.is-open .yeprun-record-share-dim {
  opacity: 1;
}

.yeprun-run-result-page .yeprun-record-share-sheet.is-open .yeprun-record-share-panel {
  transform: translateY(0);
}

.yeprun-run-result-page .yeprun-record-share-handle {
  display: block;
  width: 48px;
  height: 4px;
  margin: 0 auto 27px;
  border-radius: 999px;
  background: #e3e6ea;
}

.yeprun-run-result-page .yeprun-record-share-title {
  margin: 0 0 12px;
  color: #181a1a;
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -0.02em;
}

.yeprun-run-result-page .yeprun-record-share-desc {
  margin: 0 0 22px;
  color: #6b6b6b;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.02em;
}

.yeprun-run-result-page .yeprun-record-share-primary,
.yeprun-run-result-page .yeprun-record-share-secondary {
  width: 100%;
  height: 58px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.yeprun-run-result-page .yeprun-record-share-primary {
  margin-bottom: 12px;
  background: var(--run-result-green);
  color: #ffffff;
}

.yeprun-run-result-page .yeprun-record-share-secondary {
  border: 1px solid #e5e8eb;
  background: #ffffff;
  color: #181a1a;
}

.yeprun-run-result-page .yeprun-record-share-file,
.yeprun-record-share-page .yeprun-record-share-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ──────────────────────────────────────────
   YepRun Record Share
   - Scope: .yeprun-record-share-page / .yeprun-record-complete-page
────────────────────────────────────────── */
.yeprun-record-share-page,
.yeprun-record-complete-page {
  --record-share-green: #10bb61;
  --record-share-dark: #181a1a;
  --record-share-muted: #6b7280;
  --record-share-line: #e5e8eb;
  --record-share-safe-bottom: env(safe-area-inset-bottom, 0px);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background: #f2f4f6;
  font-family: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
}

.yeprun-record-share-page {
  background: #ffffff;
}

.yeprun-record-complete-page {
  background: #ffffff;
}

.yeprun-record-share-page *,
.yeprun-record-complete-page * {
  box-sizing: border-box;
}

.yeprun-record-share-page button,
.yeprun-record-complete-page button {
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.yeprun-record-share-page .yeprun-record-share-frame,
.yeprun-record-complete-page .yeprun-record-complete-frame {
  position: relative;
  width: 100%;
  max-width: 375px;
  min-height: 100vh;
  overflow-x: hidden;
  background: #ffffff;
}

.yeprun-record-share-page .yeprun-record-share-frame {
  max-width: 430px;
  background: #ffffff;
}

.yeprun-record-share-page .yeprun-record-share-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #ffffff;
}

.yeprun-record-share-page .yeprun-record-share-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 13px 28px;
  gap: 20px;
}

.yeprun-record-share-page .yeprun-record-share-nav h1 {
  margin: 0;
  color: #181a1a;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: -0.02em;
}

.yeprun-record-share-page .yeprun-record-share-nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  background: transparent;
  color: #111111;
  font-size: 34px;
  font-weight: 300;
  line-height: 24px;
}

.yeprun-record-share-page .yeprun-record-share-nav-button img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.yeprun-record-share-page .yeprun-record-share-nav-button .yeprun-record-share-close-icon {
  width: 24px;
  height: 24px;
}

.yeprun-record-share-page .yeprun-record-share-preview {
  position: relative;
  --record-share-scale: 1;
  width: 100%;
  max-width: none;
  aspect-ratio: 375 / 469;
  min-height: 0;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  background: #f2f4f6;
}

.yeprun-record-share-page .yeprun-record-share-preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.yeprun-record-share-page .yeprun-record-share-preview img[data-record-share-preview] {
  position: relative;
  z-index: 0;
}

.yeprun-record-share-page .yeprun-record-share-preview .yeprun-record-share-photo {
  position: relative;
  z-index: 0;
}

.yeprun-record-share-page .yeprun-record-share-template-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 469px;
  z-index: 1;
  display: none;
  overflow: hidden;
  pointer-events: none;
  transform: scale(var(--record-share-scale));
  transform-origin: top left;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template .yeprun-record-share-template-layer {
  display: block;
}

.yeprun-record-share-page .yeprun-record-share-template-assets {
  position: absolute;
  inset: 0;
  display: none;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-template-assets-1,
.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-template-assets-2 {
  display: block;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template .yeprun-record-share-template-logo {
  animation: yeprunRecordShareLogoIn 0.42s ease-out both;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template .yeprun-record-share-template-text {
  animation: yeprunRecordShareTextIn 0.46s ease-out 0.06s both;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-template-deco.is-up {
  animation: yeprunRecordShareDecoFromTop 0.54s ease-out 0.08s both;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-template-deco.is-down {
  animation: yeprunRecordShareDecoFromBottom 0.54s ease-out 0.1s both;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-template-deco.is-line {
  animation: yeprunRecordShareWaveReveal 0.78s cubic-bezier(0.22, 0.72, 0.16, 1) 0.1s both;
}

.yeprun-record-share-page .yeprun-record-share-template-layer img {
  position: absolute;
  z-index: 2;
  display: block;
  width: auto;
  height: auto;
  min-height: 0;
  object-fit: contain;
}

.yeprun-record-share-page .yeprun-record-share-template-dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.04) 42%, rgba(0, 0, 0, 0.5) 100%);
}

.yeprun-record-share-page .yeprun-record-share-template-assets-2 .yeprun-record-share-template-dim {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.16) 42%, rgba(0, 0, 0, 0.52) 100%);
}

.yeprun-record-share-page .yeprun-record-share-template-logo.is-white {
  top: 26px;
  left: 23px;
  width: 130px;
}

.yeprun-record-share-page .yeprun-record-share-template-logo.is-green {
  top: 26px;
  left: 23px;
  width: 130px;
}

.yeprun-record-share-page .yeprun-record-share-template-text.is-good-run {
  top: 264px;
  left: 16px;
  width: 180px;
}

.yeprun-record-share-page .yeprun-record-share-template-text.is-find-pace {
  top: 245px;
  left: 19px;
  width: 156px;
}

.yeprun-record-share-page .yeprun-record-share-template-deco.is-up {
  top: -3px;
  right: -14px;
  width: 161px;
}

.yeprun-record-share-page .yeprun-record-share-template-deco.is-down {
  right: 0;
  bottom: 0;
  width: 146px;
}

.yeprun-record-share-page .yeprun-record-share-template-deco.is-line {
  right: 0;
  bottom: 0;
  width: 375px;
}

@keyframes yeprunRecordShareLogoIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes yeprunRecordShareTextIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes yeprunRecordShareDecoFromTop {
  from {
    opacity: 0;
    transform: translate(18px, -18px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes yeprunRecordShareDecoFromBottom {
  from {
    opacity: 0;
    transform: translate(18px, 18px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes yeprunRecordShareWaveReveal {
  from {
    opacity: 0;
    clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0);
  }
  40% {
    opacity: 1;
  }
  to {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .yeprun-record-share-page .yeprun-record-share-template-logo,
  .yeprun-record-share-page .yeprun-record-share-template-text,
  .yeprun-record-share-page .yeprun-record-share-template-deco {
    animation: none !important;
  }
}

.yeprun-record-share-page .yeprun-record-share-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 469px;
  z-index: 2;
  pointer-events: none;
  transform: scale(var(--record-share-scale));
  transform-origin: top left;
}

.yeprun-record-share-page .yeprun-record-share-overlay [hidden] {
  display: none !important;
}

.yeprun-record-share-page .yeprun-record-share-date {
  position: absolute;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  text-transform: uppercase;
}

.yeprun-record-share-page .yeprun-record-share-date span {
  margin-left: 12px;
}

.yeprun-record-share-page .yeprun-record-share-stat {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 76px;
  min-height: 52px;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.32);
  color: #ffffff;
  text-align: left;
}

.yeprun-record-share-page .yeprun-record-share-stat span {
  margin-bottom: 2px;
  color: #10e176;
  font-size: 7px;
  font-weight: 800;
  line-height: 10px;
}

.yeprun-record-share-page .yeprun-record-share-stat strong {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  color: #ffffff;
  font-family: "Noto Sans KR", Pretendard, sans-serif;
  font-size: 29px;
  font-weight: 900;
  line-height: 31px;
  letter-spacing: -0.04em;
}

.yeprun-record-share-page .yeprun-record-share-stat small {
  padding-bottom: 3px;
  font-size: 9px;
  font-weight: 800;
  line-height: 12px;
}

.yeprun-record-share-page .yeprun-record-share-data-bar[hidden] {
  display: none !important;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template .yeprun-record-share-date {
  left: 102px;
  bottom: 86px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template .yeprun-record-share-stat {
  bottom: 55px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template .yeprun-record-share-stat.is-distance {
  left: 14px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template .yeprun-record-share-stat.is-pace {
  left: 103px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template .yeprun-record-share-stat.is-time {
  left: 193px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-data-bar {
  position: absolute;
  left: 12.79px;
  top: 357.78px;
  height: 56.22px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 6.66px 12.29px;
  border: 0.26px solid rgba(255, 255, 255, 0.3);
  border-radius: 7.68px;
  background: rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  transition: width 0.18s ease;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-data-bar[data-stat-count="1"] {
  width: 112px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-data-bar[data-stat-count="2"] {
  width: 188px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-data-bar[data-stat-count="3"] {
  width: 270px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-date {
  top: 329.64px;
  bottom: auto;
  left: 17.91px;
  display: flex;
  align-items: center;
  gap: 17.16px;
  width: 161.16px;
  height: 22px;
  color: #ffffff;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: 18.37px;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-date span {
  margin-left: 0;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-stat {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  min-width: 0;
  min-height: 0;
  height: 42.9px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-stat.is-distance {
  left: auto;
  width: 60px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-stat.is-pace {
  left: auto;
  width: 63px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-stat.is-time {
  left: auto;
  width: 70px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-stat:not([hidden]) ~ .yeprun-record-share-stat:not([hidden]) {
  margin-left: 15px;
  padding-left: 15px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-stat.is-pace:not([hidden]) ~ .yeprun-record-share-stat.is-time:not([hidden]) {
  margin-left: 23px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-stat:not([hidden]) ~ .yeprun-record-share-stat:not([hidden])::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 0;
  height: 34.89px;
  border-right: 0.47px solid rgba(255, 255, 255, 0.5);
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-stat span {
  margin-bottom: 1.9px;
  color: #0cd86e;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: 10.68px;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 0;
  text-transform: uppercase;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-stat strong {
  display: flex;
  align-items: flex-end;
  gap: 2.85px;
  color: #ffffff;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: 34.61px;
  font-weight: 400;
  line-height: 80%;
  letter-spacing: 0;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-stat small {
  padding-bottom: 0;
  color: #ffffff;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: 13.06px;
  font-weight: 400;
  line-height: 110%;
  letter-spacing: 0;
  text-transform: uppercase;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-data-bar.has-long-pace[data-stat-count="3"] {
  width: 268px;
  padding-right: 8px;
  padding-left: 8px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-data-bar.has-long-pace[data-stat-count="3"] .yeprun-record-share-stat.is-distance {
  width: 65px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-data-bar.has-long-pace[data-stat-count="3"] .yeprun-record-share-stat.is-pace {
  width: 88px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-data-bar.has-long-pace[data-stat-count="3"] .yeprun-record-share-stat.is-time {
  width: 70px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-data-bar.has-long-pace[data-stat-count="3"] .yeprun-record-share-stat:not([hidden]) ~ .yeprun-record-share-stat:not([hidden]) {
  margin-left: 11px;
  padding-left: 11px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-data-bar.has-long-pace[data-stat-count="3"] .yeprun-record-share-stat.is-pace:not([hidden]) ~ .yeprun-record-share-stat.is-time:not([hidden]) {
  margin-left: 11px;
  padding-left: 11px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-1 .yeprun-record-share-data-bar.has-long-pace[data-stat-count="3"] .yeprun-record-share-stat.is-pace strong {
  white-space: nowrap;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-date {
  top: 22px;
  right: 21px;
  left: auto;
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 17.16px;
  width: auto;
  height: 22px;
  color: #ffffff;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: 18.37px;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-date span {
  margin-left: 0;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar {
  position: absolute;
  left: 13px;
  top: 345.5px;
  height: 77px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 9px 16.5px;
  border: 0.35px solid rgba(255, 255, 255, 0.3);
  border-radius: 10.4px;
  background: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  backdrop-filter: blur(6px);
  transition: width 0.18s ease;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar[data-stat-count="1"] {
  width: 129px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar[data-stat-count="2"] {
  width: 236px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar[data-stat-count="2"][data-plain-order="distance-pace"] {
  width: 250px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar[data-stat-count="2"][data-plain-order="distance-time"] {
  width: 240px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar[data-stat-count="2"][data-plain-order="pace-time"] {
  width: 255px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar[data-stat-count="3"] {
  width: 340px;
  padding-right: 14px;
  padding-left: 14px;
  display: grid;
  grid-template-columns: 88px 100px 96px;
  column-gap: 10px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar[data-stat-count="3"] .yeprun-record-share-stat.is-distance {
  width: auto;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar[data-stat-count="3"] .yeprun-record-share-stat.is-pace {
  width: auto;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar[data-stat-count="3"] .yeprun-record-share-stat.is-time {
  width: auto;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-stat {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  min-width: 0;
  min-height: 0;
  height: 59px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-stat.is-distance {
  left: auto;
  width: 88px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-stat.is-pace {
  left: auto;
  width: 105px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-stat.is-time {
  left: auto;
  width: 91px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-stat:not([hidden]) ~ .yeprun-record-share-stat:not([hidden]) {
  margin-left: 14px;
  padding-left: 14px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-stat.is-pace:not([hidden]) ~ .yeprun-record-share-stat.is-time:not([hidden]) {
  margin-left: 14px;
  padding-left: 14px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar[data-stat-count="3"] .yeprun-record-share-stat:not([hidden]) ~ .yeprun-record-share-stat:not([hidden]) {
  margin-left: 0;
  padding-left: 18px;
  border-left: 0.64px solid rgba(255, 255, 255, 0.5);
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar[data-stat-count="3"] .yeprun-record-share-stat.is-pace:not([hidden]) ~ .yeprun-record-share-stat.is-time:not([hidden]) {
  margin-left: 0;
  padding-left: 18px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-stat:not([hidden]) ~ .yeprun-record-share-stat:not([hidden])::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 0;
  height: 47px;
  border-right: 0.64px solid rgba(255, 255, 255, 0.5);
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar[data-stat-count="3"] .yeprun-record-share-stat:not([hidden]) ~ .yeprun-record-share-stat:not([hidden])::before {
  content: none;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-stat span {
  margin-bottom: 2.6px;
  color: #0cd86e;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: 14.48px;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 0;
  text-transform: uppercase;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-stat strong {
  display: flex;
  align-items: flex-end;
  gap: 3.85px;
  color: #ffffff;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: 48.25px;
  font-weight: 400;
  line-height: 80%;
  letter-spacing: 0;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar[data-stat-count="3"] .yeprun-record-share-stat strong {
  font-size: 45.5px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar[data-stat-count="3"] .yeprun-record-share-stat.is-pace strong {
  white-space: nowrap;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar.has-long-pace[data-stat-count="3"] {
  grid-template-columns: 88px 112px 94px;
  column-gap: 8px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar.has-long-pace[data-stat-count="3"] .yeprun-record-share-stat:not([hidden]) ~ .yeprun-record-share-stat:not([hidden]) {
  padding-left: 10px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar.has-long-pace[data-stat-count="3"] .yeprun-record-share-stat.is-pace:not([hidden]) ~ .yeprun-record-share-stat.is-time:not([hidden]) {
  padding-left: 10px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-data-bar.has-long-pace[data-stat-count="3"] .yeprun-record-share-stat.is-pace strong {
  white-space: nowrap;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-template-2 .yeprun-record-share-stat small {
  padding-bottom: 0;
  color: #ffffff;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: 17.7px;
  font-weight: 400;
  line-height: 110%;
  letter-spacing: 0;
  text-transform: uppercase;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain {
  min-height: 467px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain img {
  width: 100%;
  min-height: 467px;
  object-position: center top;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-stat,
.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-date {
  position: absolute;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  min-width: auto;
  min-height: 28px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  text-align: center;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-data-bar {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-stat span {
  display: none;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-stat strong,
.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-date {
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
  line-height: 30px;
  letter-spacing: -0.05em;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-stat strong {
  white-space: nowrap;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-stat small {
  padding-bottom: 4px;
  font-size: 14px;
  line-height: 18px;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-stat.is-distance,
.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-stat.is-pace,
.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-stat.is-time {
  top: 29px;
  width: max-content;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-data-bar[data-plain-order="distance-pace-time"] .yeprun-record-share-stat.is-distance {
  left: 42%;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-data-bar[data-plain-order="distance-pace-time"] .yeprun-record-share-stat.is-pace {
  left: 76%;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-data-bar[data-plain-order="distance-pace-time"] .yeprun-record-share-stat.is-time {
  left: 9%;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-data-bar[data-plain-order="distance-pace"] .yeprun-record-share-stat.is-distance {
  left: 9%;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-data-bar[data-plain-order="distance-pace"] .yeprun-record-share-stat.is-pace {
  left: 42%;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-data-bar[data-plain-order="distance"] .yeprun-record-share-stat.is-distance {
  left: 9%;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-data-bar[data-plain-order="pace"] .yeprun-record-share-stat.is-pace,
.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-data-bar[data-plain-order="time"] .yeprun-record-share-stat.is-time {
  left: 9%;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-data-bar[data-plain-order="distance-time"] .yeprun-record-share-stat.is-distance,
.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-data-bar[data-plain-order="pace-time"] .yeprun-record-share-stat.is-pace {
  left: 9%;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-data-bar[data-plain-order="distance-time"] .yeprun-record-share-stat.is-time,
.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-data-bar[data-plain-order="pace-time"] .yeprun-record-share-stat.is-time {
  left: 42%;
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-date {
  position: absolute;
  top: auto;
  bottom: 24px;
  left: 22px;
  transform: none;
  width: max-content;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.yeprun-record-share-page .yeprun-record-share-preview.is-plain .yeprun-record-share-date span {
  margin-left: 8px;
}

.yeprun-record-share-page .yeprun-record-share-editor {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  padding: 27px 24px 150px;
  background: #ffffff;
}

.yeprun-record-share-page .yeprun-record-share-block + .yeprun-record-share-block {
  margin-top: 33px;
}

.yeprun-record-share-page .yeprun-record-share-block-title {
  margin: 0 0 15px;
  color: #181a1a;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.02em;
}

.yeprun-record-share-page .yeprun-record-share-segment,
.yeprun-record-share-page .yeprun-record-share-data-grid,
.yeprun-record-share-page .yeprun-record-share-template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.yeprun-record-share-page .yeprun-record-share-segment button,
.yeprun-record-share-page .yeprun-record-share-data-grid button {
  height: 46px;
  border: 1px solid var(--record-share-line);
  border-radius: 8px;
  background: #ffffff;
  color: #181a1a;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.yeprun-record-share-page .yeprun-record-share-segment button.is-active,
.yeprun-record-share-page .yeprun-record-share-data-grid button.is-active {
  border-color: var(--record-share-green);
  background: rgba(16, 187, 97, 0.1);
  color: var(--record-share-green);
  font-weight: 700;
}

.yeprun-record-share-page .yeprun-record-share-template-grid {
  margin-top: 16px;
}

.yeprun-record-share-page .yeprun-record-share-template-grid[hidden] {
  display: none;
}

.yeprun-record-share-page .yeprun-record-share-template-grid button {
  position: relative;
  display: block;
  aspect-ratio: 159 / 196;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #f2f4f6;
  cursor: pointer;
}

.yeprun-record-share-page .yeprun-record-share-template-grid button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid rgba(25, 31, 40, 0.08);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 0.18s ease, border-width 0.18s ease;
}

.yeprun-record-share-page .yeprun-record-share-template-grid button.is-active::after {
  border: 3px solid var(--record-share-green, #10B861);
}

.yeprun-record-share-page .yeprun-record-share-template-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.yeprun-record-share-page .yeprun-record-share-footer {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: 100%;
  max-width: 430px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px 24px calc(12px + var(--record-share-safe-bottom));
  background: #ffffff;
}

.yeprun-record-share-page .yeprun-record-share-outline,
.yeprun-record-share-page .yeprun-record-share-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.yeprun-record-share-page .yeprun-record-share-outline {
  border: 1px solid var(--record-share-line) !important;
  background: #ffffff;
  color: #181a1a;
}

.yeprun-record-share-page .yeprun-record-share-submit {
  background: var(--record-share-green);
  color: #ffffff;
}

.yeprun-record-share-page .yeprun-record-share-home-indicator,
.yeprun-record-complete-page .yeprun-record-complete-home-indicator {
  grid-column: 1 / -1;
  width: 134px;
  height: 5px;
  margin: 5px auto 0;
  border-radius: 999px;
  background: #000000;
}

.yeprun-record-complete-page .yeprun-record-complete-frame {
  max-width: 430px;
  padding-bottom: calc(118px + var(--record-share-safe-bottom));
  background: #ffffff;
}

.yeprun-record-complete-page .yeprun-record-complete-header {
  min-height: 54px;
  background: #ffffff;
}

.yeprun-record-complete-page .yeprun-record-complete-close {
  position: absolute;
  top: 18px;
  right: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background: transparent;
}

.yeprun-record-complete-page .yeprun-record-complete-close img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.yeprun-record-complete-page .yeprun-record-complete-hero {
  padding: 36px 24px 25px;
  text-align: center;
  background: #ffffff;
}

.yeprun-record-complete-page .yeprun-record-complete-character {
  display: block;
  width: 240px;
  height: 135px;
  margin: 0 auto 26px;
  object-fit: contain;
}

.yeprun-record-complete-page .yeprun-record-complete-hero h1 {
  margin: 0;
  color: #181a1a;
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.03em;
}

.yeprun-record-complete-page .yeprun-record-complete-point-card {
  margin: 0 24px 42px;
  padding: 24px 20px 22px;
  border: 1px solid rgba(16, 187, 97, 0.25);
  border-radius: 12px;
  background: #e9fbf2;
  text-align: center;
}

.yeprun-record-complete-page .yeprun-record-complete-point-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--record-share-green);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.24);
  color: #ffffff;
  font-size: 28px;
  font-weight: 800;
}

.yeprun-record-complete-page .yeprun-record-complete-point-card strong {
  display: block;
  margin-bottom: 9px;
  color: var(--record-share-green);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

.yeprun-record-complete-page .yeprun-record-complete-point-card p {
  margin: 0 0 16px;
  color: #10a65a;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.yeprun-record-complete-page .yeprun-record-complete-point-card button {
  background: transparent;
  color: #7b858f;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.yeprun-record-complete-page .yeprun-record-complete-actions {
  padding: 40px 24px 50px;
  background: #f9fafb;
}

.yeprun-record-complete-page .yeprun-record-complete-actions h2 {
  margin: 0 0 26px;
  color: #181a1a;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.02em;
}

.yeprun-record-complete-page .yeprun-record-complete-action-list {
  overflow: hidden;
  border: 1px solid #eef0f2;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.04);
}

.yeprun-record-complete-page .yeprun-record-complete-action-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  align-items: center;
  column-gap: 14px;
  width: 100%;
  min-height: 82px;
  padding: 20px;
  background: #ffffff;
  text-align: left;
}

.yeprun-record-complete-page .yeprun-record-complete-action-item + .yeprun-record-complete-action-item {
  border-top: 1px solid #eef0f2;
}

.yeprun-record-complete-page .yeprun-record-complete-action-item img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.yeprun-record-complete-page .yeprun-record-complete-action-item span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.yeprun-record-complete-page .yeprun-record-complete-action-item strong {
  color: #181a1a;
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: -0.02em;
}

.yeprun-record-complete-page .yeprun-record-complete-action-item small {
  color: #8b95a1;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.01em;
}

.yeprun-record-complete-page .yeprun-record-complete-action-item em {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.yeprun-record-complete-page .yeprun-record-complete-action-item em img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: 0.5;
  transform: rotate(180deg);
}

.yeprun-record-complete-page .yeprun-record-complete-footer {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: 100%;
  max-width: 430px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px 24px calc(12px + var(--record-share-safe-bottom));
  background: #ffffff;
}

.yeprun-record-complete-page .yeprun-record-complete-secondary,
.yeprun-record-complete-page .yeprun-record-complete-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.yeprun-record-complete-page .yeprun-record-complete-secondary {
  border: 1px solid var(--record-share-line);
  background: #ffffff;
  color: #181a1a;
}

.yeprun-record-complete-page .yeprun-record-complete-primary {
  background: var(--record-share-green);
  color: #ffffff;
}

@media (max-width: 374px) {
  .yeprun-run-result-page .yeprun-run-result-scroll {
    padding-left: 20px;
    padding-right: 20px;
  }

  .yeprun-run-result-page .yeprun-run-result-hero {
    min-height: 540px;
    margin-top: 20px;
    padding: 22px 14px 18px;
  }

  .yeprun-run-result-page .yeprun-run-result-hero .yeprun-run-result-character {
    width: 235px;
    height: 285px;
  }

  .yeprun-run-result-page .yeprun-run-result-summary-card .yeprun-run-result-stat-value {
    font-size: 20px;
  }
}

/* ──────────────────────────────────────────
   YepRun Promotion Landing
   - Scope: .yeprun-promo-page
────────────────────────────────────────── */
.yeprun-promo-page {
  --yeprun-promo-green: #10b861;
  --yeprun-promo-dark: #111820;
  --yeprun-promo-muted: #6b7684;
  --yeprun-promo-line: rgba(0, 27, 55, 0.1);
  --yeprun-promo-safe-bottom: env(safe-area-inset-bottom, 0px);
  --yeprun-promo-viewport-height: 100vh;
  min-height: var(--yeprun-promo-viewport-height);
  display: flex;
  justify-content: center;
  background:
    linear-gradient(180deg, #eefbf3 0%, #eefbf3 72%, #e9f8f0 100%);
  color: var(--yeprun-promo-dark);
  font-family: "Pretendard", "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.yeprun-promo-page:has(.yeprun-promo-frame[data-current-screen="question"]),
.yeprun-promo-page:has(.yeprun-promo-frame[data-current-screen="loading"]),
.yeprun-promo-page:has(.yeprun-promo-frame[data-current-screen="result"]) {
  background: #ffffff;
}

body[data-yeprun-promo-current-screen="question"] .yeprun-promo-page,
body[data-yeprun-promo-current-screen="loading"] .yeprun-promo-page,
body[data-yeprun-promo-current-screen="result"] .yeprun-promo-page {
  background: #ffffff;
}

@supports (min-height: 100dvh) {
  .yeprun-promo-page {
    --yeprun-promo-viewport-height: 100dvh;
  }
}

.yeprun-promo-page,
.yeprun-promo-page * {
  box-sizing: border-box;
}

.yeprun-promo-page img {
  display: block;
  max-width: 100%;
}

.yeprun-promo-page button,
.yeprun-promo-page a {
  font: inherit;
}

.yeprun-promo-page .yeprun-promo-frame {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: var(--yeprun-promo-viewport-height);
  overflow: hidden;
  background:
    linear-gradient(180deg, #eefbf3 0%, #eefbf3 72%, #e9f8f0 100%);
}

.yeprun-promo-page .yeprun-promo-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 18px 0;
}

.yeprun-promo-page .yeprun-promo-brand {
  color: #048943;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.yeprun-promo-page .yeprun-promo-screen {
  position: absolute;
  inset: 0;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 72px clamp(18px, 5.6vw, 24px) calc(32px + var(--yeprun-promo-safe-bottom));
  scrollbar-width: none;
}

.yeprun-promo-page .yeprun-promo-screen::-webkit-scrollbar {
  display: none;
}

.yeprun-promo-page .yeprun-promo-screen.is-active {
  display: block;
}

.yeprun-promo-page .yeprun-promo-screen[data-yeprun-promo-screen="intro"] {
  overflow: hidden;
  background:
    linear-gradient(180deg, #eefbf3 0%, #eefbf3 72%, #e9f8f0 100%);
}

.yeprun-promo-page .yeprun-promo-screen[data-yeprun-promo-screen="question"] {
  background: #ffffff;
}

.yeprun-promo-page .yeprun-promo-kicker {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(16, 184, 97, 0.11);
  color: #048943;
  font-size: 12px;
  font-weight: 800;
}

.yeprun-promo-page .yeprun-promo-intro {
  position: relative;
  min-height: calc(var(--yeprun-promo-viewport-height) - 72px - var(--yeprun-promo-safe-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding-top: clamp(46px, 7.1vh, 72px);
}

.yeprun-promo-page .yeprun-promo-intro-head {
  position: relative;
  z-index: 2;
  width: 100%;
}

.yeprun-promo-page .yeprun-promo-intro-title {
  margin: 0;
  color: #101416;
  font-family: "Recipekorea", "Pretendard", "Noto Sans KR", sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 42px;
  letter-spacing: 0;
  white-space: nowrap;
}

.yeprun-promo-page .yeprun-promo-intro-copy {
  width: 301px;
  max-width: 100%;
  margin: 2px auto 0;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: -0.025em;
  text-align: center;
}

.yeprun-promo-page .yeprun-promo-character-stage {
  position: relative;
  left: auto;
  bottom: auto;
  z-index: 1;
  width: 100%;
  height: auto;
  margin: clamp(38px, 6.4vh, 68px) auto calc(-28px - var(--yeprun-promo-safe-bottom));
  overflow: visible;
  pointer-events: none;
  transform: none;
  display: flex;
  justify-content: center;
}

.yeprun-promo-page .yeprun-promo-character-picture {
  display: flex;
  justify-content: center;
  width: 100%;
}

.yeprun-promo-page .yeprun-promo-character-main {
  position: relative;
  left: auto;
  width: min(392px, calc(100vw - 4px));
  max-width: none;
  flex: 0 0 auto;
  transform: none;
}

.yeprun-promo-page .yeprun-promo-character-badge {
  position: absolute;
  top: 24px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  background: #ffffff;
  color: #3d4751;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(21, 65, 42, 0.12);
}

.yeprun-promo-page .yeprun-promo-character-badge-left {
  left: 16px;
}

.yeprun-promo-page .yeprun-promo-character-badge-right {
  right: 16px;
}

.yeprun-promo-page .yeprun-promo-primary-button,
.yeprun-promo-page .yeprun-promo-secondary-button {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
}

.yeprun-promo-page .yeprun-promo-primary-button {
  width: 100%;
  border: 0;
  background: var(--yeprun-promo-green);
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 14px 24px rgba(16, 184, 97, 0.28);
}

.yeprun-promo-page .yeprun-promo-secondary-button {
  width: 100%;
  border: 1px solid var(--yeprun-promo-line);
  background: #ffffff;
  color: #17212b;
  font-size: 16px;
  font-weight: 700;
}

.yeprun-promo-page .yeprun-promo-primary-button:disabled,
.yeprun-promo-page .yeprun-promo-secondary-button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  box-shadow: none;
}

.yeprun-promo-page .yeprun-promo-note {
  margin: 16px 0 0;
  color: #778088;
  font-size: 13px;
  font-weight: 600;
}

.yeprun-promo-page .yeprun-promo-intro > .yeprun-promo-primary-button {
  position: relative;
  z-index: 3;
  width: 201px;
  min-height: 52px;
  margin-top: 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

.yeprun-promo-page .yeprun-promo-question {
  min-height: calc(var(--yeprun-promo-viewport-height) - 104px - var(--yeprun-promo-safe-bottom));
  display: flex;
  flex-direction: column;
}

.yeprun-promo-page .yeprun-promo-progress-head {
  display: flex;
  justify-content: space-between;
  color: #6b7684;
  font-size: 13px;
  font-weight: 700;
}

.yeprun-promo-page .yeprun-promo-progress-track {
  height: 8px;
  margin: 12px 0 34px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf0;
}

.yeprun-promo-page .yeprun-promo-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--yeprun-promo-green);
  transition: width 0.2s ease;
}

.yeprun-promo-page .yeprun-promo-question-title {
  margin: 0;
  color: #111820;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.35;
}

.yeprun-promo-page .yeprun-promo-answer-list {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.yeprun-promo-page .yeprun-promo-answer-button {
  width: 100%;
  min-height: 58px;
  padding: 14px 16px;
  border: 1px solid #e4e9ec;
  border-radius: 16px;
  background: #ffffff;
  color: #1d252d;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

.yeprun-promo-page .yeprun-promo-answer-button.is-selected {
  border-color: var(--yeprun-promo-green);
  background: #effff5;
  color: #048943;
  box-shadow: 0 8px 20px rgba(16, 184, 97, 0.12);
}

.yeprun-promo-page .yeprun-promo-question-actions,
.yeprun-promo-page .yeprun-promo-result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
  padding-top: 28px;
}

.yeprun-promo-page .yeprun-promo-result-actions {
  grid-template-columns: 0.8fr 1.2fr;
}

.yeprun-promo-page .yeprun-promo-question-actions .yeprun-promo-primary-button,
.yeprun-promo-page .yeprun-promo-question-actions .yeprun-promo-secondary-button,
.yeprun-promo-page .yeprun-promo-result-actions .yeprun-promo-primary-button,
.yeprun-promo-page .yeprun-promo-result-actions .yeprun-promo-secondary-button {
  min-height: 52px;
  font-size: 15px;
}

.yeprun-promo-page .yeprun-promo-question-actions .yeprun-promo-primary-button {
  box-shadow: none;
}

.yeprun-promo-page .yeprun-promo-screen[data-yeprun-promo-screen="loading"] {
  background: #ffffff;
}

.yeprun-promo-page .yeprun-promo-loading {
  min-height: calc(var(--yeprun-promo-viewport-height) - 104px - var(--yeprun-promo-safe-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.yeprun-promo-page .yeprun-promo-loading-orbit {
  position: relative;
  width: 238px;
  height: 238px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(16, 184, 97, 0.08) 0%, rgba(16, 184, 97, 0.03) 48%, rgba(255, 255, 255, 0) 72%);
  box-shadow: 0 18px 42px rgba(16, 184, 97, 0.12);
  animation: none;
}

.yeprun-promo-page .yeprun-promo-loading-orbit::before {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 13px solid rgba(16, 184, 97, 0.12);
  box-sizing: border-box;
  content: "";
}

.yeprun-promo-page .yeprun-promo-loading-orbit::after {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 13px solid transparent;
  border-top-color: #12c46b;
  border-right-color: #12c46b;
  box-sizing: border-box;
  content: "";
  filter: drop-shadow(0 8px 16px rgba(18, 196, 107, 0.24));
  animation: yeprunLoadingRingSpin 1.05s linear infinite;
}

.yeprun-promo-page .yeprun-promo-loading-orbit img {
  position: relative;
  z-index: 1;
  width: 172px;
  height: 162px;
  border-radius: 50%;
  object-fit: contain;
  object-position: center 64%;
  background: transparent;
  animation: yeprunPromoLoadingFloat 1.8s ease-in-out infinite;
}

.yeprun-promo-page .yeprun-promo-loading-title {
  margin: 34px 0 0;
  color: #111820;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: -0.02em;
}

.yeprun-promo-page .yeprun-promo-loading-copy {
  width: 310px;
  margin: 16px 0 0;
  color: #6b7684;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.68;
}

.yeprun-promo-page .yeprun-promo-loading-note {
  display: none;
}

.yeprun-promo-page .yeprun-promo-loading-bar {
  display: none;
}

.yeprun-promo-page .yeprun-promo-loading-bar span {
  display: block;
  width: 28px;
  height: 100%;
  border-radius: inherit;
  background: #10b861;
  transform: translateX(192px);
  animation: none;
}

.yeprun-promo-page .yeprun-promo-result,
.yeprun-promo-page .yeprun-promo-benefit {
  display: grid;
  gap: 14px;
}

.yeprun-promo-page .yeprun-promo-screen[data-yeprun-promo-screen="result"] {
  background: #ffffff;
}

.yeprun-promo-page .yeprun-promo-result-card,
.yeprun-promo-page .yeprun-promo-result-section,
.yeprun-promo-page .yeprun-promo-result-routine,
.yeprun-promo-page .yeprun-promo-coupon-card,
.yeprun-promo-page .yeprun-promo-roulette,
.yeprun-promo-page .yeprun-promo-share-card {
  border: 1px solid var(--yeprun-promo-line);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(25, 31, 40, 0.06);
}

.yeprun-promo-page .yeprun-promo-result-card {
  position: relative;
  min-height: 558px;
  margin-top: 15px;
  padding: 24px 14px 18px;
  overflow: hidden;
  --yeprun-promo-result-accent: #a17a50;
  --yeprun-promo-result-accent-strong: #d4a574;
  --yeprun-promo-result-title: #a17a50;
  --yeprun-promo-result-copy: #a97848;
  --yeprun-promo-result-bg-top: rgba(212, 165, 116, 0.18);
  --yeprun-promo-result-bg-bottom: rgba(212, 165, 116, 0.55);
  background:
    radial-gradient(circle at 50% 27%, rgba(255, 255, 255, 0.58) 0 92px, rgba(255, 255, 255, 0.2) 93px 166px, transparent 167px),
    linear-gradient(180deg, var(--yeprun-promo-result-bg-top) 0%, var(--yeprun-promo-result-bg-bottom) 100%);
  border: 0;
  border-radius: 25px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.yeprun-promo-page .yeprun-promo-result-card::before,
.yeprun-promo-page .yeprun-promo-result-card::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.yeprun-promo-page .yeprun-promo-result-card::before {
  width: 270px;
  height: 270px;
  left: -56px;
  top: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0));
}

.yeprun-promo-page .yeprun-promo-result-card::after {
  width: 9px;
  height: 9px;
  right: 36px;
  bottom: 120px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    -178px -26px 0 -2px #ffffff,
    -16px 37px 0 -3px #ffffff,
    -184px 30px 0 -3px #ffffff;
}

.yeprun-promo-page .yeprun-promo-result-card.is-result-cheetah {
  --yeprun-promo-result-accent: #d97a20;
  --yeprun-promo-result-accent-strong: #f0a13a;
  --yeprun-promo-result-title: #c77620;
  --yeprun-promo-result-copy: #b66c20;
  --yeprun-promo-result-bg-top: rgba(255, 194, 84, 0.18);
  --yeprun-promo-result-bg-bottom: rgba(240, 151, 50, 0.55);
}

.yeprun-promo-page .yeprun-promo-result-card.is-result-zebra {
  --yeprun-promo-result-accent: #66717d;
  --yeprun-promo-result-accent-strong: #9aa3ad;
  --yeprun-promo-result-title: #5b6570;
  --yeprun-promo-result-copy: #66717d;
  --yeprun-promo-result-bg-top: rgba(225, 229, 234, 0.55);
  --yeprun-promo-result-bg-bottom: rgba(155, 166, 177, 0.58);
}

.yeprun-promo-page .yeprun-promo-result-card.is-result-camel {
  --yeprun-promo-result-accent: #a17a50;
  --yeprun-promo-result-accent-strong: #d4a574;
  --yeprun-promo-result-title: #a17a50;
  --yeprun-promo-result-copy: #a97848;
  --yeprun-promo-result-bg-top: rgba(212, 165, 116, 0.18);
  --yeprun-promo-result-bg-bottom: rgba(212, 165, 116, 0.55);
}

.yeprun-promo-page .yeprun-promo-result-card.is-result-kangaroo {
  --yeprun-promo-result-accent: #c87955;
  --yeprun-promo-result-accent-strong: #e9a173;
  --yeprun-promo-result-title: #bd714f;
  --yeprun-promo-result-copy: #ac6647;
  --yeprun-promo-result-bg-top: rgba(247, 190, 151, 0.22);
  --yeprun-promo-result-bg-bottom: rgba(223, 134, 88, 0.56);
}

.yeprun-promo-page .yeprun-promo-result-card.is-result-penguin {
  --yeprun-promo-result-accent: #5e7890;
  --yeprun-promo-result-accent-strong: #88a8bf;
  --yeprun-promo-result-title: #566e84;
  --yeprun-promo-result-copy: #5f7488;
  --yeprun-promo-result-bg-top: rgba(210, 229, 241, 0.5);
  --yeprun-promo-result-bg-bottom: rgba(135, 167, 190, 0.58);
}

.yeprun-promo-page .yeprun-promo-result-card.is-result-wolf {
  --yeprun-promo-result-accent: #596574;
  --yeprun-promo-result-accent-strong: #8793a3;
  --yeprun-promo-result-title: #525e6d;
  --yeprun-promo-result-copy: #5f6976;
  --yeprun-promo-result-bg-top: rgba(224, 229, 236, 0.5);
  --yeprun-promo-result-bg-bottom: rgba(132, 144, 160, 0.58);
}

.yeprun-promo-page .yeprun-promo-result-eyebrow {
  display: inline-flex;
  height: 26px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff4e8;
  color: #c48648;
  font-size: 12px;
  font-weight: 800;
}

.yeprun-promo-page .yeprun-promo-result-character {
  position: relative;
  z-index: 1;
  display: block;
  width: 252px;
  height: 305px;
  margin: 0 auto 12px;
  object-fit: contain;
  filter: drop-shadow(0 15px 16px rgba(81, 54, 28, 0.16));
}

.yeprun-promo-page .yeprun-promo-result-title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--yeprun-promo-result-title);
  font-size: 31px;
  font-weight: 900;
  line-height: 1.2;
}

.yeprun-promo-page .yeprun-promo-result-summary {
  position: relative;
  z-index: 1;
  margin: 13px auto 0;
  max-width: 230px;
  color: var(--yeprun-promo-result-copy);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.yeprun-promo-page .yeprun-promo-result-card-actions {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.yeprun-promo-page .yeprun-promo-result-card-button {
  min-width: 148px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid var(--yeprun-promo-result-accent-strong);
  border-radius: 15px;
  background: #ffffff;
  color: var(--yeprun-promo-result-accent);
  font-size: 14px;
  font-weight: 700;
}

.yeprun-promo-page .yeprun-promo-result-card-button img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: none;
}

.yeprun-promo-page .yeprun-promo-result-card-button.is-filled {
  border-color: var(--yeprun-promo-result-accent-strong);
  background: var(--yeprun-promo-result-accent-strong);
  color: #ffffff;
}

.yeprun-promo-page.yeprun-promo-share-capture-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 800px;
  min-height: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
  opacity: 1;
  z-index: 2147483647;
  transform: translateX(-1200px);
}

.yeprun-promo-page.yeprun-promo-share-capture-stage .yeprun-promo-share-result-card {
  position: relative;
  width: 800px;
  height: 800px;
  margin: 0;
  padding: 30px 44px 42px;
  overflow: hidden;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 33%, rgba(255, 255, 255, 0.74) 0 192px, rgba(255, 255, 255, 0.24) 193px 344px, transparent 345px),
    linear-gradient(180deg, var(--yeprun-promo-result-bg-top, rgba(212, 165, 116, 0.18)) 0%, var(--yeprun-promo-result-bg-bottom, rgba(212, 165, 116, 0.55)) 100%);
  color: var(--yeprun-promo-result-title, #a17a50);
  text-align: center;
  box-shadow: none;
}

.yeprun-promo-page.yeprun-promo-share-capture-stage .yeprun-promo-share-result-card::before,
.yeprun-promo-page.yeprun-promo-share-capture-stage .yeprun-promo-share-result-card::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.yeprun-promo-page.yeprun-promo-share-capture-stage .yeprun-promo-share-result-card::before {
  width: 500px;
  height: 500px;
  left: -86px;
  top: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
}

.yeprun-promo-page.yeprun-promo-share-capture-stage .yeprun-promo-share-result-card::after {
  width: 16px;
  height: 16px;
  right: 88px;
  bottom: 174px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    -520px -36px 0 -5px #ffffff,
    -40px 82px 0 -7px #ffffff,
    -558px 72px 0 -7px #ffffff,
    -92px -360px 0 -6px #ffffff;
}

.yeprun-promo-page.yeprun-promo-share-capture-stage .yeprun-promo-share-result-card.is-result-cheetah {
  --yeprun-promo-result-bg-top: rgba(255, 194, 84, 0.18);
  --yeprun-promo-result-bg-bottom: rgba(240, 151, 50, 0.55);
  --yeprun-promo-result-title: #c77620;
  --yeprun-promo-result-copy: #b66c20;
}

.yeprun-promo-page.yeprun-promo-share-capture-stage .yeprun-promo-share-result-card.is-result-zebra {
  --yeprun-promo-result-bg-top: rgba(225, 229, 234, 0.55);
  --yeprun-promo-result-bg-bottom: rgba(155, 166, 177, 0.58);
  --yeprun-promo-result-title: #5b6570;
  --yeprun-promo-result-copy: #66717d;
}

.yeprun-promo-page.yeprun-promo-share-capture-stage .yeprun-promo-share-result-card.is-result-camel {
  --yeprun-promo-result-bg-top: rgba(212, 165, 116, 0.18);
  --yeprun-promo-result-bg-bottom: rgba(212, 165, 116, 0.55);
  --yeprun-promo-result-title: #a17a50;
  --yeprun-promo-result-copy: #a97848;
}

.yeprun-promo-page.yeprun-promo-share-capture-stage .yeprun-promo-share-result-card.is-result-kangaroo {
  --yeprun-promo-result-bg-top: rgba(247, 190, 151, 0.22);
  --yeprun-promo-result-bg-bottom: rgba(223, 134, 88, 0.56);
  --yeprun-promo-result-title: #bd714f;
  --yeprun-promo-result-copy: #ac6647;
}

.yeprun-promo-page.yeprun-promo-share-capture-stage .yeprun-promo-share-result-card.is-result-penguin {
  --yeprun-promo-result-bg-top: rgba(210, 229, 241, 0.5);
  --yeprun-promo-result-bg-bottom: rgba(135, 167, 190, 0.58);
  --yeprun-promo-result-title: #566e84;
  --yeprun-promo-result-copy: #5f7488;
}

.yeprun-promo-page.yeprun-promo-share-capture-stage .yeprun-promo-share-result-card.is-result-wolf {
  --yeprun-promo-result-bg-top: rgba(224, 229, 236, 0.5);
  --yeprun-promo-result-bg-bottom: rgba(132, 144, 160, 0.58);
  --yeprun-promo-result-title: #525e6d;
  --yeprun-promo-result-copy: #5f6976;
}

.yeprun-promo-page.yeprun-promo-share-capture-stage .yeprun-promo-share-result-brand {
  position: relative;
  z-index: 1;
  color: #078c4e;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  text-align: left;
}

.yeprun-promo-page.yeprun-promo-share-capture-stage .yeprun-promo-share-result-visual {
  position: relative;
  z-index: 1;
  width: 620px;
  height: 470px;
  margin: -4px auto 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yeprun-promo-page.yeprun-promo-share-capture-stage .yeprun-promo-share-result-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(81, 54, 28, 0.14));
}

.yeprun-promo-page.yeprun-promo-share-capture-stage .yeprun-promo-share-result-card h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--yeprun-promo-result-title, #a17a50);
  font-size: 72px;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -1.4px;
}

.yeprun-promo-page.yeprun-promo-share-capture-stage .yeprun-promo-share-result-card p {
  position: relative;
  z-index: 1;
  margin: 18px auto 0;
  max-width: 680px;
  color: var(--yeprun-promo-result-copy, #a97848);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.45;
  word-break: keep-all;
}

.yeprun-promo-page .yeprun-promo-score {
  margin-top: 0;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid var(--yeprun-promo-line);
  box-shadow: 0 10px 28px rgba(25, 31, 40, 0.06);
}

.yeprun-promo-page .yeprun-promo-score span {
  color: #171f27;
  font-size: 18px;
  font-weight: 700;
}

.yeprun-promo-page .yeprun-promo-score strong {
  color: #111820;
  font-size: 28px;
  font-weight: 900;
}

.yeprun-promo-page .yeprun-promo-result-section {
  padding: 18px;
}

.yeprun-promo-page .yeprun-promo-result-section h3 {
  margin: 0 0 10px;
  color: #171f27;
  font-size: 18px;
  font-weight: 800;
}

.yeprun-promo-page .yeprun-promo-result-section ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.yeprun-promo-page .yeprun-promo-result-section li {
  position: relative;
  padding-left: 13px;
  color: #53606b;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}

.yeprun-promo-page .yeprun-promo-result-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--yeprun-promo-green);
}

.yeprun-promo-page .yeprun-promo-result-section p {
  margin: 0;
  color: #53606b;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.yeprun-promo-page .yeprun-promo-result-routine {
  width: 100%;
  padding: 18px;
  color: #171f27;
  text-align: left;
}

.yeprun-promo-page .yeprun-promo-result-routine span {
  display: block;
  color: #6b7684;
  font-size: 13px;
  font-weight: 700;
}

.yeprun-promo-page .yeprun-promo-result-routine strong {
  display: block;
  margin-top: 7px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.4;
}

.yeprun-promo-page .yeprun-promo-disclaimer {
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f3f7f5;
  color: #65717d;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}

.yeprun-promo-page .yeprun-promo-result-actions {
  grid-template-columns: 1fr;
  gap: 10px;
}

.yeprun-promo-page .yeprun-promo-result-actions .yeprun-promo-primary-button,
.yeprun-promo-page .yeprun-promo-result-actions .yeprun-promo-secondary-button {
  min-height: 54px;
}

.yeprun-promo-page .yeprun-promo-benefit-title {
  margin: 2px 0 2px;
  color: #111820;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.24;
}

.yeprun-promo-page .yeprun-promo-benefit-copy {
  margin: 0;
  color: #6b7684;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

.yeprun-promo-page .yeprun-promo-coupon-card {
  display: none;
}

.yeprun-promo-page .yeprun-promo-coupon-card::before,
.yeprun-promo-page .yeprun-promo-coupon-card::after {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  content: "";
  transform: translateY(-50%);
}

.yeprun-promo-page .yeprun-promo-coupon-card::before {
  left: -12px;
}

.yeprun-promo-page .yeprun-promo-coupon-card::after {
  right: -12px;
}

.yeprun-promo-page .yeprun-promo-coupon-card span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #e8fff1;
  color: #048943;
  font-size: 12px;
  font-weight: 800;
}

.yeprun-promo-page .yeprun-promo-coupon-card strong {
  display: block;
  margin-top: 12px;
  color: #111820;
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
}

.yeprun-promo-page .yeprun-promo-coupon-card p {
  max-width: 230px;
  margin: 12px 0 0;
  color: #4d6858;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.yeprun-promo-page .yeprun-promo-roulette {
  position: relative;
  overflow: hidden;
  padding: 66px 12px 24px;
  text-align: center;
  background: radial-gradient(circle at 50% 54%, rgba(16, 184, 97, 0.16) 0 122px, transparent 123px), #ffffff;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 16px 36px rgba(25, 31, 40, 0.1);
}

.yeprun-promo-page .yeprun-promo-roulette::before {
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  color: #111820;
  content: "서프라이즈 룰렛";
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.02em;
}

.yeprun-promo-page .yeprun-promo-roulette-head {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 30px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid rgba(16, 184, 97, 0.18);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: none;
  color: #048943;
  font-size: 12px;
  font-weight: 800;
}

.yeprun-promo-page .yeprun-promo-roulette-head strong {
  color: #111820;
  font-size: 15px;
}

.yeprun-promo-page .yeprun-promo-roulette-pointer {
  position: absolute;
  z-index: 3;
  top: 100px;
  left: 50%;
  width: 54px;
  height: 70px;
  border-radius: 999px 999px 999px 0;
  background: #10b861;
  border: 5px solid #ffffff;
  box-shadow: 0 8px 20px rgba(4, 137, 67, 0.32);
  transform: translateX(-50%) rotate(-45deg);
}

.yeprun-promo-page .yeprun-promo-roulette-pointer::before {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #ffffff;
  content: "";
}

.yeprun-promo-page .yeprun-promo-roulette-pointer::after {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #10b861;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  content: "Y";
  font-family: Arial, sans-serif;
  transform: translate(-50%, -50%) rotate(45deg);
}

.yeprun-promo-page .yeprun-promo-roulette-wheel {
  width: min(318px, calc(100vw - 44px));
  height: min(318px, calc(100vw - 44px));
  margin: 56px auto 22px;
  position: relative;
  border: 17px solid #10b861;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #10b861 0 24%, transparent 24.5%),
    repeating-conic-gradient(from -30deg, #ffffff 0 60deg, #dff6e9 60deg 120deg);
  box-shadow:
    0 0 0 12px #dff4da,
    0 0 0 16px rgba(16, 184, 97, 0.08),
    0 22px 34px rgba(4, 137, 67, 0.2);
  transition: transform 3s cubic-bezier(0.18, 0.85, 0.22, 1);
}

.yeprun-promo-page .yeprun-promo-roulette-wheel::before {
  position: absolute;
  inset: 32px;
  border: 4px solid #048943;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
  content: "";
}

.yeprun-promo-page .yeprun-promo-roulette-wheel::after {
  position: absolute;
  inset: 96px;
  border: 4px solid #048943;
  border-radius: 50%;
  background: #10b861;
  box-shadow:
    inset 0 -5px 0 rgba(0, 0, 0, 0.14),
    0 0 0 7px rgba(16, 184, 97, 0.16);
  content: "";
}

.yeprun-promo-page .yeprun-promo-roulette-wheel span {
  position: absolute;
  z-index: 1;
  width: 68px;
  padding-top: 23px;
  color: #111820;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
}

.yeprun-promo-page .yeprun-promo-roulette-wheel span::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #10b861;
  box-shadow: 0 0 0 6px rgba(16, 184, 97, 0.18);
  color: #ffffff;
  content: "Y";
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 22px;
  transform: translateX(-50%);
}

.yeprun-promo-page .yeprun-promo-roulette-wheel span em,
.yeprun-promo-page .yeprun-promo-roulette-wheel span small {
  display: block;
  font-style: normal;
}

.yeprun-promo-page .yeprun-promo-roulette-wheel span small {
  margin-top: 3px;
  color: #111820;
  font-size: 12px;
  font-weight: 800;
}

.yeprun-promo-page .yeprun-promo-roulette-wheel span:nth-child(1) { top: 42px; left: 50%; transform: translateX(-50%); }
.yeprun-promo-page .yeprun-promo-roulette-wheel span:nth-child(2) { top: 96px; right: 27px; transform: rotate(58deg); }
.yeprun-promo-page .yeprun-promo-roulette-wheel span:nth-child(3) { right: 28px; bottom: 96px; transform: rotate(120deg); }
.yeprun-promo-page .yeprun-promo-roulette-wheel span:nth-child(4) { bottom: 42px; left: 50%; transform: translateX(-50%) rotate(180deg); }
.yeprun-promo-page .yeprun-promo-roulette-wheel span:nth-child(5) { left: 27px; bottom: 96px; transform: rotate(240deg); }
.yeprun-promo-page .yeprun-promo-roulette-wheel span:nth-child(6) { top: 96px; left: 27px; transform: rotate(302deg); }

.yeprun-promo-page .yeprun-promo-roulette-wheel i {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  color: #ffffff;
  font-size: 31px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.yeprun-promo-page .yeprun-promo-roulette .yeprun-promo-primary-button {
  width: 126px;
  min-height: 126px;
  margin: 14px auto 0;
  border: 0;
  border-radius: 50%;
  background: #10b861;
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, 0.24),
    0 9px 0 #048943,
    0 18px 26px rgba(4, 137, 67, 0.24);
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
}

.yeprun-promo-page .yeprun-promo-roulette .yeprun-promo-primary-button:active {
  transform: translateY(4px);
  box-shadow:
    0 6px 0 #048943,
    0 12px 20px rgba(4, 137, 67, 0.22);
}

.yeprun-promo-page .yeprun-promo-roulette .yeprun-promo-primary-button:disabled {
  background: #d1d6dc;
  box-shadow:
    0 8px 0 #aeb6bf,
    0 14px 20px rgba(25, 31, 40, 0.12);
  color: #ffffff;
}

.yeprun-promo-page .yeprun-promo-roulette p {
  min-height: 42px;
  margin: 16px 0 0;
  padding: 11px 13px;
  border-radius: 14px;
  background: #f5faf7;
  color: #048943;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

.yeprun-promo-page .yeprun-promo-share-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  background: linear-gradient(135deg, #f7fbff 0%, #f4fff8 100%);
  border-color: rgba(16, 184, 97, 0.12);
}

.yeprun-promo-page .yeprun-promo-share-card img {
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 50%;
  background: #e9fff2;
}

.yeprun-promo-page .yeprun-promo-share-card h3 {
  margin: 0;
  color: #111820;
  font-size: 17px;
  font-weight: 800;
}

.yeprun-promo-page .yeprun-promo-share-card p {
  margin: 4px 0 0;
  color: #6b7684;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.yeprun-promo-page .yeprun-promo-toast {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: calc(24px + var(--yeprun-promo-safe-bottom));
  z-index: 40;
  padding: 13px 16px;
  border-radius: 14px;
  background: rgba(17, 24, 32, 0.92);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.yeprun-promo-page .yeprun-promo-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes yeprunPromoSpin {
  to { transform: rotate(360deg); }
}

@keyframes yeprunPromoReverseSpin {
  to { transform: rotate(-360deg); }
}

@keyframes yeprunPromoLoading {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

@keyframes yeprunLoadingRingSpin {
  to { transform: rotate(360deg); }
}

@keyframes yeprunPromoLoadingFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.02); }
}

@media (max-width: 360px) {
  .yeprun-promo-page .yeprun-promo-screen {
    padding-left: 18px;
    padding-right: 18px;
  }

  .yeprun-promo-page .yeprun-promo-intro-title {
    font-size: 27px;
  }

  .yeprun-promo-page .yeprun-promo-character-stage {
    margin-top: clamp(34px, 5.6vh, 58px);
  }

  .yeprun-promo-page .yeprun-promo-character-main {
    width: 100vw;
  }
}

@media (min-height: 760px) and (max-width: 430px) {
  .yeprun-promo-page .yeprun-promo-intro {
    padding-top: clamp(42px, 7vh, 68px);
  }

  .yeprun-promo-page .yeprun-promo-character-stage {
    margin-top: clamp(42px, 5.8vh, 64px);
    margin-bottom: calc(10px + var(--yeprun-promo-safe-bottom));
  }

  .yeprun-promo-page .yeprun-promo-character-main {
    width: min(374px, calc(100vw - 4px));
  }
}

@media (max-height: 700px) and (max-width: 430px) {
  .yeprun-promo-page .yeprun-promo-screen {
    padding-top: 64px;
    padding-bottom: calc(18px + var(--yeprun-promo-safe-bottom));
  }

  .yeprun-promo-page .yeprun-promo-intro {
    min-height: calc(var(--yeprun-promo-viewport-height) - 64px - var(--yeprun-promo-safe-bottom));
    padding-top: clamp(32px, 5.4vh, 44px);
  }

  .yeprun-promo-page .yeprun-promo-intro > .yeprun-promo-primary-button {
    margin-top: 18px;
  }

  .yeprun-promo-page .yeprun-promo-character-stage {
    margin-top: clamp(28px, 5vh, 40px);
    margin-bottom: calc(-34px - var(--yeprun-promo-safe-bottom));
  }

  .yeprun-promo-page .yeprun-promo-character-main {
    width: min(384px, calc(100vw + 18px));
  }

  .yeprun-promo-page .yeprun-promo-question-title {
    font-size: 22px;
  }

  .yeprun-promo-page .yeprun-promo-answer-button {
    min-height: 54px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

@media (max-width: 390px) {
  .yeprun-promo-page .yeprun-promo-intro-title {
    font-size: 28px;
  }

  .yeprun-promo-page .yeprun-promo-intro-copy {
    width: 301px;
    font-size: 16px;
  }

  .yeprun-promo-page .yeprun-promo-intro > .yeprun-promo-primary-button {
    width: 201px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yeprun-promo-page * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Yeprun pre-register page */
.yeprun-preregister-body {
  margin: 0;
  color: #17202a;
  font-family: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif;
  background: #ffffff;
}

.yeprun-preregister-body,
.yeprun-preregister-body * {
  box-sizing: border-box;
}

.yeprun-preregister-body button,
.yeprun-preregister-body input {
  font: inherit;
}

.yeprun-preregister-body button {
  cursor: pointer;
}

.yeprun-preregister-body img {
  display: block;
  max-width: 100%;
}

.yeprun-preregister-body .yeprun-preregister-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background:
    radial-gradient(circle at 18% 8%, rgba(18, 196, 107, 0.12), transparent 32%),
    radial-gradient(circle at 86% 18%, rgba(18, 196, 107, 0.1), transparent 30%),
    linear-gradient(180deg, #effcf6 0%, #ffffff 100%);
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-container {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  padding: 24px 22px calc(40px + env(safe-area-inset-bottom, 0px));
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-logo {
  display: inline-flex;
  color: #048943;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-hero {
  position: relative;
  min-height: 215px;
  overflow: hidden;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-hero-text {
  position: relative;
  z-index: 2;
  width: 60%;
  padding-top: 50px;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-title {
  margin: 0;
  color: #151d27;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -1.5px;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-title .is-green {
  color: #079c57;
  display: inline-block;
  white-space: nowrap;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-desc {
  margin: 18px 0 0;
  color: #4f5f6d;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  word-break: keep-all;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-character {
  position: absolute;
  right: -22px;
  top: -4px;
  z-index: 1;
  width: 210px;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-benefit {
  position: relative;
  z-index: 3;
  display: block;
  margin-bottom: 22px;
  border-radius: 22px;
  overflow: hidden;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-benefit-image {
  width: 100%;
  height: auto;
  display: block;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-form {
  padding: 24px 20px 28px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 44px rgba(19, 50, 36, 0.1);
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-form-title {
  margin: 0 0 18px;
  color: #151d27;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-start-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-start-options[hidden],
.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-email-fields[hidden] {
  display: none;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-kakao-button,
.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-email-button {
  width: 100%;
  height: 58px;
  border: 0;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.4px;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-kakao-button {
  background: #fee500;
  color: #171717;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-kakao-icon {
  width: 28px;
  height: 22px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #371d1e;
  color: #fee500;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-email-button {
  background: #edf0f4;
  color: #6b6f76;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-field {
  margin-bottom: 17px;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-label {
  display: block;
  margin-bottom: 8px;
  color: #17202a;
  font-size: 14px;
  font-weight: 900;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-input-wrap {
  position: relative;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-input {
  width: 100%;
  height: 45px;
  padding: 0 16px;
  border: 1.5px solid #d9e0e4;
  border-radius: 14px;
  outline: none;
  background: #ffffff;
  color: #17202a;
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-input:focus {
  border-color: #12c46b;
  box-shadow: 0 0 0 4px rgba(18, 196, 107, 0.1);
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-phone-row {
  display: flex;
  gap: 8px;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-phone-row .yeprun-preregister-input {
  flex: 1;
  min-width: 0;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-helper {
  margin: 8px 0 0;
  color: #7a8793;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-helper.is-success {
  color: #079c57;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-helper.is-error {
  color: #e94848;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-password-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  border: 0;
  background: transparent;
  color: #9aa5ae;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: color 0.15s;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-password-toggle:hover {
  color: #4f5f6d;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-password-toggle svg {
  display: block;
  width: 22px;
  height: 22px;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-password-toggle svg.is-hidden {
  display: none;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-input.has-toggle {
  padding-right: 46px;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-agreement {
  margin: 22px 0;
  overflow: hidden;
  border: 1px solid #e3e8eb;
  border-radius: 16px;
  background: #ffffff;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-agreement-row {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #edf1f3;
  color: #17202a;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-agreement-row:last-child {
  border-bottom: 0;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-agreement-row input[type="checkbox"] {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.335' y='0.335' width='27.33' height='27.33' rx='3.665' stroke='%23868A93' stroke-width='0.67'/%3E%3Cpath d='M9.5 14L13.5855 17.9375L19.0625 9.5' stroke='%23C4C4C4' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
  transition: opacity 0.15s;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-agreement-row input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='28' height='28' rx='4' fill='%2312c46b'/%3E%3Cpath d='M9.5 14L13.5855 17.9375L19.0625 9.5' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-required {
  color: #079c57;
  font-weight: 900;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-optional {
  color: #7a8793;
  font-weight: 800;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-notice {
  margin: 18px 0 20px;
  padding: 14px;
  border-radius: 16px;
  background: #eefaf4;
  color: #4f5f6d;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-submit {
  width: 100%;
  height: 62px;
  border: 0;
  border-radius: 999px;
  background: #12c46b;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.4px;
  transition: background 0.2s, box-shadow 0.2s;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-submit:disabled {
  background: #cbd5d9;
  box-shadow: none;
  cursor: not-allowed;
}

.yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-security {
  margin: 16px 0 0;
  color: #8a96a1;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.yeprun-preregister-body .yeprun-preregister-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 20, 18, 0.55);
}

.yeprun-preregister-body .yeprun-preregister-modal.is-active {
  display: flex;
}

.yeprun-preregister-body .yeprun-preregister-modal .yeprun-preregister-modal-card {
  width: 100%;
  max-width: 360px;
  padding: 28px 22px 24px;
  border-radius: 28px;
  background: #ffffff;
  text-align: center;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
}

.yeprun-preregister-body .yeprun-preregister-modal .yeprun-preregister-modal-character {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
}

.yeprun-preregister-body .yeprun-preregister-modal .yeprun-preregister-modal-character img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.yeprun-preregister-body .yeprun-preregister-modal .yeprun-preregister-modal-character-fallback {
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.yeprun-preregister-body .yeprun-preregister-modal .yeprun-preregister-modal-title {
  margin: 0 0 8px;
  color: #17202a;
  font-size: 24px;
  font-weight: 900;
}

.yeprun-preregister-body .yeprun-preregister-modal .yeprun-preregister-modal-desc {
  margin: 0 0 18px;
  color: #5d6975;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}

.yeprun-preregister-body .yeprun-preregister-modal .yeprun-preregister-modal-primary,
.yeprun-preregister-body .yeprun-preregister-modal .yeprun-preregister-modal-secondary {
  width: 100%;
  height: 45px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 900;
}

.yeprun-preregister-body .yeprun-preregister-modal .yeprun-preregister-modal-primary {
  border: 0;
  background: #12c46b;
  color: #ffffff;
}

.yeprun-preregister-body .yeprun-preregister-modal .yeprun-preregister-modal-secondary {
  margin-top: 10px;
  border: 1px solid #dce3e7;
  background: #ffffff;
  color: #6b7684;
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 390px) {
  .yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-title {
    font-size: 31px;
  }

  .yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-character {
    right: -26px;
    width: 200px;
  }

  .yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-benefit {
    border-radius: 20px;
  }
}

@media (max-width: 360px) {
  .yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-hero {
    min-height: 238px;
  }

  .yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-hero-text {
    width: 64%;
    padding-top: 42px;
  }

  .yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-title {
    font-size: 27px;
    line-height: 1.22;
    letter-spacing: -1.2px;
  }

  .yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-desc {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.55;
  }

  .yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-character {
    right: -16px;
    top: 4px;
    width: 172px;
  }

  .yeprun-preregister-body .yeprun-preregister-page .yeprun-preregister-benefit {
    margin-top: -40px;
    margin-bottom: 18px;
  }
}

/* ===== YEPRUN roulette benefit page ===== */
body.yeprun-roulette-body,
body.yeprun-roulette-body * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body.yeprun-roulette-body * {
  margin: 0;
  padding: 0;
}

html.yeprun-roulette-root,
html:has(body.yeprun-roulette-body),
body.yeprun-roulette-body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans KR', sans-serif;
  background:
    radial-gradient(circle at 18% 8%, rgba(18, 196, 107, 0.12), transparent 32%),
    radial-gradient(circle at 86% 18%, rgba(18, 196, 107, 0.1), transparent 30%),
    linear-gradient(180deg, #effcf6 0%, #ffffff 100%);
}

body.yeprun-roulette-body .roulette-page {
      max-width: 430px; margin: 0 auto;
      background:
        radial-gradient(circle at 18% 8%, rgba(18, 196, 107, 0.12), transparent 32%),
        radial-gradient(circle at 86% 18%, rgba(18, 196, 107, 0.1), transparent 30%),
        linear-gradient(180deg, #effcf6 0%, #ffffff 100%);
      min-height: 100vh; position: relative; overflow: hidden; padding-bottom: 48px;
    }

    

    
    body.yeprun-roulette-body .roulette-page .header {
      position: relative; z-index: 10;
      display: flex; justify-content: flex-start; align-items: center;
      height: 48px;
      padding: 14px 18px 0;
    }
    body.yeprun-roulette-body .roulette-page .logo {
      display: inline-flex;
      color: #048943;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.04em;
      line-height: 1;
      text-decoration: none;
    }
    
    body.yeprun-roulette-body .roulette-page .roulette-hero {
      position: relative;
      z-index: 10;
      min-height: 222px;
      overflow: visible;
    }
    body.yeprun-roulette-body .roulette-page .roulette-deco-layer {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }

    
    body.yeprun-roulette-body .roulette-page .banner-wrap { position: relative; z-index: 2; text-align: center; padding: 0 56px; }
    body.yeprun-roulette-body .roulette-page .banner-wrap img { width: 100%; max-width: 218px; filter: drop-shadow(0 4px 12px rgba(26,138,60,.30)); }

    
    body.yeprun-roulette-body .roulette-page .title-block { position: relative; z-index: 2; text-align: center; padding: 0 24px 9px; overflow: visible; }
    body.yeprun-roulette-body .roulette-page .main-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
      font-size: 45px;
      font-weight: 900;
      line-height: .98;
      letter-spacing: -2px;
      text-align: center;
      word-break: keep-all;
      transform: skewX(-2deg);
    }
    body.yeprun-roulette-body .roulette-page .main-title span {
      display: block;
      -webkit-text-stroke: .35px currentColor;
    }
    body.yeprun-roulette-body .roulette-page .main-title .is-dark {
      color: #111821;
      text-shadow: 1px 0 0 rgba(17,24,33,.1);
    }
    body.yeprun-roulette-body .roulette-page .main-title .is-green {
      color: #079f51;
      text-shadow: 1px 0 0 rgba(7,159,81,.12);
    }
    body.yeprun-roulette-body .roulette-page .roulette-hero-desc {
      position: relative;
      z-index: 2;
      max-width: 300px;
      margin: 2px auto 18px;
      padding: 0 12px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.55;
      color: #33443b;
      text-align: center;
      word-break: keep-all;
      letter-spacing: -.35px;
    }
    body.yeprun-roulette-body .roulette-page .roulette-hero-desc .desc-point {
      color: #079f51;
      font-weight: 900;
    }
    body.yeprun-roulette-body .roulette-page .roulette-hero-desc .desc-strong {
      color: #078f49;
      font-weight: 900;
    }

    
    body.yeprun-roulette-body .roulette-page .deco { position: absolute; pointer-events: none; z-index: 1; }
    @keyframes yeprunRouletteFloat { 0%,100%{transform:translateY(0px) rotate(var(--rot,0deg))} 50%{transform:translateY(-10px) rotate(var(--rot,0deg))} }
    
    body.yeprun-roulette-body .roulette-page .deco-coin-l  {
      left: 16px; top: 116px;
      --rot: -12deg;
      animation: yeprunRouletteFloat 3.0s ease-in-out infinite;
    }
    body.yeprun-roulette-body .roulette-page .deco-coin-l img { width: 50px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)); }
    
    body.yeprun-roulette-body .roulette-page .deco-gift-r  {
      right: 6px; top: 166px;
      --rot: 9deg;
      animation: yeprunRouletteFloat 3.5s ease-in-out infinite .4s;
    }
    body.yeprun-roulette-body .roulette-page .deco-gift-r img { width: 70px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.16)); }
    
    body.yeprun-roulette-body .roulette-page .deco-ticket  {
      left: 24px; top: 188px;
      --rot: -13deg;
      animation: yeprunRouletteFloat 2.8s ease-in-out infinite .2s;
    }
    body.yeprun-roulette-body .roulette-page .deco-ticket img { width: 62px; filter: drop-shadow(0 3px 7px rgba(0,0,0,.15)); }
    body.yeprun-roulette-body .roulette-page .main-title { position: relative; z-index: 2; }

    
    body.yeprun-roulette-body .roulette-page .chance-wrap { position: relative; z-index: 3; display: flex; justify-content: center; margin: 0 0 8px; }
    body.yeprun-roulette-body .roulette-page .chance-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: #fff; border: 2px solid #ceebd7; border-radius: 50px;
      padding: 8px 18px; box-shadow: 0 3px 16px rgba(26,138,60,.13);
    }
    body.yeprun-roulette-body .roulette-page .badge-label { font-size: 14px; color: #333; font-weight: 600; }
    body.yeprun-roulette-body .roulette-page .badge-num {
      background: #1a8a3c; color: #fff; border-radius: 20px;
      padding: 3px 14px; font-size: 13px; font-weight: 800;
      min-width: 38px; text-align: center; transition: background .3s;
    }
    body.yeprun-roulette-body .roulette-page .badge-num.zero { background: #aaa; }

    
    body.yeprun-roulette-body .roulette-page .wheel-section {
      position: relative; z-index: 10;
      display: flex; justify-content: center; align-items: flex-end;
      padding: 0 8px; min-height: 286px;
    }

    
    body.yeprun-roulette-body .roulette-page .guarantee {
      position: absolute; right: 16px; top: 6px; z-index: 25;
    }
    body.yeprun-roulette-body .roulette-page .guarantee img {
      width: 92px;
      filter: drop-shadow(0 4px 10px rgba(0,0,0,.20));
    }

    
    body.yeprun-roulette-body .roulette-page .wheel-wrap { position: relative; width: 278px; height: 278px; flex-shrink: 0; }

    
    body.yeprun-roulette-body .roulette-page .pin-wrap {
      position: absolute; top: 1px; left: 50%; transform: translateX(-50%);
      z-index: 30; width: 38px; pointer-events: none;
      filter: drop-shadow(0 3px 7px rgba(0,0,0,.35));
    }
    body.yeprun-roulette-body .roulette-page .pin-wrap img { width: 100%; display: block; }

    
    body.yeprun-roulette-body .roulette-page #wheelImg {
      width: 278px; height: 278px; display: block;
      transform-origin: center center; will-change: transform;
      border-radius: 50%;
    }

    
    body.yeprun-roulette-body .roulette-page .spin-center {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      z-index: 20; width: 84px; height: 84px; border-radius: 50%;
      border: none; background: transparent; padding: 0; cursor: pointer; outline: none;
      transition: transform .12s;
    }
    body.yeprun-roulette-body .roulette-page .spin-center img { width: 100%; height: 100%; border-radius: 50%; display: block; }
    body.yeprun-roulette-body .roulette-page .spin-center:hover:not(:disabled) { transform: translate(-50%,-50%) scale(1.07); }
    body.yeprun-roulette-body .roulette-page .spin-center:active:not(:disabled){ transform: translate(-50%,-50%) scale(0.93); }
    body.yeprun-roulette-body .roulette-page .spin-center:disabled { cursor: not-allowed; }

    
    body.yeprun-roulette-body .roulette-page .character {
    position: absolute;
    right: -6px;
    bottom: -18px;
    width: 145px;
    z-index: 15;
    pointer-events: none;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .14));
    }

    
    body.yeprun-roulette-body .roulette-page .cta-wrap { position: relative; z-index: 10; padding: 8px 18px 0; }
    body.yeprun-roulette-body .roulette-page .cta {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      width: 100%; background: #1a8a3c; color: #fff;
      border: none; border-radius: 16px; padding: 12px 20px;
      font-family: 'Noto Sans KR',sans-serif; font-size: 18px; font-weight: 900;
      cursor: pointer; letter-spacing: -.5px;
      box-shadow: 0 7px 26px rgba(26,138,60,.45), inset 0 -4px 0 rgba(0,0,0,.14);
      transition: transform .12s, box-shadow .12s, opacity .2s; outline: none;
    }
    body.yeprun-roulette-body .roulette-page .cta:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(26,138,60,.52),inset 0 -4px 0 rgba(0,0,0,.14); }
    body.yeprun-roulette-body .roulette-page .cta:active:not(:disabled){ transform: translateY(1px); box-shadow: 0 3px 12px rgba(26,138,60,.38); }
    body.yeprun-roulette-body .roulette-page .cta:disabled { opacity: .5; cursor: not-allowed; }
    
    body.yeprun-roulette-body .roulette-page .extra-wrap { display: none; flex-direction: column; gap: 10px; padding: 12px 18px 0; position: relative; z-index: 10; }
    body.yeprun-roulette-body .roulette-page .extra-wrap.show { display: flex; }
    body.yeprun-roulette-body .roulette-page .extra-guide {
      margin: 0 0 2px;
      padding: 14px 16px;
      border-radius: 14px;
      background: rgba(255,255,255,.78);
      border: 1px solid #d8efdf;
      color: #4b5b50;
      font-size: 13.5px;
      line-height: 1.55;
      text-align: center;
      word-break: keep-all;
    }
    body.yeprun-roulette-body .roulette-page .extra-btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; padding: 15px; border-radius: 14px; border: none;
      font-family: 'Noto Sans KR',sans-serif; font-size: 14px; font-weight: 700;
      cursor: pointer; transition: transform .1s;
    }
    body.yeprun-roulette-body .roulette-page .extra-btn:hover { transform: translateY(-1px); }
    body.yeprun-roulette-body .roulette-page #extraShare  { background: #fee500; color: #3a2d00; box-shadow: 0 4px 14px rgba(254,229,0,.38); }
    body.yeprun-roulette-body .roulette-page #extraPrereg { background: #1a8a3c; color: #fff; box-shadow: 0 4px 14px rgba(26,138,60,.38); }

    
    body.yeprun-roulette-body .roulette-page .info-card {
      position: relative; z-index: 10; margin: 18px 18px 0;
      background: #fff; border-radius: 20px; border: 1.5px solid #d8efdf;
      overflow: hidden; box-shadow: 0 2px 12px rgba(26,138,60,.07);
    }
    body.yeprun-roulette-body .roulette-page .info-row {
      display: flex; align-items: center; gap: 14px; width: 100%;
      padding: 15px 12px; border: 0; border-bottom: 1px solid #edf8f2;
      background: #fff; font-family: 'Noto Sans KR', sans-serif; text-align: left;
    }
    body.yeprun-roulette-body .roulette-page .info-row:last-child { border-bottom: none; }
    body.yeprun-roulette-body .roulette-page .info-action-row {
      cursor: pointer;
      transition: background .16s, transform .12s;
    }
    body.yeprun-roulette-body .roulette-page .info-action-row:hover:not(:disabled) { background: #f6fff9; }
    body.yeprun-roulette-body .roulette-page .info-action-row:active:not(:disabled) { transform: translateY(1px); }
    body.yeprun-roulette-body .roulette-page .info-action-row:disabled { cursor: default; }
    body.yeprun-roulette-body .roulette-page .info-row.is-complete { background: #fbfefc; }
    body.yeprun-roulette-body .roulette-page .info-ic {
      width: 36px; height: 36px;
      background: rgba(229, 234, 231, .72);
      border: 1px solid rgba(210, 218, 214, .84); border-radius: 10px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      overflow: hidden;
    }
    body.yeprun-roulette-body .roulette-page .info-ic img {
      width: 24px;
      height: 24px;
      object-fit: contain;
      display: block;
    }
    body.yeprun-roulette-body .roulette-page .info-ic .info-ic-gift {
      width: 30px;
      height: 30px;
    }
    body.yeprun-roulette-body .roulette-page .info-copy {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
      min-width: 0;
    }
    body.yeprun-roulette-body .roulette-page .info-copy strong {
      font-size: 12.5px;
      line-height: 1.35;
      font-weight: 800;
      color: #202b25;
      letter-spacing: -.2px;
    }
    body.yeprun-roulette-body .roulette-page .info-copy small {
      font-size: 11px;
      line-height: 1.45;
      font-weight: 500;
      color: #66736b;
    }
    body.yeprun-roulette-body .roulette-page .info-row.is-complete .info-copy strong { color: #149457; }
    body.yeprun-roulette-body .roulette-page .info-action-pill {
      width: 70px;
      height: 30px;
      padding: 0 12px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: -.2px;
      white-space: nowrap;
      border: 1px solid transparent;
    }
    body.yeprun-roulette-body .roulette-page .info-action-pill.is-done {
      background: #e8f8ef;
      color: #0b9f58;
      border-color: #bfe8d0;
    }
    body.yeprun-roulette-body .roulette-page .info-action-pill.is-share {
      background: #fee500;
      color: #3a2d00;
      box-shadow: 0 4px 10px rgba(254,229,0,.18);
    }
    body.yeprun-roulette-body .roulette-page .info-action-pill.is-preregister {
      background: #12c46b;
      color: #f7fff9;
      box-shadow: 0 4px 10px rgba(18,196,107,.18);
    }
    body.yeprun-roulette-body .roulette-page .hi { color: #1a8a3c; font-weight: 800; }

    
    body.yeprun-roulette-body .roulette-page .reward-toast {
      display: flex;
      align-items: center;
      gap: 10px;
      width: calc(100% - 36px);
      max-width: 394px;
      margin: 0 auto;
      padding: 0 14px;
      border: 0 solid #d7efdf;
      border-radius: 16px;
      background: rgba(255,255,255,.97);
      box-shadow: 0 8px 22px rgba(26,138,60,.15);
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transform: translateY(8px);
      pointer-events: none;
      transition: opacity .22s ease, transform .22s ease, max-height .22s ease,
        margin .22s ease, padding .22s ease, border-width .22s ease;
    }
    body.yeprun-roulette-body .roulette-page .reward-toast.show {
      margin-top: 8px;
      padding: 11px 14px;
      border-width: 1px;
      max-height: 86px;
      opacity: 1;
      transform: translateY(0);
    }
    body.yeprun-roulette-body .roulette-page .reward-toast-image {
      width: 44px;
      height: 44px;
      object-fit: contain;
      flex-shrink: 0;
    }
    body.yeprun-roulette-body .roulette-page .reward-toast-copy {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      text-align: left;
    }
    body.yeprun-roulette-body .roulette-page .reward-toast-copy strong {
      color: #1a8a3c;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: -.3px;
    }
    body.yeprun-roulette-body .roulette-page .reward-toast-copy span {
      color: #66736b;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: -.2px;
    }

    
    body.yeprun-roulette-body .toast {
      position: fixed; bottom: 36px; left: 50%;
      transform: translateX(-50%) translateY(14px);
      background: #1a8a3c; color: #fff;
      padding: 13px 26px; border-radius: 32px;
      font-size: 14px; font-weight: 600; white-space: nowrap;
      z-index: 300; box-shadow: 0 4px 20px rgba(26,138,60,.40);
      opacity: 0; transition: opacity .28s, transform .28s; pointer-events: none;
    }
    body.yeprun-roulette-body .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===========================================
   YepRun Cumulative Running Report
   =========================================== */

.yeprun-app-mobile-frame.yeprun-cumulative-report-page {
  background: #f6f7f8;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-scroll {
  position: relative;
  min-height: 100%;
  overflow-y: auto;
  padding-bottom: calc(var(--yeprun-app-bottom-tab-height) + var(--yeprun-app-safe-area-bottom));
  background: #f6f7f8;
  scrollbar-width: none;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-scroll::-webkit-scrollbar {
  display: none;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-header {
  padding: 56px 24px 24px;
  background: #ffffff;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  color: #181a1a;
  font-size: 34px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: -0.04em;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-title .yeprun-cumulative-report-title-indicator {
  width: 11px;
  height: 11px;
  border-right: 3px solid #181a1a;
  border-bottom: 3px solid #181a1a;
  transform: rotate(45deg) translateY(-4px);
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-date {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 13px 0 43px;
  color: #333333;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-date span {
  position: relative;
  width: 18px;
  height: 18px;
  border: 2px solid #333333;
  border-radius: 4px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-date span::before,
.yeprun-cumulative-report-page .yeprun-cumulative-report-date span::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: #333333;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-date span::before {
  left: 3px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-date span::after {
  right: 3px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-category-tabs {
  display: flex;
  justify-content: space-around;
  align-items: end;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-category-tabs button {
  position: relative;
  min-width: 72px;
  height: 34px;
  color: #666666;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  text-align: center;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-category-tabs button.is-active {
  color: #111111;
  font-weight: 700;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-category-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 72px;
  height: 2px;
  transform: translateX(-50%);
  background: #111111;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-sheet[hidden] {
  display: none;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-sheet {
  position: fixed;
  top: 0;
  left: 50%;
  width: min(100%, 430px);
  height: 100dvh;
  min-height: 100vh;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: translateX(-50%);
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-sheet.is-open .yeprun-cumulative-report-period-backdrop {
  opacity: 1;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 541px;
  padding: 118px 24px calc(24px + var(--yeprun-app-safe-area-bottom, 0px));
  border-radius: 24px 24px 0 0;
  background: #ffffff;
  box-shadow: 0 -16px 36px rgba(0, 0, 0, 0.12);
  transform: translateY(100%);
  transition: transform 0.2s ease;
}

.yeprun-cumulative-report-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-sheet.is-open .yeprun-cumulative-report-period-panel {
  transform: translateY(0);
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-sheet.is-weekly .yeprun-cumulative-report-period-panel {
  min-height: 485px;
  padding-top: 116px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-handle {
  position: absolute;
  top: 24px;
  left: 50%;
  width: 48px;
  height: 4px;
  border-radius: 100px;
  transform: translateX(-50%);
  background: #e2e6ea;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-tabs {
  position: absolute;
  top: 66px;
  left: 23px;
  display: flex;
  gap: 12px;
  margin-bottom: 0;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 49px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid #d9d9d9;
  border-radius: 14px;
  color: #181a1a;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  background: #ffffff;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-tabs button.is-active {
  border-color: #12c46b;
  color: #12b967;
  font-weight: 700;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-content {
  display: none;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-content.is-active {
  display: block;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-sheet.is-weekly .yeprun-cumulative-report-period-content[data-period-content="weekly"] {
  width: 329px;
  max-width: 100%;
  margin: 0 auto;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-month,
.yeprun-cumulative-report-page .yeprun-cumulative-report-period-range {
  display: block;
  margin-bottom: 23px;
  color: #181a1a;
  font-size: 19px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.04em;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-sheet.is-weekly .yeprun-cumulative-report-period-range {
  margin: 0 0 60px;
  font-size: 19px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.439453px;
  white-space: nowrap;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-calendar-weekdays,
.yeprun-cumulative-report-page .yeprun-cumulative-report-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-calendar-weekdays {
  margin-bottom: 5px;
  color: #777777;
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

/* .yeprun-cumulative-report-page .yeprun-cumulative-report-calendar-days {
  row-gap: 10px;
} */

.yeprun-cumulative-report-page .yeprun-cumulative-report-calendar-days button,
.yeprun-cumulative-report-page .yeprun-cumulative-report-calendar-days span {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 14px;
  color: #252525;
  font-size: 18px;
  font-weight: 500;
  line-height: 46px;
  text-align: center;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-calendar-days button.is-selected {
  color: #ffffff;
  background: #12c46b;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-calendar-days button.is-muted {
  color: #b6b6b6;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-week-picker {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  width: 327px;
  height: 100px;
  max-width: 100%;
  gap: 0;
  margin: 33px auto 0;
  overflow: hidden;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-sheet.is-weekly .yeprun-cumulative-report-week-picker {
  margin-top: 0;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-week-picker::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 34px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  pointer-events: none;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-week-picker div {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: repeat(3, 24px);
  align-content: start;
  gap: 14px;
  min-height: 100px;
  touch-action: pan-y;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-week-picker button,
.yeprun-cumulative-report-page .yeprun-cumulative-report-week-picker span {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0;
  border-radius: 0;
  color: #666666;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.950218px;
  text-align: center;
  background: transparent;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-week-picker span {
  opacity: 0;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-week-picker div:nth-child(1) button,
.yeprun-cumulative-report-page .yeprun-cumulative-report-week-picker div:nth-child(1) span {
  justify-content: flex-end;
  padding-right: 16px;
  text-align: right;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-week-picker div:nth-child(2) button,
.yeprun-cumulative-report-page .yeprun-cumulative-report-week-picker div:nth-child(2) span {
  justify-content: center;
  text-align: center;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-week-picker div:nth-child(3) button,
.yeprun-cumulative-report-page .yeprun-cumulative-report-week-picker div:nth-child(3) span {
  justify-content: flex-start;
  padding-left: 16px;
  text-align: left;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-week-picker button.is-selected {
  color: #10b861;
  font-weight: 600;
  background: transparent;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-actions {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: calc(36px + var(--yeprun-app-safe-area-bottom, 0px));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 0;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-actions button {
  height: 49px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.3125px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-cancel {
  border: 0.612036px solid #e5e8eb;
  color: #191f28;
  font-weight: 400;
  background: #ffffff;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-period-apply {
  color: #ffffff;
  font-weight: 500;
  background: #10bb61;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-profile-card,
.yeprun-cumulative-report-page .yeprun-cumulative-report-card,
.yeprun-cumulative-report-page .yeprun-cumulative-report-history-card {
  margin: 24px 24px 0;
  border-radius: 18px;
  background: #ffffff;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  margin: 24px 24px 0;
  border-radius: 18px;
  background: #ffffff;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-placeholder[hidden] {
  display: none;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-placeholder p {
  margin: 0;
  color: #181a1a;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking[hidden] {
  display: none;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .yeprun-cumulative-report-result-button {
  width: 100%;
  border: 0;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking > .yeprun-cumulative-report-profile-card {
  padding: 16px 20px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .yeprun-cumulative-report-walking-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  padding: 0;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .score-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-top: 0;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .score-title {
  margin: 0 0 12px;
  color: #333333;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .score-val-wrap {
  margin: 0 0 22px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .score-value {
  color: #12c46b;
  font-size: 26px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: -0.03em;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .score-badge {
  display: none;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .score-desc {
  margin-top: 0;
  padding-top: 22px;
  border-top: 1px dashed #e2e6ea;
  color: #666666;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .score-desc strong {
  color: #181a1a;
  font-size: 15.5px;
  font-weight: 700;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .char-box {
  width: 140px;
  min-height: 196px;
  border-radius: 8px;
  background: #eefbf4;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .char-img {
  width: 100%;
  margin-top: 8px;
  object-fit: contain;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .char-btn {
  min-height: 36px;
  padding: 8px 6px;
  background: #12c46b;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

@media (max-width: 374px) {
  .yeprun-cumulative-report-page .yeprun-cumulative-report-walking > .yeprun-cumulative-report-profile-card {
    padding: 16px 18px;
  }

  .yeprun-cumulative-report-page .yeprun-cumulative-report-walking .yeprun-cumulative-report-walking-hero {
    gap: 14px;
  }

  .yeprun-cumulative-report-page .yeprun-cumulative-report-walking .score-desc {
    font-size: 13px;
    line-height: 22px;
  }

  .yeprun-cumulative-report-page .yeprun-cumulative-report-walking .score-desc strong {
    font-size: 14px;
  }

  .yeprun-cumulative-report-page .yeprun-cumulative-report-walking .char-box {
    width: 130px;
    min-height: 188px;
  }

  .yeprun-cumulative-report-page .yeprun-cumulative-report-walking .char-btn {
    font-size: 14px;
  }
}

.yeprun-cumulative-report-page [data-report-category-panel="running"] > .yeprun-cumulative-report-profile-card {
  padding: 22px 20px 24px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-profile-main {
  display: flex;
  align-items: center;
  gap: 17px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-profile-main img {
  width: 92px;
  height: 92px;
  border-radius: 20px;
  object-fit: cover;
  background: #f7f8fa;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-profile-main h1 {
  margin: 0 0 4px;
  color: #181a1a;
  font-size: 31px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: -0.04em;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-profile-main p {
  margin: 0;
  color: #9aa3ad;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 20px 0 22px;
  text-align: center;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-profile-stats dt {
  margin-bottom: 5px;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-profile-stats dd {
  color: #181a1a;
  font-size: 25px;
  font-weight: 700;
  line-height: 34px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-result-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 52px;
  border-radius: 8px;
  background: #12c46b;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  text-decoration: none;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-view-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 28px 24px 0;
  padding: 4px;
  border-radius: 14px;
  background: #eff1f3;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-view-tabs button {
  height: 50px;
  border-radius: 11px;
  color: #666666;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-view-tabs button.is-active {
  background: #ffffff;
  color: #181a1a;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.12);
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-panel {
  display: none;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-panel.is-active {
  display: block;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-card {
  padding: 24px 20px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-card h2 {
  margin: 0 0 24px;
  color: #181a1a;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.03em;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-card h2.is-green {
  color: #12b967;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-line-chart {
  position: relative;
  height: 202px;
  padding-bottom: 24px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-line-chart svg {
  display: block;
  width: 100%;
  height: 178px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-line-chart line {
  stroke: #eef1f3;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-line-chart polyline {
  fill: none;
  stroke: #222222;
  stroke-width: 2.3;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-line-chart circle {
  fill: #ffffff;
  stroke: #222222;
  stroke-width: 2.2;
  cursor: pointer;
  transition: fill 0.18s ease, r 0.18s ease;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-line-chart circle.is-focus {
  fill: #666666;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-tooltip {
  position: absolute;
  top: 75px;
  width: 126px;
  padding: 11px 13px;
  border: 1px solid #d9dde1;
  border-radius: 5px;
  background: #ffffff;
  color: #6b7280;
  font-size: 13px;
  line-height: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: left 0.18s ease;
  z-index: 2;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-tooltip strong,
.yeprun-cumulative-report-page .yeprun-cumulative-report-tooltip span {
  display: block;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-tooltip b {
  float: right;
  color: #333333;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-chart-axis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-chart-axis button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: #b0b6bd;
  font: inherit;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  transition: color 0.18s ease, font-weight 0.18s ease;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-chart-axis button.is-focus {
  color: #191f28;
  font-weight: 700;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-metric-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 25px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-metric-row div {
  padding: 19px 16px;
  border-radius: 9px;
  background: #fafafa;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-metric-row span {
  display: block;
  margin-bottom: 8px;
  color: #333333;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-metric-row strong {
  color: #12c46b;
  font-size: 28px;
  font-weight: 700;
  line-height: 34px;
}

@media (max-width: 360px) {
  .yeprun-cumulative-report-page .yeprun-cumulative-report-metric-row strong {
    font-size: 26px;
    line-height: 32px;
  }
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-type-row + .yeprun-cumulative-report-type-row {
  margin-top: 18px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-type-row div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 9px;
  color: #6b7280;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-type-row strong {
  color: #333333;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-type-row p {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eff1f3;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-type-row p span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #12c46b;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-type-row:nth-of-type(2) p span,
.yeprun-cumulative-report-page .yeprun-cumulative-report-type-row:nth-of-type(3) p span {
  background: #88939f;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-note {
  margin: 22px 0 0;
  color: #9aa3ad;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-note strong {
  color: #12c46b;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-history-card {
  overflow: hidden;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-history-card a {
  position: relative;
  display: block;
  min-height: 120px;
  padding: 25px 56px 22px 24px;
  color: inherit;
  text-decoration: none;
  background: #ffffff;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-history-card a + a {
  border-top: 1px solid #e5e8eb;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-history-card a::after {
  content: "";
  position: absolute;
  right: 25px;
  top: 42px;
  width: 16px;
  height: 16px;
  border: 0;
  background: url("../images/202606_yeprun/ic_16_arrow.png") center / contain no-repeat;
  transform: translateY(-50%);
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-history-card span {
  display: block;
  margin-bottom: 9px;
  color: #6b7280;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-history-card strong {
  display: block;
  margin-bottom: 7px;
  color: #181a1a;
  font-size: 21px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.03em;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-history-card em {
  color: #12c46b;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-change-block + .yeprun-cumulative-report-change-block {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid #edf0f2;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-change-block > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-change-block span {
  color: #7a8793;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-change-block strong {
  color: #12c46b;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-change-block svg {
  width: 100%;
  height: 100px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-change-block polyline {
  fill: none;
  stroke-width: 2.3;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-change-block .is-prev {
  stroke: #d2d8de;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-change-block .is-now {
  stroke: #12c46b;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-change-block dl {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-change-block dl div {
  display: flex;
  justify-content: space-between;
  color: #8b95a1;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-change-block dl div:last-child {
  color: #12c46b;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-change-block dd {
  font-weight: 700;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking-change-card {
  padding: 20px 18px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking-change-card h2 {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 25px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking-compare-row + .yeprun-cumulative-report-walking-compare-row {
  margin-top: 18px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking-compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking-compare-head span {
  color: #7a8793;
  font-size: 13px;
  font-weight: 600;
  line-height: 19px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking-compare-head strong {
  color: #12c46b;
  font-size: 13px;
  font-weight: 700;
  line-height: 19px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking-bars {
  display: grid;
  gap: 7px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking-bar-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking-bar-row span {
  color: #9aa3ad;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking-bar-row p {
  height: 8px;
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
  background: #eef1f3;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking-bar-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #cfd6dd;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking-bar-row b {
  color: #7a8793;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: right;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking-bar-row.is-current span,
.yeprun-cumulative-report-page .yeprun-cumulative-report-walking-bar-row.is-current b {
  color: #12c46b;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking-bar-row.is-current i {
  background: #12c46b;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-check-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #6b7684;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-check-list li::before {
  content: "✓";
  margin-right: 11px;
  color: #12c46b;
  font-weight: 700;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-check-list li.is-warn::before {
  content: "→";
  color: #f59e0b;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking-change-card .yeprun-cumulative-report-check-list {
  gap: 14px;
  font-size: 14px;
  line-height: 22px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking-change-card .yeprun-cumulative-report-check-list li {
  display: flex;
  align-items: flex-start;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking-change-card .yeprun-cumulative-report-check-list li::before {
  flex: 0 0 auto;
  margin-right: 10px;
}

.yeprun-cumulative-report-page [data-walking-panel="change"] .yeprun-cumulative-report-check-list {
  gap: 14px;
  font-size: 14px;
  line-height: 22px;
}

.yeprun-cumulative-report-page [data-walking-panel="change"] .yeprun-cumulative-report-check-list li {
  display: flex;
  align-items: flex-start;
}

.yeprun-cumulative-report-page [data-walking-panel="change"] .yeprun-cumulative-report-check-list li::before {
  flex: 0 0 auto;
  margin-right: 10px;
}

.yeprun-cumulative-report-page [data-report-panel="change"] .yeprun-cumulative-report-check-list {
  gap: 14px;
  font-size: 14px;
  line-height: 22px;
}

.yeprun-cumulative-report-page [data-report-panel="change"] .yeprun-cumulative-report-check-list li {
  display: flex;
  align-items: flex-start;
}

.yeprun-cumulative-report-page [data-report-panel="change"] .yeprun-cumulative-report-check-list li::before {
  flex: 0 0 auto;
  margin-right: 10px;
}

@media (max-width: 374px) {
  .yeprun-cumulative-report-page .yeprun-cumulative-report-walking-change-card .yeprun-cumulative-report-check-list {
    gap: 13px;
    font-size: 13px;
    line-height: 21px;
  }

  .yeprun-cumulative-report-page .yeprun-cumulative-report-walking-change-card .yeprun-cumulative-report-check-list li::before {
    margin-right: 8px;
  }

  .yeprun-cumulative-report-page [data-walking-panel="change"] .yeprun-cumulative-report-check-list {
    gap: 13px;
    font-size: 13px;
    line-height: 21px;
  }

  .yeprun-cumulative-report-page [data-walking-panel="change"] .yeprun-cumulative-report-check-list li::before {
    margin-right: 8px;
  }

  .yeprun-cumulative-report-page [data-report-panel="change"] .yeprun-cumulative-report-check-list {
    gap: 13px;
    font-size: 13px;
    line-height: 21px;
  }

  .yeprun-cumulative-report-page [data-report-panel="change"] .yeprun-cumulative-report-check-list li::before {
    margin-right: 8px;
  }
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-goal {
  padding: 20px;
  border-radius: 8px;
  background: #f8f9fa;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-goal span {
  display: block;
  margin-bottom: 12px;
  color: #7a8793;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-goal strong {
  color: #181a1a;
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-goal strong b {
  color: #12c46b;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-goal em {
  margin: 0 12px;
  color: #8b95a1;
  font-style: normal;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-bottom-spacer {
  height: 30px;
}

/* ──────────────────────────────────────────
   출석 챌린지
────────────────────────────────────────── */
.yeprun-attendance-challenge-page {
  background: #ffffff;
  color: #181a1a;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  height: 50px;
  padding: 7px 18px 7px 24px;
  background: #ffffff;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-back {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-back span {
  position: absolute;
  left: 17px;
  top: 14px;
  width: 14px;
  height: 14px;
  border-left: 3px solid #181a1a;
  border-bottom: 3px solid #181a1a;
  transform: rotate(45deg);
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: -0.408px;
  text-align: center;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 35px 20px calc(96px + env(safe-area-inset-bottom));
  background: #ffffff;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-hero {
  position: relative;
  width: min(335px, 100%);
  margin: 0 auto;
  aspect-ratio: 335 / 178;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(16, 184, 97, 0.24);
  border-radius: 14px;
  background: #f7fff9;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-hero-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  pointer-events: none;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-hero-copy span {
  position: absolute;
  left: clamp(12px, 3.8vw, 14px);
  top: clamp(12px, 3.6vw, 13px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  height: 19px;
  margin-bottom: 8px;
  padding: 0 12px;
  border: 0.2px solid #e53935;
  border-radius: 999px;
  background: rgba(229, 57, 53, 0.08);
  color: #e53935;
  font-size: 11px;
  font-weight: 500;
  /* line-height: 12px; */
  letter-spacing: 0;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-hero-copy strong {
  position: absolute;
  left: clamp(12px, 3.8vw, 14px);
  top: clamp(38px, 10.6vw, 40px);
  display: block;
  max-width: clamp(156px, 46vw, 174px);
  color: #181a1a;
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-hero-copy p {
  position: absolute;
  left: clamp(12px, 3.8vw, 14px);
  top: clamp(94px, 26.8vw, 101px);
  max-width: min(230px, calc(100% - 28px));
  margin: 0;
  color: #383838;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0;
  white-space: normal;
  word-break: keep-all;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-hero-copy button {
  position: absolute;
  left: clamp(12px, 3.8vw, 14px);
  bottom: clamp(15px, 4.8vw, 20px);
  width: clamp(152px, 44vw, 154px);
  max-width: 100%;
  height: 26px;
  border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: -0.152383px;
  background: #10bb61;
  pointer-events: auto;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-hero-copy button.is-complete {
  background: #8dddb4;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-calendar {
  width: 327px;
  max-width: 100%;
  margin: 34px auto 0;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-calendar h2 {
  margin: 0 0 18px;
  color: #181a1a;
  font-size: 19px;
  font-weight: 600;
  line-height: 29px;
  letter-spacing: -0.439453px;
  text-align: center;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-weekdays,
.yeprun-attendance-challenge-page .yeprun-attendance-challenge-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-weekdays {
  margin-bottom: 2px;
  color: #757575;
  font-size: 14px;
  font-weight: 600;
  line-height: 23px;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-calendar-grid {
  row-gap: 2px;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-calendar-grid button,
.yeprun-attendance-challenge-page .yeprun-attendance-challenge-calendar-grid span {
  width: 45.73px;
  height: 45.73px;
  margin: 0 auto;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-calendar-grid button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #252525;
  font-size: 18.2937px;
  font-weight: 500;
  line-height: 26px;
  background: transparent;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-calendar-grid button img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-calendar-grid button.is-happy {
  background: rgba(16, 187, 97, 0.08);
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-calendar-grid button.is-sad {
  background: rgba(255, 82, 82, 0.10);
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-calendar-grid button.is-today {
  border: 0.4px dashed #10bb61;
  color: #10bb61;
  font-weight: 600;
  background: rgba(16, 187, 97, 0.05);
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-calendar-grid button.is-muted {
  color: #b8b8b8;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-status {
  width: 327px;
  max-width: 100%;
  margin: 20px auto 0;
  padding: 12px 12px 16px;
  border-radius: 8px;
  background: #fafafa;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-status div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-status strong,
.yeprun-attendance-challenge-page .yeprun-attendance-challenge-status span {
  color: #181a1a;
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-status b {
  color: #10bb61;
  font-weight: 700;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-status p {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6e6e6;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-status p span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #10bb61;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-rewards {
  width: 327px;
  max-width: 100%;
  margin: 20px auto 0;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-rewards h2 {
  margin: 0 0 12px;
  color: #191f28;
  font-size: 17px;
  font-weight: 500;
  line-height: 23px;
  letter-spacing: 0;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-rewards h2 strong {
  color: #10bb61;
  font-size: 20px;
  font-weight: 600;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 75.38px);
  gap: 8.5px;
  justify-content: center;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-track::before {
  content: "";
  position: absolute;
  left: 62px;
  right: 62px;
  top: 56px;
  height: 4px;
  background: #048943;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 111.4px;
  padding: 6px 2px;
  border: 0.2px solid #048943;
  border-radius: 8px;
  background: #ffffff;
  text-align: center;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card.is-achieved {
  background: #f4fcf2;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 49.2px;
  height: 16.4px;
  margin-bottom: 4px;
  padding: 0 8px;
  border: 0.16px solid #048943;
  border-radius: 999px;
  color: #048943;
  font-size: 8.8px;
  font-weight: 600;
  line-height: 10px;
  background: #f9fef7;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card img {
  width: 36px;
  height: 36px;
  margin: 0 0 4px;
  object-fit: contain;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card span + img {
  display: block;
  flex: 0 0 41px;
  object-position: center;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card:nth-child(3) img {
  width: 42px;
  height: 41px;
  object-fit: contain;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card:nth-child(2) img {
  width: 48px;
  height: 41px;
  object-fit: contain;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card:nth-child(4) img {
  width: 40px;
  height: 41px;
  object-fit: contain;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card p {
  margin: 0 0 4px;
  color: #191f28;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card strong {
  color: #10bb61;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-actions {
  width: 327px;
  max-width: 100%;
  margin: 64px auto 0;
  text-align: center;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-primary {
  width: 100%;
  height: 49.2px;
  border-radius: 8px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.3125px;
  background: #10bb61;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-secondary {
  margin-top: 12px;
  color: #666666;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.3125px;
  background: transparent;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-modal {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(0, 0, 0, 0.68);
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-modal[hidden] {
  display: none;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-modal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 337px;
  min-height: 244px;
  padding: 32px 24px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  text-align: center;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-modal-card img {
  width: 118px;
  height: 118px;
  object-fit: contain;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-modal-card h2 {
  margin: 0 0 20px;
  color: #181a1a;
  font-size: 18px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.04em;
}

.yeprun-attendance-challenge-page .yeprun-attendance-challenge-modal-card button {
  width: 68px;
  height: 38px;
  border-radius: 8px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.04em;
  background: #10bb61;
}

/* ---- 보상 달성 팝업 ---- */
.yeprun-attendance-challenge-page [data-attendance-reward-modal] .yeprun-attendance-challenge-modal-card {
  padding: 28px 24px 24px;
  gap: 0;
}

.yeprun-attendance-challenge-page [data-attendance-reward-modal] .yeprun-attendance-challenge-modal-card img {
  width: 88px;
  height: 88px;
  margin-bottom: 16px;
}

.yeprun-attendance-challenge-page [data-attendance-reward-modal] .yeprun-attendance-challenge-modal-card h2 {
  display: inline-block;
  margin: 0 0 12px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #e8fdf2;
  color: #10bb61;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

.yeprun-attendance-challenge-page [data-attendance-reward-modal] [data-attendance-reward-modal-title] {
  margin: 0 0 4px;
  color: #181a1a;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.03em;
}

.yeprun-attendance-challenge-page [data-attendance-reward-modal] [data-attendance-reward-modal-amount] {
  display: block;
  margin-bottom: 24px;
  color: #10bb61;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.04em;
}

.yeprun-attendance-challenge-page [data-attendance-reward-modal] .yeprun-attendance-challenge-modal-card button {
  width: auto;
}

.yeprun-attendance-challenge-page [data-attendance-reward-modal] .yeprun-attendance-reward-modal-buttons {
  display: flex;
  gap: 8px;
  width: 100%;
}

.yeprun-attendance-challenge-page [data-attendance-reward-modal-action] {
  flex: 1;
  height: 48px;
  border-radius: 10px;
  background: #10bb61;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.yeprun-attendance-challenge-page [data-attendance-reward-modal-close] {
  flex: 0 0 80px;
  height: 48px;
  border-radius: 10px;
  background: #f4f5f6;
  color: #6b7280;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

@media (max-width: 374px) {
  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-scroll {
    padding-right: 16px;
    padding-left: 16px;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }
}

/* ──────────────────────────────────────────
   YepRun app responsive patch
   - iOS/AOS small screens
   - Galaxy Fold inner / wider mobile viewport
────────────────────────────────────────── */
html,
body {
  min-height: 100%;
}

@supports (min-height: 100dvh) {
  html,
  body {
    min-height: 100dvh;
  }
}

body:has(.yeprun-app-mobile-frame),
body:has(.yeprun-run-result-page),
body:has(.yeprun-record-share-page),
body:has(.yeprun-record-complete-page) {
  background: #eefaf4;
}

body:has(.yeprun-record-complete-page) {
  background: #ffffff;
}

.yeprun-app-mobile-frame,
.yeprun-run-result-page,
.yeprun-record-share-page,
.yeprun-record-complete-page {
  width: min(100%, 430px);
  min-height: 100vh;
}

@supports (min-height: 100dvh) {
  .yeprun-app-mobile-frame,
  .yeprun-run-result-page,
  .yeprun-record-share-page,
  .yeprun-record-complete-page {
    min-height: 100dvh;
  }
}

@media (min-width: 431px) {
  body:has(.yeprun-app-mobile-frame),
  body:has(.yeprun-run-result-page),
  body:has(.yeprun-record-share-page),
  body:has(.yeprun-record-complete-page) {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    margin: 0;
  }

  @supports (min-height: 100dvh) {
    body:has(.yeprun-app-mobile-frame),
    body:has(.yeprun-run-result-page),
    body:has(.yeprun-record-share-page),
    body:has(.yeprun-record-complete-page) {
      min-height: 100dvh;
    }
  }

  .yeprun-app-mobile-frame {
    width: 430px;
    min-height: 100vh;
    height: auto;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  @supports (min-height: 100dvh) {
    .yeprun-app-mobile-frame {
      min-height: 100dvh;
    }
  }

  .yeprun-run-result-page,
  .yeprun-record-share-page,
  .yeprun-record-complete-page {
    max-width: 430px;
    margin: 0 auto;
  }
}

@media (max-width: 430px) {
  body:has(.yeprun-app-mobile-frame),
  body:has(.yeprun-run-result-page),
  body:has(.yeprun-record-share-page),
  body:has(.yeprun-record-complete-page) {
    margin: 0;
    background: #ffffff;
  }

  .yeprun-app-mobile-frame {
    min-height: 100vh;
    height: auto;
  }

  @supports (min-height: 100dvh) {
    .yeprun-app-mobile-frame {
      min-height: 100dvh;
    }
  }
}

/* Home */
@media (min-width: 431px) {
  .yeprun-app-mobile-frame .yeprun-home-page {
    width: 100%;
  }
}

@media (max-width: 374px) {
  :root {
    --yeprun-layout-page-gutter: 18px;
    --yeprun-layout-content-gap: 22px;
  }

  .yeprun-home-page .yeprun-home-hero-banner {
    margin-top: 20px;
    padding: 14px;
  }

  .yeprun-home-page .yeprun-home-section-title,
  .yeprun-home-page .yeprun-home-section-header .yeprun-home-section-title {
    font-size: 18px;
  }

  .yeprun-home-page .yeprun-home-quick-menu-list {
    gap: 10px;
  }

  .yeprun-home-page .yeprun-home-weekly-challenge-card,
  .yeprun-home-page .yeprun-home-daily-recommend-card,
  .yeprun-home-page .yeprun-home-payment-card,
  .yeprun-home-page .yeprun-home-checkin-benefit-card {
    border-radius: 14px;
  }
}

/* Run result */
@media (max-width: 374px) {
  .yeprun-run-result-page .yeprun-run-result-content {
    padding-right: 0;
    padding-left: 0;
  }

  .yeprun-run-result-page .yeprun-run-result-hero {
    min-height: 540px;
    padding-top: 22px;
  }

  .yeprun-run-result-page .yeprun-run-result-hero .yeprun-run-result-character {
    width: min(72vw, 235px);
  }

  .yeprun-run-result-page .yeprun-run-result-section-card,
  .yeprun-run-result-page .yeprun-run-result-summary-card {
    border-radius: 14px;
  }

  .yeprun-record-complete-page .yeprun-record-complete-hero {
    padding-top: 28px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .yeprun-record-complete-page .yeprun-record-complete-character {
    width: 220px;
    height: 124px;
    margin-bottom: 22px;
  }

  .yeprun-record-complete-page .yeprun-record-complete-hero h1 {
    font-size: 24px;
    line-height: 33px;
  }

  .yeprun-record-complete-page .yeprun-record-complete-point-card {
    margin-right: 20px;
    margin-bottom: 34px;
    margin-left: 20px;
  }

  .yeprun-record-complete-page .yeprun-record-complete-actions {
    padding: 34px 20px 44px;
  }

  .yeprun-record-complete-page .yeprun-record-complete-action-item {
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    column-gap: 12px;
    min-height: 78px;
    padding: 18px 16px;
  }

  .yeprun-record-complete-page .yeprun-record-complete-action-item img {
    width: 36px;
    height: 36px;
  }

  .yeprun-record-complete-page .yeprun-record-complete-action-item em img {
    width: 22px;
    height: 22px;
  }

  .yeprun-record-complete-page .yeprun-record-complete-footer {
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (min-width: 431px) {
  .yeprun-run-result-page {
    background: #ffffff;
  }
}

/* Cumulative report */
@media (max-width: 374px) {
  .yeprun-cumulative-report-page .yeprun-cumulative-report-scroll {
    padding-right: 0;
    padding-left: 0;
  }

  .yeprun-cumulative-report-page .yeprun-cumulative-report-title {
    font-size: 27px;
  }

  .yeprun-cumulative-report-page .yeprun-cumulative-report-profile-main h1 {
    font-size: 20px;
  }

  .yeprun-cumulative-report-page .yeprun-cumulative-report-profile-stats {
    gap: 8px;
  }

  .yeprun-cumulative-report-page .yeprun-cumulative-report-period-panel {
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (min-width: 431px) {
  .yeprun-cumulative-report-page {
    background: #ffffff;
  }

  .yeprun-cumulative-report-page .yeprun-cumulative-report-scroll {
    padding-right: 0;
    padding-left: 0;
  }
}

/* Point page */
@media (max-width: 374px) {
  .yeprun-point-page .yeprun-point-summary-section {
    /* width: calc(100% - 32px); */
    margin-top: 36px;
    gap: 8px;
  }

  .yeprun-point-page .yeprun-point-use-button {
    width: 132px;
    padding-right: 12px;
    padding-left: 12px;
    font-size: 13px;
  }

  .yeprun-point-page .yeprun-point-total strong {
    font-size: 22px;
  }
}

/* Attendance challenge */
@media (max-width: 374px) {
  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-scroll {
    padding-top: 26px;
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-hero-copy strong {
    top: 39px;
    max-width: 166px;
    font-size: 19px;
    line-height: 23px;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-hero-copy p {
    top: 95px;
    max-width: 230px;
    font-size: 11px;
    line-height: 13px;
    white-space: nowrap;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-calendar {
    margin-top: 28px;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-calendar-grid button,
  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-calendar-grid span {
    width: 40px;
    height: 40px;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card {
    min-height: 105px;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-actions {
    margin-top: 50px;
  }
}

@media (max-width: 340px) {
  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-scroll {
    padding-right: 16px;
    padding-left: 16px;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-hero-copy span {
    left: 12px;
    top: 12px;
    min-width: 88px;
    height: 18px;
    padding: 0 10px;
    font-size: 10px;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-hero-copy strong {
    left: 12px;
    top: 37px;
    max-width: 156px;
    font-size: 18px;
    line-height: 22px;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-hero-copy p {
    left: 12px;
    top: 90px;
    max-width: 248px;
    font-size: 9.5px;
    line-height: 12px;
    white-space: nowrap;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-hero-copy button {
    left: 12px;
    bottom: 14px;
    width: 152px;
    height: 25px;
    font-size: 11px;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-track::before {
    left: 48px;
    right: 48px;
    top: 52px;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card {
    min-height: 104px;
    padding: 5px 1px;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card span {
    min-width: 44px;
    height: 15px;
    padding: 0 6px;
    font-size: 7.6px;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card img {
    width: 31px;
    height: 31px;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card:nth-child(2) img,
  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card:nth-child(3) img,
  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card:nth-child(4) img {
    width: 34px;
    height: 34px;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card p {
    font-size: 10.5px;
    line-height: 13px;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-reward-card strong {
    font-size: 15px;
    line-height: 15px;
  }
}

@media (min-width: 431px) {
  .yeprun-attendance-challenge-page {
    background: #ffffff;
  }

  .yeprun-attendance-challenge-page .yeprun-attendance-challenge-scroll {
    padding-right: 24px;
    padding-left: 24px;
  }
}

/* Record share */
@media (max-width: 374px) {
  .yeprun-record-share-page .yeprun-record-share-content {
    padding-right: 16px;
    padding-left: 16px;
  }

  .yeprun-record-share-page .yeprun-record-share-preview {
    width: 100%;
    max-width: none;
  }

  .yeprun-record-share-page .yeprun-record-share-footer {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media (min-width: 431px) {
  .yeprun-record-share-page,
  .yeprun-record-complete-page {
    background: #ffffff;
  }
}


/* Cumulative report - walking history uses renewal_lee report cards */
.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .yeprun-cumulative-report-walking-daily {
  margin: 0;
  padding: 24px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .yeprun-cumulative-report-walking-daily .section-title {
  margin-bottom: 18px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .yeprun-cumulative-report-walking-daily .section-title h2 {
  margin: 0 0 6px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .yeprun-cumulative-report-walking-daily .section-title p {
  margin: 0;
}


.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .report-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .report-card {
  width: 100%;
  margin: 0;
  border: 1.5px solid #eeeeee;
  color: inherit;
  text-align: left;
  appearance: none;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .report-card.active {
  border-color: #10c46b;
  box-shadow: 0 4px 12px rgba(16, 196, 107, 0.12);
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .report-card .data-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  object-fit: contain;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-walking .report-card .card-arrow {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  line-height: 0;
  background: url("../images/202606_yeprun/ic_16_arrow.png") center / contain no-repeat;
}

/* Cumulative report - body measurement uses existing renewal_lee mr-* markup */
.yeprun-cumulative-report-page .yeprun-cumulative-report-body {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 28px 24px calc(112px + env(safe-area-inset-bottom));
  background: #ffffff;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-section {
  margin-bottom: 32px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-section-title {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-section-desc {
  margin: -8px 0 18px;
  font-size: 13px;
  line-height: 19px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-measurement-grid {
  gap: 12px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-card {
  min-width: 0;
  padding: 18px 12px;
  border: 1px solid #f0f2f4;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-card-title {
  font-size: 15px;
  line-height: 21px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-card-date {
  margin: 0;
  font-size: 12px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .yeprun-cumulative-report-body-gauge {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #ffffff 0 58%, transparent 59%),
    conic-gradient(var(--mr-gauge-color) 0 var(--mr-gauge-percent), var(--mr-gauge-bg) var(--mr-gauge-percent) 100%);
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .yeprun-cumulative-report-body-gauge span {
  color: #181a1a;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-badge {
  font-size: 13px;
  line-height: 18px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-divider {
  margin: 32px 0;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-filter-group {
  margin-bottom: 14px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-filter-btn {
  height: 36px;
  padding: 0 18px;
  font-size: 13px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-action-bar {
  margin-bottom: 12px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-action-link {
  font-size: 13px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-history-list {
  gap: 12px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-history-item {
  border-width: 1.5px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-history-content {
  min-height: 72px;
  padding: 14px 14px 14px 52px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-checkbox:checked::after {
  width: 12px;
  height: 7px;
  background: none;
  border-left: 2px solid #12c46b;
  border-bottom: 2px solid #12c46b;
  transform: translate(-50%, -60%) rotate(-45deg);
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-history-date {
  margin: 0 0 3px;
  font-size: 12px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-history-type {
  font-size: 14px;
  line-height: 20px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-history-result {
  display: flex;
  flex: 0 0 56px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-history-value {
  margin: 0 0 2px;
  font-size: 18px;
  line-height: 24px;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-history-status {
  display: block;
  min-width: 28px;
  text-align: center;
}

.yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-modal-overlay {
  z-index: 1200;
}

@media (max-width: 374px) {
  .yeprun-cumulative-report-page .yeprun-cumulative-report-body {
    padding-right: 20px;
    padding-left: 20px;
  }

  .yeprun-cumulative-report-page .yeprun-cumulative-report-body .mr-measurement-grid {
    gap: 10px;
  }

  .yeprun-cumulative-report-page .yeprun-cumulative-report-body .yeprun-cumulative-report-body-gauge {
    width: 88px;
    height: 88px;
  }
}

/* Walking analysis detail page */
.yeprun-walking-analysis-page {
  background: #ffffff;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  background: #ffffff;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-header-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin: 0;
  color: #181a1a;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-header-calendar {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 44px;
  height: 44px;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-header-calendar img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-back {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-back img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-scroll {
  min-height: calc(100dvh - 56px);
  padding: 12px 20px calc(28px + env(safe-area-inset-bottom));
  background: #ffffff;
}

.yeprun-walking-analysis-page .yeprun-cumulative-report-walking > .yeprun-cumulative-report-profile-card {
  margin: 0 0 22px;
  padding: 14px 16px;
}

.yeprun-walking-analysis-page .yeprun-cumulative-report-walking .yeprun-cumulative-report-walking-hero {
  gap: 14px;
}

.yeprun-walking-analysis-page .yeprun-cumulative-report-walking .score-title {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 26px;
}

.yeprun-walking-analysis-page .yeprun-cumulative-report-walking .score-val-wrap {
  margin-bottom: 14px;
}

.yeprun-walking-analysis-page .yeprun-cumulative-report-walking .score-value {
  font-size: 26px;
  line-height: 34px;
}

.yeprun-walking-analysis-page .yeprun-cumulative-report-walking .score-desc {
  padding-top: 14px;
  font-size: 14px;
  line-height: 23px;
}

.yeprun-walking-analysis-page .yeprun-cumulative-report-walking .score-desc strong {
  font-size: 15.5px;
}

.yeprun-walking-analysis-page .yeprun-cumulative-report-walking .char-box {
  width: 140px;
  min-height: 176px;
}

.yeprun-walking-analysis-page .yeprun-cumulative-report-walking .char-img {
  height: auto;
}

.yeprun-walking-analysis-page .detail-container .section {
  padding-right: 0;
  padding-left: 0;
}

.yeprun-walking-analysis-page .detail-container .section:last-child {
  margin-bottom: 0;
}

.yeprun-walking-analysis-page .detail-container .recommend-list {
  margin: 0;
  list-style: none;
}

.yeprun-walking-analysis-page .detail-container .radar-chart {
  display: block;
  width: min(320px, 100%);
  height: auto;
  margin: 0 auto;
}

.yeprun-walking-analysis-page .detail-container .analysis-card {
  width: 100%;
  text-align: left;
  appearance: none;
}

.yeprun-walking-analysis-page .detail-container .sub-desc {
  display: block;
  margin-bottom: 18px;
}

.yeprun-walking-analysis-page .detail-container .analysis-card .ac-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.yeprun-walking-analysis-page .detail-container .analysis-card .ac-head > span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  line-height: 1;
}

.yeprun-walking-analysis-page .detail-container .analysis-card .ac-head > span img {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  object-fit: contain;
}

.yeprun-walking-analysis-page .detail-container .analysis-card .yeprun-walking-analysis-arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-overlay {
  max-width: 420px;
  margin: 0 auto;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet {
  max-width: 420px;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet .sheet-content {
  padding: 25px 20px calc(25px + env(safe-area-inset-bottom));
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet .sheet-title {
  margin: 0 0 18px;
  padding: 0;
  color: #191919;
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.408px;
  text-align: left;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet .ia-body h4 {
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #181a1a;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet .ia-body p {
  margin: 0 0 10px;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet .ia-body ul {
  margin: 0;
  padding-left: 18px;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet .info-accordion {
  padding: 18px 20px 16px;
  border-radius: 12px;
  background: #f7f7f7;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet .ia-head {
  margin: 0 0 10px;
  color: #181a1a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet .ia-body {
  color: #4b5563;
  font-size: 15px;
  line-height: 1.72;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet .yeprun-walking-analysis-metric-extra[hidden] {
  display: none;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet .ia-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid #e7e9ec;
  background: transparent;
  color: #6b7280;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet .ia-more span {
  display: inline-flex;
  margin-left: 8px;
  color: #6b7280;
  font-size: 22px;
  line-height: 1;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet .ia-more[hidden] {
  display: none;
}

/* ===== YEPRUN subscription pages ===== */
.yeprun-subscription-page {
  --subscription-green: #12c46b;
  --subscription-orange: #f47a12;
  --subscription-text: #181a1a;
  --subscription-muted: #7b8794;
  --subscription-line: #eef0f2;
  --subscription-gutter: 24px;
  background: #ffffff;
  color: var(--subscription-text);
  padding: 30px var(--subscription-gutter) calc(var(--yeprun-app-bottom-tab-height) + var(--yeprun-app-safe-area-bottom) + 36px);
  box-sizing: border-box;
}

.yeprun-subscription-plan-frame {
  background: #ffffff;
}

.yeprun-subscription-plan-frame .yeprun-subscription-plan-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  height: 50px;
  padding: 7px 18px 7px 24px;
  background: #ffffff;
  flex: none;
}

.yeprun-subscription-plan-frame .yeprun-subscription-plan-back {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.yeprun-subscription-plan-frame .yeprun-subscription-plan-back span {
  position: absolute;
  left: 17px;
  top: 14px;
  width: 14px;
  height: 14px;
  border-left: 3px solid #181a1a;
  border-bottom: 3px solid #181a1a;
  transform: rotate(45deg);
}

.yeprun-subscription-plan-frame .yeprun-subscription-plan-header h1 {
  margin: 0;
  color: #181a1a;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: -0.408px;
  text-align: center;
}

.yeprun-subscription-plan-frame .yeprun-subscription-plan-header-spacer {
  width: 44px;
  height: 44px;
}

.yeprun-subscription-page * {
  box-sizing: border-box;
}

.yeprun-subscription-flow-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 24px;
  background: #ffffff;
  flex: none;
}

.yeprun-subscription-flow-header h1 {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  color: #181a1a;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.yeprun-subscription-flow-header button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #191f28;
  font-size: 18px;
  background: transparent;
}

.yeprun-subscription-current-card,
.yeprun-subscription-light-card,
.yeprun-subscription-benefit-box,
.yeprun-subscription-option-list,
.yeprun-subscription-link-list {
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 8px rgba(25, 31, 40, 0.08);
}

.yeprun-subscription-current-card {
  padding: 24px 20px 20px;
  border: 1px solid #edf0f3;
}

.yeprun-subscription-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #f7eaff;
  color: #a234c7;
  font-size: 13px;
  font-weight: 700;
}

.yeprun-subscription-current-card h2 {
  margin: 18px 0 8px;
  color: #101418;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
}

.yeprun-subscription-current-card p,
.yeprun-subscription-current-card h3 {
  margin: 0;
  color: #5c6875;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}

.yeprun-subscription-current-card hr,
.yeprun-subscription-light-card hr {
  width: 100%;
  height: 1px;
  margin: 22px 0;
  border: 0;
  background: #edf0f3;
}

.yeprun-subscription-current-card h3 {
  color: #181a1a;
  font-size: 17px;
  font-weight: 700;
}

.yeprun-subscription-check-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 14px 0 22px;
  padding: 0;
  list-style: none;
}

.yeprun-subscription-check-list li {
  position: relative;
  padding-left: 22px;
  color: #2b3138;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.yeprun-subscription-check-list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.48em;
  width: 10px;
  height: 6px;
  border-left: 2px solid #a234c7;
  border-bottom: 2px solid #a234c7;
  transform: rotate(-45deg);
}

.yeprun-subscription-dark-button,
.yeprun-subscription-green-button,
.yeprun-subscription-light-card button {
  width: 100%;
  min-height: 52px;
  border-radius: 8px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.yeprun-subscription-dark-button {
  background: #111111;
}

.yeprun-subscription-green-button {
  background: var(--subscription-green);
}

.yeprun-subscription-section {
  margin-top: 30px;
}

.yeprun-subscription-section h2,
.yeprun-subscription-missed-section h2,
.yeprun-subscription-option-section h2 {
  margin: 0 0 14px;
  color: #181a1a;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
}

.yeprun-subscription-reward-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.yeprun-subscription-reward-card {
  min-width: 0;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px 12px;
  border: 1px solid #048943;
  border-radius: 10px;
  background: #ffffff;
}

.yeprun-subscription-reward-card.is-achieved {
  background: #f7fffb;
}

.yeprun-subscription-reward-card span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border: 1px solid #048943;
  border-radius: 999px;
  background: #f9fef7;
  color: #048943;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.yeprun-subscription-reward-card img {
  width: 58px;
  height: 54px;
  margin: 10px 0 6px;
  object-fit: contain;
}

.yeprun-subscription-reward-card strong {
  min-height: 34px;
  color: #20252b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  word-break: keep-all;
}

.yeprun-subscription-reward-card p {
  margin: 7px 0 6px;
  color: #5c6875;
  font-size: 11px;
  font-weight: 600;
}

.yeprun-subscription-progress {
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ebee;
}

.yeprun-subscription-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--subscription-green);
}

.yeprun-subscription-reward-card em {
  margin-top: 6px;
  color: var(--subscription-green);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.yeprun-subscription-link-list {
  margin-top: 26px;
  margin-bottom: 36px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.yeprun-subscription-link-list button {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  color: #20252b;
  font-size: 15px;
  font-weight: 600;
  background: #ffffff;
}

.yeprun-subscription-link-list button + button {
  border-top: 0;
}

.yeprun-subscription-link-list i {
  color: #a4adb8;
}

.yeprun-subscription-cancel-notice-page,
.yeprun-subscription-retention-page {
  padding-top: 20px;
  padding-bottom: calc(128px + var(--yeprun-app-safe-area-bottom));
}

.yeprun-subscription-retention-hero {
  position: relative;
  min-height: 143px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 14px;
  border: 1px solid #bfefd2;
  border-radius: 14px;
  background: linear-gradient(116deg, #f6fff9 0%, #eefbf3 100%);
}

.yeprun-subscription-retention-hero img {
  position: absolute;
  right: 8px;
  bottom: 4px;
  width: 144px;
  height: 144px;
  object-fit: contain;
  z-index: 1;
}

.yeprun-subscription-cancel-notice-page .yeprun-subscription-retention-hero img {
  position: absolute;
  right: 8px;
  bottom: -4px;
  width: 144px;
  height: 144px;
  object-fit: contain;
  z-index: 1;
}

.yeprun-subscription-retention-hero.is-cheer img {
  width: 156px;
  height: 156px;
}

.yeprun-subscription-retention-page .yeprun-subscription-retention-hero.is-cheer img {
  right: 8px;
  bottom: 6px;
  width: 106px;
  height: 132px;
}

.yeprun-subscription-retention-copy {
  position: relative;
  z-index: 2;
  max-width: 182px;
}

.yeprun-subscription-retention-copy > span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 10px;
  border: 1px solid #048943;
  border-radius: 999px;
  color: #048943;
  font-size: 12px;
  font-weight: 700;
  background: #ffffff;
}

.yeprun-subscription-retention-copy strong {
  display: block;
  margin-top: 14px;
  color: #181a1a;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.4px;
}

.yeprun-subscription-cancel-notice-page .yeprun-subscription-retention-copy strong {
  margin-top: 16px;
  color: #181a1a;
  font-size: 18px;
  line-height: 1.36;
}

.yeprun-subscription-cancel-notice-page .yeprun-subscription-retention-copy strong .is-green {
  display: inline;
  color: #048943;
  font-size: 18px;
  font-weight: 800;
}

.yeprun-subscription-retention-page .yeprun-subscription-retention-copy strong {
  color: #0d8647;
  font-size: 26px;
}

.yeprun-subscription-retention-copy p {
  margin: 12px 0 0;
  color: #53606c;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

.yeprun-subscription-retention-copy b {
  color: #181a1a;
  font-weight: 500;
}

.yeprun-subscription-retention-copy small {
  display: block;
  margin-top: 8px;
  color: #53606c;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.yeprun-subscription-retention-page .yeprun-subscription-retention-copy small {
  font-size: 13px;
  width: 205px;
}

.yeprun-subscription-retention-page .yeprun-subscription-retention-copy small span {
  color: #048943;
  font-weight: 700;
}

.yeprun-subscription-missed-section {
  margin-top: 26px;
}

.yeprun-subscription-missed-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 85px;
  padding: 12px 8px;
  gap: 10px;
  border: 0.8px solid #10b861;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 1px -1px rgba(12, 12, 13, 0.08);
}

.yeprun-subscription-missed-card > div {
  width: 100%;
}

.yeprun-subscription-next-reward {
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.yeprun-subscription-next-reward-media {
  flex: 0 0 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

.yeprun-subscription-next-reward-media img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: 16px;
  background: #f7fbf8;
}

.yeprun-subscription-next-reward > div:not(.yeprun-subscription-next-reward-media) {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.yeprun-subscription-next-reward strong {
  display: block;
  color: #181a1a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  word-break: keep-all;
}

.yeprun-subscription-next-reward p {
  margin: 0 0 10px;
  color: #697581;
  font-size: 14px;
  font-weight: 600;
}

.yeprun-subscription-next-reward p b {
  color: #3a434d;
  font-size: 14px;
  font-weight: 700;
}

.yeprun-subscription-next-reward p em {
  color: #10bb61;
  font-size: 15px;
  font-style: normal;
  font-weight: 800;
}

.yeprun-subscription-next-reward span {
  display: block;
  margin-top: 7px;
  color: #88939f;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.yeprun-subscription-next-reward span b {
  color: #10bb61;
  font-size: 15px;
  font-weight: 800;
}

.yeprun-subscription-next-reward span small {
  color: #7b8794;
  font-size: 12px;
  font-weight: 600;
}


.yeprun-subscription-option-section {
  margin-top: 28px;
}

.yeprun-subscription-option-list {
  overflow: hidden;
  border: 1px solid #edf0f3;
  box-shadow: none;
}

.yeprun-subscription-option-card {
  position: relative;
  width: 100%;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 14px 44px 14px 18px;
  background: #ffffff;
  text-align: left;
}

.yeprun-subscription-cancel-notice-page .yeprun-subscription-option-card {
  display: grid;
  grid-template-columns: 50px 38px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  min-height: 62px;
  padding: 14px 44px 14px 14px;
  border: 0.8px solid #b7e7ca;
  border-radius: 8px;
  box-shadow: 0 1px 1px -1px rgba(12, 12, 13, 0.08);
}

.yeprun-subscription-cancel-notice-page .yeprun-subscription-option-card > img {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.yeprun-subscription-option-card + .yeprun-subscription-option-card {
  border-top: 1px solid #edf0f3;
}

.yeprun-subscription-cancel-notice-page .yeprun-subscription-option-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
  border: 0;
  background: transparent;
}

.yeprun-subscription-cancel-notice-page .yeprun-subscription-option-card + .yeprun-subscription-option-card {
  border-top: 0.8px solid #b7e7ca;
}

.yeprun-subscription-option-card > span {
  color: var(--subscription-green);
  font-size: 12px;
  font-weight: 800;
}

.yeprun-subscription-cancel-notice-page .yeprun-subscription-option-card > span,
.yeprun-subscription-cancel-notice-page .yeprun-subscription-option-card strong,
.yeprun-subscription-cancel-notice-page .yeprun-subscription-option-card small {
  grid-column: 3;
}

.yeprun-subscription-cancel-notice-page .yeprun-subscription-option-card > span {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: start;
  box-sizing: border-box;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 53px;
  height: 20px;
  padding: 4px 12px;
  gap: 2px;
  border: 0.2px solid #048943;
  border-radius: 50px;
  background: #f9fef7;
  color: #048943;
  font-size: 11px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.yeprun-subscription-option-card strong {
  margin-top: 3px;
  color: #181a1a;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

.yeprun-subscription-option-card em {
  margin-left: 4px;
  color: var(--subscription-green);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.yeprun-subscription-option-card small {
  margin-top: 3px;
  color: #7b8794;
  font-size: 13px;
  font-weight: 500;
}

.yeprun-subscription-cancel-notice-page .yeprun-subscription-option-card small {
  font-size: 11px;
}

.yeprun-subscription-inline-retention-button {
  margin-top: 18px;
}

.yeprun-subscription-option-card i {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #a4adb8;
}

.yeprun-subscription-benefit-box {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #d7f4e4;
  box-shadow: none;
}

.yeprun-subscription-benefit-box.is-keep {
  background: #f1fff7;
}

.yeprun-subscription-benefit-box.is-lost {
  border-color: #ffe1e1;
  background: #fff7f7;
}

.yeprun-subscription-benefit-box h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: #181a1a;
  font-size: 17px;
  font-weight: 800;
}

.yeprun-subscription-benefit-box h2 img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.yeprun-subscription-benefit-box ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border-radius: 10px;
  background: #ffffff;
  list-style: none;
}

.yeprun-subscription-benefit-box li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #3a434d;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.yeprun-subscription-benefit-box li img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.yeprun-subscription-note {
  margin: 18px 0 0;
  color: #89949f;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.yeprun-subscription-fixed-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 22;
  padding: 12px 24px calc(20px + var(--yeprun-app-safe-area-bottom));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), #ffffff 24%);
}

.yeprun-subscription-text-button,
.yeprun-subscription-final-cancel-button {
  display: block;
  width: max-content;
  margin: 15px auto 0;
  color: #777f88;
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  background: transparent;
}

.yeprun-subscription-flow-spacer {
  height: 36px;
}

.yeprun-subscription-cancel-notice-page .yeprun-subscription-flow-spacer {
  height: 0;
}

.yeprun-subscription-retention-page .yeprun-subscription-flow-spacer {
  height: 0;
}

.yeprun-subscription-cancel-page {
  background: #f6f7f8;
  padding-top: 30px;
}

.yeprun-subscription-cancel-hero {
  padding: 30px 0 10px;
  text-align: center;
}

.yeprun-subscription-cancel-hero h2 {
  margin: 0 auto 28px;
  color: #181a1a;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.3px;
}

.yeprun-subscription-cancel-hero img {
  width: 168px;
  height: 188px;
  object-fit: contain;
}

.yeprun-subscription-light-card {
  margin-top: 18px;
  padding: 20px 18px 22px;
  text-align: center;
  border: 1px solid #edf0f3;
}

.yeprun-subscription-light-card > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--subscription-orange);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

.yeprun-subscription-light-card > strong {
  display: block;
  margin-top: 18px;
  color: var(--subscription-orange);
  font-size: 17px;
  font-weight: 800;
}

.yeprun-subscription-light-card p {
  margin: 14px 0 0;
  color: #181a1a;
  font-size: 18px;
  font-weight: 600;
}

.yeprun-subscription-light-card p b {
  font-size: 32px;
  font-weight: 900;
}

.yeprun-subscription-light-card .yeprun-subscription-check-list {
  align-items: flex-start;
  margin-bottom: 20px;
  text-align: left;
}

.yeprun-subscription-light-card .yeprun-subscription-check-list li::before {
  border-color: var(--subscription-orange);
}

.yeprun-subscription-light-card button {
  background: var(--subscription-orange);
}

.yeprun-subscription-cancel-page .yeprun-subscription-option-section {
  margin-top: 34px;
}

.yeprun-subscription-cancel-page .yeprun-subscription-option-list {
  background: #ffffff;
}

.yeprun-subscription-cancel-page .yeprun-subscription-final-cancel-button {
  margin-top: 28px;
  margin-bottom: 50px;
}

@media (max-width: 374px) {
  .yeprun-subscription-page {
    --subscription-gutter: 18px;
  }

  .yeprun-subscription-reward-grid {
    gap: 7px;
  }

  .yeprun-subscription-reward-card {
    min-height: 168px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .yeprun-subscription-reward-card img {
    width: 50px;
  }

  .yeprun-subscription-reward-card strong {
    font-size: 12px;
  }

  .yeprun-subscription-cancel-notice-page .yeprun-subscription-retention-hero,
  .yeprun-subscription-retention-page .yeprun-subscription-retention-hero {
    min-height: 144px;
    padding: 14px;
  }

  .yeprun-subscription-cancel-notice-page .yeprun-subscription-retention-copy,
  .yeprun-subscription-retention-page .yeprun-subscription-retention-copy {
    max-width: 166px;
  }

  .yeprun-subscription-cancel-notice-page .yeprun-subscription-retention-copy strong {
    font-size: 22px;
  }

  .yeprun-subscription-retention-page .yeprun-subscription-retention-copy strong {
    font-size: 26px;
  }

  .yeprun-subscription-cancel-notice-page .yeprun-subscription-retention-hero img {
    right: 1px;
    bottom: 8px;
    width: 128px;
    height: 128px;
  }

  .yeprun-subscription-retention-page .yeprun-subscription-retention-hero.is-cheer img {
    right: 6px;
    bottom: 6px;
    width: 96px;
    height: 120px;
  }

  .yeprun-subscription-retention-page .yeprun-subscription-retention-copy small {
    font-size: 12px;
    width: 190px;
    line-height: 1.42;
  }
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet .dsc-btn {
  white-space: normal;
  color: #4998d3;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet .dsc-btn.is-up {
  color: #4998d3;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet .dsc-btn.is-down {
  color: #e04a23;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet .detail-chart-box {
  padding: 20px;
  margin-bottom: 30px;
  border: 1px solid #eeeeee;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet .dcb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  color: #181a1a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.yeprun-walking-analysis-page .yeprun-walking-analysis-sheet .chart-mock {
  display: block;
  width: 100%;
  height: 150px;
  max-width: none;
  margin: 6px auto 0;
  border-radius: 8px;
  background: #ffffff;
}

.yeprun-walking-analysis-page .mj-primary.yeprun-walking-analysis-exhome,
.yeprun-walking-analysis-page .mj-done__btn.yeprun-walking-analysis-exhome,
.yeprun-walking-analysis-page .yeprun-walking-analysis-exhome {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  left: auto;
  bottom: auto;
  top: auto;
  z-index: auto;
  width: 100%;
  max-width: none;
  height: 56px;
  margin: 24px 0 0;
  transform: none;
}

.yeprun-run-result-page .yeprun-run-result-metric-overlay {
  position: fixed;
  inset: 0;
  max-width: 420px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.58);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.yeprun-run-result-page .yeprun-run-result-metric-overlay.active {
  opacity: 1;
  visibility: visible;
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 420px;
  max-height: 90vh;
  margin: 0 auto;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  background: #ffffff;
  z-index: 1001;
  transform: translateY(100%);
  transition: transform 0.26s ease;
  padding-bottom: env(safe-area-inset-bottom);
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet.active {
  transform: translateY(0);
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .sheet-content {
  padding: 25px 20px calc(25px + env(safe-area-inset-bottom));
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .sheet-title {
  margin: 10px 0 30px;
  padding: 0;
  color: #191919;
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.408px;
  text-align: left;
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .detail-score-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #eeeeee;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .dsc-left {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  gap: 15px;
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .donut-chart {
  flex: 0 0 auto;
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .dsc-left .dsc-val {
  color: #181a1a;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .dsc-btn {
  flex: 0 0 auto;
  min-width: 104px;
  max-width: none;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: #f5f5f5;
  color: #666666;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .dsc-btn.is-up {
  color: #4998d3;
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .dsc-btn.is-down {
  color: #e04a23;
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .info-accordion {
  margin-bottom: 30px;
  padding: 18px 20px 16px;
  border-radius: 12px;
  background: #f7f7f7;
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .ia-head {
  margin: 0 0 10px;
  color: #181a1a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .ia-body {
  color: #4b5563;
  font-size: 15px;
  line-height: 1.72;
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .ia-body h4 {
  margin: 14px 0 6px;
  color: #181a1a;
  font-size: 14px;
  font-weight: 700;
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .ia-body p {
  margin: 0 0 10px;
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .ia-body ul {
  margin: 0;
  padding-left: 18px;
}

.yeprun-run-result-page .yeprun-run-result-metric-extra[hidden] {
  display: none;
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .ia-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid #e7e9ec;
  background: transparent;
  color: #6b7280;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .detail-chart-box {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #eeeeee;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .dcb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  color: #181a1a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .chart-mock {
  display: block;
  width: 100%;
  height: 150px;
  max-width: none;
  margin: 6px auto 0;
  border-radius: 8px;
  background: #ffffff;
}

.yeprun-run-result-page .yeprun-run-result-metric-sheet .confirm-btn {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 8px;
  background: #22c46b;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}

@media (max-width: 360px) {
  .yeprun-run-result-page .yeprun-run-result-metric-sheet .detail-score-card {
    padding: 16px;
  }

  .yeprun-run-result-page .yeprun-run-result-metric-sheet .dsc-left .dsc-val {
    font-size: 26px;
  }

  .yeprun-run-result-page .yeprun-run-result-metric-sheet .dsc-btn {
    min-width: 96px;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 11px;
  }
}