/* 서비스 홈페이지(`resources/views/home.blade.php`). 색은 `app-ui.css` 토큰을 쓰고 다크 모드는 그 토큰을 따릅니다. */
body.hp {
    margin: 0;
    background: var(--surface, #fff);
    color: var(--ink, #12151A);
    font-family: Pretendard Variable, Pretendard, system-ui, sans-serif;
    line-height: 1.6;
}
.hp * { box-sizing: border-box; }

.hp-top {
    max-width: 64rem; margin: 0 auto; padding: 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.hp-logo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.1rem; color: inherit; text-decoration: none; }
.hp-logo img { border-radius: 7px; }
.hp-sandbox { padding: .15rem .5rem; border-radius: .35rem; background: #b91c1c; color: #fff; font-size: .75rem; font-weight: 700; }

.hp-hero {
    max-width: 64rem; margin: 0 auto; padding: 3rem 1rem 3.5rem;
    text-align: center;
}
.hp-hero h1 { margin: 0; font-size: clamp(1.7rem, 6vw, 2.6rem); line-height: 1.3; letter-spacing: -.02em; word-break: keep-all; }
.hp-lead { max-width: 36rem; margin: 1rem auto 0; color: var(--ink-2, #4B5463); font-size: 1.05rem; word-break: keep-all; }

.hp-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }
.hp-btn {
    flex: 1 1 14rem; max-width: 18rem;
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: 1rem 1.25rem; border-radius: .9rem;
    text-decoration: none; font-size: 1.05rem;
}
.hp-btn span { font-size: .85rem; opacity: .8; }
.hp-btn--rider { background: var(--primary, #2448D8); color: var(--on-primary, #fff); }
.hp-btn--partner { background: var(--rail, #14171C); color: #fff; border: 1px solid var(--line, #DCE0E6); }
.hp-btn:focus-visible { outline: 3px solid var(--primary, #2448D8); outline-offset: 3px; }
.hp-note { margin: 1rem 0 0; color: var(--ink-3, #8A93A3); font-size: .85rem; }

.hp-sec { max-width: 64rem; margin: 0 auto; padding: 2.25rem 1rem; border-top: 1px solid var(--line-2, #E8EBEF); }
.hp-sec h2 { margin: 0 0 1rem; font-size: 1.25rem; }
.hp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; }
.hp-grid li { padding: 1rem 1.1rem; border-radius: .8rem; background: var(--surface-2, #F6F7F9); }
.hp-grid h3 { margin: 0 0 .25rem; font-size: 1rem; }
.hp-grid p { margin: 0; color: var(--ink-2, #4B5463); font-size: .93rem; word-break: keep-all; }

.hp-flow ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; counter-reset: hp; }
.hp-flow li { counter-increment: hp; display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; border: 1px solid var(--line, #DCE0E6); border-radius: .8rem; }
.hp-flow li::before { content: counter(hp); width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--primary, #2448D8); color: var(--on-primary, #fff); font-weight: 700; font-size: .85rem; }
.hp-flow span { color: var(--ink-2, #4B5463); font-size: .93rem; word-break: keep-all; }

.hp-foot {
    max-width: 64rem; margin: 0 auto; padding: 1.5rem 1rem 2.5rem;
    display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
    border-top: 1px solid var(--line-2, #E8EBEF);
    color: var(--ink-3, #8A93A3); font-size: .85rem;
}
.hp-foot a { color: inherit; }