/* 펫사주 리뉴얼 스킨 (2026-09-24, Claude) — 부자사주 플레이풀 디자인 체계 적용
   원칙: 기존 마크업·id·JS 무변경, 이 파일만 추가 로드. 화면 높이(vh) 의존 없음. */
:root{
  --bg:#F4FBFF; --card:#FFFFFF; --ink:#1B2A5B; --muted:#52617d;
  --accent:#2F6BFF; --accent-ink:#1E4FD8; --soft:#EEF5FF; --line:rgba(27,42,91,.10); --r:20px;
}
html body{background:#F4FBFF linear-gradient(180deg,#8fd6fb 0,#b9e8ff 260px,#e3f6ff 560px,#F4FBFF 820px) no-repeat;color:var(--ink)}
html body .wrap{max-width:1080px}
/* 상단 바: 글자 줄바꿈 금지, 좁은 화면은 아이콘만 */
html body .topbar{flex-wrap:nowrap;gap:6px;padding-top:12px}
html body .tb-btn,html body .tb-dd-trg{white-space:nowrap;background:rgba(255,255,255,.92);border:1px solid rgba(27,42,91,.12);color:#1B2A5B}
html body .tb-btn.pri{background:linear-gradient(180deg,#FFD84D,#F9B91B);color:#1B2A5B;border-color:#F2B21B;font-weight:800}
html body .pn-hb{background:rgba(255,255,255,.92);border-color:rgba(27,42,91,.12);color:#1B2A5B}
@media(max-width:600px){html body .tb-tx{display:none}}
/* 히어로 */
html body header{padding:28px 0 20px}
html body .logo{color:#1B2A5B;font-size:clamp(26px,2vw + 16px,38px)}
html body .logo span{color:#2F6BFF}
html body .tag{color:#1B2A5B;font-size:clamp(15px,.4vw + 13px,18px);font-weight:700;word-break:keep-all}
html body .hero-sub{color:#3E4C6B;font-size:14px;word-break:keep-all}
html body .hero-ill{font-size:clamp(40px,3vw + 24px,64px)}
/* 카드·입력 */
html body .card{border:1px solid rgba(27,42,91,.08);border-radius:22px;box-shadow:0 10px 30px rgba(47,107,255,.10)}
html body .drop{border-color:#B9D4FF;background:#F3F8FF}
html body .drop:hover,html body .drop.on{border-color:#2F6BFF;background:#EAF2FF}
html body .pick button{border-color:#2F6BFF;color:#1E4FD8}
html body .pick button:active{background:#EEF5FF}
html body .seg button.sel,html body .seg button[aria-pressed="true"]{border-color:#2F6BFF;background:#EEF5FF;color:#1E4FD8}
html body .go{background:linear-gradient(180deg,#FFD84D,#F9B91B);color:#1B2A5B;box-shadow:0 4px 0 #E09A00;font-weight:900}
html body .go:disabled{background:#DCE4F0;color:#8A97AE;box-shadow:none}
html body .ph .t{color:#1B2A5B}
html body .ph .s{color:#3E4C6B}
/* PC: 메인은 왼쪽 소개 + 오른쪽 사진 올리기 카드 */
@media(min-width:960px){
  html body .wrap:has(> #form){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);column-gap:56px;align-items:center}
  html body .wrap:has(> #form) > *{grid-column:1/-1}
  html body .wrap:has(> #form) > header{grid-column:1;text-align:left;padding:40px 0}
  html body .wrap:has(> #form) > #form{grid-column:2;margin-top:24px}
  html body .wrap:has(> #form) > #loading,html body .wrap:has(> #form) > #result{max-width:600px;width:100%;margin-left:auto;margin-right:auto}
  html body .wrap > .topbar{grid-column:1/-1}
}
/* 부가 페이지(등록·내 반려동물·커뮤니티)는 읽기 좋은 폭 유지 */
html body .wrap:not(:has(> #form)) > :not(.topbar){max-width:640px;margin-left:auto;margin-right:auto}
/* 드로어 */
html body .pn-acc summary{color:#2F6BFF}
html body .pn-link:hover{background:#EEF5FF}
html body .pn-user{background:#EEF5FF;border-color:#CFE0FF}
html body .pn-user .nm{color:#1E4FD8}
/* 푸터: 어두운 배경 → 부자사주와 같은 밝은 톤 */
html body footer.pn-footer{background:linear-gradient(135deg,#dff3ff,#eee7ff);color:#1B2A5B;border-top:1px solid rgba(27,42,91,.08)}
html body footer.pn-footer .fw{max-width:1080px}
html body footer.pn-footer .fname{color:#1B2A5B}
html body footer.pn-footer .fdesc,html body footer.pn-footer .finfo,html body footer.pn-footer .fcopy{color:#52617d}
html body footer.pn-footer .flinks{border-color:rgba(27,42,91,.10)}
html body footer.pn-footer .flinks a{color:#1B2A5B}
@media(prefers-reduced-motion:reduce){html body *{transition:none!important}}
/* 상단 바: 메뉴는 왼쪽, 나머지는 오른쪽으로 모음 (넓은 화면에서 흩어지지 않게) */
html body .topbar{justify-content:flex-end}
html body .topbar > :first-child{margin-right:auto}
html body footer.pn-footer{text-align:left}

/* 2026-09-24 레이아웃 재검토 2차 */
/* 좌우 여백을 body가 아니라 .wrap이 갖게 해 푸터가 화면 끝까지 닿도록 */
html body{padding-left:0!important;padding-right:0!important;padding-bottom:0!important}
html body .wrap{padding-left:16px;padding-right:16px;box-sizing:border-box}
html body footer.pn-footer{margin-left:0;margin-right:0;border-radius:0}
/* 커뮤니티: 글쓰기 버튼을 다른 블록과 같은 가운데 열로 */
html body .wrap > #newBtn{display:block;margin-left:auto!important;margin-right:auto!important}
/* 상단 부자사주 로고가 너무 작음 */
html body .topbar img[src*="logo_nav_transparent"]{height:30px!important}
/* 메인 히어로: 특징 3가지 */
html body .pet-feats{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
html body .pet-feats li{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:rgba(255,255,255,.9);border:1px solid rgba(27,42,91,.10);border-radius:999px;font-size:14px;font-weight:700;color:#1B2A5B;white-space:nowrap}
html body .hero-ill{letter-spacing:.12em}
@media(min-width:960px){
  html body .wrap:has(> #form) > header .pet-feats{justify-content:flex-start}
  html body .wrap:has(> #form) > header .tag{font-size:clamp(18px,.6vw + 12px,22px);line-height:1.5}
}
html body .topbar > *{flex-shrink:0}
@media(max-width:430px){html body .topbar img[src*="logo_nav_transparent"]{display:none!important}html body .topbar{gap:4px}}