/* GILDONG_HOME_ATTENDANCE_STYLE_V1 */

body.gs-attendance-open{
  overflow:hidden;
}

.gs-attendance-overlay{
  position:fixed;
  inset:0;
  z-index:10040;

  display:grid;
  place-items:center;

  padding:22px;

  background:
    rgba(18,18,24,.56);

  backdrop-filter:
    blur(8px);

  animation:
    gsAttendanceFade .22s ease both;
}

.gs-attendance-modal{
  position:relative;

  width:min(440px,100%);

  overflow:hidden;

  box-sizing:border-box;

  border:
    1px solid rgba(255,255,255,.75);

  border-radius:28px;

  padding:
    38px 34px 30px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfbfd 100%
    );

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.25);

  text-align:center;

  animation:
    gsAttendanceUp
    .34s
    cubic-bezier(.18,.85,.32,1.08)
    both;
}

.gs-attendance-glow{
  position:absolute;
  width:300px;
  height:300px;
  left:50%;
  top:-205px;

  transform:
    translateX(-50%);

  border-radius:50%;

  background:
    rgba(28,28,35,.08);

  filter:
    blur(20px);

  pointer-events:none;
}

.gs-attendance-close{
  position:absolute;
  top:17px;
  right:18px;

  z-index:3;

  width:34px;
  height:34px;

  border:0;
  border-radius:50%;

  background:#f1f1f3;
  color:#686871;

  font-size:22px;
  line-height:1;

  cursor:pointer;
}

.gs-attendance-head > span,
.gs-attendance-success-label{
  display:block;

  color:#92929b;

  font-size:11px;
  font-weight:900;

  letter-spacing:.18em;
}

.gs-attendance-head h2,
.gs-attendance-success h2{
  margin:
    10px 0 8px;

  color:#17171d;

  font-size:28px;
  line-height:1.18;

  letter-spacing:-.045em;
}

.gs-attendance-head p{
  margin:0;

  color:#808089;

  font-size:13px;
}

.gs-attendance-stamp-wrap{
  display:grid;
  place-items:center;

  margin:
    26px 0 18px;
}

.gs-attendance-stamp{
  width:118px;
  height:118px;

  display:grid;
  place-content:center;

  box-sizing:border-box;

  border:
    4px double
    #202027;

  border-radius:50%;

  transform:
    rotate(-7deg);

  color:#202027;

  background:#fff;

  box-shadow:
    inset 0 0 0 5px #fff,
    inset 0 0 0 7px rgba(32,32,39,.12);
}

.gs-attendance-stamp span{
  display:block;

  font-size:13px;
  font-weight:950;

  letter-spacing:.18em;
}

.gs-attendance-stamp strong{
  display:block;

  margin-top:2px;

  font-size:25px;
  line-height:1;

  letter-spacing:-.05em;
}

.gs-attendance-today{
  display:grid;
  gap:3px;

  margin-bottom:19px;
}

.gs-attendance-today small{
  color:#8a8a93;

  font-size:11px;
  font-weight:800;
}

.gs-attendance-today strong{
  color:#17171c;

  font-size:31px;
  line-height:1.1;

  letter-spacing:-.04em;
}

.gs-attendance-milestones{
  display:grid;
  grid-template-columns:
    repeat(4,1fr);

  gap:7px;

  margin-bottom:22px;
}

.gs-attendance-milestones span{
  display:grid;

  gap:3px;

  padding:10px 4px;

  border:
    1px solid #e3e3e7;

  border-radius:11px;

  background:#fafafa;

  color:#888891;

  font-size:10px;
}

.gs-attendance-milestones b{
  color:#44444c;

  font-size:11px;
}

.gs-attendance-action{
  width:100%;
  height:50px;

  border:0;
  border-radius:14px;

  background:#18181e;
  color:#fff;

  font-size:14px;
  font-weight:900;

  cursor:pointer;

  transition:
    transform .15s ease,
    opacity .15s ease;
}

.gs-attendance-action:hover{
  transform:
    translateY(-1px);
}

.gs-attendance-action:disabled{
  opacity:.55;
  cursor:wait;
}

.gs-attendance-note{
  margin:
    13px 0 0;

  color:#a0a0a7;

  font-size:10px;
}

.gs-attendance-note.is-error{
  color:#a24a45;
}


/* RESULT */

.gs-attendance-modal.is-result{
  padding-top:34px;
}

.gs-attendance-success{
  position:relative;
}

.gs-attendance-success
.gs-attendance-stamp{
  margin:
    10px auto 18px;
}

.gs-attendance-stamp.is-stamped{
  animation:
    gsAttendanceStamp
    .55s
    cubic-bezier(.1,.85,.2,1.2)
    both;
}

.gs-attendance-reward-lines{
  display:grid;
  gap:8px;

  margin:
    20px 0 12px;
}

.gs-attendance-reward-lines > div{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:
    11px 14px;

  border-radius:11px;

  background:#f4f4f6;

  color:#66666f;

  font-size:12px;
}

.gs-attendance-reward-lines strong{
  color:#24242a;
}

.gs-attendance-reward-lines
.bonus{
  background:#f0eee7;
}

.gs-attendance-total-reward{
  display:grid;
  gap:2px;

  margin:
    16px 0 18px;
}

.gs-attendance-total-reward small{
  color:#92929a;

  font-size:10px;
  font-weight:800;
}

.gs-attendance-total-reward strong{
  color:#17171c;

  font-size:36px;
  letter-spacing:-.05em;
}

.gs-attendance-result-stats{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:8px;

  margin-bottom:20px;
}

.gs-attendance-result-stats span{
  display:grid;
  gap:4px;

  padding:12px;

  border:
    1px solid #e5e5e8;

  border-radius:11px;

  color:#93939b;

  font-size:10px;
}

.gs-attendance-result-stats b{
  color:#33333a;
  font-size:13px;
}

.gs-attendance-burst{
  position:absolute;
  width:170px;
  height:170px;

  left:50%;
  top:5px;

  transform:
    translateX(-50%);

  pointer-events:none;
}

.gs-attendance-burst i{
  position:absolute;

  left:50%;
  top:50%;

  width:5px;
  height:24px;

  border-radius:999px;

  background:#d2d2d7;

  transform-origin:
    50% 76px;

  animation:
    gsAttendanceBurst
    .7s ease both;
}

.gs-attendance-burst i:nth-child(1){transform:translate(-50%,-50%) rotate(0deg);}
.gs-attendance-burst i:nth-child(2){transform:translate(-50%,-50%) rotate(45deg);}
.gs-attendance-burst i:nth-child(3){transform:translate(-50%,-50%) rotate(90deg);}
.gs-attendance-burst i:nth-child(4){transform:translate(-50%,-50%) rotate(135deg);}
.gs-attendance-burst i:nth-child(5){transform:translate(-50%,-50%) rotate(180deg);}
.gs-attendance-burst i:nth-child(6){transform:translate(-50%,-50%) rotate(225deg);}
.gs-attendance-burst i:nth-child(7){transform:translate(-50%,-50%) rotate(270deg);}
.gs-attendance-burst i:nth-child(8){transform:translate(-50%,-50%) rotate(315deg);}


/* FIXED TRIGGER */

.gs-attendance-trigger{
  position:fixed;

  right:22px;
  bottom:22px;

  z-index:9800;

  display:flex;
  align-items:center;

  gap:10px;

  min-width:156px;

  border:
    1px solid rgba(20,20,25,.1);

  border-radius:17px;

  padding:
    10px 14px 10px 10px;

  background:
    rgba(255,255,255,.96);

  box-shadow:
    0 12px 35px
    rgba(20,20,25,.14);

  color:#232329;

  text-align:left;

  cursor:pointer;

  backdrop-filter:
    blur(10px);
}

.gs-attendance-trigger-icon{
  width:35px;
  height:35px;

  flex:0 0 35px;

  display:grid;
  place-items:center;

  border-radius:11px;

  background:#19191f;
  color:#fff;

  font-size:13px;
  font-weight:950;
}

.gs-attendance-trigger > span:last-child{
  display:grid;
  gap:2px;
}

.gs-attendance-trigger strong{
  font-size:12px;
}

.gs-attendance-trigger small{
  color:#92929a;

  font-size:9px;
}

.gs-attendance-trigger.is-complete
.gs-attendance-trigger-icon{
  background:#486b52;
}


/* ANIMATIONS */

@keyframes gsAttendanceFade{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes gsAttendanceUp{
  from{
    opacity:0;
    transform:
      translateY(14px)
      scale(.97);
  }

  to{
    opacity:1;
    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes gsAttendanceStamp{
  0%{
    opacity:0;
    transform:
      scale(1.65)
      rotate(-15deg);
  }

  60%{
    opacity:1;
    transform:
      scale(.92)
      rotate(-5deg);
  }

  100%{
    opacity:1;
    transform:
      scale(1)
      rotate(-7deg);
  }
}

@keyframes gsAttendanceBurst{
  0%{
    opacity:0;
  }

  45%{
    opacity:1;
  }

  100%{
    opacity:0;
  }
}


@media(max-width:620px){

  .gs-attendance-overlay{
    padding:14px;
  }

  .gs-attendance-modal{
    border-radius:23px;

    padding:
      34px 22px 25px;
  }

  .gs-attendance-head h2,
  .gs-attendance-success h2{
    font-size:25px;
  }

  .gs-attendance-trigger{
    right:14px;
    bottom:14px;

    min-width:auto;

    border-radius:50%;

    padding:8px;
  }

  .gs-attendance-trigger
  > span:last-child{
    display:none;
  }

  .gs-attendance-trigger-icon{
    width:39px;
    height:39px;
  }
}

/* /GILDONG_HOME_ATTENDANCE_STYLE_V1 */


/* =========================================================
   HOME ATTENDANCE V2
   - viewport clipping fix
   - calendar + alpaca stamp
========================================================= */


/* 세로가 작은 브라우저에서도 상단이 절대 잘리지 않게 */
.gs-attendance-overlay{
  display:flex;
  align-items:flex-start;
  justify-content:center;

  overflow-x:hidden;
  overflow-y:auto;

  box-sizing:border-box;

  padding:
    max(18px, env(safe-area-inset-top))
    22px
    max(18px, env(safe-area-inset-bottom));
}


.gs-attendance-modal{
  flex:0 0 auto;

  width:min(440px,100%);

  max-height:none;

  margin:auto 0;

  overflow:visible;
}


/* 기존 원형 스탬프 숨김/무효화 */
.gs-attendance-stamp{
  width:auto;
  height:auto;

  border:0;
  border-radius:0;

  box-shadow:none;

  background:transparent;

  transform:none;
}


/* 달력 */

.gs-attendance-stamp-wrap{
  margin:
    24px 0 18px;
}


.gs-attendance-calendar{
  position:relative;

  width:170px;
  height:182px;

  margin:0 auto;

  overflow:visible;

  border:
    2px solid #24242a;

  border-radius:
    16px 16px 21px 21px;

  background:#fff;

  box-shadow:
    0 9px 0 rgba(30,30,35,.06),
    0 14px 30px rgba(30,30,35,.10);

  transform:
    rotate(-2deg);
}


/* 달력 고리 */

.gs-attendance-calendar-rings{
  position:absolute;

  left:0;
  right:0;
  top:-11px;

  display:flex;
  justify-content:space-around;

  padding:
    0 26px;

  pointer-events:none;
}


.gs-attendance-calendar-rings i{
  position:relative;

  width:13px;
  height:28px;

  border:
    3px solid #24242a;

  border-radius:999px;

  background:#fff;

  box-sizing:border-box;
}


.gs-attendance-calendar-head{
  height:47px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  box-sizing:border-box;

  padding:
    11px 14px 7px;

  border-bottom:
    2px solid #24242a;

  border-radius:
    13px 13px 0 0;

  background:#f0eee7;
}


.gs-attendance-calendar-head span{
  color:#29292f;

  font-size:13px;
  font-weight:950;

  letter-spacing:.08em;
}


.gs-attendance-calendar-head strong{
  color:#88878a;

  font-size:7px;
  font-weight:900;

  letter-spacing:.13em;
}


.gs-attendance-calendar-body{
  position:relative;

  height:133px;

  display:grid;
  place-items:center;
}


.gs-attendance-calendar-day{
  position:absolute;

  left:13px;
  top:7px;

  color:#b1b0b2;

  font-size:19px;
  font-weight:950;

  line-height:1;
}


/* 알파카 고무도장 */

.gs-attendance-alpaca-stamp{
  position:relative;

  width:105px;
  height:105px;

  display:grid;
  place-items:center;

  border:
    4px double
    rgba(69,89,72,.62);

  border-radius:50%;

  color:#486550;

  opacity:.48;

  transform:
    rotate(-9deg);

  box-shadow:
    inset 0 0 0 5px #fff,
    inset 0 0 0 7px rgba(72,101,80,.12);
}


.gs-attendance-alpaca-stamp img{
  width:65px;
  height:65px;

  opacity:.86;

  color:inherit;
}


.gs-attendance-alpaca-stamp strong{
  position:absolute;

  left:50%;
  bottom:7px;

  transform:
    translateX(-50%);

  white-space:nowrap;

  padding:
    2px 7px;

  background:#fff;

  color:inherit;

  font-size:13px;
  font-weight:950;

  letter-spacing:-.04em;
}


/* 완료된 알파카 도장 */

.gs-attendance-calendar.is-complete
.gs-attendance-alpaca-stamp{
  opacity:1;

  animation:
    gsAlpacaStamp
    .58s
    cubic-bezier(.12,.85,.18,1.15)
    both;
}


.gs-attendance-calendar.is-complete{
  animation:
    gsCalendarBounce
    .58s
    cubic-bezier(.12,.85,.18,1.15)
    both;
}


/* 완료 화면에서는 달력과 제목 간격 조금 압축 */

.gs-attendance-success
.gs-attendance-calendar{
  margin:
    8px auto 19px;
}


/* 기존 burst를 달력 중심에 맞춤 */

.gs-attendance-burst{
  top:23px;
  width:190px;
  height:190px;
}


/* 모바일/작은 세로 화면 */

@media(max-height:760px){

  .gs-attendance-overlay{
    padding-top:12px;
    padding-bottom:12px;
  }


  .gs-attendance-modal{
    margin:0;

    padding:
      25px 28px 23px;
  }


  .gs-attendance-calendar{
    width:145px;
    height:155px;
  }


  .gs-attendance-calendar-head{
    height:41px;
  }


  .gs-attendance-calendar-body{
    height:112px;
  }


  .gs-attendance-alpaca-stamp{
    width:88px;
    height:88px;
  }


  .gs-attendance-alpaca-stamp img{
    width:54px;
    height:54px;
  }


  .gs-attendance-stamp-wrap{
    margin:
      17px 0 13px;
  }


  .gs-attendance-head h2,
  .gs-attendance-success h2{
    margin-top:6px;
    font-size:24px;
  }


  .gs-attendance-milestones{
    margin-bottom:15px;
  }


  .gs-attendance-action{
    height:46px;
  }
}


@media(max-width:620px){

  .gs-attendance-overlay{
    align-items:flex-start;

    padding:
      max(12px, env(safe-area-inset-top))
      14px
      max(12px, env(safe-area-inset-bottom));
  }


  .gs-attendance-modal{
    margin:auto 0;
  }


  .gs-attendance-calendar{
    width:150px;
    height:160px;
  }


  .gs-attendance-calendar-head{
    height:42px;
  }


  .gs-attendance-calendar-body{
    height:116px;
  }


  .gs-attendance-alpaca-stamp{
    width:90px;
    height:90px;
  }


  .gs-attendance-alpaca-stamp img{
    width:55px;
    height:55px;
  }
}


@keyframes gsAlpacaStamp{

  0%{
    opacity:0;

    transform:
      scale(1.85)
      rotate(-18deg);
  }

  55%{
    opacity:1;

    transform:
      scale(.88)
      rotate(-7deg);
  }

  76%{
    transform:
      scale(1.06)
      rotate(-10deg);
  }

  100%{
    opacity:1;

    transform:
      scale(1)
      rotate(-9deg);
  }
}


@keyframes gsCalendarBounce{

  0%{
    transform:
      translateY(-8px)
      rotate(-2deg)
      scale(1.04);
  }

  65%{
    transform:
      translateY(3px)
      rotate(-2deg)
      scale(.98);
  }

  100%{
    transform:
      translateY(0)
      rotate(-2deg)
      scale(1);
  }
}


/* /GILDONG_HOME_ATTENDANCE_V2 */


/* =========================================================
   HOME ATTENDANCE V3
   REAL MONTH CALENDAR
========================================================= */


/* V2 달력 카드 구조는 더 이상 사용하지 않음 */

.gs-attendance-calendar{
  display:none !important;
}


/* 팝업 폭을 월간 달력에 맞게 조금 넓힘 */

.gs-attendance-modal{
  width:min(480px,100%);
}


/* 월간 달력 */

.gs-attendance-month{
  width:100%;

  box-sizing:border-box;

  margin:
    23px auto 19px;

  padding:
    18px 17px 16px;

  border:
    1px solid #e0e0e4;

  border-radius:18px;

  background:#fff;

  box-shadow:
    0 12px 28px
    rgba(20,20,25,.06);
}


.gs-attendance-month-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:12px;

  padding:
    0 3px 14px;

  border-bottom:
    1px solid #eeeeF1;
}


.gs-attendance-month-title strong{
  color:#202027;

  font-size:18px;
  line-height:1;

  letter-spacing:-.04em;
}


.gs-attendance-month-title span{
  color:#a0a0a7;

  font-size:8px;
  font-weight:900;

  letter-spacing:.15em;
}


.gs-attendance-weekdays{
  display:grid;

  grid-template-columns:
    repeat(7,1fr);

  padding:
    12px 0 7px;
}


.gs-attendance-weekdays span{
  color:#9999a1;

  font-size:10px;
  font-weight:800;

  text-align:center;
}


.gs-attendance-weekdays span:first-child{
  color:#bb7773;
}


.gs-attendance-weekdays span:last-child{
  color:#73869f;
}


.gs-attendance-days{
  display:grid;

  grid-template-columns:
    repeat(7,1fr);

  gap:4px;
}


.gs-attendance-day{
  position:relative;

  min-width:0;

  aspect-ratio:1 / 1;

  display:grid;
  place-items:center;

  border-radius:10px;

  color:#66666e;

  font-size:11px;

  background:#fafafa;
}


.gs-attendance-day.is-empty{
  background:transparent;
}


.gs-attendance-day-number{
  position:relative;

  z-index:1;
}


/* 오늘 칸 */

.gs-attendance-day.is-today{
  background:
    #f4f3ef;

  outline:
    1px solid #deddd7;

  color:#222229;

  font-weight:900;
}


.gs-attendance-day.is-today
.gs-attendance-day-number{
  position:absolute;

  left:5px;
  top:4px;

  font-size:9px;

  color:#8d8d94;
}


/* 원형 도장 - 처음 버전의 단정한 느낌 */

.gs-attendance-day-stamp{
  position:absolute;

  left:50%;
  top:50%;

  width:50px;
  height:50px;

  display:grid;
  place-content:center;

  box-sizing:border-box;

  border:
    3px double
    #4e6755;

  border-radius:50%;

  transform:
    translate(-50%,-50%)
    rotate(-8deg)
    scale(.88);

  background:
    rgba(255,255,255,.92);

  color:#4e6755;

  opacity:.38;

  box-shadow:
    inset 0 0 0 3px
    rgba(255,255,255,.95);
}


.gs-attendance-alpaca-mark{
  display:block;

  height:22px;

  font-size:18px;
  line-height:22px;

  filter:
    grayscale(1);

  text-align:center;
}


.gs-attendance-day-stamp strong{
  display:block;

  margin-top:-1px;

  white-space:nowrap;

  font-size:7px;
  line-height:1;

  letter-spacing:-.05em;
}


/* 출석 완료 시 도장 */

.gs-attendance-day.is-checked
.gs-attendance-day-stamp{
  opacity:1;

  animation:
    gsMonthlyStamp
    .58s
    cubic-bezier(.12,.9,.2,1.2)
    both;
}


.gs-attendance-day.is-checked{
  animation:
    gsTodayCellFlash
    .7s ease both;
}


/* 완료 화면 달력 간격 */

.gs-attendance-success
.gs-attendance-month{
  margin:
    7px auto 17px;
}


/* 기존 성공 burst 위치도 월간 달력 상단을 가리지 않게 */

.gs-attendance-success
.gs-attendance-burst{
  display:none;
}


/* 작은 세로 화면에서도 상단 안 잘리게 유지 */

@media(max-height:800px){

  .gs-attendance-modal{
    margin:0;

    padding:
      23px 28px 22px;
  }


  .gs-attendance-month{
    margin:
      13px auto 12px;

    padding:
      13px 14px 12px;
  }


  .gs-attendance-month-title{
    padding-bottom:9px;
  }


  .gs-attendance-weekdays{
    padding:
      8px 0 5px;
  }


  .gs-attendance-days{
    gap:3px;
  }


  .gs-attendance-day-stamp{
    width:44px;
    height:44px;
  }


  .gs-attendance-alpaca-mark{
    height:19px;

    font-size:15px;
    line-height:19px;
  }


  .gs-attendance-day-stamp strong{
    font-size:6px;
  }
}


@media(max-width:620px){

  .gs-attendance-modal{
    width:min(430px,100%);
  }


  .gs-attendance-month{
    padding:
      15px 12px 13px;
  }


  .gs-attendance-day{
    border-radius:8px;
  }


  .gs-attendance-day-stamp{
    width:43px;
    height:43px;
  }
}


@keyframes gsMonthlyStamp{

  0%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      rotate(-15deg)
      scale(1.8);
  }

  55%{
    opacity:1;

    transform:
      translate(-50%,-50%)
      rotate(-6deg)
      scale(.82);
  }

  76%{
    transform:
      translate(-50%,-50%)
      rotate(-9deg)
      scale(1.08);
  }

  100%{
    opacity:1;

    transform:
      translate(-50%,-50%)
      rotate(-8deg)
      scale(.88);
  }
}


@keyframes gsTodayCellFlash{

  0%{
    background:#f4f3ef;
  }

  50%{
    background:#e9efe9;
  }

  100%{
    background:#f4f3ef;
  }
}


/* /GILDONG_HOME_ATTENDANCE_V3 */

/* =========================================================
   ATTENDANCE TRIGGER TOP V1
========================================================= */

/*
 * 기존 우측 하단 고정 버튼을
 * 헤더 아래 우측 상단 상태 배지로 이동.
 */
.gs-attendance-trigger{
  top:118px;
  right:22px;
  bottom:auto;

  min-width:144px;

  padding:
    8px 12px 8px 8px;

  border-radius:15px;

  box-shadow:
    0 8px 24px
    rgba(20,20,25,.12);
}


.gs-attendance-trigger-icon{
  width:31px;
  height:31px;

  flex-basis:31px;

  border-radius:9px;

  font-size:11px;
}


.gs-attendance-trigger strong{
  font-size:11px;
}


.gs-attendance-trigger small{
  font-size:9px;
}


/*
 * 상단에 있으므로 화면을 가리지 않게
 * 약간 투명하게 시작하고 hover 시 선명하게.
 */
.gs-attendance-trigger{
  opacity:.92;

  transition:
    opacity .16s ease,
    transform .16s ease,
    box-shadow .16s ease;
}


.gs-attendance-trigger:hover{
  opacity:1;

  transform:
    translateY(-1px);

  box-shadow:
    0 11px 30px
    rgba(20,20,25,.16);
}


/* 모바일은 헤더 아래 우측 작은 원형 버튼 */
@media(max-width:620px){

  .gs-attendance-trigger{
    top:82px;
    right:12px;
    bottom:auto;

    min-width:auto;

    padding:7px;

    border-radius:50%;
  }


  .gs-attendance-trigger-icon{
    width:36px;
    height:36px;

    flex-basis:36px;
  }


  .gs-attendance-trigger
  > span:last-child{
    display:none;
  }
}

/* /ATTENDANCE TRIGGER TOP V1 */


/* =========================================================
   ATTENDANCE HEADER ICON FINAL V1
========================================================= */

/*
 * 기존 floating 출석 버튼은 기본적으로 숨김.
 */
.gs-attendance-trigger{
  display:none !important;
}


/*
 * shared-auth 안에 정상 삽입된 경우에만 표시.
 * 기존 프로필 영역 CSS는 수정하지 않는다.
 */
.shared-auth
> .gs-attendance-trigger.is-header-icon{
  position:static !important;

  display:grid !important;
  place-items:center !important;

  flex:0 0 34px !important;

  width:34px !important;
  height:34px !important;

  min-width:34px !important;
  max-width:34px !important;

  margin:0 !important;
  padding:0 !important;

  border:
    1px solid
    rgba(255,255,255,.24) !important;

  border-radius:10px !important;

  background:
    rgba(255,255,255,.08) !important;

  box-shadow:none !important;

  opacity:1 !important;

  transform:none !important;

  overflow:hidden !important;

  cursor:pointer !important;

  backdrop-filter:
    blur(6px);
}


.shared-auth
> .gs-attendance-trigger.is-header-icon:hover{
  background:
    rgba(255,255,255,.15) !important;
}


/*
 * 내부 체크/P 아이콘.
 */
.shared-auth
> .gs-attendance-trigger.is-header-icon
.gs-attendance-trigger-icon{
  width:24px !important;
  height:24px !important;

  display:grid !important;
  place-items:center !important;

  border-radius:7px !important;

  background:
    rgba(255,255,255,.14) !important;

  color:#fff !important;

  font-size:11px !important;
  font-weight:900 !important;
}


.shared-auth
> .gs-attendance-trigger.is-header-icon.is-complete
.gs-attendance-trigger-icon{
  background:#4f7258 !important;
}


/*
 * 프로필과의 간격은 shared-auth의 기존 gap:9px 사용.
 * 프로필 자체에는 아무 스타일도 적용하지 않는다.
 */
@media(max-width:620px){

  .shared-auth
  > .gs-attendance-trigger.is-header-icon{
    flex-basis:30px !important;

    width:30px !important;
    height:30px !important;

    min-width:30px !important;
    max-width:30px !important;
  }


  .shared-auth
  > .gs-attendance-trigger.is-header-icon
  .gs-attendance-trigger-icon{
    width:21px !important;
    height:21px !important;
  }
}

/* /ATTENDANCE HEADER ICON FINAL V1 */

/* =========================================================
   ATTENDANCE HEADER POSITION FINAL
========================================================= */

/*
 * 프로필 컨테이너의 원래 레이아웃은 그대로 유지.
 * 출석 버튼만 absolute로 왼쪽 바깥에 배치한다.
 */
.shared-auth{
  position:relative !important;
}


/*
 * flex item에서 완전히 제외.
 * 따라서 프로필을 밀어내지 않는다.
 */
.shared-auth
> .gs-attendance-trigger{
  position:absolute !important;

  top:50% !important;
  right:calc(100% + 10px) !important;

  bottom:auto !important;
  left:auto !important;

  transform:
    translateY(-50%) !important;

  display:grid !important;
  place-items:center !important;

  width:34px !important;
  height:34px !important;

  min-width:34px !important;
  max-width:34px !important;

  margin:0 !important;
  padding:0 !important;

  border:
    1px solid rgba(255,255,255,.24) !important;

  border-radius:10px !important;

  background:
    rgba(255,255,255,.08) !important;

  box-shadow:none !important;

  opacity:1 !important;

  overflow:hidden !important;

  z-index:4 !important;

  cursor:pointer !important;

  backdrop-filter:
    blur(6px);
}


/*
 * 기존 두 줄 텍스트 강제 제거.
 * 체크/P 아이콘만 표시한다.
 */
.shared-auth
> .gs-attendance-trigger
> span:not(.gs-attendance-trigger-icon){
  display:none !important;
}


.shared-auth
> .gs-attendance-trigger
.gs-attendance-trigger-icon{
  width:24px !important;
  height:24px !important;

  display:grid !important;
  place-items:center !important;

  flex:none !important;

  margin:0 !important;

  border-radius:7px !important;

  background:
    rgba(255,255,255,.13) !important;

  color:#fff !important;

  font-size:11px !important;
  font-weight:900 !important;
}


.shared-auth
> .gs-attendance-trigger.is-complete
.gs-attendance-trigger-icon{
  background:#4f7258 !important;
}


.shared-auth
> .gs-attendance-trigger:hover{
  background:
    rgba(255,255,255,.15) !important;
}


/*
 * 중요:
 * 프로필 관련 shared-user-menu / shared-user /
 * avatar / text에는 아무 수정도 하지 않는다.
 */


/* 모바일 */
@media(max-width:620px){

  .shared-auth
  > .gs-attendance-trigger{
    right:calc(100% + 6px) !important;

    width:30px !important;
    height:30px !important;

    min-width:30px !important;
    max-width:30px !important;

    border-radius:9px !important;
  }


  .shared-auth
  > .gs-attendance-trigger
  .gs-attendance-trigger-icon{
    width:21px !important;
    height:21px !important;
  }
}

/* /ATTENDANCE HEADER POSITION FINAL */


/* =========================================================
   SHARED HEADER ATTENDANCE NATIVE V1
========================================================= */

/*
 * 과거 floating/header injection 버튼은
 * 더 이상 사용하지 않는다.
 */
.gs-attendance-trigger{
  display:none !important;
}


/*
 * shared-header가 직접 생성하는 실제 출석 버튼.
 * shared-auth의 정상 flex item이다.
 */
.shared-auth
> .shared-attendance-button{
  appearance:none;
  -webkit-appearance:none;

  flex:
    0 0 32px;

  width:32px;
  height:32px;

  min-width:32px;

  display:grid;
  place-items:center;

  box-sizing:border-box;

  margin:0;
  padding:0;

  border:
    1px solid
    rgba(255,255,255,.24);

  border-radius:9px;

  background:
    rgba(255,255,255,.08);

  color:#fff;

  font:inherit;
  font-size:11px;
  font-weight:900;

  line-height:1;

  cursor:pointer;

  box-shadow:none;

  -webkit-backdrop-filter:
    blur(6px);

  backdrop-filter:
    blur(6px);

  transition:
    background .15s ease,
    border-color .15s ease;
}


.shared-auth
> .shared-attendance-button:hover{
  border-color:
    rgba(255,255,255,.38);

  background:
    rgba(255,255,255,.15);
}


.shared-auth
> .shared-attendance-button.is-complete{
  background:#4f7258;

  border-color:
    rgba(255,255,255,.26);
}


.shared-auth
> .shared-attendance-button[hidden]{
  display:none !important;
}


/*
 * 기존 프로필 영역은 수정하지 않는다.
 */
@media(max-width:620px){

  .shared-auth
  > .shared-attendance-button{
    flex-basis:28px;

    width:28px;
    height:28px;

    min-width:28px;

    border-radius:8px;

    font-size:10px;
  }
}

/* /SHARED HEADER ATTENDANCE NATIVE V1 */


/* =========================================================
   SHARED ATTENDANCE LABEL V1
========================================================= */

.shared-auth
> .shared-attendance-button{
  flex-basis:auto;

  width:auto;
  min-width:58px;

  height:32px;

  padding:
    0 8px 0 5px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:5px;

  border-radius:9px;
}


.shared-attendance-icon{
  width:22px;
  height:22px;

  display:grid;
  place-items:center;

  flex:0 0 22px;

  border-radius:7px;

  background:
    rgba(255,255,255,.14);

  color:#fff;

  font-size:10px;
  font-weight:900;
}


.shared-attendance-button.is-complete
.shared-attendance-icon{
  background:#4f7258;
}


.shared-attendance-label{
  color:#fff;

  font-size:10px;
  font-weight:800;

  line-height:1;

  white-space:nowrap;
}


/* 모바일에서는 다시 아이콘만 */
@media(max-width:620px){

  .shared-auth
  > .shared-attendance-button{
    width:28px;
    min-width:28px;

    padding:0;

    gap:0;
  }


  .shared-attendance-label{
    display:none;
  }
}

/* /SHARED ATTENDANCE LABEL V1 */


/* =========================================================
   ATTENDANCE VIEWPORT RESPONSIVE V2

   브라우저 가로폭 + 세로높이에 맞춰
   출석부 전체 크기 자동 조정.
========================================================= */

.gs-attendance-overlay{
  box-sizing:border-box !important;

  padding:
    clamp(
      10px,
      2.2vmin,
      22px
    ) !important;

  overflow-x:hidden !important;
  overflow-y:auto !important;

  overscroll-behavior:
    contain;
}


.gs-attendance-modal{

  /*
   * 1366급 화면에서는 약 410~440px,
   * 큰 화면에서는 최대 480px.
   */
  width:
    min(
      clamp(
        340px,
        32vw,
        480px
      ),
      calc(
        100vw - 24px
      )
    ) !important;


  /*
   * 낮은 브라우저 창에서도
   * 하단 버튼이 화면 밖으로 사라지지 않음.
   */
  max-height:
    calc(
      100dvh - 24px
    ) !important;


  box-sizing:
    border-box !important;


  overflow-x:
    hidden !important;

  overflow-y:
    auto !important;


  padding:
    clamp(
      25px,
      4vh,
      38px
    )
    clamp(
      20px,
      2.6vw,
      34px
    )
    clamp(
      22px,
      3.5vh,
      30px
    ) !important;


  border-radius:
    clamp(
      20px,
      2vw,
      28px
    ) !important;


  scrollbar-width:
    thin;
}


.gs-attendance-close{
  top:
    clamp(
      12px,
      2vh,
      17px
    ) !important;

  right:
    clamp(
      12px,
      1.5vw,
      18px
    ) !important;
}


/* ---------------------------------------------------------
   브라우저 높이가 낮을 때
--------------------------------------------------------- */

@media (max-height:780px){

  .gs-attendance-modal{
    padding-top:
      26px !important;

    padding-bottom:
      21px !important;
  }


  .gs-attendance-head h2,
  .gs-attendance-success h2{
    font-size:
      clamp(
        22px,
        3.5vh,
        27px
      ) !important;
  }


  .gs-attendance-today{
    margin-bottom:
      13px !important;
  }


  .gs-attendance-today strong{
    font-size:
      clamp(
        25px,
        4.3vh,
        31px
      ) !important;
  }


  .gs-attendance-milestones{
    margin-bottom:
      15px !important;
  }


  .gs-attendance-milestones span{
    padding:
      7px 4px !important;
  }


  .gs-attendance-action{
    height:
      45px !important;
  }


  .gs-attendance-reward-lines{
    margin:
      14px 0 10px !important;
  }


  .gs-attendance-total-reward{
    margin:
      12px 0 14px !important;
  }


  .gs-attendance-total-reward strong{
    font-size:
      clamp(
        29px,
        5vh,
        36px
      ) !important;
  }


  .gs-attendance-result-stats{
    margin-bottom:
      14px !important;
  }
}


/* ---------------------------------------------------------
   아주 낮은 PC 창
--------------------------------------------------------- */

@media
  (min-width:621px)
  and
  (max-height:650px){

  .gs-attendance-overlay{
    place-items:start center !important;
  }


  .gs-attendance-modal{
    margin:
      auto 0 !important;

    padding-top:
      20px !important;

    padding-bottom:
      18px !important;
  }


  .gs-attendance-stamp{
    transform:
      scale(.88);

    transform-origin:
      center;
  }


  .gs-attendance-milestones{
    gap:
      5px !important;
  }
}


/* ---------------------------------------------------------
   태블릿
--------------------------------------------------------- */

@media
  (min-width:621px)
  and
  (max-width:900px){

  .gs-attendance-modal{
    width:
      min(
        420px,
        calc(
          100vw - 32px
        )
      ) !important;
  }
}


/* ---------------------------------------------------------
   모바일
--------------------------------------------------------- */

@media (max-width:620px){

  .gs-attendance-overlay{
    padding:
      10px !important;
  }


  .gs-attendance-modal{

    width:
      calc(
        100vw - 20px
      ) !important;

    max-height:
      calc(
        100dvh - 20px
      ) !important;

    border-radius:
      clamp(
        18px,
        5vw,
        23px
      ) !important;

    padding:
      clamp(
        25px,
        7vw,
        34px
      )
      clamp(
        16px,
        5vw,
        22px
      )
      clamp(
        20px,
        6vw,
        25px
      ) !important;
  }


  .gs-attendance-head h2,
  .gs-attendance-success h2{
    font-size:
      clamp(
        22px,
        6.4vw,
        25px
      ) !important;
  }


  .gs-attendance-today strong{
    font-size:
      clamp(
        25px,
        7.5vw,
        31px
      ) !important;
  }
}


/* ---------------------------------------------------------
   작은 휴대폰
--------------------------------------------------------- */

@media (max-width:420px){

  .gs-attendance-milestones{
    grid-template-columns:
      repeat(
        2,
        1fr
      ) !important;
  }


  .gs-attendance-action{
    height:
      46px !important;
  }


  .gs-attendance-result-stats{
    gap:
      6px !important;
  }
}

/* /ATTENDANCE VIEWPORT RESPONSIVE V2 */


/* =========================================================
   ATTENDANCE HISTORY STATIC V2
   - 과거 출석: 항상 보임 / 애니메이션 없음
   - 오늘 신규 출석: 기존 is-checked animation 유지
========================================================= */

.gs-attendance-day.is-attended:not(.is-checked)
.gs-attendance-day-stamp {
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;

  transform:
    rotate(-8deg)
    scale(1) !important;

  animation:none !important;
}

.gs-attendance-day.is-attended:not(.is-checked) {
  animation:none !important;
}

.gs-attendance-modal.is-static-result
.gs-attendance-month,
.gs-attendance-modal.is-static-result
.gs-attendance-day,
.gs-attendance-modal.is-static-result
.gs-attendance-day-stamp {
  animation:none !important;
}

.gs-attendance-modal.is-static-result
.gs-attendance-burst {
  display:none !important;
}


/* =========================================================
   ATTENDANCE HISTORY MARK V3

   기존 문제:
   - 50x50 신규 출석 도장을 과거 날짜에도 재사용
   - 셀 밖으로 튀어나오고 서로 겹침

   최종:
   - 모든 출석일 = 날짜 칸 내부 작은 체크
   - 과거 출석 = 정적
   - 오늘 신규 출석 = 체크 팝 애니메이션 1회
========================================================= */


/*
 * 출석한 날짜는 숫자를 좌측 상단으로 이동.
 * 아래쪽 체크와 겹치지 않는다.
 */
.gs-attendance-day.is-attended
.gs-attendance-day-number,
.gs-attendance-day.is-checked
.gs-attendance-day-number {
  position:absolute !important;

  left:5px !important;
  top:4px !important;

  z-index:2 !important;

  font-size:9px !important;
  line-height:1 !important;
}


/*
 * 과거/오늘 출석 공통 체크 마크.
 * 무조건 날짜 셀 내부에 위치.
 */
.gs-attendance-day.is-attended
.gs-attendance-day-stamp,
.gs-attendance-day.is-checked
.gs-attendance-day-stamp {
  position:absolute !important;

  left:auto !important;
  top:auto !important;

  right:5px !important;
  bottom:5px !important;

  width:21px !important;
  height:21px !important;

  display:grid !important;
  place-items:center !important;

  box-sizing:border-box !important;

  border:
    1px solid
    rgba(78,103,85,.72) !important;

  border-radius:50% !important;

  background:
    rgba(241,247,242,.98) !important;

  color:#4e6755 !important;

  opacity:1 !important;
  visibility:visible !important;

  transform:none !important;

  box-shadow:
    0 1px 3px
    rgba(48,72,55,.10) !important;

  overflow:hidden !important;
}


/*
 * 기존 알파카 + 출석완료 텍스트는
 * 월간 이력에서는 너무 커서 숨긴다.
 */
.gs-attendance-day.is-attended
.gs-attendance-day-stamp
.gs-attendance-alpaca-mark,
.gs-attendance-day.is-attended
.gs-attendance-day-stamp strong,
.gs-attendance-day.is-checked
.gs-attendance-day-stamp
.gs-attendance-alpaca-mark,
.gs-attendance-day.is-checked
.gs-attendance-day-stamp strong {
  display:none !important;
}


/* 작은 체크 */
.gs-attendance-day.is-attended
.gs-attendance-day-stamp::after,
.gs-attendance-day.is-checked
.gs-attendance-day-stamp::after {
  content:"✓";

  display:block;

  font-family:
    Arial,
    sans-serif;

  font-size:13px;
  font-weight:900;

  line-height:1;
}


/*
 * 과거 출석은 절대 애니메이션 하지 않는다.
 */
.gs-attendance-day.is-attended:not(.is-checked),
.gs-attendance-day.is-attended:not(.is-checked)
.gs-attendance-day-stamp {
  animation:none !important;
}


/*
 * 신규 출석 순간만 작은 체크 팝.
 */
.gs-attendance-day.is-checked
.gs-attendance-day-stamp {
  animation:
    gsAttendanceCheckPopV3
    .42s
    cubic-bezier(.16,.88,.28,1.22)
    both !important;
}


/*
 * 과거 출석 셀도 아주 약하게 구분.
 */
.gs-attendance-day.is-attended {
  background:
    rgba(246,249,246,.96);
}


/*
 * 오늘은 기존 today 강조 유지.
 */
.gs-attendance-day.is-today {
  overflow:hidden;
}


@keyframes gsAttendanceCheckPopV3 {

  0% {
    opacity:0;
    transform:
      scale(.35);
  }

  65% {
    opacity:1;
    transform:
      scale(1.15);
  }

  100% {
    opacity:1;
    transform:
      scale(1);
  }
}


/* =========================================================
   NEW CHECK-IN STAMP RESTORE V4

   실제 신규 출석 순간:
   큰 알파카 도장 -> 기존 gsMonthlyStamp 애니메이션

   애니메이션 종료 후:
   JS가 is-checked를 제거하여
   기존 작은 ✓ 출석 이력 표시로 정착
========================================================= */


/*
 * 신규 출석 중에는 작은 체크 UI 대신
 * 원래의 큰 원형 알파카 도장을 사용한다.
 */
.gs-attendance-day.is-checked
.gs-attendance-day-stamp {
  left:50% !important;
  top:50% !important;

  right:auto !important;
  bottom:auto !important;

  width:50px !important;
  height:50px !important;

  display:grid !important;
  place-content:center !important;

  box-sizing:border-box !important;

  border:
    3px double
    #4e6755 !important;

  border-radius:50% !important;

  background:
    rgba(255,255,255,.96) !important;

  color:#4e6755 !important;

  opacity:1 !important;

  transform:
    translate(-50%,-50%)
    rotate(-8deg)
    scale(.88);

  box-shadow:
    inset 0 0 0 3px
    rgba(255,255,255,.95) !important;

  overflow:visible !important;

  animation:
    gsMonthlyStamp
    .58s
    cubic-bezier(.12,.9,.2,1.2)
    both !important;
}


/*
 * 신규 출석 애니메이션 중에는
 * 알파카 + 출석완료 문구를 다시 보인다.
 */
.gs-attendance-day.is-checked
.gs-attendance-day-stamp
.gs-attendance-alpaca-mark {
  display:block !important;

  height:22px !important;

  font-size:18px !important;
  line-height:22px !important;

  text-align:center !important;

  filter:
    grayscale(1) !important;
}


.gs-attendance-day.is-checked
.gs-attendance-day-stamp strong {
  display:block !important;

  margin-top:-1px !important;

  white-space:nowrap !important;

  font-size:7px !important;
  line-height:1 !important;

  letter-spacing:-.05em !important;
}


/*
 * 큰 도장이 찍히는 동안에는
 * 작은 ✓는 감춘다.
 */
.gs-attendance-day.is-checked
.gs-attendance-day-stamp::after {
  display:none !important;
}


/*
 * 신규 출석 셀 자체의 기존 반짝임도 유지.
 */
.gs-attendance-day.is-checked {
  animation:
    gsTodayCellFlash
    .7s
    ease
    both !important;
}


/* =========================================================
   ATTENDANCE STAMP DEPTH FIX V5
   신규 출석 도장이 달력 셀 안으로 파고들어 보이는 현상 수정
========================================================= */

/*
 * 실제 도장을 찍는 0.7초 동안만
 * 날짜 셀의 clipping을 해제한다.
 */
.gs-attendance-day.is-today.is-checked {
  overflow:visible !important;
  z-index:20 !important;
}


/*
 * 도장은 달력 셀보다 앞쪽 레이어에서 찍힌다.
 */
.gs-attendance-day.is-checked
.gs-attendance-day-stamp {
  z-index:30 !important;

  transform-origin:
    center center !important;
}


/*
 * 날짜 숫자는 도장보다 아래에 둔다.
 */
.gs-attendance-day.is-checked
.gs-attendance-day-number {
  z-index:2 !important;
}