/* 카드 사전 페이지. 앱과 같은 팔레트와 서체를 쓰되 레이아웃은 읽기 위한 것입니다. */
.doc{ max-width:46rem; margin:0 auto; padding:clamp(1.5rem,4vw,3rem) 1.25rem 5rem; }

.crumb{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:clamp(1.5rem,4vw,2.5rem);
  font-size:.88rem; letter-spacing:.04em;
}
.crumb a{ color:var(--mist); text-decoration:none; border-bottom:1px solid transparent; }
.crumb a:hover{ color:var(--parchment); border-bottom-color:var(--gilt); }

.card-head{
  display:grid; grid-template-columns:minmax(0,168px) 1fr;
  gap:clamp(1.25rem,4vw,2.25rem); align-items:start;
  margin-bottom:clamp(2rem,5vw,3rem);
}
.card-head img{
  /* width/height 속성이 있으면 height 가 확정돼 aspect-ratio 가 무시됩니다 */
  width:100%; height:auto; aspect-ratio:.6; object-fit:cover;
  border-radius:6px; display:block; background:var(--ink-2);
  box-shadow:0 12px 30px rgba(0,0,0,.55);
}
.card-title{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.7rem,4.5vw,2.45rem); line-height:1.25; margin:0;
}
.card-latin{
  display:block; font-family:var(--f-latin); font-weight:400; font-style:italic;
  font-size:clamp(1.05rem,2.6vw,1.35rem); color:var(--gilt); margin-top:.35rem;
}
.card-suit{
  margin-top:.9rem; font-size:var(--rd-label); letter-spacing:.08em; color:var(--mist);
}
.kw{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0 0; padding:0; list-style:none; }
.kw li{
  font-size:var(--rd-label); letter-spacing:.04em; color:var(--parchment-dim);
  border:1px solid var(--veil-line); border-radius:3px; padding:.15rem .6rem;
}

.sec{ margin:0 0 clamp(1.75rem,4vw,2.5rem); }
.sec h2{
  font-family:var(--f-body); font-size:var(--rd-label); font-weight:500;
  letter-spacing:.12em; margin:0 0 .6rem;
}
.sec.up h2{ color:var(--gilt); }
.sec.rev h2{ color:var(--vermilion-lt); }
.sec p{
  font-family:var(--f-display); font-size:var(--rd-text); line-height:1.95;
  color:var(--parchment);
}

.lenses{ margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--veil-line); }
.lens-row{ display:grid; grid-template-columns:4.5rem 1fr; gap:.9rem; padding:.55rem 0; }
.lens-row b{
  font-family:var(--f-body); font-size:var(--rd-label); font-weight:400; letter-spacing:.08em;
  color:var(--gilt); padding-top:.28rem;
}
.lens-row span{ font-family:var(--f-display); font-size:var(--rd-text); line-height:1.9; color:var(--parchment-dim); }

.cta{
  display:inline-block; margin:clamp(2rem,5vw,3rem) 0 0;
  padding:.7rem 1.5rem; border-radius:999px;
  border:1px solid var(--gilt); background:rgba(201,162,39,.08);
  color:var(--parchment); text-decoration:none; font-size:.95rem;
  transition:background .25s;
}
.cta:hover{ background:rgba(201,162,39,.16); }

.pager{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:clamp(2.5rem,6vw,4rem); padding-top:1.5rem;
  border-top:1px solid var(--veil-line); font-size:.9rem;
}
.pager a{ color:var(--parchment-dim); text-decoration:none; max-width:45%; }
.pager a:hover{ color:var(--gilt); }
.pager i{ display:block; font-style:normal; font-size:var(--rd-label); color:var(--mist); letter-spacing:.08em; }

/* 목록 */
.deck-group{ margin:0 0 clamp(2.5rem,6vw,3.5rem); }
.deck-group h2{
  font-family:var(--f-display); font-size:1.2rem; font-weight:400;
  letter-spacing:.04em; margin:0 0 1.1rem; color:var(--parchment);
}
.deck-group h2 em{
  font-style:normal; font-family:var(--f-body); font-size:var(--rd-label);
  letter-spacing:.1em; color:var(--mist); margin-left:.6em;
}
.deck-grid{
  display:grid; gap:clamp(.6rem,2vw,1.1rem);
  grid-template-columns:repeat(auto-fill, minmax(88px, 1fr));
  list-style:none; margin:0; padding:0;
}
.deck-grid a{ display:block; text-decoration:none; color:inherit; }
.deck-grid img{
  width:100%; height:auto; aspect-ratio:.6; object-fit:cover; display:block;
  border-radius:4px; background:var(--ink-2);
  transition:transform .25s, box-shadow .25s;
}
.deck-grid a:hover img{ transform:translateY(-4px); box-shadow:0 10px 22px rgba(201,162,39,.3); }
.deck-grid span{
  display:block; margin-top:.45rem; text-align:center;
  font-size:var(--rd-label); line-height:1.45; color:var(--parchment-dim);
}