:root {
    --dgn-navy:#101f38;
    --dgn-navy2:#162a49;
    --dgn-green:#3f8d66;
    --dgn-green-dark:#317653;
    --dgn-bg:#f5f7fa;
    --dgn-line:#e4e8ee;
    --dgn-text:#1c2430;
    --dgn-sub:#727c89;
    --dgn-white:#ffffff;
    --dgn-danger:#c73939;
    --dgn-success:#257448;
}

* {
    box-sizing:border-box;
}

.member-page {
    min-height:calc(100vh - 180px);
    padding:80px 20px 110px;
    background:
        radial-gradient(circle at 15% 0%, rgba(63,141,102,.08), transparent 28%),
        linear-gradient(180deg, #f8fafc 0%, #f3f6f9 100%);
}

.member-box {
    width:100%;
    max-width:500px;
    margin:0 auto;
    padding:46px 42px 42px;
    background:#fff;
    border:1px solid var(--dgn-line);
    border-radius:20px;
    box-shadow:0 18px 48px rgba(20,35,55,.08);
}

.member-box h1 {
    margin:0;
    font-size:32px;
    line-height:1.25;
    font-weight:800;
    color:var(--dgn-navy);
    letter-spacing:-1px;
}

.member-box h1::before {
    content:"DGN";
    display:block;
    margin-bottom:12px;
    color:var(--dgn-green);
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
}

.member-desc {
    margin:10px 0 32px;
    font-size:14px;
    line-height:1.7;
    color:var(--dgn-sub);
}

.member-box label {
    display:block;
    margin:19px 0 8px;
    color:#303846;
    font-size:14px;
    font-weight:700;
}

.member-box label small {
    color:#9aa2ad;
    font-size:12px;
    font-weight:400;
}

.member-box input[type="text"],
.member-box input[type="password"],
.member-box input[type="email"],
.member-box input[type="tel"] {
    width:100%;
    height:52px;
    padding:0 15px;
    border:1px solid #d8dde5;
    border-radius:9px;
    outline:none;
    background:#fff;
    color:#222;
    font-size:15px;
    transition:border-color .2s, box-shadow .2s, background .2s;
}

.member-box input:focus {
    border-color:var(--dgn-green);
    box-shadow:0 0 0 3px rgba(63,141,102,.10);
}

.member-box input:disabled {
    background:#f3f5f7;
    color:#7d8792;
}

.member-box input::placeholder {
    color:#adb5bf;
}

.btn-primary {
    width:100%;
    height:54px;
    margin-top:28px;
    padding:0 20px;
    border:0;
    border-radius:9px;
    background:var(--dgn-navy);
    color:#fff;
    font-size:15px;
    font-weight:800;
    cursor:pointer;
    transition:background .2s, transform .15s;
}

.btn-primary:hover {
    background:var(--dgn-green-dark);
}

.member-links {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:0;
    margin-top:25px;
    padding-top:22px;
    border-top:1px solid #edf0f3;
}

.member-links a {
    position:relative;
    padding:0 14px;
    color:#666f7c;
    font-size:13px;
    text-decoration:none;
}

.member-links a + a::before {
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:1px;
    height:11px;
    background:#d9dde2;
    transform:translateY(-50%);
}

.form-error,
.form-success {
    margin:0 0 22px;
    padding:14px 16px;
    border-radius:9px;
    font-size:13px;
    line-height:1.6;
}

.form-error {
    background:#fff2f2;
    border:1px solid #ffdada;
    color:var(--dgn-danger);
}

.form-success {
    background:#eff9f3;
    border:1px solid #d7eee0;
    color:var(--dgn-success);
}

.member-find-grid {
    width:100%;
    max-width:1050px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
}

.member-find-grid .member-box {
    max-width:none;
    margin:0;
}

.member-find-grid .member-box:first-child {
    border-top:4px solid var(--dgn-green);
}

.member-find-grid .member-box:last-child {
    border-top:4px solid var(--dgn-navy);
}

.member-menu {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:0;
    white-space:nowrap;
}

.member-menu > span,
.member-menu > a {
    position:relative;
    padding:0 10px;
    color:inherit;
    font-size:12px;
    line-height:1;
    text-decoration:none;
}

.member-menu > * + *::before {
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:1px;
    height:10px;
    background:rgba(255,255,255,.28);
    transform:translateY(-50%);
}

.join-guide {
    margin:0 0 26px;
    padding:16px 18px;
    background:#f5f8f6;
    border-radius:10px;
    color:#56625c;
    font-size:13px;
    line-height:1.7;
}

@media (max-width: 760px) {
    .member-page {
        padding:42px 15px 70px;
    }

    .member-box {
        max-width:100%;
        padding:32px 22px 30px;
        border-radius:14px;
    }

    .member-box h1 {
        font-size:27px;
    }

    .member-find-grid {
        grid-template-columns:1fr;
        gap:18px;
    }

    .member-menu {
        flex-wrap:wrap;
        white-space:normal;
        row-gap:7px;
    }
}