@layer components{.dd-ring{place-items:center;width:168px;height:168px;margin:2px auto 0;display:grid;position:relative}.dd-ring svg{width:100%;height:100%;position:absolute;inset:0;transform:rotate(-90deg)}.dd-ring circle{fill:none;stroke-width:12px}.dd-ring .bg{stroke:color-mix(in srgb, var(--accent) 13%, var(--solid-2))}.dd-ring .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease-out)}.dd-ring .ctr{text-align:center;justify-items:center;gap:1px;display:grid;position:relative}.dd-ring .ctr b{letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;font-size:34px;font-weight:800;line-height:1.05}.dd-pct{color:var(--accent-soft-ink);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px;font-weight:800}.dd-pct .tail{opacity:.55;font-size:10.5px;font-weight:700}.dd-ring.example .fg{stroke:color-mix(in srgb, var(--accent) 55%, var(--solid-2))}.dd-hero-lines{text-align:center;gap:1px;display:grid}.dd-hero-lines .k{letter-spacing:-.01em;color:var(--ink);font-size:14px;font-weight:800}.dd-hero-lines .s{color:var(--ink-3);font-size:12px}.dd-next{border-radius:var(--r-input);width:100%;min-height:44px;color:var(--ink-2);text-align:left;background:color-mix(in srgb, var(--solid) 70%, var(--solid-2));justify-content:space-between;align-items:center;gap:8px;padding:6px 10px 6px 12px;font-size:12.5px;transition:transform .15s;display:flex}button.dd-next:active{transform:scale(.985)}.dd-next b{color:var(--accent-soft-ink);font-weight:800}.dd-next .more{color:var(--accent-soft-ink);flex:none;align-items:center;gap:1px;font-size:11.5px;font-weight:700;display:inline-flex}.dd-basis{min-height:28px;color:var(--ink-2);background:var(--solid-2);box-shadow:inset 0 0 0 .5px var(--hair);border-radius:9999px;justify-self:center;align-items:center;gap:4px;padding:0 10px;font-size:11.5px;font-weight:700;display:inline-flex;position:relative}.dd-basis:after{content:"";position:absolute;inset:-8px -2px}.dd-basis:active{transform:scale(.97)}.dd-hero-top{justify-content:space-between;align-items:center;gap:8px;min-height:22px;display:flex}.dd-setup{border-radius:var(--r-list);background:var(--solid);box-shadow:var(--sh-solid);grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 14px;display:grid}.dd-setup-k{color:var(--ink-3);justify-content:space-between;align-items:center;gap:8px;font-size:12px;font-weight:700;display:flex}.dd-setup-k b{color:var(--ink);font-weight:800}.dd-setup .daystrip{margin:0 -14px;padding:2px 14px}.dd-mile{border-radius:var(--r-list);background:var(--solid);box-shadow:var(--sh-solid);padding:4px 14px;display:grid}.sheet .dd-mile{box-shadow:inset 0 0 0 .5px var(--hair)}.dd-mile .m{min-height:38px;color:var(--ink);grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:12.5px;display:grid;position:relative}.dd-mile .m:before{content:"";background:var(--hair);width:2px;position:absolute;top:0;bottom:0;left:7px}.dd-mile .m:first-child:before{top:50%}.dd-mile .m:last-child:before{bottom:50%}.dd-mile .m:only-child:before{display:none}.dd-mile .dot{z-index:1;background:var(--solid);border:2px solid color-mix(in srgb, var(--ink-3) 40%, transparent);border-radius:9999px;width:16px;height:16px;position:relative}.dd-mile .when{color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}.dd-mile .m[data-state=past]{color:var(--ink-3)}.dd-mile .m[data-state=past] .dot{background:var(--accent);border-color:var(--accent)}.dd-mile .m[data-state=next]{font-weight:800}.dd-mile .m[data-state=next] .dot{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent)}.dd-mile .m[data-state=next] .when{color:var(--accent-soft-ink);font-weight:800}.dd-mile .lbl{min-width:0}.dd-mile .lbl small{color:var(--warn);margin-left:4px;font-size:10.5px;font-weight:700}.dd-mile .more{border-top:.5px solid var(--hair);min-height:44px;color:var(--accent-soft-ink);justify-content:space-between;align-items:center;gap:8px;margin:0 -14px;padding:0 14px;font-size:12.5px;font-weight:700;display:flex;position:relative}.dd-mile .more:active{background:var(--solid-2)}.dd-rail{scrollbar-width:none;scroll-snap-type:x proximity;gap:8px;margin:0 -16px;padding:2px 16px 4px;display:flex;overflow-x:auto}.dd-rail::-webkit-scrollbar{display:none}.dd-plan{border-radius:var(--r-tile);text-align:left;background:var(--solid);width:216px;min-height:44px;box-shadow:var(--sh-solid);scroll-snap-align:start;flex:none;align-content:start;gap:5px;padding:11px 12px;transition:transform .15s;display:grid}.dd-plan:active{transform:scale(.985)}.dd-plan .t{letter-spacing:-.01em;color:var(--ink);justify-content:space-between;align-items:center;gap:6px;font-size:14px;font-weight:800;display:flex}.dd-plan .r{color:var(--ink-3);font-size:11.5px}.dd-plan.more{text-align:center;width:120px;color:var(--accent-soft-ink);place-content:center;justify-items:center;font-size:12.5px;font-weight:700}.dd-eff{color:var(--ok);background:var(--ok-soft);border-radius:9999px;flex:none;padding:2px 7px;font-size:10.5px;font-weight:800}.dd-cal{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;display:grid}.dd-cal .h{text-align:center;color:var(--ink-3);padding:2px 0;font-size:10.5px;font-weight:700}.dd-cal .h:first-child{color:var(--crit)}.dd-cal .h:nth-child(7){color:var(--accent-soft-ink)}.dd-cal .d{min-height:42px;color:var(--ink-3);font-variant-numeric:tabular-nums;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;font-size:12px;line-height:1.2;display:flex}.dd-cal .d[data-off=true]{color:var(--ink-2)}.dd-cal .d[data-k]{box-shadow:inset 0 0 0 2px var(--accent);color:var(--ink);background:var(--solid-2)}.dd-cal .d[data-k=leave]{color:var(--ok);background:var(--ok-soft);font-weight:800}.dd-cal .d[data-k=holiday]{color:var(--crit);background:var(--crit-soft)}.dd-cal .d small{white-space:nowrap;text-overflow:ellipsis;max-width:100%;padding:0 2px;font-size:9.5px;overflow:hidden}.dd-meter{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.dd-meter button,.dd-meter>div{text-align:left;min-height:44px;color:var(--ink-3);align-content:center;gap:5px;font-size:11.5px;font-weight:600;display:grid;position:relative}.dd-meter i{background:var(--solid-2);height:8px;box-shadow:inset 0 0 0 .5px var(--hair);border-radius:9999px;display:block;overflow:hidden}.dd-meter i:after{content:"";height:100%;width:var(--w,0%);background:var(--accent);transition:width .4s var(--ease-out);border-radius:9999px;display:block}.dd-meter b{color:var(--ink);font-weight:800}.dd-meter [data-log=true] b:after{content:" · 로그";color:var(--ink-3);font-weight:600}.dd-preview{aspect-ratio:1200/630;width:100%;box-shadow:inset 0 0 0 .5px var(--hair);border-radius:14px;position:relative;overflow:hidden}.dd-preview>.card-1200{transform-origin:0 0;width:1200px;height:630px;position:absolute;top:0;left:0}.dd-preview img{object-fit:cover;width:100%;height:100%;display:block}.dd-saved{border-top:.5px solid var(--hair);align-items:center;gap:10px;min-height:60px;padding:6px 6px 6px 12px;display:flex}.dd-saved:first-child{border-top:0}.dd-saved>button:first-child{text-align:left;flex:1;align-items:center;gap:10px;min-width:0;min-height:48px;display:flex}.dd-saved .mark{width:36px;height:36px;color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);border-radius:12px;flex:none;justify-content:center;align-items:center;display:flex}.dd-saved .val{letter-spacing:-.02em;color:var(--accent-soft-ink);font-variant-numeric:tabular-nums;flex:none;font-size:15px;font-weight:800}.dd-saved .ib{width:40px;height:40px}.dd-title-act{min-height:36px;color:var(--ink);background:var(--solid);box-shadow:var(--sh-solid);border-radius:9999px;align-items:center;gap:5px;padding:0 12px;font-size:12.5px;font-weight:700;display:inline-flex;position:relative}.dd-title-act:after{content:"";position:absolute;inset:-4px -2px}.dd-title-act .n{text-align:center;min-width:18px;color:var(--accent-ink);background:var(--accent);border-radius:9999px;padding:0 5px;font-size:11px;font-weight:800}.dd-basis-list{color:var(--ink-2);gap:8px;font-size:12.5px;line-height:1.6;display:grid}.dd-basis-list b{color:var(--ink)}.dd-basis-list a{color:var(--accent-soft-ink);text-underline-offset:2px;text-decoration:underline}}@media (prefers-reduced-motion:reduce){.dd-ring .fg,.dd-meter i:after,.dd-plan,.dd-basis{transition:none}}
