/* 파일명: site.css | 경로: public_html/assets/css/ | 기능: petner.kr 홈 전용(공용 header.php 가 홈에서만 불러온다) | 작성일: 2026-10-06
   bix.co.kr 의 히어로·FAQ 구성을 옮겼다. 색은 새로 짓지 않고 공용 토큰(app.css :root)만 쓴다. */

/* ── 히어로: 왼쪽 소개 / 오른쪽 리포트 미리보기 ── */
.home-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:center;padding:40px 0 56px}
.home-hero-copy{min-width:0}
.home-hero h1{font-size:42px;line-height:1.3;margin-bottom:20px}
.home-title-line{display:block} /* 제목 두 줄(반려동물 사이트 / SEO 리포트) - 화면이 넓어도 이 자리에서 줄을 바꾼다 */
.home-hero .lead{margin-bottom:28px}
.home-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.home-hero .registration-policy{margin:16px 0 0}
.hero-meta{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--muted)}
.hero-meta li{display:flex;align-items:center;gap:6px}
.hero-meta .icon{color:var(--success)}

.hero-visual{position:relative;min-width:0;padding:18px 0 0}
.hero-visual-back{position:absolute;inset:0 12px 44px 20px;background:var(--soft);border:1px solid #c9d8fb;border-radius:20px;transform:rotate(5deg)}
.hero-report{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 40px rgb(24 43 77 / 12%);overflow:hidden}
.hero-report-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.hero-report-brand{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.03em}
.hero-report-summary{display:flex;align-items:center;gap:24px;padding:28px 24px}
.hero-report-summary>div{min-width:0}
.hero-report-ring{width:112px;height:112px;flex:none;border:8px solid var(--soft);border-top-color:var(--brand);border-right-color:var(--brand);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-report-ring strong{font-size:36px;line-height:1.1;letter-spacing:-.05em}
.hero-report-ring span{font-size:12px;color:var(--muted)}
.hero-report-kicker{display:block;font-size:12px;font-weight:700;color:var(--brand);margin-bottom:6px}
.hero-report-title{display:block;font-size:19px;line-height:1.45;letter-spacing:-.025em}
.hero-report-caption{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.hero-report-list{list-style:none;margin:0;padding:0 24px 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}
.hero-report-list li{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.hero-report-list .icon{color:var(--brand)}
.hero-report-bottom{display:flex;justify-content:space-between;gap:8px;padding:14px 24px;background:#f5f8ff;border-top:1px solid var(--line);font-size:12px;font-weight:600;color:#1d49b4}
/* 카드 아래에 붙는 밴드색 띠 - 헤더·푸터·퀵메뉴와 같은 면 */
.hero-visual-note{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 32px);margin:-1px auto 0;padding:12px;background:var(--band);color:var(--band-text);border-radius:0 0 12px 12px;font-size:13px;text-align:center}
.hero-visual-note .icon{color:var(--band-accent)}

/* ── FAQ: 왼쪽 소개 / 오른쪽 아코디언 (css-standard §16.6) ── */
.faq-section{margin-top:64px}
.faq-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.faq-intro{position:sticky;top:calc(var(--header-h) + 32px);min-width:0}
.faq-eyebrow{margin:0 0 10px;color:var(--brand);font-size:13px;font-weight:700;letter-spacing:.04em}
.faq-intro h2{font-size:28px;margin-bottom:12px}
.faq-intro>p:not(.faq-eyebrow){margin:0;color:var(--muted)}
/* 색 채운 상자로 감싸지 않고 구분선 한 줄로 나눈다(§16.6) */
.faq-more{margin-top:32px;padding-top:22px;border-top:1px solid var(--line)}
.faq-more p{margin:0;color:var(--muted);font-size:15px}
.faq-more .faq-more-title{margin-bottom:6px;color:var(--text);font-weight:700}
.faq-more .faq-more-links{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.faq{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);min-width:0}
.faq-item+.faq-item{border-top:1px solid var(--line)}
.faq-item[open]{background:#f7f9fe}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{margin:0;font-size:16px}
.faq-item summary::after{content:"+";flex:none;font-size:20px;line-height:1;color:var(--brand)}
.faq-item[open] summary::after{content:"\2212"}
.faq-answer{padding:0 24px 22px;color:#41526e}
.faq-answer p{margin:0}

@media(max-width:991px){
  .home-hero{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero-visual{width:100%;max-width:520px}
  .faq-layout{grid-template-columns:minmax(0,1fr);gap:30px}
  .faq-intro{position:static}
}
@media(max-width:767px){.home-hero{padding-top:16px}.home-hero h1{font-size:34px}.faq-section{margin-top:48px}.faq-intro h2{font-size:24px}}
@media(max-width:575px){
  .home-hero-actions .btn{width:100%}
  .hero-report-head,.hero-report-bottom{padding-inline:18px}
  .hero-report-summary{gap:16px;padding:20px 18px}
  .hero-report-ring{width:92px;height:92px;border-width:7px}
  .hero-report-ring strong{font-size:28px}
  .hero-report-list{padding:0 18px 20px}
  .faq-item summary{padding:17px 18px}
  .faq-answer{padding:0 18px 18px}
}