/* /change/petart/petart_components.php — 공유 header.php 위에 얹는 펫아트 전용 컴포넌트 CSS
   (색상은 header가 주입하는 --accent-gold 를 그대로 사용 — 다크/라이트 모드 자동 대응) */

.pet-brand { text-align:center; margin-bottom:18px; }
.pet-name  { font-weight:900; font-size:1.4rem; color:var(--accent-gold); letter-spacing:-0.5px; }
.pet-name small { display:block; font-size:.78rem; font-weight:600; color:var(--text-muted); margin-top:2px; letter-spacing:0; }

.legal-notice { background:var(--highlight-bg); border:1px dashed var(--accent-gold); border-radius:10px; padding:14px 16px; font-size:.82rem; color:var(--text-main); line-height:1.55; margin:18px 0; }
.legal-notice b { color:var(--accent-gold); }

.pet-bank { background:var(--highlight-bg); border:1px dashed var(--accent-gold); border-radius:12px; padding:18px; text-align:center; margin:15px 0; }

/* 스타일 소개 카드(랜딩) */
.pet-style-intro { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:10px 0 4px; }
@media (min-width:480px) { .pet-style-intro { grid-template-columns:repeat(5,1fr); } }
.pet-style-intro .chip { border:1px solid var(--border-color); background:var(--input-bg); color:var(--text-main); border-radius:10px; padding:10px 4px; text-align:center; font-weight:700; font-size:.78rem; }

/* 결과 그리드 (10칸) */
.pet-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:14px 0; }
@media (min-width:576px) { .pet-grid { grid-template-columns:repeat(3,1fr); } }
.pet-cell { position:relative; border:1px solid var(--border-color); border-radius:12px; overflow:hidden; background:var(--input-bg); aspect-ratio:3/4; }
.pet-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.pet-cell .cap { position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.62); color:#fff; font-size:.72rem; font-weight:700; text-align:center; padding:5px 4px; }
.pet-cell.waiting { display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:.75rem; text-align:center; padding:8px; }
.pet-cell .spin { display:block; font-size:1.3rem; margin-bottom:6px; animation:petspin 1.6s linear infinite; }
@keyframes petspin { to { transform:rotate(360deg); } }
.pet-cell .dlbtn { position:absolute; top:6px; right:6px; background:var(--accent-gold); color:#fff; border-radius:8px; font-size:.72rem; font-weight:800; padding:4px 8px; text-decoration:none; z-index:3; }

/* 입력 그리드 */
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 10px; }
.field-cell { display:flex; flex-direction:column; gap:4px; }
.field-cell.full { grid-column:1 / -1; }
.field-label { font-size:.8rem; font-weight:700; color:var(--text-muted); padding-left:2px; }

/* 펫 종류 선택 칩 */
.pettype-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:6px; }
.pettype-chip { cursor:pointer; border:2px solid var(--input-border); background:var(--input-bg); color:var(--text-main); border-radius:10px; padding:12px 6px; text-align:center; font-weight:700; font-size:.85rem; transition:.15s; user-select:none; }
.pettype-chip:hover { border-color:var(--accent-gold); }
.pettype-chip.active { border-color:var(--accent-gold); background:var(--highlight-bg); color:var(--accent-gold); box-shadow:0 2px 8px rgba(0,0,0,.15); }

/* 가격 배지 */
.pet-price { text-align:center; margin:14px 0; }
.pet-price .anchor { color:var(--text-muted); text-decoration:line-through; font-size:.95rem; margin-right:8px; }
.pet-price .now { color:var(--accent-gold); font-weight:900; font-size:1.5rem; }
.pet-price .per { color:var(--text-muted); font-size:.8rem; }