#invite .hero-title { line-height: normal; margin-bottom: calc(18px * var(--spc)); text-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .15); }
#invite .hero-desc { margin-bottom: calc(18px * var(--spc)); text-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .15); }
#invite .period-pill { margin-bottom: calc(48px * var(--spc)); }
#invite .card--invite { box-sizing: border-box; display: flex; align-items: center; gap: calc(20px * var(--spc)); width: calc(1130px * var(--spc)); padding: calc(20px * var(--spc)); margin: 0 auto; background: var(--ds-white); border-radius: calc(20px * var(--spc)); box-shadow: var(--ds-shadow-600); }
#invite .invite-panel { box-sizing: border-box; flex: none; display: flex; flex-direction: column; align-items: center; gap: calc(63px * var(--spc)); width: calc(557px * var(--spc)); height: calc(575px * var(--spc)); padding: calc(52px * var(--spc)) 0; background: #D0E8FE; border-radius: calc(12px * var(--spc)); overflow: hidden; text-align: center; }
#invite .invite-panel__head { display: flex; flex-direction: column; align-items: center; gap: calc(20px * var(--spc)); width: 100%; }
#invite .invite-panel__text { width: 100%; }
#invite .invite-panel__title { font-family: var(--font-title); font-weight: 400; font-size: calc(32px * var(--spc)); line-height: 1.6; letter-spacing: normal; color: var(--ds-navy-secondary); margin: 0; }
#invite .invite-panel__desc { font-family: var(--font-body); font-weight: 400; font-size: calc(18px * var(--spc)); line-height: 1.6; color: var(--ds-navy-secondary); margin: 0; }
#invite .invite-cta { position: relative; display: inline-block; }
#invite .invite-tooltip { position: absolute; left: 50%; top: calc(100% + 6px * var(--spc)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; opacity: 0; visibility: hidden; transition: opacity .2s ease; pointer-events: none; z-index: 3; }
#invite .invite-cta:hover .invite-tooltip { opacity: 1; visibility: visible; }
#invite .invite-cta .btn:focus-visible + .invite-tooltip { opacity: 1; visibility: visible; }
#invite .invite-cta.is-tooltip-muted .btn:focus-visible + .invite-tooltip { opacity: 0; visibility: hidden; }
#invite .invite-tooltip__arrow { width: calc(62px * var(--spc)); height: calc(9px * var(--spc)); margin-bottom: calc(-3px * var(--spc)); background: url('../assets/images/invite/pc/tooltip_arrow.svg') center / contain no-repeat; }
#invite .invite-tooltip__box { max-width: calc(360px * var(--spc)); padding: calc(4px * var(--spc)) calc(12px * var(--spc)); border-radius: calc(4px * var(--spc)); background: #fff; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .3); font-family: var(--font-body); font-size: calc(12px * var(--spc)); line-height: 1.6; color: var(--ds-navy-primary); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  #invite .invite-tooltip { transition: none; }
}
#invite.is-joined .invite-tooltip { display: none; }
#invite .invite-milestones { display: flex; gap: calc(10px * var(--spc)); margin: 0; padding: 0; list-style: none; }
#invite .invite-milestone { position: relative; flex: none; width: calc(160px * var(--spc)); height: calc(217px * var(--spc)); background: #fff; border-radius: calc(12px * var(--spc)); overflow: hidden; }
#invite .invite-milestone__badge { position: absolute; left: calc(11px * var(--spc)); top: 0; width: calc(61px * var(--spc)); height: calc(56px * var(--spc)); background: url('../assets/images/invite/pc/badge_milestone.svg') center / 100% 100% no-repeat; text-align: center; }
#invite .invite-milestone__badge b, #invite .invite-milestone__badge span { position: absolute; left: 0; width: 100%; }
#invite .invite-milestone__badge b { display: block; top: calc(5.75px * var(--spc)); font-family: var(--font-title); font-weight: 400; font-size: calc(16px * var(--spc)); line-height: 1.2; color: #FFE000; }
#invite .invite-milestone__badge span { display: block; top: calc(23.31px * var(--spc)); font-family: var(--font-body); font-size: calc(12px * var(--spc)); line-height: 1.6; color: #fff; }
#invite .invite-milestone__icons { position: absolute; left: 50%; transform: translateX(-50%); top: calc(56px * var(--spc)); width: calc(120px * var(--spc)); height: calc(91px * var(--spc)); }
#invite .invite-milestone__icon { position: absolute; width: calc(88px * var(--spc)); height: calc(88px * var(--spc)); object-fit: contain; }
#invite .invite-milestone__icon--a { left: 0; top: calc(3px * var(--spc)); }
#invite .invite-milestone__icon--b { left: calc(32px * var(--spc)); top: 0; }
#invite .invite-milestone__reward { position: absolute; left: 50%; top: calc(160px * var(--spc)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-family: var(--font-body); font-size: calc(12px * var(--spc)); line-height: 1.6; color: #000; white-space: nowrap; }
#invite .invite-milestone__reward b { font-family: var(--font-body); font-weight: 700; line-height: 1.2; color: #158BF8; }
#invite .invite-aside { box-sizing: border-box; flex: none; width: calc(513px * var(--spc)); }
#invite .invite-aside--illust { height: calc(575px * var(--spc)); border-radius: calc(12px * var(--spc)); overflow: hidden; }
#invite .invite-aside--illust img { display: block; width: 100%; height: 100%; object-fit: cover; }
#invite .invite-aside--my { display: flex; flex-direction: column; gap: calc(20px * var(--spc)); padding-right: calc(10px * var(--spc)); text-align: left; position: relative; align-self: flex-end; }
#invite .invite-link { flex: none; display: flex; flex-direction: column; gap: calc(12px * var(--spc)); }
#invite .invite-link__label { display: list-item; list-style: disc; margin: 0 0 0 calc(30px * var(--spc)); font-family: var(--font-title); font-weight: 400; font-size: calc(20px * var(--spc)); line-height: normal; color: var(--ds-navy-secondary); }
#invite .invite-link__box { box-sizing: border-box; display: flex; align-items: center; height: calc(64px * var(--spc)); padding: 0 calc(16px * var(--spc)); border: calc(3px * var(--spc)) solid var(--ds-navy-secondary); border-radius: calc(10px * var(--spc)); }
#invite .invite-link__url { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; user-select: all; font-family: var(--font-body); font-size: calc(16px * var(--spc)); line-height: 1.8; color: var(--ds-navy-primary); }
#invite .invite-link__actions { display: flex; gap: calc(10px * var(--spc)); }
#invite .invite-link__btn { flex: 1 0 0; box-sizing: border-box; height: calc(52px * var(--spc)); padding: calc(12px * var(--spc)) calc(16px * var(--spc)); border-radius: calc(8px * var(--spc)); font-family: var(--font-title); font-weight: 400; font-size: calc(16px * var(--spc)); line-height: normal; color: var(--ds-white); }
#invite .invite-link__btn--copy { background: var(--ds-blue-primary); }
#invite .invite-link__btn--kakao { background: var(--ds-blue-secondary); }
#invite .invite-status { position: relative; flex: none; height: calc(192px * var(--spc)); background: #D0E8FE; border-radius: calc(12px * var(--spc)); overflow: hidden; }
#invite .invite-status__box { box-sizing: border-box; position: absolute; left: calc(16px * var(--spc)); top: calc(14.5px * var(--spc)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(20px * var(--spc)); width: calc(250px * var(--spc)); height: calc(162px * var(--spc)); padding: calc(10px * var(--spc)) calc(24px * var(--spc)); border: 1px solid #A8D5FF; border-radius: calc(12px * var(--spc)); background: var(--ds-white); }
#invite .invite-status__label { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: calc(20px * var(--spc)); line-height: normal; color: #344BA9; }
#invite .invite-status__count { align-self: center; width: calc(225px * var(--spc)); margin: 0; padding-top: calc(20px * var(--spc)); border-top: 1px solid #A8D5FF; text-align: center; font-family: var(--font-title); font-weight: 400; line-height: normal; color: #344BA9; }
#invite .invite-status__count b { font-weight: 400; font-size: calc(32px * var(--spc)); }
#invite .invite-status__count span { font-size: calc(24px * var(--spc)); }
#invite .invite-status__gift { position: absolute; left: calc(285px * var(--spc)); top: 0; width: calc(172px * var(--spc)); height: 100%; }
#invite .invite-status__reward { position: absolute; top: calc(20px * var(--spc)); width: calc(124px * var(--spc)); height: calc(124px * var(--spc)); object-fit: contain; }
#invite .invite-status__reward--a { left: 0; }
#invite .invite-status__reward--b { left: calc(48px * var(--spc)); }
#invite .invite-status__gift-text { position: absolute; left: 0; top: calc(148px * var(--spc)); width: 100%; margin: 0; text-align: center; font-family: var(--font-body); font-size: calc(12px * var(--spc)); line-height: 1.6; color: #242B51; }
#invite .invite-status__gift-text b { font-weight: 700; color: #158BF8; }
#invite .invite-status.is-empty .invite-status__reward { display: none; }
#invite .invite-status.is-empty .invite-status__gift { left: calc(266px * var(--spc)); width: calc(237px * var(--spc)); }
#invite .invite-status.is-empty .invite-status__gift-text { top: 50%; transform: translateY(-50%); text-align: center; font-size: calc(14px * var(--spc)); line-height: 1.6; color: #158BF8; }
#invite .invite-notice { flex: none; }
#invite .invite-notice__title { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: calc(14px * var(--spc)); line-height: 1.6; color: var(--ds-navy-secondary); }
#invite .invite-notice__list { margin: 0; padding-left: calc(22.5px * var(--spc)); list-style: disc; font-family: var(--font-body); font-size: calc(14px * var(--spc)); line-height: 1.4; color: var(--ds-navy-secondary); }

/* @invite-banner 배너(통이미지, 503x161) + 유의사항 여는 글자. 높이는 선언 안 함 — img/source의 width/height가 비율을 잡는다 */
#invite .invite-banner { flex: none; border-radius: calc(12px * var(--spc)); overflow: hidden; }
#invite .invite-banner img { width: 100%; height: auto; }
#invite .invite-notice-open { position: absolute; top: calc(4px * var(--spc)); right: calc(10px * var(--spc)); font-family: var(--font-body); font-weight: 700; font-size: calc(14px * var(--spc)); line-height: normal; color: var(--ds-navy-secondary); }
#invite .invite-notice-open:hover { text-decoration: underline; }
/* //@invite-banner */