:root{
  --accent:oklch(0.50 0.075 158);
  --accent-tint:oklch(0.965 0.015 158);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:#fcfcfc;color:#1c1c1e;
  font-family:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Helvetica Neue',sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;}

/* 배경 캔버스 */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}

/* 본문 컬럼 */
.wrap{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:72px 24px 120px;}

/* 헤더 */
header{text-align:center;margin-bottom:52px;}
.badge{display:inline-block;background:#fff;padding:5px 12px;font-size:11px;letter-spacing:0.3em;color:#b4b4b4;font-weight:600;margin-bottom:18px;}
header h1{font-size:30px;font-weight:600;letter-spacing:-0.025em;color:#1c1c1e;margin-bottom:14px;}
header .sub{display:inline-block;background:#fff;padding:6px 14px;font-size:13px;color:#8e8e90;line-height:1.8;}

/* 월 카드 */
.month{background:#fff;border:1px solid #dadada;margin-bottom:24px;}
.month-head{display:flex;align-items:baseline;justify-content:space-between;padding:15px 18px;border-bottom:1px solid #dadada;}
.month-head .num{font-size:20px;font-weight:600;color:#1c1c1e;letter-spacing:-0.01em;}
.month-head .en{font-size:10px;letter-spacing:0.18em;color:#a8a8a8;}

/* 요일 */
.weekdays{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid #dadada;}
.weekdays span{text-align:center;font-size:10px;letter-spacing:0.04em;color:#9e9e9e;padding:9px 0;}

/* 날짜 그리드 (gap 1px + 회색 배경 = 격자선) */
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:#ededed;}
.cell{
  aspect-ratio:1;background:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;position:relative;
  user-select:none;transition:background .12s ease;outline:none;
}
.cell.has{cursor:pointer;}
.cell .num{font-size:13.5px;line-height:1;font-weight:400;color:#39393c;font-variant-numeric:tabular-nums;}
.cell.wknd .num{color:#c2c2c2;}
.cell.today{box-shadow:inset 0 0 0 1px #cfcfcf;}
.cell.selected{background:var(--accent-tint);}
.cell.selected .num{font-weight:600;color:#1c1c1e;}
.cell:focus-visible{box-shadow:inset 0 0 0 2px var(--accent);}
.mark{position:absolute;top:5px;right:5px;width:6px;height:6px;background:var(--accent);}

/* 상세 패널 */
.detail{border-top:1px solid #dadada;padding:16px 18px 20px;}
.detail.hidden{display:none;}
.detail-date{font-size:11px;letter-spacing:0.06em;color:#9a9a9a;margin-bottom:8px;font-weight:500;}
.item{border-top:1px solid #f1f1f1;padding-top:13px;margin-top:13px;}
.item-title{font-size:15px;font-weight:600;color:#1c1c1e;letter-spacing:-0.01em;margin-bottom:5px;}
.item-span{font-size:11px;color:#a4a4a4;letter-spacing:0.03em;margin-bottom:9px;}
.item-desc{font-size:12.5px;line-height:1.7;color:#5c5c5c;margin-bottom:13px;}
.item-link{display:inline-block;font-size:12px;font-weight:500;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px;}
.item-lock{display:inline-block;font-size:12px;color:#c0c0c0;border-bottom:1px solid #e4e4e4;padding-bottom:2px;}

@media(max-width:560px){
  .wrap{padding:56px 16px 90px;}
}