.oc.atc{opacity:0;border-radius:16px;width:min(1080px,100vw - 48px);max-width:none;height:fit-content;max-height:calc(100vh - 32px);margin:auto;transition:opacity .2s,transform .25s cubic-bezier(.4,0,.2,1),visibility .25s;inset:0;transform:translateY(16px)scale(.98)}.oc.atc.is-open{opacity:1;transform:none}@media (width<=899px){.oc.atc{border-radius:0;width:100vw;height:100%;max-height:none}}.atc__in{display:contents}.atc__head{background:var(--dark2);padding:12px 16px 12px 28px}.atc__head strong{font:400 24px/1 var(--head);gap:10px}.atc__head .ic{color:#8fd3a8}.atc__top{border-bottom:1px solid var(--border);background:#fff;flex:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:12px 40px;padding:16px 28px;display:grid}.atc__added{align-items:center;gap:14px;display:flex}.atc__img{background:var(--light);border-radius:var(--radius);flex:none;place-items:center;width:56px;height:72px;display:grid;overflow:hidden}.atc__img img{object-fit:cover;mix-blend-mode:multiply;width:100%;height:62px}.atc__name{font-size:16px;font-weight:500;line-height:21px}.atc__meta{color:var(--gray);margin-top:2px;font-size:14px}.atc__gift{color:var(--primary);align-items:center;gap:4px;display:inline-flex}.atc__perks{flex-direction:column;gap:8px;display:flex}.atc__perk p{align-items:center;gap:8px;font-size:14px;line-height:18px;display:flex}.atc__perk b{font-weight:600}.atc__perk .ic{color:var(--success);flex:none}.atc__perk i{background:var(--light2);border-radius:var(--pill);height:5px;margin-top:4px;display:block;overflow:hidden}.atc__perk i b{background:var(--success);border-radius:inherit;height:100%;transition:width .4s;display:block}.atc__perk.is-done p,.atc__perk.is-done .ic{color:#2f7d4f}.atc__perk.is-done i b{background:#2f7d4f}.atc__body{overscroll-behavior:contain;background:var(--light);flex-direction:column;flex:1;gap:18px;min-height:0;padding:18px 28px 20px;display:flex;overflow-y:auto}.atc__h{font:400 22px/26px var(--head);margin-bottom:10px}.atc__h span{color:var(--gray);font-size:18px}.atc__tabs{gap:4px;margin-bottom:10px;display:flex}.atc__tabs button{height:34px;font:inherit;color:var(--gray-dark);white-space:nowrap;cursor:pointer;border:1px solid var(--border);border-radius:var(--pill);background:#fff;align-items:center;gap:6px;padding:0 14px;font-size:14px;display:inline-flex}.atc__tabs button em{color:var(--gray);font-size:12px;font-style:normal}.atc__tabs button:hover{color:var(--text);border-color:var(--gray)}.atc__tabs button.is-active{color:var(--text);border-color:var(--dark2);font-weight:500}.atc__foot{border-top:1px solid var(--border);background:#fff;flex:none;align-items:center;gap:12px;padding:12px 28px;display:flex}.atc__sum{color:var(--gray-dark);white-space:nowrap;flex:auto;align-items:baseline;gap:4px 8px;font-size:14px;display:flex}.atc__sum b{color:var(--text);font-weight:500}.atc__sum b:last-child{font-size:20px}@media (width<=899px){.atc__head{padding:10px 12px 10px 16px}.atc__head strong{font-size:21px}.atc__top{grid-template-columns:1fr;gap:10px;padding:12px 16px}.atc__img{width:44px;height:56px}.atc__img img{height:48px}.atc__name{font-size:15px;line-height:19px}.atc__perk p{font-size:13px}.atc__body{justify-content:space-evenly;gap:10px;padding:12px 0 8px 16px}.atc__h{margin-bottom:8px;font-size:19px;line-height:22px}.atc__h span{display:none}.atc__tabs{margin-bottom:8px}.atc__tabs button{height:30px;padding:0 10px;font-size:13px}.atc__tabs button em,.atc__tabs button .ic{display:none}.atc__foot{padding:8px 16px calc(10px + env(safe-area-inset-bottom));flex-wrap:wrap;gap:6px 12px}.atc__foot .btn--outline{text-underline-offset:3px;border:0;height:auto;min-height:0;padding:4px 0;font-size:14px;text-decoration:underline}.atc__foot .btn--primary{flex-basis:100%}.atc__sum span{display:none}}.xs-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}.xs-row[hidden]{display:none}@media (width<=899px){.xs-row{scroll-snap-type:x mandatory;scrollbar-width:none;padding-right:16px;scroll-padding-left:16px;display:flex;overflow-x:auto}.xs-row::-webkit-scrollbar{display:none}}.xs{border:1px solid var(--border2);border-radius:var(--radius-lg);background:#fff;flex-direction:column;min-width:0;padding:8px 10px 10px;transition:border-color .2s;display:flex}.xs__img{flex:none;height:110px;margin-bottom:6px;position:relative}.xs__img img{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.xs__name{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:14px;font-weight:500;line-height:18px;display:-webkit-box;overflow:hidden}.xs__meta{color:var(--gray);text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:16px;overflow:hidden}.xs__row{justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:6px;display:flex}.xs__row>b{font-size:15px;font-weight:500}.xs__add{width:34px;height:34px;color:var(--dark2);cursor:pointer;border:1px solid var(--dark2);border-radius:var(--btn-radius);background:#fff;flex:none;place-items:center;display:grid}.xs__add .ic+.ic{display:none}.xs__add:hover{color:#fff;background:var(--dark2)}.xs__add:disabled{cursor:default}.xs.is-added{border-color:#2f7d4f}.xs.is-added .xs__add{color:#fff;background:#2f7d4f;border-color:#2f7d4f}.xs.is-added .xs__add .ic{display:none}.xs.is-added .xs__add .ic+.ic{display:block}@media (width<=899px){.xs{scroll-snap-align:start;flex:none;width:136px;padding:6px 8px 8px}.xs__img{height:80px}.xs__meta{display:none}.xs__name{font-size:13px;line-height:17px}}@media (width>=900px) and (height<=820px){.atc__top{padding-top:12px;padding-bottom:12px}.atc__body{gap:12px;padding-top:12px;padding-bottom:14px}.xs__img{height:76px}.xs__meta{display:none}}@media (width>=900px) and (height<=760px){.atc__head{padding-top:8px;padding-bottom:8px}.atc__img{width:44px;height:56px}.atc__img img{height:48px}.atc__h,.atc__tabs{margin-bottom:6px}.xs__img{height:60px}}@media (width<=899px) and (height<=700px){.atc__top{gap:6px;padding-top:8px;padding-bottom:8px}.atc__body{padding-top:8px}.atc__perk+.atc__perk{display:none}.xs__img{height:56px}.xs__name{-webkit-line-clamp:1}}@media (width<=899px){.atc__name{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}}@media (width<=899px) and (height<=820px){.atc__perk p span{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}}.atc .xs__name,.atc .xs__img{color:var(--text);text-decoration:none}