/* ── 히어로 ── */
.dg-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 120% at 80% 0%, #0e2636 0%, #0a1826 62%);
    color: #fff;
}

/* 배경 텍스처 (톡 스튜디오처럼 — 다크 배경에 은은히 블렌드) */
.dg-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('/img/studio/hero-texture.png') center/cover no-repeat;
    mix-blend-mode: overlay;
    opacity: 1;
    pointer-events: none;
}

/* 히어로 그린·틸 글로우 */
.py-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}

.py-hero-glow.g1 {
    width: 460px;
    height: 460px;
    background: rgba(16, 185, 129, .15);
    top: -150px;
    right: -60px;
}

.py-hero-glow.g2 {
    width: 320px;
    height: 320px;
    background: rgba(56, 189, 248, .09);
    bottom: -130px;
    left: -50px;
}

.py-hero-glow.g3 {
    width: 240px;
    height: 240px;
    background: rgba(52, 211, 153, .08);
    top: 40%;
    left: 38%;
}

.dg-hero .bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.1s ease;
}

.dg-hero .bg.on {
    opacity: 1;
}

.dg-hero .veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(15, 26, 48, .82), rgba(15, 157, 110, .42));
}

.dg-hero-inner {
    position: relative;
    z-index: 1;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(54px, 7vw, 92px) 24px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 40px;
    align-items: center;
}

.hero_eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .08em;
    background: rgba(255, 255, 255, .14);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 18px;
}

.hero_eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 10px #34d399;
}

.dg-hero h1 {
    font-family: 'GmarketSans', sans-serif;
    font-size: clamp(28px, 4.4vw, 46px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
    margin: 0 0 16px;
}

.dg-hero h1 b {
    color: #8ec5ff;
    font-weight: 700;
}

.dg-hero .sub {
    font-size: clamp(14.5px, 1.8vw, 17px);
    opacity: .92;
    margin: 0 0 16px;
}

.dg-hero .sub b {
    color: #fff;
}

.hero_keys {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 36px;
}

.hero_keys span {
    font-size: 12.5px;
    font-weight: 700;
    color: #d8f3e8;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .28);
    padding: 6px 12px;
    border-radius: 8px;
}

.hero_cta {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
}

.hcta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    padding: 14px 24px;
    border-radius: 11px;
    font-size: 15px;
    transition: .15s;
}

.hcta.primary {
    background: #fff;
    color: var(--blue);
}

.hcta.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .25);
}

.hcta.ghost {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .4);
}

.hcta .hot {
    font-size: 10px;
    font-weight: 800;
    background: #ff5a7a;
    padding: 2px 6px;
    border-radius: 5px;
    letter-spacing: .04em;
}

.hero_micro {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    opacity: .8;
    margin: 16px 0 0;
}

.dg-dots {
    position: relative;
    display: flex;
    gap: 7px;
    margin-top: 26px;
}

.dg-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    transition: .3s;
    cursor: pointer;
}

.dg-dots i.on {
    width: 22px;
    border-radius: 5px;
    background: #fff;
}

/* 라이브 프로젝트 카드 */
.hero_card {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    padding: 18px;
    backdrop-filter: blur(6px);
}

.hc_head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.hc_live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #7ff0c4;
    letter-spacing: .06em;
}

.hc_live .ld {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7ff0c4;
    box-shadow: 0 0 0 0 rgba(127, 240, 196, .6);
    animation: hcPulse 1.6s infinite;
}

@keyframes hcPulse {
    70% {
        box-shadow: 0 0 0 8px rgba(127, 240, 196, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(127, 240, 196, 0);
    }
}

.hc_title {
    font-size: 13px;
    font-weight: 600;
    opacity: .85;
}

.hc_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hc_list li {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
}

.hc_cat {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .14);
}

.hc_name {
    flex: 1;
    opacity: .92;
}

.hc_stat {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
}

.hc_stat.on {
    background: rgba(127, 240, 196, .2);
    color: #7ff0c4;
}

.hc_stat.dev {
    background: rgba(142, 197, 255, .2);
    color: #8ec5ff;
}

.hc_stat.plan {
    background: rgba(255, 255, 255, .14);
    color: #cdd8ea;
}

.hc_stat.qa {
    background: rgba(240, 160, 32, .2);
    color: #ffcf80;
}

/* ── S01 히어로: 0원 강조 ── */
.py-h1 {
    line-height: 1.12;
}

.py-zero {
    display: block;
    font-size: clamp(30px, 6vw, 52px);
    letter-spacing: -.02em;
}

.py-zero b {
    color: var(--blue);
}

.py-zero em {
    font-style: normal;
    font-size: .62em;
    font-weight: 700;
    margin-left: 2px;
}

.py-zero-em {
    display: block;
    margin-top: 10px;
    font-size: clamp(19px, 3.4vw, 30px);
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.py-hero-micro {
    margin-top: 18px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .86);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    padding: 9px 15px;
    border-radius: 999px;
}

.py-hero-micro i {
    color: #a7f3d0;
}

.py-hero-micro b {
    color: #fff;
}

.py-hc-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
}

.py-hc-total .t_l {
    font-size: 13px;
    color: var(--gray);
    font-weight: 600;
}

.py-hc-total .t_v {
    font-size: 22px;
    color: var(--ink);
}

.py-hc-total .t_v em {
    font-style: normal;
    font-size: .6em;
    font-weight: 700;
    margin-left: 1px;
}

/* ── S02 내 업종 찾기 ── */
.py-ind {
    max-width: 880px;
    margin: 0 auto;
}

.py-ind-search {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 0 16px;
    transition: .15s;
}

.py-ind-search:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-l);
}

.py-ind-search i {
    font-size: 20px;
    color: var(--gray2);
}

.py-ind-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    padding: 15px 12px;
    font-family: inherit;
    color: var(--ink);
}

.py-ind-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
    justify-content: center;
}

.py-ind-cats button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray);
    background: var(--bg2);
    border: 1px solid var(--line);
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: .15s;
    font-family: inherit;
}

.py-ind-cats button i {
    font-size: 15px;
}

.py-ind-cats button:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.py-ind-cats button.on {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.py-ind-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: clamp(18px, 3vw, 28px);
    box-shadow: var(--shadow);
}

.py-ind-chip {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    background: var(--bg2);
    border: 1px solid var(--line);
    padding: 10px 16px;
    border-radius: 11px;
    cursor: pointer;
    transition: .15s;
    font-family: inherit;
}

.py-ind-chip:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: var(--blue-l);
    transform: translateY(-2px);
}

.py-ind-chip.hide {
    display: none;
}

.py-ind-empty {
    text-align: center;
    padding: 30px 16px;
    color: var(--gray);
}

.py-ind-empty i {
    font-size: 34px;
    color: var(--gray2);
    display: block;
    margin-bottom: 10px;
}

.py-ind-empty a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: underline;
}

.py-ind-foot {
    text-align: center;
    margin-top: 22px;
}

/* 업종 매칭 모달 */
.py-match {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.py-match[hidden] {
    display: none;
}

.py-match-dim {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 30, .55);
    backdrop-filter: blur(2px);
}

.py-match-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 22px;
    padding: 30px 26px 26px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
    animation: pyMatchIn .25s cubic-bezier(.2, .9, .3, 1.2);
}

@keyframes pyMatchIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.py-match-x {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    background: var(--bg2);
    border-radius: 50%;
    color: var(--gray);
    cursor: pointer;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.py-match-x:hover {
    background: var(--line);
}

.py-match-label {
    font-size: 12.5px;
    color: var(--gray2);
    font-weight: 600;
}

.py-match-name {
    font-size: 24px;
    font-weight: 800;
    margin: 4px 0 18px;
    color: var(--ink);
}

.py-match-methods {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.py-match-methods li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 13px 15px;
}

.py-match-methods .mm-ic {
    flex: 0 0 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--blue-l);
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.py-match-methods .mm-t {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
}

.py-match-methods .mm-d {
    font-size: 12.5px;
    color: var(--gray);
    margin-top: 2px;
    line-height: 1.5;
}

.py-match-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--blue);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 14px;
    border-radius: 13px;
}

.py-match-cta:hover {
    background: var(--blue-d);
}

/* ── S03 30초 빠른 신청 ── */
.py-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 46px);
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(26px, 4vw, 46px);
    box-shadow: var(--shadow);
    position: relative;
}

.py-quick-text h2 {
    text-align: left;
}

.py-quick-perks {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.py-quick-perks li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
}

.py-quick-perks i {
    color: var(--blue);
    font-size: 17px;
}

.py-quick-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.py-qf-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 7px;
    color: var(--ink);
}

.py-qf-field input {
    width: 100%;
    font-size: 15px;
    padding: 14px 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg2);
    font-family: inherit;
    color: var(--ink);
    transition: .15s;
}

.py-qf-field input:focus {
    outline: 0;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-l);
    background: #fff;
}

.py-qf-radio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.py-qf-radio button {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gray);
    background: var(--bg2);
    border: 1px solid var(--line);
    padding: 12px;
    border-radius: 11px;
    cursor: pointer;
    transition: .15s;
    font-family: inherit;
}

.py-qf-radio button.on {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.py-qf-agree {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: var(--gray);
    margin-top: 2px;
}

.py-qf-agree input {
    width: 17px;
    height: 17px;
    accent-color: var(--blue);
}

.py-qf-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--blue);
    color: #fff;
    font-weight: 700;
    font-size: 15.5px;
    padding: 16px;
    border: 0;
    border-radius: 13px;
    cursor: pointer;
    transition: .15s;
    font-family: inherit;
    margin-top: 4px;
}

.py-qf-submit:hover {
    background: var(--blue-d);
}

.py-qf-note {
    font-size: 12px;
    color: var(--gray2);
    text-align: center;
    margin: 0;
    line-height: 1.6;
}

.py-qf-note a {
    color: var(--blue);
    font-weight: 600;
}

.py-quick-done {
    grid-column: 1 / -1;
    text-align: center;
    padding: 24px 10px;
}

.py-quick-done-ic {
    display: inline-flex;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--blue-l);
    color: var(--blue);
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 14px;
}

.py-quick-done h3 {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 8px;
}

.py-quick-done p {
    font-size: 14.5px;
    color: var(--gray);
    margin: 0;
    line-height: 1.7;
}

/* ── S05 왜 무료 ── */
.py-wf-no {
    font-size: 30px;
    color: var(--blue);
    opacity: .5;
    margin-bottom: 6px;
}

.py-ceo-quote {
    max-width: 760px;
    margin: 30px auto 0;
    text-align: center;
    background: var(--blue-l);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: clamp(26px, 4vw, 38px);
    position: relative;
}

.py-ceo-quote>i {
    font-size: 30px;
    color: var(--blue);
}

.py-ceo-quote p {
    font-size: clamp(15px, 2.2vw, 18px);
    line-height: 1.75;
    color: var(--ink);
    margin: 10px 0 14px;
    font-weight: 500;
}

.py-ceo-sig {
    font-size: 13.5px;
    color: var(--gray);
    font-weight: 700;
}

/* ── S06 돈 흐름 ── */
.py-flow {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.py-flow-step {
    flex: 1;
    min-width: 150px;
    max-width: 230px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px 18px;
    box-shadow: var(--shadow);
}

.py-flow-step.accent {
    border-color: var(--blue);
    box-shadow: 0 10px 30px var(--blue-l);
}

.py-flow-ic {
    display: inline-flex;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: var(--bg2);
    color: var(--gray);
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 12px;
}

.py-flow-step.accent .py-flow-ic {
    background: var(--blue);
    color: #fff;
}

.py-flow-l {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 3px;
}

.py-flow-s {
    font-size: 12.5px;
    color: var(--gray);
}

.py-flow-arr {
    display: flex;
    align-items: center;
    color: var(--gray2);
    font-size: 22px;
}

.py-flow-callout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 760px;
    margin: 24px auto 0;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px 22px;
}

.py-flow-callout i {
    color: var(--blue);
    font-size: 22px;
    flex: 0 0 auto;
}

.py-flow-callout p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--gray);
    margin: 0;
}

.py-flow-callout strong {
    color: var(--ink);
}

.py-flow-facts {
    margin-top: 28px;
}

/* ── S08 VAN vs PG ── */
.py-van {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.py-van-col {
    border-radius: 20px;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--line);
}

.py-van-col.old {
    background: var(--bg2);
}

.py-van-col.new {
    background: #fff;
    border-color: var(--blue);
    box-shadow: 0 14px 40px var(--blue-l);
}

.py-van-head {
    margin-bottom: 18px;
}

.py-van-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 999px;
}

.py-van-badge.old {
    background: #fee2e2;
    color: #b91c1c;
}

.py-van-badge.new {
    background: var(--blue);
    color: #fff;
}

.py-van-badge .d {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a7f3d0;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .3);
}

.py-van-sub {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--gray);
    font-weight: 600;
}

.py-van-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.py-van-col li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.py-van-col li span.x,
.py-van-col li span.o {
    flex: 0 0 24px;
    height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-top: 1px;
}

.py-van-col li span.x {
    background: #fee2e2;
    color: #dc2626;
}

.py-van-col li span.o {
    background: var(--blue-l);
    color: var(--blue);
}

.py-van-col li strong {
    display: block;
    font-size: 14.5px;
    color: var(--ink);
}

.py-van-col li p {
    font-size: 12.5px;
    color: var(--gray);
    margin: 2px 0 0;
    line-height: 1.55;
}

.py-safety {
    margin-top: 30px;
}

.py-safety .mb_features {
    text-align: left;
}

/* ── S10 결제수단 5종 ── */
.py-methods {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.py-method {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px 22px;
    box-shadow: var(--shadow);
    transition: .18s;
    border-top: 3px solid var(--blue);
}

.py-method:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(15, 157, 110, .14);
}

.py-m-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.py-m-no {
    font-size: 22px;
    color: var(--blue);
    opacity: .45;
}

.py-m-badge {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--blue);
    background: var(--blue-l);
    padding: 5px 10px;
    border-radius: 7px;
}

.py-method h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ink);
}

.py-method h3 span {
    font-size: 13px;
    color: var(--gray2);
    font-weight: 600;
}

.py-method>p {
    font-size: 13.5px;
    color: var(--gray);
    line-height: 1.65;
    margin: 0 0 12px;
}

.py-m-for {
    font-size: 12.5px !important;
    color: var(--blue) !important;
    font-weight: 600;
    margin: 0 !important;
    padding-top: 11px;
    border-top: 1px dashed var(--line);
}

/* ── S11 매출 대시보드 ── */
.py-dash {
    max-width: 880px;
    margin: 0 auto;
    background: #0f1a17;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 26, 23, .3);
    border: 1px solid rgba(255, 255, 255, .06);
}

.py-dash-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, .03);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.py-dash-dots {
    display: flex;
    gap: 6px;
}

.py-dash-dots span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}

.py-dash-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, .8);
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.py-dash-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #6ee7b7;
    background: rgba(110, 231, 183, .12);
    padding: 3px 9px;
    border-radius: 999px;
}

.py-dash-live .d {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6ee7b7;
    animation: pyPulse 1.4s infinite;
}

@keyframes pyPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .3;
    }
}

.py-dash-body {
    padding: clamp(18px, 3vw, 26px);
}

.py-dash-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.py-dm {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    padding: 16px 14px;
}

.py-dm .l {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 7px;
}

.py-dm .v {
    display: block;
    font-size: clamp(18px, 2.4vw, 23px);
    font-weight: 800;
    color: #fff;
}

.py-dm .v em {
    font-style: normal;
    font-size: .55em;
    font-weight: 700;
    color: rgba(255, 255, 255, .7);
    margin-left: 1px;
}

.py-dm .d {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .45);
}

.py-dm .d.up {
    color: #6ee7b7;
}

.py-dash-split {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
}

.py-dash-chart,
.py-dash-top {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    padding: 16px;
}

.py-dc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.py-dc-head span:first-child {
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
    font-weight: 600;
}

.py-dc-head .up {
    font-size: 13px;
    color: #6ee7b7;
    font-weight: 700;
}

.py-dash-chart svg {
    width: 100%;
    height: 90px;
    display: block;
}

.py-dt-title {
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
    font-weight: 600;
    margin: 0 0 12px;
}

.py-dash-top ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.py-dash-top li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
}

.py-dash-top .r {
    flex: 0 0 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--blue);
    color: #fff;
    font-weight: 800;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.py-dash-top .n {
    flex: 1;
    color: rgba(255, 255, 255, .82);
}

.py-dash-top .a {
    color: rgba(255, 255, 255, .55);
    font-weight: 600;
}

.py-dash-note {
    text-align: center;
    font-size: 12.5px;
    color: var(--gray2);
    margin: 16px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.py-dash-note i {
    color: var(--blue);
}

@media (max-width: 760px) {
    .py-quick {
        grid-template-columns: 1fr;
    }

    .py-van {
        grid-template-columns: 1fr;
    }

    .py-dash-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .py-dash-split {
        grid-template-columns: 1fr;
    }

    .py-flow-arr {
        transform: rotate(90deg);
    }

    .py-flow-step {
        max-width: none;
    }
}

@media (max-width: 420px) {
    .py-qf-radio {
        grid-template-columns: 1fr;
    }

    .py-dash-metrics {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============ 페이 홈 전면 재설계 (2026-06-14) ============ */
.py-dl {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.py-store {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 12px;
    background: #0e1428;
    color: #fff;
    text-decoration: none;
    transition: .15s;
    min-width: 170px;
}

.py-store:hover {
    transform: translateY(-2px);
}

.py-store i {
    font-size: 24px;
    color: #fff;
    line-height: 1;
}

.py-store span {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.py-store small {
    font-size: 10px;
    font-weight: 500;
    opacity: .8;
    letter-spacing: .3px;
}

.py-store.lg {
    padding: 13px 22px;
    min-width: 200px;
}

.py-store.lg i {
    font-size: 28px;
}

.py-store.lg span {
    font-size: 17px;
}

.py-hero-micro {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: white;
    margin: 16px 0 0;
}

.py-hero-micro i {
    color: var(--blue);
    font-size: 17px;
}

.py-cat {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 14px;
}

.py-cat-lbl {
    display: block;
    text-align: center;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--gray2);
    margin-bottom: 9px;
}

.py-cat-b {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line);
    padding: 13px 24px;
    border-radius: 14px;
    cursor: pointer;
    transition: .15s;
}

.py-cat-b:hover {
    color: var(--blue);
    border-color: var(--blue);
}

.py-cat-b.on {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    box-shadow: 0 8px 18px rgba(15, 157, 110, .28);
}

.py-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}

.py-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gray);
    background: #fff;
    border: 1px solid var(--line);
    padding: 7px 13px;
    border-radius: 999px;
    cursor: pointer;
    transition: .15s;
}

.py-chip i {
    font-size: 16px;
    color: var(--blue);
}

.py-chip:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.py-chip.on {
    background: var(--blue-l);
    border-color: var(--blue);
    color: var(--blue-d);
    font-weight: 700;
}

.py-chip.on i {
    color: var(--blue-d);
}

.py-chip[hidden] {
    display: none;
}

.py-chat {
    max-width: 640px;
    margin: 0 auto;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
}

.py-chat-hd {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 18px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.py-chat-ic {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.py-chat-nm {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ink);
}

.py-chat-live {
    margin-left: auto;
    font-size: 12px;
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.py-chat-live .ld {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
    display: inline-block;
    animation: pyBlink 1.4s infinite;
}

@keyframes pyBlink {
    50% {
        opacity: .3;
    }
}

.py-chat-thread {
    min-height: 330px;
    padding: 18px;
}

.py-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 11px;
}

.py-row.u {
    justify-content: flex-end;
}

.py-bub {
    max-width: 76%;
    padding: 10px 14px;
    font-size: 14.5px;
    line-height: 1.5;
    border-radius: 16px;
}

.py-row.a .py-bub {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    border-bottom-left-radius: 4px;
}

.py-row.u .py-bub {
    background: var(--blue);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.py-av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: 0 0 auto;
}

.py-bub-in {
    animation: pyIn .3s ease both;
}

@keyframes pyIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.py-stamp {
    display: inline-block;
    margin: 3px 0 0 8px;
    padding: 3px 12px;
    border: 2.5px solid var(--blue);
    border-radius: 9px;
    color: var(--blue-d);
    font-size: 13px;
    font-weight: 800;
    transform: rotate(-7deg);
    white-space: nowrap;
    opacity: 0;
}

.py-stamp.big {
    border: 0;
    background: var(--blue);
    color: #fff;
    padding: 6px 16px;
    font-size: 16px;
}

.py-stamp.slam {
    animation: pySlam .42s cubic-bezier(.2, .7, .3, 1.35) both;
}

@keyframes pySlam {
    0% {
        transform: scale(2.6) rotate(-7deg);
        opacity: 0;
    }

    55% {
        transform: scale(.86) rotate(-7deg);
        opacity: 1;
    }

    80% {
        transform: scale(1.08) rotate(-7deg);
    }

    100% {
        transform: scale(1) rotate(-7deg);
        opacity: 1;
    }
}

/* 활용사례 — 4 상황 카드 */
.py-uc {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    max-width: 1080px;
    margin: 0 auto;
}

.py-uc-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 16px 26px 28px;
    box-shadow: 0 1px 2px rgba(13, 28, 22, .03), 0 16px 36px -28px rgba(13, 28, 22, .4);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.py-uc-card:hover {
    transform: translateY(-5px);
    border-color: #d6e6dd;
    box-shadow: 0 2px 4px rgba(13, 28, 22, .05), 0 28px 56px -26px rgba(13, 28, 22, .5);
}

.py-uc-top {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 6px;
}

.py-uc-ic {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: linear-gradient(135deg, #18c98a 0%, #0f9d6e 55%, #087f72 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex: 0 0 auto;
}

.py-uc-ic svg {
    width: 21px;
    height: 21px;
}

.py-uc-card h3 {
    font-size: 18.5px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
}

.py-uc-ex {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}

.py-uc-ex span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 12px;
    font-weight: 500;
    color: #0e263c;
    background: transparent;
    border: 1px solid #e3e3e3;
    border-radius: 999px;
    padding: 8px 11px;
}

.py-uc-rec {
    margin-top: auto;
    background: #f5f8fc;
    border-radius: 16px;
    padding: 14px 18px;
}

.py-uc-rec-lbl {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #0f313f;
    margin-bottom: 7px;
}

.py-uc-rec-lbl i {
    font-size: 13px;
}

.py-uc-rec-row {
    display: flex;
    align-items: center;
    gap: 13px;
}

.py-uc-rec-ic {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fff;
    color: var(--blue-d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex: 0 0 auto;
    box-shadow: 0 2px 6px -2px rgba(13, 28, 22, .12);
}

.py-uc-rec-tx {
    position: relative;
    top: 2px;
}

.py-uc-rec-tx b {
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.35;
    color: var(--ink);
}

.py-uc-rec-tx p {
    font-size: 13px;
    line-height: 1.35;
    color: var(--gray2);
    margin-top: 2px;
    margin-bottom: 7px;
}

/* 등장 — 스크롤 진입 시 카드 순차 상승 */
.dg-reveal.in .py-uc-card {
    animation: pyUcRise .55s ease forwards;
}

.dg-reveal.in .py-uc-card:nth-child(1) { animation-delay: .05s; }
.dg-reveal.in .py-uc-card:nth-child(2) { animation-delay: .13s; }
.dg-reveal.in .py-uc-card:nth-child(3) { animation-delay: .21s; }
.dg-reveal.in .py-uc-card:nth-child(4) { animation-delay: .29s; }

@keyframes pyUcRise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

/* 아이콘 팝 — 스크롤 진입 시 순서대로 한 번씩 통 튀기기 */
@keyframes pyUcPop {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(-10px) scale(1.06); }
    60%  { transform: translateY(0) scale(1); }
    78%  { transform: translateY(-3px) scale(1.02); }
    100% { transform: translateY(0) scale(1); }
}

.py-uc.pop .py-uc-card:nth-child(1) .py-uc-ic { animation: pyUcPop .8s ease; }
.py-uc.pop .py-uc-card:nth-child(2) .py-uc-ic { animation: pyUcPop .8s ease .55s; }
.py-uc.pop .py-uc-card:nth-child(3) .py-uc-ic { animation: pyUcPop .8s ease 1.1s; }
.py-uc.pop .py-uc-card:nth-child(4) .py-uc-ic { animation: pyUcPop .8s ease 1.65s; }

@media (max-width: 780px) {
    .py-uc {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .py-uc-card {
        opacity: 1;
        animation: none;
    }

    .py-uc-card:hover {
        transform: none;
    }

    .py-uc.pop .py-uc-ic {
        animation: none;
    }
}

/* 결제 5수단 — 탭 + 데모 + 가로 스텝퍼 (첨부 디자인 반영) */
.pm2 {
    max-width: 920px;
    margin: 0 auto;
}

.pm2-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}

.pm2-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 8px;
    border: 1px solid #e7ecf4;
    border-radius: 14px;
    background: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: #55635c;
    cursor: pointer;
    transition: transform .16s, background .16s, color .16s;
}

.pm2-tab:hover {
    transform: translateY(-3px);
    color: #13211b;
}

.pm2-tab.active {
    background: #17a866;
    border-color: #17a866;
    color: #fff;
    font-weight: 700;
}

.pm2-demo {
    background: linear-gradient(180deg, #f4faf7 0%, #ffffff 60%);
    border: 1px solid #e7ecf4;
    border-radius: 24px;
    padding: 42px 36px;
    box-shadow: 0 4px 14px -6px rgba(13, 28, 22, .12);
}

.pm2-demo-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.pm2-big {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: linear-gradient(135deg, #18c98a 0%, #0f9d6e 55%, #087f72 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.pm2-demo-head h3 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #13211b;
    margin: 0;
}

.pm2-desc {
    font-size: 14.5px;
    color: #566177;
    margin: 0 auto 34px;
    max-width: 480px;
    text-align: center;
    line-height: 1.55;
}

.pm2-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.pm2-step {
    flex: 1;
    text-align: center;
    opacity: .45;
    transition: opacity .35s ease;
}

.pm2-step.on {
    opacity: 1;
}

.pm2-ring {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0 auto;
    background: #f4f7f6;
    color: #9aa7a1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    transition: background .35s, color .35s;
}

.pm2-step.on .pm2-ring {
    background: #0f313f;
    color: #fff;
}

.pm2-lbl {
    margin-top: 14px;
    font-size: 16px;
    font-weight: 700;
    color: #13211b;
    line-height: 1.4;
    padding: 0 6px;
}

.pm2-step:not(.on) .pm2-lbl {
    color: #9aa7a1;
}

.pm2-det {
    margin-top: 3px;
    font-size: 14px;
    font-weight: 400;
    color: #566177;
    line-height: 1.45;
    padding: 0 6px;
}

.pm2-step:not(.on) .pm2-det {
    color: #c2ccc7;
}

.pm2-arrow {
    flex: none;
    width: 40px;
    margin-top: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa7a1;
    font-size: 20px;
    opacity: .45;
    transition: color .35s ease, opacity .35s ease;
}

.pm2-arrow.on {
    color: #0f1a30;
    opacity: 1;
}

.pm2-useline {
    display: flex;
    justify-content: center;
    margin-top: 34px;
}

.pm2-usecase {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    color: #0d8a50;
    font-size: 13.5px;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid #a6ddc8;
    box-shadow: 0 6px 16px rgba(15, 157, 110, .14);
}

.pm2-usecase i {
    font-size: 15px;
}

@media (max-width: 720px) {
    .pm2-tabs {
        grid-template-columns: repeat(3, 1fr);
    }

    .pm2-demo {
        padding: 30px 20px;
    }

    .pm2-stepper {
        flex-direction: column;
        align-items: stretch;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto;
    }

    .pm2-step {
        display: flex;
        align-items: center;
        gap: 15px;
        text-align: left;
        width: 100%;
    }

    .pm2-ring {
        margin: 0;
        flex: none;
    }

    .pm2-txt {
        display: flex;
        flex-direction: column;
    }

    .pm2-lbl {
        margin-top: 0;
        padding: 0;
    }

    .pm2-det {
        padding: 0;
    }

    .pm2-arrow {
        width: auto;
        margin: 2px 0;
        padding-left: 14px;
        justify-content: flex-start;
    }

    .pm2-arrow i {
        transform: rotate(90deg);
    }
}

.py-pay {
    max-width: 780px;
    margin: 0 auto;
}

.py-pay-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.py-pay-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    transition: .18s;
}

.py-pay-ic {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--bg2);
    color: var(--gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: .18s;
}

.py-pay-nm {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray);
}

.py-pay-tab:hover {
    border-color: var(--blue);
}

.py-pay-tab.on {
    border-color: var(--blue);
    background: var(--blue-l);
}

.py-pay-tab.on .py-pay-ic {
    background: var(--blue);
    color: #fff;
}

.py-pay-tab.on .py-pay-nm {
    color: var(--blue-d);
}

.py-pay-detail {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: clamp(22px, 4vw, 34px);
    text-align: center;
    min-height: 170px;
    box-shadow: 0 14px 34px rgba(15, 26, 48, .07);
    overflow: hidden;
}

.py-pd-ic {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: var(--blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 14px;
}

.py-pd-n {
    font-size: 21px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 10px;
}

.py-pd-d {
    font-size: 15.5px;
    line-height: 1.45;
    color: var(--gray);
    max-width: 560px;
    margin: 0 auto 24px;
}

.py-pd-when {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--blue-d);
    background: var(--blue-l);
    border: 1px solid #bfe6d7;
    padding: 7px 14px;
    border-radius: 999px;
}

/* ===== S4. 앱 섹션 — 카드 3분할 + 다크 다운로드 바 ===== */
#py-app .dg-head .em_grad {
    background: linear-gradient(120deg, #0f9d6e, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.py-app2 {
    text-align: center;
}

/* PAY STUDIO START — 심사 진행 역할 대비 (사장님 신청 → 페이 스튜디오 대행 → 완료) */
.py-st {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: stretch;
    max-width: 1040px;
    margin: 34px auto 0;
}

.py-st-card {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 36px 18px 18px;
    text-align: center;
    box-shadow: 0 4px 16px -8px rgba(13, 28, 22, .1);
    transition: transform .2s, border-color .2s, box-shadow .2s;
}

.py-st-card.us {
    background: #fff;
    border-color: #e7ecf4;
}

.py-st-card:hover {
    transform: translateY(-4px);
    border-color: #cfe9de;
}

.py-st-n {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0f313f;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px -3px rgba(15, 49, 63, .35);
}

.py-st-card b {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
}

.py-st-card p {
    margin-top: 4px;
    font-size: 13px;
    color: var(--gray);
    line-height: 1.5;
}

.py-st-arr {
    align-self: center;
    color: #b6b6b6;
    font-size: 22px;
    padding: 0 10px;
}

.py-st-agency {
    height: 100%;
    background: linear-gradient(180deg, #f4faf7, #fff);
    border: 1.5px solid #bfe6d5;
    border-radius: 20px;
    padding: 18px;
}

.py-st-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    height: 100%;
}

.py-st-agency .py-st-card {
    box-shadow: none;
    border-color: #dbeee5;
}

.py-st-cap {
    text-align: center;
    margin-top: 30px;
}

.py-st-foot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 800;
    padding: 7px 15px;
    border-radius: 999px;
    white-space: nowrap;
}

.py-st-foot i {
    font-size: 15px;
    color: var(--blue);
}

.py-st-foot.me {
    background: #eef2f7;
    color: #5b6676;
    border: 1px solid #e2e7ee;
}

.py-st-foot.us {
    background: #fff;
    color: #0b7a55;
    font-weight: 700;
    border: 1px solid #a6ddc8;
    box-shadow: 0 6px 16px rgba(15, 157, 110, .14);
}

.py-st-foot.us i {
    color: #0b7a55;
    font-size: 13.5px;
}

@media (max-width: 820px) {
    .py-st {
        grid-template-columns: 1fr 1fr;
        gap: 32px 14px;
        margin-bottom: 24px;
    }

    .py-st-arr {
        display: none;
    }

    .py-st-two {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .py-st {
        grid-template-columns: 1fr;
    }
}

.py-app2-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 40px 0 0;
}

.py-app2-free {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    font-size: 15px;
    font-weight: 600;
    color: var(--blue-d);
    background: #fff;
    border: 1px solid #a6ddc8;
    border-radius: 999px;
    padding: 9px 20px;
    box-shadow: 0 6px 16px rgba(15, 157, 110, .14);
}

.py-app2-free i {
    color: var(--blue);
    font-size: 17px;
}

.py-app2-down {
    margin-top: 24px;
}

.py-app2-down i {
    display: inline-block;
    font-size: 28px;
    color: #c2ccd8;
    animation: pyAppBounce 1.8s ease-in-out infinite;
}

@keyframes pyAppBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* 앱 섹션 ↔ 신청 혜택 섹션 사이 간격 축소 (약 1/3) */
#py-app {
    padding-bottom: 32px;
}

#py-quote {
    padding-top: 10px;
}

.py-app2-card {
    background: #f2faf6;
    border: 1px solid #e7ecf4;
    border-radius: 20px;
    padding: 30px 26px 40px;
    text-align: center;
    box-shadow: 0 6px 20px -8px rgba(13, 28, 22, .12);
}

.py-app2-ic {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #fff;
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    box-shadow: 0 8px 18px rgba(15, 26, 48, .06);
}

.py-app2-ic i {
    font-size: 24px;
    line-height: 1;
    color: var(--blue);
}

.py-app2-card b {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 12px;
}

.py-app2-d {
    display: block;
    font-size: 14.5px;
    line-height: 1.0;
    color: var(--gray);
}

.py-app2-d + .py-app2-d {
    margin-top: 6px;
}

.py-app2-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #1b2330;
    border-radius: 22px;
    padding: 24px 30px;
}

.py-app2-logo {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: var(--grad);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    flex: 0 0 auto;
}

.py-app2-bar-tx {
    flex: 1;
}

.py-app2-bar-tx b {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

.py-app2-bar-tx span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #34d399;
    margin-top: 6px;
}

.py-app2-stores {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.py-app2-stores .py-store {
    background: #fff;
    color: var(--ink);
    min-width: 0;
}

.py-app2-stores .py-store i,
.py-app2-stores .py-store span,
.py-app2-stores .py-store small {
    color: var(--ink);
}

@media (max-width: 760px) {
    .py-app2-cards {
        grid-template-columns: 1fr;
    }

    .py-app2-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .py-app2-stores {
        width: 100%;
    }
}

.py-app {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(20px, 4vw, 44px);
    align-items: center;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: clamp(24px, 4vw, 40px);
}

.py-app-feat {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.py-app-feat li {
    display: flex;
    gap: 13px;
    align-items: flex-start;
}

.py-app-feat li>i {
    font-size: 22px;
    color: var(--blue);
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    background: var(--blue-l);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.py-app-feat b {
    display: block;
    font-size: 15.5px;
    color: var(--ink);
    margin-bottom: 2px;
}

.py-app-feat span {
    font-size: 13.5px;
    color: var(--gray);
    line-height: 1.5;
}

.py-app-dl {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 30px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    box-shadow: 0 16px 38px rgba(15, 26, 48, .08);
}

.py-app-logo {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--grad);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 12px 24px rgba(15, 157, 110, .32);
}

.py-app-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
}

.py-app-rate {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    color: var(--gray);
}

.py-app-rate i {
    color: #f6b73c;
    font-size: 15px;
}

.py-app-rate em {
    font-style: normal;
    font-weight: 800;
    color: var(--ink);
    margin-left: 5px;
}

.py-app-stores {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    align-items: center;
    margin-top: 4px;
}

.py-app-dl .py-store {
    justify-content: center;
    width: 100%;
    max-width: 280px;
}

.py-app-free {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--blue-d);
}

.py-app-free i {
    color: var(--blue);
}

.py-pg {
    max-width: 1080px;
    margin: 0 auto 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: clamp(22px, 3.2vw, 32px);
    box-shadow: 0 2px 10px rgba(24, 28, 50, .04);
}

.py-pg-head {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 22px;
}

.py-pg-shield {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #18c98a 0%, #0f9d6e 55%, #087f72 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    flex: 0 0 auto;
}

.py-pg-shield i {
    color: #fff;
    font-size: 23px;
}

.py-pg-head b {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 0;
}

.py-pg-head span {
    font-size: 14px;
    color: var(--gray);
    line-height: 1.5;
}

/* 정산 흐름 3단계 */
.py-pgf {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.py-pgf-step {
    flex: 1;
    background: #fff;
    border: 1px solid #a6ddc8;
    border-radius: 16px;
    padding: 14px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 10px rgba(24, 28, 50, .04);
}

.py-pgf-step.on {
    border: 1px solid #a6ddc8;
    background: #f8fffc;
}

.py-pgf-ic {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--blue-l);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    margin-bottom: 14px;
}

.py-pgf-step b {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0;
}

.py-pgf-step.on b {
    color: var(--ink);
}

.py-pgf-step span {
    font-size: 13.5px;
    color: var(--gray);
}

.py-pgf-step.on span {
    color: var(--blue-d);
}

.py-pgf-arrow {
    align-self: center;
    color: #b6b6b6;
    font-size: 22px;
    flex: 0 0 auto;
}

.py-pgf-connect {
    text-align: center;
    margin: 18px 0 28px;
}

.py-pgf-connect::before {
    content: "";
    display: block;
    width: 1.5px;
    height: 20px;
    background: #c4e6d6;
    margin: 0 auto 12px;
}

.py-pgf-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #a6ddc8;
    color: var(--blue-d);
    font-size: 13px;
    font-weight: 700;
    padding: 7px 15px;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(15, 157, 110, .14);
}

.py-pgf-pill i {
    color: var(--blue);
    font-size: 15px;
}

@media (max-width: 680px) {
    .py-pgf {
        flex-direction: column;
    }

    .py-pgf-arrow {
        transform: rotate(90deg);
    }
}

.py-pg-list {
    list-style: none;
    margin: 0 auto 6px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #ffffff;
    border: 1px solid #e7ecf4;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(24, 28, 50, .04);
}

.py-pg-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
}

.py-pg-list li + li {
    border-left: 1px solid #e7ecf4;
}

.py-pg-list li.hot {
    background: #ffffff;
}

.py-pg-nm {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
}

.py-pg-tag {
    font-size: 11px;
    font-weight: 700;
    color: #0f313f;
    background: #f5f8fc;
    border: 1px solid var(--line);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.py-pg-list li.hot .py-pg-tag {
    background: #0f313f;
    color: #fff;
    border-color: transparent;
}

.py-pg-foot {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray);
    text-align: center;
    margin: 0;
}

#py-trust .dg-inner {
    max-width: 1280px;
}

.py-trust-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 1080px;
    margin: 0 auto;
}

.py-tcard.py-tcard-wide {
    display: flex;
    align-items: center;
    gap: 22px;
    background: #fff;
}

.py-tcard-wide .py-tcard-ic {
    margin-bottom: 0;
    flex: 0 0 auto;
}

.py-tcard-wide .py-tcard-body {
    flex: 1;
    min-width: 0;
}

.py-tcard-wide .py-tcard-body h3 {
    margin-bottom: 0;
}

.py-tcard-wide .py-tcard-body p {
    margin-bottom: 0;
}

.py-tcard-wide .py-tcard-body p b {
    color: var(--blue-d);
    font-weight: 700;
}

.py-tcard-wide .py-tcard-em {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
    color: var(--blue-d);
}

@media (max-width: 680px) {
    .py-tcard-wide {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

.py-tcard {
    background: #f8fffc;
    border: 1.5px solid #a6ddc8;
    border-radius: 18px;
    padding: 22px;
}

.py-tcard.van {
    background: #fff5f3;
    border-color: #f3d2c8;
}

.py-tcard-ic {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    margin-bottom: 13px;
}

.py-tcard-ic.safe {
    background: linear-gradient(135deg, #18c98a 0%, #0f9d6e 55%, #087f72 100%);
    color: #fff;
}

.py-tcard-ic.warn {
    background: #fde7e1;
    color: #d8542f;
}

.py-tcard h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 9px;
}

.py-tcard p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray);
    margin: 0 0 9px;
}

.py-tcard-em {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--blue-d);
}

.py-vlist {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.py-vlist li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 13.5px;
    color: #4a4f57;
    line-height: 1.5;
}

.py-vlist li i {
    color: #d8542f;
    font-size: 16px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.py-vlist li.ok {
    color: var(--blue-d);
    font-weight: 700;
    margin-top: 3px;
}

.py-vlist li.ok i {
    color: var(--blue);
}

.py-tcard-em i {
    color: var(--blue);
}

#py-faq {
    background: #fff;
}

#py-insights {
    background: #f5f8fc;
}

/* 인사이트 미리보기 썸네일을 /insights 페이지와 동일한 정방형(1:1)으로 (base 기본값 4:3 오버라이드) */
#py-insights .pf-thumb {
    aspect-ratio: 1 / 1;
}

#py-final-sec {
    background: #fff;
    padding: 0;
}

.py-final {
    text-align: center;
    background: linear-gradient(125deg, #0e2636 0%, #0a1826 52%, #060e18 100%);
    padding: clamp(34px, 5vw, 60px) 0;
    color: #fff;
}

.py-final-in {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}

.py-final .eyebrow,
.py-quote .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    font-size: 13px;
    font-weight: 700;
    color: #7ff0c4;
    margin-bottom: 16px;
}

.py-final .eyebrow .ld,
.py-quote .eyebrow .ld {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7ff0c4;
}

.py-final .eyebrow .ld::before,
.py-final .eyebrow .ld::after,
.py-quote .eyebrow .ld::before,
.py-quote .eyebrow .ld::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #7ff0c4;
    animation: pyFinalPulse 1.8s ease-out infinite;
    pointer-events: none;
}

.py-final .eyebrow .ld::after,
.py-quote .eyebrow .ld::after {
    animation-delay: .9s;
}

@keyframes pyFinalPulse {
    0% { transform: scale(1); opacity: .55; }
    100% { transform: scale(3.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .py-final .eyebrow .ld::before,
    .py-final .eyebrow .ld::after,
    .py-quote .eyebrow .ld::before,
    .py-quote .eyebrow .ld::after {
        animation: none;
    }
}

.py-final h2 {
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1.3;
    margin: 0 0 14px;
    color: #fff;
}

.py-final .desc {
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
    max-width: 560px;
    margin: 0 auto 32px;
}

.py-final-dl {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 22px;
}

.py-final-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--grad);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    padding: 0 28px;
    border-radius: 13px;
    text-decoration: none;
    transition: .15s;
}

.py-final-btn i {
    font-size: 18px;
}

.py-final-btn::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -150%;
    width: 55%;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .5) 50%, transparent 80%);
    transform: skewX(-20deg);
    pointer-events: none;
    animation: pyFinalShine 3.5s ease-in-out infinite;
}

@keyframes pyFinalShine {
    0% { left: -150%; }
    40%, 100% { left: 165%; }
}

.py-final-btn:hover {
    filter: brightness(.95);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .py-final-btn::before {
        animation: none;
    }
}

.py-final-dl .py-store {
    background: #fff;
    color: var(--ink);
    min-width: 0;
    padding: 12px 18px;
    border-radius: 13px;
}

.py-final-dl .py-store i,
.py-final-dl .py-store span,
.py-final-dl .py-store small {
    color: var(--ink);
}

.py-final-dl .py-store span {
    text-align: left;
}

/* ≤572px: 신청 버튼 1줄(스토어 2개 합친 너비) + 그 아래 구글·앱스토어 나란히 */
@media (max-width: 572px) {
    .py-final-dl {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }

    .py-final-btn {
        grid-column: 1 / -1;
        min-height: 52px;
        justify-content: center;
    }

    .py-final-dl .py-store {
        min-width: 0;
        justify-content: center;
    }
}

.py-final-line {
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, .12);
    margin: 34px 0 30px;
}

.py-final-info {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    font-size: 18px;
    color: rgba(255, 255, 255, .9);
}

.py-final-info li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1;
}

.py-final-info i {
    color: #7ff0c4;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 760px) {
    .py-pay-tabs {
        gap: 5px;
    }

    .py-pay-tab {
        padding: 10px 3px;
    }

    .py-pay-ic {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .py-pay-nm {
        font-size: 11px;
    }

    .py-app {
        grid-template-columns: 1fr;
    }

    .py-pg-list {
        grid-template-columns: 1fr;
    }

    .py-pg-list li + li {
        border-left: none;
        border-top: 1px solid #e7ecf4;
    }

    .py-trust-grid {
        grid-template-columns: 1fr;
    }

    .py-bub {
        max-width: 84%;
    }

    .dg-hero-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hero_visual {
        order: 2;
    }
}

/* ===== S01 hero — 앱 목업 (다크 디바이스 + 결제수단 자동 전환) ===== */
.py-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.py-stage-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(52, 211, 153, .35), transparent 70%);
    filter: blur(20px);
}

.py-ph {
    position: relative;
    width: 314px;
    max-width: 100%;
    border-radius: 46px;
    padding: 6px;
    background: linear-gradient(160deg, #3a4458, #11192a);
    box-shadow: 0 40px 90px rgba(5, 12, 25, .6), inset 0 0 0 1px rgba(255, 255, 255, .1);
}

/* 다이내믹 아일랜드 — 얇은 펄 + 카메라 */
.py-ph-notch {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 21px;
    background: #05080f;
    border-radius: 13px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 9px;
}

.py-ph-notch::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3b6ea5 0 28%, #0a1422 60%);
    box-shadow: inset 0 0 0 1px rgba(120, 170, 220, .25);
}

.py-ph-scr {
    position: relative;
    border-radius: 40px;
    overflow: hidden;
    height: 500px;
    display: flex;
    flex-direction: column;
    line-height: 1.4;
    background: linear-gradient(180deg, #0d1830 0%, #0b1426 100%);
}

#pyHeroCard {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.py-ph-top {
    padding: 42px 20px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

.py-ph-app {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
}

.py-ph-logo {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: linear-gradient(145deg, #10b981, #0f9d6e);
    display: flex;
    align-items: center;
    justify-content: center;
}

.py-ph-logo i {
    color: #fff;
    font-size: 11px;
}

.py-ph-time {
    font-size: 12px;
    font-weight: 700;
    opacity: .8;
}

/* 메서드 세그먼트 */
.py-ph-seg {
    display: flex;
    gap: 5px;
    padding: 0 18px 14px;
}

.py-ph-seg button {
    flex: 1;
    font-size: 11px;
    color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .06);
    border: none;
    border-radius: 9px;
    padding: 8px 0;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    transition: .3s;
}

.py-ph-seg button i {
    font-size: 15px;
}

.py-ph-seg button.on {
    color: #0b1426;
    background: #34d399;
}

/* 진행바 */
.py-ph-prog {
    height: 3px;
    margin: 0 18px 16px;
    background: rgba(255, 255, 255, .1);
    border-radius: 3px;
    overflow: hidden;
}

.py-ph-prog::after {
    content: "";
    display: block;
    height: 100%;
    width: 0;
    background: #34d399;
    border-radius: 3px;
    animation: pyhFill 4s linear forwards;
}

@keyframes pyhFill {
    from { width: 0; }
    to { width: 100%; }
}

/* 카드 영역(전환) */
.py-ph-card {
    flex: 1;
    min-height: 0;
    margin: 0 18px 18px;
    background: #fff;
    border-radius: 22px;
    padding: 10px 18px 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    animation: pyhSwap .5s ease;
}

/* NFC·카메라(center) 화면 — 요소 사이 간격을 space-between의 절반으로 (남은 여백은 위/아래로 균등 분산) */
.py-ph-card.py-ph-center {
    justify-content: space-evenly;
}

@keyframes pyhSwap {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.py-ph-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--blue-d);
    background: #e7f7f1;
    border-radius: 8px;
    padding: 5px 11px;
    margin-bottom: 14px;
}

.py-ph-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
}

.py-ph-amt {
    font-size: 13px;
    color: var(--gray2);
    font-weight: 500;
    margin-top: 2px;
}

.py-ph-amt b {
    display: block;
    font-size: 28px;
    color: var(--ink);
    font-weight: 900;
    margin-top: 2px;
}

.py-ph-amt b em {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    color: var(--gray);
}

.py-ph-amt b .py-ph-per {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray2);
    margin-left: 3px;
}

/* NFC */
/* NFC·QR 카드 — 라벨은 상단(링크·정기와 동일), 하단 박스는 링크와 같은 높이 */
.py-ph-center .py-ph-tip-lg {
    margin-top: 10px;
    margin-bottom: 10px;
}

.py-ph-nfc {
    margin: 18px 0 14px;
    width: 86px;
    height: 86px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: radial-gradient(circle, #e7f7f1, #fff);
}

.py-ph-nfc i {
    font-size: 38px;
    color: var(--blue);
    z-index: 2;
}

.py-ph-nfc::before,
.py-ph-nfc::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--blue2);
    animation: pyhPing 1.8s ease-out infinite;
    opacity: 0;
}

.py-ph-nfc::after {
    animation-delay: .9s;
}

@keyframes pyhPing {
    0% { transform: scale(.6); opacity: .7; }
    100% { transform: scale(1.3); opacity: 0; }
}

.py-ph-tip {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.py-ph-tip small {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gray2);
    margin-top: 2px;
}

/* 링크/NFC/QR 하단 안내문구 — 미니 콜아웃 박스 */
.py-ph-tip-lg {
    width: 100%;
    margin-top: auto;
    background: #e7f7f1;
    border: 1px solid #cdeede;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 800;
    color: var(--blue-d);
}

.py-ph-tip-lg i {
    margin-right: 5px;
    color: var(--blue);
}

.py-ph-tip-lg small {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray);
    margin-top: 4px;
}

/* QR */
.py-ph-qr {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    margin: 12px 0 14px;
    padding: 6px;
    background: #fff;
    border-radius: 14px;
}

.py-ph-qr svg {
    width: 100%;
    height: 100%;
}

/* 카메라 인식(뷰파인더) 프레임 */
.py-ph-cam {
    width: 98px;
    height: 98px;
    flex-shrink: 0;
    margin: 10px 0 12px;
    border-radius: 18px;
}

.py-ph-cam-in {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #f2faf6;
    border: 1.5px solid #cdeadd;
    overflow: hidden;
}

.py-ph-cam-card {
    position: relative;
    width: 58px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #18c98a, #0f9d6e);
    box-shadow: 0 7px 14px -7px rgba(15, 157, 110, .5);
}

.py-ph-cam-chip {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 11px;
    height: 8px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .75);
}

.py-ph-cam-n {
    position: absolute;
    bottom: 7px;
    left: 7px;
    right: 7px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .5);
}

.py-ph-cam-c {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(15, 157, 110, .42);
}

.py-ph-cam-c.tl { top: 9px; left: 9px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.py-ph-cam-c.tr { top: 9px; right: 9px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.py-ph-cam-c.bl { bottom: 9px; left: 9px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.py-ph-cam-c.br { bottom: 9px; right: 9px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }

.py-ph-cam-scan {
    position: absolute;
    left: 12px;
    right: 12px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #0f9d6e, transparent);
    box-shadow: 0 0 11px rgba(15, 157, 110, .75);
    animation: pyPhScan 2.4s ease-in-out infinite;
}

@keyframes pyPhScan {
    0%, 100% { top: 14px; opacity: .35; }
    50% { top: 82px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .py-ph-cam-scan { animation: none; top: 48px; }
}

/* 링크(채팅) */
.py-ph-chat {
    width: 100%;
    margin: 10px 0 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.py-ph-bubble {
    align-self: flex-end;
    background: #fae100;
    color: #3c1e1e;
    font-size: 12.5px;
    font-weight: 700;
    padding: 9px 12px;
    border-radius: 13px 13px 3px 13px;
    max-width: 80%;
}

.py-ph-link {
    align-self: flex-end;
    margin-top: 2px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 12px;
    width: 88%;
    text-align: left;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
}

.py-ph-link-t {
    font-size: 11px;
    color: var(--gray2);
    font-weight: 700;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.py-ph-link-b {
    background: var(--blue);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    padding: 10px;
    border-radius: 9px;
}

.py-ph-sent {
    align-self: flex-end;
    font-size: 11px;
    color: #566177;
    font-weight: 600;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--bg2);
    border-radius: 999px;
    padding: 4px 10px;
}

.py-ph-sent i {
    color: var(--blue);
}

/* 링크 화면(L3) — 전송 말풍선 */
.py-ph-lchat {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 2px 0;
}

.py-ph-lchat-b {
    align-self: flex-end;
    background: #fae100;
    color: #3c1e1e;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 11px;
    border-radius: 12px 12px 3px 12px;
    max-width: 82%;
}

.py-ph-lchat-l {
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 9px 11px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .06);
}

.py-ph-lchat-l i {
    color: var(--blue);
    font-size: 16px;
}

.py-ph-lchat-l span {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ink);
}

.py-ph-lchat-s {
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: #566177;
    background: var(--bg2);
    border-radius: 999px;
    padding: 4px 9px;
}

.py-ph-lchat-s i {
    color: var(--blue);
}

/* 정기 화면(S2) — 캘린더 카드 */
.py-ph-cal {
    width: 150px;
    flex-shrink: 0;
    margin: 2px 0;
    background: #fff;
    border: 1.5px solid #cdeadd;
    border-radius: 14px;
    padding: 10px 11px;
    box-shadow: 0 10px 22px -12px rgba(15, 157, 110, .4);
}

.py-ph-cal-h {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    color: var(--blue-d);
    margin-bottom: 8px;
}

.py-ph-cal-g {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.py-ph-cal-g span {
    font-size: 8.5px;
    font-weight: 700;
    color: var(--gray2);
    text-align: center;
    padding: 3px 0;
    border-radius: 4px;
}

.py-ph-cal-g .on {
    background: var(--grad);
    color: #fff;
}

.py-ph-cal-g .dim {
    color: #c7cdd8;
}

/* 정기 */
.py-ph-sub {
    width: 100%;
    flex-shrink: 0;
    margin: 14px 0 8px;
    background: linear-gradient(135deg, #0f9d6e, #10b981);
    border-radius: 16px;
    padding: 16px;
    color: #fff;
    text-align: left;
}

.py-ph-sub-h {
    font-size: 12px;
    font-weight: 700;
    opacity: .9;
    display: flex;
    justify-content: space-between;
}

.py-ph-sub-a {
    font-size: 26px;
    font-weight: 800;
    margin: 6px 0 2px;
}

.py-ph-sub-a span {
    font-size: 13px;
    font-weight: 700;
}

.py-ph-sub-d {
    font-size: 11.5px;
    opacity: .9;
}

.py-ph-rows {
    width: 100%;
    flex: 1;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
}

.py-ph-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    background: var(--bg2);
    border-radius: 10px;
    padding: 9px 11px;
}

.py-ph-row i {
    color: var(--blue);
    font-size: 14px;
}

.py-ph-cta {
    margin-top: 12px;
    width: 100%;
    background: var(--blue);
    color: #fff;
    font-weight: 800;
    font-size: 14.5px;
    padding: 10px;
    border-radius: 13px;
}

/* 히어로 좌측 — 미리보기와 1:1 (스토어 버튼·0원 문구) */
.py-hero .py-store {
    background: #fff;
    min-width: 0;
    padding: 12px 18px;
    border-radius: 13px;
}

.py-hero .py-store i,
.py-hero .py-store span,
.py-hero .py-store small {
    color: var(--ink);
}

.py-hero .py-hero-micro {
    margin-top: 16px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    color: #7ff0c4;
}

.py-hero .py-hero-micro i {
    color: #34d399;
}

/* 히어로 좌측 텍스트 — 미리보기와 1:1 (제목·서브·이브로우·키칩) */
.py-hero .py-h1 {
    font-family: 'GmarketSans', 'Pretendard', sans-serif;
    font-weight: 800;
    font-size: clamp(30px, 4.4vw, 46px);
    line-height: 1.28;
}

.py-hero .em_grad_light {
    background: linear-gradient(120deg, #34d399, #7ff0c4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.py-hero .hero_eyebrow {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    font-weight: 700;
    letter-spacing: .06em;
}

.py-hero .sub {
    font-size: 16.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .86);
    max-width: 470px;
}

.py-hero .hero_keys span {
    padding: 7px 13px;
    border-radius: 9px;
}

.py-hero .py-store {
    gap: 9px;
}

.py-hero.dg-hero .dg-hero-inner {
    grid-template-columns: 1.08fr .92fr;
    gap: 48px;
}

/* ≤980px: 폰 비주얼 숨기고 텍스트를 화면 정중앙 정렬
   (기본 히어로 그리드 규칙보다 뒤 + 동일 특이성으로 확실히 override) */
@media (max-width: 980px) {
    .py-hero.dg-hero .dg-hero-inner {
        grid-template-columns: 1fr;
    }

    .py-hero .hero_visual {
        display: none;
    }

    .py-hero .hero_text {
        text-align: center;
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    .py-hero .sub {
        margin-left: auto;
        margin-right: auto;
    }

    .py-hero .hero_keys,
    .py-hero .py-dl,
    .py-hero .py-hero-micro {
        justify-content: center;
    }
}

/* ===== S03 결제수단 — 순서도(3단계 흐름) ===== */
.py-pd-flow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 4px 0 18px;
}

.py-pd-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 150px;
    flex: 1 1 0;
    min-width: 92px;
    position: relative;
}

.py-pd-step-n {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.py-pd-step-ic {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: var(--blue-l);
    border: 1px solid var(--line);
    color: var(--blue-d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    transition: transform .28s, background .28s, color .28s, box-shadow .28s, border-color .28s;
}

.py-pd-step-t {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
}

.py-pd-arrow {
    color: var(--line);
    font-size: 20px;
    align-self: center;
    margin-top: 24px;
    flex: 0 0 auto;
    transition: color .28s;
}

.py-pd-step-n {
    transition: transform .28s, background .28s;
}

/* 단계 워크스루: 현재 단계 강조 → 완료 */
.py-pd-step.now .py-pd-step-ic {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 14px 26px rgba(15, 157, 110, .35);
}

.py-pd-step.now .py-pd-step-n {
    background: var(--blue-d);
    transform: scale(1.08);
}

.py-pd-step.done .py-pd-step-ic {
    border-color: var(--blue);
    color: var(--blue-d);
}

.py-pd-arrow.now {
    color: var(--blue);
}

.py-pd-step:hover .py-pd-step-ic {
    border-color: var(--blue);
    color: var(--blue-d);
}

@media (max-width: 600px) {
    .py-pd-flow {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .py-pd-step {
        flex-direction: row;
        max-width: none;
        text-align: left;
        gap: 12px;
        min-width: 0;
    }

    .py-pd-step-t {
        flex: 1;
    }

    .py-pd-arrow {
        transform: rotate(90deg);
        margin: 4px 0 4px 11px;
    }
}

/* ===== S05 신뢰 — 신뢰 지표 strip ===== */
.dg .py-cred {
    list-style: none;
    margin: 0 auto 24px;
    padding: 0;
    max-width: 1080px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.py-cred li {
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 15px 16px;
    box-shadow: 0 2px 10px rgba(24, 28, 50, .04);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease, box-shadow .2s ease, border-color .2s ease;
}

/* WHY TRUST 인터랙션 A — 근거 카드 순차 등장 + 호버 */
.py-cred li:nth-child(1) { transition-delay: .10s; }
.py-cred li:nth-child(2) { transition-delay: .17s; }
.py-cred li:nth-child(3) { transition-delay: .24s; }
.py-cred li:nth-child(4) { transition-delay: .31s; }
.py-cred li:nth-child(5) { transition-delay: .38s; }

.dg-reveal.in .py-cred li {
    opacity: 1;
    transform: none;
}

.py-cred-ic {
    transition: background .2s ease, transform .2s ease;
}

.dg-reveal.in .py-cred li:hover {
    transition-delay: 0s;
    transform: translateY(-3px);
    border-color: #cdeadd;
    box-shadow: 0 10px 24px -10px rgba(13, 28, 22, .18);
}

.dg-reveal.in .py-cred li:hover .py-cred-ic {
    background: #e7f7f1;
    transform: scale(1.08);
}

/* WHY TRUST 인터랙션 B — PG 정산 흐름 순차 하이라이트 (진입 시 1회) */
@keyframes pgStepPulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.045); box-shadow: 0 12px 26px -8px rgba(15, 157, 110, .32); }
    100% { transform: scale(1); }
}

@keyframes pgArrowFlow {
    0% { color: #b6b6b6; transform: translateX(0); opacity: .55; }
    50% { color: var(--blue); transform: translateX(4px); opacity: 1; }
    100% { color: #b6b6b6; transform: translateX(0); opacity: .55; }
}

.dg-reveal.in .py-pgf > .py-pgf-step { animation: pgStepPulse .85s ease; }
.dg-reveal.in .py-pgf > .py-pgf-step:nth-child(1) { animation-delay: .6s; }
.dg-reveal.in .py-pgf > .py-pgf-step:nth-child(3) { animation-delay: 1.2s; }
.dg-reveal.in .py-pgf > .py-pgf-step:nth-child(5) { animation-delay: 1.8s; }

.dg-reveal.in .py-pgf > .py-pgf-arrow { animation: pgArrowFlow .6s ease; }
.dg-reveal.in .py-pgf > .py-pgf-arrow:nth-child(2) { animation-delay: .95s; }
.dg-reveal.in .py-pgf > .py-pgf-arrow:nth-child(4) { animation-delay: 1.55s; }

@media (prefers-reduced-motion: reduce) {
    .py-cred li { opacity: 1; transform: none; transition: none; }
    .dg-reveal.in .py-pgf > .py-pgf-step,
    .dg-reveal.in .py-pgf > .py-pgf-arrow { animation: none; }
}

.py-cred-iw {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
}

.py-cred-ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #f5f8fc;
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.py-cred-iw .py-cred-ic i {
    font-size: 20px;
    color: var(--blue);
}

.py-cred-iw .py-cred-v {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0f313f;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.py-cred-iw .py-cred-v i {
    color: #fff;
    line-height: 1;
    display: block;
}

.py-cred b {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.py-cred span {
    font-size: 11.5px;
    color: var(--gray);
    line-height: 1.35;
}

.py-cred-tx {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    flex: 1;
    min-width: 0;
}

.py-pg-foot {
    margin: 18px 0 0;
    font-size: 13.5px;
    color: var(--gray);
    text-align: center;
}

.py-pg-foot b {
    color: var(--ink);
    font-weight: 800;
}

@media (max-width: 760px) {
    .dg .py-cred {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .dg .py-cred {
        grid-template-columns: 1fr;
    }
}

/* ===== S4b 무료 견적 신청 유도 (밝은 CTA) ===== */
.py-quote {
    text-align: center;
    background:
        radial-gradient(80% 120% at 82% 2%, rgba(16, 185, 129, .17), transparent 55%),
        radial-gradient(90% 120% at 12% 100%, rgba(56, 189, 248, .07), transparent 60%),
        radial-gradient(120% 120% at 80% 0%, #0e2636 0%, #0a1826 62%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    padding: clamp(40px, 6vw, 62px) clamp(22px, 4vw, 44px);
    box-shadow: 0 22px 50px rgba(8, 15, 30, .35);
    overflow: hidden;
}

#py-quote .em_grad {
    background: linear-gradient(120deg, #34d399, #7ff0c4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.py-quote-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--blue-d);
    background: #fff;
    border: 1px solid var(--blue-l);
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.py-quote-badge i {
    font-size: 13px;
    color: var(--blue);
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.py-quote h2 {
    font-size: clamp(22px, 3.6vw, 32px);
    font-weight: 800;
    color: #fff;
    line-height: 1.32;
    margin: 0 0 30px;
}

.py-quote .desc {
    font-size: clamp(14px, 2vw, 16px);
    color: #fff;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 32px;
}

.py-quote .desc b {
    color: #fff;
    font-weight: 700;
}

.py-quote-feats {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
}

.py-quote-feats li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

.py-quote-feats i {
    color: var(--blue);
    font-size: 17px;
}

.py-quote-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 52px;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    background: var(--grad);
    padding: 0 36px;
    border-radius: 14px;
    transition: .15s;
}

.py-quote-btn::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -150%;
    width: 55%;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .5) 50%, transparent 80%);
    transform: skewX(-20deg);
    pointer-events: none;
    animation: pyFinalShine 3.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .py-quote-btn::before {
        animation: none;
    }
}

.py-quote-btn:hover {
    filter: brightness(.95);
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(15, 157, 110, .42);
}

.py-quote-sub {
    font-size: 13px;
    color: var(--gray);
    margin: 16px 0 0;
}

.py-quote-sub a {
    color: var(--blue-d);
    font-weight: 700;
}
/* 홈 FAQ 아코디언 — 콘텐츠·톡 인덱스와 동일(닫힘·펼침 모두 회색, 테두리 투명) */
#py-faq .faq_item { background: #f5f6f8; border-color: transparent; }
#py-faq .faq_item.open { background: #f5f6f8; border-color: transparent; }