:root {
    --ch-item-h: 64px;
    --ch-year-w: 220px;
    --ch-year-h: 190px;
    --ch-col-year : 40%;
    --ch-col-month: 10%;
    --ch-col-date : 10%;
    --ch-year-offset: 100px;
}

.custom-history-wrapper {
    max-width: 1280px;
    padding: 0 20px;
    margin: 0 auto;
    font-family: sans-serif;
    text-align: center;
    overflow: visible;
}

.custom-history-list {
    display: block;
}

.custom-history-item {
    display: grid;
    grid-template-columns: var(--ch-col-year) var(--ch-col-month) var(--ch-col-date) 1fr;
    align-items: start;
    min-height: var(--ch-item-h);
    position: relative;
    overflow: visible;
    gap: 10px;
    margin-bottom: 6px;
}

.custom-history-item.new-year {
    margin-top: 30px;
}

.custom-history-cell.year {
    position: relative;
    pointer-events: none;
}

.custom-history-year {
    position: absolute;
    top: calc(50% + var(--ch-year-offset));
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--ch-year-w);
    height: var(--ch-year-h);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: bold;
    color: #0072bc;
    background: url('http://healthandsafety1.mycafe24.com/wp-content/uploads/2025/05/Vector.png') center/cover no-repeat;
    z-index: 1;
}

.custom-history-cell.month {
    position: relative;
}

/* ✅ dot: 보이는 월만 표시 */
.custom-history-cell.month.has-month::before {
    content: '';
    position: absolute;
    left: -19px;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #0072bc;
    z-index: 1;
}

/* ✅ 점선: 모든 .month에 표시 */
.custom-history-cell.month::after {
    content: '';
    position: absolute;
    left: -15px;
    top: 50%;
    width: 1px;
    height: calc(var(--ch-item-h) + 40px);
    background: transparent;
    transform: translateY(0%);
    border-left: 1px dotted #0072bc;
    z-index: 0;
}

/* ✅ 마지막 항목은 점선 제거 */
.custom-history-item.last-of-year .custom-history-cell.month::after {
    display: none !important;
}



.custom-history-month {
    width: 100px;
    height: 36px;
    line-height: 36px;
    border-radius: 100px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    display: inline-block;
    font-size: clamp(13px, 1.6vw, 20px);
}

/* 월 배경색 */
.month-1 {background:#abcff6}.month-2{background:#99ccff}
.month-3 {background:#66b2ff}.month-4{background:#3399ff}
.month-5 {background:#0080ff}.month-6{background:#0066cc}
.month-7 {background:#005bb5}.month-8{background:#004c99}
.month-9 {background:#003d80}.month-10{background:#003366}
.month-11{background:#00264d}.month-12{background:#001933}

.custom-history-date {
    font-weight: bold;
    font-size: clamp(13px, 1.6vw, 20px);
}

.date-1 {color:#abcff6}.date-2{color:#99ccff}.date-3{color:#66b2ff}
.date-4 {color:#3399ff}.date-5{color:#0080ff}.date-6{color:#0066cc}
.date-7 {color:#005bb5}.date-8{color:#004c99}.date-9{color:#003d80}
.date-10{color:#003366}.date-11{color:#00264d}.date-12{color:#001933}

.custom-history-cell.content {
    text-align: left;
}

.custom-history-content {
    line-height: 1.5;
    font-size: clamp(13px, 1.6vw, 20px);
    white-space: pre-wrap;
    overflow: visible;
}

@media (max-width: 640px) {
  .custom-history-item {
    display: block;
    padding: 16px 0;
    margin-bottom: 20px;
    border-bottom: 1px dotted #ccc;
  }

  .custom-history-cell.year,
  .custom-history-cell.month,
  .custom-history-cell.date,
  .custom-history-cell.content {
    display: block;
    width: 100%;
    position: relative;
    margin-bottom: 6px;
  }

  .custom-history-year {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 140px;
    height: 140px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto 10px;
    font-size: clamp(22px, 5vw, 28px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .custom-history-cell.month.has-month::before {
    display: none !important;
    content: none !important;
    left: -8px; /* 필요 시 유지 가능 */
    top: 10px;  /* 👈 이 부분이 월 텍스트와 dot 수직 정렬 맞춰줌 */
    transform: none;
  }

  .custom-history-cell.month::after {
    display: none !important;
  }

  .custom-history-month {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 32px; /* 최소 높이 */
    padding: 4px 14px;
    font-size: clamp(12px, 3vw, 16px);
    border-radius: 100px;
    font-weight: bold;
    color: #fff;
    line-height: 1.2;
    text-align: center;
    vertical-align: middle;
  }

  .custom-history-date {
    display: inline-block;
    font-size: clamp(12px, 3.5vw, 15px);
    color: #0072bc;
    font-weight: bold;
    margin-bottom: 4px;
  }

  .custom-history-content {
    font-size: clamp(13px, 3.5vw, 16px);
    line-height: 1.6;
    margin-top: 4px;
    text-align: left;
  }
}