* {
        box-sizing: border-box;
    }

    html,
    body {
        margin: 0;
        padding: 0;
        font-family: 'Pretendard', 'Poppins', sans-serif;
        background: radial-gradient(circle at top left, #141B2D, #0A0F1E 70%);
        color: #fff;
    }

    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
    }

    .wrapper {
        width: 100%;
        max-width: 480px;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.03);
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    }

    /* 헤더 */
    header {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(8px);
        padding: 16px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .logo {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-buttons button {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: white;
        padding: 8px 14px;
        margin-left: 10px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.9rem;
        transition: 0.2s;
    }

    .nav-buttons button:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    /* 메인 */

    .banner {
        width: 100%;
        padding: 40px 20px;
        background: linear-gradient(135deg, #0ea5e9, #6366f1);
        color: #fff;
        text-align: center;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    }

    .banner h1 {
        font-size: 1.6rem;
        margin-bottom: 12px;
    }

    .banner p {
        font-size: 1rem;
        color: #e0e7ff;
        margin-bottom: 20px;
    }

    .banner .btn {
        padding: 14px 0;
        width: 220px;
        font-size: 1rem;
        border-radius: 10px;
        font-weight: 600;
        background: linear-gradient(135deg, #ffffff33, #ffffff55);
        color: #fff;
        border: none;
        cursor: pointer;
        transition: opacity 0.2s;
    }

    .banner .btn:hover {
        opacity: 0.9;
    }

    main {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .content {
        background: rgba(255, 255, 255, 0.06);
        border-radius: 16px;
        padding: 28px;
        text-align: center;
        backdrop-filter: blur(12px);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
        width: 100%;
    }

    .content h1 {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }

    .content p {
        color: #cbd5e1;
        font-size: 0.95rem;
        margin-bottom: 24px;
    }



    .btn {
        background: linear-gradient(135deg, #0ea5e9, #6366f1);
        color: white;
        border: none;
        border-radius: 10px;
        padding: 12px 0;
        font-size: 1rem;
        width: 100%;
        cursor: pointer;
        font-weight: 600;
        transition: opacity 0.2s;
    }

    .btn:hover {
        opacity: 0.9;
    }

    .exchange-calculator {
        width: 100%;
        max-width: 450px;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(12px);
        padding: 16px;
        border-radius: 20px;
        color: #fff;
        margin: 20px auto;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
        position: relative;
    }

    .calculator-title {
        font-size: 1.5rem;
        margin: 0;
        font-weight: 700;
    }


    .rate-input {
        display: inline-block;
        align-items: center;
        margin-bottom: 20px;
        font-size: 1rem;
        margin-top: 10px;
    }

    .rate-input input {
        padding: 8px;
        border-radius: 10px;
        border: none;
        text-align: left;
        font-size: 1rem;
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        background: transparent;
    }

    .exchange-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        margin-bottom: 16px;
        gap: 5px;
    }


    .input-box {
        width: 100%;
        position: relative;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 16px;
    }

    .input-box input {
        width: 100%;
        padding: 20px 60px 20px 20px;
        font-size: 1.2rem;
        border: none;
        background: transparent;
        color: #fff;

    }

    .input-box input:focus {
        outline: none;
        box-shadow: none;
    }

    .input-box input::-webkit-outer-spin-button,
    .input-box input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .input-box .currency {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 600;
        color: #cbd5e1;
    }




    .input-box2 {
        display: inline-block;
        position: relative;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        width: 110px;
    }

    .input-box2 input:focus {
        outline: none;
        box-shadow: none;
    }

    .input-box2 input::-webkit-outer-spin-button,
    .input-box2 input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .input-box2 .currency {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 600;
        color: #cbd5e1;
    }


    .exchange-calculator p {
        font-size: 0.8rem;
        color: #cbd5e1;
        text-align: center;
    }

    /* 푸터 */
    .footer {
        background: #141B2D;
        padding: 20px;
        text-align: center;
        font-size: 0.8rem;
        color: #a1a1aa;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        font-family: 'Pretendard', sans-serif;
    }

    .footer-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 12px;
    }

    .footer-logo {
        width: 120px;
        margin-bottom: 8px;
    }

    .footer-links a {
        color: #60a5fa;
        text-decoration: none;
        margin: 0 6px;
        font-weight: 500;
        transition: opacity 0.2s;
    }

    .footer-links a:hover {
        opacity: 0.8;
    }

    .footer-bottom p {
        margin: 4px 0;
        font-size: 0.75rem;
        color: #cbd5e1;
        line-height: 1.4;
    }

    /*모달*/
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(20, 27, 45, 0.7);
        backdrop-filter: blur(4px);
        justify-content: center;
        align-items: center;
        padding: 20px;
    }

    .modal-content {
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(12px);
        border-radius: 16px;
        padding: 28px;
        width: 100%;
        max-width: 480px;
        height: 100%;
        display: flex;
        flex-direction: column;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
        color: #fff;
        text-align: left;
    }

    .modal-body {
        padding-right: 8px;
        flex: 1;
        line-height: 1.6;
        white-space: pre-line;
    }

    .modal-content h2 {
        font-size: 1.3rem;
        margin-bottom: 16px;
        font-weight: 700;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding-bottom: 8px;
    }

    .modal-content p {
        font-size: 0.95rem;
        color: #cbd5e1;
        line-height: 1.6;
        margin-bottom: 16px;
    }

    .close {
        position: absolute;
        top: 12px;
        right: 16px;
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
        color: #fff;
        transition: color 0.2s;
    }

    .close:hover {
        color: #60a5fa;
    }

    .modal-button {
        margin-top: 20px;
        background: linear-gradient(135deg, #0ea5e9, #6366f1);
        color: #fff;
        border: none;
        border-radius: 10px;
        padding: 10px 0;
        width: 100%;
        cursor: pointer;
        font-weight: 600;
        transition: opacity 0.2s;
    }

    .modal-button:hover {
        opacity: 0.9;
    }


    /*테더 시세*/
    .tether-rate-section {
        width: 100%;
        max-width: 480px;
        margin-top: 20px;
        color: #fff;
        font-family: 'Pretendard', sans-serif;
    }

    .tether-rate-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 16px;
        text-align: center;
    }

    .tether-rate-cards {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .tether-rate-card {
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(12px);
        border-radius: 16px;
        padding: 16px;
        flex: 1 1 200px;
        max-width: 220px;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    }

    .tether-rate-exchange {
        min-height: 20px;
        justify-content: center;
        display: flex;
    }

    .tether-rate-exchange-logo img {
        max-width: 100px;
        display: block;
        margin: 0 auto;
    }

    .tether-rate-divider {
        width: 80%;
        height: 1px;
        background: rgba(255, 255, 255, 0.2);
        margin: 12px 0;
    }

    .tether-rate-value {
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: 8px;
        display: flex;
        align-items: baseline;
    }

    .tether-price-integer {
        margin-right: 2px;
    }

    .tether-price-decimal {
        font-size: 1rem;
        color: #cbd5e1;
    }

    .tether-price-currency {
        margin-left: 4px;
        font-size: 0.9rem;
        color: #cbd5e1;
    }

    .tether-rate-change {
        font-size: 0.9rem;
        font-weight: 600;
    }

    .tether-rate-change--positive {
        color: #22c55e;
    }

    .tether-rate-change--negative {
        color: #ef4444;
    }


    /*로그인*/
    .login-banner {
        width: 100%;
        padding: 40px 20px;
        background: transparent;
        color: #fff;
        text-align: center;
        box-shadow: none;
        border-radius: 16px;
        margin-bottom: 20px;
    }

    .login-banner h1 {
        font-size: 1.6rem;
        margin-bottom: 20px;
    }

    .login-body .input-box {
        position: relative;
        margin-bottom: 16px;
    }

    .login-body input {
        width: 100%;
        padding: 14px 48px 14px 16px;
        border-radius: 12px;
        border: none;
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        font-size: 1rem;
    }

    .login-body input:focus {
        outline: none;
        box-shadow: none;
    }

    .login-body .currency {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #cbd5e1;
        font-weight: 600;
    }

    .login-btn {
        margin-top: 12px;
        background: linear-gradient(135deg, #ffffff33, #ffffff55);
        color: #fff;
        border: none;
        border-radius: 12px;
        padding: 14px 0;
        width: 100%;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.2s;
    }

    .login-btn:hover {
        opacity: 0.9;
    }

    /*회원가입*/

    .warning-text {
        font-size: 0.8rem;
        color: #f87171;
        margin: 4px 0 8px 4px;
        display: none;
    }

    input.input-error {
        outline: 2px solid #ef4444 !important;
    }

    button#signup-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .signup-banner {
        width: 100%;
        padding: 40px 20px;
        background: transparent;
        color: #fff;
        text-align: center;
        box-shadow: none;
        border-radius: 16px;
        margin-bottom: 20px;
    }

    .signup-banner h1 {
        font-size: 1.6rem;
        margin-bottom: 20px;
    }

    .signup-body .input-box {
        position: relative;
        margin-bottom: 16px;
    }

    .signup-body input {
        width: 100%;
        padding: 14px 48px 14px 16px;
        border-radius: 12px;
        border: none;
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        font-size: 1rem;
    }

    .signup-body input:focus {
        outline: none;
        box-shadow: none;
    }

    .signup-body .currency {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #cbd5e1;
        font-weight: 600;
    }

    .signup-btn {
        margin-top: 16px;
        background: linear-gradient(135deg, #ffffff33, #ffffff55);
        color: #fff;
        border: none;
        border-radius: 12px;
        padding: 14px 0;
        width: 100%;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.2s;
    }

    .signup-btn:hover {
        opacity: 0.9;
    }

    .terms-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 10px 14px;
        margin-top: 10px;
        font-size: 0.9rem;
        color: #e0e7ff;
    }

    .checkbox-container {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .checkbox-container input[type="checkbox"] {
        accent-color: #60a5fa;
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

    .view-terms {
        background: none;
        border: none;
        color: #93c5fd;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.2s;
    }

    .view-terms:hover {
        opacity: 0.8;
    }

    /*판매자 매칭*/
    .trade-guide {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 40px 20px;
        background: #0f1117;
        color: #fff;
        font-family: 'Pretendard', sans-serif;
    }

    .guide-section {
        background: linear-gradient(135deg, #131722, #1b1f2b);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 20px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        padding: 40px;
        transition: transform 0.2s ease;
    }

    .guide-section:hover {
        transform: translateY(-3px);
    }

    .guide-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .guide-badge {
        display: inline-block;
        background: #3b82f6;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: 10px;
    }

    .guide-title {
        font-size: 1.8rem;
        line-height: 1.4;
    }

    .guide-title .highlight {
        color: #60a5fa;
        font-weight: 700;
    }

    .guide-icon {
        width: 36px;
        height: 36px;
        vertical-align: middle;
        margin-left: 6px;
    }

    .guide-apps {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .guide-apps img {
        width: 50px;
        height: 50px;
        filter: brightness(0.9);
        transition: transform 0.2s ease;
    }

    .guide-apps img:hover {
        transform: scale(1.1);
        filter: brightness(1);
    }

    .guide-btn {
        margin-top: 15px;
        background: #60a5fa;
        border: none;
        color: #fff;
        font-weight: 600;
        padding: 12px 20px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .guide-btn:hover {
        background: #3b82f6;
    }

    .guide-note {
        font-size: 0.9rem;
        color: #9ca3af;
    }

    .guide-note .dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #60a5fa;
        border-radius: 50%;
        margin-right: 6px;
    }

    /* 반응형 */
    @media (max-width: 768px) {
        .guide-title {
            font-size: 1.4rem;
        }

        .guide-apps img {
            width: 40px;
            height: 40px;
        }
    }

    .matching-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 17, 23, 0.9);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        backdrop-filter: blur(4px);
    }

    .matching-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .spinner {
        width: 60px;
        height: 60px;
        border: 5px solid rgba(255, 255, 255, 0.15);
        border-top-color: #60a5fa;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .matching-text {
        color: #fff;
        font-size: 1.2rem;
        font-weight: 500;
        letter-spacing: 0.5px;
        animation: fadeIn 1.5s ease infinite alternate;
    }

    @keyframes fadeIn {
        0% {
            opacity: 0.6;
        }

        100% {
            opacity: 1;
        }
    }