@opendesign-plus-test/components 0.0.1-rc.145 → 0.0.1-rc.147

package/dist/treeshaking/components/activity/OActivityMyCalendar.css

@@ -296,72 +296,70 @@
 }
 .o-my-activity-calendar {
   --activity-card-radius: var(--o-radius-xs);
+  --activity-input-radius: var(--o-radius-xs);
   --activity-cell-radius: var(--o-radius-xs);
-  height: 100%;
-  display: flex;
-  flex-direction: column;
 }
 .o-my-activity-calendar .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.o-my-activity-calendar .title {
-  color: var(--o-color-info1);
+.o-my-activity-calendar .header .title {
   font-weight: 500;
+  color: var(--o-color-info1);
   font-size: 24px;
   line-height: 32px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.o-my-activity-calendar .title {
+.o-my-activity-calendar .header .title {
     font-size: 20px;
     line-height: 28px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-my-activity-calendar .title {
+.o-my-activity-calendar .header .title {
     font-size: 18px;
     line-height: 26px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.o-my-activity-calendar .title {
+.o-my-activity-calendar .header .title {
     font-size: 18px;
     line-height: 26px;
 }
 }
 @media (max-width: 600px) {
-.o-my-activity-calendar .title {
+.o-my-activity-calendar .header .title {
     font-size: 16px;
     line-height: 24px;
 }
 }
-.o-my-activity-calendar .desc {
-  color: var(--o-color-info2);
+.o-my-activity-calendar .header .desc {
   margin-top: 12px;
+  color: var(--o-color-info2);
   font-size: 14px;
   line-height: 22px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.o-my-activity-calendar .desc {
+.o-my-activity-calendar .header .desc {
     font-size: 14px;
     line-height: 18px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-my-activity-calendar .desc {
+.o-my-activity-calendar .header .desc {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.o-my-activity-calendar .desc {
+.o-my-activity-calendar .header .desc {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (max-width: 600px) {
-.o-my-activity-calendar .desc {
+.o-my-activity-calendar .header .desc {
     font-size: 12px;
     line-height: 18px;
 }
@@ -373,17 +371,21 @@
   height: 100%;
   --phone-padding-top: 0;
 }
-@media (min-width: 601px) and (max-width: 840px) {
+@media screen and (max-width: 1200px) {
 .o-my-activity-calendar .activity-list {
     flex-direction: column;
+    gap: var(--o-gap-2);
+}
+}
+@media (max-width: 840px) {
+.o-my-activity-calendar .activity-list {
     gap: var(--o-gap-4);
+    --phone-padding-top: 56px;
 }
 }
 @media (max-width: 600px) {
 .o-my-activity-calendar .activity-list {
-    flex-direction: column;
     gap: var(--o-gap-3);
-    --phone-padding-top: calc(var(--o-gap-5) + var(--o-gap-3) + var(--o-gap-3));
 }
 }
 .o-my-activity-calendar .activity-list .o-loading .o-layer-mask {
@@ -392,222 +394,218 @@
 .o-my-activity-calendar .activity-list .o-loading .o-loading-icon {
   color: var(--layer-mask);
 }
-.o-my-activity-calendar .list-calendar-mb {
+.o-my-activity-calendar .activity-list .list-calendar-mb {
+  display: none;
   align-items: center;
   justify-content: space-between;
   padding: 0 var(--grid--layout-padding);
+  font-weight: 600;
 }
-.o-my-activity-calendar .list-calendar-mb span:first-child {
-  font-weight: 500;
-  font-size: 48px;
-  line-height: 64px;
-}
-@media (min-width: 1201px) and (max-width: 1680px) {
-.o-my-activity-calendar .list-calendar-mb span:first-child {
-    font-size: 40px;
-    line-height: 56px;
-}
-}
-@media (min-width: 841px) and (max-width: 1200px) {
-.o-my-activity-calendar .list-calendar-mb span:first-child {
-    font-size: 32px;
-    line-height: 44px;
-}
+@media screen and (max-width: 1200px) {
+.o-my-activity-calendar .activity-list .list-calendar-mb {
+    display: flex;
+    background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
+    border-radius: var(--activity-card-radius);
+    padding: var(--o-gap-3);
 }
-@media (min-width: 601px) and (max-width: 840px) {
-.o-my-activity-calendar .list-calendar-mb span:first-child {
-    font-size: 32px;
-    line-height: 44px;
 }
+@media (max-width: 840px) {
+.o-my-activity-calendar .activity-list .list-calendar-mb {
+    padding: 0 var(--grid--layout-padding);
+    background-color: var(--o-color-fill1);
+    display: flex;
+    position: fixed;
+    height: var(--phone-padding-top);
+    z-index: 1;
+    top: var(--layout-header-height);
+    left: 0;
+    right: 0;
 }
-@media (max-width: 600px) {
-.o-my-activity-calendar .list-calendar-mb span:first-child {
-    font-size: 20px;
-    line-height: 28px;
 }
+.o-my-activity-calendar .activity-list .list-calendar-mb span:first-child {
+  font-size: 20px;
+  line-height: 28px;
 }
-.o-my-activity-calendar .list-calendar-mb span:last-child {
+.o-my-activity-calendar .activity-list .list-calendar-mb span:last-child {
   display: flex;
   align-items: center;
 }
-.o-my-activity-calendar .list-calendar-mb .o-icon {
+.o-my-activity-calendar .activity-list .list-calendar-mb .o-icon {
   font-size: 24px;
   cursor: pointer;
 }
-.o-my-activity-calendar .list-calendar-mb .o-icon:last-child {
+.o-my-activity-calendar .activity-list .list-calendar-mb .o-icon:last-child {
   margin-left: 24px;
 }
-@media (max-width: 600px) {
-.o-my-activity-calendar .list-calendar-mb {
-    padding-top: var(--o-gap-7);
-    background-color: var(--o-color-ubmc-bg);
-    padding-bottom: var(--o-gap-4);
-    --phone-padding-top: calc(28px + var(--o-gap-7) + var(--o-gap-4));
-    display: flex;
-    position: fixed;
-    height: var(--phone-padding-top);
-    z-index: 1;
-    top: var(--layout-header-height);
-    left: 0;
-    right: 0;
-}
-}
-.o-my-activity-calendar .left-calendar {
-  width: 336px;
+.o-my-activity-calendar .activity-list .left-calendar {
   flex-shrink: 0;
+  width: 334px;
+  background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
+  border-radius: var(--activity-card-radius);
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body {
     padding-left: 12px;
     padding-right: 12px;
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell {
     height: 40px;
     width: 28px;
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
     line-height: 24px;
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) and (min-width: 1201px) and (max-width: 1680px) {
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) and (min-width: 841px) and (max-width: 1200px) {
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) and (min-width: 601px) and (max-width: 840px) {
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) and (max-width: 600px) {
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.o-my-activity-calendar .left-calendar {
+.o-my-activity-calendar .activity-list .left-calendar {
     width: 100%;
 }
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body {
+    padding-bottom: 0;
 }
-@media (max-width: 600px) {
-.o-my-activity-calendar .left-calendar {
+}
+@media screen and (max-width: 1200px) {
+.o-my-activity-calendar .activity-list .left-calendar {
     display: none;
 }
 }
-.o-my-activity-calendar .left-calendar .el-calendar {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar {
   min-height: 460px;
-  height: 100%;
-  background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
+  height: calc(100% - 54px);
   border-radius: var(--activity-card-radius);
+  background-color: transparent;
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__header {
+@media (min-width: 601px) and (max-width: 840px) {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar {
+    min-height: fit-content;
+}
+}
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header {
   border-bottom: 1px solid var(--o-color-control4);
+  color: var(--o-color-info1);
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__header > span {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header > span {
   font-weight: 500;
-  color: var(--o-color-info1);
   font-size: 32px;
   line-height: 44px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__header > span {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header > span {
     font-size: 20px;
     line-height: 28px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__header > span {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header > span {
     font-size: 20px;
     line-height: 28px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__header > span {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header > span {
     font-size: 18px;
     line-height: 26px;
 }
 }
 @media (max-width: 600px) {
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__header > span {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header > span {
     font-size: 16px;
     line-height: 24px;
 }
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__header > div {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header > div {
   display: flex;
   align-items: center;
   gap: var(--o-gap-5);
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__header > div .o-icon {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header > div .o-icon {
   font-size: 24px;
   cursor: pointer;
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__header > div .o-icon:hover {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header > div .o-icon:hover {
   color: var(--o-color-primary1);
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header > div .o-icon svg path {
+  fill: currentColor;
+}
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table {
   display: table;
-  width: 100%;
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table th {
-  text-align: center;
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table th {
+  text-align: left;
   border: none;
   --o-color-control3-light: transparent;
+  padding-left: calc(17px - 0.5em);
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table tr {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table tr {
   --o-color-fill2: transparent;
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table td {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table td {
+  background-color: transparent !important;
   border: none;
   text-align: center;
   transition: none;
   padding: 0;
-  background-color: transparent !important;
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table td .el-calendar-day {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table td .el-calendar-day {
   padding: 0;
   height: fit-content;
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table td div {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table td div {
   cursor: default !important;
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table td:hover .el-calendar-day {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table td:hover .el-calendar-day {
   background-color: transparent;
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell {
   height: 56px;
   width: 34px;
   position: relative;
   cursor: default !important;
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
   font-size: 14px;
   line-height: 34px;
   border-radius: var(--activity-cell-radius);
   background-color: var(--o-color-control2-light);
   border: 1px solid transparent;
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
   cursor: not-allowed !important;
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable .date-cell-text {
   cursor: pointer !important;
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable:not(.is-selected) .date-cell-text:hover {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable:not(.is-selected) .date-cell-text:hover {
   background-color: var(--o-color-control3-light);
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell::after {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell::after {
   content: "";
   position: absolute;
   bottom: 5px;
@@ -617,70 +615,75 @@
   height: 8px;
   border-radius: 50%;
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.is-today .date-cell-text {
-  color: #000;
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.is-today .date-cell-text {
+  color: var(--o-color-primary1);
+  font-weight: bold;
   background-color: var(--o-color-control3-light);
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.is-selected .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.is-selected .date-cell-text {
   background-color: var(--o-color-control3-light);
   border: 1px solid var(--o-color-primary1);
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable::after {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable::after {
   background-color: rgb(var(--o-grey-6));
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable.approved::after {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable.approved::after {
   background-color: var(--dot-bg);
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable.expired::after {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable.expired::after {
   background-color: rgb(var(--o-grey-6));
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable.all-deleted::after {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable.all-deleted::after {
   background-color: rgb(var(--o-grey-6));
 }
-.o-my-activity-calendar .left-calendar .el-calendar .el-calendar__body .el-calendar-table .is-today {
-  color: inherit;
-}
-.o-my-activity-calendar .right-meeting {
+.o-my-activity-calendar .activity-list .right-meeting {
   flex-grow: 1;
   background-color: var(--o-color-fill2);
+  --content-height: calc(var(--layout-left-height, 900px) - 4 * var(--o-gap-5) - var(--header-height, 64) * 1px);
 }
-@media (max-width: 600px) {
-.o-my-activity-calendar .right-meeting {
+@media (max-width: 840px) {
+.o-my-activity-calendar .activity-list .right-meeting {
     margin-top: calc(var(--phone-padding-top) - var(--o-gap-4));
 }
 }
-.o-my-activity-calendar .right-meeting.is-empty {
+.o-my-activity-calendar .activity-list .right-meeting.is-empty {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 600px;
+  height: var(--content-height);
+}
+@media (max-width: 840px) {
+.o-my-activity-calendar .activity-list .right-meeting.is-empty {
+    min-height: 200px;
 }
-.o-my-activity-calendar .right-meeting .o-scroller .o-scrollbar-rail {
+}
+.o-my-activity-calendar .activity-list .right-meeting .o-scroller .o-scrollbar-rail {
   right: -16px;
   height: 100%;
 }
-.o-my-activity-calendar .right-meeting .scroller-container {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container {
   height: 100%;
-  max-height: calc(var(--layout-left-height, 900px) - 4 * var(--o-gap-5) - var(--header-height) * 1px);
+  max-height: var(--content-height);
 }
 @media (max-width: 600px) {
-.o-my-activity-calendar .right-meeting .scroller-container {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container {
     max-height: fit-content;
 }
 }
-.o-my-activity-calendar .right-meeting .scroller-container .act-item {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item {
   padding-left: 24px;
   position: relative;
 }
-.o-my-activity-calendar .right-meeting .scroller-container .act-item.last-item {
-  flex-grow: 1;
-}
 @media (max-width: 600px) {
-.o-my-activity-calendar .right-meeting .scroller-container .act-item {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item {
     padding-left: var(--o-gap-2);
 }
 }
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .act-bar {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item.last-item {
+  flex-grow: 1;
+}
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar {
   position: absolute;
   left: 0;
   width: 16px;
@@ -689,7 +692,7 @@
   overflow: hidden;
   --active-color: var(--o-color-primary1);
 }
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .act-bar::before {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar::before {
   content: "";
   width: 2px;
   position: absolute;
@@ -699,27 +702,27 @@
   transform: translateX(-50%);
   background-color: var(--o-color-control4);
 }
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .act-bar .act-bar-dot {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar .act-bar-dot {
   width: 16px;
   height: 26px;
   position: relative;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .act-bar .act-bar-dot {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar .act-bar-dot {
     height: 24px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .act-bar .act-bar-dot {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar .act-bar-dot {
     height: 22px;
 }
 }
 @media (max-width: 840px) {
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .act-bar .act-bar-dot {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar .act-bar-dot {
     height: 22px;
 }
 }
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .act-bar .act-bar-dot::before, .o-my-activity-calendar .right-meeting .scroller-container .act-item .act-bar .act-bar-dot::after {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar .act-bar-dot::before, .o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar .act-bar-dot::after {
   content: "";
   border-radius: 50%;
   position: absolute;
@@ -727,77 +730,76 @@
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
 }
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .act-bar .act-bar-dot::before {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar .act-bar-dot::before {
   width: 16px;
   height: 16px;
   background-color: transparent;
 }
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .act-bar .act-bar-dot::after {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar .act-bar-dot::after {
   width: 8px;
   height: 8px;
   background-color: var(--active-color);
 }
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .act-bar.is-active .act-bar-dot::before {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar.is-active .act-bar-dot::before {
   background-color: var(--active-color);
 }
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .act-bar.is-active .act-bar-dot::after {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar.is-active .act-bar-dot::after {
   background-color: var(--o-color-fill2);
 }
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .act-bar.is-end {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar.is-end {
   --active-color: rgb(222, 222, 227);
 }
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .approved {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .approved {
   --active-color: var(--o-color-primary1);
 }
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .group-title {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .group-title {
   font-weight: 500;
-  margin-bottom: var(--o-gap-2);
   color: var(--o-color-info1);
   font-size: 18px;
   line-height: 26px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .group-title {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .group-title {
     font-size: 16px;
     line-height: 24px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .group-title {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .group-title {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .group-title {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .group-title {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (max-width: 600px) {
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .group-title {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .group-title {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (max-width: 600px) {
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .group-title {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .group-title {
     padding-left: var(--o-gap-5);
 }
 }
-.o-my-activity-calendar .right-meeting .scroller-container .act-item .group-title.is-end {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .group-title.is-end {
   color: var(--o-color-info3);
 }
-.o-my-activity-calendar .list-body {
+.o-my-activity-calendar .activity-list .list-body {
   height: 100%;
 }
 @media (max-width: 600px) {
-.o-my-activity-calendar .list-body {
+.o-my-activity-calendar .activity-list .list-body {
     height: fit-content;
     padding: var(--o-gap-4) !important;
 }
 }
-.o-my-activity-calendar .list-body .list-month-change {
+.o-my-activity-calendar .activity-list .list-body .list-month-change {
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -806,180 +808,244 @@
   --btn-color: var(--o-color-primary1);
 }
 @media (hover: hover) {
-.o-my-activity-calendar .list-body .list-month-change:hover {
+.o-my-activity-calendar .activity-list .list-body .list-month-change:hover {
     --btn-color: var(--o-color-primary2);
 }
 }
-@media (max-width: 600px) {
-.o-my-activity-calendar .list-body .list-month-change {
+@media (max-width: 840px) {
+.o-my-activity-calendar .activity-list .list-body .list-month-change {
     display: none;
 }
 }
-.o-my-activity-calendar .list-body .list-month-change.prev-month {
+.o-my-activity-calendar .activity-list .list-body .list-month-change.prev-month {
   margin-bottom: var(--o-gap-6);
 }
-.o-my-activity-calendar .list-body .list-month-change.next-month {
+@media (max-width: 1680px) {
+.o-my-activity-calendar .activity-list .list-body .list-month-change.prev-month {
+    margin-bottom: var(--o-gap-5);
+}
+}
+@media (max-width: 840px) {
+.o-my-activity-calendar .activity-list .list-body .list-month-change.prev-month {
+    margin-bottom: var(--o-gap-4);
+}
+}
+.o-my-activity-calendar .activity-list .list-body .list-month-change.next-month {
   margin-top: var(--o-gap-6);
-  padding-bottom: 32px;
+  padding-bottom: var(--o-gap-6);
+}
+@media (max-width: 1680px) {
+.o-my-activity-calendar .activity-list .list-body .list-month-change.next-month {
+    margin-top: var(--o-gap-5);
 }
-.o-my-activity-calendar .list-body .list-month-change .o-icon {
+}
+@media (max-width: 840px) {
+.o-my-activity-calendar .activity-list .list-body .list-month-change.next-month {
+    margin-top: var(--o-gap-4);
+    padding-bottom: 0;
+}
+}
+.o-my-activity-calendar .activity-list .list-body .list-month-change .o-icon {
   font-size: 24px;
   color: var(--btn-color);
 }
-.o-my-activity-calendar .list-body .list-month-change span {
+.o-my-activity-calendar .activity-list .list-body .list-month-change span {
   color: var(--btn-color);
   font-size: 16px;
   line-height: 24px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.o-my-activity-calendar .list-body .list-month-change span {
+.o-my-activity-calendar .activity-list .list-body .list-month-change span {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-my-activity-calendar .list-body .list-month-change span {
+.o-my-activity-calendar .activity-list .list-body .list-month-change span {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.o-my-activity-calendar .list-body .list-month-change span {
+.o-my-activity-calendar .activity-list .list-body .list-month-change span {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (max-width: 600px) {
-.o-my-activity-calendar .list-body .list-month-change span {
+.o-my-activity-calendar .activity-list .list-body .list-month-change span {
     font-size: 12px;
     line-height: 18px;
 }
 }
-.o-my-activity-calendar .list-body .o-collapse {
+.o-my-activity-calendar .activity-list .list-body .o-collapse {
   padding: 0;
   border-radius: 0;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-expanded + .o-collapse-item-expanded {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-expanded + .o-collapse-item-expanded {
   margin-top: var(--o-gap-4);
 }
-.o-my-activity-calendar .list-body .o-collapse .height-placeholder {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .height-placeholder {
   height: var(--o-gap-4);
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item {
   padding: var(--o-gap-4) var(--o-gap-5);
-  padding-bottom: calc(var(--o-gap-5) - var(--o-gap-4));
   border-top: none;
   border-radius: var(--activity-card-radius);
   transition: margin var(--o-easing-standard) var(--o-duration-s);
-  --copy-display: none;
   --icon-size: 24px;
 }
-@media (max-width: 840px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item {
+@media (max-width: 1680px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item {
+    --icon-size: 20px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item {
     padding: var(--o-gap-3) var(--o-gap-4);
 }
 }
-@media (max-width: 600px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item {
-    --icon-size: 20px;
+@media (max-width: 840px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item {
+    padding: var(--o-gap-2) var(--o-gap-4);
+    --icon-size: 16px;
+}
+}
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item.o-collapse-item-expanded {
+  margin-top: var(--o-gap-4);
+}
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item.o-collapse-item-expanded .title-text {
+  color: var(--o-color-info1);
 }
+@media (max-width: 1680px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item.o-collapse-item-expanded {
+    margin-top: var(--o-gap-3);
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item:hover .title-text {
+}
+@media (max-width: 840px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item.o-collapse-item-expanded {
+    margin-top: var(--o-gap-2);
+}
+}
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item:hover .title-text {
   color: var(--o-color-primary1);
 }
-@media (min-width: 841px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item:hover {
-    --copy-display: inline-flex;
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item:hover .o-collapse-item-title .copy-icon {
+  opacity: 1;
+  visibility: visible;
 }
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item.last-item .o-collapse-item-header {
+  border-bottom: none;
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item.is-delete .act-title, .o-my-activity-calendar .list-body .o-collapse .o-collapse-item.is-end .act-title {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item.is-delete .act-title, .o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item.is-end .act-title {
   color: var(--o-color-info4);
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item.is-delete .act-title .title-text, .o-my-activity-calendar .list-body .o-collapse .o-collapse-item.is-end .act-title .title-text {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item.is-delete .act-title .title-text, .o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item.is-end .act-title .title-text {
   color: var(--o-color-info4);
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item.o-collapse-item-expanded {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item.o-collapse-item-expanded {
   border-bottom: none;
-  background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
+  background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent) !important;
 }
-@media (max-width: 840px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item.o-collapse-item-expanded {
-    --copy-display: inline-flex;
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item.o-collapse-item-expanded .o-collapse-item-header {
+  padding-bottom: var(--o-gap-2);
+  position: relative;
 }
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item.o-collapse-item-expanded .o-collapse-item-header::after {
+  content: "";
+  position: absolute;
+  left: calc(var(--o-gap-3) + var(--icon-size));
+  right: 0;
+  bottom: 0;
+  height: 1px;
+  background-color: var(--o-color-control4);
+}
+@media (max-width: 600px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item.o-collapse-item-expanded .o-collapse-item-header::after {
+    left: 0;
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item.o-collapse-item-expanded .o-collapse-item-header {
-  border-bottom: 1px solid var(--o-color-control4);
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item.o-collapse-item-expanded .o-collapse-item-header .o-collapse-item-title .copy-icon {
+  opacity: 1;
+  visibility: visible;
+}
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header {
   border-bottom: none;
   padding-top: 0;
-  padding-bottom: var(--o-gap-4);
+  padding-bottom: 0;
   display: flex;
   align-items: center;
   gap: var(--o-gap-4);
-  position: relative;
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-icon {
-  position: relative;
-  top: 4px;
-  flex-shrink: 0;
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header {
+    gap: var(--o-gap-3);
+}
+}
+@media (max-width: 1200px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header {
+    gap: var(--o-gap-2);
 }
-@media (max-width: 600px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-icon {
-    position: absolute;
-    right: 0;
-    width: 20px;
-    height: 20px;
-    font-size: 20px;
-    bottom: var(--o-gap-2);
-    top: revert;
 }
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-icon {
+  flex-shrink: 0;
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title {
   flex: 1;
   width: 0;
+  min-width: 0;
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   margin-bottom: 0;
+  gap: var(--o-gap-4);
+}
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header {
+  flex: 1;
+  min-width: 0;
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left {
   display: flex;
   align-items: flex-start;
   gap: var(--o-gap-3);
   width: 100%;
-  padding-right: 48px;
+  margin-bottom: var(--o-gap-2);
 }
 @media (max-width: 600px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left {
     flex-grow: 1;
     width: 100%;
     align-self: stretch;
     flex-shrink: 0;
 }
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .act-icon {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .act-icon {
   width: var(--icon-size);
   height: var(--icon-size);
   border-radius: 50%;
-  background-color: rgb(var(--o-cyan-6));
+  background-color: var(--o-color-primary1);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  --icon-size2: var(--icon-size);
+  padding: 1px;
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .act-icon .o-icon svg path {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .act-icon .o-icon {
+  font-size: calc(var(--icon-size2) - 2px);
+}
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .act-icon .o-icon svg path {
   fill: currentColor;
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info {
-  width: calc(100% - var(--o-gap-3) - var(--icon-size));
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info {
+  min-width: 0;
+  flex: 1;
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title {
   font-weight: 500;
   display: flex;
   align-items: center;
@@ -988,44 +1054,30 @@
   line-height: 26px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title {
     font-size: 16px;
     line-height: 24px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (max-width: 600px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title {
     font-size: 14px;
     line-height: 22px;
 }
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title.is-delete, .o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title.is-end {
-  color: var(--o-color-info3);
-}
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .title-text {
-  flex: 0 1 auto;
-  min-width: 0;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-all;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-}
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag {
   margin-left: 8px;
   --tag-radius: var(--activity-cell-radius);
   font-weight: 500;
@@ -1036,50 +1088,114 @@
   line-height: 22px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag {
     font-size: 14px;
     line-height: 18px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (max-width: 600px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag {
     font-size: 12px;
     line-height: 18px;
 }
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag .o-tag-label {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag .o-tag-label {
   transform: none !important;
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag.o-tag-outline {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag.o-tag-outline {
   --tag-bd-color: transparent;
   --tag-color: #fff;
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag.tag-under-review {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag.tag-under-review {
   --tag-bg-color: rgb(var(--o-blue-6));
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag.tag-draft, .o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag.tag-delete, .o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag.tag-cancel {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag.tag-draft, .o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag.tag-delete, .o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag.tag-cancel {
   --tag-color: var(--o-color-info3);
   --tag-bg-color: var(--o-color-control1-light);
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag.tag-registration, .o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag.tag-in-progress, .o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag.tag-ended {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag.tag-registration, .o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag.tag-in-progress, .o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag.tag-ended {
   --tag-bg-color: var(--o-color-success1);
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag.tag-reject {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .o-tag.tag-reject {
   --tag-bg-color: var(--o-color-warning1);
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-info {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .title-wrapper {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .title-text {
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 26px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .title-text {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .title-text {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .title-text {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .title-text {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .title-text {
+    font-size: 22px;
+    line-height: 30px;
+}
+}
+@media (max-width: 600px) and (min-width: 1201px) and (max-width: 1680px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .title-text {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (max-width: 600px) and (min-width: 841px) and (max-width: 1200px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .title-text {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 600px) and (min-width: 601px) and (max-width: 840px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .title-text {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 600px) and (max-width: 600px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-title .title-text {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-info {
   color: var(--o-color-info3);
   display: flex;
   align-items: center;
@@ -1087,33 +1203,50 @@
   font-size: 14px;
   line-height: 22px;
 }
-@media (min-width: 1201px) and (max-width: 1680px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-info {
+@media (max-width: 840px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-info {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 840px) and (min-width: 1201px) and (max-width: 1680px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-info {
     font-size: 14px;
     line-height: 18px;
 }
 }
-@media (min-width: 841px) and (max-width: 1200px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-info {
+@media (max-width: 840px) and (min-width: 841px) and (max-width: 1200px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-info {
     font-size: 12px;
     line-height: 18px;
 }
 }
-@media (min-width: 601px) and (max-width: 840px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-info {
+@media (max-width: 840px) and (min-width: 601px) and (max-width: 840px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-info {
     font-size: 12px;
     line-height: 18px;
 }
 }
-@media (max-width: 600px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-info {
+@media (max-width: 840px) and (max-width: 600px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-info {
     font-size: 12px;
     line-height: 18px;
 }
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-info .date-range {
-  flex: 0 1 auto;
-  min-width: 0;
+@media (max-width: 600px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-info {
+    flex-direction: column;
+    align-items: flex-start;
+}
+}
+@media (max-width: 600px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-info .o-divider {
+    display: none;
+}
+}
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-info span:last-child {
+  width: 0;
+  flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-all;
@@ -1121,114 +1254,125 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-right {
+@media (max-width: 600px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-left .header-info .act-info span:last-child {
+    width: fit-content;
+}
+}
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-right {
   display: flex;
   align-items: center;
   padding-left: calc(var(--o-gap-3) + var(--icon-size));
   gap: var(--o-gap-4);
-  margin-top: var(--o-gap-2);
   width: 100%;
   font-weight: 400;
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-right .o-link {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-right .o-link {
   font-size: 14px;
   line-height: 21px;
   --link-color: var(--o-color-info2);
-  --link-color-hover: var(--o-color-primary2);
-  --link-color-active: var(--o-color-primary3);
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-right .o-icon {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .item-header-right .o-icon {
   font-size: 16px;
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .copy-icon {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  right: calc(var(--collapse-item-icon-size) + var(--o-gap-4));
-  font-size: 18px;
-  height: 18px;
-  width: 18px;
-  display: var(--copy-display);
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .copy-icon {
+  flex-shrink: 0;
+  font-size: 24px;
+  visibility: hidden;
+  opacity: 0;
   color: var(--o-color-info1);
+  height: 1em;
 }
-@media (max-width: 600px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .copy-icon {
-    bottom: var(--o-gap-2);
-    transform: revert;
-    top: revert;
-    right: calc(20px + var(--o-gap-2));
+@media (max-width: 1680px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .copy-icon {
+    font-size: 20px;
+}
+}
+@media (max-width: 840px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .copy-icon {
+    font-size: 24px;
 }
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .copy-icon:hover {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .copy-icon:hover {
   color: var(--o-color-primary1);
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .copy-icon svg path {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-header .o-collapse-item-title .copy-icon svg path {
   fill: currentColor;
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-body {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-body {
   margin-bottom: 0;
-  padding: var(--o-gap-4) 0 0;
+  padding: var(--o-gap-2) 0 0;
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-body .activity-detail {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-body .activity-detail {
   padding-left: calc(var(--o-gap-3) + var(--icon-size));
 }
 @media (max-width: 600px) {
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-body .activity-detail {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-body .activity-detail {
     padding-left: 0;
 }
 }
-.o-my-activity-calendar .list-body .o-collapse .o-collapse-item-body .activity-detail .activity-btn {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-body .activity-detail .activity-btn {
   border-top: 1px solid var(--o-color-control4);
-  margin-top: var(--o-gap-5);
+  margin-top: var(--o-gap-4);
   padding-top: var(--o-gap-4);
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--o-gap-5);
 }
-.o-my-activity-calendar .list-body .o-collapse .o-btn.o-btn-text {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-  min-width: auto;
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-body .activity-detail .activity-btn {
+    margin-top: var(--o-gap-3);
+    padding-top: var(--o-gap-3);
 }
-@media (hover: hover) {
-.o-my-activity-calendar .list-body .o-collapse .o-btn-text:hover {
-    background-color: transparent;
-    color: var(--o-color-primary1);
+}
+@media (max-width: 840px) {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-body .activity-detail .activity-btn {
+    margin-top: var(--o-gap-2);
+    padding-top: var(--o-gap-2);
 }
 }
-.o-my-activity-calendar .list-body .o-collapse .o-btn.o-btn-text {
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-collapse-item-body .activity-detail .activity-btn .o-link {
+  --link-color: inherit;
+}
+.o-my-activity-calendar .activity-list .list-body .o-collapse .o-btn.o-btn-text {
   padding-left: 0 !important;
   padding-right: 0 !important;
   min-width: auto;
 }
-.o-my-activity-calendar .list-body .load-text {
+.o-my-activity-calendar .activity-list .list-body .load-text {
   text-align: center;
   color: var(--o-color-info3);
   font-size: 14px;
   line-height: 22px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.o-my-activity-calendar .list-body .load-text {
+.o-my-activity-calendar .activity-list .list-body .load-text {
     font-size: 14px;
     line-height: 18px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-my-activity-calendar .list-body .load-text {
+.o-my-activity-calendar .activity-list .list-body .load-text {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.o-my-activity-calendar .list-body .load-text {
+.o-my-activity-calendar .activity-list .list-body .load-text {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (max-width: 600px) {
-.o-my-activity-calendar .list-body .load-text {
+.o-my-activity-calendar .activity-list .list-body .load-text {
     font-size: 12px;
     line-height: 18px;
 }
+}
+.o-my-activity-calendar [data-o-theme*=dark] .act-bar.is-end {
+  --active-color: rgb(65, 65, 68) !important;
+}
+.o-my-activity-calendar [data-o-theme*=dark] .activity-list .is-today .date-cell-text {
+  color: #fff !important;
 }