/* ==========================================================
   HANAIN HGOS
   CONSCIOUSNESS NAVIGATION UI
   Mobile First / Simplified Frontend
   ========================================================== */


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

    :root {

        /* Brand */
        --h-primary: #7407ff;
        --h-primary-dark: #5c00d6;
        --h-primary-soft: #faf9ff;

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

        /* Surface */
        --h-bg: #f7f6f9;
        --h-card: #ffffff;
        --h-soft: #faf9fc;

        /* Border */
        --h-border: #eeeaf7;

        /* Status */
        --h-success: #24845d;
        --h-warning: #a66b00;
        --h-danger: #c84545;

        /* Radius */
        --h-radius-sm: 12px;
        --h-radius: 16px;
        --h-radius-lg: 20px;

        /* Shadow */
        --h-shadow: 0 7px 22px rgba(46, 40, 68, .07);

        --h-shadow-soft: 0 3px 12px rgba(46, 40, 68, .045);

    }


    /* ==========================================================
   2. BASE
   ========================================================== */

    * {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        margin: 0;

        background: var(--h-bg);

        color: var(--h-text);

        font-family: Pretendard,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            "Noto Sans KR",
            sans-serif;

        font-size: 16px;
        line-height: 1.7;

        word-break: keep-all;

        -webkit-font-smoothing: antialiased;
    }

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

    button {
        cursor: pointer;
    }

    button:disabled {
        cursor: not-allowed;
        opacity: .6;
    }


    /* ==========================================================
   3. PAGE
   ========================================================== */

    .h-page {

        width: 100%;
        max-width: 1500px;
        margin: 0 auto;
        padding: 10px 18px 70px;

    }


/* ==========================================================
   HEADER
   ========================================================== */

.h-header{
    display:flex;
    flex-direction:row;
    align-items:flex-end;
    flex-wrap:nowrap;
    gap:16px;
    margin-bottom:26px;
    white-space:nowrap;
}

.h-header-title{
    font-size:50px;
    font-weight:700;
    line-height:1;
    letter-spacing:-0.03em;
    color:var(--h-title);

    flex:0 0 auto;
    white-space:nowrap;
}

.h-header-subtitle{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:0;

    color:var(--h-muted);
    font-size:18px;
    font-weight:500;

    flex:0 0 auto;
    white-space:nowrap;
}

.h-header-divider{

    color:#cfc7dd;

}

.h-header-link{

    color:var(--h-title);

    font-size:12px;

    font-weight:500;

    text-decoration:none;

}

.h-header-link:hover{

    color:var(--h-primary);

}

/* ==========================================================
   4. COMMON CARD
   ========================================================== */

    .h-card {

        width:100%;
        background:var(--h-card);
        border:1px solid var(--h-border);
 
        box-shadow:var(--h-shadow-soft);

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

        overflow:hidden;

    }

    .h-card:hover{

    transform:translateY(-2px);

    box-shadow:
        0 16px 42px rgba(40,20,70,.08),
        0 4px 12px rgba(40,20,70,.04);

    }

    .h-card+.h-card {
        margin-top: 18px;
    }

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


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

    .h-eyebrow {

        margin-bottom: 5px;

        color: var(--h-primary);

        font-size: 13px;
        font-weight: 700;

        letter-spacing: .08em;
        text-transform: uppercase;

    }

    .h-title {

        margin: 0;

        color: var(--h-title);

        font-size: 25px;
        font-weight: 800;

        line-height: 1.35;

        letter-spacing: -.025em;

    }

    .h-description {

        margin: 8px 0 0;

        color: var(--h-muted);

        font-size: 16px;
        line-height: 1.7;

    }

    .h-section-header {
        margin-bottom: 22px;
    }


    /* ==========================================================
   6. PROFILE
   7. 회원정보 / 성장자산 / 현재 세션
   ========================================================== */

    #sectionProfile {

        background: linear-gradient(145deg,
                #ffffff 0%,
                #faf7ff 100%);

    }


    /* ----------------------------------------------------------
   PROFILE TOP
   ---------------------------------------------------------- */

    .h-profile-top {

        display: flex;

        align-items: center;

        gap: 14px;

    }


    /* ----------------------------------------------------------
   AVATAR
   성장 게놈 설문 링크
   ---------------------------------------------------------- */

    .h-profile-avatar {

        flex: 0 0 48px;

        width: 48px;
        height: 48px;

        display: flex;

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

        padding: 0;

        overflow: hidden;

        border: 0;
        border-radius: 50%;

        background: linear-gradient(145deg,
                #7407ff,
                #914cff);

        color: #fff;

        font-size: 19px;
        font-weight: 800;

        line-height: 1;

    }


    .h-profile-avatar-link {

        cursor: pointer;

        transition: transform .18s ease,
            box-shadow .18s ease;

    }


    .h-profile-avatar-link:hover {

        transform: translateY(-1px);

        box-shadow: 0 6px 16px rgba(116, 7, 255, .20);

    }


    .h-profile-avatar img {

        width: 100%;
        height: 100%;

        object-fit: cover;

    }


    /* ----------------------------------------------------------
   MEMBER
   ---------------------------------------------------------- */

    .h-profile-main {

        flex: 1;

        min-width: 0;

    }


    .h-profile-name-line {

        display: flex;

        align-items: baseline;

        flex-wrap: wrap;

        gap: 4px 6px;

    }


    .h-profile-name {

        color: var(--h-title);

        font-size: 16px;
        font-weight: 700;

        line-height: 1.4;

    }


    .h-profile-meta {

        color: var(--h-muted);

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

        line-height: 1.4;

    }

    .h-profile-myinfo {
    flex: 0 0 auto;

    padding: 0;
    margin-left: 2px;

    border: 0;
    background: transparent;

    color: var(--h-primary);

    font-size: 13px;
    font-weight: 700;

    line-height: 1.4;

    cursor: pointer;
    }

    .h-profile-myinfo:hover {
    color: var(--h-primary-dark);
    text-decoration: underline;
    }


    /* ----------------------------------------------------------
   GA / GV
   ---------------------------------------------------------- */

    .h-profile-assets-inline {

        display: flex;

        align-items: center;

        gap: 5px;

        margin-top: 3px;

        color: var(--h-muted);

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

    }


    .h-profile-asset-divider {

        color: #b7b1bf;

        font-weight: 400;

    }


    /* ----------------------------------------------------------
   DIVIDER
   ---------------------------------------------------------- */

    .h-profile-divider {

        width: 100%;

        height: 1px;

        margin: 16px 0 13px;

        background: var(--h-border);

    }


    /* ----------------------------------------------------------
   PROFILE SHORTCUTS
   ---------------------------------------------------------- */

    .h-profile-shortcuts {

        display: grid;

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

        gap: 8px;

        margin-top: 14px;

    }

    .h-profile-shortcut {

       min-height: 52px;

       display: flex;

       align-items: center;

       justify-content: center;

       gap: 8px;

       padding: 0 12px;

       border: 1px solid #ddd6ee;

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

       background: #fff;

       color: var(--h-title);

       text-decoration: none;

       font-size: 14px;

       font-weight: 700;

       line-height: 1.2;

       transition:
        transform .15s ease,
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;

    }

    .h-profile-shortcut:hover {

        transform: translateY(-1px);

        border-color: rgba(116, 7, 255, .30);

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

        color: var(--h-primary);

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

    }

    .h-profile-shortcut-icon {

        flex: 0 0 auto;

        font-size: 18px;
      
        line-height: 1;

    }

    .h-profile-shortcut-text {

        white-space: nowrap;

    }


    /* ----------------------------------------------------------
   CURRENT SESSION
   ---------------------------------------------------------- */

     .h-primary {

        color: var(--h-primary);

        font-weight: 700;

    }

 
/* ----------------------------------------------------------
   TODAY MESSAGE
   ---------------------------------------------------------- */

    .h-profile-message {

        margin-top: 9px;

        color: var(--h-muted);

        font-size: 13px;
        line-height: 1.55;

    }


    /* ==========================================================
    
/* ==========================================================
   9. FORM
   ========================================================== */

    .h-field {

        margin-bottom: 20px;

    }

    .h-field:last-child {
        margin-bottom: 0;
    }

    .h-label {

        display: block;

        margin-bottom: 8px;

        color: var(--h-title);

        font-size: 16px;
        font-weight: 700;

    }

    .h-label-help {

        margin-left: 5px;

        color: var(--h-muted);

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

    }

    .h-label-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-bottom:10px;

    }

    .h-label-row .h-label{

    margin:0;

    flex:1;

   }

    .h-input,
    .h-textarea,
    .h-select {

        width: 100%;

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

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

        background: #fff;

        color: var(--h-text);

        font-size: 16px;

        outline: none;

        transition:  border-color .2s ease,
            box-shadow .2s ease;

    }

    .h-input,
    .h-select {

        min-height: 52px;

        padding: 0 15px;

    }

    .h-textarea {

        min-height: 110px;

        padding: 14px 15px;

        line-height: 1.65;

        resize: vertical;

    }

    .h-input:focus,
    .h-textarea:focus,
    .h-select:focus {

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

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

    }

    .h-input::placeholder,
    .h-textarea::placeholder {

        color: #aaa4b1;

    }


    /* ==========================================================
   10. BUTTON
   ========================================================== */

    .h-btn {

        min-height: 52px;

        display: inline-flex;

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

        gap: 7px;

        padding:  0 20px;

        border: 0;

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

        font-size: 16px;
        font-weight: 700;

        text-decoration: none;

        transition:  transform .15s ease,
            box-shadow .2s ease,
            background .2s ease;

    }

    .h-btn:active {
        transform: scale(.985);
    }

    .h-btn-primary {

        background:  var(--h-primary);

        color: #fff;

        box-shadow:  0 5px 15px rgba(116, 7, 255, .18);

    }

    .h-btn-primary:hover {

        background: var(--h-primary-dark);

    }

    .h-btn-secondary {

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

        color: var(--h-primary);

    }

    .h-btn-outline {

        background: #fff;

        color: var(--h-title);

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

    }

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

    

    /* ----------------------------------------------------------
   CHECK-IN LOCKED
   체크인은 막혀 있지만 클릭하여 안내 메시지를 보여준다.
   ---------------------------------------------------------- */

    


/*=========================================
.h-voice-btn{

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    background:#f3edff;

    color:#7407ff;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    transition:.2s;

}

.h-voice-btn:hover{

    background:#7407ff;

    color:#fff;

}

    
/* ==========================================================
   25. LOADING
   ========================================================== */

    .h-loading {

        position: fixed;

        inset: 0;

        z-index: 9999;

        display: none;

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

        padding: 24px;

        background:            rgba(20, 15, 30, .42);

        backdrop-filter:            blur(5px);

    }

    .h-loading.is-visible {
        display: flex;
    }

    .h-loading-box {

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

        padding:            30px 24px;

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

        border-radius:            18px;

        background: #fff;

        text-align: center;

        box-shadow:            0 16px 45px rgba(0, 0, 0, .15);

    }

    .h-spinner {

        width: 38px;
        height: 38px;

        margin:            0 auto 16px;

        border:            4px solid #eee8f5;

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

        border-radius: 50%;

        animation:   h-spin .8s linear infinite;

    }

    @keyframes h-spin {

        to {
            transform: rotate(360deg);
        }

    }

    .h-loading-title {

        color: var(--h-title);

        font-size: 18px;
        font-weight: 800;

    }

    .h-loading-text {

        margin-top: 5px;

        color: var(--h-muted);

        font-size: 14px;
        line-height: 1.6;

    }


    /* ==========================================================
   26. TOAST
   ========================================================== */

    .h-toast {

        position: fixed;

        left: 50%;
        bottom: 24px;

        z-index: 10000;

        width: calc(100% - 36px);

        max-width: 420px;

        padding:   14px 16px;

        border-radius: 12px;

        background:  #211b29;

        color: #fff;

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

        line-height: 1.55;

        transform: translateX(-50%) translateY(20px);

        opacity: 0;

        pointer-events: none;

        transition:  .25s ease;

    }

    .h-toast.is-visible {

        transform: translateX(-50%) translateY(0);

        opacity: 1;

    }


    /* ==========================================================
   27. UTILITY
   ========================================================== */

    .h-hidden {
        display: none !important;
    }

    .h-text-center {
        text-align: center;
    }

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

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

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




    
/* ==========================================================
   MODAL
========================================================== */

.h-modal{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw;
    height: 100dvh;
    display: none;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(0,0,0,.45);
    z-index: 999999;
}

.h-modal-dialog{
    position: relative;
    box-sizing: border-box;
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: auto;
    background: #fff;
    border-radius: 18px;
}

.h-modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px;

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

}

.h-modal-body{

    padding:20px;

}

.h-modal-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px;

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

}

/* Community write button */
.h-community-write {
    min-height: 44px;
    flex-shrink: 0;
}

@keyframes modalScale{

    from{

        opacity:0;

        transform:scale(.95);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ==========================================================
   COMMUNITY EDIT MODAL
   ========================================================== */

.h-community-edit-row{

    margin-top:12px;

}


.h-community-edit-link-box{

    margin-top:14px;

    padding:14px;

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

    border-radius:14px;

    background:
        var(--h-soft);

}


.h-community-edit-link-box.is-empty{

    opacity:.85;

}


.h-community-edit-link-status{

    display:flex;

    align-items:center;

    gap:10px;

}


.h-community-edit-link-icon{

    flex:0 0 auto;

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

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

    font-size:17px;

}


.h-community-edit-link-status strong{

    display:block;

    color:
        var(--h-title);

    font-size:13px;

    font-weight:800;

}


.h-community-edit-link-status p{

    margin:3px 0 0;

    color:
        var(--h-muted);

    font-size:12px;

    line-height:1.5;

}


.h-community-remove-links-btn{

    width:100%;

    margin-top:12px;

    min-height:42px;

    font-size:13px;

}


.h-community-remove-links-btn.is-remove-active{

    border-color:
        rgba(116,7,255,.30);

}



/* ==========================================================
   COMMUNITY FEED PAGE
   ========================================================== */

.h-community-composer {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--h-border);
    border-radius: 16px;
    background: var(--h-soft);
}

.h-community-composer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.h-community-composer-head strong {
    color: var(--h-title);
    font-size: 15px;
}

.h-community-composer-head span {
    color: var(--h-muted);
    font-size: 13px;
}

/* ==========================================================
   COMMUNITY VOICE INPUT
   ========================================================== */


.h-community-composer-head-text {
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.h-community-voice-btn {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border: 1px solid var(--h-border);
    border-radius: 12px;
    background: #fff;
    color: var(--h-primary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: .18s ease;
}

.h-community-voice-btn:hover {
    border-color: var(--h-primary);
    background: var(--h-primary-soft);
}

.h-community-voice-btn.is-listening {
    border-color: var(--h-primary);
    background: var(--h-primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(116, 7, 255, .10);
}

.h-community-voice-btn.is-unsupported {
    opacity: .55;
}

@media (max-width: 480px) {

    .h-community-composer-head {
        gap: 8px;
    }

    .h-community-composer-head-text {
        gap: 3px 5px;
    }

    .h-community-voice-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        font-size: 19px;
    }

}

.h-community-composer .h-textarea {
    min-height: 150px;
    background: #fff;
}

.h-community-composer-options {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.h-community-composer-options .h-select {
    width: 150px;
    min-height: 48px;
}

.h-community-composer-options .h-btn {
    flex: 1;
}



.h-community-feed-title {
    margin: 2px 0 0;
    color: var(--h-title);
    font-size: 20px;
    font-weight: 800;
}

.h-community-feed {
    border-top: 1px solid var(--h-border);
}

.h-community-post {
    padding: 22px 0;
    border-bottom: 1px solid var(--h-border);
    background: #fff;
}

.h-community-post-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.h-community-post-author {
    color: var(--h-title);
    font-size: 16px;
    font-weight: 700;
}

.h-community-post-meta {
    margin-top: 3px;
    color: var(--h-muted);
    font-size: 13px;
    font-weight: 500;
}

.h-community-post-content {
    margin-top: 9px;
    color: var(--h-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    white-space: pre-line;
}

.h-community-media {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid var(--h-border);
    border-radius: 14px;
    background: #000;
}

/* 기본 YouTube 가로 영상 */
.h-community-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

/* YouTube Shorts / 세로 영상 */
.h-community-video-vertical {
    width: min(100%, 360px);
    aspect-ratio: 9 / 16;
    margin-left: auto;
    margin-right: auto;
}

/* iframe은 컨테이너의 실제 비율을 그대로 사용 */
.h-community-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 일반 이미지 링크 */
.h-community-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 720px;
    object-fit: contain;
    background: #fff;
}

/* 최근 성장 이야기 제목 + 작은 새로고침 버튼 */
.h-community-feed-heading {
    min-width: 0;
}

.h-community-feed-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.h-community-refresh {
    flex: 0 0 auto;
    min-height: 30px !important;
    height: 30px;
    padding: 4px 9px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1;
    white-space: nowrap;
}

.h-community-link-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 13px 15px;
    border: 1px solid var(--h-border);
    border-radius: 12px;
    background: var(--h-primary-soft);
    color: var(--h-title);
    font-size: 15px;
    font-weight: 700;
}

.h-community-link-preview span {
    color: var(--h-muted);
    font-size: 13px;
    font-weight: 500;
}

.h-community-post-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.h-community-post-stat {
    color: var(--h-muted);
    font-size: 13px;
}

.h-community-empty {
    padding: 35px 10px;
    color: var(--h-muted);
    text-align: center;
}

/* ==========================================================
   COMMUNITY FEED CONTROLS
   20개 미리보기 + 하단 더보기 + 내 글 + 수정/삭제
   ========================================================== */

.h-community-list-controls{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid var(--h-border);
}

.h-community-more-btn{
    min-width: 150px;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid var(--h-border);
    border-radius: 12px;
    background: #fff;
    color: var(--h-primary);
    font-size: 15px;
    font-weight: 700;
}

.h-community-more-btn:hover{
    border-color:rgba(116,7,255,.30);
    background:var(--h-primary-soft);
}

.h-community-own-actions{
    display:flex;
    align-items:center;
    gap:6px;
    margin-left:auto;
    flex-wrap:wrap;
}

.h-community-own-action{
    min-height:30px;
    padding:0 9px;
    border:1px solid var(--h-border);
    border-radius:8px;
    background:#fff;
    color:var(--h-muted);
    font-size:11px;
    font-weight:700;
}

.h-community-own-action:hover{
    border-color:rgba(116,7,255,.30);
    color:var(--h-primary);
    background:var(--h-primary-soft);
}

.h-community-own-action.is-danger:hover{
    border-color:rgba(200,69,69,.30);
    color:var(--h-danger);
    background:#fff8f8;
}

.h-community-mode-note{
    margin-top:8px;
    color:var(--h-muted);
    font-size:12px;
    text-align:center;
}

@media(max-width:768px){
    .h-community-list-controls{
        margin-top:14px;
        padding-top:13px;
    }

    .h-community-more-btn{
        width:100%;
        min-height:44px;
    }


}


/* ==========================================================


/* ==========================================================
   14. COMMUNITY / RESPONSIVE FINAL
   ----------------------------------------------------------
   중복 Mobile / Final Override 통합
   ========================================================== */

/* ----------------------------------------------------------
   COMMUNITY HEADER
   ---------------------------------------------------------- */

.h-community {
    color: var(--h-text);
}

.h-community-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

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

.h-community-heading .h-eyebrow {
    margin-bottom: 4px;
    color: var(--h-primary);
    font-size: 14px;
    font-weight: 700;
}

.h-community-heading .h-community-title {
    margin: 0;
    color: var(--h-title);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
}

.h-community-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.h-community-actions .h-community-refresh {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px !important;
    padding: 0 !important;
    border: 1px solid #e5def3;
    border-radius: 10px !important;
    background: #fff;
    color: var(--h-text);
    font-size: 20px !important;
    line-height: 1;
}

.h-community-actions .h-community-write {
    height: 40px;
    min-height: 40px;
    padding: 0 15px !important;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}


/* ----------------------------------------------------------
   COMMUNITY POST FINAL
   ---------------------------------------------------------- */

.h-community-post-actions .h-btn {
    min-height: 38px;
    padding: 0 13px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
}


.h-community-own-actions .h-btn {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

/* ==========================================================
   DESKTOP FINAL
   ========================================================== */

@media (min-width:769px) {

    .h-page {
        padding: 20px 24px 90px;
    }

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

    .h-profile-avatar {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

}

/* ==========================================================
   MOBILE FINAL
   ========================================================== */

@media (max-width:768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    /* Page / Card */

    .h-page {
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 8px 8px 40px;
        box-sizing: border-box;
    }

    .h-card {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        border-radius: 14px;
    }

    .h-card-body {
        padding: 16px 12px;
    }

    .h-card + .h-card {
        margin-top: 10px;
    }

    /* Main Header */

    .h-header {
        width: 100%;
        display: flex;
        align-items: baseline;
        flex-wrap: nowrap;
        gap: 6px;
        margin-bottom: 12px;
        padding: 0;
        white-space: nowrap;
        overflow: hidden;
    }

    .h-header-title {
        flex: 0 0 auto;
        font-size: 28px;
        line-height: 1;
        white-space: nowrap;
    }

    .h-header-subtitle {
        flex: 1 1 auto;
        min-width: 0;
        gap: 5px;
        margin: 0;
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Profile */

    .h-profile-top {
        gap: 10px;
    }

    .h-profile-name-line {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 4px;
        width: 100%;
        flex-wrap: nowrap;
    }

    .h-profile-name,
    .h-profile-myinfo {
        white-space: nowrap;
    }

    .h-profile-name {
        font-size: 15px;
    }

    .h-profile-meta {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
    }

    .h-profile-myinfo {
        margin-left: 0;
        font-size: 12px;
    }

    .h-profile-assets-inline {
        margin-top: 2px;
        white-space: nowrap;
        font-size: 12px;
    }

    .h-profile-divider {
        margin: 14px 0 12px;
    }

    .h-profile-message {
        margin-top: 8px;
        font-size: 13px;
    }

    /* --------------------------------------------------------
       상단 4개 프로필 버튼
       -------------------------------------------------------- */

    .h-profile-shortcuts {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 14px;
    }

    .h-profile-shortcut {
        padding: 0 10px;
        border-radius: 11px;
        gap: 7px;
    }

    .h-profile-shortcut-icon {
        font-size: 18px;
    }

    /* Form / Voice */

    .h-btn-sm {
        min-height: 31px;
        padding: 0 15px;
        font-size: 12px;
    }

    /* Modal */

    .h-modal {
        padding: max(16px, env(safe-area-inset-top))
                 12px
                 max(16px, env(safe-area-inset-bottom));
        align-items: center;
    }

    .h-modal-dialog {
        width: min(100%, 720px);
        max-height: calc(100dvh - 32px);
        margin: auto;
    }

    /* Community Composer */

    .h-community-composer-options {
        flex-direction: column;
    }

    .h-community-composer-options .h-select {
        width: 100%;
    }

    /* Community Header */

    .h-community-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin-bottom: 14px;
    }

    .h-community-heading {
        min-width: 0;
        overflow: hidden;
    }

    .h-community-heading .h-eyebrow {
        margin-bottom: 3px;
        font-size: 10px;
        line-height: 1.1;
        white-space: nowrap;
        letter-spacing: .06em;
    }

    .h-community-heading .h-community-title {
        margin: 0;
        font-size: 22px;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .h-community-actions {
        justify-content: flex-end;
        gap: 4px;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .h-community-actions .h-community-refresh {
        width: 32px;
        min-width: 32px;
        height: 32px;
        min-height: 32px !important;
        padding: 0 !important;
        font-size: 18px !important;
    }

    .h-community-actions .h-community-write {
        height: 34px;
        min-height: 34px;
        padding: 4px 9px !important;
        font-size: 13px;
        white-space: nowrap;
    }

    /* Community Post */

    .h-community-post {
        padding: 18px 0;
    }

    .h-community-post-top {
        gap: 8px;
    }

    .h-community-post-content {
        margin-top: 7px;
        font-size: 16px;
        line-height: 1.65;
    }

    .h-community-post-actions {
        margin-top: 13px;
        gap: 7px;
    }

    .h-community-post-actions .h-btn {
        min-height: 36px;
        padding: 0 12px;
        font-size: 13px;
    }

    .h-community-own-actions {
        margin-left: 0;
        margin-top: 7px;
        width: 100%;
    }

    .h-community-own-action {
        min-height: 30px;
        flex: 1 1 auto;
    }

    /* Community Media */

    .h-community-media {
        margin-top: 12px;
        border-radius: 12px;
    }

    .h-community-video-vertical {
        width: calc(100% + 24px);
        max-width: none;
        margin-left: -12px;
        margin-right: -12px;
        aspect-ratio: 9 / 16;
    }

    .h-community-video-vertical iframe {
        width: 100%;
        height: 100%;
    }

    .h-community-image {
        max-height: none;
    }

     #gvModalFooterButtons .h-btn{
        min-height:44px;
        height:44px;

        padding:0 16px !important;

        border-radius:12px;

        font-size:14px;
        font-weight:700;
    }

}

/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media (max-width:420px) {

    .h-page {
        padding-left: 6px;
        padding-right: 6px;
    }

    .h-card-body {
        padding-left: 10px;
        padding-right: 10px;
    }

    .h-header-title {
        font-size: 26px;
    }

    .h-header-subtitle {
        font-size: 11px;
    }

    .h-profile-name {
        font-size: 14px;
    }

    .h-profile-meta {
        font-size: 11px;
    }

    .h-profile-myinfo {
        font-size: 11px;
    }

    .h-community-heading .h-community-title {
        font-size: 20px;
    }

    .h-community-actions .h-community-write {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 12px;
    }

    .h-community-post-content {
        font-size: 15px;
    }

    #gvModalFooterButtons .h-btn{
        min-height:42px;
        height:42px;

        padding:0 14px !important;

        border-radius:11px;

        font-size:13px;
    }

}