/* CREVIT 인플루언서 가이드 — 공용 스타일 */
@font-face{
  font-family:'GmarketSans';
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
  font-weight:700; font-display:swap;
}
:root{
  --ink:#12002B;
  --violet:#8A00F5;
  --violet-lo:#5B00A6;
  --violet-hi:#C08CFF;
  --mint:#00E08A;
  --paper:#F7F5FB;
  --card:#FFFFFF;
  --gray:#6A6180;
  --line:#E2DCEE;
  --red:#C4304A;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:70px; -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
  font-size:17px; line-height:1.8; word-break:keep-all; overflow-wrap:break-word;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.disp{font-family:'GmarketSans',Pretendard,sans-serif; font-weight:700; letter-spacing:-.02em; line-height:1.32;}
a{color:var(--violet-lo);}

/* ── 한글 줄바꿈 ────────────────────────────────────────────
   두 줄이 될 때 윗줄만 길고 아랫줄에 한 단어만 남는 걸 막는다.
     word-break:keep-all  어절 중간에서 안 끊는다 (body 에 있음)
     text-wrap:pretty     끝줄에 한 단어만 남는 걸 막는다 (body 에 있음)
     text-wrap:balance    짧은 글의 줄 길이를 비슷하게 맞춘다 (아래)
   balance 는 브라우저가 끊는 자리를 스스로 고르므로 <br> 이 필요 없다.
   짧은 글(대략 6줄 이하)에만 걸어야 한다 — 긴 본문은 pretty 가 맡는다.
   붙여 두어야 말이 되는 덩어리는 .nb 로 감싼다 (예: 다음 달 10일).

   표 칸(th·td)에는 걸지 않는다. 칸 폭이 이미 좁아서 balance 가
   줄을 더 잘게 쪼갠다 — 「배송정보 입력이 / 필요해요」처럼 된다.
   본문 p 도 마찬가지다. 브라우저는 balance 를 4줄까지만 처리하고,
   그보다 길면 그냥 무시한다. 긴 문단은 pretty 가 맡는 게 맞다. */
h1,h2,h3,
.hd p, .hd p.tag,
h2 + .sub,
.cards .t, .cards .d,
.box p, .box .ttl,
.steps > li > b, .steps li span,
.list li, .list li small,
details summary, details .ans p,
main > section > p,
.next .tt,
.calc .cap,
footer div{
  text-wrap:balance;
}
.nb{white-space:nowrap;}

/* 한 줄을 통째로 지킨다 — .nb 와 하는 일은 같지만 뜻이 다르다.
     .nb        낱말이 갈라지면 안 될 때 (배송 주소, 다음 달 10일)
     .keepline  줄이 끊길 자리를 내가 정할 때
   「신청 버튼이 안 눌린다면, / 대부분 배송 주소가 …」처럼
   조건과 이유 사이에서 끊고 싶을 때, 뒤쪽을 이걸로 묶는다.
   길어도 일부러 묶은 것이니 검사기가 경고하지 않는다. */
.keepline{white-space:nowrap;}

/* 상단 바 */
.bar{
  position:sticky; top:0; z-index:30; background:rgba(18,0,43,.96);
  backdrop-filter:saturate(160%) blur(8px); color:#fff;
}
.bar-in{max-width:760px; margin:0 auto; padding:13px 20px; display:flex; align-items:center; gap:12px;}
.bar a.home{
  color:var(--mint); text-decoration:none; font-family:'GmarketSans',sans-serif;
  font-size:15px; letter-spacing:-.01em; display:flex; align-items:center; gap:8px;
}
.bar a.home .wm{
  font-family:'GmarketSans',sans-serif; color:#fff; letter-spacing:-.03em;
  font-size:17px; margin-right:2px;
}
.bar a.home:hover{text-decoration:underline;}
.bar a.home:focus-visible{outline:2px solid var(--mint); outline-offset:3px; border-radius:2px;}
.bar .cur{font-size:14px; color:rgba(255,255,255,.55); margin-left:auto;}

/* 헤더 */
header.hd{background:var(--ink); color:#fff; padding:44px 20px 46px; position:relative; overflow:hidden;}
header.hd::after{
  content:""; position:absolute; width:300px; height:300px; right:-110px; top:-120px;
  border-radius:88px; transform:rotate(20deg); background:var(--violet); opacity:.55;
}
.hd-in{max-width:760px; margin:0 auto; position:relative; z-index:1;}
.hd .eyebrow{font-size:12px; letter-spacing:.28em; color:var(--mint); font-weight:700; margin:0 0 12px;}
.hd h1{font-size:clamp(26px,6.4vw,40px); margin:0 0 13px;}
.hd p{margin:0; color:#CFC4E4; font-size:16px; max-width:38ch;}

/* 목차 페이지 — 브랜드 워드마크 */
.hd h1.brandline{
  font-size:clamp(46px,12vw,84px); line-height:.92; letter-spacing:-.045em;
  color:#fff; margin:0 0 14px;
}
.hd h1.brandline .dot{color:var(--mint);}
.hd p.tag{
  font-size:14.5px; color:var(--violet-hi); font-weight:600;
  max-width:32ch; margin:0 0 16px; line-height:1.6;
}
.hd .gohome{
  display:inline-block; margin-top:20px; color:var(--mint); text-decoration:none;
  font-family:'GmarketSans',sans-serif; font-size:14.5px;
  border:1px solid rgba(0,224,138,.45); padding:10px 18px; border-radius:6px;
}
.hd .gohome:hover{background:rgba(0,224,138,.12);}
.hd .gohome:focus-visible{outline:3px solid var(--mint); outline-offset:3px;}

/* 본문 */
main{max-width:760px; margin:0 auto; padding:36px 20px 80px;}
section{margin-bottom:42px; scroll-margin-top:70px;}
h2{font-size:clamp(20px,4.6vw,25px); margin:0 0 6px; padding-bottom:9px; border-bottom:2px solid var(--ink);}
h2 + .sub{margin:0 0 20px; font-size:15px; color:var(--gray);}
h3{font-size:18px; margin:26px 0 9px;}
p{margin:0 0 14px;}
strong{font-weight:700; color:var(--violet-lo);}

/* 큰 단계 */
.steps{counter-reset:st; margin:0; padding:0; list-style:none;}
.steps li{
  counter-increment:st; background:var(--card); border:1px solid var(--line);
  border-radius:8px; padding:18px 20px 18px 62px; margin-bottom:11px; position:relative;
}
.steps li::before{
  content:counter(st); position:absolute; left:18px; top:18px;
  width:30px; height:30px; border-radius:8px; background:var(--ink); color:var(--mint);
  font-family:'GmarketSans',sans-serif; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.steps > li > b{display:block; font-size:17px; margin-bottom:3px;}
.steps li span{display:block; font-size:15px; color:var(--gray); line-height:1.72;}
.steps li span b{color:var(--violet-lo);}

/* 체크 목록 */
.list{margin:0 0 18px; padding:0; list-style:none;}
.list li{
  padding:11px 0 11px 30px; border-top:1px solid var(--line); position:relative; font-size:16px;
}
.list li:first-child{border-top:none;}
.list li::before{
  content:""; position:absolute; left:6px; top:21px; width:8px; height:8px;
  border-radius:50%; background:var(--mint);
}
.list li small{display:block; color:var(--gray); font-size:14px; margin-top:2px;}

/* 박스 */
.box{border-left:3px solid var(--violet); background:rgba(138,0,245,.055); padding:15px 18px; border-radius:0 6px 6px 0; margin:0 0 20px;}
.box.warn{border-left-color:var(--red); background:rgba(196,48,74,.06);}
.box.ok{border-left-color:var(--mint); background:rgba(0,224,138,.09);}
.box b{color:var(--violet-lo);}
.box.warn b{color:var(--red);}
.box.ok b{color:#00734A;}
.box p{margin:0 0 7px; font-size:15.5px;}
.box p:last-child{margin:0;}
.box .ttl{font-family:'GmarketSans',sans-serif; font-size:15px; margin-bottom:8px;}

/* 표 */
table{width:100%; border-collapse:collapse; font-size:15.5px; margin:0 0 20px; background:var(--card); border-radius:8px; overflow:hidden;}
th{background:var(--ink); color:var(--mint); text-align:left; padding:12px 14px; font-size:13.5px; font-weight:700;}
td{padding:12px 14px; border-top:1px solid var(--line); vertical-align:top;}
tr:nth-child(even) td{background:#FBF9FE;}
td b{color:var(--violet-lo);}

/* 계산 예시 */
.calc{background:var(--ink); color:#E0D6F2; border-radius:8px; padding:20px 22px; margin:0 0 20px; font-size:16px;}
.calc .row{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-top:1px solid rgba(192,140,255,.2);}
.calc .row:first-of-type{border-top:none;}
.calc .row.tot{border-top:2px solid var(--mint); margin-top:6px; padding-top:13px; font-family:'GmarketSans',sans-serif;}
.calc .row.tot span:last-child{color:var(--mint);}
.calc .row span:last-child{font-variant-numeric:tabular-nums; white-space:nowrap;}
.calc .cap{font-size:13.5px; color:#A99CC4; margin:12px 0 0; line-height:1.65;}

/* FAQ */
details{background:var(--card); border:1px solid var(--line); border-radius:8px; margin-bottom:9px; overflow:hidden;}
details summary{
  padding:15px 18px; cursor:pointer; font-weight:600; font-size:16.5px; list-style:none;
  display:flex; justify-content:space-between; gap:12px; align-items:center;
}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:"+"; color:var(--violet); font-size:20px; font-weight:400; flex:none;}
details[open] summary::after{content:"−";}
details summary:focus-visible{outline:2px solid var(--violet); outline-offset:-2px;}
details .ans{padding:0 18px 16px; font-size:15.5px; color:#3A3050; line-height:1.78;}
details .ans p{margin:0 0 9px;}
details .ans p:last-child{margin:0;}

/* 카드 링크 (목차) */
.cards{display:grid; gap:11px; margin:0 0 26px;}
.cards a{
  display:block; background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:18px 20px; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s;
}
.cards a:hover{border-color:var(--violet); transform:translateY(-1px);}
.cards a:focus-visible{outline:3px solid var(--violet-hi); outline-offset:2px;}
.cards .n{font-family:'GmarketSans',sans-serif; font-size:12px; color:var(--violet); letter-spacing:.1em;}
.cards .t{font-family:'GmarketSans',sans-serif; font-size:19px; margin:4px 0 4px;}
.cards .d{font-size:15px; color:var(--gray); line-height:1.65;}

/* 다음 글 */
.next{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; padding-top:24px; border-top:1px solid var(--line);}
.next a{
  flex:1; min-width:180px; background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:15px 18px; text-decoration:none; color:inherit;
}
.next a:hover{border-color:var(--violet);}
.next a:focus-visible{outline:3px solid var(--violet-hi); outline-offset:2px;}
.next .lb{font-size:12px; color:var(--gray); letter-spacing:.1em;}
.next .tt{font-family:'GmarketSans',sans-serif; font-size:16.5px; margin-top:3px;}

/* CTA */
.cta{
  display:inline-block; background:var(--ink); color:var(--mint); text-decoration:none;
  font-family:'GmarketSans',sans-serif; font-size:16px; padding:15px 28px; border-radius:8px; margin:4px 0 20px;
}
.cta:hover{filter:brightness(1.2);}
.cta:focus-visible{outline:3px solid var(--violet-hi); outline-offset:3px;}

footer{background:var(--ink); color:#A99CC4; padding:32px 20px 40px; font-size:14px;}
footer div{max-width:760px; margin:0 auto;}
footer b{color:var(--mint);}
footer a{color:var(--violet-hi);}
footer .up{margin-top:12px; display:block; font-size:13.5px;}

@media (max-width:560px){
  body{font-size:16px;}
  header.hd{padding:34px 18px 36px;}
  main{padding:28px 18px 60px;}
  .steps li{padding:16px 16px 16px 54px;}
  .steps li::before{left:14px; top:16px;}
  .calc{padding:17px 18px;}
  .calc .row{font-size:15px;}
}