/*==========================================================
HGOS UI FRAMEWORK V1.0 
PART 1
Design Token
Reset
Typography
==========================================================*/

/*==========================================================
Design Token
==========================================================*/

    :root {

        /* Brand */

        --h-primary: #7407ff;
        --h-primary-light: #9f78ff;
        --h-primary-dark: #5824d6;

        /* Background */

        --h-bg: #f7f5fd;
        --h-bg-soft: #f5f1ff;

        /* Surface */

        --h-surface: #ffffff;

        /* Text */

        --h-title: #2e2844;
        --h-text: #55566a;
        --h-muted: #9091a5;

        /* Status */

        --h-success: #37c978;
        --h-warning: #ffb347;
        --h-danger: #ff5a7c;

        /* Border */

        --h-border: #ddd2ff;

        /* Radius */

        --h-radius: 24px;
        --h-radius-sm: 16px;
        --h-radius-lg: 32px;

        /* Shadow */

        --h-shadow:
            0 12px 40px rgba(92, 63, 170, .08);

        --h-shadow-hover:
            0 18px 60px rgba(92, 63, 170, .12);

        /* Space */

        --h-gap: 20px;

        --h-space-xs: 8px;
        --h-space-sm: 16px;
        --h-space-md: 24px;
        --h-space-lg: 40px;
        --h-space-xl: 64px;

        /* Animation */

        --h-speed: .25s;

    }

/*==========================================================
Reset
==========================================================*/

    * {

        margin: 0;
        padding: 0;
        box-sizing: border-box;

    }

    

    body {

        font-family:
            Pretendard,
            "Noto Sans KR",
            sans-serif;

        font-size: 16px;

        line-height: 1.6;

        background:
            var(--h-bg);

        color:
            var(--h-text);

        -webkit-font-smoothing: antialiased;

    }

    img {

        display: block;

        max-width: 100%;

    }

    button {

        font: inherit;

        border: none;

        background: none;

        cursor: pointer;

    }

    /*==========================================================
Typography
==========================================================*/

    .h-title-xl {

        font-size: 30px;

        font-weight: 700;

        line-height: 1.2;

        color: var(--h-title);

    }

    .h-title {

        font-size: 24px;

        font-weight: 700;

        line-height: 1.3;

        color: var(--h-title);

    }

    .h-title-sm {

        font-size: 18px;

        font-weight: 600;

        line-height: 1.4;

        color: var(--h-title);

    }

    .h-text {

        font-size: 16px;

        line-height: 1.7;

        color: var(--h-text);

    }

    .h-small {

        font-size: 14px;

        line-height: 1.6;

        color: var(--h-muted);

    }

    .h-caption {

        font-size: 12px;

        line-height: 1.5;

        color: var(--h-muted);

    }

    /*==========================================================
Color Utility
==========================================================*/

    .h-primary {

        color: var(--h-primary);

    }

    .h-success {

        color: var(--h-success);

    }

    .h-warning {

        color: var(--h-warning);

    }

    .h-danger {

        color: var(--h-danger);

    }

    /*==========================================================
Background Utility
==========================================================*/

    .h-bg {

        background: var(--h-bg);

    }

    .h-bg-soft {

        background: var(--h-bg-soft);

    }

    .h-surface {

        background: var(--h-surface);

    }


    /*==========================================================
Spacing Utility
==========================================================*/

    .h-mt-xs {
        margin-top: 8px;
    }

    .h-mt-sm {
        margin-top: 16px;
    }

    .h-mt-md {
        margin-top: 24px;
    }

    .h-mt-lg {
        margin-top: 40px;
    }

    .h-mb-xs {
        margin-bottom: 8px;
    }

    .h-mb-sm {
        margin-bottom: 16px;
    }

    .h-mb-md {
        margin-bottom: 24px;
    }

    .h-mb-lg {
        margin-bottom: 40px;
    }

    .h-pt-md {
        padding-top: 24px;
    }

    .h-pb-md {
        padding-bottom: 24px;
    }

    /*==========================================================
Transition
==========================================================*/

    .h-transition {

        transition: all var(--h-speed) ease;

    }


    @media(max-width:768px) {

        :root {

            --h-radius: 18px;

            --h-radius-sm: 12px;

        }

    }





    /*==========================================================
HGOS UI FRAMEWORK V1.0
PART 2
Layout
Grid
Section
Card
==========================================================*/


    /*==========================================================
Container
==========================================================*/

    .h-container {

        width: 100%;

        max-width: 1400px;

        margin: 0 auto;

        padding: 40px;

    }

    .h-section {

        margin-bottom: var(--h-space-lg);

    }


    /*==========================================================
Application
==========================================================*/

    .h-app {

        display: flex;

        flex-direction: column;

        gap: var(--h-gap);

        min-height: 100vh;

    }

    .h-main {

        display: flex;

        flex-direction: column;

        gap: var(--h-gap);

    }


    /*==========================================================
Grid
==========================================================*/

    .h-grid {

        display: grid;

        gap: var(--h-gap);

    }

    .h-grid-1 {

        display: grid;

        grid-template-columns: 1fr;

        gap: var(--h-gap);

    }

    .h-grid-2 {

        display: grid;

        grid-template-columns: 1.2fr 1fr;

        gap: var(--h-gap);

    }

    .h-grid-2-equal {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: var(--h-gap);

    }

    .h-grid-3 {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: var(--h-gap);

    }

    .h-grid-4 {

        display: grid;

        grid-template-columns: repeat(4, 1fr);

        gap: var(--h-gap);

    }

    .h-grid-auto {

        display: grid;

        grid-template-columns:

            repeat(auto-fit,

                minmax(260px, 1fr));

        gap: var(--h-gap);

    }


    /*==========================================================
Card
==========================================================*/

    .h-card {

        background: var(--h-surface);

        border: 1px solid var(--h-border);

        border-radius: var(--h-radius);

        box-shadow: var(--h-shadow);

        overflow: hidden;

        transition: all var(--h-speed);

    }

    .h-card:hover {

        transform: translateY(-3px);

        box-shadow: var(--h-shadow-hover);

    }

    .h-card-header {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 20px;

        padding: 28px 32px;

        border-bottom: 1px solid var(--h-border);

    }

    .h-card-body {

        padding: 32px;

    }

    .h-card-footer {

        padding: 24px 32px;

        border-top: 1px solid var(--h-border);

    }


    /*==========================================================
Divider
==========================================================*/

    .h-divider {

        height: 1px;

        background: var(--h-border);

        margin: 24px 0;

    }


    /*==========================================================
Badge
==========================================================*/

    .h-badge {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        height: 32px;

        padding: 0 14px;

        border-radius: 999px;

        font-size: 13px;

        font-weight: 600;

    }

    .h-badge-primary {

        background: rgba(116, 7, 255, .10);

        color: var(--h-primary);

    }

    .h-badge-success {

        background: rgba(55, 201, 120, .10);

        color: var(--h-success);

    }

    .h-badge-warning {

        background: rgba(255, 179, 71, .12);

        color: var(--h-warning);

    }

    .h-badge-danger {

        background: rgba(255, 90, 124, .12);

        color: var(--h-danger);

    }


    /*==========================================================
Avatar
==========================================================*/

    .h-avatar {

        display: flex;

        align-items: center;

        justify-content: center;

        width: 56px;

        height: 56px;

        min-width: 56px;

        min-height: 56px;

        flex-shrink: 0;

        border-radius: 50%;

        background:
            linear-gradient(135deg,
                var(--h-primary),
                var(--h-primary-light));

        color: #fff;

        font-size: 20px;

        font-weight: 700;

    }


    @media(max-width:768px) {

        .h-avatar {

            width: 42px;

            height: 42px;

            min-width: 42px;

            min-height: 42px;

            font-size: 16px;

        }

    }

    /*==========================================================
Progress
==========================================================*/

    .h-progress {

        height: 12px;

        background: #ece8fb;

        border-radius: 999px;

        overflow: hidden;

    }

    .h-progress-fill {

        height: 100%;

        width: 0;

        border-radius: 999px;

        background:

            linear-gradient(90deg,

                var(--h-primary),

                var(--h-primary-light));

        transition: width .4s ease;

    }


    /*==========================================================
List
==========================================================*/

    .h-list {

        display: flex;

        flex-direction: column;

        gap: 20px;

    }

    .h-list-item {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 16px;

    }


    /*==========================================================
Responsive
==========================================================*/

    @media(max-width:1200px) {

        .h-container {

            padding: 24px;

        }

    }


    @media(max-width:992px) {

        .h-grid-2 {

            grid-template-columns: 1fr;

        }

        .h-grid-3 {

            grid-template-columns: 1fr 1fr;

        }

        .h-grid-4 {

            grid-template-columns: 1fr 1fr;

        }

    }


    @media(max-width:768px) {

        .h-container {

            padding: 8px;

        }

        .h-grid-2-equal,

        .h-grid-3,

        .h-grid-4 {

            grid-template-columns: 1fr;

        }

        .h-card-header {

            padding: 20px;

        }


        .h-card-body {

            padding: 20px;

        }

        .h-card-footer {

            padding: 20px;

        }

    }


    .h-header-brand {
        display: flex;
        align-items: baseline;
        gap: 2px;
    }

    .h-header-brand .h-title-xl {
        margin: 0;
    }

    .h-header-brand .h-small {
        margin: 0;
    }

    .h-divider {
        color: #c8c8d8;
        margin: 0 2px;
    }

    .h-home-link {
        font-size: 10px;
    }




    /*==========================================================
HGOS UI FRAMEWORK V1.0
PART 3
Button
Form
Table
Modal
Loading
Animation
==========================================================*/


    /*==========================================================
Button
==========================================================*/

    .h-btn {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 10px;

        height: 48px;

        padding: 0 24px;

        border: none;

        border-radius: 16px;

        font-size: 15px;

        font-weight: 600;

        cursor: pointer;

        transition: all var(--h-speed);

        user-select: none;

    }

    .h-btn:hover {

        transform: translateY(-2px);

    }

    .h-btn:active {

        transform: translateY(0);

    }

    .h-btn:disabled {

        opacity: .45;

        cursor: not-allowed;

        pointer-events: none;

    }


    /* Primary */

    .h-btn-primary {

        background:

            linear-gradient(135deg,

                var(--h-primary),

                var(--h-primary-light));

        color: #fff;

    }


    /* Outline */

    .h-btn-outline {

        background: #fff;

        border: 1px solid var(--h-border);

        color: var(--h-title);

    }


    /* Light */

    .h-btn-light {

        background: var(--h-bg-soft);

        color: var(--h-primary);

    }


    /* Success */

    .h-btn-success {

        background: var(--h-success);

        color: #fff;

    }


    /* Danger */

    .h-btn-danger {

        background: var(--h-danger);

        color: #fff;

    }


    /* Button Group */

    .h-btn-group {

        display: flex;

        gap: 14px;

        flex-wrap: wrap;

    }


    /*==========================================================
 GV Approval Badge
==========================================================*/

    .gv-approve-button {

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;

    }


    .gv-approval-badge {

        display: inline-flex;

        align-items: center;
        justify-content: center;

        min-width: 20px;
        height: 20px;

        padding: 0 6px;

        border-radius: 999px;

        background: #ff3b5c;

        color: #ffffff;

        font-size: 11px;

        font-weight: 700;

        line-height: 1;

        box-sizing: border-box;

    }


    /*==========================================================
 GV Withdrawal Badge
==========================================================*/
    .gv-credit-button {

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 7px;

    }


    .gv-withdrawal-badge {

        display: none;

        position: static;

        width: 12px;
        height: 12px;

        min-width: 12px;

        padding: 0;

        margin: 0;

        border-radius: 50%;

        background: #ff3b5c;

        border: 0;

        box-sizing: border-box;

        z-index: auto;

        box-shadow: none;

    }

    /*==========================================================
Form
==========================================================*/

    .h-form {

        display: flex;

        flex-direction: column;

        gap: 24px;

    }


    .h-form-group {

        display: flex;

        flex-direction: column;

        gap: 10px;

    }


    .h-label {

        font-size: 14px;

        font-weight: 600;

        color: var(--h-title);

    }


    .h-input,

    .h-select,

    .h-textarea {

        width: 100%;

        padding: 15px 18px;

        background: #fff;

        border: 1px solid var(--h-border);

        border-radius: 16px;

        font-size: 15px;

        transition: all var(--h-speed);

    }


    .h-input:focus,

    .h-select:focus,

    .h-textarea:focus {

        outline: none;

        border-color: var(--h-primary);

        box-shadow: 0 0 0 4px rgba(116, 7, 255, .08);
    }


    .h-textarea {

        resize: vertical;

        min-height: 140px;

    }


    .h-help {

        font-size: 13px;

        color: var(--h-muted);

    }

    .h-help.h-primary {

        color: var(--h-primary);

    }


    .h-error {

        font-size: 13px;

        color: var(--h-danger);

    }

    .h-required {
        margin-left: 3px;
        color: #ff3b63;
        font-weight: 700;
    }



    /*==========================================================
Table
==========================================================*/

    .h-table {

        width: 100%;

        border-collapse: collapse;

    }


    .h-table thead {

        background: var(--h-bg-soft);

    }


    .h-table th {

        padding: 18px;

        text-align: left;

        font-size: 14px;

        font-weight: 700;

        color: var(--h-title);

        border-bottom: 1px solid var(--h-border);

    }


    .h-table td {

        padding: 18px;

        font-size: 15px;

        border-bottom: 1px solid var(--h-border);

    }


    .h-table tbody tr {

        transition: background var(--h-speed);

    }


    .h-table tbody tr:hover {

        background:

            rgba(116,

                7,

                255,

                .03);

    }



    /*==========================================================
Loading
==========================================================*/

    .h-loading {

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 60px;

    }


    .h-spinner {

        width: 42px;

        height: 42px;

        border-radius: 50%;

        border: 4px solid var(--h-border);

        border-top-color: var(--h-primary);

        animation: h-spin 1s linear infinite;

    }


    @keyframes h-spin {

        100% {

            transform: rotate(360deg);

        }

    }



    /*==========================================================
Modal
==========================================================*/

    .h-modal {

        position: fixed;
        inset: 0;

        display: none;

        align-items: center;
        justify-content: center;

        padding: 20px;

        background: rgba(25, 25, 35, .45);
        backdrop-filter: blur(6px);

        overflow: hidden;

        z-index: 99999;
    }

    

    .h-modal-dialog {

        width: 100%;
        max-width: 640px;

        max-height: calc(100dvh - 40px);

        display: flex;
        flex-direction: column;

        background: #fff;

        border-radius: 24px;

        box-shadow: var(--h-shadow-hover);

        overflow: hidden;
    }


    .h-modal-header {

        padding: 24px 28px;

        border-bottom: 1px solid var(--h-border);

        /* 고정 */
        flex-shrink: 0;

    }


    .h-modal-body {

        padding: 28px;

        /* 핵심 */
        flex: 1;

        min-height: 0;

        overflow-y: auto;

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;

    }


    .h-modal-footer {

        display: flex;

        justify-content: flex-end;

        gap: 12px;

        padding: 20px 28px;

        border-top: 1px solid var(--h-border);

        /* 고정 */
        flex-shrink: 0;

        background: #fff;

    }

    .h-alert-message {
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
        line-height: 1.55;
    }



    .h-transfer-type-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .h-transfer-type-btn {
        height: 46px;
        border: 1px solid var(--h-border);
        border-radius: 12px;
        background: var(--h-bg-soft);
        font-weight: 600;
        cursor: pointer;
    }

    .h-transfer-type-btn.active {
        border-color: var(--h-primary);
        background: var(--h-primary);
        color: #fff;
    }


    .h-confirm-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        padding: 16px 24px 20px;
    }

    .h-confirm-cancel,
    .h-confirm-ok {
        height: 46px;
        min-width: 82px;
        padding: 0 18px;

        border-radius: 14px;

        font-size: 14px;
        font-weight: 600;

        cursor: pointer;

        transition:
            transform 0.15s ease,
            opacity 0.15s ease;
    }

    .h-confirm-cancel {
        border: 0;
        background: transparent;
        color: #3f3a52;
    }

    .h-confirm-ok {
        border: 0;
        background: linear-gradient(135deg,
                #7c16ff,
                #9a5cff);
        color: #ffffff;

        min-width: 96px;
    }

    .h-confirm-cancel:hover,
    .h-confirm-ok:hover {
        opacity: 0.9;
    }

    .h-confirm-ok:active,
    .h-confirm-cancel:active {
        transform: scale(0.97);
    }

    .genome-header {

        margin: -16px -16px 20px;

        padding: 16px 24px 14px;

        border-bottom: 1px solid var(--h-border);

    }

    .genome-description {

        margin-top: 8px;

        font-size: 14px;

        color: #666;

        line-height: 1.6;

    }

    .genome-guide {

        margin-top: 10px;

        font-size: 13px;

        color: #888;

        line-height: 1.7;

    }

    .genome-progress {

        margin-top: 14px;

        padding-top: 10px;

        border-top: 1px solid #ece7ff;

        font-size: 13px;

        color: #777;

    }

    #genomeProgress {

        color: var(--h-primary);

        font-weight: 700;

    }


    /*==========================================================
Animation
==========================================================*/

    .h-fade {

        animation: h-fade .45s ease;

    }


    @keyframes h-fade {

        from {

            opacity: 0;

            transform:

                translateY(18px);

        }

        to {

            opacity: 1;

            transform:

                translateY(0);

        }

    }


    .h-float {

        animation: h-float 4s ease-in-out infinite;

    }


    @keyframes h-float {

        0% {

            transform: translateY(0);

        }

        50% {

            transform: translateY(-10px);

        }

        100% {

            transform: translateY(0);

        }

    }


    .h-scale {

        animation: h-scale .35s ease;

    }


    @keyframes h-scale {

        from {

            opacity: 0;

            transform: scale(.95);

        }

        to {

            opacity: 1;

            transform: scale(1);

        }

    }



    /*==========================================================
Responsive
==========================================================*/

    @media(max-width:768px) {

        .h-btn {

            width: 100%;

        }

        .h-btn-group {

            flex-direction: column;

        }

        .h-table {

            display: block;

            overflow-x: auto;

        }


        .h-modal-dialog {

            width: 100%;

            max-height: calc(100dvh - 24px);

            border-radius: 20px;

        }


        .h-modal-body {

            padding: 20px;

            flex: 1;

            min-height: 0;

            overflow-y: auto;

            -webkit-overflow-scrolling: touch;

        }


        .h-modal-footer {

            display: flex;

            padding: 16px 20px;

            background: #fff;

            flex-shrink: 0;

        }

        .h-modal-footer .h-btn {

            width: auto;

            min-width: 0;

            padding: 0 10px;

            white-space: nowrap;

            font-size: 13px;
        }

        .h-modal-footer .h-btn-light {
            flex: .8;
        }

        .h-modal-footer .h-btn-outline {
            flex: 1.35;
        }

        .h-modal-footer .h-btn-primary {
            flex: 1.15;
        }



        .h-modal-header {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 12px;

            padding: 18px 20px;

            flex-shrink: 0;

        }


        .h-modal-header .h-btn {

            width: auto !important;

            min-width: 70px;

            height: 36px;

            padding: 0 14px;

            font-size: 13px;

            font-weight: 600;

            border-radius: 12px;

            flex: none;

        }


        #btnMemberProfile {

            width: auto !important;

            min-width: max-content;

            white-space: nowrap;

            flex-shrink: 0;

        }

        #btnGVRequest {

            padding-left: 12px;
            padding-right: 12px;

            gap: 4px;

        }


    }




    /*==========================================================
HGOS UI FRAMEWORK V1.0
PART 4
Utility
==========================================================*/


    /*==========================================================
Width
==========================================================*/

    .h-w-100 {
        width: 100%;
    }

    .h-w-auto {
        width: auto;
    }

    .h-h-100 {
        height: 100%;
    }


    /*==========================================================
Display
==========================================================*/

    .h-block {
        display: block;
    }

    .h-inline {
        display: inline;
    }

    .h-inline-flex {
        display: inline-flex;
    }

    .h-hidden {
        display: none;
    }

    .h-visible {
        display: block;
    }


    .h-flex {
        display: flex;
    }


    /*==========================================================
Flex
==========================================================*/




    .h-row {

        display: flex;

        flex-direction: row;

    }

    .h-column {

        display: flex;

        flex-direction: column;

    }

    .h-wrap {

        flex-wrap: wrap;

    }

    .h-nowrap {

        flex-wrap: nowrap;

    }

    .h-center {

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .h-between {

        display: flex;

        align-items: center;

        justify-content: space-between;

    }

    .h-start {

        display: flex;

        align-items: center;

        justify-content: flex-start;

    }

    .h-end {

        display: flex;

        align-items: center;

        justify-content: flex-end;

    }

    .h-align-start {

        align-items: flex-start;

    }

    .h-align-center {

        align-items: center;

    }

    .h-align-end {

        align-items: flex-end;

    }


    /*==========================================================
Text
==========================================================*/

    .h-text-left {

        text-align: left;

    }

    

    .h-text-right {

        text-align: right;

    }

    .h-uppercase {

        text-transform: uppercase;

    }

    .h-bold {

        font-weight: 700;

    }

    .h-medium {

        font-weight: 500;

    }

    .h-normal {

        font-weight: 400;

    }


    /*==========================================================
Overflow
==========================================================*/

    .h-scroll {

        overflow: auto;

    }

    .h-scroll-x {

        overflow-x: auto;

    }

    .h-scroll-y {

        overflow-y: auto;

    }

    .h-hidden-overflow {

        overflow: hidden;

    }


    /*==========================================================
Border
==========================================================*/

    .h-border {

        border: 1px solid var(--h-border);

    }

    .h-border-top {

        border-top: 1px solid var(--h-border);

    }

    .h-border-bottom {

        border-bottom: 1px solid var(--h-border);

    }

    .h-border-left {

        border-left: 1px solid var(--h-border);

    }

    .h-border-right {

        border-right: 1px solid var(--h-border);

    }


    /*==========================================================
Radius
==========================================================*/

    .h-radius {

        border-radius: var(--h-radius);

    }

    .h-radius-sm {

        border-radius: var(--h-radius-sm);

    }

    .h-radius-lg {

        border-radius: var(--h-radius-lg);

    }

    .h-circle {

        border-radius: 50%;

    }


    /*==========================================================
Shadow
==========================================================*/

    .h-shadow {

        box-shadow: var(--h-shadow);

    }

    .h-shadow-hover {

        box-shadow: var(--h-shadow-hover);

    }


    /*==========================================================
Cursor
==========================================================*/

    .h-pointer {

        cursor: pointer;

    }

    .h-disabled {

        pointer-events: none;

        opacity: .45;

    }


    /*==========================================================
Spacing Margin
==========================================================*/

    .h-m-0 {
        margin: 0;
    }

    .h-m-xs {
        margin: 8px;
    }

    .h-m-sm {
        margin: 16px;
    }

    .h-m-md {
        margin: 24px;
    }

    .h-m-lg {
        margin: 40px;
    }

    .h-m-auto {
        margin: auto;
    }

    .h-ml-auto {
        margin-left: auto;
    }

    .h-mr-auto {
        margin-right: auto;
    }

    .h-ml-xs {
        margin-left: 8px;
    }

    .h-ml-sm {
        margin-left: 16px;
    }

    .h-ml-md {
        margin-left: 24px;
    }

    .h-mr-xs {
        margin-right: 8px;
    }

    .h-mr-sm {
        margin-right: 16px;
    }

    .h-mr-md {
        margin-right: 24px;
    }

    .h-mx-auto {

        margin-left: auto;
        margin-right: auto;

    }


    .h-pl-sm {
        padding-left: 16px;
    }

    .h-pr-sm {
        padding-right: 16px;
    }

    .h-pl-md {
        padding-left: 24px;
    }

    .h-pr-md {
        padding-right: 24px;
    }




    /*==========================================================
Spacing Padding
==========================================================*/

    .h-p-0 {
        padding: 0;
    }

    .h-p-xs {
        padding: 8px;
    }

    .h-p-sm {
        padding: 16px;
    }

    .h-p-md {
        padding: 24px;
    }

    .h-p-lg {
        padding: 40px;
    }


    /*==========================================================
Gap
==========================================================*/

    .h-gap-xs {

        gap: 8px;

    }

    .h-gap-sm {

        gap: 16px;

    }

    .h-gap-md {

        gap: 24px;

    }

    .h-gap-lg {

        gap: 40px;

    }


    /*==========================================================
Opacity
==========================================================*/

    .h-opacity-25 {

        opacity: .25;

    }

    .h-opacity-50 {

        opacity: .5;

    }

    .h-opacity-75 {

        opacity: .75;

    }

    .h-opacity-100 {

        opacity: 1;

    }


    /*==========================================================
Z Index
==========================================================*/

    .h-z-1 {

        z-index: 1;

    }

    .h-z-10 {

        z-index: 10;

    }

    .h-z-100 {

        z-index: 100;

    }

    .h-z-modal {

        z-index: 9999;

    }


    /*==========================================================
Responsive Utility
==========================================================*/

    .h-mobile {

        display: none;

    }

    .h-desktop {

        display: block;

    }


    @media(max-width:768px) {

        .h-mobile {

            display: block;

        }

        .h-desktop {

            display: none;

        }

        .h-hide-mobile {

            display: none;

        }

        .h-show-mobile {

            display: block;

        }

    }


    @media(min-width:769px) {

        .h-hide-desktop {

            display: none;

        }

        .h-show-desktop {

            display: block;

        }

    }




    /*==========================================================
Dashboard 용 css
==========================================================*/

    /*==========================================================
Dashboard Row Gap
==========================================================*/

    .h-grid-2+.h-grid-2 {
        margin-top: var(--h-gap);
    }


    @media(max-width:768px) {

        .dashboard-header .h-title-xl {

            font-size: 20px;

            line-height: 1.15;

        }

        .dashboard-header .h-small {

            font-size: 13px;

        }

    }


    /*==========================================================
Profile Birth Calendar
==========================================================*/

    .profile-calendar-options {

        display: flex;
        align-items: center;
        gap: 18px;

        min-height: 42px;

    }

    .profile-calendar-option {

        display: inline-flex;
        align-items: center;
        gap: 5px;

        margin: 0;
        padding: 0;

        font-size: 15px;
        line-height: 1.4;
        color: var(--h-title);

        cursor: pointer;
        white-space: nowrap;

    }

    .profile-calendar-option input {

        width: 14px;
        height: 14px;
        margin: 0;

        accent-color: var(--h-primary);

    }

    @media(max-width:768px) {

        .profile-calendar-options {

            gap: 14px;
            min-height: 38px;

        }

        .profile-calendar-option {

            font-size: 14px;
            gap: 4px;

        }

        .profile-calendar-option input {

            width: 14px;
            height: 14px;

        }

    }


    /*==========================================================
Header
==========================================================*/

    .dashboard-header {

        margin-bottom: 10px;

    }


    .dashboard-profile {

        gap: 16px;

    }

    /* 회원 이름 / 등급 / 내정보 */

    .dashboard-profile>div:first-child {

        min-width: 0;

    }


    #memberName {

        white-space: nowrap;

    }


    #memberGrade {

        display: inline-block;

        white-space: nowrap;

    }

    /* 회원명 / 회원등급 모바일 줄바꿈 방지 */
    @media(max-width:768px) {

        #btnMemberProfile {
            flex-shrink: 0;
            white-space: nowrap;
        }

        #btnMemberProfile>div:first-child {
            min-width: max-content;
            white-space: nowrap;
        }

        #memberName,
        #memberGrade {
            white-space: nowrap !important;
        }

        #memberGrade {
            display: block;
            line-height: 1.2;
        }

    }


    /* 회원명 / 아바타 전체를 내 정보 수정 영역으로 사용 */

    #btnMemberProfile {

        cursor: pointer;

        user-select: none;

        -webkit-tap-highlight-color: transparent;

        transition:
            transform .18s ease,
            opacity .18s ease;

    }

    #btnMemberProfile:hover {

        opacity: .92;

    }

    #btnMemberProfile:active {

        transform: scale(.98);

    }


    /* 등급 + 내정보 같은 줄 */

    #memberGrade+#btnMemberProfile {

        white-space: nowrap;

    }


    /*==========================================================
Hero
==========================================================*/

    .dashboard-hero {

        overflow: hidden;

    }






    /*==========================================================
Dashboard Summary
==========================================================*/

    .dashboard-summary {

        width: 100%;

    }

    .dashboard-summary-grid {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 20px;

    }

    .dashboard-summary-item {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        padding: 22px;

        border-radius: var(--h-radius-sm);

        background: var(--h-bg-soft);

        transition: all var(--h-speed);

    }

    .dashboard-summary-item:hover {

        transform: translateY(-3px);

        box-shadow: var(--h-shadow);

    }

    .dashboard-summary-value {

        margin-top: 10px;

        font-size: 28px;

        font-weight: 700;

        color: var(--h-primary);

    }

    /* 다음 성장레벨 표시 */
    .growth-next-level-name {

        display: block;

        text-align: center;

        font-size: 28px;

        line-height: 1.1;

        color: var(--h-primary);

        font-weight: 700;

        white-space: nowrap;

    }

    .growth-next-level-remaining {

        display: block;

        margin-top: 10px;

        text-align: center;

        font-size: 13px;

        line-height: 1.2;

        color: var(--h-primary);

        font-weight: 500;

        white-space: nowrap;

    }

    @media(max-width:640px) {

        .growth-next-level-name {
            font-size: 26px;

            text-align: center;
        }

        .growth-next-level-remaining {
            font-size: 12px;

            text-align: center;

            margin-top: 8px;
        }

    }

    @media(max-width:992px) {

        .dashboard-summary-grid {

            grid-template-columns: repeat(2, 1fr);

        }

    }

    @media(max-width:640px) {

        .dashboard-summary-grid {

            grid-template-columns: repeat(2, 1fr);

            gap: 14px;

        }

        .dashboard-summary-item {

            padding: 18px;

        }

        .dashboard-summary-value {

            font-size: 24px;

        }

    }



    .dashboard-wallet-actions {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 14px;


        margin-top: 24px;

    }

    .dashboard-wallet-actions .h-btn {

        width: 100%;

    }


    /*==========================================================
Dashboard Wallet
==========================================================*/

    .dashboard-wallet-grade {

        display: flex;

        align-items: center;

        gap: 16px;

        margin-top: 24px;


    }

    .dashboard-wallet-grade .h-title {

        margin: 0;

        white-space: nowrap;

    }

    .dashboard-wallet-grade .h-text {

        margin: 0;

    }



    /*==========================================================
Dashboard Activity
==========================================================*/

    .dashboard-activity-item {

        display: grid;

        grid-template-columns: 20px 1fr auto;

        gap: 16px;

        align-items: center;

        padding: 16px 0;

        border-bottom: 1px solid var(--h-border);


    }

    .dashboard-activity-item:last-child {

        border-bottom: none;

    }

    .dashboard-activity-dot {

        width: 12px;

        height: 12px;

        border-radius: 50%;

    }

    .dashboard-activity-dot.success {

        background: var(--h-success);

    }

    .dashboard-activity-dot.primary {

        background: var(--h-primary);

    }

    .dashboard-activity-dot.warning {

        background: var(--h-warning);

    }

    .dashboard-activity-dot.danger {

        background: var(--h-danger);

    }

    .dashboard-activity-title {

        font-weight: 600;

        font-size: 16px;

        color: var(--h-title);

    }

    .dashboard-activity-desc {

        margin-top: 6px;

        font-size: 14px;

        line-height: 1.5;

        word-break: keep-all;

        color: var(--h-muted);

    }

    .dashboard-activity-time {

        text-align: right;

        font-size: 16px;

        font-weight: 700;

        color: var(--h-muted);

    }

    @media(max-width:768px) {

        .dashboard-activity-item {

            display: grid;

            grid-template-columns:

                20px 1fr auto;

            gap: 12px;

            align-items: center;

        }

        .dashboard-activity-time {

            text-align: right;

            white-space: nowrap;

            margin-top: 0;

        }

        .dashboard-activity-title {

            font-size: 18px;

        }

        .dashboard-activity-desc {

            font-size: 13px;

        }

        #btnGAHistory,
        #btnGVHistory {

            width: 88px !important;
            min-width: 88px;

            height: 36px;

            padding: 0 12px;

            font-size: 13px;

        }

    }





    /* ==========================================================
   MEMBER PROFILE FINAL
   회원명 + 등급 + 아바타 전체 → 내 정보 수정
   ========================================================== */

    #btnMemberProfile {
        cursor: pointer;
        outline: none;
    }

    #btnMemberProfile:focus-visible {
        outline: 2px solid var(--h-primary);
        outline-offset: 4px;
        border-radius: 14px;
    }

    @media(max-width:768px) {

        #btnMemberProfile {
            display: flex !important;
            align-items: center;
            gap: 8px !important;
            min-width: 0;
            flex-shrink: 0;
            padding: 2px;
            border-radius: 12px;
        }

        #btnMemberProfile>div:first-child {
            min-width: 0;
        }

        #memberName {
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 15px;
            line-height: 1.2;
        }

        #memberGrade {
            display: block;
            margin-top: 2px;
            font-size: 11px;
            line-height: 1.2;
            white-space: nowrap;
        }

        #memberAvatar {
            width: 44px;
            height: 44px;
            min-width: 44px;
            min-height: 44px;
            flex-shrink: 0;
        }

    }

    @media(max-width:420px) {

        #btnMemberProfile {
            gap: 6px !important;
        }

        #memberName {
            max-width: 82px;
            font-size: 14px;
        }

        #memberGrade {
            font-size: 10px;
        }

        #memberAvatar {
            width: 40px;
            height: 40px;
            min-width: 40px;
            min-height: 40px;
        }

    }


    /* ==========================================================
   MOBILE GROWTH ASSET GRADE / MESSAGE
   회원등급과 메시지를 2줄로 고정
   ========================================================== */

    @media(max-width:768px) {

        .dashboard-wallet-grade {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            justify-content: flex-start !important;
            gap: 5px !important;
            margin-top: 20px !important;
            width: 100%;
        }

        .dashboard-wallet-grade #heroCrystal {
            display: block !important;
            width: 100%;
            margin: 0 !important;
            font-size: 18px;
            line-height: 1.35;
            font-weight: 600;
            white-space: nowrap !important;
            word-break: keep-all;
        }

        .dashboard-wallet-grade #heroMessage {
            display: block !important;
            width: 100%;
            margin: 0 !important;
            font-size: 15px;
            line-height: 1.55;
            white-space: nowrap !important;
            word-break: keep-all;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    }

    @media(max-width:420px) {

        .dashboard-wallet-grade {
            gap: 4px !important;
            margin-top: 18px !important;
        }

        .dashboard-wallet-grade #heroCrystal {
            font-size: 17px;
        }

        .dashboard-wallet-grade #heroMessage {
            font-size: 14px;
        }

    }



    /* ==========================================================
   GROWTH STATUS
   Mobile next growth level centered
   ========================================================== */

    @media(max-width:768px) {

        .growth-next-level {
            display: flex !important;
            flex-direction: column;
            align-items: center !important;
            justify-content: center;
            text-align: center !important;
        }

        .growth-next-level-name {
            display: block;
            width: 100%;
            text-align: center !important;
            font-size: 28px;
            line-height: 1.1;
            color: var(--h-primary);
            font-weight: 700;
        }

        .growth-next-level-remaining {
            display: block;
            width: 100%;
            margin-top: 10px;
            text-align: center !important;
            font-size: 13px;
            line-height: 1.2;
            color: var(--h-primary);
            font-weight: 500;
        }

    }

/* V3 extracted inline styles */
.h-inline-c6cab848 { display:flex;
            align-items:center;
            gap:6px;
            flex-wrap:nowrap; }
.h-inline-911f63d7 { width:20px;
            height:20px;
            min-width:20px;
            padding:0;
            margin:0;
            border:1px solid #ddd4ff;
            border-radius:6px;
            background:#fff;
            color:#777;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            font-size:13px;
            line-height:1;
            cursor:pointer; }
.h-inline-c8be1ccb { display:none; }
.h-inline-f19a25ff { height:180px;
                display:flex;
                align-items:stretch;
                gap:8px;
                padding:12px 0 6px; }
.h-inline-195f6ef0 { margin-top:18px;
                padding-top:18px;
                border-top:1px solid var(--h-border); }
.h-inline-553020e1 { font-size:12px;
                        line-height:1.2; }
.h-inline-dac4fe6c { text-align:center; }
.h-inline-a527bac1 { text-align:right; }
.h-inline-5e54d775 { text-align:center;
                    margin-top:14px; }


/* ==========================================================
   WALLET PAGE SHELL — MATCH ENERGY / COMMUNITY WIDTH
   wallet.html has no .h-page wrapper, so the body itself
   becomes the page shell.
   ========================================================== */

html {
    background: var(--h-bg);
}

body {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 10px 18px 70px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    body {
        max-width: 100%;
        padding: 10px 12px 50px;
    }
}