#count .section__inner { display: flex; flex-direction: column; align-items: center; gap: calc(48px * var(--spc)); padding: 0; }
#count .count-head { display: flex; flex-direction: column; align-items: center; gap: calc(18px * var(--spc)); }
#count .hero-title, #count .hero-desc { margin-bottom: 0; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .15); }
#count .hero-title { font-size: calc(48px * var(--spc)); line-height: calc(58px * var(--spc)); }
#count .count-body { display: flex; flex-direction: column; align-items: center; gap: calc(20px * var(--spc)); }
#count .count-total { width: calc(710px * var(--spc)); padding: calc(20px * var(--spc)) 0; border-radius: calc(999px * var(--spc)); background: rgba(4, 4, 4, .7); text-align: center; white-space: nowrap; text-shadow: 0 4px 4px rgba(0, 0, 0, .3), 0 8px 12px rgba(0, 0, 0, .15); }
#count .count-total__label { font-family: var(--font-body); font-size: calc(30px * var(--spc)); font-weight: 400; line-height: normal; color: #FFFFFF; }
#count .count-total__num { font-family: var(--font-title); font-size: calc(32px * var(--spc)); font-weight: 400; line-height: 1.2; letter-spacing: 0.05em; color: #FF3A44; font-variant-numeric: tabular-nums; }
#count .count-gauge { width: calc(1310px * var(--spc)); height: calc(36px * var(--spc)); padding: calc(4px * var(--spc)); border-radius: calc(999px * var(--spc)); background: #FFFFFF; overflow: hidden; }
#count .count-gauge__fill { display: block; width: 0; height: calc(28px * var(--spc)); border-radius: calc(999px * var(--spc)); background: linear-gradient(90deg, #158BF8 0%, #00DFFF 100%); transition: width 1200ms cubic-bezier(.22, 1, .36, 1); }
#count .count-gift { display: flex; flex-direction: column; align-items: center; gap: calc(16px * var(--spc)); }
#count .count-list { display: flex; justify-content: center; gap: calc(20px * var(--spc)); width: calc(1130px * var(--spc)); }
#count .count-card { position: relative; flex: none; width: calc(210px * var(--spc)); height: calc(380px * var(--spc)); }
#count .count-card__pill { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: calc(104px * var(--spc)); height: calc(42px * var(--spc)); padding: calc(10px * var(--spc)) calc(24px * var(--spc)); border-radius: calc(999px * var(--spc)); background: #FFFFFF; font-family: var(--font-title); font-size: calc(20px * var(--spc)); font-weight: 400; line-height: 1; letter-spacing: 0.02em; color: #1A1F38; white-space: nowrap; }
#count .count-card__line { position: absolute; top: calc(40px * var(--spc)); left: 50%; transform: translateX(-50%); width: calc(1px * var(--spc)); height: calc(32px * var(--spc)); background: #FFFFFF; }
#count .count-card__box { position: absolute; left: 0; top: calc(72px * var(--spc)); width: calc(210px * var(--spc)); height: calc(308px * var(--spc)); border-radius: calc(12px * var(--spc)); background: #FFFFFF; box-shadow: 0 16px 32px -8px rgba(12, 12, 13, .4); overflow: hidden; }
#count .count-card__thumb { position: absolute; left: calc(10px * var(--spc)); top: calc(10px * var(--spc)); width: calc(190px * var(--spc)); height: calc(190px * var(--spc)); border-radius: calc(10px * var(--spc)); border: 1px solid #A8D5FF; box-sizing: border-box; background: #D0E8FE; overflow: hidden; }
#count .count-card__thumb img { position: absolute; left: calc(29px * var(--spc)); top: calc(29.17px * var(--spc)); width: calc(130px * var(--spc)); height: calc(130px * var(--spc)); object-fit: contain; }
#count .count-card__done { position: absolute; left: calc(10px * var(--spc)); top: calc(10px * var(--spc)); display: flex; flex-direction: column; align-items: center; gap: calc(2px * var(--spc)); width: calc(190px * var(--spc)); height: calc(190px * var(--spc)); padding-top: calc(58px * var(--spc)); border-radius: calc(10px * var(--spc)); background: #1BABFF; opacity: 0; transition: opacity 320ms ease; }
#count .count-card__check { width: calc(32px * var(--spc)); height: calc(32px * var(--spc)); }
#count .count-card__done-txt { font-family: var(--font-title); font-size: calc(24px * var(--spc)); font-weight: 400; line-height: 1.2; color: #FFFFFF; }
#count .count-card.is-done .count-card__done { opacity: .9; }
#count .count-card.is-done .count-card__pill { color: #929AAA; }
#count .count-card__text { position: absolute; left: calc(10px * var(--spc)); top: calc(221px * var(--spc)); display: flex; flex-direction: column; align-items: center; gap: calc(7px * var(--spc)); width: calc(190px * var(--spc)); text-align: center; color: #1A1F38; }
#count .count-card__name { font-family: var(--font-body); font-size: calc(16px * var(--spc)); font-weight: 400; line-height: 1.5; }
#count .count-card__qty { font-family: var(--font-title); font-size: calc(24px * var(--spc)); font-weight: 400; line-height: 1.2; }
#count .count-progress { display: contents; }
#count .count-notice--top { display: none; }
#count .count-notice { width: calc(1130px * var(--spc)); font-family: var(--font-body); font-size: calc(14px * var(--spc)); font-weight: 700; line-height: 1.4; color: #FFFFFF; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  #count .count-gauge__fill, #count .count-card__done { transition: none; }
}