body * {
  transition: unset;
}

#daily_write_wrap {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
}

#daily_write_wrap * {
  font-family: 'HancomMalangMalang';
}

#daily_write_wrap select {
  padding: 0 16px;
  border-radius: 20px;
  background: transparent;
  border: none;
}

.dw-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.dw-header>.dw-controls>select {
  background: #FFF !important;
  color: rgb(250, 140, 115);
}

.dw-controls {
  display: flex;
  gap: 10px;
}

.year-select,
.month-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.dw-notice {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.daily-footer {
  font-size: 18px;
  color: rgb(250,140,115);
  padding: 10px 0;
  text-align:center;
}

.dw-section {
  margin-bottom: 40px;
}

.dw-dayweek-area {
  display: flex;
  gap: 16px;
  align-items: center;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e0e0e0;
}

.dw-calander .dw-calendar table {
  width: 100%;
  border-collapse: collapse;
}

.dw-calendar {
  background: rgb(250, 240, 240);
  padding: 16px;
  border-radius: 20px;
}

.dw-calendar th {
  padding: 20px 10px;
  text-align: center;
  font-size: 20px;
  font-weight: normal;
  color: rgb(255, 140, 115);
}

.dw-calendar tr {
  position: relative;
}

.dw-calendar td {
  border: 0;
  padding: 0;
}

.dw-day {
  cursor: pointer;
  vertical-align: top;
}

.dw-day:hover {
  background-color: #f5f5f5;
}

.dw-day.read-only {
  cursor: default;
}

.dw-day.read-only:hover {
  opacity: 0.8;
}

.dw-day.other-month .day-num,
.dw-day.other-month .day-info .dw-char,
.dw-day.other-month .day-info .dw-page {
  opacity: .5;
}

.day-num {
  border-top: 2px solid #FFF;
  background: rgb(250, 205, 205);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #FFF;
}

.day-info {
  min-height: 32px;
  font-size: 13px;
  display: flex;
  justify-content: center;
  padding: 0 8px;
  gap: 5px;
  color: rgb(240, 188, 188);
  font-weight: bold;
  background: #FFF;
  margin-bottom: 10px;
  position: relative;
}

.pass-label {
  left: -40px;
  position: absolute;
  border: 12px solid #FFF;
  border-left-color: transparent;
}

.pass-label.pass,
.pass-label.less,
.pass-label.state_a,
.pass-label.state_b {
  border-color: rgb(250,140,115);
  border-left-color: transparent;
}

.pass-label.all_pass {
  border-color: rgb(150, 190, 130);
  border-left-color: transparent;
}

.dw-day.all_pass .dw-char,
.dw-day.all_pass .dw-page {
  color: rgb(150, 190, 130);
}

.dw-day.pass .dw-char,
.dw-day.pass .dw-page {
  color: rgb(150, 190, 130);
}

.dw-day.less .dw-char,
.dw-day.less .dw-page {
  color: rgb(250, 140, 115);
}

.dw-day.state_a .dw-char {
  color: rgb(150, 190, 130);
}

.dw-day.state_a .dw-page {
  color: rgb(250, 140, 115);
}

.dw-day.state_b .dw-char {
  color: rgb(250, 140, 115);
}

.dw-day.state_b .dw-page {
  color: rgb(150, 190, 130);
}

.dw-weekly-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  min-width: 200px;
  background: rgb(170, 190, 220);
  border-top: 16px solid rgb(100, 120, 160);
}

.dw-weekly-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: #FFF;
  font-size: 20px;
  padding: 16px;
  margin-bottom: 8px;
  border-bottom: 2px dotted rgb(100, 120, 160);
}

.dw-weekly-header img {
  max-height: 64px;
  max-width: 64px;
}

.week-summary-item {
  flex: 1;
  box-sizing: border-box;
  padding: 5px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  color: #FFF;
}

.week-number {
  font-size: 16px;
  font-weight: bold;
  color: #FFF;
  text-align: right;
  min-width: 40px;
}

.week-stats {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  border-bottom: 2px solid rgb(100, 120, 160);
  padding: 4px 0;
}

.week-stats.week-no-border {
  border: unset;
}

.week-char {
  min-width: 90px;
}

.week-stat {
  display: flex;
  align-items: baseline;
  justify-content: end;
  gap: 4px;
}

.stat-value {
  font-weight: bold;
  color: #fff;
}

.stat-unit {
  font-size: 12px;
  color: #fff;
}

.week-summary-item.all_pass .stat-value,
.week-summary-item.all_pass .stat-unit,
.week-summary-item.pass .stat-value,
.week-summary-item.pass .stat-unit,
.week-summary-item.state_a .week-char .stat-value,
.week-summary-item.state_a .week-char .stat-unit,
.week-summary-item.state_b .week-page .stat-value,
.week-summary-item.state_b .week-page .stat-unit {
  color: rgb(20, 160, 115);
}

.week-summary-item.less .stat-value,
.week-summary-item.less .stat-unit,
.week-summary-item.state_a .week-page .stat-value,
.week-summary-item.state_a .week-page .stat-unit,
.week-summary-item.state_b .week-char .stat-value,
.week-summary-item.state_b .week-char .stat-unit {
  color: rgb(250, 140, 115);
}

.dw-yearly-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 20px 20px;
  margin-bottom: 10px;
  border-bottom: 2px dashed rgb(200, 180, 100);
}

.dw-yearly-header span {
  font-size: 20px;
}

.dw-heatmap-github {
  overflow-x: auto;
  padding: 16px 0;
  background: rgb(250, 240, 205);
  border-radius: 2px;
}

.dw-heatmap-github,
.dw-heatmap-github * {
  color: rgb(200, 180, 100);
}

.heatmap-container {
  padding-top: 20px;
  display: flex;
  gap: 4px;
  justify-content: center;
}

.heatmap-days {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.day-label {
  height: 14px;
  font-size: 11px;
  color: rgb(200, 180, 100);
  display: flex;
  align-items: center;
  text-align: right;
  width: 14px;
}

.heatmap-weeks-wrapper {
  display: flex;
  flex-direction: column;
}

.heatmap-months-top {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 15px;
  gap: 2px;
  margin-bottom: 5px;
  height: 20px;
}

.heatmap-weeks {
  display: flex;
  gap: 2px;
}

.heatmap-week {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 2px;
}

.month_week_label {
  position: absolute;
  top: 0;
  min-width: 40px;
  transform: translateY(-120%);
}

.heatmap-cell {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
}

.heatmap-cell:hover:not(.other-year) {
  transform: scale(1.3);
  z-index: 10;
}

.heatmap-cell.read-only:not(.other-year) {
  cursor: default;
}

.heatmap-cell.read-only:hover:not(.other-year) {
  transform: scale(1.25);
}

.heatmap-cell.other-year {
  background: #ffffff40 !important;
  cursor: default;
}

.heatmap-cell.other-year:hover {
  transform: none;
}


.heatmap-cell.all_pass {
  background: rgb(150, 190, 130);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 14 14'%3E%3Cpath class='cls-1' d='M7,13c-2.3-2-4-3.6-5.1-4.9S0,5,.6,3.4c.4-1.2,1.6-2.1,2.9-2.3,2.1-.4,3.4,1.3,3.5,1.4,0-.1,1.4-1.7,3.5-1.4,1.3.2,2.5,1.1,2.9,2.3.6,1.6-.2,3.2-1.3,4.7s-2.8,2.9-5.1,4.9Z'/%3E%3C/svg%3E");
  mask-size: cover;
  mask-position: center;
}

.heatmap-cell.pass {
  background: rgb(150, 190, 130);
  border-radius: 50%;
}

.heatmap-cell.less {
  background: rgb(250, 140, 115);
  border-radius: 50%;
}

.heatmap-cell.state_a {
  border: 7px solid rgb(150, 190, 130);
  border-bottom-color: rgb(250, 140, 115);
  border-right-color: rgb(250, 140, 115);
  border-radius: 50%;
}

.heatmap-cell.state_b {
  border: 7px solid rgb(150, 190, 130);
  border-top-color: rgb(250, 140, 115);
  border-left-color: rgb(250, 140, 115);
  border-radius: 50%;
}

.heatmap-cell.nodata {
  background: #ffffff;
  border-radius: 50%;
}

.dw-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.dw-modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 30px;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dw-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  line-height: 20px;
}

.dw-modal-close:hover {
  color: #000;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

.form-group input[type="number"] {
  width: 80%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-group input[type="checkbox"] {
  margin-right: 5px;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 30px;
}

.btn-primary,
.btn-secondary {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover {
  background: #0056b3;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #545b62;
}

#edit_date_display,
#view_date_display {
  font-size: 16px;
  color: #666;
  padding: 8px 0;
}

@media (max-width: 768px) {
  .week-summary-item {
    min-width: 120px;
  }

  .stat-value {
    font-size: 18px;
  }
}