/* ============================================================
   cards.css — 타로 카드 의미 도감 (정적 페이지 전용)
   기존 신비의 타로 테마(색상·폰트) 재사용, 문서형 스크롤 레이아웃.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#05030f; --bg2:#0e0820; --dp:#1a0a36;
  --purple:#7c3aed; --violet:#a855f7; --lavender:#c4b5fd;
  --gold:#d97706; --gold2:#f59e0b; --gold3:#fcd34d; --gold4:#fef3c7;
  --rose:#e11d48; --text:#ede9fe; --dim:#8b5cf6; --dim2:#6d28d9;
}

.tc-body{
  min-height:100vh;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.22) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(245,158,11,.08) 0%, transparent 55%),
    linear-gradient(180deg,#0a0620,#05030f);
  color:var(--text);
  font-family:'Hahmlet','Noto Serif KR','Georgia',serif;
  line-height:1.75;
  -webkit-tap-highlight-color:transparent;
  padding:0 0 3rem;
}
.cinzel{font-family:'Cinzel','Georgia',serif}
.cinzel-dec{font-family:'Cinzel Decorative','Georgia',serif}

a{color:var(--gold3);text-decoration:none}
a:hover{text-decoration:underline}

/* ===== HEADER ===== */
.tc-header{
  text-align:center;padding:clamp(2.2rem,7vw,4rem) 1.2rem 1.6rem;
  max-width:820px;margin:0 auto;
}
.tc-header__eyebrow{
  color:var(--lavender);letter-spacing:.24em;text-transform:uppercase;
  font-size:clamp(.65rem,2.6vw,.8rem);margin-bottom:.8rem;
}
.tc-header__title{
  color:var(--gold3);
  font-size:clamp(1.7rem,7vw,3rem);letter-spacing:.05em;
  text-shadow:0 0 25px var(--gold2),0 0 50px rgba(245,158,11,.35);
  margin-bottom:.9rem;
}
.tc-header__lead{
  color:var(--lavender);font-size:clamp(.9rem,3.4vw,1.05rem);
  max-width:600px;margin:0 auto 1.4rem;opacity:.92;
}
.tc-nav{margin-top:.6rem}
.tc-back{
  display:inline-block;font-family:'Cinzel',serif;font-size:.85rem;
  letter-spacing:.08em;padding:.5rem 1.1rem;border-radius:999px;
  border:1px solid rgba(196,181,253,.35);color:var(--lavender);
  transition:border-color .25s ease, color .25s ease;
}
.tc-back:hover{border-color:var(--gold2);color:var(--gold3);text-decoration:none}

/* ===== FILTER (드롭다운) ===== */
.tc-filter{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  margin:.4rem auto 1.2rem;
}
.tc-filter__label{
  color:var(--lavender);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;opacity:.75;
}
.tc-filter__select{
  appearance:none;-webkit-appearance:none;
  font-family:'Hahmlet','Noto Serif KR',serif;font-size:.92rem;
  color:var(--gold3);background:linear-gradient(160deg,rgba(30,10,60,.95),rgba(14,8,32,.95));
  border:1px solid rgba(168,85,247,.4);border-radius:999px;
  padding:.6rem 2.4rem .6rem 1.3rem;min-width:min(88vw,320px);text-align:center;
  cursor:pointer;letter-spacing:.02em;
  box-shadow:0 4px 18px rgba(124,58,237,.3);
  background-image:
    linear-gradient(160deg,rgba(30,10,60,.95),rgba(14,8,32,.95)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fcd34d' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:center,right 1.1rem center;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.tc-filter__select:hover,.tc-filter__select:focus{
  border-color:var(--gold2);outline:none;
  box-shadow:0 4px 22px rgba(245,158,11,.3);
}
.tc-filter__select option{background:#140a28;color:var(--text)}

/* ===== MAIN / SECTIONS ===== */
.tc-main{max-width:1120px;margin:0 auto;padding:0 clamp(.9rem,3vw,1.6rem)}

.tc-section{margin-top:clamp(2rem,6vw,3.4rem)}
.tc-section__title{
  color:var(--gold3);text-align:center;
  font-size:clamp(1.4rem,5.5vw,2.1rem);letter-spacing:.04em;
  text-shadow:0 0 20px rgba(245,158,11,.35);margin-bottom:.5rem;
}
.tc-section__desc{
  color:var(--lavender);text-align:center;opacity:.85;
  max-width:640px;margin:0 auto 1.4rem;font-size:clamp(.85rem,3.2vw,.98rem);
}
.tc-section__title::before,.tc-section__title::after{content:'✦';color:var(--gold2);font-size:.7em;opacity:.7;margin:0 .5em;vertical-align:middle}

.tc-suit{margin-top:2rem}
.tc-suit__title{
  color:var(--violet);font-size:clamp(1.1rem,4.4vw,1.5rem);
  text-align:center;letter-spacing:.04em;margin-bottom:.3rem;
}
.tc-suit__desc{color:var(--lavender);opacity:.8;text-align:center;margin-bottom:1.1rem;font-size:clamp(.8rem,3vw,.92rem)}

/* ===== GRID ===== */
.tc-grid{
  display:grid;gap:clamp(.7rem,2vw,1.3rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));
}

/* ===== CARD ===== */
.tc-card{
  display:flex;flex-direction:column;
  background:linear-gradient(160deg, rgba(26,10,54,.72), rgba(14,8,32,.72));
  border:1px solid rgba(124,58,237,.28);border-radius:16px;
  overflow:hidden;
  box-shadow:0 5px 20px rgba(0,0,0,.4), inset 0 0 40px rgba(124,58,237,.06);
}
.tc-card__media{
  display:flex;align-items:center;justify-content:center;
  padding:.9rem .9rem .2rem;
}
.card-img{
  width:auto;max-width:46%;height:auto;border-radius:10px;
  box-shadow:0 0 18px rgba(168,85,247,.35);
  border:1px solid rgba(252,211,77,.25);
}
.card-img--ph{
  width:96px;height:150px;max-width:46%;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold2);font-size:1.7rem;border-radius:10px;
  background:radial-gradient(ellipse at 50% 35%, rgba(124,58,237,.3), rgba(14,8,32,.6));
  border:1px dashed rgba(196,181,253,.35);
}
.tc-card__body{padding:.3rem 1rem 1.1rem}
.tc-card__name{color:var(--gold3);font-size:1.12rem;text-align:center;letter-spacing:.03em;margin-bottom:.1rem}
.tc-card__en{color:var(--lavender);text-align:center;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-bottom:.55rem}
.tc-card__summary{
  color:var(--gold4);text-align:center;font-size:.82rem;opacity:.9;
  padding-bottom:.7rem;margin-bottom:.7rem;
  border-bottom:1px solid rgba(124,58,237,.25);
}

/* ===== MEANING BLOCKS ===== */
.tc-meaning{margin-top:.8rem}
.tc-meaning__title{
  font-family:'Cinzel',serif;font-size:.86rem;letter-spacing:.05em;
  display:flex;align-items:baseline;gap:.5rem;margin-bottom:.45rem;
}
.tc-meaning__title span{font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;opacity:.6}
.tc-meaning__title--up{color:var(--gold3)}
.tc-meaning__title--rev{color:var(--violet)}
.tc-meaning__text{color:var(--text);font-size:.84rem;opacity:.92;margin-top:.35rem;line-height:1.65}

.kw{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;padding:0}
.kw li{
  font-size:.7rem;padding:.2rem .55rem;border-radius:999px;
  background:rgba(124,58,237,.18);border:1px solid rgba(168,85,247,.3);
  color:var(--lavender);
}

/* ===== DISCLAIMER / FOOTER ===== */
.tc-disclaimer{
  text-align:center;color:var(--lavender);opacity:.6;
  font-size:.82rem;margin-top:2.6rem;
}
.tc-footer{
  text-align:center;margin-top:2.4rem;padding-top:2rem;
  border-top:1px solid rgba(124,58,237,.2);
  display:flex;flex-direction:column;align-items:center;gap:1rem;
}
.tc-footer__copy{color:var(--gold2);letter-spacing:.2em;font-size:.85rem;opacity:.8}

@media (max-width:520px){
  .tc-main{padding:0 .8rem}
  .tc-grid{grid-template-columns:1fr;gap:.8rem;max-width:400px;margin:0 auto}
  .tc-card{border-radius:14px}
  .tc-card__media{padding:.8rem .8rem .1rem}
  .card-img{max-width:40%}
  .card-img--ph{width:84px;height:132px;max-width:40%}
  .tc-card__body{padding:.3rem .9rem 1rem}
}