/* 공통 :root는 /project/templates/css/common.css 기준 */
.page-head {max-width: var(--layout-width); margin: 0 auto; width:calc(100% - var(--layout-side-margin)); padding-top: var(--gap-100);}
.progress-title {font-size: var(--font-size-huge); line-height: 1.2; color: var(--color-dark); font-weight: 700;}

.progress-wrap {max-width: var(--layout-width); margin: 0 auto; width:calc(100% - var(--layout-side-margin)); padding: var(--gap-140) 0; display:flex; flex-wrap:wrap; gap:15px;}
.progress-item {display: flex; align-items: center; justify-content: space-between; gap: var(--gap-20); background-color: var(--color-bright); border: 1px solid var(--color-border); border-radius: 12px; padding: var(--gap-30); width:100%; box-sizing: border-box;}
.progress-item-title {font-size: var(--font-size-large); color: var(--color-dark);}

.progress-meta {display: flex; align-items: center; gap: var(--gap-30);}
.progress-date {font-size: var(--font-size-large); color: var(--color-dark);}
.progress-status {padding: 10px 18px; background-color: #D2D8DF; color: var(--color-bright); border-radius: 9999px; font-size: var(--font-size-small); line-height: 1;}

.status-completed{background-color:#D2D8DF;}
.status-in-progress{background-color:#C8B9AA;}
.status-planned{background-color:#C8AAAA;}

.button-wrap{max-width: var(--layout-width); margin: 0 auto; width:calc(100% - var(--layout-side-margin)); padding-bottom: var(--gap-140); display: flex; align-items: center; justify-content:center;}

/* 반응형 */
@media (max-width: 640px) {
  .progress-item {flex-direction: column; align-items: flex-start; gap: var(--gap-15);}
  .progress-meta {width: 100%; justify-content: space-between;}
}