/* ==========================================================
   sub.css : 서브페이지 전용 스타일
   (introduce, guide, applyguide, pay 3종, location, terms)
   ========================================================== */

/* ---------- 코엠페이먼츠 소개 ---------- */
.intro-visual { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 50px; }
.intro-visual img { width: 100%; border-radius: var(--radius); }
@media (min-width: 768px) { .intro-visual { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.allinone .sec-head { text-align: center; }
.allinone .label {
  display: inline-block; padding: 6px 18px; border-radius: 20px; background: var(--color-point);
  color: #fff; font-family: var(--font-title); font-weight: 800; font-size: 14px; margin-bottom: 18px;
}
.allinone .icon-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.allinone .icon-list li { text-align: center; padding: 30px 10px; background: #fff; border-radius: var(--radius); box-shadow: 0 4px 20px rgba(0,0,0,.05); }
.allinone .icon-list img { height: 60px; margin-bottom: 16px; }
.allinone .icon-list span { display: block; font-weight: 700; font-size: 16px; }
@media (min-width: 768px) { .allinone .icon-list { grid-template-columns: repeat(5, 1fr); } }

.strength { display: grid; gap: 24px; grid-template-columns: 1fr; }
.strength .box { padding: 40px 30px; border-radius: 20px; background: var(--color-point); color: #fff; }
.strength .box.dark { background: #1b1b1b; }
.strength .box .label { font-family: var(--font-title); font-weight: 800; font-size: 15px; opacity: .8; margin-bottom: 14px; }
.strength .box h3 { font-size: 26px; line-height: 1.3; margin-bottom: 18px; }
.strength .box p { font-size: 15px; opacity: .9; line-height: 1.8; }
@media (min-width: 768px) {
  .strength { grid-template-columns: repeat(2, 1fr); }
  .strength .box { padding: 60px 50px; }
  .strength .box h3 { font-size: 32px; }
}

/* ---------- 결제서비스 안내 ---------- */
.guide-visual { text-align: center; margin: 50px auto 0; max-width: 900px; }
.guide-role { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 50px; }
.guide-role .card { text-align: center; }
.guide-role .card .who { display: inline-block; padding: 4px 16px; border-radius: 14px; background: var(--color-point-light); color: var(--color-point); font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.guide-role .card p { font-size: 16px; }
@media (min-width: 768px) { .guide-role { grid-template-columns: repeat(2, 1fr); } }
.guide-flow { text-align: center; }
.guide-flow img { max-width: 1000px; width: 100%; }

/* ---------- 신청안내 ---------- */
.fee-compare { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 50px; }
.fee-compare .col { border-radius: 20px; padding: 36px 30px; background: #fff; border: 1px solid #eee; text-align: center; }
.fee-compare .col.coam { background: var(--color-point); color: #fff; border-color: var(--color-point); transform: scale(1.02); box-shadow: 0 14px 40px rgba(48,80,208,.3); }
.fee-compare .col h3 { font-size: 22px; margin-bottom: 24px; }
.fee-compare .col dl { display: flex; flex-direction: column; gap: 16px; }
.fee-compare .col dt { font-size: 14px; opacity: .8; margin-bottom: 4px; }
.fee-compare .col dd { margin: 0; font-family: var(--font-title); font-weight: 800; font-size: 30px; }
.fee-compare .col:not(.coam) dd { color: #999; text-decoration: line-through; text-decoration-color: var(--color-danger); }
@media (min-width: 768px) { .fee-compare { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.sub-head { font-size: 24px; margin-bottom: 30px; padding-left: 14px; border-left: 4px solid var(--color-point); }
@media (min-width: 768px) { .sub-head { font-size: 30px; } }

.proc-detail { margin-top: 50px; display: grid; gap: 14px; }
.proc-detail .item { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: #fff; border-radius: var(--radius); border: 1px solid #eee; }
.proc-detail .item .no { font-family: var(--font-title); font-weight: 800; color: var(--color-point); font-size: 18px; flex: 0 0 60px; }
.proc-detail .item .tit { font-weight: 700; font-size: 17px; flex: 0 0 220px; }
.proc-detail .item .desc { flex: 1; color: var(--color-text-sub); font-size: 15px; }
.proc-detail .item .desc .btn { margin-top: 12px; }
@media (min-width: 768px) { .proc-detail .item { flex-direction: row; padding: 28px 32px; } }

.doc-box { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 30px; }
.doc-box .card h4 { font-size: 20px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid var(--color-text); }
.doc-box .card ol { counter-reset: doc; display: flex; flex-direction: column; gap: 10px; }
.doc-box .card ol li { position: relative; padding-left: 30px; font-size: 15px; color: var(--color-text-sub); }
.doc-box .card ol li::before {
  counter-increment: doc; content: counter(doc, decimal-leading-zero);
  position: absolute; left: 0; top: 0; font-family: var(--font-title); font-weight: 800; color: var(--color-point);
}
@media (min-width: 768px) { .doc-box { grid-template-columns: repeat(2, 1fr); } }
.doc-info { padding: 24px; background: var(--color-bg-gray); border-radius: var(--radius); font-size: 14px; color: var(--color-text-sub); line-height: 1.8; }
.doc-info strong { display: block; color: var(--color-text); margin-bottom: 4px; }
.doc-info + .doc-info { margin-top: 12px; }

/* ---------- 결제서비스 3종 (일반/개인/현장) ---------- */
.pay-hero { position: relative; margin-top: 50px; border-radius: 24px; overflow: hidden; }
.pay-hero img { width: 100%; max-height: 560px; object-fit: cover; }
.pay-how .sec-head { text-align: center; }
.pay-how .how-top { text-align: center; margin-bottom: 40px; }
.pay-how .how-top .badge { display: inline-block; padding: 6px 20px; border-radius: 20px; background: var(--color-point); color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 16px; }
.pay-how .how-top h3 { font-size: 24px; line-height: 1.4; }
@media (min-width: 768px) { .pay-how .how-top h3 { font-size: 32px; } }
.app-links { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }
.app-links img { height: 48px; }
.pay-feature .feature .txt h3 { font-size: 24px; }
@media (min-width: 768px) { .pay-feature .feature .txt h3 { font-size: 30px; } }

/* ---------- 문의하기 ---------- */
.contact-mail { max-width: 760px; margin: 50px auto 60px; padding: 50px 30px; text-align: center; background: var(--color-point-light); border-radius: 20px; }
.contact-mail .lbl { display: block; font-size: 13px; letter-spacing: 2px; font-weight: 700; color: var(--color-point); margin-bottom: 10px; }
.contact-mail .addr { display: block; font-family: var(--font-title); font-weight: 800; font-size: 28px; color: var(--color-text); margin-bottom: 24px; word-break: break-all; }
.contact-mail .addr:hover { color: var(--color-point); }
.contact-mail .tip { margin-top: 24px; font-size: 14px; color: var(--color-text-sub); line-height: 1.8; }
.contact-mail .tip strong { color: var(--color-text); }
@media (min-width: 768px) { .contact-mail { padding: 60px 50px; } .contact-mail .addr { font-size: 36px; } }
.contact-info { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 50px; }
.contact-info .box { padding: 24px; background: var(--color-bg-gray); border-radius: var(--radius); text-align: center; }
.contact-info .box .lbl { display: block; font-size: 12px; letter-spacing: 1px; color: var(--color-text-light); font-weight: 700; margin-bottom: 8px; }
.contact-info .box .val { font-family: var(--font-title); font-weight: 800; font-size: 20px; color: var(--color-point); }
.contact-info .box.hours .val { font-size: 15px; color: var(--color-text); font-family: var(--font-body); font-weight: 700; }
.contact-info .box.hours small { display: block; margin-top: 6px; font-size: 12px; color: var(--color-text-light); }
@media (min-width: 768px) { .contact-info { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 찾아오시는 길 ---------- */
.loc-map { position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 40px; }
.loc-map img { width: 100%; display: block; }
.loc-map .btn { position: absolute; right: 16px; bottom: 16px; }
.loc-info { border-top: 2px solid var(--color-text); }
.loc-info .row { display: flex; flex-direction: column; gap: 8px; padding: 22px 10px; border-bottom: 1px solid var(--color-line); }
.loc-info .row .lbl { flex: 0 0 140px; font-weight: 800; font-family: var(--font-title); font-size: 17px; color: var(--color-point); }
.loc-info .row .val { flex: 1; font-size: 15px; }
.loc-info .row .val dl { display: flex; gap: 10px; }
.loc-info .row .val dl + dl { margin-top: 8px; }
.loc-info .row .val dt { flex: 0 0 70px; font-weight: 700; }
.loc-info .row .val dd { margin: 0; color: var(--color-text-sub); }
.loc-info .line { display: inline-block; padding: 1px 8px; border-radius: 10px; color: #fff; font-size: 12px; font-weight: 700; margin-right: 6px; vertical-align: 2px; }
.loc-info .line.l2 { background: #3cb44a; }
.loc-info .line.ls { background: #d4003b; }
@media (min-width: 768px) { .loc-info .row { flex-direction: row; padding: 28px 16px; } }

/* ---------- 약관 ---------- */
.terms-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 40px; flex-wrap: wrap; }
.terms-tabs a { height: 42px; padding: 0 22px; border-radius: 21px; border: 1px solid #ddd; display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; color: var(--color-text-sub); }
.terms-tabs a.is-active { background: var(--color-point); border-color: var(--color-point); color: #fff; }
.terms-body { max-width: 900px; margin: 0 auto; font-size: 14px; line-height: 1.9; color: var(--color-text-sub); }
.terms-body h2 { font-size: 24px; color: var(--color-text); margin-bottom: 30px; }
.terms-body h3 { font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--color-text); margin: 34px 0 10px; }
.terms-body p { margin-bottom: 10px; }
.terms-body ul { padding-left: 16px; list-style: disc; margin-bottom: 10px; }
.terms-body ol { padding-left: 20px; list-style: decimal; margin-bottom: 10px; }
.terms-body li { margin-bottom: 4px; }
.terms-body table { margin: 14px 0 20px; font-size: 13px; }
.terms-body th, .terms-body td { border: 1px solid var(--color-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.terms-body th { background: var(--color-bg-gray); color: var(--color-text); }