*{box-sizing:border-box}body{margin:0;font-family:Arial,'Noto Sans KR',sans-serif;background:#f4fbff;color:#18324a}
header{display:flex;justify-content:space-between;align-items:center;padding:22px max(5vw,20px);background:white;border-bottom:1px solid #dcecf5}
h1{margin:0;color:#2387b8}header p{margin:5px 0 0;color:#6a7d8c}
button{border:0;border-radius:14px;padding:12px 18px;background:#2697c9;color:white;font-weight:700;cursor:pointer}
main{max-width:1050px;margin:32px auto;padding:0 18px}.card{background:white;border-radius:24px;padding:28px;box-shadow:0 8px 28px #367da516}
.hero{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#e8f9ff,#f8fdff)}
.hero h2{font-size:34px;margin:12px 0}.pill{font-size:12px;background:#d9f3ff;color:#147aa7;padding:7px 11px;border-radius:99px;font-weight:bold}
.medal{font-size:100px;text-align:center}.medal small{display:block;font-size:14px;color:#5c7180}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}ol{padding-left:28px}li{padding:10px;border-bottom:1px solid #edf3f6}
.stickers{display:flex;flex-wrap:wrap;gap:12px;min-height:80px;font-size:35px}.hint{color:#8193a0;font-size:13px}footer{text-align:center;padding:35px;color:#7a8e9c}
@media(max-width:700px){header{align-items:flex-start;gap:12px}header p{display:none}.hero{display:block}.hero h2{font-size:28px}.medal{margin-top:25px}.grid{grid-template-columns:1fr}}

.sheet-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;text-align:center;margin-bottom:16px}
.sheet-head h3{margin:0 0 4px}.month-title{font-size:20px;color:#2387b8}
.month-btn{width:42px;height:42px;padding:0;border-radius:50%;font-size:28px;line-height:1;background:#e8f7fd;color:#2387b8}
.weekdays,.challenge-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.weekdays{margin-bottom:8px;text-align:center;font-size:12px;font-weight:700;color:#78909f}
.challenge-calendar{min-height:330px}
.day-cell{padding:0;background:transparent;color:#18324a;border-radius:0;display:flex;justify-content:center;align-items:center;min-width:0}
.day-cell.blank{visibility:hidden;pointer-events:none}
.day-circle{position:relative;width:min(48px,11vw);height:min(48px,11vw);max-width:48px;max-height:48px;min-width:36px;min-height:36px;border:2px solid #cfe6f1;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;transition:.15s}
.day-number{font-size:13px;font-weight:700;z-index:2}
.day-cell.today .day-circle{border:3px solid #2697c9;box-shadow:0 0 0 3px #e4f6fd}
.day-cell.done .day-circle{background:#f4fbff;border-color:#8fd0e9}
.day-stamp{position:absolute;font-size:23px;line-height:1;opacity:.95}
.day-cell.done .day-number{position:absolute;top:-6px;left:-3px;width:20px;height:20px;border-radius:50%;background:white;border:1px solid #d5e9f2;font-size:10px;display:flex;align-items:center;justify-content:center}
.day-multi{position:absolute;right:-5px;bottom:-5px;background:#2697c9;color:white;border-radius:99px;font-size:9px;padding:3px 5px;border:2px solid white;font-weight:800}
#countText{text-align:center;font-weight:800;color:#2387b8;margin-top:18px}
@media(max-width:700px){
  .card{padding:20px}
  .weekdays,.challenge-calendar{gap:5px}
  .challenge-calendar{min-height:285px}
  .day-circle{min-width:34px;min-height:34px}
}

.monthly-medal-box{margin-top:20px;padding:16px;border:1px solid #dcecf5;border-radius:18px;background:#f8fdff;text-align:center}
.medal-label{display:block;font-size:13px;font-weight:800;color:#6b8493}.monthly-medal{font-size:58px;line-height:1.15;margin:7px 0}.monthly-medal-box strong{display:block;font-size:16px;color:#2387b8}.monthly-medal-box small{display:block;margin-top:6px;color:#8193a0;font-size:11px}

.brand-title{display:flex;align-items:center;gap:10px}.brand-logo{width:58px;height:58px;object-fit:cover;object-position:8% 5%;border-radius:50%;background:#fff}.brand-title span{display:inline-block}@media(max-width:700px){.brand-logo{width:48px;height:48px}.brand-title span{font-size:24px}}

.brand-logo{image-rendering:pixelated;object-fit:contain}
.medal img{width:118px;height:118px;object-fit:contain;image-rendering:pixelated}
.day-stamp img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.monthly-medal img{width:78px;height:78px;object-fit:contain;image-rendering:pixelated}
.medal-empty{font-size:54px;color:#cbdde7}

.ranking-title{display:flex;align-items:center;gap:8px}
.ranking-clover{width:30px;height:30px;object-fit:contain;image-rendering:pixelated;flex:0 0 auto}

.brand-logo,.ranking-clover,.day-stamp img,.monthly-medal img,.medal img{
  background:transparent;
  object-fit:contain;
  image-rendering:pixelated;
}
.ranking-title{display:flex;align-items:center;gap:8px}
.ranking-clover{width:30px;height:30px;border-radius:4px}
.day-stamp img{width:30px;height:30px;border-radius:50%}
.monthly-medal img{width:82px;height:82px}
.medal img{width:118px;height:118px}

/* 올해의 메달 컬렉션 */
.yearly-collection-card{margin-top:18px}
.collection-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}
.collection-head h3{margin:0 0 5px;font-size:1.15rem}
.collection-head p{margin:0;color:#6b7280;font-size:.88rem}
#collectionCount{white-space:nowrap;background:#f2f7ff;border-radius:999px;padding:7px 11px}
.yearly-medal-collection{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.collection-month{min-height:128px;border:1px solid #e8edf3;border-radius:16px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9px;text-align:center}
.collection-month.earned{box-shadow:0 3px 12px rgba(0,0,0,.05)}
.collection-medal-wrap{position:relative;width:72px;height:72px}
.collection-medal-wrap img{width:72px;height:72px;object-fit:contain;background:transparent;image-rendering:pixelated}
.collection-month-number{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);font-weight:900;font-size:18px;color:#56340b;text-shadow:0 1px #fff}
.collection-month strong{font-size:.9rem;margin-top:3px}
.collection-month small{font-size:.72rem;color:#7b8490}
.collection-empty{width:62px;height:62px;border:2px dashed #d7dee8;border-radius:50%;display:grid;place-items:center;color:#c4ccd7;font-size:25px;background:#fff}
@media(max-width:760px){
  .yearly-medal-collection{grid-template-columns:repeat(3,minmax(0,1fr))}
  .collection-head{align-items:center}
}

.ranking-title{display:flex;align-items:center;margin:0 0 12px}
.ranking-banner{display:block;width:min(100%,360px);height:auto;background:transparent;object-fit:contain;image-rendering:pixelated}
.brand-logo,.ranking-clover,.day-stamp img,.monthly-medal img,.medal img{background:transparent!important}

.collection-title{display:flex;align-items:center;gap:8px}
.collection-clover{width:30px;height:30px;object-fit:contain;background:transparent;image-rendering:pixelated;flex:0 0 auto}

/* 토끼/클로버 타이틀 수직 정렬 보정 */
.brand-title{
  display:flex !important;
  align-items:center !important;
  gap:10px;
}
.brand-title .brand-logo{
  display:block;
  flex:0 0 auto;
  margin:0 !important;
  transform:translateY(3px);
  vertical-align:middle;
}
.ranking-title,
.collection-title{
  display:flex !important;
  align-items:center !important;
}
.ranking-clover,
.collection-clover{
  display:block;
  flex:0 0 auto;
  margin:0 !important;
  transform:translateY(2px);
  vertical-align:middle;
}

/* 올해의 메달 컬렉션: 클로버와 글씨 사이 간격을 줄여 글씨를 왼쪽으로 */
.collection-title{
  gap:3px !important;
  column-gap:3px !important;
}
.collection-title .collection-clover{
  margin:0 !important;
}

/* 챌린지 시트의 완료 클로버만 원 중앙으로 조금 아래 이동 */
.day-stamp{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.day-stamp img{
  display:block !important;
  position:relative !important;
  top:1px !important;
  margin:0 auto !important;
  transform:none !important;
}

/* 사이트 맨 아래 AdSense */
.bottom-adsense{
  width:min(1100px, calc(100% - 32px));
  min-height:90px;
  margin:28px auto 20px;
  padding:10px 0;
  overflow:hidden;
  text-align:center;
}
@media(max-width:600px){
  .bottom-adsense{
    width:calc(100% - 20px);
    margin-top:20px;
  }
}


/* 8비트 배경음악 토글 */
.music-toggle{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1000;
  min-width:108px;
  padding:11px 15px;
  border:2px solid #fff;
  border-radius:999px;
  background:#2697c9;
  color:#fff;
  box-shadow:0 6px 18px rgba(24,50,74,.22);
  font-size:13px;
}
.music-toggle[aria-pressed="true"]{background:#157aa8}
@media(max-width:600px){
  .music-toggle{right:12px;bottom:12px;min-width:100px;padding:10px 13px}
}


/* 챌린지 완료 버튼 옆 목표 입력칸 */
.challenge-action-row{display:flex;align-items:center;gap:10px;margin-top:14px;max-width:520px}
.challenge-action-row #challengeBtn{flex:0 0 auto}
.challenge-goal-input{flex:1;min-width:0;border:2px solid #cfe6f1;border-radius:14px;padding:11px 14px;font:inherit;color:#18324a;background:#fff;outline:none}
.challenge-goal-input:focus{border-color:#2697c9;box-shadow:0 0 0 3px #e4f6fd}
.challenge-goal-input::placeholder{color:#91a6b3}
@media(max-width:520px){.challenge-action-row{gap:7px}.challenge-action-row #challengeBtn{padding:11px 12px}.challenge-goal-input{padding:10px 11px;font-size:13px}}