@charset "utf-8";
.list_box li input[type=checkbox] + label,
.list_box li input[type=checkbox] + label::before,
.list_box li input[type=checkbox] + label span,
.list_box li input[type=checkbox] + label .coin { transition: all 0.3s ease; }

/** 섭취 기록 **/
.mypage_alarm { display: flex; flex-direction: column; }
.info_box { position: relative; }
.info_box h3 { width: calc(100% - 110px); font-size: var(--font-large); font-weight: 700; margin-bottom: 8px; }
.info_box h3 strong { color: var(--color-main); }
.info_box .date { font-weight: 500; line-height: 22px; margin-bottom: 16px; }
.info_box .desc { position: relative; display: inline-block; padding: 8px 12px; background: #EFF0F6; border-radius: 48px; }
.info_box .desc p { font-size: var(--font-small-xs); font-weight: 700; color: #6E7191; }
.info_box .btn { position: absolute; right: 24px; top: 24px; display: inline-block; height: 40px; font-size: var(--font-small); font-weight: 700; color: var(--color-white); line-height: 40px; padding: 0 10px; background: var(--color-main); border-radius: 20px; z-index: 5; }
.info_box .btn::after { width: 24px; height: 24px; background: url(../../image/icon/icon_clock.svg) no-repeat center center; background-size: contain; vertical-align: -7px; content: ''; display: inline-block; margin-left: 4px; }

.record_box { flex: 1; padding: 40px 24px; background: #EFF0F6; }
.list_box { display: flex; flex-wrap: wrap; margin-bottom: 16px; }
.list_box li { width: 18%; height: 16.15vw; max-height: 77.75px; min-height: 56.16px; margin-right: 2.5%; margin-bottom: 18px; }
.list_box li:nth-of-type(5n) { margin-right: 0; }
.list_box li input[type=checkbox] { display: none; }
.list_box li input[type=checkbox] + label { position: relative; display: block; width: 100%; height: 100%; background: var(--color-white); border: 1px solid #ADACB6; border-radius: 50%; }
.list_box li input[type=checkbox] + label::before { position: absolute; left: 3px; top: 3px; width: calc(100% - 8px); height: calc(100% - 8px); border: 1px dashed #ADACB6; border-radius: 50%; content: ''; display: block; }
.list_box .finished input[type=checkbox] + label::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 140%; height: 140%; background: url(../../image/icon/icon_congrats_off.svg) no-repeat center center; background-size: 100%; content: ''; display: block; }
.list_box li input[type=checkbox] + label span { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; width: 100%; font-size: 13px; font-weight: 700; color: var(--color-gray); font-family: 'Jalnan'; text-align: center; }
.list_box li input[type=checkbox] + label .clear { display: none; }
.list_box li input[type=checkbox] + label .coin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-10deg); display: block; width: 120%; height: 24px; font-size: var(--font-small-xs); font-weight: 700; color: var(--color-white); line-height: 24px; font-family: 'Jalnan'; text-align: center; background: #ADACB6; border-radius: 4px; }
.list_box li input[type=checkbox] + label .coin em { font-size: 15px; }
.list_box li input[type=checkbox]:checked + label { background: #F3EEFB; border-color: var(--color-main); }
.list_box li input[type=checkbox]:checked + label::before { border-color: var(--color-main); }
.list_box .finished input[type=checkbox]:checked + label::after { background: url(../../image/icon/icon_congrats_on.svg) no-repeat center center; background-size: 100%; }
.list_box li input[type=checkbox]:checked + label span { color: var(--color-main); }
.list_box li input[type=checkbox]:checked + label .date { display: none; }
.list_box li input[type=checkbox]:checked + label .clear { display: block; }
.list_box li input[type=checkbox]:checked + label .coin { background: var(--color-main); }
.desc_box { margin-bottom: 32px; }
.desc_box p { position: relative; font-size: var(--font-small); color: #535457; line-height: 22px; padding-left: 21px; }
.desc_box p::before { position: absolute; left: 9px; top: 9px; width: 3px; height: 3px; background: #535457; border-radius: 50%; content: ''; display: block; }
.btn_box .btn { display: block; width: 100%; height: 64px; font-size: var(--font-regular); font-weight: 700; color: var(--color-white); line-height: 64px; text-align: center; background: var(--color-main); border-radius: 32px; }
.btn_box .btn::after { width: 16px; height: 16px; background: url(../../image/icon/icon_check_white.svg) no-repeat center center; background-size: contain; vertical-align: -2px; content: ''; display: inline-block; margin-left: 8px; }
.btn_box .btn:disabled { color: rgba(34, 34, 34, 0.24); background: #E0E0E0; }
.btn_box .btn:disabled::after { background: url(../../image/icon/icon_check_gray.svg) no-repeat center center; }