/* =====================================================================
   동물칩 올인원 서비스 페이지 (chip.html)
   ===================================================================== */
.chip-page { background: #fff; }
.hl { color: var(--orange-65); }

/* 칩 독립 페이지 전용 로고. 테마 공통 헤더 로고는 layout.css가 담당한다. */
.chip-page .logo { display: inline-flex; align-items: center; gap: 9px; line-height: 0; }
.chip-page .logo__mark { height: 44px; width: auto; aspect-ratio: 86.4702 / 63.5175; }
.chip-page .logo__wordmark { height: 17px; width: auto; aspect-ratio: 247.03 / 23.581; }
.chip-page .logo--sm { height: 45px; gap: 6px; }
.chip-page .logo--sm .logo__mark { height: 26px; }
.chip-page .logo--sm .logo__wordmark { height: 14px; }

/* ---------- 히어로 ---------- */
.chero { padding-top: 28px; }
.chero__logo { margin-bottom: 28px; }
.chero__body { display: flex; align-items: center; gap: 40px; }
.chero__text { flex: 1; min-width: 0; }
.chero__title { font-size: var(--fs-display); font-weight: var(--fw-extrabold); color: var(--neutral-10); letter-spacing: var(--tracking); line-height: var(--lh-tight); }
.chero__desc { margin-top: 18px; font-size: 16px; color: var(--neutral-50); line-height: 1.65; }
.chero__tabs { display: flex; gap: 28px; margin-top: 28px; }
.chero__tabs a { font-size: 16px; font-weight: 600; color: var(--neutral-50); padding-bottom: 8px; }
.chero__tabs a.is-active { color: var(--neutral-10); border-bottom: 2px solid var(--orange-65); }
.chero__visual { flex: 0 0 46%; }
.chero__visual img { width: 100%; height: 360px; object-fit: cover; border-radius: var(--radius-xl); }

/* ---------- 통계 바 ---------- */
.cstats { background: var(--neutral-10); margin-top: 40px; }
.cstats__inner { display: flex; }
.cstat { flex: 1; padding: 28px 32px; border-left: 1px solid #2e2e2e; }
.cstat:first-child { border-left: 0; padding-left: 0; }
.cstat__label { display: block; font-size: 14px; color: #9b9b9b; }
.cstat__num { display: block; margin-top: 10px; font-size: var(--fs-title-lg); font-weight: var(--fw-bold); color: #fff; }
.cstat__num em { font-style: normal; font-size: 18px; font-weight: 500; }

/* ---------- 공통 섹션 ---------- */
.csection { margin-top: 80px; }
.ctitle { font-size: var(--fs-title-lg); font-weight: var(--fw-bold); color: var(--neutral-10); line-height: var(--lh-heading); text-align: center; letter-spacing: var(--tracking); margin-bottom: 40px; }

/* ---------- 4대 서비스 ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc-card { position: relative; background: var(--neutral-95); border-radius: var(--radius-lg); padding: 24px; min-height: 220px; overflow: hidden; }
.svc-card__label { font-size: 13px; color: var(--neutral-50); }
.svc-card__title { display: block; margin-top: 6px; font-size: 20px; font-weight: 700; color: var(--neutral-10); }
.svc-card__thumb { position: absolute; right: 16px; bottom: 16px; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; }
.svc-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ghost-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; margin-top: 16px; padding: 9px 16px; border: 1px solid var(--neutral-80); border-radius: var(--radius-pill); background: #fff; font-size: 13px; font-weight: 600; color: var(--neutral-40); transition: border-color .15s, color .15s, background .15s, transform .15s; }
.ghost-btn:hover { border-color: var(--orange-65); color: var(--orange-65); background: var(--orange-100); }
.ghost-btn:active { transform: translateY(1px); }

/* ---------- 등록 배너 ---------- */
.reg-banner { display: flex; background: var(--neutral-95); border-radius: var(--radius-lg); overflow: hidden; }
.reg-banner__text { flex: 1; padding: 48px; }
.reg-banner__text strong { display: block; font-size: var(--fs-title-sm); font-weight: var(--fw-bold); color: var(--neutral-10); line-height: var(--lh-heading); }
.reg-banner__text p { margin-top: 16px; font-size: 15px; color: var(--neutral-50); line-height: 1.6; }
.dark-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 24px; padding: 13px 26px; background: var(--neutral-10); color: #fff; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; transition: background .15s, transform .15s; }
.dark-btn:hover { background: var(--neutral-20); }
.dark-btn:active { transform: translateY(1px); }
.reg-banner__img { flex: 0 0 46%; background: #e9ece7; }
.reg-banner__img img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: center 66%; }

/* ---------- 왜 등록? ---------- */
.why-list { border-top: 1px solid var(--neutral-90); }
.why-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 8px; border-bottom: 1px solid var(--neutral-90); }
.why-row p { font-size: var(--fs-base); color: var(--neutral-30); }
.why-row__img { flex: 0 0 200px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; }
.why-row__img img { width: 100%; height: 100%; object-fit: cover; }
.cta-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding: 24px 32px; background: var(--neutral-10); border-radius: var(--radius-md); color: #fff; }
.cta-bar span { font-size: var(--fs-base); }
.cta-bar strong { font-weight: 700; }
.cta-bar__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 24px; background: #fff; color: var(--neutral-10); border-radius: var(--radius-pill); font-size: 14px; font-weight: 700; white-space: nowrap; transition: transform .15s, box-shadow .15s; }
.cta-bar__btn:hover { box-shadow: 0 8px 18px rgba(0,0,0,.12); }
.cta-bar__btn:active { transform: translateY(1px); }

/* ---------- 프리미엄 용품 ---------- */
.goods-banner { display: flex; align-items: center; gap: 24px; background: var(--neutral-95); border-radius: var(--radius-lg); padding: 44px 48px; }
.goods-banner__text { flex: 1; }
.goods-banner__text strong { display: block; font-size: var(--fs-title-sm); font-weight: var(--fw-bold); color: var(--neutral-10); line-height: var(--lh-heading); }
.goods-banner__text p { margin-top: 14px; font-size: 14px; color: var(--neutral-50); line-height: 1.6; }
.goods-banner__img { flex: 0 0 260px; text-align: right; }
.goods-banner__img img { height: 260px; width: auto; max-width: 100%; object-fit: contain; }
.cat-circles { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; }
.cat-circles li { flex: 1; text-align: center; }
.cc__img { display: block; width: 120px; height: 120px; margin: 0 auto; border-radius: 50%; overflow: hidden; }
.cc__img img { width: 100%; height: 100%; object-fit: cover; }
.cc__cap { display: block; margin-top: 14px; font-size: 13px; color: var(--neutral-50); line-height: 1.5; }
.cc__cap strong { display: block; color: var(--neutral-10); font-size: 15px; margin-top: 2px; }

/* ---------- soft 버튼 (퀵링크 등) ---------- */
.soft-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; margin-top: 16px; padding: 9px 20px; background: var(--orange-95); color: var(--orange-60); border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; transition: background .15s, transform .15s; }
.soft-btn:hover { background: var(--orange-90); }
.soft-btn:active { transform: translateY(1px); }

/* ---------- 파트너 모집 (그린) ---------- */
.partner { background: #117a5c; margin-top: 80px; padding: 56px 0; }
.partner__inner { text-align: center; color: #fff; }
.partner__title { font-size: var(--fs-title-md); font-weight: var(--fw-bold); }
.partner__sub { margin-top: 12px; font-size: 15px; color: rgba(255,255,255,.85); }
.partner__visual { max-width: 720px; margin: 28px auto 0; }
.partner__visual img { width: 100%; }
.partner__bar { display: flex; align-items: center; justify-content: space-between; max-width: 880px; margin: 24px auto 0; padding: 20px 28px; background: rgba(255,255,255,.12); border-radius: var(--radius-md); }
.partner__bar span { font-size: 16px; }
.partner__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 11px 22px; background: #fff; color: var(--neutral-10); border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; white-space: nowrap; transition: transform .15s, box-shadow .15s; }
.partner__btn:hover { box-shadow: 0 8px 18px rgba(0,0,0,.12); }
.partner__btn:active { transform: translateY(1px); }

/* ---------- 퀵 링크 ---------- */
.quick-links { margin-top: 64px; }
.ql-row { display: flex; align-items: center; justify-content: space-between; padding: 26px 0; border-top: 1px solid var(--neutral-90); }
.ql-row:last-child { border-bottom: 1px solid var(--neutral-90); }
.ql-row strong { font-size: 18px; font-weight: 700; color: var(--neutral-10); }

/* ---------- 다크 푸터 ---------- */
.dark-footer { background: var(--neutral-10); margin-top: 64px; padding: 44px 0; }
.dark-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.dark-footer__legal { font-size: 12px; color: #9b9b9b; line-height: 1.7; text-align: right; }
.dark-footer__legal i { color: #5c5c5c; font-style: normal; margin: 0 8px; }

/* =====================================================================
   반응형
   ===================================================================== */
@media (max-width: 1024px) {
  .chero__title { font-size: 36px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-circles { flex-wrap: wrap; }
  .cat-circles li { flex: 0 0 calc((100% - 32px) / 3); }
}
@media (max-width: 768px) {
  .chip-page .chero__logo.logo { gap: 8px; }
  .chip-page .chero__logo .logo__mark,
  .chip-page .chero__logo.logo .logo__mark { width: 43px; height: 32px; }
  .chip-page .chero__logo .logo__wordmark,
  .chip-page .chero__logo.logo .logo__wordmark { width: 136px; height: 13px; }
  .chero__logo { gap: 8px; }
  .chero__body { flex-direction: column; align-items: stretch; gap: 24px; }
  .chero__visual { flex: none; }
  .chero__visual img { height: 240px; }
  .chero__title { font-size: var(--fs-title-sm); }
  .cstats__inner { flex-direction: column; }
  .cstat { border-left: 0; border-top: 1px solid #2e2e2e; padding: 18px 0; }
  .cstat:first-child { border-top: 0; }
  .csection { margin-top: 56px; }
  .ctitle { font-size: 22px; margin-bottom: 28px; }
  .svc-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .svc-card { min-height: 180px; padding: 18px; }
  .svc-card__thumb { width: 64px; height: 64px; }
  .reg-banner { flex-direction: column-reverse; }
  .reg-banner__text { padding: 28px; }
  .reg-banner__img { flex: none; height: 260px; }
  .reg-banner__img img { display: block; height: 100%; min-height: 0; object-position: center 64%; }
  .why-row { flex-direction: row; gap: 14px; padding: 14px 0; }
  .why-row p { font-size: 15px; }
  .why-row__img { flex: 0 0 96px; height: 56px; }
  .cta-bar { flex-direction: column; gap: 16px; text-align: center; }
  .goods-banner { flex-direction: column; padding: 28px; text-align: center; }
  .goods-banner__img { flex: none; text-align: center; }
  .cat-circles { gap: 12px; }
  .cat-circles li { flex: 0 0 calc((100% - 24px) / 2); }
  .cc__img { width: 96px; height: 96px; }
  .partner__bar { flex-direction: column; gap: 14px; text-align: center; }
  .ql-row strong { font-size: 15px; }
  .dark-footer__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .dark-footer__legal { text-align: left; }
}