.el-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem;border-radius:999px;font-weight:600;}
.el-木{background:#e7f5e7;} .el-火{background:#ffe8e6;} .el-土{background:#f3efe6;}
.el-金{background:#ecf1f7;} .el-水{background:#e8f6ff;}
.progress{height:12px}
.mono{font-family:ui-monospace,Consolas,Menlo,monospace}
.fs-7{font-size:.875rem}

.badge { white-space: nowrap; }
.relation-line { flex-wrap: wrap; gap: .5rem; }


.card-category { min-height: 160px; }
.skeleton {
    background: linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
    background-size: 400% 100%;
    animation: shimmer 1.2s infinite;
    border-radius: .5rem;
    height: 1.1rem;
    margin-bottom: .5rem;
}
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.copy-btn { position:absolute; top:.75rem; right:.75rem; }

.flatpickr-current-month .fp-year-select {
  margin-left: 6px;
  height: 24px;
  font-size: 14px;
}

/* ====== 공통 컨테이너 ====== */
.storybook { max-width: 500px; }

/* ====== 장면 공통 ====== */
.scene {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 20%, #151a3d 0%, #0d0f24 60%, #070812 100%);
}
.scene .bgimg {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter: saturate(1.05);
}

/* 첫 번째 컷의 이미지 */
.storybook section:first-child .scene  {
  border-top-left-radius: 0.5rem !important;
  border-top-right-radius: 0.5rem !important;
}

/* 마지막 컷의 이미지 */
.storybook section:last-child .cut-caption  {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/* 별빛 배경 (CSS 점 레이어) */
.scene .stars{
  position:absolute; inset:0;
  background:
    radial-gradient(2px 2px at 20% 30%, #fff8 50%, transparent 52%) repeat,
    radial-gradient(1.2px 1.2px at 70% 60%, #fff6 50%, transparent 52%) repeat,
    radial-gradient(1.5px 1.5px at 40% 80%, #fff5 50%, transparent 52%) repeat;
  background-size: 240px 240px, 180px 180px, 300px 300px;
  animation: twinkle 3s linear infinite;
  mix-blend-mode: screen;
  pointer-events:none;
}

/* 투명 레이어 공통 */
.layer{
  position:absolute; inset:auto;
  pointer-events:none; user-select:none;
  will-change: transform, opacity, filter;
  mix-blend-mode: screen;
}

/* 안개 */
.fog{
  left:-10%; bottom:-10%;
  width: 140%;
  opacity:.55;
  animation: drift 30s linear infinite, float 8s ease-in-out infinite;
  filter: blur(1px) saturate(1.1);
}

/* 광채 */
.glow{
  left:10%; top:10%;
  width: 80%;
  opacity:.35;
  animation: pulse 5s ease-in-out infinite;
  filter: blur(1px) brightness(1.2);
}

/* 동그란(원형) 레이어 */
.round-layer{
  position:absolute; right:8%; top:12%;
  width: 28vmin; height: 28vmin;
  display:grid; place-items:center;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #fff 70%, transparent 72%);
          mask-image: radial-gradient(circle at 50% 50%, #fff 70%, transparent 72%);
  animation: orbit 18s linear infinite;
  filter: blur(.2px) brightness(1.15);
}
.round-layer img{ width:120%; opacity:.9 }

/* 작은 입자 */
.particle{
  position:absolute; width:26px; opacity:.7;
  animation: float 7s ease-in-out infinite, spin 14s linear infinite;
}
.p1{ left:12%; top:40%; animation-delay: 0s, -2s; }
.p2{ left:45%; top:15%; animation-delay: -1.3s, -4s; }
.p3{ left:72%; top:65%; animation-delay: -2.6s, -7s; }

/* 말풍선 (4컷) */
.bubble{
  position:absolute; right:6%; bottom:8%;
  max-width: 82%;
  background: rgba(255,255,255,.92);
  color:#222;
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  font-weight: 600;
}
.bubble:after{
  content:"";
  position:absolute; right:14px; bottom:-10px;
  border:10px solid transparent;
  border-top-color: rgba(255,255,255,.92);
}

/* 캡션(대사/프롬프트) */
.cut-caption { background: #0b0f25; color:#e7e9ff; }
.cut-caption .lead { font-weight:700; }

/* 모션 키프레임 */
@keyframes drift{ to{ transform: translateX(12%); } }
@keyframes float{ 50%{ transform: translateY(-10px); } }
@keyframes pulse{ 50%{ opacity:.65; filter: blur(1.5px) brightness(1.25); } }
@keyframes twinkle{ to{ transform: translateY(-10px); } }
@keyframes orbit{ to{ transform: rotate(360deg); } }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* 접근성: 모션 최소화 */
@media (prefers-reduced-motion: reduce){
  .layer, .stars, .particle, .round-layer{ animation: none !important; }
}