.page-checklist{background-color:#FCF9F4}
/* .section{padding:30px 0}
@media (min-width:1070px){
  .section{padding:40px 30px}
} */


/* Common : icon -------------------- */
.item-icon{width:72px; height:72px; border-radius:999px; display:flex; justify-content:center; align-items:center; background:#F4F4F4 no-repeat center / 38px}
/* basic */
.greeting .item-icon{background-image:url('/images/checklist/ico_greeting.svg')}
.thanks .item-icon{background-image:url('/images/checklist/ico_thanks.svg')}
.apology .item-icon{background-image:url('/images/checklist/ico_apology.svg')}
.tolerance .item-icon{background-image:url('/images/checklist/ico_tolerance.svg')}
.yield .item-icon{background-image:url('/images/checklist/ico_yield.svg')}
.esteem .item-icon{background-image:url('/images/checklist/ico_esteem.svg')}
.cheerup .item-icon{background-image:url('/images/checklist/ico_cheerup.svg')}
/* checked */
.checked.greeting .item-icon{background-color:var(--rainbow1); background-image:url('/images/checklist/ico_greeting_on.svg')}
.checked.thanks .item-icon{background-color:var(--rainbow2); background-image:url('/images/checklist/ico_thanks_on.svg')}
.checked.apology .item-icon{background-color:var(--rainbow3); background-image:url('/images/checklist/ico_apology_on.svg')}
.checked.tolerance .item-icon{background-color:var(--rainbow4); background-image:url('/images/checklist/ico_tolerance_on.svg')}
.checked.yield .item-icon{background-color:var(--rainbow5); background-image:url('/images/checklist/ico_yield_on.svg')}
.checked.esteem .item-icon{background-color:var(--rainbow6); background-image:url('/images/checklist/ico_esteem_on.svg')}
.checked.cheerup .item-icon{background-color:var(--rainbow7); background-image:url('/images/checklist/ico_cheerup_on.svg')}


/* Common : check-item */
.check-item{display:flex; flex-direction:column; gap:12px}
.check-item li{margin-bottom:-1px}
.check-item .item{display:flex; justify-content:center; align-items:center; gap:12px; cursor:pointer; padding:12px 20px 12px 12px; border:1px solid #F5F5F5; border-radius:200px; background-color:#FFF}
.check-item .item-icon{flex-shrink:0}
/* text */
.check-item .text{flex-grow:1}
.check-item .text .info{line-height:1.3}
.check-item .text .theme{display:inline-block; background-color:var(--color-primary); padding:4px 5px; border-radius:5px; font-size:12px; color:#FFF; margin-right:5px; line-height:1}
.check-item .text .desc{font-size:13px; color:#777}
.check-item .text .title{font-size:16px; font-weight:500; margin-top:3px; line-height:1.3}
/* check mark */
.check-item .item::after{content:''; width:19px; height:19px; background:url('/images/checklist/check.svg') no-repeat center / contain; flex-shrink:0}
.check-item .item.checked::after{filter:brightness(0) saturate(100%) invert(58%) sepia(39%) saturate(7448%) hue-rotate(325deg) brightness(108%) contrast(84%)}

@media (min-width:768px){
  .check-item .item{gap:16px; padding:11px 30px 11px 11px}
}
@media (min-width:1070px){
  .check-item{gap:0}
  .check-item .text .info{line-height:1.4}
  .check-item .text .desc{font-size:15px}
  .check-item .text .title{font-size:18px; margin-top:5px}
}
@media (min-width:1400px){
  .check-item .text .title{font-size:20px}
}
/* @media (max-width:375px){
  .check-item .item{padding-right:16px; gap:10px}
  .check-item .item-icon{width:50px; height:50px; background-size:30px}
  .check-item .text .theme{font-size:11px}
  .check-item .text .desc{font-size:12px}
  .check-item .text .title{font-size:15px}
} */



/* ----------------------------------------
Page Title
---------------------------------------- */
.page-checklist .page-header .wrap::after{background-image:url('/images/checklist/visual.svg')}

.page-header .theme{font-size:15px; color:#9E7B6D; font-weight:500; line-height:1.4}
@media (min-width:1070px){
  .page-header .theme{font-size:23px}
}
/* .page-header{padding-bottom:20px}
.page-header .wrap{display:flex; justify-content:center; align-items:center; gap:30px}
.page-header .wrap::after{content:''; width:104px; height:112px; background:url('/images/checklist/visual.svg') no-repeat center; background-size:contain; flex-shrink:0}
.page-header .text{flex-grow:1}
.page-header .text br{display:none}
.page-header .theme{font-size:15px; color:#9E7B6D; font-weight:500; line-height:1.4}
.page-header .title{font-size:26px; color:#080808; font-weight:600; line-height:1.3; margin-top:7px; letter-spacing:-0.03em;}
.page-header .desc{font-size:15px; color:#777; line-height:1.5; margin-top:7px}
@media (min-width:1070px){
  .page-header{padding-bottom:40px}
  .page-header .text br{display:block}
  .page-header .theme{font-size:23px}
  .page-header .title{font-size:56px; margin-top:9px}
  .page-header .desc{font-size:19px; line-height:1.5; margin-top:9px}
  .page-header .wrap::after{width:164px; height:175px}
}
@media (max-width:375px){
  .page-header .wrap::after{width:84px}
} */




/* ----------------------------------------
Daily Check
---------------------------------------- */
.checklist{padding:30px 0}
.checklist .inner{--top-space:50px; margin:0 auto; display:flex; flex-direction:column; gap:60px}
@media (min-width:1070px){
  /* .checklist{padding-left:30px; padding-right:30px} */
  .checklist{padding:30px 0 80px}
  .checklist .inner{flex-direction:row; gap:32px; max-width:var(--width-lg); padding:0 30px}
}

/* daily -------------------- */
.daily{width:100%}
.today .date{font-size:15px; font-weight:600; color:#333; display:flex; align-items:center; gap:6px; margin-bottom:20px}
.today .date::before{content:''; width:19px; height:20px; background:url('/images/checklist/ico_calendar.svg') no-repeat center / contain; display:inline-block}
@media (min-width:1070px){
  .daily{flex-grow:1; padding:0; width:auto}
  .today{height:var(--top-space)}
  .today .date{font-size:18px; gap:8px}
}

@media (max-width:767px){
  :is(.pop-check, .checklist) .check-item{flex-wrap:wrap; flex-direction:initial}
  :is(.pop-check, .checklist) .check-item li{width:calc(50% - 6px); margin-bottom:0; flex:initial}
  :is(.pop-check, .checklist) .check-item .item{border:1px solid #F4F4F4; flex-direction:column; gap:12px; border-radius:16px; height:100%; padding:14px}
  :is(.pop-check, .checklist) .check-item .text{text-align:center}
  :is(.pop-check, .checklist) .check-item .text .theme{border-radius:30px; padding:5px 7px}
  :is(.pop-check, .checklist) .check-item .text .desc{display:block; margin-top:8px; line-height:1.4}
  :is(.pop-check, .checklist) .check-item .text .title{margin-top:4px}
  :is(.pop-check, .checklist) .check-item .item::after{display:none}
  :is(.pop-check, .checklist) .check-item .item.checked .check-badge{border-color:#FF4B5A}
  :is(.pop-check, .checklist) .check-item .item.checked .check-badge::before{background-color:#FF4B5A}
  .check-badge{width:100%; height:100%; border:3px solid #F4F4F4; border-radius:999px; position:relative}
  .check-badge::before{content:''; position:absolute; right:-3px; bottom:-3px; border:2px solid #FFF; width:22px; height:22px; border-radius:999px; background:#DDD url('/images/checklist/check_white.svg') no-repeat center / 10px}
  /* checked */
  :is(.pop-check, .checklist) .greeting .theme{background-color:var(--rainbow1)}
  :is(.pop-check, .checklist) .thanks .theme{background-color:var(--rainbow2)}
  :is(.pop-check, .checklist) .apology .theme{background-color:var(--rainbow3)}
  :is(.pop-check, .checklist) .tolerance .theme{background-color:var(--rainbow4)}
  :is(.pop-check, .checklist) .yield .theme{background-color:var(--rainbow5)}
  :is(.pop-check, .checklist) .esteem .theme{background-color:var(--rainbow6)}
  :is(.pop-check, .checklist) .cheerup .theme{background-color:var(--rainbow7)}
}




/* monthly -------------------- */
.monthly{width:100%; max-width:100%; background-color:#FFF}
.monthly .calendar{background-color:#FFF; padding:50px 25px 50px 30px}
/* legend */
.clandar-legend{display:flex; font-size:14px; color:#888; gap:12px; row-gap:4px; margin-top:20px; flex-wrap:wrap}
.clandar-legend > div{display:flex; align-items:center; gap:5px}
.clandar-legend > div::before{flex-shrink:0}
.clandar-legend .part::before{content:''; width:13px; height:13px; background-color:#FFD4DB; border-radius:999px}
.clandar-legend .all::before{content:''; width:15px; height:14px;; background:url('/images/checklist/ico_calendar_legend_clap.svg') no-repeat center / contain; display:block}
@media (min-width:1070px){
  .monthly{width:560px; padding-top:var(--top-space); background-color:transparent}
  .monthly .calendar{height:100%; border:1px solid rgba(0,0,0,0.04); border-radius:40px; padding:46px}
  .clandar-legend{margin-top:40px}
}

/* calendar : custom */
.fc-header-toolbar{padding-right:5px; flex-wrap:wrap; row-gap:15px}
.fc .fc-scrollgrid table,
.fc .fc-daygrid-body{width:100% !important; height:100% !important}
.fc .fc-toolbar-title{font-weight:600; font-size:17px}
.fc .fc-button-primary,
.fc .fc-button-primary:disabled,
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active{border:1px solid #E9E9E9; background-color:#FFF; color:#888}
.fc .fc-button-primary:hover{background-color:#F7F7F7; color:#888; border-color:#E9E9E9}
.fc .fc-button{padding:5px 6px; font-size:13px; border-radius:4px}
.fc .fc-button:focus,
.fc .fc-button-primary:focus{box-shadow:none}
.fc .fc-button .fc-icon{display:inline-flex; align-items:center}
.fc-today-button{padding:5px 7px !important}

.fc{margin:0 auto} /*width:466px*/
.fc .fc-view-harness{height:360px !important}
.fc-theme-standard th{font-size:14px}
.fc-theme-standard .fc-scrollgrid,
.fc-theme-standard td,
.fc-theme-standard th{border:0}
.fc-theme-standard td{padding:0; vertical-align:middle}
.fc-theme-standard .fc-daygrid-day-frame{background:transparent; border-radius:999px; width:38px; height:38px; margin:0 auto; min-height:auto}
.engagement-part .fc-daygrid-day-frame{background-color:#FFEDF0}
.engagement-all .fc-daygrid-day-frame{background-color:#FFF08B; position:relative}
.engagement-all .fc-daygrid-day-frame::before{content:''; position:absolute; top:-7px; right:-5px; width:22px; height:22px; background:url('/images/checklist/ico_clap.svg') no-repeat center / contain}
.fc .fc-daygrid-day.fc-day-today{background-color:transparent}
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number{color:#EB616B}
.fc .fc-daygrid-day-top{height:100%; justify-content:center; align-items:center}
.fc .fc-daygrid-day-events{display:none}
.fc .fc-daygrid-day-number{font-size:15px; font-weight:600; font-family:Helvetica, sans-serif; color:#444}

@media (min-width:640px){
  .fc .fc-view-harness{height:460px !important}
  .fc-header-toolbar{padding-right:0}
  .fc-theme-standard .fc-daygrid-day-frame{width:48px; height:48px}
  .engagement-all .fc-daygrid-day-frame::before{top:-5px; right:-5px; width:25px; height:25px}
  .fc-theme-standard th{font-size:16px}
  .fc-theme-standard td{padding:10px 0}
  .fc .fc-daygrid-day-number{font-size:17px}
}
@media (min-width:1070px){
  .fc .fc-toolbar-title{font-size:20px}
}
@media (max-width:320px){
  .fc-theme-standard .fc-daygrid-day-frame{width:32px; height:32px}
  .engagement-all .fc-daygrid-day-frame::before{width:19px; height:19px; right:-3px}
  .fc .fc-daygrid-day-number{font-size:14px}
}




/* pop-check -------------------- */
.pop-check .today{margin-top:15px}
.pop-check .today .date{font-size:16px}
.pop-check .pop-con{width:100%; padding:0 30px; overflow-y:auto}
@media(min-width:768px){
  .pop-check .item-icon{width:64px; height:64px}
  .pop-check .check-item .text .title{font-size:17px}
  .pop-check .check-item .text .desc{font-size:14px}
  .pop-check .today .date{font-size:14px}
}




/* ----------------------------------------
Data
---------------------------------------- */
.mydata{text-align:center; padding-top:20px; padding-bottom:20px}
.mydata .wrap > *:not(:first-child){margin-top:30px}
@media (min-width:1070px){
  .mydata{padding-top:0; padding-bottom:70px}
  .mydata .wrap{max-width:var(--width-lg)}
  .mydata .wrap > *:not(:first-child){margin-top:40px}
}

/* flower */
.mydata .flower-sway{width:200px; height:100px; margin:0 auto}
@media (min-width:1070px){
  .mydata .flower-sway{width:270px; height:140px}
}

/* tab */
.mydata .tabs{display:flex; gap:6px; flex-wrap:wrap; justify-content:center}
.mydata .tabs .tab{box-shadow:0 0 0 1px inset rgba(0,0,0,0.1); border-radius:50px; text-align:center; padding:10px 20px; min-width:90px; color:#9E7B6D; font-size:15px; cursor:pointer; background-color:#FFF}
.mydata .tabs .tab:hover{background-color:#f8f2e0}
.mydata .tabs .tab.active{background-color:#9E7B6D; color:#FFF; box-shadow:none}

/* total */
.total-text{font-size:18px; font-weight:600}

/* item */
.mydata .items{display:flex; flex-wrap:wrap; max-width:368px; margin:20px auto 0 !important}
.mydata .items li{width:33.333%; padding:8px}
.mydata .items .text{margin-top:10px}
.mydata .items .title{font-size:17px; color:#333; line-height:1.2}
.mydata .items .count{font-size:15px; color:var(--color-primary); font-weight:600}
.mydata .item-icon{width:100%; padding-top:100%; background-size:41px; margin:0 auto; background-color:#FFF}

.mydata .items .thanks .item-icon{background-image:url('/images/checklist/ico_thanks_data.svg')}
/* .mydata .items .yield .item-icon{background-image:url('/images/checklist/ico_yield_data.svg')} */
.mydata .items .cheerup .item-icon{background-image:url('/images/checklist/ico_cheerup_data.svg')}

@media (min-width:414px){
  .mydata .items li{padding:12px}
}
@media (min-width:640px){
  .mydata .items{max-width:600px}
  .mydata .items li{width:25%; padding:12px 20px}
  .mydata .item-icon{background-size:46px}
}
@media (min-width:1070px){
  .mydata .tabs .tab{font-size:16px; padding:11px 20px; min-width:100px}
  .total-text{font-size:24px}
  .mydata .items{max-width:100%; justify-content:center; margin-top:30px !important}
  .mydata .items li{width:140px; padding:15px}
  .mydata .items .title{font-size:19px; line-height:1.3}
  .mydata .items .count{font-size:16px}
  .mydata .item-icon{background-size:56px}
}
@media (min-width:1400px){
  .mydata .items li{width:150px}
}