/* 후킹랩 공용 스타일 — index.html / terms.html / privacy.html 이 함께 씁니다.
본문 레이아웃은 여전히 인라인 style 을 쓰지만, 반응형 오버라이드와
상태 클래스(.err, .on, .perf-panel ...)는 여기 모여 있습니다. */
html,body{margin:0;padding:0;background:#0E0E12;}
body{font-family:'Pretendard Variable',Pretendard,-apple-system,sans-serif;color:#F4F3F6;-webkit-font-smoothing:antialiased;}
a{color:#FF2D78;text-decoration:none;}
a:hover{color:#FF6BA4;}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
/* 전체 지표 표가 펼쳐질 때. sc-if 로 새로 붙는 순간 1회 재생됩니다.
animation-fill-mode 를 주지 않아 끝나면 max-height 제약이 사라지므로,
내용이 아무리 길어져도 잘리지 않습니다. */
@keyframes perfIn{
from{opacity:0;max-height:0;margin-top:0;transform:translateY(-6px)}
to {opacity:1;max-height:560px;margin-top:14px;transform:translateY(0)}
}
.perf-panel{animation:perfIn .36s cubic-bezier(.4,0,.2,1);overflow:hidden;}
@media (prefers-reduced-motion:reduce){ .perf-panel{animation:none} }
/* 문의 폼 입력란.
인라인 스타일이 CSS를 이기기 때문에, 오류 테두리를 입히려면
입력란 스타일이 여기 있어야 합니다. 요소에는 인라인 style 을 두지 마세요. */
.form-card input,.form-card select{background:#0E0E12;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:13px 14px;color:#F4F3F6;font-family:inherit;font-size:15px;outline:none;width:100%;box-sizing:border-box;transition:border-color .15s;}
.form-card input:focus,.form-card select:focus{border-color:#FF2D78;}
.form-card input::placeholder{color:#5E5B68;}
/* 오류 색은 전송 실패 문구와 같은 #FF6B6B.
브랜드 핑크(#FF2D78)는 CTA 색이라 오류에 쓰면 신호가 섞입니다. */
.form-card input.err,.form-card select.err{border-color:#FF6B6B;}
.field-err{margin:0;font-size:13px;line-height:1.5;color:#FF6B6B;}
/* 사례 탭 */
.case-tab{background:none;border:1px solid rgba(255,255,255,.14);color:#9C99A6;font-family:inherit;font-size:14px;font-weight:700;padding:10px 18px;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.case-tab:hover{border-color:rgba(255,45,120,.55);color:#F4F3F6;}
.case-tab.on{background:#FF2D78;border-color:#FF2D78;color:#0E0E12;}
/* 지표 표 — 셀마다 인라인 스타일을 반복하지 않도록 여기서 한 번에 */
.perf{width:100%;min-width:560px;border-collapse:collapse;font-size:14px;}
.perf th{font-size:12.5px;font-weight:700;color:#7B7887;padding:10px 14px;text-align:right;}
.perf th:first-child{text-align:left;padding-left:28px;}
.perf th:last-child{padding-right:28px;color:#B4B1BE;}
.perf td{padding:9px 14px;text-align:right;color:#C9C6D2;}
.perf td:first-child{text-align:left;padding-left:28px;color:#9C99A6;}
.perf td:last-child{padding-right:28px;color:#F4F3F6;font-weight:700;}
.perf tr.cpa td:nth-child(4){color:#FF2D78;font-weight:700;}
.perf tr.roas{border-top:1px solid rgba(255,255,255,.1);}
.perf tr.roas td{padding-top:13px;padding-bottom:0;font-weight:800;color:#F4F3F6;}
.perf tr.roas td:nth-child(4),.perf tr.roas td:last-child{font-size:17px;font-weight:900;color:#FF2D78;}
/* ── 반응형 ──────────────────────────────────────────────
본문 스타일이 전부 인라인이라 오버라이드에 !important가 필요합니다.
960px = 태블릿 / 640px = 모바일 (인스타 인앱 브라우저 포함) */
@media (max-width:960px){
.hero{grid-template-columns:1fr!important;gap:44px!important}
.phone{margin:0 auto!important}
.case{grid-template-columns:1fr!important;gap:24px!important}
.cta{grid-template-columns:1fr!important;gap:40px!important}
.g4{grid-template-columns:repeat(2,1fr)!important}
.h1{font-size:40px!important}
.h2{font-size:30px!important}
.h2-cta{font-size:34px!important}
}
/* 3단 카드(공감·방식·가격)는 이 아래로 좁아지면 가격이 줄바꿈돼 세로로 전환.
릴스 그리드는 9:16이라 계속 3단을 유지합니다. */
@media (max-width:820px){
.g3{grid-template-columns:1fr!important}
.works{grid-template-columns:repeat(3,1fr)!important}
}
@media (max-width:640px){
.wrap{padding-left:20px!important;padding-right:20px!important}
.wrap:not(.wrap-flush){padding-top:60px!important;padding-bottom:64px!important}
.wrap-flush{padding-bottom:64px!important}
.hdr{padding:12px 20px!important}
.hdr-cta{font-size:13px!important;padding:9px 14px!important}
.h1{font-size:32px!important}
.h2{font-size:26px!important}
.h2-cta{font-size:28px!important}
.hero-sub{font-size:17px!important}
.hero-ctas{gap:10px!important;margin-top:28px!important}
.btn-lg{width:100%!important;justify-content:center!important;font-size:15px!important;padding:15px 18px!important;box-sizing:border-box!important}
.phone{width:min(300px,100%)!important;height:auto!important;aspect-ratio:300/533!important;box-sizing:border-box!important}
.g4{grid-template-columns:1fr!important;gap:12px!important}
/* 릴스는 9:16이라 모바일에서도 2단이 더 잘 읽힙니다 */
.works{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}
.stats{grid-template-columns:repeat(2,1fr)!important;gap:26px 12px!important;padding:26px 16px!important}
.stats>div{border-left:none!important}
.stats>div:nth-child(even){border-left:1px solid rgba(255,255,255,.07)!important}
.form-card{padding:24px 20px!important}
/* iOS는 16px 미만 입력란에 포커스하면 화면을 확대합니다 */
.form-card input,.form-card select{font-size:16px!important}
.float-cta{right:14px!important;bottom:14px!important;font-size:14px!important;padding:13px 18px!important}
/* 누적 요약과 펼치기 버튼은 좁은 화면에서 세로로 */
.perf-bar{flex-direction:column!important;align-items:stretch!important;gap:14px!important}
.perf-bar button{justify-content:center!important}
/* 성과 표는 좁은 화면에서 가로 스크롤됩니다. 좌우 여백을 줄여 한 번에 더 보이게 */
.perf{font-size:13px!important}
.perf th:first-child,.perf td:first-child{padding-left:20px!important}
.perf th:last-child,.perf td:last-child{padding-right:20px!important}
}
/* ── 약관·개인정보처리방침 문서 페이지 ─────────────────── */
.doc{max-width:820px;margin:0 auto;padding:72px 28px 96px;}
.doc h1{margin:0 0 8px;font-size:34px;font-weight:900;letter-spacing:-0.03em;}
.doc .doc-meta{margin:0 0 40px;font-size:14px;color:#7B7887;}
.doc h2{margin:40px 0 12px;font-size:19px;font-weight:800;letter-spacing:-0.02em;color:#F4F3F6;}
.doc p,.doc li{font-size:15.5px;line-height:1.8;color:#9C99A6;}
.doc p{margin:0 0 12px;}
.doc ul,.doc ol{margin:0 0 12px;padding-left:20px;}
.doc li{margin:0 0 6px;}
.doc strong{color:#F4F3F6;font-weight:700;}
.doc table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14.5px;}
.doc th,.doc td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);color:#C9C6D2;vertical-align:top;}
.doc th{color:#7B7887;font-weight:700;white-space:nowrap;}
.doc .doc-foot{margin-top:48px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:14px;color:#7B7887;}
@media (max-width:640px){
.doc{padding:48px 20px 72px;}
.doc h1{font-size:26px;}
.doc h2{font-size:17px;}
.doc-scroll{overflow-x:auto;}
}