
:root{--brand:#1467ff;--brand2:#16c8f5;--ink:#0c1830;--muted:#67748c;--bg:#f5f8ff;--card:#fff;--line:#e5ebf4;--danger:#ff4d5e;--shadow:0 24px 70px rgba(28,72,155,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff;line-height:1.62}a{text-decoration:none;color:inherit}.wrap{width:min(1160px,calc(100% - 36px));margin:auto}
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(229,235,244,.9)}nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:950;letter-spacing:-1.3px}.brandmark{width:39px;height:39px;border-radius:14px;background:linear-gradient(135deg,var(--brand2),var(--brand));display:grid;place-items:center;color:#fff;font-weight:1000;box-shadow:0 10px 24px rgba(20,103,255,.22)}.menu{display:flex;gap:26px;font-size:14px;font-weight:800;color:#536078}.menu a:hover{color:var(--brand)}.navcta,.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:15px;font-weight:900;transition:.2s}.navcta{padding:11px 16px;background:#0c1830;color:#fff;font-size:14px}.btn{padding:15px 22px;border:1px solid var(--line)}.btn:hover,.navcta:hover{transform:translateY(-2px)}.primary{background:linear-gradient(135deg,var(--brand),#3759ff);color:#fff;border:0;box-shadow:0 14px 28px rgba(20,103,255,.25)}.secondary{background:#fff}
.hero{position:relative;overflow:hidden;padding:78px 0 64px;background:radial-gradient(circle at 80% 18%,rgba(22,200,245,.24),transparent 26%),radial-gradient(circle at 65% 55%,rgba(20,103,255,.18),transparent 34%),linear-gradient(180deg,#fbfdff 0%,#eef4ff 100%)}.hero:before{content:"";position:absolute;right:-110px;top:70px;width:380px;height:380px;border:90px solid rgba(255,255,255,.54);border-radius:50%;transform:rotate(-18deg)}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;background:#eaf2ff;color:#195bd3;font-size:13px;font-weight:950;margin-bottom:17px;border:1px solid #d6e4ff}.dot{width:8px;height:8px;border-radius:50%;background:#16c87f;box-shadow:0 0 0 5px rgba(22,200,127,.12)}h1{font-size:clamp(43px,6vw,73px);line-height:1.03;letter-spacing:-4px;margin:0 0 22px}.grad{background:linear-gradient(90deg,var(--brand),var(--brand2));-webkit-background-clip:text;color:transparent}.lead{font-size:19px;color:var(--muted);margin:0 0 28px;max-width:590px}.hero-actions{display:flex;gap:11px;flex-wrap:wrap}.badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;color:#667085;font-size:13px;font-weight:800}.badges span{background:rgba(255,255,255,.78);border:1px solid #dfe7f4;padding:8px 11px;border-radius:999px}
.phone{position:relative;max-width:460px;margin-left:auto;background:linear-gradient(145deg,#0d1730,#1c2e59);border-radius:34px;padding:14px;box-shadow:0 35px 80px rgba(13,30,72,.26);transform:rotate(1deg)}.screen{min-height:520px;border-radius:25px;background:#fff;overflow:hidden;position:relative}.screen-top{padding:19px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #edf1f6}.screen-logo{font-weight:950;font-size:18px}.screen-logo b{color:var(--brand)}.hero-card{margin:19px;background:linear-gradient(135deg,#0e66ff,#25c8f4);color:#fff;border-radius:24px;padding:27px;box-shadow:0 20px 45px rgba(20,103,255,.25)}.hero-card small{opacity:.82}.hero-card strong{display:block;font-size:31px;margin:5px 0 16px}.fake-input{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:12px;padding:12px 13px;margin-top:10px;font-size:13px}.paybtn{margin-top:13px;background:#fff;color:#125bdd;padding:13px;border-radius:12px;text-align:center;font-weight:950}.quick{padding:0 19px 19px;display:grid;grid-template-columns:1fr 1fr;gap:11px}.quick div{border:1px solid var(--line);border-radius:17px;padding:16px}.quick b{display:block;margin-bottom:4px}.quick span{font-size:12px;color:var(--muted)}
section{padding:86px 0}.soft{background:var(--bg)}.section-head{text-align:center;max-width:780px;margin:0 auto 42px}.section-head .kicker{color:var(--brand);font-size:13px;font-weight:950;letter-spacing:.08em}.section-head h2{font-size:40px;line-height:1.16;letter-spacing:-2.2px;margin:9px 0 12px}.section-head p{margin:0;color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:27px;box-shadow:0 12px 36px rgba(25,44,86,.06)}.icon{width:49px;height:49px;border-radius:16px;background:linear-gradient(135deg,#e8f2ff,#ecfbff);display:grid;place-items:center;font-size:22px;margin-bottom:18px}.card h3{margin:0 0 8px;font-size:20px}.card p{margin:0;color:var(--muted);font-size:15px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.step{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;position:relative}.num{width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:white;display:grid;place-items:center;font-weight:1000;margin-bottom:17px}.step h3{margin:0 0 7px}.step p{margin:0;color:var(--muted)}
.banner{display:grid;grid-template-columns:1.15fr .85fr;gap:25px;align-items:center;background:linear-gradient(135deg,#081936,#153d84);border-radius:32px;padding:48px;color:#fff;overflow:hidden;position:relative}.banner:after{content:"";position:absolute;right:-85px;top:-105px;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,#21d7ff 0%,rgba(33,215,255,0) 68%);opacity:.45}.banner h2{font-size:37px;line-height:1.18;letter-spacing:-2px;margin:0 0 12px}.banner p{color:#c9d8f4;margin:0 0 22px}.banner-card{position:relative;z-index:2;background:#fff;color:var(--ink);border-radius:22px;padding:22px}.banner-card .row{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line)}.banner-card .row:last-child{border-bottom:0}.banner-card span{color:var(--muted);font-size:13px}.banner-card b{font-size:14px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metric{text-align:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:27px 12px}.metric strong{display:block;font-size:33px;color:var(--brand)}.metric span{font-size:13px;color:var(--muted)}.faq{max-width:860px;margin:auto;display:grid;gap:11px}.faq details{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px}.faq summary{font-weight:900;cursor:pointer}.faq p{margin:11px 0 1px;color:var(--muted)}.finalcta{background:linear-gradient(135deg,#0b1c3f,#184fa4);border-radius:32px;padding:50px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px}.finalcta h2{margin:0 0 8px;font-size:36px;letter-spacing:-1.7px}.finalcta p{margin:0;color:#c8d7f4}.finalcta .btn{background:#fff;color:#0e3470;border:0;white-space:nowrap}footer{padding:34px 0;color:#8b95a7;font-size:13px;border-top:1px solid var(--line)}.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.floating{position:fixed;right:18px;bottom:18px;z-index:50;background:#fee500;color:#191919;border-radius:999px;padding:14px 18px;font-weight:950;box-shadow:0 14px 35px rgba(0,0,0,.18)}
.editor-toggle{position:fixed;left:18px;bottom:18px;z-index:70;border:0;background:#101828;color:#fff;border-radius:999px;padding:12px 16px;font-weight:900;cursor:pointer;box-shadow:0 12px 32px rgba(0,0,0,.2)}.editor-panel{position:fixed;left:18px;bottom:73px;z-index:69;width:min(370px,calc(100vw - 36px));max-height:78vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.2);display:none}.editor-panel.open{display:block}.editor-panel h3{margin:0 0 12px}.editor-panel label{display:block;font-size:12px;font-weight:900;color:#667085;margin:12px 0 6px}.editor-panel input{width:100%;padding:10px 11px;border:1px solid #d7dce5;border-radius:11px;font:inherit}.editor-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.editor-actions button{border:0;border-radius:11px;padding:11px;font-weight:900;cursor:pointer}.save{background:var(--brand);color:#fff}.reset{background:#f2f4f7}.edit-mode [data-editable]{outline:2px dashed rgba(20,103,255,.35);outline-offset:4px;border-radius:5px;cursor:text}.edit-mode [data-editable]:focus{outline:2px solid var(--brand);background:#f8fbff}.preview{width:100%;max-height:130px;object-fit:contain;border:1px solid var(--line);border-radius:12px;margin-top:8px;display:none}.editor-note{font-size:11px;color:#98a2b3;margin-top:9px}
@media(max-width:900px){.menu{display:none}.hero-grid,.banner{grid-template-columns:1fr}.phone{margin:20px auto 0}.cards,.steps{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr}.finalcta{flex-direction:column;align-items:flex-start}.hero{padding-top:58px}h1{letter-spacing:-2.6px}.section-head h2{font-size:32px}}@media(max-width:540px){.wrap{width:min(100% - 24px,1160px)}.hero-actions .btn{width:100%}.metrics{grid-template-columns:1fr}.screen{min-height:470px}.banner{padding:31px 22px}.finalcta{padding:32px 24px}.floating{right:12px;bottom:12px;padding:12px 15px}.editor-toggle{left:12px;bottom:12px}.hero{padding-bottom:48px}}

.user-logo{height:42px;max-width:170px;object-fit:contain;display:block}
/* FLOWPAY CHAT ANIMATION */
.flow-chat{
  position:relative;
  max-width:460px;
  min-height:520px;
  margin-left:auto;
  background:#1f2024;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 35px 80px rgba(13,30,72,.22);
}

.flow-chat-head{
  height:76px;
  padding:0 22px;
  display:flex;
  align-items:center;
  gap:12px;
  background:#18191c;
  color:#fff;
}

.flow-chat-logo{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fee500;
  color:#111;
  font-size:22px;
  font-weight:950;
}

.flow-chat-head strong{
  display:block;
  font-size:16px;
}

.flow-chat-head span{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:#aaa;
}

.flow-chat-body{
  padding:28px 20px 34px;
  min-height:444px;
  display:flex;
  flex-direction:column;
  gap:13px;
}

.chat-line{
  display:flex;
  width:100%;
  opacity:0;
  transform:translateY(14px) scale(.97);
  animation:flowChatPop 9s infinite;
}

.chat-line.customer{
  justify-content:flex-start;
}

.chat-line.flowpay{
  justify-content:flex-end;
}

.chat-bubble{
  max-width:78%;
  padding:12px 15px;
  border-radius:17px;
  font-size:14px;
  line-height:1.5;
  box-shadow:0 5px 16px rgba(0,0,0,.12);
}

.customer .chat-bubble{
  background:#fff;
  color:#161616;
  border-bottom-left-radius:5px;
}

.flowpay .chat-bubble{
  background:#fee500;
  color:#161616;
  border-bottom-right-radius:5px;
}

.chat-1{animation-delay:0s}
.chat-2{animation-delay:.8s}
.chat-3{animation-delay:1.6s}
.chat-4{animation-delay:2.4s}
.chat-5{animation-delay:3.2s}

@keyframes flowChatPop{
  0%,8%{
    opacity:0;
    transform:translateY(14px) scale(.97);
  }
  14%,82%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
  92%,100%{
    opacity:0;
    transform:translateY(-5px) scale(.99);
  }
}

@media(max-width:900px){
  .flow-chat{
    margin:30px auto 0;
    width:100%;
  }
}.chat-6{animation-delay:4s}
.chat-7{animation-delay:4.8s}.flow-chat{
  position:relative;
  max-width:460px;
  min-height:520px;
  margin-left:auto;
  background:#b8c9d8;
  border-radius:28px;
  overflow:hidden;
  border:1px solid #dfe5eb;
  box-shadow:0 30px 70px rgba(30,55,85,.18);
}

.flow-chat-head{
  height:76px;
  padding:0 22px;
  display:flex;
  align-items:center;
  gap:12px;
  background:#ffffff;
  color:#202124;
  border-bottom:1px solid #e9edf2;
}

.flow-chat-logo{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  overflow:hidden;
  border:1px solid #edf0f4;
}

.flow-chat-logo img{
  width:30px;
  height:30px;
  object-fit:contain;
  display:block;
}

.flow-chat-head strong{
  display:block;
  font-size:16px;
  color:#202124;
}

.flow-chat-head span{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:#8b95a1;
}

.flow-chat-body{
  padding:28px 20px 34px;
  min-height:444px;
  display:flex;
  flex-direction:column;
  gap:13px;
  background:#b8c9d8;
}

.chat-bubble{
  max-width:78%;
  padding:12px 15px;
  border-radius:17px;
  font-size:14px;
  line-height:1.5;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.customer .chat-bubble{
  background:#ffffff;
  color:#222;
  border-bottom-left-radius:5px;
}

.flowpay .chat-bubble{
  background:#fee500;
  color:#161616;
  border-bottom-right-radius:5px;
}

.chat-6{animation-delay:4s}
.chat-7{animation-delay:4.8s}
.trust-doc-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.trust-doc-btn {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e5eaf2;
  border-radius: 12px;
  background: #fff;
  text-align: center;
}
.trust-doc-btn strong {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
}
.trust-doc-btn img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: contain;
}
@media (max-width: 700px) {
  .trust-doc-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .trust-doc-btn img {
    height: 150px;
  }
}
/* 증빙서류 카드: 2열 × 2행 */
.trust-doc-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.trust-doc-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  text-align: left;
}

.trust-doc-btn img {
  width: 90px;
  height: 110px;
  flex: 0 0 90px;
  object-fit: contain;
}

.trust-doc-btn strong {
  margin: 0;
  font-size: 15px;
}

@media (max-width: 700px) {
  .trust-doc-buttons {
    grid-template-columns: 1fr;
  }
  .trust-doc-btn img {
    width: 70px;
    height: 90px;
    flex-basis: 70px;
  }
}
/* 신뢰 안내 문구 4개 정렬 */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0;
}

.trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  background: #eef6ff;
  text-align: center;
}

.trust-icon {
  flex: 0 0 auto;
  font-weight: 800;
  color: #2463a6;
}

.trust-item strong {
  font-size: 14px;
  line-height: 1.4;
}

.trust-item span {
  display: none;
}

@media (max-width: 700px) {
  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .trust-item {
    padding: 10px 8px;
  }
  .trust-item strong {
    font-size: 12px;
  }
}
/* 증빙서류 카드 크기 및 설명 */
.trust-doc-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.trust-doc-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 22px;
  padding: 24px;
  min-height: 210px;
}

.trust-doc-btn img {
  width: 145px;
  height: 175px;
  flex: 0 0 145px;
  object-fit: contain;
}

.trust-doc-text {
  min-width: 0;
  text-align: left;
}

.trust-doc-text strong {
  display: block;
  margin-bottom: 12px;
  font-size: 19px;
  line-height: 1.4;
}

.trust-doc-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #667085;
}

@media (max-width: 700px) {
  .trust-doc-buttons {
    grid-template-columns: 1fr;
  }
  .trust-doc-btn {
    gap: 14px;
    padding: 14px;
    min-height: 0;
  }
  .trust-doc-btn img {
    width: 95px;
    height: 125px;
    flex-basis: 95px;
  }
  .trust-doc-text strong {
    font-size: 16px;
  }
  .trust-doc-text p {
    font-size: 13px;
  }
}
/* 서류 카드 최종 배치 */
.trust-docs .trust-doc-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.trust-docs .trust-doc-btn {
  display: grid;
  grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  min-width: 0;
  padding: 22px;
  box-sizing: border-box;
  text-align: left;
}

.trust-docs .trust-doc-btn img {
  display: block;
  width: 100%;
  height: 220px;
  max-width: 100%;
  object-fit: contain;
}

.trust-docs .trust-doc-text {
  min-width: 0;
}

.trust-docs .trust-doc-text strong {
  display: block;
  margin-bottom: 12px;
  font-size: 22px;
  line-height: 1.4;
}

.trust-docs .trust-doc-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: break-word;
}

@media (max-width: 700px) {
  .trust-docs .trust-doc-buttons {
    grid-template-columns: 1fr;
  }

  .trust-docs .trust-doc-btn {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }

  .trust-docs .trust-doc-btn img {
    height: 150px;
  }

  .trust-docs .trust-doc-text strong {
    font-size: 17px;
  }

  .trust-docs .trust-doc-text p {
    font-size: 13px;
  }
}

/* 금융 관련 기관 바로가기: 하단 흐르는 배너 */
.finance-links {
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #e7edf5;
  padding: 16px 0;
}
.finance-links-title {
  margin: 0 0 12px;
  text-align: center;
  color: #667085;
  font-size: 12px;
}
.finance-links-track {
  display: flex;
  width: max-content;
  animation: finance-scroll 28s linear infinite;
}
.finance-links:hover .finance-links-track {
  animation-play-state: paused;
}
.finance-links-group {
  display: flex;
  align-items: center;
  gap: 70px;
  padding-right: 70px;
}
.finance-links-group a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  min-height: 44px;
  color: #263b55;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.finance-links-group a:hover {
  color: #1769d2;
}
@keyframes finance-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .finance-links-track { animation: none; }
}

/* 하단 기관 로고 이미지 크기 */
.finance-links-group a img {
  display: block;
  width: 170px;
  height: 48px;
  object-fit: contain;
}
@media (max-width: 700px) {
  .finance-links-group {
    gap: 35px;
    padding-right: 35px;
  }
  .finance-links-group a {
    min-width: 140px;
  }
  .finance-links-group a img {
    width: 140px;
    height: 42px;
  }
}
