.webpack-landing-wrap {
  margin-top: 56px;
  border-top: 1px solid rgba(255, 90, 31, 0.2);
}

.webpack-landing {
  --orange:#ff5a1f;
  --ink:#111;
  --cream:#f5f3ee;
  --line:#d5d1c9;
  --muted:#696660
}
.webpack-landing * {
  box-sizing:border-box
}
.webpack-landing {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:Pretendard,"Noto Sans KR",Arial,sans-serif;
  word-break:keep-all
}
.webpack-landing a {
  color:inherit;
  text-decoration:none
}
.webpack-landing .nav-hidden {
  height:78px;
  padding:0 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #1112;
  position:absolute;
  inset:0 0 auto;
  z-index:10
}
.brand {
  font-size:22px;
  font-weight:900;
  letter-spacing:-1px;
  display:flex;
  align-items:center
}
.brand span,.hero em,.problem em,.automation em {
  color:var(--orange);
  font-style:normal
}
.brand i {
  width:7px;
  height:7px;
  background:var(--orange);
  border-radius:50%;
  margin:0 0 14px 3px
}
.webpack-landing .nav-hidden nav {
  display:flex;
  gap:34px;
  font-size:14px;
  font-weight:700
}
.webpack-landing .nav-hidden nav a:hover {
  color:var(--orange)
}
.navCta,.primary {
  background:var(--orange);
  color:white;
  padding:14px 22px;
  font-size:14px;
  font-weight:800
}
.hero {
  min-height:850px;
  padding:145px 5vw 75px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  overflow:hidden;
  background:radial-gradient(circle at 80% 45%,#fff,#f5f3ee 42%,#ece9e2)
}
.heroCopy,.heroVisual {
  position:relative
}
.eyebrow {
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  margin-bottom:28px
}
.eyebrow span {
  background:var(--orange);
  color:#fff;
  padding:6px 9px;
  margin-right:10px
}
.hero h1 {
  font-size:clamp(54px,5.9vw,96px);
  line-height:.99;
  letter-spacing:-.07em;
  margin:0 0 30px;
  font-weight:900
}
.heroText {
  font-size:18px;
  line-height:1.8;
  color:#4f4c47
}
.heroActions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:38px
}
.primary {
  padding:18px 24px
}
.primary b {
  margin-left:24px
}
.textLink {
  font-size:14px;
  font-weight:800;
  border-bottom:1px solid;
  padding-bottom:5px
}
.heroMeta {
  display:flex;
  margin-top:65px;
  border-top:1px solid var(--line);
  max-width:610px;
  padding-top:22px
}
.heroMeta div {
  flex:1;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--line);
  padding-left:22px
}
.heroMeta div:first-child {
  padding-left:0
}
.heroMeta div:last-child {
  border:0
}
.heroMeta strong {
  font-size:23px
}
.heroMeta span {
  font-size:12px;
  color:var(--muted);
  margin-top:6px
}
.heroVisual {
  min-height:560px
}
.browser {
  position:absolute;
  width:min(620px,45vw);
  right:-5vw;
  top:35px;
  background:#fff;
  box-shadow:0 28px 70px #0003;
  transform:rotate(-2deg)
}
.browserTop {
  height:35px;
  background:#191919;
  color:#777;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 12px
}
.browserTop i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#505050
}
.browserTop span {
  font-size:9px;
  margin:auto
}
.mockNav {
  height:65px;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px
}
.mockNav b {
  font-size:18px
}
.mockNav button,.mockHero button {
  background:#141414;
  color:white;
  border:0;
  padding:10px 16px
}
.mockHero {
  height:405px;
  background:linear-gradient(135deg,#e7e3db,#bdb7ab);
  padding:75px 55px;
  position:relative;
  overflow:hidden
}
.mockHero:after {
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  background:var(--orange);
  right:-50px;
  bottom:-100px
}
.mockHero small {
  font-size:10px;
  letter-spacing:.16em
}
.mockHero strong {
  display:block;
  font-size:34px;
  line-height:1.25;
  margin:17px 0
}
.mockHero p {
  font-size:11px
}
.mockHero button {
  margin-top:20px
}
.floatCard {
  position:absolute;
  background:#111;
  color:#fff;
  box-shadow:0 15px 40px #0004;
  z-index:3;
  padding:22px
}
.floatCard span {
  font-size:9px;
  letter-spacing:.12em;
  color:#aaa
}
.floatCard p {
  font-size:10px;
  color:#aaa;
  margin:7px 0 0
}
.rank {
  left:-20px;
  bottom:5px;
  width:185px
}
.rank strong {
  display:block;
  font-size:42px;
  margin:10px 0
}
.rank small {
  font-size:12px;
  color:#888
}
.rank i {
  display:block;
  height:4px;
  background:#444
}
.rank i b {
  display:block;
  width:92%;
  height:100%;
  background:var(--orange)
}
.active {
  right:-10px;
  bottom:40px;
  width:205px
}
.pulse {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#57d487;
  box-shadow:0 0 0 5px #57d48722;
  margin:17px 10px 17px 3px
}
.active strong {
  font-size:16px
}
.sectionNo {
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  color:var(--orange);
  margin:0 0 25px
}
.problem {
  padding:120px 8vw;
  background:#111;
  color:#fff
}
.problem h2,.sectionHead h2,.automation h2 {
  font-size:clamp(40px,5vw,72px);
  line-height:1.14;
  letter-spacing:-.055em;
  margin:0;
  font-weight:850
}
.problemGrid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9vw;
  margin-top:70px;
  border-top:1px solid #333;
  padding-top:35px
}
.problemGrid p {
  font-size:17px;
  line-height:1.8;
  color:#aaa
}
.problemGrid strong {
  color:white
}
.difference,.process,.faq {
  padding:120px 7vw
}
.sectionHead h2 {
  font-size:clamp(40px,4.5vw,66px)
}
.diffGrid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:70px;
  border-top:1px solid #aaa
}
.diffGrid article {
  padding:26px 36px 10px 0;
  border-right:1px solid #ccc;
  min-height:300px
}
.diffGrid article+article {
  padding-left:36px
}
.diffGrid article:last-child {
  border:0
}
.diffGrid article>span {
  font-size:11px;
  color:#999
}
.icon {
  font-size:38px;
  color:var(--orange);
  margin:45px 0 28px
}
.diffGrid h3 {
  font-size:24px;
  margin:0 0 15px
}
.diffGrid p {
  font-size:14px;
  color:var(--muted);
  line-height:1.8
}
.plans {
  background:#161616;
  color:white;
  padding:120px 6vw
}
.sectionHead.light>p:last-child {
  color:#999;
  margin-top:20px
}
.planGrid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:60px
}
.plan {
  border:1px solid #3d3d3d;
  padding:34px;
  background:#1c1c1c;
  min-height:600px;
  display:flex;
  flex-direction:column;
  transition:.25s
}
.plan:hover {
  transform:translateY(-6px)
}
.plan.featured {
  background:var(--orange);
  border-color:var(--orange);
  transform:translateY(-14px)
}
.planTop {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.planTop span {
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
  border:1px solid #666;
  padding:6px 9px
}
.featured .planTop span {
  border-color:white
}
.planTop p {
  font-size:11px;
  color:#999
}
.featured .planTop p {
  color:white
}
.plan h3 {
  font-size:28px;
  margin:55px 0 12px
}
.price strong {
  font-size:68px;
  letter-spacing:-.05em
}
.price b {
  font-size:16px;
  margin-left:5px
}
.note {
  font-size:13px;
  color:#999;
  min-height:42px
}
.featured .note {
  color:#ffe3d8
}
.plan ul {
  list-style:none;
  margin:35px 0;
  padding:25px 0;
  border-top:1px solid #444
}
.plan li {
  font-size:14px;
  margin:15px 0
}
.plan li i {
  font-style:normal;
  color:var(--orange);
  margin-right:12px
}
.featured li i {
  color:white
}
.plan>a {
  margin-top:auto;
  border:1px solid #555;
  padding:17px;
  font-size:13px;
  font-weight:800;
  display:flex;
  justify-content:space-between
}
.featured>a {
  background:white;
  color:#111;
  border-color:white
}
.priceNotice {
  text-align:center;
  color:#777;
  font-size:11px;
  margin-top:32px
}
.automation {
  padding:130px 8vw;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  min-height:720px;
  background:#ece9e2
}
.automation>div>p:not(.sectionNo) {
  color:var(--muted);
  line-height:1.8;
  margin-top:25px
}
.automation>div>a {
  display:inline-block;
  margin-top:28px;
  font-size:14px;
  font-weight:800;
  border-bottom:1px solid
}
.orbit {
  height:470px;
  position:relative
}
.orbit:before,.orbit:after {
  content:"";
  position:absolute;
  border:1px dashed #b5b0a7;
  border-radius:50%;
  inset:25px
}
.orbit:after {
  inset:85px
}
.core {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:175px;
  height:175px;
  background:#111;
  color:white;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:2
}
.core span,.orbitItem i {
  font-size:9px;
  color:var(--orange);
  font-weight:900
}
.core strong {
  font-size:22px;
  margin:5px
}
.core small {
  color:#888
}
.orbitItem {
  position:absolute;
  background:white;
  border:1px solid var(--line);
  padding:16px 20px;
  box-shadow:0 12px 35px #0001;
  display:flex;
  flex-direction:column
}
.orbitItem i {
  font-style:normal;
  margin-bottom:5px
}
.orbitItem b {
  font-size:13px
}
.orbitItem.a {
  top:35px;
  left:47%
}
.orbitItem.b {
  bottom:55px;
  right:1%
}
.orbitItem.c {
  bottom:65px;
  left:1%
}
.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:70px;
  border-top:1px solid #aaa
}
.steps article {
  padding:28px 24px 30px 0;
  border-right:1px solid #ccc;
  min-height:210px
}
.steps article+article {
  padding-left:24px
}
.steps span {
  font-size:11px;
  color:var(--orange);
  font-weight:900
}
.steps h3 {
  font-size:21px;
  margin:60px 0 10px
}
.steps p {
  font-size:13px;
  line-height:1.7;
  color:var(--muted)
}
.faq {
  background:white;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:7vw
}
.faq details {
  border-top:1px solid #ccc;
  padding:25px 0
}
.faq details:last-child {
  border-bottom:1px solid #ccc
}
.faq summary {
  list-style:none;
  font-size:17px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  justify-content:space-between
}
.faq summary::-webkit-details-marker {
  display:none
}
.faq summary span {
  font-size:22px;
  color:var(--orange)
}
.faq details[open] summary span {
  transform:rotate(45deg)
}
.faq details p {
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
  padding-right:50px
}
.contact {
  background:var(--orange);
  color:white;
  text-align:center;
  padding:120px 20px
}
.contact>p:first-child {
  font-size:11px;
  font-weight:900;
  letter-spacing:.2em
}
.contact h2 {
  font-size:clamp(45px,6vw,86px);
  line-height:1.07;
  letter-spacing:-.06em;
  margin:28px 0
}
.contact .sub {
  line-height:1.8
}
.contact>div {
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:40px
}
.contact a {
  width:210px;
  padding:19px;
  background:#111;
  text-align:left;
  font-size:13px;
  font-weight:800;
  display:flex;
  justify-content:space-between
}
.contact a+a {
  background:white;
  color:#111
}
.contact small {
  display:block;
  margin-top:25px;
  opacity:.65;
  font-size:10px
}
footer {
  background:#111;
  color:white;
  padding:36px 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between
}
footer p {
  font-size:11px;
  color:#777
}
@media(max-width:900px) {
  .nav nav {
    display:none
  }
  .hero {
    grid-template-columns:1fr;
    padding-top:125px
  }
  .heroVisual {
    min-height:520px
  }
  .browser {
    width:95vw
  }
  .problemGrid,.automation,.faq {
    grid-template-columns:1fr
  }
  .diffGrid,.planGrid {
    grid-template-columns:1fr
  }
  .plan.featured {
    transform:none
  }
  .steps {
    grid-template-columns:1fr 1fr
  }
  .faq {
    gap:50px
  }
  .orbit {
    margin-top:40px
  }
}
@media(max-width:560px) {
  .nav {
    height:68px
  }
  .navCta {
    padding:11px 13px
  }
  .hero {
    min-height:auto;
    padding:115px 20px 60px
  }
  .hero h1 {
    font-size:51px
  }
  .heroText {
    font-size:15px
  }
  .heroActions {
    align-items:flex-start;
    flex-direction:column;
    gap:18px
  }
  .heroMeta {
    margin-top:45px
  }
  .heroMeta div {
    padding-left:10px
  }
  .heroMeta strong {
    font-size:18px
  }
  .heroVisual {
    min-height:390px
  }
  .browser {
    top:35px
  }
  .mockHero {
    height:290px;
    padding:45px 28px
  }
  .mockHero strong {
    font-size:25px
  }
  .rank {
    left:0;
    bottom:0
  }
  .active {
    display:none
  }
  .problem,.difference,.plans,.automation,.process,.faq,.contact {
    padding:85px 20px
  }
  .problemGrid {
    gap:10px;
    margin-top:45px
  }
  .diffGrid {
    margin-top:45px
  }
  .diffGrid article,.diffGrid article+article {
    padding:25px 0;
    border-right:0;
    border-bottom:1px solid #ccc
  }
  .plan {
    padding:27px;
    min-height:550px
  }
  .orbit {
    height:380px
  }
  .orbit:before {
    inset:20px
  }
  .orbit:after {
    inset:65px
  }
  .core {
    width:145px;
    height:145px
  }
  .orbitItem {
    padding:12px
  }
  .steps {
    grid-template-columns:1fr
  }
  .steps article,.steps article+article {
    padding:25px 0;
    border-right:0;
    border-bottom:1px solid #ccc;
    min-height:auto
  }
  .steps h3 {
    margin-top:30px
  }
  .contact>div {
    flex-direction:column;
    align-items:center
  }
  .contact a {
    width:260px
  }
  footer {
    align-items:flex-start;
    flex-direction:column;
    gap:8px
  }
}
.examples {
  padding:120px 6vw;
  background:#f5f3ee
}
.exampleIntro {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:60px
}
.exampleIntro h2 {
  font-size:clamp(40px,4.5vw,66px);
  line-height:1.14;
  letter-spacing:-.055em;
  margin:0
}
.exampleIntro>p {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  text-align:right
}
.exampleBoard {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:2px solid #111
}
.examplePost {
  display:block;
  min-width:0;
  box-sizing:border-box;
  padding:28px 22px 34px 0;
  border-bottom:1px solid #bbb;
  transition:.25s
}
.examplePost:nth-child(3n+2),.examplePost:nth-child(3n+3) {
  padding-left:22px
}
.examplePost:nth-child(3n+1),.examplePost:nth-child(3n+2) {
  border-right:1px solid #ccc
}
.examplePost:hover {
  transform:translateY(-5px)
}
.exampleThumb {
  aspect-ratio:16/10;
  position:relative;
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}
.exampleThumb:after {
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  border:1px solid #ffffff66;
  border-radius:50%;
  right:-40px;
  bottom:-60px
}
.exampleThumb.orange {
  background:var(--orange);
  color:white
}
.exampleThumb.dark {
  background:#181818;
  color:white
}
.exampleThumb.light {
  background:#dedad1;
  color:#111
}
.exampleThumb>span {
  position:absolute;
  left:18px;
  top:16px;
  font-size:11px
}
.exampleThumb>b {
  font-size:20px;
  line-height:1.15;
  letter-spacing:-.03em
}
.exampleThumb>small {
  position:absolute;
  right:16px;
  bottom:15px;
  font-size:10px
}
.exampleInfo>span {
  display:inline-block;
  margin-top:20px;
  color:var(--orange);
  font-size:11px;
  font-weight:900
}
.exampleInfo h3 {
  font-size:20px;
  margin:10px 0
}
.exampleInfo p {
  font-size:13px;
  color:var(--muted);
  margin:0 0 25px
}
.exampleInfo i {
  font-style:normal;
  font-size:11px;
  font-weight:800
}
.boardFooter {
  display:flex;
  justify-content:space-between;
  padding-top:20px;
  font-size:11px;
  color:#777
}
.boardFooter b {
  color:#222
}
@media(max-width:900px) {
  .exampleBoard {
    grid-template-columns:repeat(2,1fr)
  }
  .examplePost:nth-child(n) {
    padding:24px 18px;
    border-right:0
  }
  .examplePost:nth-child(odd) {
    padding-left:0;
    border-right:1px solid #ccc
  }
  .exampleIntro {
    align-items:flex-start;
    flex-direction:column;
    gap:25px
  }
  .exampleIntro>p {
    text-align:left
  }
}
@media(max-width:560px) {
  .examples {
    padding:85px 20px
  }
  .exampleBoard {
    grid-template-columns:1fr
  }
  .examplePost:nth-child(n) {
    padding:22px 0;
    border-right:0
  }
  .boardFooter {
    flex-direction:column;
    gap:7px
  }
}
.exampleThumb.hasImage {
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat
}
.exampleThumb.hasImage:after {
  display:none
}
.templateModal {
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.22s
}
.templateModal:target {
  opacity:1;
  visibility:visible;
  pointer-events:auto
}
.modalBackdrop {
  position:absolute;
  inset:0;
  background:#000c;
  backdrop-filter:blur(7px)
}
.modalPanel {
  position:relative;
  z-index:2;
  width:min(980px,94vw);
  max-height:90vh;
  overflow:auto;
  background:#f5f3ee;
  padding:28px;
  box-shadow:0 30px 90px #0008
}
.modalTop {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  border-bottom:1px solid #bbb;
  padding-bottom:18px;
  margin-bottom:22px
}
.modalTop span {
  font-size:10px;
  color:var(--orange);
  font-weight:900;
  letter-spacing:.12em
}
.modalTop h3 {
  font-size:25px;
  margin:7px 0 0
}
.modalTop>a {
  font-size:38px;
  line-height:.8;
  font-weight:300
}
.modalImage {
  min-height:480px;
  background:#181818;
  color:white;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat
}
.modalImage.hasImage {
  min-height:0;
  display:block;
  background-color:#ddd
}
.modalImage.hasImage img {
  width:100%;
  height:auto;
  display:block
}
.modalImage b {
  font-size:24px
}
.modalImage p {
  font-size:12px;
  color:#aaa
}
.modalPanel>p {
  font-size:13px;
  color:var(--muted);
  margin:18px 0 0
}
@media(max-width:560px) {
  .templateModal {
    padding:12px
  }
  .modalPanel {
    padding:18px
  }
  .modalImage {
    min-height:55vh
  }
  .modalTop h3 {
    font-size:20px
  }
}