/* ==========================================================
   HGOS GLOBAL UI SYSTEM — NORMALIZED SINGLE SOURCE
   최상위 공용 CSS
   ----------------------------------------------------------
   목적
   - 모든 HGOS Pages가 이 파일 하나의 디자인 토큰을 공유
   - PC / Mobile 타이포그래피를 :root에서 일괄 제어
   - 공통 폭 / 카드 / 버튼 / 폼 / 모달 / 상태 / 유틸리티 통합
   - 아임웹 위젯 의존성 없음
   - 페이지 CSS는 페이지 고유 레이아웃만 정의
   ========================================================== */


/* ==========================================================
   1. DESIGN TOKENS
   ========================================================== */

:root{
    /* Brand */
    --hgos-primary:#7407ff;
    --hgos-primary-hover:#6500e6;
    --hgos-primary-2:#9f78ff;
    --hgos-primary-soft:#f5f1ff;
    --hgos-primary-soft-2:#faf8ff;

    /* Text */
    --hgos-title:#2e2844;
    --hgos-text:#55566a;
    --hgos-muted:#85869a;
    --hgos-placeholder:#9a9bad;
    --hgos-white:#ffffff;

    /* Status */
    --hgos-success:#37c978;
    --hgos-success-soft:#effbf4;
    --hgos-danger:#ff3b30;
    --hgos-danger-soft:#fff2f1;
    --hgos-warning:#ff9800;
    --hgos-warning-soft:#fff8ec;
    --hgos-info:#4b7bec;
    --hgos-info-soft:#f1f5ff;

    /* Surface / Border */
    --hgos-bg:#ffffff;
    --hgos-bg-soft:#faf9fd;
    --hgos-bg-muted:#f6f5f9;
    --hgos-border:#ddd2ff;
    --hgos-border-soft:#ebe7f5;
    --hgos-divider:#eeeaf5;

    /* Layout */
    --hgos-content:1100px;
    --hgos-page-gap:40px;
    --hgos-page-gap-mobile:20px;

    /* Radius */
    --hgos-radius-xs:8px;
    --hgos-radius-sm:12px;
    --hgos-radius-control:16px;
    --hgos-radius:24px;
    --hgos-radius-round:999px;

    /* Shadow */
    --hgos-shadow-sm:0 4px 16px rgba(92,63,170,.06);
    --hgos-shadow:0 12px 40px rgba(92,63,170,.08);
    --hgos-shadow-lg:0 18px 60px rgba(92,63,170,.18);

    /* Desktop Typography */
    --hgos-fs-xs:12px;
    --hgos-fs-sm:13px;
    --hgos-fs-body:15px;
    --hgos-fs-label:14px;
    --hgos-fs-control:15px;
    --hgos-fs-button:14px;
    --hgos-fs-subtitle:17px;
    --hgos-fs-title:20px;
    --hgos-fs-page-title:28px;

    /* Font Weight */
    --hgos-fw-normal:400;
    --hgos-fw-medium:500;
    --hgos-fw-semibold:600;
    --hgos-fw-bold:700;
    --hgos-fw-heavy:800;

    /* Controls */
    --hgos-control-height:52px;
    --hgos-button-height:48px;

    /* Motion */
    --hgos-transition:.18s ease;

    /* Layer */
    --hgos-z-header:1000;
    --hgos-z-dropdown:5000;
    --hgos-z-modal:99999;

    /* Extended semantic palette */
    --hgos-text-soft:#9091a5;
    --hgos-border-accent:#d8c7ff;
    --hgos-primary-tint:#f6f2ff;
    --hgos-lavender-soft:#eee9fb;
    --hgos-danger-accent:#ff5a7c;
    /* Spacing scale */
    --hgos-space-1:4px;
    --hgos-space-1-5:6px;
    --hgos-space-2:8px;
    --hgos-space-2-5:10px;
    --hgos-space-3:12px;
    --hgos-space-4:16px;
    --hgos-space-5:20px;
    --hgos-space-6:24px;
    --hgos-space-8:32px;
}


/* ==========================================================
   2. RESET / DOCUMENT
   ========================================================== */

html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    scroll-behavior:smooth;
}

html,
body{
    margin:0;
    padding:0;
    min-height:100%;
}

body{
    background:var(--hgos-bg);
    color:var(--hgos-text);
    font-family:
        Pretendard,
        "Noto Sans KR",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size:var(--hgos-fs-body);
    font-weight:var(--hgos-fw-normal);
    line-height:1.65;
    letter-spacing:-.01em;
    word-break:keep-all;
    overflow-wrap:break-word;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

img,
svg,
video,
canvas{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{
    margin:0;
    font:inherit;
}

button,
a{
    -webkit-tap-highlight-color:transparent;
}

button{
    cursor:pointer;
}

button:disabled{
    cursor:not-allowed;
}

input,
select,
textarea{
    color:var(--hgos-title);
}

textarea{
    resize:vertical;
}

[hidden]{
    display:none;
}


/* ==========================================================
   3. ACCESSIBILITY / FOCUS
   ========================================================== */

:focus-visible{
    outline:3px solid rgba(116,7,255,.22);
    outline-offset:2px;
}

::selection{
    background:var(--hgos-primary-soft);
    color:var(--hgos-title);
}


/* ==========================================================
   4. PAGE / CONTENT WIDTH
   ========================================================== */

.h-page,
.h-container{
    width:min(
        var(--hgos-content),
        calc(100% - var(--hgos-page-gap))
    );
    margin-inline:auto;
}

.h-page{
    padding-block:24px 48px;
}

.h-section{
    margin-top:var(--hgos-space-6);
}

.h-section:first-child{
    margin-top:0;
}


/* ==========================================================
   5. TYPOGRAPHY
   ========================================================== */

.h-page-title,
.h-title,
.h-subtitle,
.h-section-title{
    margin:0;
    color:var(--hgos-title);
}

.h-page-title{
    font-size:var(--hgos-fs-page-title);
    font-weight:var(--hgos-fw-heavy);
    line-height:1.3;
    letter-spacing:-.035em;
}

.h-title{
    font-size:var(--hgos-fs-title);
    font-weight:var(--hgos-fw-heavy);
    line-height:1.4;
    letter-spacing:-.025em;
}

.h-subtitle,
.h-section-title{
    font-size:var(--hgos-fs-subtitle);
    font-weight:var(--hgos-fw-bold);
    line-height:1.45;
}

.h-body,
.h-description{
    color:var(--hgos-text);
    font-size:var(--hgos-fs-body);
    line-height:1.7;
}

.h-caption,
.h-meta,
.h-help,
.h-label-help,
.h-status{
    color:var(--hgos-muted);
    font-size:var(--hgos-fs-sm);
    line-height:1.6;
}

.h-eyebrow{
    color:var(--hgos-primary);
    font-size:var(--hgos-fs-xs);
    font-weight:var(--hgos-fw-heavy);
    line-height:1.4;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.h-text-primary{color:var(--hgos-primary)!important}
.h-text-success{color:var(--hgos-success)!important}
.h-text-danger{color:var(--hgos-danger)!important}
.h-text-warning{color:var(--hgos-warning)!important}
.h-text-muted{color:var(--hgos-muted)!important}


/* ==========================================================
   6. CARD / PANEL
   ========================================================== */

.h-card{
    background:var(--hgos-bg);
    border:1px solid var(--hgos-border);
    border-radius:var(--hgos-radius);
    box-shadow:var(--hgos-shadow);
}

.h-card-body{
    padding:var(--hgos-space-6);
}

.h-panel{
    padding:var(--hgos-space-5);
    background:var(--hgos-bg-soft);
    border:1px solid var(--hgos-border-soft);
    border-radius:var(--hgos-radius-control);
}

.h-rule{
    width:100%;
    height:1px;
    margin:0;
    border:0;
    background:var(--hgos-divider);
}


/* ==========================================================
   7. FORM
   ========================================================== */

.h-form{
    display:grid;
    gap:18px;
}

.h-form-group{
    min-width:0;
}

.h-label{
    display:block;
    margin:0 0 9px;
    color:var(--hgos-title);
    font-size:var(--hgos-fs-label);
    font-weight:var(--hgos-fw-bold);
    line-height:1.45;
}

.h-label-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:var(--hgos-space-3);
    margin-bottom:9px;
}

.h-label-row .h-label{
    margin:0;
}

.h-label-help{
    text-align:right;
}

.h-input,
.h-select,
.h-textarea{
    width:100%;
    min-width:0;
    min-height:var(--hgos-control-height);
    padding:14px var(--hgos-space-4);
    border:1px solid var(--hgos-border);
    border-radius:var(--hgos-radius-control);
    background:var(--hgos-white);
    color:var(--hgos-title);
    font-size:var(--hgos-fs-control);
    line-height:1.45;
    outline:0;
    transition:
        border-color var(--hgos-transition),
        box-shadow var(--hgos-transition),
        background var(--hgos-transition);
}

.h-textarea{
    min-height:120px;
}

.h-input::placeholder,
.h-textarea::placeholder{
    color:var(--hgos-placeholder);
}

.h-input:hover,
.h-select:hover,
.h-textarea:hover{
    border-color:var(--hgos-primary-2);
}

.h-input:focus,
.h-select:focus,
.h-textarea:focus{
    border-color:var(--hgos-primary);
    box-shadow:0 0 0 4px rgba(116,7,255,.08);
}

.h-input:disabled,
.h-select:disabled,
.h-textarea:disabled,
.h-input[readonly],
.h-textarea[readonly]{
    background:var(--hgos-bg-muted);
    color:var(--hgos-muted);
}

.h-help,
.h-status{
    margin-top:7px;
}

.h-status.is-success{color:var(--hgos-success)}
.h-status.is-danger{color:var(--hgos-danger)}
.h-status.is-warning{color:var(--hgos-warning)}


/* ==========================================================
   8. BUTTON
   ========================================================== */

.h-btn,
.h-btn-primary,
.h-btn-secondary,
.h-btn-danger{
    min-height:var(--hgos-button-height);
    padding:0 var(--hgos-space-4);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid var(--hgos-border);
    border-radius:14px;
    background:var(--hgos-white);
    color:var(--hgos-title);
    font-size:var(--hgos-fs-button);
    font-weight:var(--hgos-fw-bold);
    line-height:1.3;
    text-align:center;
    white-space:nowrap;
    transition:
        border-color var(--hgos-transition),
        background var(--hgos-transition),
        color var(--hgos-transition),
        transform var(--hgos-transition),
        box-shadow var(--hgos-transition);
}

.h-btn:hover,
.h-btn-secondary:hover{
    border-color:var(--hgos-primary-2);
}

.h-btn:active,
.h-btn-primary:active,
.h-btn-secondary:active,
.h-btn-danger:active{
    transform:translateY(1px);
}

.h-btn.is-active,
.h-btn-secondary{
    border-color:var(--hgos-primary);
    background:var(--hgos-primary-soft);
    color:var(--hgos-primary);
}

.h-btn-primary{
    border-color:transparent;
    background:linear-gradient(
        135deg,
        var(--hgos-primary),
        var(--hgos-primary-2)
    );
    color:var(--hgos-white);
    box-shadow:0 9px 24px rgba(116,7,255,.18);
}

.h-btn-primary:hover{
    box-shadow:0 11px 28px rgba(116,7,255,.24);
}

.h-btn-danger{
    border-color:rgba(255,59,48,.25);
    background:var(--hgos-danger-soft);
    color:var(--hgos-danger);
}

.h-btn-block{
    width:100%;
}

.h-btn-sm{
    min-height:38px;
    padding-inline:12px;
    font-size:var(--hgos-fs-sm);
}

.h-btn:disabled,
.h-btn-primary:disabled,
.h-btn-secondary:disabled,
.h-btn-danger:disabled{
    opacity:.45;
    transform:none;
    box-shadow:none;
}


/* ==========================================================
   9. BADGE / CHIP
   ========================================================== */

.h-badge,
.h-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:var(--hgos-space-1) var(--hgos-space-2-5);
    border-radius:var(--hgos-radius-round);
    background:var(--hgos-primary-soft);
    color:var(--hgos-primary);
    font-size:var(--hgos-fs-xs);
    font-weight:var(--hgos-fw-bold);
    line-height:1.3;
}

.h-badge.is-success,
.h-chip.is-success{
    background:var(--hgos-success-soft);
    color:var(--hgos-success);
}

.h-badge.is-danger,
.h-chip.is-danger{
    background:var(--hgos-danger-soft);
    color:var(--hgos-danger);
}

.h-badge.is-warning,
.h-chip.is-warning{
    background:var(--hgos-warning-soft);
    color:var(--hgos-warning);
}


/* ==========================================================
   10. GRID / FLEX
   ========================================================== */

.h-grid{
    display:grid;
    gap:var(--hgos-space-4);
}

.h-grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.h-grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.h-flex{
    display:flex;
    align-items:center;
    gap:var(--hgos-space-2-5);
}

.h-flex-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--hgos-space-3);
}


/* ==========================================================
   11. EMPTY / LOADING / MESSAGE
   ========================================================== */

.h-loading,
.h-empty{
    padding:var(--hgos-space-8) var(--hgos-space-5);
    color:var(--hgos-muted);
    font-size:var(--hgos-fs-body);
    line-height:1.7;
    text-align:center;
}

.h-message{
    padding:14px var(--hgos-space-4);
    border:1px solid var(--hgos-border-soft);
    border-radius:var(--hgos-radius-sm);
    background:var(--hgos-bg-soft);
    color:var(--hgos-text);
    font-size:var(--hgos-fs-sm);
    line-height:1.65;
}

.h-message.is-success{
    border-color:rgba(55,201,120,.22);
    background:var(--hgos-success-soft);
}

.h-message.is-danger{
    border-color:rgba(255,59,48,.20);
    background:var(--hgos-danger-soft);
}

.h-message.is-warning{
    border-color:rgba(255,152,0,.22);
    background:var(--hgos-warning-soft);
}


/* ==========================================================
   12. MODAL
   ========================================================== */

.h-modal{
    position:fixed;
    inset:0;
    z-index:var(--hgos-z-modal);
    display:none;
    align-items:center;
    justify-content:center;
    padding:var(--hgos-space-5);
    background:rgba(25,25,35,.45);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
}

.h-modal.is-open{
    display:flex;
}

.h-modal-backdrop{
    position:absolute;
    inset:0;
}

.h-modal-dialog{
    position:relative;
    width:100%;
    max-width:520px;
    max-height:calc(100dvh - 40px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--hgos-border-soft);
    border-radius:var(--hgos-radius);
    background:var(--hgos-white);
    box-shadow:var(--hgos-shadow-lg);
}

.h-modal-dialog.is-wide{
    max-width:720px;
}

.h-modal-header{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--hgos-space-4);
    padding:21px var(--hgos-space-6);
    border-bottom:1px solid var(--hgos-divider);
}

.h-modal-heading{
    min-width:0;
}

.h-modal-caption{
    color:var(--hgos-primary);
    font-size:var(--hgos-fs-xs);
    font-weight:var(--hgos-fw-heavy);
    line-height:1.4;
    letter-spacing:.06em;
}

.h-modal-title{
    margin:3px 0 0;
    color:var(--hgos-title);
    font-size:var(--hgos-fs-title);
    font-weight:var(--hgos-fw-heavy);
    line-height:1.4;
}

.h-modal-close{
    flex:0 0 auto;
    min-height:40px;
    padding:0 var(--hgos-space-3);
    border:1px solid var(--hgos-border);
    border-radius:var(--hgos-radius-sm);
    background:var(--hgos-white);
    color:var(--hgos-text);
    font-size:var(--hgos-fs-button);
    font-weight:var(--hgos-fw-bold);
}

.h-modal-body{
    min-height:0;
    padding:var(--hgos-space-6);
    overflow-y:auto;
    overscroll-behavior:contain;
}

.h-modal-message{
    margin:0 0 var(--hgos-space-4);
    color:var(--hgos-text);
    font-size:var(--hgos-fs-body);
    line-height:1.7;
}

.h-modal-footer{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:var(--hgos-space-2-5);
    padding:15px var(--hgos-space-6) 19px;
    border-top:1px solid var(--hgos-divider);
    background:var(--hgos-white);
}


/* ==========================================================
   13. TABLE
   ========================================================== */

.h-table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.h-table{
    width:100%;
    border-collapse:collapse;
    color:var(--hgos-text);
    font-size:var(--hgos-fs-sm);
}

.h-table th,
.h-table td{
    padding:13px var(--hgos-space-3);
    border-bottom:1px solid var(--hgos-divider);
    text-align:left;
    vertical-align:middle;
}

.h-table th{
    color:var(--hgos-title);
    font-weight:var(--hgos-fw-bold);
    background:var(--hgos-bg-soft);
}


/* ==========================================================
   14. UTILITIES
   ========================================================== */

.h-hidden{display:none}
.h-w-full{width:100%!important}
.h-text-center{text-align:center!important}
.h-text-left{text-align:left!important}
.h-text-right{text-align:right!important}

.h-mt-0{margin-top:0!important}
.h-mt-8{margin-top:var(--hgos-space-2)!important}
.h-mt-12{margin-top:var(--hgos-space-3)!important}
.h-mt-16{margin-top:var(--hgos-space-4)!important}
.h-mt-20{margin-top:var(--hgos-space-5)!important}
.h-mt-24{margin-top:var(--hgos-space-6)!important}

.h-mb-0{margin-bottom:0!important}
.h-mb-8{margin-bottom:var(--hgos-space-2)!important}
.h-mb-12{margin-bottom:var(--hgos-space-3)!important}
.h-mb-16{margin-bottom:var(--hgos-space-4)!important}
.h-mb-20{margin-bottom:var(--hgos-space-5)!important}
.h-mb-24{margin-bottom:var(--hgos-space-6)!important}


/* ==========================================================
   15. MOBILE GLOBAL SYSTEM
   이 영역의 토큰을 바꾸면 모든 HGOS 페이지가 함께 변경된다.
   ========================================================== */

@media (max-width:768px){

    :root{
        --hgos-page-gap:var(--hgos-space-5);

        /* Mobile Typography */
        --hgos-fs-xs:14px;
        --hgos-fs-sm:15px;
        --hgos-fs-body:17px;
        --hgos-fs-label:17px;
        --hgos-fs-control:17px;
        --hgos-fs-button:17px;
        --hgos-fs-subtitle:19px;
        --hgos-fs-title:22px;
        --hgos-fs-page-title:26px;

        --hgos-control-height:56px;
        --hgos-button-height:var(--hgos-control-height);

        --hgos-radius:20px;
    }

    body{
        font-size:var(--hgos-fs-body);
        line-height:1.7;
    }

    .h-page,
    .h-container{
        width:calc(100% - var(--hgos-page-gap-mobile));
    }

    .h-page{
        padding-block:16px 36px;
    }

    .h-section{
        margin-top:var(--hgos-space-5);
    }

    .h-card{
        border-radius:var(--hgos-radius);
    }

    .h-card-body{
        padding:var(--hgos-space-5);
    }

    .h-panel{
        padding:18px;
    }

    .h-label-row{
        align-items:flex-start;
        flex-direction:column;
        gap:var(--hgos-space-1);
    }

    .h-label-help{
        width:100%;
        text-align:left;
    }

    .h-input,
    .h-select,
    .h-textarea{
        padding:15px var(--hgos-space-4);
    }

    .h-btn,
    .h-btn-primary,
    .h-btn-secondary,
    .h-btn-danger{
        min-height:var(--hgos-button-height);
    }

    .h-grid-2,
    .h-grid-3{
        grid-template-columns:1fr;
    }

    .h-modal{
        padding:var(--hgos-space-2-5);
    }

    .h-modal-dialog,
    .h-modal-dialog.is-wide{
        max-width:100%;
        max-height:calc(100dvh - 20px);
        border-radius:20px;
    }

    .h-modal-header{
        padding:18px var(--hgos-space-5);
    }

    .h-modal-close{
        min-height:44px;
        font-size:var(--hgos-fs-button);
    }

    .h-modal-body{
        padding:var(--hgos-space-5);
    }

    .h-modal-footer{
        padding:14px var(--hgos-space-5) var(--hgos-space-4);
    }

    .h-table{
        font-size:var(--hgos-fs-sm);
    }

    .h-table th,
    .h-table td{
        padding:var(--hgos-space-3) var(--hgos-space-2-5);
    }
}


/* ==========================================================
   16. SMALL MOBILE
   크기를 다시 작게 만들지 않는다.
   ========================================================== */

@media (max-width:420px){

    :root{
        --hgos-fs-xs:14px;
        --hgos-fs-sm:15px;
        --hgos-fs-body:17px;
        --hgos-fs-label:17px;
        --hgos-fs-control:17px;
        --hgos-fs-button:17px;
        --hgos-fs-subtitle:19px;
        --hgos-fs-title:22px;
        --hgos-fs-page-title:25px;
    }

    .h-card-body{
        padding:18px;
    }

    .h-modal-header,
    .h-modal-body{
        padding-left:18px;
        padding-right:18px;
    }

    .h-modal-footer{
        padding-left:18px;
        padding-right:18px;
        flex-wrap:wrap;
    }
}

/* ==========================================================
   18. COMMON HEADER
   전 페이지 공용. 별도 header.css 불필요.
   ========================================================== */

/* ==========================================================
   HGOS COMMON HEADER
   Source: attached frontend 2026-09-20
   Header-related CSS/HTML/JS only
   ========================================================== */

#hgosHeaderWidget{
    width:min(var(--hgos-content),calc(100% - var(--hgos-page-gap)));
    margin-inline:auto;
    color:var(--hgos-text);
    font-family:inherit;
    box-sizing:border-box;
}

#hgosHeaderWidget *,
#hgosHeaderWidget *::before,
#hgosHeaderWidget *::after {
    box-sizing: border-box;
}

#hgosHeaderWidget button,
#hgosHeaderWidget a {
    font: inherit;
}

#hgosHeaderWidget button {
    border: 0;
    cursor: pointer;
}

#hgosHeaderWidget .hg-brand-wrap {
    display: flex;
    align-items: center;
    margin: 0 0 var(--hgos-space-4);
    padding: 0 var(--hgos-space-2);
}

#hgosHeaderWidget .hg-brand {
    display: inline-flex;
    align-items: baseline;
    gap: var(--hgos-space-1);
    color: var(--hgos-title);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

#hgosHeaderWidget .hg-brand-name {
    font-size: 25px;
    font-weight: var(--hgos-fw-heavy);
    letter-spacing: -.5px;
}

#hgosHeaderWidget .hg-brand-gps {
    color: var(--hgos-primary);
    font-size: 25px;
    font-weight: 900;
    letter-spacing: .2px;
}

#hgosHeaderWidget .hg-card {
    width: 100%;
    padding: var(--hgos-space-8);
    overflow: hidden;
    border: 1px solid var(--hgos-border);
    border-radius: var(--hgos-radius);
    background: linear-gradient(145deg, var(--hgos-white) 0%, #faf7ff 100%);
    box-shadow: var(--hgos-shadow);
}

#hgosHeaderWidget .hg-profile-top {
    display: flex;
    align-items: center;
    gap: var(--hgos-space-4);
}

#hgosHeaderWidget .hg-avatar {
    flex: 0 0 48px;
    width: 48px;
    height: var(--hgos-button-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--hgos-primary), #914cff);
    color: var(--hgos-white);
    font-size: 19px;
    font-weight: var(--hgos-fw-heavy);
    line-height: 1;
    transition: transform .18s ease, box-shadow .18s ease;
}

#hgosHeaderWidget .hg-avatar:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(116, 7, 255, .20);
}

#hgosHeaderWidget .hg-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

#hgosHeaderWidget .hg-profile-main {
    flex: 1;
    min-width: 0;
}

#hgosHeaderWidget .hg-name-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--hgos-space-1) var(--hgos-space-2);
}

#hgosHeaderWidget .hg-name {
    color: var(--hgos-title);
    font-size: var(--hgos-fs-body);
    font-weight: var(--hgos-fw-bold);
    line-height: 1.4;
}

#hgosHeaderWidget .hg-meta {
    color: #625b78;
    font-size: var(--hgos-fs-sm);
    font-weight: var(--hgos-fw-semibold);
    line-height: 1.4;
}

#hgosHeaderWidget .hg-info-btn {
    min-height: 24px;
    padding: 0 7px;
    border-radius: var(--hgos-radius-round);
    background: transparent;
    color: var(--hgos-primary);
    font-size: var(--hgos-fs-xs);
    font-weight: var(--hgos-fw-heavy);
    line-height: 1;
    white-space: nowrap;
}

#hgosHeaderWidget .hg-info-btn:hover {
    background: var(--hgos-primary-soft);
}

#hgosHeaderWidget .hg-assets {
    display: flex;
    align-items: center;
    gap: var(--hgos-space-1-5);
    margin-top: 5px;
    color: #625b78;
    font-size: var(--hgos-fs-sm);
    font-weight: var(--hgos-fw-semibold);
}

#hgosHeaderWidget .hg-asset-divider {
    color: #b7b1bf;
    font-weight: var(--hgos-fw-normal);
}

#hgosHeaderWidget .hg-charge-btn {
    min-height: 24px;
    padding: 0 var(--hgos-space-2);
    border-radius: var(--hgos-radius-round);
    background: var(--hgos-success);
    color: var(--hgos-white);
    font-size: var(--hgos-fs-xs);
    font-weight: var(--hgos-fw-semibold);
    line-height: 1;
    white-space: nowrap;
}

#hgosHeaderWidget .hg-charge-btn.is-danger { background: var(--hgos-danger); }
#hgosHeaderWidget .hg-charge-btn.is-warning { background: var(--hgos-warning); }
#hgosHeaderWidget .hg-charge-btn.is-success { background: var(--hgos-success); }

#hgosHeaderWidget .hg-divider {
    width: 100%;
    height: 1px;
    margin: var(--hgos-space-5) 0 var(--hgos-space-4);
    background: var(--hgos-border);
}

#hgosHeaderWidget .hg-session-current {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    color: #625b78;
    font-size: var(--hgos-fs-sm);
    font-weight: var(--hgos-fw-medium);
}

#hgosHeaderWidget .hg-guide-btn {
    padding: 0;
    background: transparent;
    color: var(--hgos-primary);
    font-size: var(--hgos-fs-sm);
    font-weight: var(--hgos-fw-bold);
    line-height: 1.4;
}

#hgosHeaderWidget .hg-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--hgos-space-2-5);
    margin-top: 18px;
}

#hgosHeaderWidget .hg-nav-btn {
    width: 100%;
    height: 56px;
    padding: 0 var(--hgos-space-2-5);
    border: 1px solid var(--hgos-border);
    border-radius: var(--hgos-radius-control);
    background: var(--hgos-primary-soft);
    color: var(--hgos-primary);
    font-size: var(--hgos-fs-button);
    font-weight: var(--hgos-fw-heavy);
    line-height: 1;
    white-space: nowrap;
    transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

#hgosHeaderWidget .hg-nav-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(116, 7, 255, .30);
}

#hgosHeaderWidget .hg-nav-btn.is-active {
    border-color: var(--hgos-primary);
    background: var(--hgos-primary);
    color: var(--hgos-white);
    box-shadow: 0 5px 15px rgba(116, 7, 255, .18);
}

#hgosHeaderWidget .hg-message {
    margin-top: 9px;
    color: var(--hgos-muted);
    font-size: var(--hgos-fs-sm);
    line-height: 1.55;
}

/* Common header modal */
#hgosHeaderModal {
    position: fixed;
    inset: 0;
    z-index: var(--hgos-z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--hgos-space-5);
    background: rgba(25, 25, 35, .45);
    backdrop-filter: blur(6px);
}

#hgosHeaderModal.is-open { display: flex; }

#hgosHeaderModal .hg-modal-dialog {
    width: min(640px, 100%);
    max-height: calc(100dvh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--hgos-radius);
    background: var(--hgos-white);
    box-shadow: var(--hgos-shadow-lg);
    font-family: Pretendard, "Noto Sans KR", sans-serif;
}

#hgosHeaderModal .hg-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hgos-space-4);
    padding: var(--hgos-space-6) 28px;
    border-bottom: 1px solid var(--hgos-border);
}

#hgosHeaderModal .hg-modal-title {
    margin: 0;
    color: var(--hgos-title);
    font-size: var(--hgos-fs-title);
    font-weight: var(--hgos-fw-heavy);
}

#hgosHeaderModal .hg-modal-close {
    height: var(--hgos-button-height);
    padding: 0 var(--hgos-space-5);
    border: 0;
    border-radius: var(--hgos-radius-control);
    background: var(--hgos-primary-soft);
    color: var(--hgos-primary);
    font-size: var(--hgos-fs-label);
    font-weight: var(--hgos-fw-heavy);
    cursor: pointer;
}

#hgosHeaderModal .hg-modal-body {
    min-height: 0;
    padding: 28px;
    overflow-y: auto;
}

#hgosHeaderModal .hg-modal-foot {
    display: flex;
    justify-content: flex-end;
    padding: var(--hgos-space-5) 28px;
    border-top: 1px solid var(--hgos-border);
}

#hgosHeaderModal .hg-confirm {
    height: var(--hgos-button-height);
    padding: 0 var(--hgos-space-6);
    border: 0;
    border-radius: var(--hgos-radius-control);
    background: linear-gradient(135deg, var(--hgos-primary), var(--hgos-primary-2));
    color: var(--hgos-white);
    font-size: var(--hgos-fs-button);
    font-weight: var(--hgos-fw-heavy);
    cursor: pointer;
}

#hgosHeaderModal .hg-guide-list {
    display: flex;
    flex-direction: column;
    gap: var(--hgos-space-3);
}

#hgosHeaderModal .hg-guide-card {
    padding: 18px;
    border: 1px solid var(--hgos-border-accent);
    border-radius: 15px;
    background: var(--hgos-primary-tint);
}

#hgosHeaderModal .hg-guide-title {
    margin-bottom: 9px;
    color: var(--hgos-primary);
    font-size: 16px;
    font-weight: var(--hgos-fw-heavy);
}

#hgosHeaderModal .hg-guide-desc {
    color: var(--hgos-text);
    font-size: var(--hgos-fs-label);
    line-height: 1.7;
    word-break: keep-all;
}

#hgosHeaderModal .hg-grade-current {
    padding: var(--hgos-space-2) 0 15px;
    text-align: center;
}

#hgosHeaderModal .hg-grade-label {
    color: var(--hgos-text-soft);
    font-size: var(--hgos-fs-xs);
    font-weight: var(--hgos-fw-semibold);
}

#hgosHeaderModal .hg-grade-name {
    margin-top: 9px;
    color: var(--hgos-title);
    font-size: 30px;
    font-weight: var(--hgos-fw-heavy);
}

#hgosHeaderModal .hg-grade-range {
    margin-top: var(--hgos-space-2);
    color: var(--hgos-text-soft);
    font-size: var(--hgos-fs-sm);
}

#hgosHeaderModal .hg-grade-gv {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--hgos-space-2);
    padding: 13px 0 27px;
    border-top: 1px solid var(--hgos-border);
}

#hgosHeaderModal .hg-grade-gv span {
    color: var(--hgos-text-soft);
    font-size: var(--hgos-fs-xs);
    font-weight: var(--hgos-fw-semibold);
}

#hgosHeaderModal .hg-grade-gv strong {
    color: var(--hgos-primary);
    font-size: var(--hgos-fs-subtitle);
}

#hgosHeaderModal .hg-grade-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hgos-space-3);
}

#hgosHeaderModal .hg-grade-card {
    padding: 19px var(--hgos-space-3);
    border-radius: var(--hgos-radius-control);
    background: var(--hgos-primary-soft);
    text-align: center;
}

#hgosHeaderModal .hg-grade-card-label {
    color: var(--hgos-text-soft);
    font-size: var(--hgos-fs-xs);
    font-weight: var(--hgos-fw-semibold);
}

#hgosHeaderModal .hg-grade-card-value {
    margin-top: var(--hgos-space-2);
    color: var(--hgos-title);
    font-size: 19px;
    font-weight: var(--hgos-fw-heavy);
}

#hgosHeaderModal .hg-grade-card-value.is-primary {
    color: var(--hgos-primary);
    font-size: var(--hgos-fs-title);
}

#hgosHeaderModal .hg-progress {
    margin-top: var(--hgos-space-6);
}

#hgosHeaderModal .hg-progress-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--hgos-space-2);
    color: var(--hgos-text-soft);
    font-size: var(--hgos-fs-xs);
}

#hgosHeaderModal .hg-progress-head strong { color: var(--hgos-primary); }

#hgosHeaderModal .hg-progress-track {
    height: 10px;
    overflow: hidden;
    border-radius: var(--hgos-radius-round);
    background: #ece8fb;
}

#hgosHeaderModal .hg-progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--hgos-primary), var(--hgos-primary-2));
    transition: width .3s ease;
}

#hgosHeaderModal .hg-profile-summary {
    display: grid;
    gap: var(--hgos-space-2-5);
}

#hgosHeaderModal .hg-profile-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--hgos-lavender-soft);
}

#hgosHeaderModal .hg-profile-row:last-child { border-bottom: 0; }
#hgosHeaderModal .hg-profile-key { color: var(--hgos-text-soft); font-size: var(--hgos-fs-sm); }
#hgosHeaderModal .hg-profile-value { color: var(--hgos-title); font-size: var(--hgos-fs-label); font-weight: var(--hgos-fw-bold); word-break: break-all; }

@media (max-width:768px) {
    #hgosHeaderWidget { width:calc(100% - var(--hgos-page-gap-mobile)); }

    #hgosHeaderWidget .hg-brand-wrap {
        margin-bottom: 13px;
        padding: 0 var(--hgos-space-1);
    }

    #hgosHeaderWidget .hg-brand-name,
    #hgosHeaderWidget .hg-brand-gps {
        font-size: var(--hgos-fs-body);
    }

    #hgosHeaderWidget .hg-card {
        padding: var(--hgos-space-5);
        border-radius: 18px;
    }

    #hgosHeaderWidget .hg-profile-top { gap: 11px; }

    #hgosHeaderWidget .hg-avatar {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        font-size: 18px;
    }

    #hgosHeaderWidget .hg-divider { margin: 14px 0 var(--hgos-space-3); }

    #hgosHeaderWidget .hg-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--hgos-space-2-5);
        margin-top: var(--hgos-space-4);
    }

    #hgosHeaderModal {
        padding: var(--hgos-space-3);
    }

    #hgosHeaderModal .hg-modal-dialog {
        max-height: calc(100dvh - 24px);
        border-radius: 20px;
    }

    #hgosHeaderModal .hg-modal-head {
        padding: 18px var(--hgos-space-5);
    }

    #hgosHeaderModal .hg-modal-title {
        font-size: var(--hgos-fs-title);
    }

    #hgosHeaderModal .hg-modal-close {
        height: 38px;
        padding: 0 14px;
        border-radius: var(--hgos-radius-sm);
        font-size: var(--hgos-fs-sm);
    }

    #hgosHeaderModal .hg-modal-body {
        padding: var(--hgos-space-5);
    }

    #hgosHeaderModal .hg-modal-foot {
        padding: var(--hgos-space-4) var(--hgos-space-5);
    }
}

@media (max-width:420px) {
    #hgosHeaderWidget .hg-card { padding: 17px; }
    #hgosHeaderWidget .hg-profile-top { gap: 9px; }

    #hgosHeaderWidget .hg-nav { gap: var(--hgos-space-2); }

}

/* Header top navigation */
#hgosHeaderWidget .hg-brand-wrap {
    justify-content: space-between;
    gap: var(--hgos-space-4);
    position: relative;
}

#hgosHeaderWidget .hg-global-menu {
    position: relative;
    margin-left: auto;
}

#hgosHeaderWidget .hg-menu-trigger {
    width: 42px;
    height: 42px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    border: 1px solid var(--hgos-border);
    border-radius: var(--hgos-radius-sm);
    background: var(--hgos-white);
    color: var(--hgos-title);
}

#hgosHeaderWidget .hg-menu-trigger span {
    width: 19px;
    height: 2px;
    border-radius: var(--hgos-radius-round);
    background: currentColor;
}

#hgosHeaderWidget .hg-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: var(--hgos-z-dropdown);
    width: 220px;
    padding: var(--hgos-space-2);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-5px);
    pointer-events: none;
    border: 1px solid var(--hgos-border);
    border-radius: var(--hgos-radius-control);
    background: var(--hgos-white);
    box-shadow: 0 16px 42px rgba(52, 35, 90, .16);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

#hgosHeaderWidget .hg-global-menu:hover .hg-menu-panel,
#hgosHeaderWidget .hg-global-menu:focus-within .hg-menu-panel,
#hgosHeaderWidget .hg-global-menu.is-open .hg-menu-panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#hgosHeaderWidget .hg-menu-link {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 13px;
    border-radius: 10px;
    color: var(--hgos-title);
    font-size: var(--hgos-fs-body);
    font-weight: var(--hgos-fw-bold);
    text-decoration: none;
    white-space: nowrap;
}

#hgosHeaderWidget .hg-menu-link:hover,
#hgosHeaderWidget .hg-menu-link:focus {
    outline: none;
    background: var(--hgos-primary-soft);
    color: var(--hgos-primary);
}

#hgosHeaderWidget .hg-menu-separator {
    height: 1px;
    margin: var(--hgos-space-1-5) var(--hgos-space-2);
    background: var(--hgos-lavender-soft);
}

/* Profile / genome */
#hgosHeaderModal .hg-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hgos-space-2-5);
    margin-top: 18px;
}

#hgosHeaderModal .hg-action-btn {
    min-height: 44px;
    padding: 0 var(--hgos-space-4);
    border: 1px solid var(--hgos-border-accent);
    border-radius: var(--hgos-radius-sm);
    background: var(--hgos-primary-tint);
    color: var(--hgos-primary);
    font-weight: var(--hgos-fw-heavy);
    cursor: pointer;
}

#hgosHeaderModal .hg-genome-head {
    margin-bottom: var(--hgos-space-5);
    padding: 18px;
    border: 1px solid var(--hgos-border-accent);
    border-radius: 15px;
    background: var(--hgos-primary-tint);
}

#hgosHeaderModal .hg-genome-badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: var(--hgos-radius-round);
    background: var(--hgos-primary);
    color: var(--hgos-white);
    font-size: 11px;
    font-weight: var(--hgos-fw-heavy);
}

#hgosHeaderModal .hg-genome-desc {
    margin-top: var(--hgos-space-2-5);
    color: var(--hgos-text);
    font-size: var(--hgos-fs-label);
    line-height: 1.65;
}

#hgosHeaderModal .hg-genome-progress {
    margin-top: var(--hgos-space-2-5);
    color: var(--hgos-primary);
    font-size: var(--hgos-fs-sm);
    font-weight: var(--hgos-fw-heavy);
}

#hgosHeaderModal .hg-question {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--hgos-lavender-soft);
}

#hgosHeaderModal .hg-question:last-child {
    border-bottom: 0;
}

#hgosHeaderModal .hg-question-title {
    margin-bottom: var(--hgos-space-2-5);
    color: var(--hgos-title);
    font-size: var(--hgos-fs-body);
    font-weight: var(--hgos-fw-heavy);
    line-height: 1.55;
}

#hgosHeaderModal .hg-choice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: var(--hgos-space-2) 0;
    padding: var(--hgos-space-2-5) var(--hgos-space-3);
    border-radius: 10px;
    background: var(--hgos-primary-soft-2);
    color: var(--hgos-text);
    font-size: var(--hgos-fs-body);
    line-height: 1.5;
    cursor: pointer;
}

#hgosHeaderModal .hg-choice input {
    margin-top: 3px;
}

#hgosHeaderModal .hg-genome-submit {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--hgos-radius-sm);
    background: var(--hgos-primary);
    color: var(--hgos-white);
    font-weight: var(--hgos-fw-heavy);
    cursor: pointer;
}

#hgosHeaderModal .hg-genome-submit:disabled {
    opacity: .45;
    cursor: not-allowed;
}

#hgosHeaderModal .hg-loading {
    padding: var(--hgos-space-8) 0;
    color: var(--hgos-text-soft);
    text-align: center;
}

@media (max-width:768px) {
    #hgosHeaderWidget .hg-menu-panel {
        width: min(240px, calc(100vw - 32px));
    }
}


/* Full member profile restored from Growth Asset frontend */
#hgosHeaderModal .hg-profile-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
#hgosHeaderModal .hg-form-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
#hgosHeaderModal .hg-label {
    color: var(--hgos-title);
    font-size: var(--hgos-fs-label);
    font-weight: var(--hgos-fw-bold);
}
#hgosHeaderModal .hg-input,
#hgosHeaderModal .hg-select {
    width: 100%;
    min-height: 50px;
    padding: var(--hgos-space-3) var(--hgos-space-4);
    border: 1px solid var(--hgos-border);
    border-radius: 14px;
    background: var(--hgos-white);
    color: var(--hgos-title);
    font: inherit;
    box-sizing: border-box;
}
#hgosHeaderModal .hg-input:focus,
#hgosHeaderModal .hg-select:focus {
    outline: none;
    border-color: var(--hgos-primary);
    box-shadow: 0 0 0 3px rgba(116,7,255,.08);
}
#hgosHeaderModal .hg-input[readonly] {
    background: var(--hgos-bg-soft);
}
#hgosHeaderModal .hg-help {
    color: var(--hgos-text-soft);
    font-size: var(--hgos-fs-sm);
    line-height: 1.55;
}
#hgosHeaderModal .hg-section-title {
    color: var(--hgos-title);
    font-size: var(--hgos-fs-subtitle);
    font-weight: var(--hgos-fw-heavy);
}
#hgosHeaderModal .hg-section-caption {
    margin-top: var(--hgos-space-1);
    color: var(--hgos-text-soft);
    font-size: var(--hgos-fs-sm);
}
#hgosHeaderModal .hg-form-divider {
    height: 1px;
    background: var(--hgos-border);
    margin: 2px 0;
}
#hgosHeaderModal .hg-calendar-options {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 38px;
}
#hgosHeaderModal .hg-calendar-option {
    display: inline-flex;
    align-items: center;
    gap: var(--hgos-space-1-5);
    color: var(--hgos-title);
    font-size: var(--hgos-fs-label);
}
#hgosHeaderModal .hg-calendar-option input {
    accent-color: var(--hgos-primary);
}
#hgosHeaderModal .hg-referral-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hgos-space-2-5);
}
#hgosHeaderModal .hg-copy-btn {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid var(--hgos-border);
    border-radius: 10px;
    background: var(--hgos-primary-soft);
    color: var(--hgos-primary);
    font-size: var(--hgos-fs-xs);
    font-weight: var(--hgos-fw-heavy);
    cursor: pointer;
}
#hgosHeaderModal .hg-copy-btn.is-copied {
    border-color: var(--hgos-success);
    background: var(--hgos-success);
    color: var(--hgos-white);
}
#hgosHeaderModal .hg-team-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--hgos-space-2-5);
}
#hgosHeaderModal .hg-team-card {
    padding: 14px 15px;
    border: 1px solid var(--hgos-border);
    border-radius: 14px;
    background: var(--hgos-primary-soft);
}
#hgosHeaderModal .hg-team-position {
    margin-bottom: var(--hgos-space-1-5);
    color: var(--hgos-primary);
    font-size: var(--hgos-fs-xs);
    font-weight: var(--hgos-fw-heavy);
}
#hgosHeaderModal .hg-team-name {
    color: var(--hgos-title);
    font-size: var(--hgos-fs-body);
    font-weight: var(--hgos-fw-heavy);
}
#hgosHeaderModal .hg-team-code {
    margin-top: 3px;
    color: var(--hgos-text-soft);
    font-size: var(--hgos-fs-xs);
}
#hgosHeaderModal .hg-modal-foot.is-profile {
    justify-content: space-between;
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--hgos-space-3);
    padding: var(--hgos-space-4) 28px var(--hgos-space-5);
    background: var(--hgos-white);
}
#hgosHeaderModal .hg-profile-foot-left,
#hgosHeaderModal .hg-profile-foot-right {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}
#hgosHeaderModal .hg-foot-btn {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 13px;
    font-weight: var(--hgos-fw-heavy);
    cursor: pointer;
    border: 1px solid transparent;
    font-size: var(--hgos-fs-label);
    line-height: 1;
    box-shadow: none;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
#hgosHeaderModal .hg-foot-btn.is-danger {
    background: var(--hgos-danger-accent);
    color: var(--hgos-white);
    border-color: var(--hgos-danger-accent);
}
#hgosHeaderModal .hg-foot-btn.is-light {
    background: var(--hgos-primary-soft);
    color: var(--hgos-primary);
    border-color: var(--hgos-border);
}
#hgosHeaderModal .hg-foot-btn.is-outline {
    background: var(--hgos-white);
    color: var(--hgos-title);
    border: 1px solid var(--hgos-border);
    border-color: var(--hgos-border);
}
#hgosHeaderModal .hg-foot-btn.is-primary {
    background: linear-gradient(135deg, var(--hgos-primary), var(--hgos-primary-2));
    color: var(--hgos-white);
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(116, 7, 255, .16);
}
#hgosHeaderModal .hg-foot-btn:disabled { opacity:.5; cursor:not-allowed; }

@media (max-width:768px) {
    #hgosHeaderModal .hg-team-list { grid-template-columns: 1fr 1fr; }
    #hgosHeaderModal .hg-modal-foot.is-profile {
        gap: var(--hgos-space-2);
        padding: var(--hgos-space-3);
    }
    #hgosHeaderModal .hg-profile-foot-left,
    #hgosHeaderModal .hg-profile-foot-right {
        display: contents;
    }
    #hgosHeaderModal .hg-foot-btn {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 11px;
        font-size: var(--hgos-fs-xs);
        white-space: nowrap;
    }
}


/* ==========================================================
   HGOS COMMON HEADER FINAL RULES
   - 공통 UI 토큰 연동
   - 모바일 가독성 1단계 확대
   - 내정보 모달 하단 4버튼 정렬
   ========================================================== */

#hgosHeaderWidget .hg-menu-button {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}


#hgosHeaderModal .hg-profile-foot-left {
    display: flex;
}

#hgosHeaderModal .hg-profile-foot-right {
    display: grid;
    grid-template-columns: repeat(3, minmax(112px, auto));
    justify-content: end;
    gap: var(--hgos-space-2-5);
}


#hgosHeaderModal .hg-foot-btn:hover {
    transform: translateY(-1px);
}


@media (max-width:768px) {
    #hgosHeaderWidget {
        width: calc(100% - 20px);
    }

    #hgosHeaderWidget .hg-brand-name,
    #hgosHeaderWidget .hg-brand-gps {
        font-size: 25px;
    }

    #hgosHeaderWidget .hg-card {
        padding: 21px;
    }

    #hgosHeaderWidget .hg-avatar {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        font-size: 19px;
    }

    #hgosHeaderWidget .hg-menu-panel {
        font-size: var(--hgos-fs-body);
    }

    #hgosHeaderWidget .hg-menu-link {
        min-height: 44px;
        font-size: var(--hgos-fs-body);
    }

    #hgosHeaderModal .hg-modal-title { font-size: 22px; }
    #hgosHeaderModal .hg-modal-close { font-size: var(--hgos-fs-body); }
    #hgosHeaderModal .hg-profile-key { font-size: var(--hgos-fs-body); }
    #hgosHeaderModal .hg-profile-value { font-size: 16px; }
    #hgosHeaderModal .hg-section-title { font-size: 18px; }
    #hgosHeaderModal .hg-section-caption { font-size: var(--hgos-fs-label); line-height: 1.65; }
    #hgosHeaderModal label { font-size: var(--hgos-fs-body); }
    #hgosHeaderModal input,
    #hgosHeaderModal select,
    #hgosHeaderModal textarea { font-size: 16px; }

    #hgosHeaderModal .hg-modal-foot.is-profile {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 13px var(--hgos-space-4) var(--hgos-space-4);
    }

    #hgosHeaderModal .hg-profile-foot-left,
    #hgosHeaderModal .hg-profile-foot-right {
        display: grid;
        width: 100%;
    }

    #hgosHeaderModal .hg-profile-foot-left {
        grid-template-columns: 1fr;
    }

    #hgosHeaderModal .hg-profile-foot-right {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--hgos-space-2);
    }

    #hgosHeaderModal .hg-foot-btn {
        width: 100%;
        min-height: var(--hgos-button-height);
        padding: 0 var(--hgos-space-2-5);
        font-size: var(--hgos-fs-label);
    }
}

@media (max-width:420px) {
    #hgosHeaderWidget .hg-card { padding: 19px; }

    #hgosHeaderModal .hg-modal-body { padding: 22px var(--hgos-space-5); }
    #hgosHeaderModal .hg-modal-foot.is-profile { padding: var(--hgos-space-3); }

    #hgosHeaderModal .hg-profile-foot-right {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 7px;
    }

    #hgosHeaderModal .hg-foot-btn {
        min-height: 46px;
        padding: 0 7px;
        font-size: var(--hgos-fs-sm);
    }
}

/* ==========================================================
   19. COMMON FOOTER
   Header와 동일하게 전 페이지 공용. 별도 footer.css 불필요.
   ========================================================== */

#hgosCommonFooter{
    width:100%;
    margin-top:48px;
    background:#111113;
    color:#b9b9c2;
    font-family:inherit;
    font-size:var(--hgos-fs-sm);
    line-height:1.7;
}

#hgosCommonFooter,
#hgosCommonFooter *{
    box-sizing:border-box;
}

#hgosCommonFooter .hgf-inner{
    width:min(var(--hgos-content),calc(100% - var(--hgos-page-gap)));
    margin-inline:auto;
    padding:28px 0 26px;
}

#hgosCommonFooter .hgf-company{
    margin:0;
    padding:0;
}

#hgosCommonFooter .hgf-title{
    margin:0 0 7px;
    color:#f1f1f4;
    font-size:var(--hgos-fs-label);
    font-weight:var(--hgos-fw-semibold);
    line-height:1.45;
}

#hgosCommonFooter .hgf-info{
    margin:0;
    color:#b4b4bd;
    font-size:var(--hgos-fs-sm);
    font-weight:var(--hgos-fw-normal);
    line-height:1.8;
    word-break:keep-all;
}

#hgosCommonFooter .hgf-rule{
    width:100%;
    height:1px;
    margin:var(--hgos-space-4) 0 13px;
    background:rgba(255,255,255,.10);
}

#hgosCommonFooter .hgf-copy{
    margin:0;
    color:#9b9ba5;
    font-size:var(--hgos-fs-sm);
    font-weight:var(--hgos-fw-normal);
    line-height:1.6;
}

#hgosCommonFooter .hgf-links{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:var(--hgos-space-2) 0;
    margin-top:var(--hgos-space-4);
}

#hgosCommonFooter .hgf-links a{
    position:relative;
    display:inline-flex;
    align-items:center;
    color:#d0d0d7;
    font-size:var(--hgos-fs-sm);
    font-weight:var(--hgos-fw-medium);
    line-height:1.6;
    white-space:nowrap;
}

#hgosCommonFooter .hgf-links a:not(:last-child){
    margin-right:14px;
    padding-right:15px;
}

#hgosCommonFooter .hgf-links a:not(:last-child)::after{
    content:"";
    position:absolute;
    top:50%;
    right:0;
    width:1px;
    height:10px;
    background:rgba(255,255,255,.16);
    transform:translateY(-50%);
}

#hgosCommonFooter .hgf-links a:hover{
    color:var(--hgos-white);
}

@media (max-width:768px){
    #hgosCommonFooter{
        margin-top:var(--hgos-space-8);
        font-size:var(--hgos-fs-sm);
    }

    #hgosCommonFooter .hgf-inner{
        width:calc(100% - var(--hgos-page-gap-mobile));
        padding:26px 0 28px;
    }

    #hgosCommonFooter .hgf-title{
        margin-bottom:var(--hgos-space-2);
        font-size:var(--hgos-fs-label);
    }

    #hgosCommonFooter .hgf-info,
    #hgosCommonFooter .hgf-copy,
    #hgosCommonFooter .hgf-links a{
        font-size:var(--hgos-fs-sm);
    }

    #hgosCommonFooter .hgf-info{
        line-height:1.85;
    }

    #hgosCommonFooter .hgf-copy{
        line-height:1.65;
    }

    #hgosCommonFooter .hgf-links{
        align-items:flex-start;
        row-gap:var(--hgos-space-2-5);
        margin-top:17px;
    }

    #hgosCommonFooter .hgf-links a{
        line-height:1.65;
    }

    #hgosCommonFooter .hgf-links a:not(:last-child){
        margin-right:var(--hgos-space-2-5);
        padding-right:11px;
    }
}


/* ==========================================================
   21. GLOBAL HEADER MENU PORTAL FIX
   hgMenuPanel은 JS에서 body 직속으로 이동하므로
   #hgosHeaderWidget descendant selector에 의존하지 않는다.
   ========================================================== */

#hgMenuPanel.hg-menu-panel{
    position:fixed;
    z-index:var(--hgos-z-dropdown);
    width:220px;
    max-width:calc(100vw - 24px);
    padding:var(--hgos-space-2);
    overflow-y:auto;
    visibility:hidden;
    opacity:0;
    transform:translateY(-5px);
    pointer-events:none;
    border:1px solid var(--hgos-border);
    border-radius:var(--hgos-radius-control);
    background:var(--hgos-white);
    box-shadow:var(--hgos-shadow-lg);
    transition:
        opacity var(--hgos-transition),
        transform var(--hgos-transition),
        visibility var(--hgos-transition);
}

#hgMenuPanel.hg-menu-panel.is-open{
    visibility:visible;
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

#hgMenuPanel .hg-menu-section{
    padding:var(--hgos-space-2) var(--hgos-space-3) 5px;
    color:var(--hgos-muted);
    font-size:var(--hgos-fs-xs);
    font-weight:var(--hgos-fw-bold);
    line-height:1.4;
}

#hgMenuPanel .hg-menu-link{
    width:100%;
    display:flex;
    align-items:center;
    min-height:42px;
    padding:0 13px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--hgos-title);
    font:inherit;
    font-size:var(--hgos-fs-body);
    font-weight:var(--hgos-fw-bold);
    line-height:1.4;
    text-align:left;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
}

#hgMenuPanel .hg-menu-link:hover,
#hgMenuPanel .hg-menu-link:focus-visible{
    outline:none;
    background:var(--hgos-primary-soft);
    color:var(--hgos-primary);
}

#hgMenuPanel .hg-menu-separator{
    height:1px;
    margin:var(--hgos-space-1-5) var(--hgos-space-2);
    background:var(--hgos-divider);
}

@media (max-width:768px){
    #hgMenuPanel.hg-menu-panel{
        width:min(260px,calc(100vw - 24px));
    }

    #hgMenuPanel .hg-menu-section{
        font-size:var(--hgos-fs-xs);
    }

    #hgMenuPanel .hg-menu-link{
        min-height:var(--hgos-button-height);
        font-size:var(--hgos-fs-body);
    }
}


/* ==========================================================
   20. REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto;
        transition:none;
        animation:none;
    }
}


/* Footer order: navigation first, company information second */
#hgosCommonFooter .hgf-links{
    margin-top:0;
    margin-bottom:18px;
    padding-bottom:var(--hgos-space-4);
    border-bottom:1px solid rgba(255,255,255,.10);
}

#hgosCommonFooter .hgf-company{
    margin-top:0;
}

#hgosCommonFooter .hgf-company .hgf-rule{
    margin-top:var(--hgos-space-4);
}

@media (max-width:768px){
    #hgosCommonFooter .hgf-links{
        margin-top:0;
        margin-bottom:18px;
        padding-bottom:15px;
    }
}


.h-title-xl,
.h-value-xl{
    margin:0;
    color:var(--hgos-title);
    font-family:inherit;
    font-size:30px;
    font-weight:var(--hgos-fw-bold);
    line-height:1.2;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
}

.h-value-xl{
    font-size:32px;
    font-weight:var(--hgos-fw-heavy);
}

.h-text{
    color:var(--hgos-text);
    font-family:inherit;
    font-size:var(--hgos-fs-body);
    line-height:1.7;
}

.h-small{
    color:var(--hgos-muted);
    font-family:inherit;
    font-size:var(--hgos-fs-sm);
    line-height:1.6;
}

.h-caption{
    color:var(--hgos-muted);
    font-family:inherit;
    font-size:var(--hgos-fs-xs);
    line-height:1.5;
}

.h-primary{
    color:var(--hgos-primary);
}

.h-danger{
    color:var(--hgos-danger);
}

.h-bold{
    font-weight:var(--hgos-fw-bold);
}

.h-mt-xs{margin-top:var(--hgos-space-2);}
.h-mt-sm{margin-top:var(--hgos-space-4);}
.h-mt-md{margin-top:var(--hgos-space-6);}

.h-btn-outline{
    background:var(--hgos-white);
    border:1px solid var(--hgos-border);
    color:var(--hgos-title);
}

.h-btn-light{
    background:var(--hgos-primary-soft);
    border:1px solid transparent;
    color:var(--hgos-primary);
}

@media (max-width:768px){

    .h-title-xl,
    .h-value-xl{
        font-family:inherit;
        font-size:var(--hgos-fs-page-title);
        font-weight:var(--hgos-fw-heavy);
        line-height:1.18;
        letter-spacing:-.025em;
    }

    .h-text{
        font-size:var(--hgos-fs-body);
    }

    .h-small{
        font-size:var(--hgos-fs-sm);
    }

    .h-caption{
        font-size:var(--hgos-fs-xs);
    }
}

@media (max-width:420px){

    .h-title-xl,
    .h-value-xl{
        font-size:27px;
    }
}


/* Card header: 제목/더보기의 기준 레이아웃 */
.h-card-header{
    min-height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--hgos-space-4);
    padding:var(--hgos-space-6) var(--hgos-space-8);
    border-bottom:1px solid var(--hgos-divider);
    background:var(--hgos-white);
}

.h-card-header > *{
    min-width:0;
}

/* Divider: GA/GV 상단 설명 아래 공통 구분선 */
.h-divider{
    width:100%;
    height:1px;
    margin:var(--hgos-space-5) 0 0;
    border:0;
    background:var(--hgos-divider);
}

/* Legacy utility alias retained while Pages are migrated */
.h-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--hgos-space-3);
}


@media (max-width:768px){
    .h-card-header{
        min-height:76px;
        padding:var(--hgos-space-5);
    }

    .h-divider{
        margin-top:var(--hgos-space-4);
    }
}

/* ==========================================================
   HGOS GLOBAL NUMERIC TYPOGRAPHY v4.4
   모바일/PC GA·GV·XP·CREDIT 수치 글꼴 통일
   ========================================================== */

.h-number,
.h-amount,
[data-hgos-number],
[data-hgos-amount]{
    font-family:inherit;
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum" 1;
}

/* Native form controls must inherit the global HGOS typeface */
button,
input,
select,
textarea{
    font-family:inherit;
}


/* ==========================================================
   22. COMMON EXTENSIONS
   공통 소형 타이틀 / 성공 버튼 / 버튼 그룹
   ========================================================== */

.h-title-sm{
    margin:0;
    color:var(--hgos-title);
    font-size:18px;
    font-weight:var(--hgos-fw-bold);
    line-height:1.4;
}

.h-btn-success{
    min-height:var(--hgos-button-height);
    padding:0 var(--hgos-space-4);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid transparent;
    border-radius:14px;
    background:var(--hgos-success);
    color:var(--hgos-white);
    font-size:var(--hgos-fs-button);
    font-weight:var(--hgos-fw-bold);
    line-height:1.3;
    text-align:center;
    white-space:nowrap;
}

.h-btn-group{
    display:flex;
    align-items:center;
    gap:var(--hgos-space-2-5);
    width:100%;
}

.h-btn-group > .h-btn,
.h-btn-group > .h-btn-primary,
.h-btn-group > .h-btn-secondary,
.h-btn-group > .h-btn-danger,
.h-btn-group > .h-btn-success{
    min-width:0;
}

@media (min-width:769px){
    .h-card-body{padding:var(--hgos-space-6) var(--hgos-space-8);}
    .h-btn,
    .h-btn-primary,
    .h-btn-secondary,
    .h-btn-outline,
    .h-btn-light,
    .h-btn-danger,
    .h-btn-success{font-weight:var(--hgos-fw-heavy);}
}

@media (max-width:768px){
    /* Global mobile typography: do not shrink on narrow phones. */
    :root{
        --hgos-fs-xs:15px;
        --hgos-fs-sm:16px;
        --hgos-fs-body:18px;
        --hgos-fs-label:18px;
        --hgos-fs-control:18px;
        --hgos-fs-button:18px;
        --hgos-fs-subtitle:20px;
        --hgos-fs-title:23px;
        --hgos-fs-page-title:27px;
    }

    .h-title-sm{font-size:19px;}
    .h-value-xl,.h-title-xl{font-size:30px;font-weight:900;}
}

@media (max-width:420px){
    :root{
        --hgos-fs-xs:15px;
        --hgos-fs-sm:16px;
        --hgos-fs-body:18px;
        --hgos-fs-label:18px;
        --hgos-fs-control:18px;
        --hgos-fs-button:18px;
        --hgos-fs-subtitle:20px;
        --hgos-fs-title:23px;
        --hgos-fs-page-title:27px;
    }
}

/* ==========================================================
   23. HGOS COMMON CSS — FINAL LOCK 2026-09-20
   이 블록을 포함한 본 파일을 공용 CSS 최종 기준본으로 고정한다.
   이후 페이지별 디자인은 각 페이지 CSS에서만 확장한다.
   ========================================================== */

/* 1) 브라우저 상단과 로고 사이의 시각적 여백 */
#hgosHeaderWidget{
    padding-top:12px;
}

/* 2) 숫자/금액도 HGOS 전체 공통 글꼴을 사용 */
.h-number,
.h-amount,
.h-value-xl,
.h-title-xl,
[data-hgos-number],
[data-hgos-amount]{
    font-family:
        Pretendard,
        "Noto Sans KR",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

/*
 * 3) CSS만 수정한다는 조건에서 추천인/성장파트너 안내문을 교체한다.
 * 기존 DOM 문구는 유지하되 화면에서는 새 안내문만 표시한다.
 */
#hgosHeaderModal
div:has(+ .hg-form-group #profileReferralMemberCode)
> .hg-section-caption,
#hgosHeaderModal
div:has(+ .hg-form-group #profileGrowthPartnerMemberCode)
> .hg-section-caption{
    font-size:0;
}

#hgosHeaderModal
div:has(+ .hg-form-group #profileReferralMemberCode)
> .hg-section-caption::after{
    content:"추천인은 최초등록후 변경할수 없으니 신중히 입력해주세요.";
    font-size:var(--hgos-fs-sm);
}

#hgosHeaderModal
div:has(+ .hg-form-group #profileGrowthPartnerMemberCode)
> .hg-section-caption::after{
    content:"성장파트너는 최초등록후 변경할수 없으니 신중히 입력해주세요.";
    font-size:var(--hgos-fs-sm);
}

/* 4) Mobile Header — 한 줄 프로필/회원정보/GA·GV 유지 */
@media (max-width:768px){

    #hgosHeaderWidget{
        padding-top:14px;
    }

    #hgosHeaderWidget .hg-brand-wrap{
        margin-bottom:14px;
    }

    /* GPS는 모바일에서 한 단계 더 강하게 */
    #hgosHeaderWidget .hg-brand-gps{
        font-weight:950;
        letter-spacing:-.15px;
    }

    /* 프로필 카드 내부 가로 공간 확보 */
    #hgosHeaderWidget .hg-card{
        padding:16px 14px;
    }

    #hgosHeaderWidget .hg-profile-top{
        gap:8px;
    }

    #hgosHeaderWidget .hg-avatar{
        flex:0 0 42px;
        width:42px;
        height:42px;
    }

    #hgosHeaderWidget .hg-profile-main{
        min-width:0;
        overflow:visible;
    }

    #hgosHeaderWidget .hg-name-line{
        display:flex;
        align-items:center;
        flex-wrap:nowrap;
        gap:3px 5px;
        width:100%;
        white-space:nowrap;
    }

    #hgosHeaderWidget .hg-name{
        flex:0 0 auto;
        font-size:14px;
        white-space:nowrap;
    }

    #hgosHeaderWidget .hg-meta{
        flex:0 1 auto;
        min-width:0;
        padding:0;
        font-size:13px;
        letter-spacing:-.035em;
        white-space:nowrap;
    }

    #hgosHeaderWidget .hg-info-btn{
        flex:0 0 auto;
        min-height:22px;
        padding:0 4px;
        font-size:12px;
        white-space:nowrap;
    }

    #hgosHeaderWidget .hg-assets{
        display:flex;
        align-items:center;
        flex-wrap:nowrap;
        gap:4px;
        margin-top:5px;
        font-size:14px;
        letter-spacing:-.025em;
        white-space:nowrap;
    }

    #hgosHeaderWidget .hg-assets > *{
        flex:0 0 auto;
        white-space:nowrap;
    }

    #hgosHeaderWidget .hg-charge-btn{
        min-height:23px;
        padding:0 6px;
        font-size:12px;
        white-space:nowrap;
    }

    /* 모바일 GA/GV 금액에 페이지별 폰트가 남아 있어도 공통 폰트로 통일 */
    .h-number,
    .h-amount,
    .h-value-xl,
    .h-title-xl,
    [data-hgos-number],
    [data-hgos-amount]{
        font-family:
            Pretendard,
            "Noto Sans KR",
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif !important;
    }

/* ==========================================================
   COMMON FOOTER — MOBILE COMPANY INFO
   모바일에서 사업자 정보만 컴팩트하게 표시
   ========================================================== */


    #hgosCommonFooter .hgf-company{
        margin-top:16px;
    }

    #hgosCommonFooter .hgf-title{
        margin-bottom:8px;
        font-size:14px;
        font-weight:700;
        line-height:1.4;
    }

    #hgosCommonFooter .hgf-info{
        font-size:12px;
        font-weight:400;
        line-height:1.75;
        letter-spacing:-0.02em;
    }

    #hgosCommonFooter .hgf-copy{
        margin-top:7px;
        font-size:12px;
        font-weight:400;
        line-height:1.5;
    }

}

@media (max-width:420px){

    #hgosHeaderWidget .hg-card{
        padding:15px 12px;
    }

    #hgosHeaderWidget .hg-profile-top{
        gap:7px;
    }

    #hgosHeaderWidget .hg-avatar{
        flex-basis:40px;
        width:40px;
        height:40px;
    }

    #hgosHeaderWidget .hg-name{
        font-size:13px;
    }

    #hgosHeaderWidget .hg-meta{
        font-size:12px;
        letter-spacing:-.045em;
    }

    #hgosHeaderWidget .hg-info-btn{
        padding-inline:3px;
        font-size:11px;
    }

    #hgosHeaderWidget .hg-assets{
        gap:3px;
        font-size:13px;
    }

    #hgosHeaderWidget .hg-charge-btn{
        padding-inline:5px;
        font-size:11px;
    }
}

/* ==========================================================
   19.1 COMMON FOOTER — KAKAO CONTACT ICON
   hgos-common-footer v1.4 대응
   ========================================================== */

#hgosCommonFooter .hgf-kakao-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

#hgosCommonFooter .hgf-kakao-icon{
    flex:0 0 auto;
    width:20px;
    height:20px;
    display:block;
    object-fit:contain;
    border-radius:4px;
}

@media (max-width:768px){
    #hgosCommonFooter .hgf-kakao-link{
        gap:5px;
    }

    #hgosCommonFooter .hgf-kakao-icon{
        width:22px;
        height:22px;
    }
}

@media (max-width:420px){
    #hgosCommonFooter .hgf-kakao-icon{
        width:21px;
        height:21px;
    }
}

/* ==========================================================
   COMMON HEADER LOGIN PROMPT
   ========================================================== */

#hgosHeaderModal .hg-login-prompt{
    position:relative;
    min-height:250px;
    padding:34px 24px 28px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;
}

#hgosHeaderModal .hg-login-prompt::before,
#hgosHeaderModal .hg-login-prompt::after{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    border-radius:50%;
    background:var(--hgos-primary-soft);
    opacity:.8;
    pointer-events:none;
}

#hgosHeaderModal .hg-login-prompt::before{
    left:-110px;
    top:-92px;
}

#hgosHeaderModal .hg-login-prompt::after{
    right:-118px;
    bottom:-105px;
}

#hgosHeaderModal .hg-login-lock{
    position:relative;
    z-index:1;
    width:84px;
    height:84px;
    margin-bottom:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(145deg,#faf7ff,#f0e8ff);
    box-shadow:0 12px 30px rgba(116,7,255,.10);
}

#hgosHeaderModal .hg-login-lock-shackle{
    position:absolute;
    top:20px;
    left:50%;
    width:31px;
    height:29px;
    border:6px solid var(--hgos-primary-2);
    border-bottom:0;
    border-radius:17px 17px 0 0;
    transform:translateX(-50%);
}

#hgosHeaderModal .hg-login-lock-body{
    position:absolute;
    left:50%;
    top:39px;
    width:43px;
    height:34px;
    border-radius:8px;
    background:linear-gradient(135deg,var(--hgos-primary-2),var(--hgos-primary));
    transform:translateX(-50%);
    box-shadow:0 7px 16px rgba(116,7,255,.18);
}

#hgosHeaderModal .hg-login-lock-key{
    position:absolute;
    left:50%;
    top:10px;
    width:7px;
    height:12px;
    border-radius:999px;
    background:#fff;
    transform:translateX(-50%);
}

#hgosHeaderModal .hg-login-prompt-message{
    position:relative;
    z-index:1;
    margin:0;
    color:var(--hgos-title);
    font-size:18px;
    font-weight:var(--hgos-fw-semibold);
    line-height:1.75;
    letter-spacing:-.025em;
}

#hgosHeaderModal .hg-login-prompt-message strong{
    color:var(--hgos-primary);
    font-size:21px;
    font-weight:var(--hgos-fw-heavy);
}

#hgosHeaderModal #hgHeaderModalConfirm.hg-login-submit{
    min-width:150px;
    min-height:50px;
    border:0;
    border-radius:15px;
    background:linear-gradient(135deg,var(--hgos-primary),var(--hgos-primary-2));
    color:#fff;
    box-shadow:0 10px 24px rgba(116,7,255,.20);
}

#hgosHeaderModal #hgHeaderModalConfirm.hg-login-submit:hover{
    box-shadow:0 12px 28px rgba(116,7,255,.26);
}

@media(max-width:768px){
    #hgosHeaderModal .hg-login-prompt{
        min-height:220px;
        padding:28px 18px 24px;
    }

    #hgosHeaderModal .hg-login-lock{
        width:74px;
        height:74px;
        margin-bottom:20px;
    }

    #hgosHeaderModal .hg-login-lock-shackle{
        top:17px;
        width:28px;
        height:27px;
    }

    #hgosHeaderModal .hg-login-lock-body{
        top:35px;
        width:40px;
        height:32px;
    }

    #hgosHeaderModal .hg-login-prompt-message{
        font-size:16px;
    }

    #hgosHeaderModal .hg-login-prompt-message strong{
        font-size:19px;
    }

    #hgosHeaderModal #hgHeaderModalConfirm.hg-login-submit{
        min-width:130px;
    }
}