@font-face{font-family:RedAntSans;src:url('/red-ant/creator/home-v4-fonts/Pretendard-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:RedAntSans;src:url('/red-ant/creator/home-v4-fonts/Pretendard-Bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:RedAntSans;src:url('/red-ant/creator/home-v4-fonts/Pretendard-ExtraBold.woff2') format('woff2');font-style:normal;font-weight:800;font-display:swap}

:root{
  --v4-paper:#faf9f6;
  --v4-ink:#080808;
  --v4-white:#f5f5f2;
  --v4-muted:#aaa9a4;
  --v4-rule:#292929;
  --v4-red:#d7352a;
}

body.home-v4{
  margin:0;
  background:var(--v4-paper);
  color:#242321;
  font-family:RedAntSans,sans-serif;
  font-weight:400;
}

.home-v4 *{box-sizing:border-box}
.home-v4 button,
.home-v4 input,
.home-v4 textarea,
.home-v4 select{font-family:RedAntSans,sans-serif}
.home-v4 a{color:inherit;text-underline-offset:4px}

.v4-header{
  position:relative;
  isolation:isolate;
  width:min(1160px,calc(100% - 64px));
  min-height:78px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--v4-white);
  border-bottom:1px solid var(--v4-rule);
}

.v4-header::before,
.v4-hero::before{
  content:'';
  position:absolute;
  z-index:-1;
  inset-block:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:var(--v4-ink);
}

.v4-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--v4-white);
  font-size:14px;
  font-weight:700;
  text-decoration:none;
}

.v4-brand img{width:19px;height:24px}
.v4-header nav{display:flex;align-items:center;gap:30px}
.v4-header nav a,
.v4-header nav .site-auth-control{
  border:0;
  padding:0;
  background:transparent;
  color:#d8d8d5;
  cursor:pointer;
  font:inherit;
  font-size:14px;
  text-decoration:none;
  white-space:nowrap;
}
.v4-header nav a:hover,
.v4-header nav .site-auth-control:hover{color:#fff}
.v4-header nav .site-auth-control:disabled{cursor:wait;opacity:.55}
.v4-header .v4-nav-resource{color:var(--v4-white)}

.v4-hero{
  position:relative;
  isolation:isolate;
  width:min(960px,calc(100% - 64px));
  min-height:calc(100svh - 78px);
  margin:0 auto;
  padding:clamp(110px,15vh,180px) 0 132px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  color:var(--v4-white);
  text-align:center;
}

.v4-kicker{
  margin:0 0 30px;
  color:var(--v4-muted);
  font-size:16px;
  font-weight:400;
  letter-spacing:-.015em;
  line-height:1.55;
}

.v4-kicker span,
.v4-kicker strong{
  display:block;
}

.v4-kicker strong{
  color:var(--v4-white);
  font-size:18px;
  font-weight:700;
}

.v4-hero h1{
  max-width:900px;
  margin:0;
  font-size:clamp(68px,7.6vw,108px);
  font-weight:800;
  letter-spacing:-.055em;
  line-height:.98;
  text-wrap:balance;
}

.v4-intro{
  max-width:680px;
  margin:38px auto 0;
  color:var(--v4-muted);
  font-size:18px;
  line-height:1.75;
}

.v4-primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:34px;
  color:var(--v4-white);
  font-size:16px;
  font-weight:700;
  text-decoration:none;
}

.v4-primary span{
  color:var(--v4-red);
  font-size:19px;
  transition:transform .18s ease;
}
.v4-primary:hover span{transform:translate(2px,-2px)}

.home-v4 #operating-records{margin-top:0}
.home-v4 .creator-footer{
  width:min(860px,calc(100% - 40px));
  max-width:none;
  padding:48px 0;
  background:var(--v4-paper);
  font-family:RedAntSans,sans-serif;
}
.home-v4 :focus-visible{outline:3px solid var(--v4-red);outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  .v4-primary span{transition:none}
}

@media(max-width:680px){
  .v4-header{
    width:calc(100% - 36px);
    min-height:70px;
    gap:12px;
  }
  .v4-brand span{font-size:13px}
  .v4-header nav{gap:16px}
  .v4-header nav a,
  .v4-header nav .site-auth-control{font-size:12px}
  .v4-header nav a:first-child{display:none}
  .v4-hero{
    width:calc(100% - 36px);
    min-height:calc(100svh - 70px);
    padding:clamp(96px,16vh,145px) 0 100px;
  }
  .v4-kicker{
    margin-bottom:26px;
    font-size:14px;
    line-height:1.5;
  }
  .v4-kicker strong{font-size:15px}
  .v4-hero h1{
    font-size:clamp(48px,14vw,64px);
    line-height:1.04;
    letter-spacing:-.052em;
  }
  .v4-intro{
    max-width:340px;
    margin-top:30px;
    font-size:15px;
    line-height:1.7;
  }
  .v4-intro br{display:none}
  .v4-primary{margin-top:29px;font-size:15px}
  .home-v4 .creator-footer{width:calc(100% - 32px);padding:35px 0}
}

@media(max-width:380px){
  .v4-header nav{gap:12px}
  .v4-hero h1{font-size:44px}
}