/* =========================================================
   올바른사람_홈페이지 (Figma node 458-517) 전용 스타일
   ========================================================= */

/* 공용 eyebrow-caps 크기 보정 */
.page-homepage .eyebrow-caps { font-size: 18px; margin-bottom: 14.4px; }
.page-homepage .hero-eyebrow { font-size: 18px; letter-spacing: .1em; margin-bottom: 12px; }
.page-homepage .hero .btn-outline { margin-top: 60px; }
.page-homepage .hero-inner { padding-top: 67.2px; }

/* ---------------- WHY WE MAKE WEBSITES ---------------- */
.hp-why-make { padding: 174px 0 182.4px; background: linear-gradient(180deg, #253849 0%, #1f2d3a 100%); color: #fff; text-align: center; }
.hp-why-make .sec-title { line-height: 1.5; }
.hp-why-sub { margin-top: 28.8px; font-size: 24px; line-height: 1.85; color: #e8eef3; }
.hp-browser-ill { position: relative; width: 585.6px; height: 336px; margin: 103.2px auto 0; border-radius: 16.8px; overflow: hidden; background: #7a8c9b; }
.hp-browser-bar { height: 38.4px; background: #4c6273; display: flex; align-items: center; gap: 9.6px; padding-left: 21.6px; }
.hp-browser-bar i { width: 14.4px; height: 14.4px; border-radius: 50%; background: #7c91a2; }
.hp-browser-body { position: relative; height: 297.6px; }
.hp-browser-body .ln { position: absolute; left: 45.6px; height: 18px; border-radius: 3.6px; background: #627888; }
.hp-browser-body .ln1 { top: 37.2px; width: 216px; }
.hp-browser-body .ln2 { top: 78px; width: 168px; }
.hp-browser-body .btn { left: 212.4px; top: 216px; width: 163.2px; height: 44.4px; }
.hp-nodollar { position: absolute; left: 50%; top: 50%; width: 187.2px; height: 187.2px; margin: -93.6px 0 0 -93.6px; border-radius: 50%; background: #a8c4da; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(20, 50, 80, .35); }
.hp-nodollar svg { width: 96px; height: 96px; }
.hp-why-big { margin-top: 104.4px; font-size: 48px; line-height: 1.5; font-weight: 700; letter-spacing: -.03em; }
.hp-why-box { max-width: 1260px; margin: 99.6px auto 0; padding: 38.4px 24px; border-radius: 16.8px; background: #3a4b5b; font-size: 25.2px; line-height: 1.8; color: #f1f4f7; }
.hp-why-box strong { font-weight: 700; }

/* ---------------- OUR DIFFERENCES ---------------- */
.hp-diff { padding: 150px 0 144px; background: #fff; }
.hp-diff-cols { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1207.2px; margin: 92.4px auto 0; text-align: center; }
.hp-diff-cols::before { content: ""; position: absolute; left: 0; right: 0; top: 297.6px; height: 51.6px; border-radius: 14.4px; background: #f3f3f3; }
.hp-diff-col { position: relative; }
.hp-diff .icon-orb, .hp-diff .icon-orb::before { width: 196.8px; height: 196.8px; }
.hp-diff .icon-orb::before { left: -14.4px; top: -16.8px; }
.hp-diff .icon-orb svg { width: 79.2px; height: 79.2px; }
.hp-diff-arrow { display: block; height: 20.4px; margin: 45.6px 0 34.8px; font-style: normal; font-size: 20.4px; color: #555; line-height: 1; }
.hp-diff-label { display: block; height: 51.6px; line-height: 51.6px; font-size: 24px; font-weight: 600; color: #111; }
.hp-diff-col p { margin-top: 26.4px; font-size: 19.2px; line-height: 1.9; color: #444; }
/* ---------------- PROBLEM ---------------- */
.hp-problem { padding: 153.6px 0 120px; background: #fff; }
.hp-prob-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46.8px; max-width: 1464px; margin: 79.2px auto 0; }
.hp-prob-card { min-height: 241.2px; padding: 40.8px 48px 43.2px 54px; border-radius: 21.6px; background: #fff; box-shadow: 0 4px 24px rgba(30, 80, 140, .08); border: 1px solid #f0f3f6; }
.hp-prob-ico { display: flex; align-items: center; justify-content: center; width: 74.4px; height: 72px; border-radius: 12px; background: #5ab8ff; }
.hp-prob-ico svg { width: 40.8px; height: 40.8px; }
.hp-prob-card p { margin-top: 31.2px; font-size: 19.2px; line-height: 1.5; color: #222; }
.hp-prob-card strong { font-weight: 700; color: #111; }
.hp-prob-note { margin-top: 116.4px; text-align: center; font-size: 25.2px; font-weight: 700; color: #111; }
.hp-prob-note .hl-mark { padding: 0 14.4px; background: linear-gradient(transparent 55%, rgba(30, 155, 255, .28) 55%); }

/* ---------------- 기획 (Quote) ---------------- */
.hp-plan { padding: 120px 0 97.2px; background: linear-gradient(180deg, #fff 0%, #f3f9ff 25%, #e6f3ff 100%); text-align: center; }
.hp-plan .sec-title { font-size: 52.8px; line-height: 1.38; }
.hp-nowrap { white-space: nowrap; }
.hp-plan .sec-sub { margin-top: 26.4px; font-size: 20.4px; color: #444; }
.hp-plan-ill { display: flex; justify-content: center; align-items: flex-start; gap: 55.2px; margin-top: 102px; }
.hp-plan-side { width: 343.2px; margin-top: 72px; }
.hp-plan-side em, .hp-plan-main em { display: block; font-style: normal; }
.hp-plan-side em { margin-top: 28.8px; font-size: 20.4px; font-weight: 600; color: #8fb0c8; }
.hp-mini { position: relative; height: 194.4px; border-radius: 16.8px; background: #d4e5f2; padding: 26.4px; text-align: left; }
.hp-mini span { display: block; border-radius: 3.6px; background: #b9d0e2; }
.hp-mini .l1 { width: 126px; height: 14.4px; }
.hp-mini .l2 { width: 186px; height: 14.4px; margin-top: 14.4px; }
.hp-mini .bx { height: 63.6px; margin-top: 26.4px; background: #c1d7e7; }
.hp-plan-main { width: 585.6px; }
.hp-mini-main { height: 336px; padding: 37.2px 44.4px; background: #fff; border: 1px solid #5db3ff; border-radius: 14.4px; box-shadow: 0 8px 30px rgba(30, 155, 255, .18); }
.hp-mini-main .l1 { width: 216px; height: 19.2px; background: #1e9bff; }
.hp-mini-main .l2 { width: 318px; height: 19.2px; margin-top: 21.6px; background: #8fcbff; }
.hp-mini-main .bx { height: 87.6px; margin-top: 37.2px; background: #e3f1fd; }
.hp-mini-main .bt { width: 163.2px; height: 44.4px; margin: 31.2px auto 0; background: #1e9bff; }
.hp-plan-pill { display: inline-block !important; margin-top: 39.6px; padding: 10.8px 20.4px; border-radius: 26.4px; background: #fff; color: var(--blue); font-size: 19.2px; font-weight: 600; }
.hp-plan-t1 { margin-top: 100.8px; font-size: 25.2px; font-weight: 600; color: #7a7a7a; }
.hp-plan-t2 { margin-top: 22.8px; font-size: 32.4px; font-weight: 700; color: #111; letter-spacing: -.02em; }

/* ---------------- PORTFOLIO ---------------- */
.hp-portfolio { padding: 146.4px 0 182.4px; color: #fff; background:
  radial-gradient(120% 60% at 50% 100%, #0a76d1 0%, rgba(10, 118, 209, .55) 35%, rgba(3, 34, 61, 0) 70%),
  linear-gradient(180deg, #03223d 0%, #03223d 45%, #04427a 80%, #0870c7 100%); }
.hp-portfolio .container { max-width: 1539.6px; }
.hp-pf-sub { margin-top: 21.6px; text-align: center; font-size: 21.6px; color: #c3d0dc; }
.hp-pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 45.6px 58.8px; max-width: 1482px; margin: 43.2px auto 0; }
.hp-pf-frame { padding: 33.6px 37.2px; border-radius: 16.8px; background: #04192c; box-shadow: 0 10px 40px rgba(0, 0, 0, .2); }
.hp-pf-bar { height: 52.8px; display: flex; align-items: center; gap: 14.4px; padding-left: 25.2px; border-radius: 12px 12px 0 0; background: #020f1b; }
.hp-pf-bar i { width: 21.6px; height: 21.6px; border-radius: 50%; background: #1d3b5b; }
.hp-pf-shot { aspect-ratio: 531 / 295; overflow: hidden; border-radius: 0 0 12px 12px; background: #fff; }
.hp-pf-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s ease; }
.hp-pf-item:hover .hp-pf-shot img { transform: scale(1.03); }
.hp-pf-item figcaption { padding: 26.4px 21.6px 0; }
.hp-pf-item figcaption strong { display: block; font-size: 24px; line-height: 33.6px; font-weight: 700; }
.hp-pf-item figcaption span { display: block; margin-top: 3.6px; font-size: 19.2px; line-height: 26.4px; color: #8aa0b5; }
.hp-pf-item { margin: 0; }
.hp-pf-cta { display: inline-flex; align-items: center; gap: 9.6px; height: 79.2px; margin-top: 86.4px; padding: 0 36px; border-radius: 14.4px; background: var(--blue); font-size: 26.4px; font-weight: 500; color: #fff; box-shadow: 0 8px 26px rgba(0, 60, 140, .3); transition: .2s; }
.hp-pf-cta:hover { background: #0b86ec; transform: translateY(-2px); }

/* ---------------- WHY 비교 ---------------- */
.hp-compare { padding: 165.6px 0 192px; background: linear-gradient(180deg, #253849 0%, #1f2d3a 100%); }
.hp-cmp-wrap { display: flex; justify-content: center; align-items: center; margin-top: 134.4px; }
.hp-cmp-card { text-align: center; }
.hp-cmp-card h3 { display: inline-flex; align-items: center; gap: 14.4px; letter-spacing: -.02em; }
.hp-cmp-card small { font-size: .78em; }
.hp-cmp-normal { width: 456px; height: 438px; margin-right: -32.4px; padding: 91.2px 24px 0 0; border-radius: 9.6px; background: #a9b5c1; color: #555; }
.hp-cmp-normal h3 { font-size: 25.2px; font-weight: 700; color: #3a3f45; }
.hp-cmp-normal ul { margin-top: 48px; display: flex; flex-direction: column; gap: 28.8px; font-size: 19.2px; line-height: 1.4; }
.hp-cmp-best { position: relative; z-index: 1; width: 544.8px; height: 546px; padding: 60px 24px 0; border-radius: 9.6px; background: linear-gradient(180deg, #2585ff 0%, #0057ff 100%); color: #fff; box-shadow: 0 0 38px 6px rgba(255, 255, 255, .33); }
.hp-cmp-best h3 { font-size: 32.4px; font-weight: 600; padding-bottom: 9.6px; border-bottom: 1.5px solid #fff; }
.hp-cmp-best ul { margin-top: 62.4px; display: flex; flex-direction: column; gap: 40.8px; font-size: 25.2px; font-weight: 700; line-height: 1.4; }
.hp-cmp-best small { font-size: 19.2px; }

/* ---------------- WEBSITE PACKAGE ---------------- */
.hp-package { padding: 170.4px 0 168px; background: #f6f8fb; }
.hp-pkg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44.4px; max-width: 1256.4px; margin: 105.6px auto 0; }
.hp-pkg { padding: 51.6px 57.6px 55.2px; border-radius: 19.2px; background: #fff; box-shadow: 0 4px 22px rgba(30, 60, 110, .07); }
.hp-pkg header { display: flex; align-items: flex-start; gap: 32.4px; padding-bottom: 45.6px; border-bottom: 1px solid #dce6f0; }
.hp-pkg-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 82.8px; height: 82.8px; border-radius: 16.8px; background: #e9f2fd; color: var(--blue); }
.hp-pkg-ico svg { width: 40.8px; height: 40.8px; }
.hp-pkg em { display: inline-block; padding: 3.6px 16.8px; border-radius: 7.2px; background: #e3f0fd; color: var(--blue); font-style: normal; font-size: 15.6px; font-weight: 700; }
.hp-pkg h3 { margin-top: 9.6px; font-size: 33.6px; font-weight: 700; color: #111; letter-spacing: -.03em; }
.hp-pkg dl { margin: 45.6px 0 0; }
.hp-pkg dt { font-size: 19.2px; font-weight: 600; color: #9a9a9a; }
.hp-pkg dd { margin: 4.8px 0 33.6px; font-size: 24px; font-weight: 600; color: #333; letter-spacing: -.02em; }
.hp-pkg dd:last-child { margin-bottom: 0; }

/* ---------------- FAQ ---------------- */
.hp-faq { padding: 178.8px 0 93.6px; background: #fff; }
.hp-faq-list { display: flex; flex-direction: column; gap: 36px; max-width: 1334.4px; margin: 58.8px auto 0; }
.hp-faq-item { display: flex; gap: 28.8px; min-height: 212.4px; padding: 49.2px 60px 37.2px; border: 1px solid #d9d9d9; border-radius: 19.2px; transition: border-color .2s, box-shadow .2s; }
.hp-faq-item:hover { border-color: #9fd2ff; box-shadow: 0 6px 24px rgba(30, 155, 255, .08); }
.hp-faq-ico { flex: none; width: 37.2px; height: 37.2px; margin-top: 2px; color: var(--blue); }
.hp-faq-item h3 { font-size: 26.4px; font-weight: 700; color: #111; letter-spacing: -.02em; }
.hp-faq-item p { margin-top: 24px; font-size: 20.4px; line-height: 1.8; color: #555; }

/* ---------------- PROCESS ---------------- */
.hp-process { padding: 120px 0 162px; background: #fff; }
.hp-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1396.8px; margin: 108px auto 0; text-align: center; }
.hp-steps li { position: relative; }
.hp-steps li + li::before { content: ""; position: absolute; left: -7.2px; top: 103.2px; width: 13.2px; height: 13.2px; border-right: 1.6px solid #333; border-top: 1.6px solid #333; transform: rotate(45deg); }
.hp-steps .icon-orb { width: 225.6px; height: 225.6px; }
.hp-steps .icon-orb svg { width: 100.8px; height: 100.8px; }
.hp-steps p { margin-top: 50.4px; font-size: 21.6px; color: #111; }

/* ---------------- Contact (홈페이지 전용 폼) ---------------- */
.hp-inq-url { margin-top: 0; }
.hp-inq-submit { margin-top: 28.8px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) {
  .hp-plan-side { display: none; }
  .hp-prob-cards { gap: 20px; }
  .hp-prob-card { padding: 28px 24px; }
  .hp-pf-grid { gap: 32px 24px; }
  .hp-pf-frame { padding: 16px; }
  .hp-steps .icon-orb, .hp-steps .icon-orb::before { width: 150px; height: 180px; }
  .hp-steps li + li::before { top: 70px; }
}

@media (max-width: 760px) {
  .page-homepage .hero-title { font-size: 31.2px; }
  .page-homepage .hero-inner { padding-top: 30px; }
  .page-homepage .hero-eyebrow { font-size: 14.4px; }
  .page-homepage .hero .btn-outline { margin-top: 36px; }
  .hp-why-make { padding: 90px 0; }
  .hp-why-sub { font-size: 19.2px; margin-top: 24px; }
  .hp-browser-ill { width: 100%; max-width: 340px; height: 200px; margin-top: 50px; }
  .hp-browser-body { height: 168px; }
  .hp-browser-body .ln1 { width: 120px; top: 20px; left: 22px; }
  .hp-browser-body .ln2 { width: 90px; top: 44px; left: 22px; }
  .hp-browser-body .btn { left: 50%; margin-left: -50px; width: 100px; top: 128px; height: 26px; }
  .hp-nodollar { width: 110px; height: 110px; margin: -55px 0 0 -55px; }
  .hp-nodollar svg { width: 56px; height: 56px; }
  .hp-why-big { margin-top: 56px; font-size: 28.8px; }
  .hp-why-box { margin-top: 50px; font-size: 19.2px; padding: 24px 16px; }

  .hp-diff { padding: 80px 0; }
  .hp-diff-cols { grid-template-columns: 1fr; gap: 44px; margin-top: 50px; }
  .hp-diff-cols::before { display: none; }
  .hp-diff .icon-orb, .hp-diff .icon-orb::before { width: 120px; height: 120px; }
  .hp-diff .icon-orb::before { left: -9px; top: -10px; }
  .hp-diff .icon-orb svg { width: 48px; height: 48px; }
  .hp-diff-arrow { display: none; }
  .hp-diff-label { display: inline-block; margin-top: 24px; padding: 0 26px; border-radius: 10px; background: #f3f3f3; height: 38px; line-height: 45.6px; font-size: 20.4px; }
  .hp-diff-col p { margin-top: 12px; font-size: 18px; line-height: 1.7; }

  .hp-problem { padding-bottom: 70px; }
  .hp-prob-cards { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .hp-prob-card { min-height: 0; display: flex; align-items: center; gap: 18px; padding: 22px 20px; }
  .hp-prob-card p { margin-top: 0; font-size: 18px; }
  .hp-prob-card p br { display: none; }
  .hp-prob-ico { flex: none; width: 50px; height: 48px; }
  .hp-prob-note { margin-top: 50px; font-size: 20.4px; }

  .hp-plan { padding: 60px 0 80px; }
  .hp-plan .sec-title { font-size: 26.4px; }
  .hp-plan .sec-sub { font-size: 16.8px; margin-top: 18px; }
  .hp-plan-ill { margin-top: 44px; }
  .hp-plan-main { width: 100%; max-width: 320px; }
  .hp-mini-main { height: 190px; padding: 22px; }
  .hp-mini-main .l1 { width: 120px; height: 12px; }
  .hp-mini-main .l2 { width: 180px; height: 12px; margin-top: 12px; }
  .hp-mini-main .bx { height: 50px; margin-top: 20px; }
  .hp-mini-main .bt { width: 100px; height: 26px; margin-top: 18px; }
  .hp-plan-t1 { margin-top: 44px; font-size: 18px; }
  .hp-plan-t2 { font-size: 24px; margin-top: 12px; }

  .hp-portfolio { padding: 80px 0 90px; }
  .hp-pf-sub { font-size: 18px; margin-top: 16px; }
  .hp-pf-grid { grid-template-columns: 1fr; gap: 30px; }
  .hp-pf-frame { padding: 12px; }
  .hp-pf-bar { height: 28px; gap: 7px; padding-left: 12px; }
  .hp-pf-bar i { width: 10px; height: 10px; }
  .hp-pf-item figcaption { padding: 14px 6px 0; }
  .hp-pf-item figcaption strong { font-size: 20.4px; }
  .hp-pf-item figcaption span { font-size: 16.8px; }
  .hp-pf-cta { height: 54px; font-size: 20.4px; padding: 0 22px; margin-top: 44px; }

  .hp-compare { padding: 80px 0 90px; }
  .hp-cmp-wrap { flex-direction: column; margin-top: 44px; }
  .hp-cmp-normal, .hp-cmp-best { width: 100%; max-width: 340px; height: auto; margin: 0; }
  .hp-cmp-best { padding: 34px 16px 38px; }
  .hp-cmp-best h3 { font-size: 26.4px; }
  .hp-cmp-best ul { margin-top: 30px; gap: 20px; font-size: 19.2px; }
  .hp-cmp-best small { font-size: 14.4px; display: block; }
  .hp-cmp-normal { margin-bottom: -8px; padding: 32px 16px 38px; border-radius: 8px 8px 0 0; }
  .hp-cmp-normal h3 { font-size: 21.6px; }
  .hp-cmp-normal ul { margin-top: 22px; gap: 14px; font-size: 16.8px; }

  .hp-package { padding: 80px 0; }
  .hp-pkg-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 44px; }
  .hp-pkg { padding: 26px 22px; }
  .hp-pkg header { gap: 16px; padding-bottom: 22px; }
  .hp-pkg-ico { width: 54px; height: 54px; }
  .hp-pkg-ico svg { width: 28px; height: 28px; }
  .hp-pkg h3 { font-size: 25.2px; }
  .hp-pkg dl { margin-top: 22px; }
  .hp-pkg dt { font-size: 15.6px; }
  .hp-pkg dd { font-size: 19.2px; margin-bottom: 18px; }

  .hp-faq { padding: 80px 0 60px; }
  .hp-faq-list { gap: 14px; margin-top: 40px; }
  .hp-faq-item { min-height: 0; padding: 22px 18px; gap: 14px; }
  .hp-faq-ico { width: 24px; height: 24px; }
  .hp-faq-item h3 { font-size: 20.4px; }
  .hp-faq-item p { font-size: 16.8px; margin-top: 10px; line-height: 1.7; }

  .hp-process { padding: 60px 0 80px; }
  .hp-steps { grid-template-columns: 1fr 1fr; gap: 40px 0; margin-top: 50px; }
  .hp-steps .icon-orb, .hp-steps .icon-orb::before { width: 120px; height: 120px; }
  .hp-steps .icon-orb::before { left: -10px; top: -11px; }
  .hp-steps li + li::before { display: none; }
  .hp-steps .icon-orb svg { width: 54px; height: 54px; }
  .hp-steps p { margin-top: 22px; font-size: 18px; }
}

/* ---------------- 1.2배 확대 후 태블릿 폭 보정 ---------------- */
@media (min-width: 761px) and (max-width: 1024px) {
  .hp-cmp-normal { height: auto; min-height: 438px; padding-bottom: 40px; }
  .hp-cmp-best { height: auto; min-height: 546px; padding-bottom: 44px; }
}