/* styles.css */
:root{
  --kitsh-red: #d90f2f;
  --tile-bg: #ffffff;
  --tile-border: #121212;
  --num: #111111;
  --shadow: rgba(0,0,0,.18);
}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Apple SD Gothic Neo, sans-serif;
  background: var(--kitsh-red);
  color:#fff;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4vmin;
}
.calendar{
  width:min(1200px, 94vw);
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: min(14px, 1.6vmin);
}
.day{
  aspect-ratio:1 / 1;
  position:relative;
}
.day > input{
  position:absolute;
  opacity:0;
  inset:0;
  pointer-events:none;
}
.day > label{
  display:block;
  height:100%;
  position:relative;
  cursor:pointer;
  border: 2px solid var(--tile-border);
  background: var(--tile-bg);
  box-shadow: 0 6px 18px var(--shadow);
  overflow:hidden;               /* 네모 반듯(곡률 없음) */
  transform-style: preserve-3d;  /* 3D 플립 */
  perspective: 900px;
}
.day .content{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background: var(--tile-bg);
}
.day .content img{
  max-width:80%;
  max-height:80%;
  display:block;
}
.day .door{
  position:absolute;
  inset:0;
  background: var(--tile-bg);
  border-right: 2px solid var(--tile-border);
  display:grid;
  place-items:center;
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  box-shadow: inset 0 0 0 2px var(--tile-border);
}
.day .num{
  font-weight:800;
  font-size: clamp(20px, 8vmin, 64px);
  color: var(--num);
  letter-spacing: .02em;
}
.day > input:checked + label .door{
  transform: rotateY(-110deg);
}
.day > input:focus + label{
  outline: 3px solid #fff;
  outline-offset: 3px;
}
@media (min-width: 1024px){
  .calendar{ gap: 18px; }
}