.ph::after{content:"";position:absolute;right:-8%;top:30px;width:min(520px,70vw);aspect-ratio:1;background:conic-gradient(#ffffff10 25%,transparent 0 50%,#ffffff10 0 75%,transparent 0) 0 0/46px 46px;-webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent);transform:rotate(12deg);pointer-events:none}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 18px;padding:2px 16px}
.chips::-webkit-scrollbar{display:none}
.chip small{opacity:.55;margin-left:6px}
/* shop */
.shop{padding-bottom:110px}
.tools{display:flex;gap:10px;margin-bottom:18px}
.sbox{flex:1;display:flex;align-items:center;gap:10px;height:54px;border-radius:16px;background:var(--ink2);border:1px solid var(--line);padding:0 16px}
.sbox svg{width:20px;flex:none;color:var(--mute)}
.sbox input{flex:1;background:none;border:0;outline:0;font-size:16px;min-width:0}
#sort{height:54px;border-radius:16px;background:var(--ink2);border:1px solid var(--line);padding:0 12px;font-size:14px;max-width:130px}
.cnt{color:var(--mute);font-size:13px;margin-bottom:16px}
/* item */
.item{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:110px 0 40px;align-items:start}
.it-m{position:sticky;top:90px;border-radius:28px;overflow:hidden;aspect-ratio:4/5;background:#000}
.it-m video{width:100%;height:100%;object-fit:cover}
.it-play{position:absolute;left:14px;bottom:14px;background:#000a;padding:10px 14px;border-radius:99px;font-size:12px;font-weight:600}
.crumb{color:var(--mute);font-size:13px;display:inline-block;margin-bottom:14px}
.it-s{color:var(--mute);margin-top:10px}
.it-pr{margin:22px 0}.it-pr b{font:800 52px/1 var(--fd);display:inline-block}
.lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:18px 0 10px}
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px}
.seg button{height:48px;border-radius:12px;border:1px solid var(--line);font-size:13px;font-weight:600;transition:.3s}
.seg button.on{background:var(--bone);color:var(--ink)}
.it-act{display:flex;gap:10px;margin:22px 0 10px}
.it-act .btn{flex:1;justify-content:center}
.qbox{display:flex;align-items:center;border:1px solid var(--line);border-radius:99px;height:54px}
.qbox button{width:44px;height:100%;font-size:20px}.qbox span{min-width:20px;text-align:center;font-weight:700}
.it-d{color:#cfcfd4;margin:26px 0;font-size:16px}
details{border-top:1px solid var(--line);padding:16px 0}
summary{cursor:pointer;font:800 20px/1 var(--fd);text-transform:uppercase;list-style:none;display:flex;justify-content:space-between}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--red)}details[open] summary::after{content:"−"}
details ul{margin-top:12px;color:var(--mute);font-size:14px;padding-left:18px}
details p{margin-top:12px;color:var(--mute);font-size:14px}
@media (max-width:860px){.item{grid-template-columns:1fr;gap:22px;padding-top:70px}.it-m{position:relative;top:0;aspect-ratio:4/4.3;margin-inline:-16px;border-radius:0}.it-pr b{font-size:42px}}
/* work */
.work{padding-bottom:110px}
.mas{columns:4 220px;column-gap:12px}
.tile{display:block;width:100%;margin-bottom:12px;border-radius:18px;overflow:hidden;position:relative;break-inside:avoid;opacity:0;transform:translateY(20px);animation:up .7s var(--ease) forwards}
.tile img{width:100%;aspect-ratio:9/16;object-fit:cover;transition:transform 1s var(--ease)}
.tile:nth-child(3n) img{aspect-ratio:9/12}
.tile:hover img{transform:scale(1.05)}
.tile span{position:absolute;left:0;right:0;bottom:0;padding:40px 12px 12px;background:linear-gradient(transparent,#000d);font-size:12px;text-align:left}
.tile::after{content:"▶";position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:#0009;display:grid;place-items:center;font-size:10px}
@media (max-width:560px){.mas{columns:2;column-gap:8px}.tile{margin-bottom:8px}}
/* book */
.book{display:grid;grid-template-columns:1fr 340px;gap:30px;padding-bottom:110px;align-items:start}
.bk-steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.bk-steps i{height:4px;border-radius:2px;background:var(--line);transition:background .5s}
.bk-steps i.on{background:var(--red)}
.bk{animation:up .6s var(--ease);min-width:0}
.bk .h-m{margin-bottom:24px}
.vg{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.vc{text-align:left;padding:22px 18px;border-radius:18px;border:1px solid var(--line);background:var(--ink2);display:grid;gap:6px;transition:.35s var(--ease)}
.vc b{font:800 26px/1 var(--fd);text-transform:uppercase}.vc small{color:var(--mute);font-size:12px}
.vc:hover,.vc.on{border-color:var(--red);transform:translateY(-4px)}
.svl{display:grid;gap:8px}
.sv{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:10px;border-radius:14px;border:1px solid var(--line);cursor:pointer;transition:.3s;position:relative}
.sv input{position:absolute;opacity:0}
.sv img{width:52px;height:52px;border-radius:10px;object-fit:cover}
.sv b{display:block;font-size:15px}.sv small{color:var(--mute);font-size:12px}
.sv em{font-style:normal;font-weight:700}
.sv.on{border-color:var(--red);background:#e3262b14}
.sv:has(input:focus-visible){outline:2px solid var(--red)}
.nav2{display:flex;justify-content:space-between;gap:10px;margin-top:26px;position:sticky;bottom:calc(86px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--ink) 30%);padding-top:20px}
.btn[disabled]{opacity:.35;pointer-events:none}
.days{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px}
.dy{flex:0 0 72px;height:92px;border-radius:16px;border:1px solid var(--line);display:grid;place-items:center;padding:8px 0}
.dy b{font:800 30px/1 var(--fd)}.dy small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.dy.on{background:var(--bone);color:var(--ink)}.dy.on small{color:#555}
.dy.off{opacity:.3}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ck{grid-column:1/-1;display:flex;gap:10px;align-items:center;font-size:14px}
.ck input{width:20px;height:20px;accent-color:var(--red)}
.bk-sum{position:sticky;top:90px;border-radius:22px;border:1px solid var(--line);background:var(--ink2);padding:22px}
.bk-sum h3{font:800 28px/1 var(--fd);text-transform:uppercase;margin:12px 0 16px}
.sl{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.sl.tt{font:800 24px/1 var(--fd);padding-top:16px}
@media (min-width:861px){.nav2{bottom:0}}
@media (max-width:860px){.book{grid-template-columns:1fr}.bk-sum{position:relative;top:0}.fg{grid-template-columns:1fr}}
/* track */
.track{padding-bottom:110px;max-width:760px}
.tf{display:flex;gap:10px}
.tf input{flex:1;min-width:0;height:58px;border-radius:16px;background:var(--ink2);border:1px solid var(--line);padding:0 18px;font:800 22px/1 var(--fd);letter-spacing:.06em;text-transform:uppercase}
.tk{margin-top:30px;border-radius:24px;border:1px solid var(--line);background:var(--ink2);padding:24px;animation:up .6s var(--ease)}
.tk-hd{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.tk-hd small{display:block;color:var(--mute);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.tk-hd b{font:800 22px/1.1 var(--fd);word-break:break-word}
.tl{list-style:none;margin:24px 0}
.tl li{display:grid;grid-template-columns:28px 1fr;gap:16px;padding-bottom:22px;position:relative;opacity:0;animation:up .5s var(--ease) var(--d) forwards}
.tl li::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--line)}
.tl li:last-child::before{display:none}
.tl li.dn::before{background:var(--red)}
.tl i{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--ink)}
.tl .dn i{background:var(--red);border-color:var(--red)}
.tl .cur i{border-color:var(--red);animation:ping2 1.6s infinite}
@keyframes ping2{0%{box-shadow:0 0 0 0 #e3262b}70%{box-shadow:0 0 0 12px #e3262b00}100%{box-shadow:0 0 0 0 #e3262b00}}
.tl b{display:block}.tl small{color:var(--mute);font-size:13px}
.tl li:not(.dn):not(.cur){color:#66666e}
.ob{display:grid;grid-template-columns:auto 1fr auto;gap:14px;width:100%;text-align:left;padding:14px 0;border-bottom:1px solid var(--line)}
.ob span{color:var(--mute)}.ob em{font-style:normal;font-weight:700}
@media (max-width:560px){.ob{grid-template-columns:1fr auto}.ob span{grid-row:2}}
.sbox{min-width:0}
