/* HGOS FINAL CLEAN CSS
 * Original attached CSS normalized in place.
 * Common 4-level typography only; duplicate declarations and empty rules removed.
 * No appended override block.
 */

.community-page, #gvModal {
    --h-primary: var(--hgos-primary);
    --h-primary-dark: var(--hgos-primary-hover);
    --h-primary-soft: var(--hgos-primary-soft);
    --h-title: var(--hgos-title);
    --h-text: var(--hgos-text);
    --h-muted: var(--hgos-muted);
    --h-bg: var(--hgos-bg);
    --h-card: var(--hgos-white);
    --h-soft: var(--hgos-bg-soft);
    --h-border: var(--hgos-border-soft);
    --h-success: var(--hgos-success);
    --h-warning: var(--hgos-warning);
    --h-danger: var(--hgos-danger);
    --h-radius-sm: var(--hgos-radius-sm);
    --h-radius: var(--hgos-radius-control);
    --h-radius-lg: var(--hgos-radius);
    --h-shadow: var(--hgos-shadow);
    --h-shadow-soft: var(--hgos-shadow-sm);}
.community-page {
    width: 100%;
    max-width: var(--hgos-content);
    margin: 0 auto;
    padding: 20px var(--hgos-page-gap) 70px;}
@media (max-width:768px) {
    .community-page {
        padding: 12px var(--hgos-page-gap-mobile) 44px;}
}


.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: var(--hgos-type-2-size);
    font-weight: 700;
}
.h-community-edit-link-status strong {
    display: block;
    color: var(--h-title);
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
.h-community-edit-link-status p {
    margin: 3px 0 0;
    color: var(--h-muted);
    
    line-height: 1.5;
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
.h-community-remove-links-btn {
    width: 100%;
    margin-top: 12px;
    min-height: 42px;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
.h-community-remove-links-btn.is-remove-active {
    border-color: rgba(116,7,255,.30);}
.h-community-composer {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--h-border);}
.h-community-composer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;}
.h-community-composer-head strong {
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
.h-community-composer-head span {
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
.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;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: .18s ease;}
.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: var(--hgos-type-2-size);
    font-weight: 700;
}
.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: var(--hgos-type-2-size);
    font-weight: 700;
}
.h-community-post-meta {
    margin-top: 3px;
    color: var(--h-muted);
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
.h-community-post-content {
    margin-top: 9px;
    color: var(--h-text);
    
    
    line-height: 1.75;
    white-space: pre-line;
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
.h-community-media {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid var(--h-border);
    border-radius: 14px;
    background: #000;}
.h-community-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;}
.h-community-video-vertical {
    width: min(100%, 360px);
    aspect-ratio: 9 / 16;
    margin-left: auto;
    margin-right: auto;}
.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;
    
    line-height: 1;
    white-space: nowrap;
    font-size: var(--hgos-type-4-size) !important;
    font-weight: 400 !important;
}
.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: var(--hgos-type-3-size);
    font-weight: 500;
}
.h-community-link-preview span {
    color: var(--h-muted);
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
.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: var(--hgos-type-4-size);
    font-weight: 400;
}
.h-community-empty {
    padding: 35px 10px;
    color: var(--h-muted);
    text-align: center;}
.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: var(--hgos-type-2-size);
    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: var(--hgos-type-2-size);
    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-inline-back {
    border: 0;
    padding: 0;
    margin-left: 4px;
    background: transparent;
    color: var(--h-primary);
    
    
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
.h-community-single-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;}
.h-community-single-nav-links {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;}
.h-community-inline-master {
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    color: var(--h-primary);
    
    
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
.h-community-single-nav-divider {
    color: #c7bfd5;
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
.h-community-inline-back, .h-community-inline-master {
    white-space: nowrap;}
.h-community-mode-note {
    margin-top: 8px;
    color: var(--h-muted);
    
    text-align: center;
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
@media (max-width:768px) {
    .h-community-actions {
        gap: 6px;}
    .h-community-list-controls {
        margin-top: 14px;
        padding-top: 13px;}
    .h-community-more-btn {
        width: 100%;
        min-height: 44px;}
    .h-community-single-nav {
        gap: 5px;
        line-height: 1.45;}
    .h-community-single-nav-links {
        gap: 4px;}
}
.h-community-skeleton {
    padding: 2px 0 4px;}
.h-community-skeleton-card {
    padding: 18px 0;
    border-bottom: 1px solid var(--h-border);}
.h-community-skeleton-line {
    width: 76%;
    height: 12px;
    margin-top: 10px;
    border-radius: 999px;
    background: linear-gradient(             90deg,             #f1edf7 25%,             #faf8fc 50%,             #f1edf7 75%         );
    background-size: 200% 100%;
    animation: h-community-skeleton-shimmer         1.25s         ease-in-out         infinite;}
.h-community-skeleton-line:first-child {
    margin-top: 0;}
.h-community-skeleton-author {
    width: 34%;
    height: 14px;}
.h-community-skeleton-meta {
    width: 22%;
    height: 9px;}
.h-community-skeleton-wide {
    width: 91%;}
.h-community-skeleton-short {
    width: 58%;}
.h-community-skeleton-status {
    padding: 14px 0 2px;
    color: var(--h-muted);
    
    text-align: center;
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
@keyframes h-community-skeleton-shimmer {
    0% {
        background-position: 200% 0;}
    100% {
        background-position: -200% 0;}
}
@media (prefers-reduced-motion: reduce) {
    .h-community-skeleton-line {
        animation: none;}
}
.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-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 12px;
    padding: 0;}
.h-community-filter-select {
    flex: 0 0 138px;
    width: 138px;
    min-height: 42px;
    height: 42px;
    padding: 0 11px;
    border: 1px solid var(--h-border);
    border-radius: 10px;
    background: #fff;
    color: var(--h-title);
    
    
    outline: none;
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
.h-community-filter-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    height: 42px;
    padding: 0 13px;
    border: 1px solid var(--h-border);
    border-radius: 10px;
    background: #fff;
    color: var(--h-text);
    
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
.h-community-filter-select:focus, .h-community-filter-input:focus {
    border-color: var(--h-primary);
    box-shadow: 0 0 0 3px rgba(116, 7, 255, .07);}
.h-community-filter-input::placeholder {
    color: #aaa4b1;}
@media (max-width:768px) {
    .h-community-filter {
        gap: 6px;
        margin-bottom: 9px;}
    .h-community-filter-select {
        flex-basis: 105px;
        width: 105px;
        min-height: 38px;
        height: 38px;
        padding: 0 8px;
        border-radius: 9px;
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
    .h-community-filter-input {
        min-height: 38px;
        height: 38px;
        padding: 0 10px;
        border-radius: 9px;
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
}
@media (max-width:420px) {
    .h-community-filter-select {
        flex-basis: 96px;
        width: 96px;
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
    .h-community-filter-input {
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
}
.h-community-heading {
    min-width: 0;}
.h-community-heading .h-eyebrow {
    margin-bottom: 4px;
    color: var(--h-primary);
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
.h-community-heading .h-community-title {
    margin: 0;
    color: var(--h-title);
    
    
    line-height: 1.25;
    font-size: var(--hgos-type-1-size);
    font-weight: 700;
}
.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);
    
    line-height: 1;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
.h-community-actions .h-community-write {
    height: 40px;
    min-height: 40px;
    padding: 0 15px !important;
    border-radius: 11px;
    
    
    white-space: nowrap;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
.h-community-post-actions .h-btn {
    min-height: 38px;
    padding: 0 13px;
    border-radius: 11px;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
.h-community-own-actions .h-btn {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
@media (min-width:769px) {
    .h-page {
        padding: 20px 24px 90px;}
    .h-card-body {
        padding: 30px;}
}
@media (max-width:768px) {
    .h-page {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 8px 8px 40px;
        box-sizing: border-box;
        overflow-x: clip;}
    .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;}
    .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;
        
        line-height: 1;
        white-space: nowrap;
    font-size: var(--hgos-type-1-size);
    font-weight: 700;
}
    .h-header-subtitle {
        flex: 1 1 auto;
        min-width: 0;
        gap: 5px;
        margin: 0;
        
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
    .h-btn-sm {
        min-height: 31px;
        padding: 0 15px;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
    .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;}
    .h-community-composer-options {
        flex-direction: column;}
    .h-community-composer-options .h-select {
        width: 100%;}
    .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;
        
        line-height: 1.1;
        white-space: nowrap;
        letter-spacing: .06em;
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
    .h-community-heading .h-community-title {
        margin: 0;
        
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    font-size: var(--hgos-type-1-size);
    font-weight: 700;
}
    .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: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
    .h-community-actions .h-community-write {
        height: 34px;
        min-height: 34px;
        padding: 4px 9px !important;
        
        white-space: nowrap;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
    .h-community-post {
        padding: 18px 0;}
    .h-community-post-top {
        gap: 8px;}
    .h-community-post-content {
        margin-top: 7px;
        
        line-height: 1.65;
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
    .h-community-post-actions {
        margin-top: 13px;
        gap: 7px;}
    .h-community-post-actions .h-btn {
        min-height: 36px;
        padding: 0 12px;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
    .h-community-own-actions {
        margin-left: 0;
        margin-top: 7px;
        width: 100%;}
    .h-community-own-action {
        min-height: 30px;
        flex: 1 1 auto;}
    .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: var(--hgos-type-2-size);
    font-weight: 700;
}
}
@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: var(--hgos-type-1-size);
    font-weight: 700;
}
    .h-header-subtitle {
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
    .h-community-heading .h-community-title {
    font-size: var(--hgos-type-1-size);
    font-weight: 700;
}
    .h-community-actions .h-community-write {
        padding-left: 8px !important;
        padding-right: 8px !important;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
    .h-community-post-content {
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
    #gvModalFooterButtons .h-btn {
        min-height: 42px;
        height: 42px;
        padding: 0 14px !important;
        border-radius: 11px;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
}
@media (max-width:768px) {
    .h-community-own-actions {
        width: auto;
        flex: 0 0 auto;
        margin-left: auto;
        margin-top: 0;
        gap: 4px;
        flex-wrap: nowrap;}
    .h-community-own-action {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        min-height: 26px;
        height: 26px;
        padding: 0 6px;
        border-radius: 7px;
        
        
        line-height: 1;
        white-space: nowrap;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
}
@media (max-width:420px) {
    .h-community-own-actions {
        gap: 3px;}
    .h-community-own-action {
        min-height: 24px;
        height: 24px;
        padding: 0 5px;
        border-radius: 6px;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
}
#sectionCommunity {
    margin-top: 24px !important;
    border-color: #e2d9f2;
    box-shadow: 0 5px 20px rgba(46, 40, 68, .055);}
@media (min-width:769px) {
    .h-community-header {
        padding-bottom: 4px;}
}
@media (max-width:768px) {
    #sectionCommunity {
        margin-top: 16px !important;}
    .h-card-body {
        padding-top: 18px;
        padding-bottom: 18px;}
    .h-community-heading .h-eyebrow {
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
    .h-community-heading .h-community-title {
    font-size: var(--hgos-type-1-size);
    font-weight: 700;
}
    .h-community-filter {
        gap: 7px;}
    .h-community-filter-select {
        flex: 0 0 112px;
        width: 112px;
        min-height: 44px;
        height: 44px;
        padding: 0 9px;
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
    .h-community-filter-input {
        min-height: 44px;
        height: 44px;
        padding: 0 11px;
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
    .h-community-post-author {
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
    .h-community-post-meta {
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
    .h-community-post-content {
        
        line-height: 1.7;
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
    .h-community-post-actions .h-btn, .h-community-post-actions button {
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
}
@media (max-width:420px) {
    .h-community-heading .h-community-title {
    font-size: var(--hgos-type-1-size);
    font-weight: 700;
}
    .h-community-filter-select {
        flex-basis: 108px;
        width: 108px;
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
    .h-community-filter-input {
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
    .h-community-post-content {
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
}


@media (max-width: 768px) {
    .h-community-heading .h-eyebrow {
        
        line-height: 1.2;
    font-size: var(--hgos-type-4-size) !important;
    font-weight: 400 !important;
}
    .h-community-heading .h-community-title {
        
        line-height: 1.2;
    font-size: var(--hgos-type-1-size) !important;
    font-weight: 700 !important;
}
    .h-community-filter {
        gap: 8px;
        margin-bottom: 11px;}
    .h-community-filter-select {
        flex: 0 0 116px !important;
        width: 116px !important;
        min-height: 46px !important;
        height: 46px !important;
        padding: 0 10px !important;
    font-size: var(--hgos-type-3-size) !important;
    font-weight: 500 !important;
}
    .h-community-filter-input {
        min-height: 46px !important;
        height: 46px !important;
        padding: 0 12px !important;
    font-size: var(--hgos-type-3-size) !important;
    font-weight: 500 !important;
}
    .h-community-filter-input::placeholder {
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
    .h-community-actions .h-community-refresh {
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px !important;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
    .h-community-actions .h-community-write {
        height: 40px;
        min-height: 40px;
        padding: 0 12px !important;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
    .h-community-post-author {
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
    .h-community-post-meta {
    font-size: var(--hgos-type-4-size) !important;
    font-weight: 400 !important;
}
    .h-community-post-content {
        
        line-height: 1.75;
    font-size: var(--hgos-type-3-size) !important;
    font-weight: 500 !important;
}
    .h-community-post-actions .h-btn, .h-community-post-actions button {
        min-height: 40px;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
    .h-community-own-action {
        min-height: 30px;
        height: 30px;
        padding: 0 8px;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
    .h-community-post-stat {
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
    .h-community-empty {
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
    .h-community-more-btn {
        min-height: 48px;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
}
@media (max-width: 420px) {
    .h-community-heading .h-eyebrow {
    font-size: var(--hgos-type-4-size) !important;
    font-weight: 400 !important;
}
    .h-community-heading .h-community-title {
    font-size: var(--hgos-type-1-size) !important;
    font-weight: 700 !important;
}
    .h-community-filter-select {
        flex-basis: 112px !important;
        width: 112px !important;
        min-height: 45px !important;
        height: 45px !important;
    font-size: var(--hgos-type-3-size) !important;
    font-weight: 500 !important;
}
    .h-community-filter-input {
        min-height: 45px !important;
        height: 45px !important;
    font-size: var(--hgos-type-3-size) !important;
    font-weight: 500 !important;
}
    .h-community-filter-input::placeholder {
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
    .h-community-post-author {
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
    .h-community-post-meta {
    font-size: var(--hgos-type-4-size) !important;
    font-weight: 400 !important;
}
    .h-community-post-content {
    font-size: var(--hgos-type-3-size) !important;
    font-weight: 500 !important;
}
    .h-community-post-actions .h-btn, .h-community-post-actions button {
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
    .h-community-own-action {
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
}


#gvModal .h-modal-footer {
    border-top: 1px solid #ece7f2 !important;
    background: #fff !important;}


.h-toast {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(460px, calc(100vw - 40px)) !important;
    max-width: 460px !important;
    text-align: center !important;
    transform: translate(-50%, -50%) translateY(14px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .2s ease, transform .2s ease !important;}
.h-toast.is-visible {
    transform: translate(-50%, -50%) translateY(0) !important;
    opacity: 1 !important;}

@media (max-width:420px) {
    .h-toast {
        width: calc(100vw - 28px) !important;
        min-height: 50px !important;
        padding: 14px 16px !important;
    font-size: var(--hgos-type-4-size) !important;
    font-weight: 400 !important;
}
}


#gvModal {
    z-index: 1000002 !important;}
#gvModal .h-modal-footer .h-btn, #gvModal .h-modal-footer button {
    font-weight: 700 !important;}
.h-toast {
    z-index: 1000001 !important;
    background: #17131f !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 14px 38px rgba(0,0,0,.28) !important;
    min-height: 48px !important;
    padding: 13px 17px !important;
    border-radius: 12px !important;
    
    
    line-height: 1.5 !important;
    font-size: var(--hgos-type-3-size) !important;
    font-weight: 500 !important;
}


#gvModal .h-modal-footer .h-btn, #gvModal .h-modal-footer button {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 16px !important;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
@media (max-width:768px) {
    #gvModal .h-modal-footer .h-btn, #gvModal .h-modal-footer button {
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 14px !important;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
}

.h-modal.is-open {
    display: flex !important;}
.h-modal-header-close.is-hidden {
    display: none !important;}
.h-community-gift-content {
    text-align: center;
    padding: 10px 4px 4px;}
.h-community-gift-icon {
    font-size: 42px;
    margin-bottom: 12px;}
.h-community-gift-title {
    
    
    margin-bottom: 8px;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
.h-community-gift-description {
    
    color: var(--h-muted);
    margin-bottom: 18px;
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
.h-community-gift-amount-row {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 360px;
    margin: 0 auto;}
.h-community-gift-amount-input {
    text-align: center;}
.h-community-gift-amount-unit {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--h-primary);}
.h-community-gift-help {
    margin-top: 10px;
    color: var(--h-muted);
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
.h-community-gift-success-note {
    
    color: var(--h-muted);
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
.h-community-post-success-content {
    text-align: center;
    padding: 12px 4px 6px;}
.h-community-post-success-icon {
    font-size: 46px;
    margin-bottom: 12px;}
.h-community-post-success-title {
    
    
    color: var(--h-title);
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
.h-community-post-success-message {
    margin-top: 8px;
    color: var(--h-muted);
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
.h-community-post-reward-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 20px;}
.h-community-post-reward-card {
    padding: 14px 8px;
    border: 1px solid var(--h-border);
    border-radius: 12px;
    background: var(--h-soft);}
.h-community-post-reward-label {
    color: var(--h-muted);
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
.h-community-post-reward-value {
    display: block;
    margin-top: 4px;
    color: var(--h-primary);
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
.h-alert-content {
    text-align: center;
    padding: 34px 20px;}
.h-alert-icon {
    font-size: 52px;
    margin-bottom: 18px;}
.h-alert-message {
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
.h-page, .h-modal, .h-loading, .h-toast {
    --h-primary: #7407ff;
    --h-primary-light: #9f78ff;
    --h-primary-dark: #5824d6;
    --h-bg: #f7f5fd;
    --h-bg-soft: #f5f1ff;
    --h-surface: #ffffff;
    --h-card: #ffffff;
    --h-soft: #f5f1ff;
    --h-title: #2e2844;
    --h-text: #55566a;
    --h-muted: #9091a5;
    --h-success: #37c978;
    --h-warning: #ffb347;
    --h-danger: #ff5a7c;
    --h-border: #ddd2ff;
    --h-radius-sm: 16px;
    --h-radius: 24px;
    --h-radius-lg: 32px;
    --h-shadow: 0 12px 40px rgba(92, 63, 170, .08);
    --h-shadow-soft: 0 12px 40px rgba(92, 63, 170, .08);
    --h-shadow-hover: 0 18px 60px rgba(92, 63, 170, .12);}
.h-page, .h-modal, .h-loading, .h-toast {
    color: var(--h-text);
    font-family: Pretendard, "Noto Sans KR", sans-serif;
    
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}
.h-page {
    color: var(--h-text);}
.h-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius);
    box-shadow: var(--h-shadow);}
.h-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--h-shadow-hover);}
.h-card-body {
    padding: 32px;}
.h-title {
    color: var(--h-title);
    
    
    line-height: 1.3;
    letter-spacing: normal;
    font-size: var(--hgos-type-1-size);
    font-weight: 700;
}
.h-description {
    color: var(--h-muted);
    font-weight: 400;}
.h-label {
    color: var(--h-title);
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}
.h-label-help {
    color: var(--h-muted);
    font-weight: 400;}
.h-input, .h-select, .h-textarea {
    border-color: var(--h-border);
    border-radius: 16px;
    color: var(--h-text);}
.h-input:focus, .h-select:focus, .h-textarea:focus {
    border-color: var(--h-primary);
    box-shadow: 0 0 0 4px rgba(116, 7, 255, .08);}
.h-btn {
    min-height: 48px;
    height: 48px;
    padding: 0 24px;
    border-radius: 16px;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
.h-btn-primary {
    background: linear-gradient(135deg, var(--h-primary), var(--h-primary-light));
    color: #fff;
    box-shadow: none;}
.h-btn-primary:hover {
    background: linear-gradient(135deg, var(--h-primary), var(--h-primary-light));}
.h-btn-outline {
    background: #fff;
    border: 1px solid var(--h-border);
    color: var(--h-title);}
.h-btn-secondary, .h-btn-light {
    background: var(--h-bg-soft);
    color: var(--h-primary);}
.h-community-composer {
    border-color: var(--h-border);
    border-radius: 16px;
    background: var(--h-bg-soft);}
.h-community-composer-head strong {
    color: var(--h-title);
    font-weight: 700;}
.h-community-composer-head span {
    color: var(--h-muted);
    font-weight: 400;}
.h-community-voice-btn {
    border-color: var(--h-border);
    background: #fff;
    color: var(--h-primary);}
.h-community-voice-btn:hover {
    border-color: var(--h-primary);
    background: var(--h-bg-soft);}
.h-community-feed strong, .h-community-feed b, .h-community-post strong, .h-community-post b {
    font-weight: 700;}
.h-community-post-meta, .h-community-post-time, .h-community-empty, .h-community-help {
    color: var(--h-muted);}
.h-modal {
    background: rgba(25, 25, 35, .45);
    backdrop-filter: blur(6px);}
.h-modal-dialog {
    border-radius: 24px;
    box-shadow: var(--h-shadow-hover);}
.h-modal-header {
    border-bottom-color: var(--h-border);}
.h-modal-body {
    padding: 28px;}
.h-modal-footer {
    border-top-color: var(--h-border);}
@media (max-width:768px) {
    .h-card-body {
        padding: 20px;}
    .h-card {
        border-radius: 18px;}
    .h-modal-dialog {
        border-radius: 20px;}
    .h-modal-body {
        padding: 20px;}
    .h-btn {
        min-height: 48px;
        height: 48px;
        padding: 0 20px;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
}
.h-page .h-community-more-btn {
    
    
    line-height: 1.2;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
.h-page .h-community-own-action {
    font-weight: 700;
    line-height: 1;}
.h-modal .h-modal-header .h-btn {
    
    
    line-height: 1;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
@media (max-width:768px) {
    .h-page .h-community-more-btn {
        min-width: 120px;
        min-height: 40px;
        padding: 0 14px;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
    .h-page .h-community-own-action {
        min-height: 27px;
        padding: 0 7px;
        border-radius: 7px;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}
}
.h-page button, .h-modal button {
    font-family: Pretendard,         -apple-system,         BlinkMacSystemFont,         "Segoe UI",         Roboto,         "Noto Sans KR",         sans-serif !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: -0.015em !important;}
.h-page .h-community-actions .h-btn {
    min-height: 38px;
    height: 38px;
    padding: 0 13px !important;
    border-radius: 10px !important;}
.h-page .h-community-actions .h-community-refresh {
    width: 38px;
    min-width: 38px;
    padding: 0 !important;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
.h-page .h-community-actions .h-community-write {
    min-height: 38px;
    height: 38px;
    padding: 0 14px !important;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
.h-page .h-community-more-btn {
    min-width: 130px;
    min-height: 38px;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;}
.h-page .h-community-own-action {
    min-height: 30px;
    height: 30px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
.h-modal .h-modal-header .h-btn {
    min-height: 38px;
    height: 38px;
    padding: 0 14px !important;
    border-radius: 10px !important;}
@media (max-width:768px) {
    .h-page .h-community-actions .h-btn {
        min-height: 34px;
        height: 34px;
        padding: 0 10px !important;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
    .h-page .h-community-actions .h-community-refresh {
        width: 34px;
        min-width: 34px;
        padding: 0 !important;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
    .h-page .h-community-actions .h-community-write {
        min-height: 34px;
        height: 34px;
        padding: 0 10px !important;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
    .h-page .h-community-own-action {
        min-height: 26px;
        height: 26px;
        padding: 0 6px;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
    .h-page .h-community-more-btn {
        width: 100%;
        min-height: 38px;
        height: 38px;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
}
.h-page {
    background: transparent !important;}
@media (min-width:769px) {
    .h-page {
        background: transparent !important;}
}
@media (max-width:768px) {
    .h-page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        background: transparent !important;}
    .h-page > .h-card, .h-page .h-card {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;}
    #sectionCommunity .h-card-body {
        padding-left: 8px !important;
        padding-right: 8px !important;}
    #sectionCommunity .h-community-feed, #sectionCommunity .h-community-post, #sectionCommunity .h-community-post-content, #sectionCommunity .h-community-media {
        width: 100% !important;
        max-width: none !important;}
    #sectionCommunity .h-community-video:not(.h-community-video-vertical) {
        width: 100% !important;
        max-width: none !important;}
    #sectionCommunity .h-community-image {
        width: 100% !important;
        max-width: none !important;}
}
@media (max-width:480px) {
    #sectionCommunity {
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 10px !important;}
    #sectionCommunity .h-card-body {
        padding-left: 4px !important;
        padding-right: 4px !important;}
    #sectionCommunity .h-community-header, #sectionCommunity .h-community-filter {
        margin-left: 4px !important;
        margin-right: 4px !important;
        width: calc(100% - 8px) !important;}
    #sectionCommunity .h-community-feed {
        margin-left: 0 !important;
        margin-right: 0 !important;}
    #sectionCommunity .h-community-media {
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 10px !important;}
    #sectionCommunity .h-community-video:not(.h-community-video-vertical), #sectionCommunity .h-community-video:not(.h-community-video-vertical) iframe {
        width: 100% !important;
        max-width: none !important;}
}
@media (max-width:420px) {
    .h-page {
        padding-left: 0 !important;
        padding-right: 0 !important;}
    #sectionCommunity .h-card-body {
        padding-left: 3px !important;
        padding-right: 3px !important;}
    #sectionCommunity .h-community-header, #sectionCommunity .h-community-filter {
        margin-left: 3px !important;
        margin-right: 3px !important;
        width: calc(100% - 6px) !important;}
}
/* ==========================================================
   HGOS COMMUNITY — DEPLOY FIX 2026-09-21
   Scope: community page only.
   hgos-common.css is intentionally untouched.
   ========================================================== */ .community-page {
    width:min(100%, var(--hgos-content, 1100px)) !important;
    max-width:var(--hgos-content, 1100px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;}
#sectionCommunity {
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;}
#sectionCommunity .h-community-post-actions {
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    margin-top:14px !important;}
#sectionCommunity .h-review-action {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    min-height:36px !important;
    padding:0 12px !important;
    border:1px solid var(--hgos-border, #ddd2ff) !important;
    border-radius:10px !important;
    background:#fff !important;
    color:var(--hgos-title, #2e2844) !important;
    font-family:inherit !important;
    
    
    line-height:1 !important;
    cursor:pointer !important;
    transition:.18s ease !important;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
#sectionCommunity .h-review-action:hover {
    border-color:var(--hgos-primary, #7407ff) !important;
    background:var(--hgos-primary-soft, #f5f1ff) !important;
    color:var(--hgos-primary, #7407ff) !important;}
#sectionCommunity .h-review-action:disabled {
    opacity:.55 !important;
    cursor:wait !important;}
/* 글쓰기/수정/감사선물/클래스관리 공용 #gvModal */ #gvModal.h-modal[aria-hidden="true"] {
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;}
#gvModal.h-modal.is-open[aria-hidden="false"] {
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    position:fixed !important;
    inset:0 !important;
    z-index:99998 !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:auto !important;}
#gvModal.h-modal.is-open > .h-modal-dialog {
    position:relative !important;
    z-index:1 !important;}
/* 성장클래스 영상 모달 */ @media (max-width:768px) {
    .community-page {
        width:100% !important;
        max-width:100% !important;
        padding-left:var(--hgos-page-gap-mobile, 20px) !important;
        padding-right:var(--hgos-page-gap-mobile, 20px) !important;}
    #sectionCommunity .h-review-action {
        min-height:34px !important;
        padding:0 10px !important;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
}
/* ==========================================================
   COMMUNITY HEADER / ACTIONS — 2026-09-21
   첨부 community 페이지 전용 보정
   ========================================================== */ /* 성장클래스: 주요 CTA로 강조 */ /* 글쓰기 연필: 아이콘 전용 소형 버튼 */ #sectionCommunity #btnCommunityWrite.h-community-write-icon {
    flex:0 0 38px !important;
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    
    line-height:1 !important;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
/* 모바일: 제목을 첫 줄, 4개 액션을 다음 줄에 모두 유지 */ @media (max-width:768px) {
    #sectionCommunity .h-community-header {
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:12px !important;}
    #sectionCommunity .h-community-heading {
        width:100% !important;
        overflow:visible !important;}
    #sectionCommunity .h-community-heading .h-eyebrow {
        white-space:normal !important;
        overflow:visible !important;
        text-overflow:clip !important;}
    #sectionCommunity .h-community-heading .h-community-title {
        display:block !important;
        width:100% !important;
        white-space:normal !important;
        overflow:visible !important;
        text-overflow:clip !important;
        line-height:1.25 !important;}
    #sectionCommunity .h-community-actions {
        display:grid !important;
        grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr) 36px !important;
        align-items:center !important;
        gap:6px !important;
        width:100% !important;
        white-space:nowrap !important;}
    #sectionCommunity #btnCommunityMine {
        width:100% !important;
        min-width:0 !important;
        padding-inline:8px !important;}
    #sectionCommunity #btnCommunityRefresh {
        width:36px !important;
        min-width:36px !important;
        height:36px !important;
        min-height:36px !important;
        padding:0 !important;}
    #sectionCommunity #btnCommunityWrite.h-community-write-icon {
        width:36px !important;
        min-width:36px !important;
        height:36px !important;
        min-height:36px !important;
        padding:0 !important;}
}
@media (max-width:420px) {
    #sectionCommunity .h-community-actions {
        grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) 34px !important;
        gap:5px !important;}
    #sectionCommunity #btnCommunityMine {
        
        padding-inline:6px !important;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
    #sectionCommunity #btnCommunityRefresh, #sectionCommunity #btnCommunityWrite.h-community-write-icon {
        width:34px !important;
        min-width:34px !important;
        height:34px !important;
        min-height:34px !important;}
}
/* ==========================================================
   COMMUNITY — CLASS BUTTON / PAYMENT CTA FIX 2026-09-21
   공통 CSS는 수정하지 않고 community.css에서만 보정
   ========================================================== */ /* 상단 클래스 버튼: 아이콘 없이 텍스트 가독성 강화 */ /* 클래스 시청 결제 모달: 취소 / 결제하기 버튼을 명확하게 표시 */ /* 취소 */ /* 결제하기 */ 
/* ==========================================================
   COMMUNITY CLASS CTA — TEXT CLARITY FIX 2026-09-21
   ========================================================== */ 

/* ==========================================================
   COMMUNITY CLASS CTA — COLOR EMPHASIS / LIGHTER TYPE 2026-09-21
   글자 획은 가볍게, 버튼 색상 대비로 시선을 집중시킨다.
   ========================================================== */


/* ==========================================================
   COMMUNITY MOBILE WIDTH / CTA VISIBILITY FIX 2026-09-24
   1) 모바일 공용 헤더와 본문 좌우 폭 통일
   2) 성장클래스 버튼 보라색 강조
   3) 글쓰기 버튼 테두리 강조
   ========================================================== */

/* 성장클래스: 주요 이동 버튼 */
#sectionCommunity #btnGrowthClass {
    border: 1px solid var(--hgos-primary, #7407ff) !important;
    background: var(--hgos-primary, #7407ff) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 5px 14px rgba(116, 7, 255, .16) !important;}

#sectionCommunity #btnGrowthClass:hover,
#sectionCommunity #btnGrowthClass:focus-visible {
    border-color: var(--hgos-primary-hover, #6500e6) !important;
    background: var(--hgos-primary-hover, #6500e6) !important;
    color: #fff !important;}

/* 글쓰기: 아이콘 버튼 외곽선을 명확하게 표시 */
#sectionCommunity #btnCommunityWrite.h-community-write-icon {
    border: 1.5px solid var(--hgos-primary, #7407ff) !important;
    background: #fff !important;
    color: var(--hgos-primary, #7407ff) !important;
    box-shadow: 0 2px 8px rgba(116, 7, 255, .10) !important;}

#sectionCommunity #btnCommunityWrite.h-community-write-icon:hover,
#sectionCommunity #btnCommunityWrite.h-community-write-icon:focus-visible {
    background: var(--hgos-primary-soft, #f5f1ff) !important;
    border-color: var(--hgos-primary, #7407ff) !important;}

/*
 * 기존 파일 마지막 모바일 override가 좌우 20px을 다시 부여하여
 * 공용 헤더보다 본문이 좁아졌다.
 * 모바일에서는 공용 헤더와 동일한 8px 외곽 여백으로 맞춘다.
 */
@media (max-width: 768px) {
    .community-page {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;}

    #sectionCommunity {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;}

    #sectionCommunity #btnGrowthClass {
        min-width: 0 !important;
        width: 100% !important;
        padding-inline: 8px !important;}

    #sectionCommunity #btnCommunityWrite.h-community-write-icon {
        border-width: 1.5px !important;}
}

@media (max-width: 420px) {
    .community-page {
        padding-left: 8px !important;
        padding-right: 8px !important;}

    #sectionCommunity #btnGrowthClass {
        
        padding-inline: 6px !important;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}
}


/* ============================================================
 * COMMUNITY COMMENT
 * ------------------------------------------------------------
 * Feed top-level comments only.
 * No reply / nested-comment UI in V1.
 * ============================================================ */

.h-community-comment-panel {
    margin-top: 12px;
    padding: 14px 0 2px;
    border-top: 1px solid var(--h-border);}

.h-community-comment-panel[hidden] {
    display: none !important;}

.h-community-comment-list {
    display: flex;
    flex-direction: column;
    gap: 0;}

.h-community-comment-item {
    padding: 12px 2px;
    border-bottom: 1px solid #eeeaf4;}

.h-community-comment-item:last-child {
    border-bottom: 0;}

.h-community-comment-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;}

.h-community-comment-author-wrap {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;}

.h-community-comment-author {
    color: var(--h-title);
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}

.h-community-comment-date {
    color: var(--h-muted);
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}

.h-community-comment-content {
    margin-top: 5px;
    color: var(--h-text);
    
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}

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

.h-community-comment-action {
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid var(--h-border);
    border-radius: 8px;
    background: #fff;
    color: var(--h-muted);
    
    
    cursor: pointer;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}

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

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

.h-community-comment-action.is-primary,
.h-community-comment-submit {
    border-color: var(--h-primary);
    background: var(--h-primary);
    color: #fff;}

.h-community-comment-action.is-primary:hover,
.h-community-comment-submit:hover {
    background: var(--h-primary-dark);
    color: #fff;}

.h-community-comment-action:disabled {
    opacity: .55;
    cursor: wait;}

.h-community-comment-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--h-border);}

.h-community-comment-input,
.h-community-comment-edit-input {
    width: 100%;
    min-height: 42px;
    padding: 10px 11px;
    border: 1px solid var(--h-border);
    border-radius: 10px;
    background: #fff;
    color: var(--h-text);
    font: inherit;
    
    line-height: 1.5;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}

.h-community-comment-input {
    flex: 1 1 auto;
    max-height: 120px;}

.h-community-comment-input:focus,
.h-community-comment-edit-input:focus {
    border-color: var(--h-primary);
    box-shadow: 0 0 0 3px rgba(116, 7, 255, .07);}

.h-community-comment-submit {
    flex: 0 0 auto;
    min-width: 62px;
    min-height: 42px;
    padding: 0 13px;}

.h-community-comment-edit-area {
    margin-top: 7px;}

.h-community-comment-edit-area[hidden] {
    display: none !important;}

.h-community-comment-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 6px;}

.h-community-comment-empty,
.h-community-comment-loading,
.h-community-comment-error,
.h-community-comment-disabled {
    padding: 12px 4px;
    color: var(--h-muted);
    
    line-height: 1.55;
    text-align: center;
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}

.h-community-comment-error {
    color: var(--h-danger);}

@media (max-width: 768px) {
    .h-community-comment-panel {
        margin-top: 10px;
        padding-top: 11px;}

    .h-community-comment-item {
        padding: 10px 1px;}

    .h-community-comment-author {
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}

    .h-community-comment-date {
    font-size: var(--hgos-type-4-size);
    font-weight: 400;
}

    .h-community-comment-content {
        
        line-height: 1.55;
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}

    .h-community-comment-action {
        min-height: 26px;
        padding: 0 6px;
        border-radius: 7px;
    font-size: var(--hgos-type-2-size);
    font-weight: 700;
}

    .h-community-comment-composer {
        gap: 6px;}

    .h-community-comment-input {
        min-height: 40px;
    font-size: var(--hgos-type-3-size);
    font-weight: 500;
}

    .h-community-comment-submit {
        min-width: 56px;
        min-height: 40px;
        padding: 0 10px;}
}

/* ============================================================
 * COMMUNITY COMMENT — COMPACT SPACING
 * 댓글 영역을 일반 피드보다 조밀하게 표시
 * ============================================================ */

.h-community-comment-panel {
    margin-top: 8px;
    padding-top: 8px;}

.h-community-comment-item {
    padding: 7px 2px;}

.h-community-comment-author-wrap {
    gap: 5px;}

.h-community-comment-content {
    margin-top: 2px;
    line-height: 1.45;}

.h-community-comment-composer {
    margin-top: 6px;
    padding-top: 8px;}

@media (max-width: 768px) {
    .h-community-comment-panel {
        margin-top: 7px;
        padding-top: 7px;}

    .h-community-comment-item {
        padding: 6px 1px;}

    .h-community-comment-content {
        margin-top: 2px;
        line-height: 1.45;}

    .h-community-comment-composer {
        margin-top: 5px;
        padding-top: 7px;}
}


/* ============================================================
 * COMMUNITY COMMENT — ULTRA COMPACT
 * 댓글을 피드의 보조 대화영역처럼 최소 높이로 표시
 * ============================================================ */

.h-community-comment-panel {
    margin-top: 4px !important;
    padding-top: 4px !important;}

.h-community-comment-item {
    padding: 4px 2px !important;}

.h-community-comment-head {
    align-items: center !important;
    min-height: 24px;}

.h-community-comment-author-wrap {
    gap: 4px !important;}

.h-community-comment-author {
    
    line-height: 1.25 !important;
    font-size: var(--hgos-type-4-size) !important;
    font-weight: 400 !important;
}

.h-community-comment-date {
    
    line-height: 1.25 !important;
    font-size: var(--hgos-type-4-size) !important;
    font-weight: 400 !important;
}

.h-community-comment-content {
    margin-top: 0 !important;
    padding: 1px 0 2px 10px !important;
    
    line-height: 1.35 !important;
    font-size: var(--hgos-type-3-size) !important;
    font-weight: 500 !important;
}

.h-community-comment-own-actions {
    gap: 3px !important;}

.h-community-comment-action {
    min-height: 24px !important;
    padding: 0 6px !important;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}

.h-community-comment-composer {
    margin-top: 4px !important;
    padding-top: 5px !important;
    gap: 6px !important;}

.h-community-comment-input {
    min-height: 34px !important;
    height: 34px !important;
    max-height: 70px !important;
    padding: 7px 9px !important;
    
    line-height: 1.35 !important;
    resize: vertical;
    font-size: var(--hgos-type-3-size) !important;
    font-weight: 500 !important;
}

.h-community-comment-submit {
    min-width: 54px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 9px !important;
    font-size: var(--hgos-type-4-size) !important;
    font-weight: 400 !important;
}

.h-community-comment-empty,
.h-community-comment-loading,
.h-community-comment-error,
.h-community-comment-disabled {
    padding: 7px 3px !important;
    
    line-height: 1.4 !important;
    font-size: var(--hgos-type-4-size) !important;
    font-weight: 400 !important;
}

@media (max-width: 768px) {
    .h-community-comment-panel {
        margin-top: 3px !important;
        padding-top: 3px !important;}

    .h-community-comment-item {
        padding: 3px 1px !important;}

    .h-community-comment-head {
        min-height: 22px;}

    .h-community-comment-content {
        padding: 0 0 2px 8px !important;
        
        line-height: 1.3 !important;
    font-size: var(--hgos-type-3-size) !important;
    font-weight: 500 !important;
}

    .h-community-comment-action {
        min-height: 22px !important;
        padding: 0 5px !important;
    font-size: var(--hgos-type-2-size) !important;
    font-weight: 700 !important;
}

    .h-community-comment-composer {
        margin-top: 3px !important;
        padding-top: 4px !important;}

    .h-community-comment-input {
        min-height: 32px !important;
        height: 32px !important;
        padding: 6px 8px !important;}

    .h-community-comment-submit {
        min-width: 50px !important;
        min-height: 32px !important;
        height: 32px !important;}
}


/* ============================================================
 * COMMUNITY COMMENT — FINAL COMPACT ALIGNMENT
 * - 댓글 본문 왼쪽 들여쓰기 제거
 * - 댓글 입력칸 높이 추가 축소
 * ============================================================ */

.h-community-comment-content {
    margin-top: 1px !important;
    padding: 0 0 2px 0 !important;}

.h-community-comment-input {
    min-height: 28px !important;
    height: 28px !important;
    max-height: 60px !important;
    padding: 5px 8px !important;
    line-height: 1.3 !important;}

.h-community-comment-submit {
    min-height: 28px !important;
    height: 28px !important;
    min-width: 52px !important;
    padding: 0 8px !important;}

.h-community-comment-composer {
    align-items: center !important;
    margin-top: 3px !important;
    padding-top: 4px !important;}

@media (max-width: 768px) {
    .h-community-comment-content {
        margin-top: 1px !important;
        padding: 0 0 2px 0 !important;}

    .h-community-comment-input {
        min-height: 28px !important;
        height: 28px !important;
        max-height: 56px !important;
        padding: 5px 7px !important;
        line-height: 1.25 !important;}

    .h-community-comment-submit {
        min-height: 28px !important;
        height: 28px !important;
        min-width: 50px !important;
        padding: 0 7px !important;}

    .h-community-comment-composer {
        margin-top: 2px !important;
        padding-top: 3px !important;}
}

/* ============================================================
 * COMMUNITY COMMENT — BALANCED COMPACT FINAL
 * 2026-09-24
 * - 현재 정렬/들여쓰기 제거 상태 유지
 * - 댓글 상하 간격만 소폭 확대
 * - 댓글 입력창 높이 확대
 * ============================================================ */

.h-community-comment-panel {
    margin-top: 5px !important;
    padding-top: 5px !important;}

.h-community-comment-item {
    padding: 6px 2px !important;}

.h-community-comment-head {
    min-height: 25px !important;}

.h-community-comment-content {
    margin-top: 2px !important;
    padding: 0 0 3px 0 !important;
    line-height: 1.4 !important;}

.h-community-comment-composer {
    align-items: center !important;
    margin-top: 5px !important;
    padding-top: 6px !important;
    gap: 7px !important;}

.h-community-comment-input {
    min-height: 36px !important;
    height: 36px !important;
    max-height: 80px !important;
    padding: 7px 9px !important;
    line-height: 1.35 !important;}

.h-community-comment-submit {
    min-height: 36px !important;
    height: 36px !important;
    min-width: 54px !important;
    padding: 0 9px !important;}

@media (max-width: 768px) {
    .h-community-comment-panel {
        margin-top: 4px !important;
        padding-top: 4px !important;}

    .h-community-comment-item {
        padding: 5px 1px !important;}

    .h-community-comment-head {
        min-height: 24px !important;}

    .h-community-comment-content {
        margin-top: 2px !important;
        padding: 0 0 3px 0 !important;
        line-height: 1.35 !important;}

    .h-community-comment-composer {
        margin-top: 4px !important;
        padding-top: 5px !important;
        gap: 6px !important;}

    .h-community-comment-input {
        min-height: 36px !important;
        height: 36px !important;
        max-height: 72px !important;
        padding: 7px 8px !important;
        line-height: 1.3 !important;}

    .h-community-comment-submit {
        min-height: 36px !important;
        height: 36px !important;
        min-width: 52px !important;
        padding: 0 8px !important;}
}

/* ==========================================================
   COMMUNITY MODAL — REFINED CLOSE BUTTON
   우측 상단의 '닫기'를 작은 보조 액션 버튼으로 통일한다.
   ========================================================== */

#gvModal .h-modal-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 62px;
    padding-right: 88px;
}

#gvModal .h-modal-header-close,
#gvModal #btnCloseModal {
    position: absolute !important;
    top: 50% !important;
    right: 18px !important;
    transform: translateY(-50%) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 54px !important;
    height: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 0 13px !important;

    border: 1px solid #e7e1ef !important;
    border-radius: 999px !important;

    background: #f8f6fb !important;
    color: #6b6477 !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;

    box-shadow: none !important;
    cursor: pointer !important;
    z-index: 3 !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease !important;
}

#gvModal .h-modal-header-close:hover,
#gvModal #btnCloseModal:hover {
    border-color: rgba(116, 7, 255, .22) !important;
    background: var(--h-primary-soft, #f5f1ff) !important;
    color: var(--h-primary, #7407ff) !important;
}

#gvModal .h-modal-header-close:active,
#gvModal #btnCloseModal:active {
    transform: translateY(-50%) scale(.97) !important;
}

#gvModal .h-modal-header-close:focus-visible,
#gvModal #btnCloseModal:focus-visible {
    outline: 3px solid rgba(116, 7, 255, .12) !important;
    outline-offset: 2px !important;
}

#gvModal .h-modal-header-close.is-hidden,
#gvModal #btnCloseModal.is-hidden,
#gvModal .h-modal-header-close[hidden],
#gvModal #btnCloseModal[hidden] {
    display: inline-flex !important;
}

@media (max-width: 768px) {
    #gvModal .h-modal-header {
        min-height: 58px;
        padding-right: 78px;
    }

    #gvModal .h-modal-header-close,
    #gvModal #btnCloseModal {
        right: 12px !important;
        min-width: 50px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 11px !important;
        font-size: 13px !important;
    }
}