/* 뷰카이브 for 브랜드 사전 신청 페이지
   앱 S3 규칙: 흰 바탕, 모서리 0, 검정 바 버튼, 분홍 #E2566F 하나만 강조
   색 값은 viewchive-project/business/creator-ad-offer/wireframe/gen.py 와 같다 */

@font-face{font-family:"Pretendard";font-weight:400;font-display:swap;src:url(assets/fonts/Pretendard-Regular.woff2) format("woff2")}
@font-face{font-family:"Pretendard";font-weight:500;font-display:swap;src:url(assets/fonts/Pretendard-Medium.woff2) format("woff2")}
@font-face{font-family:"Pretendard";font-weight:600;font-display:swap;src:url(assets/fonts/Pretendard-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Pretendard";font-weight:700;font-display:swap;src:url(assets/fonts/Pretendard-Bold.woff2) format("woff2")}

:root{
  --ink:#000;--sub:#767676;--ter:#A0A0A8;--line:#EDEDED;--chip:#F2F2F2;--acc:#E2566F;--bg:#fff;
  --w:1120px;--gut:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{font-family:"Pretendard",-apple-system,"Apple SD Gothic Neo",sans-serif;color:var(--ink);background:var(--bg);font-size:16px;line-height:1.6;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}

/* 버튼: 검정 바, 모서리 0 */
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 24px;background:var(--ink);color:#fff;border:1px solid var(--ink);font:600 15px/1 "Pretendard",sans-serif;text-decoration:none;cursor:pointer;border-radius:0;white-space:nowrap}
.btn:hover{background:#222}
.btn:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.btn-sm{height:40px;padding:0 16px;font-size:14px}
.btn-full{width:100%}
.btn-line{background:#fff;color:var(--ink)}
.btn-line:hover{background:var(--chip)}
.btn-inv{background:#fff;color:var(--ink);border-color:#fff}
.btn-inv:hover{background:var(--chip)}
.btn[disabled]{opacity:.5;cursor:default}

/* 상단 바 */
.bar{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;gap:28px;height:64px}
.logo{font-weight:700;font-size:17px;text-decoration:none;white-space:nowrap}
.logo span{color:var(--acc)}
.menu{display:flex;gap:24px;margin-left:auto}
.menu a{font-size:14px;color:var(--sub);text-decoration:none}
.menu a:hover{color:var(--ink)}

/* 공통 섹션 */
.sec{padding:96px 0}
.sec.gray{background:var(--chip)}
.sec-h{font-size:30px;line-height:1.35;font-weight:700;letter-spacing:-.02em;margin-bottom:36px}
.note{margin-top:20px;font-size:13px;color:var(--sub)}

/* 히어로 */
.hero{padding:64px 0 72px;border-bottom:1px solid var(--line)}
.hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.eyebrow{font-size:14px;font-weight:600;color:var(--acc);margin-bottom:16px}
.hero h1{font-size:42px;line-height:1.3;font-weight:700;letter-spacing:-.03em}
.lead{margin-top:20px;font-size:18px;color:#333}
.band{display:inline-block;margin-top:24px;padding:8px 12px;border:1px solid var(--acc);color:var(--acc);font-weight:600;font-size:14px}
.hero .form-slot{margin-top:28px;max-width:520px}
.hero-shot{position:sticky;top:96px}
.phone{border:1px solid var(--line);max-width:340px;margin:0 auto;max-height:620px;overflow:hidden}
.hero-shot figcaption{margin-top:10px;text-align:center;font-size:12px;color:var(--ter)}

/* 숫자 띠 */
.stats{padding:72px 0;border-bottom:1px solid var(--line)}
.stats .sec-h{font-size:22px;margin-bottom:28px}
.stat-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink)}
.stat-grid li{padding:24px 20px 4px 0;display:flex;flex-direction:column;gap:6px}
.stat-grid li+li{padding-left:20px;border-left:1px solid var(--line)}
.stat-grid b{font-size:34px;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.stat-grid .lab{font-size:15px;font-weight:600}
.stat-grid .txt{font-size:14px;color:var(--sub)}

/* 카드 */
.cards.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cards.four{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{border:1px solid var(--line);background:#fff;padding:28px 24px}
.card h3{font-size:19px;line-height:1.4;font-weight:700;margin-bottom:12px}
.card p{font-size:15px;color:#333}
.card.on{border:2px solid var(--acc)}
.card.on h3{color:var(--acc)}

/* 진행 방법 */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.steps li{background:#fff;border:1px solid var(--line);padding:0 0 24px}
.steps .shot{aspect-ratio:603/560;overflow:hidden;border-bottom:1px solid var(--line);margin-bottom:20px}
.steps .no,.steps h3,.steps p{padding:0 20px}
.steps .no{display:block;font-size:13px;font-weight:700;color:var(--acc);margin-bottom:6px}
.steps h3{font-size:17px;font-weight:700;margin-bottom:8px}
.steps p{font-size:14px;color:#333}

/* 가격 */
.prices{display:grid;grid-template-columns:1fr 1.4fr;gap:16px;align-items:stretch}
.price{background:#fff;border:1px solid var(--line);padding:32px 28px;display:flex;flex-direction:column}
.price.on{border:2px solid var(--acc)}
.p-name{font-size:15px;font-weight:700;display:flex;align-items:center;gap:10px}
.badge{background:var(--acc);color:#fff;font-size:12px;font-weight:600;padding:3px 8px}
.p-big{margin-top:16px;font-size:28px;font-weight:700;letter-spacing:-.02em}
.p-sub{margin-top:6px;font-size:14px;color:var(--sub)}
.p-steps{list-style:none;margin:16px 0 24px}
.p-steps li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.p-steps li span{font-size:15px;color:#333}
.p-steps li b{font-size:22px;font-weight:700;letter-spacing:-.02em}
.p-steps li:first-child b{color:var(--acc)}
.price.on .btn{margin-top:auto;align-self:flex-start}
.p-common{margin-top:20px;font-size:15px}

/* 신청 폼 */
.apply{background:#fff;border-top:1px solid var(--line)}
.apply-in{max-width:640px}
.fbox{border:1px solid var(--ink);background:#fff;padding:24px}
.fld{display:block;border:0;margin-bottom:16px}
.fld>span,.fld legend{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.fld input{width:100%;height:48px;padding:0 14px;border:1px solid #d5d5d5;border-radius:0;font:400 16px "Pretendard",sans-serif;background:#fff;color:var(--ink)}
.fld input:focus{border-color:var(--ink);outline:none}
.fld input[aria-invalid="true"]{border-color:var(--acc)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips legend{width:100%}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-flex;align-items:center;height:40px;padding:0 14px;border:1px solid #d5d5d5;font-size:14px;cursor:pointer}
.chips input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}
.chips input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--sub);margin:4px 0 16px;line-height:1.5}
.agree input{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--ink)}
.agree a{color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ferr{margin-top:12px;font-size:14px;color:var(--acc)}
.hint{margin:-8px 0 16px;font-size:13px;color:var(--sub)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.done .d-h,.fbox>.d-h{font-size:20px;font-weight:700;margin-bottom:8px}
.done p{font-size:15px;color:#333}
.d-next{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.d-btns{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}

/* FAQ */
.faq-in{max-width:800px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 32px 20px 0;font-size:17px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;font-weight:400;font-size:22px}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 20px;font-size:15px;color:#333}

/* 마지막 신청 띠, 푸터 */
.cta-end{background:var(--ink);color:#fff;padding:48px 0}
.cta-end .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cta-end p{font-size:20px;font-weight:700}
.foot{padding:40px 0 56px;font-size:13px;color:var(--sub)}
.foot p+p{margin-top:6px}
.f-logo{font-weight:700;color:var(--ink);font-size:14px}
.sep{margin:0 8px;color:var(--ter)}

/* 태블릿 */
@media (max-width:960px){
  .menu{display:none}
  .bar-in{justify-content:space-between}
  .hero-in{grid-template-columns:1fr}
  .hero-shot{position:static}
  .phone{max-height:520px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid li:nth-child(3){padding-left:0;border-left:0}
  .stat-grid li:nth-child(n+3){border-top:1px solid var(--line)}
  .cards.three{grid-template-columns:1fr}
  .cards.four{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .prices{grid-template-columns:1fr}
}
/* 휴대폰: 좌우 여백 16px */
@media (max-width:600px){
  :root{--gut:16px}
  .bar-in{height:56px;gap:12px}
  .logo{font-size:15px}
  .btn-sm{height:36px;padding:0 12px;font-size:13px}
  .sec{padding:64px 0}
  .sec-h{font-size:24px;margin-bottom:24px}
  .hero{padding:40px 0 48px}
  .hero h1{font-size:30px}
  .lead{font-size:16px}
  .lead br{display:none}
  .fbox{padding:20px 16px}
  .stat-grid{grid-template-columns:1fr}
  .stat-grid li,.stat-grid li+li{padding:20px 0 16px;border-left:0;border-top:1px solid var(--line)}
  .stat-grid li:first-child{border-top:0}
  .stat-grid b{font-size:30px}
  .steps{grid-template-columns:1fr}
  .cards.four{grid-template-columns:1fr}
  .price{padding:24px 20px}
  .p-steps li b{font-size:19px}
  .price.on .btn{align-self:stretch}
  .row2{grid-template-columns:1fr}
  .cta-end p{font-size:17px}
  .cta-end .btn{width:100%}
}