:root {
    --joint-blue: #344da3;
    --joint-bright-blue: #007bc4;
    --joint-yellow: #fff500;
    --joint-footer: #292929;
}

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: #f3f3f3; color: #111; font-family: Arial, "Noto Sans KR", "Malgun Gothic", sans-serif; }
body.joint-modal-open { overflow: hidden; }
*, *::before, *::after { box-sizing: border-box; }
.joint-page { width: 100%; max-width: 1980px; margin: 0 auto; background: #fff; box-shadow: 0 0 28px rgba(0, 0, 0, .06); }
.joint-page, .joint-page * { box-sizing: border-box; }
.joint-page a { color: inherit; text-decoration: none; }
.joint-page button, .joint-page input, .joint-page select { font: inherit; }

.joint-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.joint-secret-login { position: fixed; top: 0; right: 0; z-index: 10020; display: block; width: 20px; height: 20px; background: transparent; opacity: 0; }
.joint-secret-login:focus { opacity: 1; outline: 2px solid #fff500; background: rgba(0, 0, 0, .35); }

.joint-main, .joint-image-section, .joint-image-section picture { display: block; width: 100%; margin: 0; padding: 0; }
.joint-image-section { overflow: hidden; font-size: 0; line-height: 0; }
.joint-image-section img { display: block; width: 100%; height: auto; margin: 0; border: 0; }
.joint-image-section--hero { position: relative; }
.joint-hero-contact { position: absolute; top: clamp(22px, 2.3vw, 44px); left: 50%; z-index: 4; display: flex; align-items: center; justify-content: space-between; width: min(88%, 1690px); transform: translateX(-50%); color: #fff; line-height: 1; }
.joint-hero-contact__brand { display: inline-flex; flex: 0 0 auto; align-items: center; }
.joint-hero-contact__brand img { display: block; width: 206px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .38)); }
.joint-hero-contact__admin { position: absolute; left: 50%; display: flex; align-items: center; gap: clamp(24px, 2.2vw, 46px); transform: translateX(-50%); font-size: clamp(14px, 1vw, 18px); font-weight: 700; white-space: nowrap; }
.joint-hero-contact__admin a:hover, .joint-hero-contact__admin a:focus { color: var(--joint-yellow); }
.joint-hero-contact__phone { display: flex; flex-direction: column; align-items: flex-start; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.joint-hero-contact__phone strong { color: var(--joint-yellow); font-size: clamp(22px, 1.75vw, 34px); font-weight: 800; letter-spacing: -.04em; }
.joint-hero-contact__phone span { margin-top: 4px; color: #fff; font-size: clamp(20px, 1.55vw, 30px); font-weight: 700; }

.joint-consultation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 570px;
    aspect-ratio: 1920 / 1103;
    padding: clamp(40px, 5vw, 90px) 0;
    background: #0073e8 url('../images/consult-bg.jpg') center center / cover no-repeat;
}
.joint-consultation > h2 { margin: 0 0 clamp(20px, 2vw, 38px); color: #fff; font-size: clamp(32px, 3.3vw, 64px); font-weight: 800; letter-spacing: -.045em; text-shadow: 0 2px 9px rgba(0, 29, 112, .35); }
.joint-form { position: relative; width: min(83%, 1060px); padding: clamp(28px, 3vw, 58px) clamp(30px, 4.2vw, 80px) clamp(26px, 2.8vw, 54px); background: #fff; box-shadow: 0 12px 34px rgba(0, 38, 117, .2); }
.joint-honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.joint-form__required { margin: 0 0 clamp(16px, 1.7vw, 32px); font-size: clamp(14px, 1vw, 19px); }
.joint-form__required span, .joint-field b { color: #e71920; font-weight: 800; }
.joint-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 36px) clamp(30px, 3.2vw, 62px); }
.joint-field { display: grid; grid-template-columns: clamp(75px, 5.8vw, 112px) minmax(0, 1fr); align-items: center; gap: clamp(12px, 1.2vw, 22px); min-width: 0; }
.joint-field > span { font-size: clamp(22px, 1.9vw, 36px); font-weight: 500; letter-spacing: -.06em; white-space: nowrap; }
.joint-field input, .joint-field select { width: 100%; height: clamp(48px, 3.7vw, 70px); border: 2px solid #444; border-radius: 0; background: #fff; color: #111; font-size: clamp(16px, 1.35vw, 25px); outline: 0; }
.joint-field input { padding: 0 13px; }
.joint-field input:focus, .joint-field select:focus { border-color: #007ac5; box-shadow: 0 0 0 3px rgba(0, 122, 197, .18); }
.joint-field--phone { grid-column: 1 / -1; grid-template-columns: clamp(75px, 5.8vw, 112px) minmax(0, 1fr); }
.joint-phone-inputs { display: grid; grid-template-columns: minmax(82px, .8fr) auto 1fr auto 1fr; align-items: center; gap: clamp(7px, .8vw, 15px); max-width: 600px; }
.joint-phone-inputs select { padding: 0 11px; }
.joint-phone-inputs i { font-size: clamp(16px, 1.2vw, 23px); font-style: normal; }
.joint-consents { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 13px; margin-top: clamp(18px, 2vw, 34px); font-size: clamp(13px, .9vw, 17px); }
.joint-consents label { display: inline-flex; align-items: center; gap: 7px; }
.joint-consents input { width: clamp(17px, 1.25vw, 24px); height: clamp(17px, 1.25vw, 24px); accent-color: #1688e6; }
.joint-policy-open { padding: 1px 2px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: #333; cursor: pointer; }
.joint-form .joint-submit-link { position: relative; display: flex; align-items: center; justify-content: center; width: min(84%, 560px); min-height: clamp(90px, 6.5vw, 122px); margin: clamp(20px, 2.2vw, 36px) auto 0; padding: clamp(20px, 1.7vw, 30px) clamp(42px, 3.2vw, 64px); overflow: hidden; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, .78); border-radius: 8px; background: linear-gradient(115deg, #005db1 0%, #009ddd 48%, #005db1 100%); background-size: 220% 100%; color: #fff !important; font-size: clamp(40px, 3.05vw, 58px); font-weight: 900; line-height: 1; letter-spacing: -.055em; text-align: center; text-decoration: none !important; white-space: nowrap; cursor: pointer; text-shadow: 0 2px 4px rgba(0, 40, 95, .35); box-shadow: 0 9px 24px rgba(0, 74, 151, .38); animation: joint-submit-pulse 1.8s ease-in-out infinite, joint-submit-gradient 3.2s linear infinite; }
.joint-form .joint-submit-link::after { content: ''; position: absolute; top: -35%; bottom: -35%; left: -45%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent); transform: skewX(-18deg); pointer-events: none; animation: joint-button-shine 2.6s ease-in-out infinite; }
.joint-form .joint-submit-link:hover, .joint-form .joint-submit-link:focus { color: #fff !important; background-color: #004f94; outline: 3px solid rgba(255,255,255,.7); outline-offset: 3px; animation-play-state: paused; transform: scale(1.04); }
.joint-form .joint-submit-link.is-disabled, .joint-form .joint-submit-link[aria-disabled="true"] { opacity: .65; pointer-events: none; cursor: wait; animation: none; }

.joint-footer { background: var(--joint-footer); color: #d3d3d3; }
.joint-footer__inner { position: relative; width: min(92%, 1500px); margin: 0 auto; padding: 54px 0 46px; text-align: center; }
.joint-footer h2 { margin: 0 0 22px; color: #fff; font-size: 26px; }
.joint-footer p { margin: 7px 0; font-size: 14px; line-height: 1.75; }
.joint-footer p span { margin: 0 9px; color: #686868; }
.joint-footer a { color: inherit; }
.joint-footer__copyright { margin-top: 20px !important; color: #aaa; }
.joint-mobile-cta { display: none; }

.joint-buy-float { position: fixed; top: 50%; right: max(18px, calc((100vw - 1980px) / 2 + 18px)); z-index: 9980; display: flex; align-items: center; justify-content: center; width: 124px; height: 118px; padding: 13px 10px; overflow: hidden; border: 3px solid #fff29a; border-radius: 12px; background: linear-gradient(145deg, #ff9a00 0%, #ff5a1f 48%, #e92d44 100%); color: #fff !important; line-height: 1; transform: translateY(-50%); box-shadow: 0 10px 30px rgba(231, 54, 36, .48), 0 0 0 5px rgba(255, 184, 0, .13); animation: joint-float-attention 1.8s ease-in-out infinite; }
.joint-buy-float::after { content: ''; position: absolute; top: -30%; bottom: -30%; left: -45%; width: 35%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); animation: joint-button-shine 2.8s ease-in-out infinite; }
.joint-buy-float span { position: relative; z-index: 1; display: block; color: #fff; font-size: 25px; font-weight: 900; line-height: 1.08; text-align: center; text-shadow: 0 2px 5px rgba(127, 20, 0, .42); white-space: nowrap; }
.joint-buy-float span strong { display: block; margin-top: 5px; color: #fffbd1; font-size: 27px; font-weight: 900; }
.joint-buy-float:hover, .joint-buy-float:focus { animation-play-state: paused; transform: translateY(-50%) scale(1.04); box-shadow: 0 13px 34px rgba(0, 67, 153, .45); }

@keyframes joint-float-attention {
    0%, 100% { transform: translateY(-50%) scale(1); box-shadow: 0 10px 30px rgba(231, 54, 36, .48), 0 0 0 5px rgba(255, 184, 0, .13); }
    50% { transform: translateY(-50%) scale(1.065); box-shadow: 0 15px 40px rgba(238, 55, 35, .65), 0 0 0 10px rgba(255, 194, 0, .2); }
}
@keyframes joint-button-shine {
    0%, 34% { left: -45%; opacity: 0; }
    48% { opacity: 1; }
    66%, 100% { left: 120%; opacity: 0; }
}
@keyframes joint-submit-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 9px 24px rgba(0, 74, 151, .38); }
    50% { transform: scale(1.055); box-shadow: 0 13px 32px rgba(0, 151, 216, .58); }
}
@keyframes joint-submit-gradient {
    0% { background-position: 0 50%; }
    100% { background-position: 220% 50%; }
}

.joint-policy[hidden] { display: none; }
.joint-policy { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; }
.joint-policy__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .66); }
.joint-policy__dialog { position: relative; z-index: 1; width: min(92vw, 620px); max-height: 82vh; overflow-y: auto; padding: 36px; border-radius: 10px; background: #fff; color: #222; box-shadow: 0 18px 60px rgba(0, 0, 0, .38); }
.joint-policy__dialog h2 { margin: 0 40px 24px 0; font-size: 24px; }
.joint-policy__dialog dl { display: grid; grid-template-columns: 100px 1fr; margin: 0; border-top: 1px solid #ddd; }
.joint-policy__dialog dt, .joint-policy__dialog dd { margin: 0; padding: 13px 10px; border-bottom: 1px solid #ddd; line-height: 1.6; }
.joint-policy__dialog dt { background: #f4f7fa; font-weight: 700; }
.joint-policy__dialog p { margin: 18px 0 0; color: #555; line-height: 1.7; }
.joint-policy__close { position: absolute; top: 18px; right: 20px; width: 36px; height: 36px; border: 0; background: transparent; color: #333; font-size: 34px; line-height: 1; cursor: pointer; }

@media (max-width: 1100px) and (min-width: 768px) {
    .joint-hero-contact { width: 92%; }
    .joint-hero-contact__brand img { width: 165px; height: auto; }
    .joint-hero-contact__admin { gap: 18px; font-size: 13px; }
    .joint-hero-contact__phone strong { font-size: 22px; }
    .joint-hero-contact__phone span { font-size: 19px; }
    .joint-form { width: 88%; padding-left: 7vw; padding-right: 7vw; }
}

@media (max-width: 767px) {
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    .joint-page { max-width: none; box-shadow: none; }
    .joint-hero-contact { top: 13px; width: calc(100% - 28px); }
    .joint-hero-contact__brand img { width: 105px; height: 20px; }
    .joint-hero-contact__admin { gap: 8px; font-size: 9px; }
    .joint-hero-contact__phone { align-items: flex-end; white-space: nowrap; }
    .joint-hero-contact__phone strong { font-size: 11px; }
    .joint-hero-contact__phone span { margin-top: 3px; font-size: 15px; }

    .joint-consultation { min-height: 0; aspect-ratio: auto; padding: 19px 14px 22px; }
    .joint-consultation > h2 { margin-bottom: 10px; font-size: 22px; }
    .joint-form { width: 100%; padding: 13px 12px 12px; box-shadow: 0 5px 18px rgba(0, 38, 117, .2); }
    .joint-form__required { margin-bottom: 9px; font-size: 10px; }
    .joint-form__grid { gap: 8px 10px; }
    .joint-field { grid-template-columns: 62px minmax(0, 1fr); gap: 9px; }
    .joint-field > span { font-size: 16px; }
    .joint-field input, .joint-field select { height: 34px; border-width: 1px; font-size: 13px; }
    .joint-field input { padding: 0 7px; }
    .joint-field--phone { grid-template-columns: 62px minmax(0, 1fr); }
    .joint-phone-inputs { grid-template-columns: minmax(58px, .8fr) auto 1fr auto 1fr; gap: 4px; max-width: none; }
    .joint-phone-inputs select { padding: 0 4px; }
    .joint-phone-inputs i { font-size: 13px; }
    .joint-consents { justify-content: flex-start; gap: 4px 7px; margin-top: 9px; font-size: 9px; line-height: 1.35; }
    .joint-consents label:last-child { flex-basis: 100%; }
    .joint-consents input { width: 14px; height: 14px; }
    .joint-form .joint-submit-link { width: min(94%, 300px); min-height: 72px; margin-top: 14px; padding: 16px 24px; font-size: 30px; }

    .joint-footer__inner { width: 90%; padding: 38px 0 42px; text-align: left; }
    .joint-footer h2 { margin-bottom: 16px; font-size: 22px; }
    .joint-footer p { font-size: 11px; line-height: 1.8; }
    .joint-footer p span { margin: 0 5px; }
    .joint-mobile-cta { position: fixed; right: 0; bottom: 0; left: 0; z-index: 9990; display: grid; grid-template-columns: 1fr 1fr; height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); color: #fff; box-shadow: 0 -4px 18px rgba(0, 0, 0, .18); }
    .joint-mobile-cta a { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 17px; font-weight: 800; }
    .joint-mobile-cta__phone { background: #183780; }
    .joint-mobile-cta__buy { background: #0088c8; }
    .joint-mobile-cta small { font-size: inherit; font-weight: inherit; }

    .joint-buy-float { display: none; }

    .joint-policy__dialog { padding: 28px 20px 24px; }
    .joint-policy__dialog h2 { font-size: 20px; }
    .joint-policy__dialog dl { grid-template-columns: 78px 1fr; font-size: 13px; }
    .joint-policy__dialog dt, .joint-policy__dialog dd { padding: 10px 8px; }
    .joint-policy__dialog p { font-size: 13px; }
}

@media (max-width: 374px) {
    .joint-hero-contact__brand img { width: 92px; height: auto; }
    .joint-hero-contact__admin { gap: 5px; font-size: 8px; }
    .joint-hero-contact__phone strong { font-size: 10px; }
    .joint-hero-contact__phone span { font-size: 13px; }
    .joint-field > span { font-size: 14px; }
    .joint-form { padding-right: 11px; padding-left: 11px; }
    .joint-consents { font-size: 9px; }
    .joint-mobile-cta a { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .joint-buy-float, .joint-buy-float::after, .joint-submit-link, .joint-submit-link::after { animation: none; }
}