/* HGPS Frontend CSS
 * Migrated from the uploaded production widget.
 * Source CSS preserved; no visual redesign in this migration.
 */
/* ==========================================================
   HANAIN HGOS
   CONSCIOUSNESS NAVIGATION UI
   Mobile First / Simplified Frontend
   ========================================================== */
 

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

    :root {

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

        /* Text */
        --h-title: #17131f;
        --h-text: #393442;
        --h-muted: #77717f;

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

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

        /* 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(40, 20, 70, .07);

        --h-shadow-soft: 0 3px 12px rgba(40, 20, 70, .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 4px 70px;

    }


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

.h-header{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    margin-bottom:26px;

}

.h-header-title{

    font-size:50px;

    font-weight:700;

    line-height:1;

    letter-spacing:-0.03em;

    color:var(--h-title);

}

.h-header-subtitle{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:4px;

    color:var(--h-muted);

    font-size:18px;

    font-weight:500;

}

.h-header-divider{

    color:#cfc7dd;

}

.h-header-link{

    color:var(--h-title);

    font-weight:700;

    text-decoration:none;

}

.h-header-link:hover{

    color:var(--h-primary);

}

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

@media(max-width:768px){

    .h-header{

        margin-bottom:18px;

    }

    .h-header-title{

        font-size:20px;

    }

    .h-header-subtitle{

        font-size:14px;

        gap:6px;

    }

}


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

    .h-card {

        width:100%;
        background:var(--h-card);
        border:1px solid var(--h-border);
 
        box-shadow:0 5px 18px rgba(40,20,70,.045);
        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;

    }


/* ==========================================================
   PROFILE INFO BUTTON
   회원명 / 회원코드 / 회원등급 옆의 내정보
   ========================================================== */

.h-profile-info-button {

    display: inline-flex;

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

    min-height: 24px;

    padding: 0 7px;

    border: 0;

    border-radius: 999px;

    background: transparent;

    color: var(--h-primary);

    font-size: 12px;

    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background .18s ease,
        color .18s ease;

}


.h-profile-info-button:hover {

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

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

}

@media(max-width:768px) {

    .h-profile-info-button {

        min-height: 22px;

        padding: 0 5px;

        font-size: 11px;

    }

}

    /* ----------------------------------------------------------
   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);

    }


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

    .h-session-bar {

        display: flex;

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

        gap: 14px;

    }


    .h-session-current {

        display: flex;

        align-items: center;

        flex-wrap: wrap;

        gap: 4px;

        min-width: 0;

        color: var(--h-text);

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

    }


    .h-session-icon {

        margin-right: 1px;

    }


    .h-primary {

        color: var(--h-primary);

        font-weight: 700;

    }


 /* ==========================================================
   SESSION FLOW NAVIGATION
   체크인 → 내비게이션 → 리포트 → 리뷰
   ========================================================== */

.h-session-flow {

    display: grid;

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

    gap: 10px;

    margin-top: 16px;

}


/* ----------------------------------------------------------
   FLOW ITEM
   ---------------------------------------------------------- */

.h-session-flow-item {

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

}


/* ----------------------------------------------------------
   TOP BUTTON
   ---------------------------------------------------------- */

.h-session-flow-button {

    width: 100%;

    min-height: 40px;

    display: inline-flex;

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

    padding: 0 10px;

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

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

    background: #fff;

    color: var(--h-title);

    font-size: 13px;

    font-weight: 700;

    line-height: 1;

    white-space: nowrap;

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

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

}


/* ----------------------------------------------------------
   HOVER
   ---------------------------------------------------------- */

.h-session-flow-button: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);

}


/* ----------------------------------------------------------
   ACTIVE
   ---------------------------------------------------------- */

.h-session-flow-button.is-active {

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

    background:
        var(--h-primary);

    color:
        #fff;

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

}


/* ----------------------------------------------------------
   ARROW
   ---------------------------------------------------------- */

.h-session-flow-arrow {

    margin-top: 5px;

    color:
        var(--h-primary);

    font-size: 14px;

    font-weight: 700;

    line-height: 1;

}


/* ----------------------------------------------------------
   BOTTOM LABEL
   ---------------------------------------------------------- */

.h-session-flow-label {

    margin-top: 4px;

    color:
        var(--h-muted);

    font-size: 11px;

    font-weight: 600;

    line-height: 1.3;

    text-align: center;

    white-space: nowrap;

}


/* ----------------------------------------------------------
   ACTIVE LABEL
   ---------------------------------------------------------- */

.h-session-flow-item.is-active
.h-session-flow-label {

    color:
        var(--h-primary);

    font-weight: 700;

}


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

@media(max-width:768px) {

    .h-session-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 16px;
    }

    .h-session-flow-button {
        min-height: 52px;
        padding: 0 10px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 800;
    }

    .h-session-flow-label,
    .h-session-flow-arrow {
        display: none;
    }

}


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

@media(max-width:380px) {
    .h-session-flow { gap: 8px; }
    .h-session-flow-button { min-height: 48px; font-size: 14px; }
}

 

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

    .h-profile-message {

        margin-top: 9px;

        color: var(--h-muted);

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

    }


    /* ==========================================================
   PROFILE MOBILE
   ========================================================== */

    @media(max-width:768px) {


        .h-profile-top {

            gap: 11px;

        }


        .h-profile-avatar {

            flex-basis: 46px;

            width: 46px;
            height: 46px;

            font-size: 18px;

        }


        .h-profile-name {

            font-size: 15px;

        }


        .h-profile-meta {

            font-size: 13px;

        }


        .h-profile-assets-inline {

            margin-top: 2px;

            font-size: 12px;

        }


        .h-profile-divider {

            margin: 14px 0 12px;

        }


        .h-session-current {

            font-size: 13px;

        }


        .h-btn-sm {

            min-height: 31px;

            padding: 0 15px;

            font-size: 12px;

        }


        .h-profile-message {

            margin-top: 8px;

            font-size: 13px;

        }

    }

    /* ==========================================================
   8. CHECK-IN
   ========================================================== */

    #sectionCheckIn {

        margin-top: 20px;

    }

    .h-checkin-card {

       background: linear-gradient(
        180deg,
        #ffffff 0%,
        #fcfbff 65%,
        #f8f4ff 100%);

    }

    .h-checkin-intro {

        margin-bottom: 24px;

    }

    .h-checkin-question {

        margin: 0;

        color: var(--h-title);

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

        line-height: 1.4;

        letter-spacing: -.03em;

    }

    .h-checkin-guide {

        margin: 8px 0 0;

        color: var(--h-muted);

        font-size: 16px;

    }


    /* ==========================================================
   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%;
    }

    .h-checkin-submit {

        margin-top: 26px;

        min-height: 58px;

        border-radius: 14px;

        font-size: 17px;

    }

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

    .h-checkin-submit.is-locked {

    opacity: .55;

    cursor: pointer;

    filter: grayscale(.15);

    }


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

.h-label-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:10px;

}

.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;

}

    /* ==========================================================
   CHECK-IN EMOTION GRID
   ========================================================== */

.h-emotion-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.h-emotion-option {
    position: relative;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border: 1px solid var(--h-border);
    border-radius: 12px;
    background: #fff;
    color: var(--h-title);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    transition: .18s ease;
    overflow: hidden;
}

.h-emotion-option::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--emotion-color, #b7adff);
}

.h-emotion-option:hover {
    border-color: color-mix(in srgb, var(--emotion-color, #7407ff) 45%, #e4ddec);
    background: color-mix(in srgb, var(--emotion-color, #7407ff) 7%, #fff);
}

.h-emotion-option.is-selected {
    border-color: var(--emotion-color, var(--h-primary));
    background: color-mix(in srgb, var(--emotion-color, #7407ff) 10%, #fff);
    color: var(--h-title);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--emotion-color, #7407ff) 14%, transparent);
}

.h-emotion-option:nth-child(1) { --emotion-color: #5b9bd5; }
.h-emotion-option:nth-child(2) { --emotion-color: #f2b84b; }
.h-emotion-option:nth-child(3) { --emotion-color: #63b879; }
.h-emotion-option:nth-child(4) { --emotion-color: #ee9b4d; }
.h-emotion-option:nth-child(5) { --emotion-color: #8b95a7; }
.h-emotion-option:nth-child(6) { --emotion-color: #df6b6b; }
.h-emotion-option:nth-child(7) { --emotion-color: #9673d6; }
.h-emotion-option:nth-child(8) { --emotion-color: #6678b8; }
.h-emotion-option:nth-child(9) { --emotion-color: #7d68c9; }
.h-emotion-option:nth-child(10) { --emotion-color: #9a8f86; }

.h-situation-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

@media(max-width:768px) {
    .h-emotion-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 7px;
    }

    .h-emotion-option {
        min-height: 62px;
        padding: 8px 4px;
        font-size: 11px;
    }

    .h-situation-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 7px;
    }
}

@media(max-width:380px) {
    .h-emotion-grid {
        gap: 5px;
    }

    .h-emotion-option {
        min-height: 58px;
        padding: 7px 2px;
        font-size: 10px;
    }
}

/* ==========================================================
   11. PROFESSIONAL REPORT — VISUAL ANALYTICS
   ========================================================== */
#sectionReport {
    display:none;
    margin-top:20px;
    border:1px solid #e3dceb;
    background:#fff;
    box-shadow:0 18px 50px rgba(45,25,70,.10);
    overflow:hidden;
}
#sectionReport.is-visible { display:block; }
.h-report-card { overflow:hidden; }
.h-report-header {
    padding:38px 34px 32px;
    background:
        radial-gradient(circle at 88% 18%,rgba(255,255,255,.18),transparent 24%),
        radial-gradient(circle at 15% 110%,rgba(166,102,255,.22),transparent 34%),
        linear-gradient(135deg,#20162d 0%,#40205f 54%,#7407ff 100%);
    color:#fff;
    position:relative;
}
.h-report-header::before {
    content:"";
    position:absolute;
    width:260px; height:260px;
    right:-105px; top:-130px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    box-shadow:0 0 0 28px rgba(255,255,255,.025),0 0 0 58px rgba(255,255,255,.018);
}
.h-report-header::after {
    content:""; position:absolute; width:90px; height:90px; right:80px; bottom:-46px;
    border-radius:50%; background:rgba(255,255,255,.07);
}
.h-report-header .h-eyebrow { color:rgba(255,255,255,.68); margin-bottom:8px; font-size:11px; letter-spacing:.16em; font-weight:800; }
.h-report-date { color:rgba(255,255,255,.72); font-size:13px; font-weight:600; }
.h-report-heading { margin:7px 0 0; color:#fff; font-size:30px; font-weight:850; letter-spacing:-.045em; }
.h-report-body { padding:30px 32px 38px; background:linear-gradient(180deg,#fff 0%,#fcfbfe 100%); }
.h-report-detail {
    padding:0 0 30px; margin:0 0 30px;
    border-bottom:1px solid #ebe6f0;
}
.h-report-detail:last-child { margin-bottom:0; padding-bottom:0; border-bottom:0; }
.h-report-detail-number {
    color:#7407ff; font-size:10px; font-weight:900; letter-spacing:.18em;
    line-height:1;
}
.h-report-detail-title {
    margin-top:6px; color:#201a29; font-size:21px; font-weight:850; letter-spacing:-.035em;
}
.h-report-detail-content {
    margin-top:14px; padding:0; border:0; border-radius:0;
    color:#393442; font-size:15px; line-height:1.8;
}

/* 01 Summary */
.h-report-summary-panel {
    position:relative; overflow:hidden;
    margin-top:14px; padding:24px 26px;
    border:1px solid #e4d5f8; border-radius:18px;
    background:linear-gradient(135deg,#f8f2ff 0%,#fff 72%);
}
.h-report-summary-panel::after {
    content:""; position:absolute; width:130px; height:130px; right:-50px; bottom:-60px;
    border-radius:50%; background:rgba(116,7,255,.045);
}
.h-report-summary-label {
    color:#7407ff; font-size:11px; font-weight:850; letter-spacing:.08em; margin-bottom:9px;
}
.h-report-summary-text {
    position:relative; z-index:1; color:#2b2434; font-size:17px; line-height:1.85; font-weight:600; letter-spacing:-.018em;
}

/* 02 Energy */
.h-report-energy-panel {
    margin-top:14px; padding:22px; border:1px solid #ebe6f0; border-radius:18px;
    background:#fff; box-shadow:0 7px 22px rgba(40,24,60,.045); min-height:214px; box-sizing:border-box;
}
.h-report-energy-top { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.h-report-energy-label { color:#7a7184; font-size:12px; font-weight:700; }
.h-report-energy-value { color:#241a30; font-size:34px; font-weight:850; line-height:1; letter-spacing:-.05em; }
.h-report-energy-unit { color:#7a7184; font-size:12px; margin-left:4px; font-weight:700; }
.h-report-energy-state {
    padding:7px 10px; border-radius:999px; background:#f4edff; color:#7407ff;
    font-size:11px; font-weight:850; white-space:nowrap;
}
.h-report-energy-scale { position:relative; padding-top:7px; }
.h-report-energy-track { height:10px; border-radius:999px; background:linear-gradient(90deg,#e9e2ef 0%,#f3f0f5 48%,#d9c5ff 100%); overflow:hidden; }
.h-report-energy-center { position:absolute; left:50%; top:2px; width:2px; height:20px; background:#c9c1cf; border-radius:2px; }
.h-report-energy-marker {
    position:absolute; top:-1px; width:20px; height:20px; margin-left:-10px; border-radius:50%;
    background:#7407ff; border:4px solid #fff; box-shadow:0 3px 10px rgba(116,7,255,.28);
}
.h-report-energy-axis { display:flex; justify-content:space-between; margin-top:8px; color:#948a9d; font-size:10px; font-weight:700; }

/* 03 Growth */
.h-report-growth-panel { margin-top:14px; padding:20px; border:1px solid #ebe6f0; border-radius:18px; background:#fff; box-shadow:0 7px 22px rgba(40,24,60,.045); min-height:214px; box-sizing:border-box; }
.h-report-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:22px; }
.h-report-kpi { padding:13px 11px; border:1px solid #eee9f2; border-radius:13px; background:#fbfafc; }
.h-report-kpi-label { color:#827889; font-size:10px; font-weight:750; }
.h-report-kpi-value { margin-top:5px; color:#2a2033; font-size:18px; font-weight:850; letter-spacing:-.035em; }
.h-report-growth-focus { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:17px; padding-bottom:15px; border-bottom:1px solid #eee9f2; }
.h-report-growth-focus-label { color:#827889; font-size:11px; font-weight:750; }
.h-report-growth-focus-value { color:#7407ff; font-size:15px; font-weight:850; }
.h-report-dimension-list { display:flex; flex-direction:column; gap:12px; }
.h-report-dimension-row { display:grid; grid-template-columns:108px minmax(0,1fr) 58px; align-items:center; gap:10px; }
.h-report-dimension-name { color:#4c4353; font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.h-report-dimension-track { position:relative; height:9px; border-radius:999px; background:#f0edf3; overflow:hidden; }
.h-report-dimension-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,#b98aff,#7407ff); transform-origin:left center; }
.h-report-dimension-fill.is-negative { background:linear-gradient(90deg,#d8cfe0,#9d91a6); }
.h-report-dimension-value { text-align:right; color:#51475a; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; }

/* 04 Archetype */
.h-report-archetype-panel { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr); gap:12px; margin-top:14px; }
.h-report-archetype-active, .h-report-archetype-suppressed { border-radius:18px; padding:22px; }
.h-report-archetype-active {
    position:relative; overflow:hidden; color:#fff;
    background:linear-gradient(135deg,#2a1a3d 0%,#5a2c88 62%,#7407ff 100%);
    box-shadow:0 10px 24px rgba(75,35,110,.15);
}
.h-report-archetype-active::after { content:"✦"; position:absolute; right:20px; top:12px; color:rgba(255,255,255,.14); font-size:68px; }
.h-report-archetype-kicker { position:relative; z-index:1; font-size:10px; letter-spacing:.12em; font-weight:800; color:rgba(255,255,255,.68); }
.h-report-archetype-name { position:relative; z-index:1; margin-top:10px; font-size:27px; font-weight:850; letter-spacing:-.04em; }
.h-report-archetype-desc { position:relative; z-index:1; margin-top:7px; color:rgba(255,255,255,.78); font-size:12px; line-height:1.65; }
.h-report-archetype-suppressed { border:1px solid #ebe6f0; background:#faf9fc; }
.h-report-archetype-suppressed .h-report-archetype-kicker { color:#8c8292; }
.h-report-archetype-suppressed .h-report-archetype-name { color:#302738; font-size:19px; }
.h-report-archetype-score { margin-top:10px; color:#8a7d91; font-size:12px; font-weight:800; }

@media(min-width:769px) {
    .h-report-detail:nth-child(2), .h-report-detail:nth-child(3) {
        display:inline-block; vertical-align:top; width:calc(50% - 10px);
        margin-right:16px;
    }
    .h-report-detail:nth-child(3) { margin-right:0; }
}
@media(max-width:768px) {
    #sectionReport { margin-top:14px; }
    .h-report-header { padding:28px 20px 25px; }
    .h-report-heading { font-size:24px; }
    .h-report-body { padding:24px 18px 30px; }
    .h-report-detail { padding-bottom:24px; margin-bottom:24px; }
    .h-report-detail-title { font-size:20px; }
    .h-report-summary-panel { padding:20px; }
    .h-report-summary-text { font-size:15px; }
    .h-report-energy-panel, .h-report-growth-panel { padding:17px; }
    .h-report-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .h-report-dimension-row { grid-template-columns:92px minmax(0,1fr) 52px; gap:8px; }
    .h-report-archetype-panel { grid-template-columns:1fr; }
}
@media(max-width:390px) {
    .h-report-energy-value { font-size:29px; }
    .h-report-energy-state { font-size:10px; padding:6px 8px; }
    .h-report-dimension-row { grid-template-columns:82px minmax(0,1fr) 48px; }
}

/* ==========================================================
   TODAY NAVIGATION
   ========================================================== */

#sectionTodayNavigation {

    display: none;

    margin-top: 20px;

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

}

#sectionTodayNavigation.is-visible {
    display: block;
}


.h-today-navigation .h-title {
    margin-top: 4px;
}


.h-today-missions {

    margin-top: 22px;

    padding: 20px;

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

    border-radius: 16px;

    background: #fff;

}


.h-today-mission-list {

    margin:
        10px 0 0;

    padding-left: 24px;

}


.h-today-mission-list li {

    margin:
        10px 0;

    color:
        var(--h-title);

    font-size: 16px;

    font-weight: 600;

    line-height: 1.6;

}


.h-today-report-button {

    margin-top: 18px;

}


@media(max-width:768px) {

    #sectionTodayNavigation {

        margin-top: 14px;

    }

    .h-today-missions {

        padding: 17px;

    }

    .h-today-mission-list li {

        font-size: 15px;

    }

}

    /* ==========================================================
   16. NAVIGATION MESSAGE
   ========================================================== */

    .h-navigation-box {

        margin-top: 14px;

        padding: 22px;

        border: 1px solid #e4d7f7;

        border-radius: 16px;

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

    }

    .h-navigation-label {

        color: var(--h-primary);

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

    }

    .h-navigation-title {

        margin-top: 6px;

        color: var(--h-title);

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

        line-height: 1.45;

    }

    .h-navigation-text {

        margin: 8px 0 0;

        color: var(--h-text);

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

    }

    .h-navigation-semantic{

    margin-top:14px;

    display:inline-flex;

    align-items:center;

    padding:6px 14px;

    border-radius:999px;

    background:#ffffff;

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

    color:var(--h-primary);

    font-size:14px;

    font-weight:700;

    }


    /* ==========================================================
   17. TODAY ACTION
   ========================================================== */

    .h-action-box {

        position: relative;

        margin-top: 14px;

        padding:            20px 20px 20px 24px;

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

        border-radius: 16px;

        background: #fff;

    }

    .h-action-box::before {

        content: "";

        position: absolute;

        left: 0;
        top: 16px;
        bottom: 16px;

        width: 4px;

        border-radius:            0 4px 4px 0;

        background:            var(--h-primary);

    }

    .h-action-label {

        color: var(--h-muted);

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

    }

    .h-action-text {

        margin-top: 5px;

        color: var(--h-title);

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

        line-height: 1.6;

    }

    .h-action-list{

    margin:0;

    padding-left:18px;

    }

    .h-action-list li{

    margin:8px 0;

    }


    /* ==========================================================
   18. REPORT ACTION BUTTONS
   ========================================================== */

    .h-report-actions {

        display: grid;

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

        gap: 10px;

        margin-top: 22px;

    }
    /* ==========================================================
   20. HANAIN GROWTH COMMUNITY
   ========================================================== */

    #sectionCommunity {

        margin-top: 26px;

    }

    .h-community-header {

        margin-bottom: 16px;

    }

    .h-community-title {

        margin: 0;

        color: var(--h-title);

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

        letter-spacing: -.025em;

    }

    .h-community-description {

        margin:            5px 0 0;

        color: var(--h-muted);

        font-size: 15px;

    }


    /* ==========================================================
   21. COMMUNITY MENU
   ========================================================== */

    .h-community-grid {

        display: grid;

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

        gap: 10px;

    }

    .h-community-item {

        position: relative;

        min-height: 118px;

        display: flex;

        flex-direction: column;

        justify-content: space-between;

        padding: 18px;

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

        border-radius: 16px;

        background: #fff;

        color: inherit;

        text-decoration: none;

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

    }

    .h-community-item:hover {

        transform:            translateY(-2px);

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

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

    }

    .h-community-icon {

        width: 38px;
        height: 38px;

        display: flex;

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

        border:            1px solid #e6d9fa;

        border-radius: 11px;

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

        font-size: 19px;

    }

    .h-community-item-title {

        margin-top: 14px;

        color: var(--h-title);

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

        line-height: 1.4;

    }

    .h-community-item-desc {

        margin-top: 3px;

        color: var(--h-muted);

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

    }


    /* ==========================================================
   COMMUNITY HEADER
   성장커뮤니티 / 리뷰 더보기
   ========================================================== */

    .h-community-header-row {

        display: flex;

        align-items: flex-end;
        justify-content: space-between;

        gap: 16px;

        margin-bottom: 8px;

    }


    .h-community-header-row .h-eyebrow {

        margin-bottom: 3px;

    }


    .h-community-more {

        flex-shrink: 0;

        display: inline-flex;

        align-items: center;

        gap: 4px;

        padding-bottom: 2px;

        color: var(--h-primary);

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

        text-decoration: none;

    }


    .h-community-more span {

        font-size: 20px;
        font-weight: 400;

        line-height: 1;

    }


    .h-community-more:hover {

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

    }


    /* 리뷰와 하단 메뉴 사이 구분 */

    .h-review-list {

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

    }


    .h-community-grid {

        padding-top: 4px;

    }


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

    @media(max-width:768px) {

        .h-community-header-row {

            align-items: flex-end;

            margin-bottom: 10px;

        }


        .h-community-more {

            font-size: 13px;

        }


        .h-community-grid {

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

            gap: 9px;

        }

    }

    /* ==========================================================
   22. RECENT REVIEW
   ========================================================== */

    .h-review-list {

        margin-top: 14px;

    }

    .h-review {

        padding:            17px 0;

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

    }

    .h-review:last-child {
        border-bottom: 0;
    }

    .h-review-top {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 10px;

    }

    .h-review-user {

        color: var(--h-title);

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

    }

    .h-review-date {

        color: var(--h-muted);

        font-size: 13px;

    }

    .h-review-text {

        margin-top: 7px;

        color: var(--h-text);

        font-size: 15px;
        line-height: 1.65;

    }


    /* ==========================================================
   23. REVIEW SUPPORT / GRATITUDE GIFT
   ========================================================== */

    .h-review-actions {

        display: flex;

        align-items: center;

        gap: 8px;

        margin-top: 10px;

    }

    .h-review-action {

        display: inline-flex;

        align-items: center;

        gap: 4px;

        min-height: 34px;

        padding:            0 10px;

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

        border-radius: 999px;

        background: #fff;

        color: var(--h-muted);

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

    }

    .h-review-action:hover {

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

        color:            var(--h-primary);

    }


    /* ==========================================================
   24. COMMUNITY SHORTCUT
   ========================================================== */

    .h-community-shortcut {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 14px;

    }

    .h-community-shortcut-main {
        flex: 1;
    }

    .h-community-shortcut-arrow {

        flex-shrink: 0;

        color:            var(--h-primary);

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

    }


    /* ==========================================================
   INLINE REVIEW
   ========================================================== */

.h-inline-review {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid rgba(116, 7, 255, .22);
    border-radius: 16px;
    background: linear-gradient(145deg, #ffffff 0%, #faf6ff 100%);
}

.h-inline-review-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.h-inline-review-title { margin:0; color:var(--h-title); font-size:20px; font-weight:800; }
.h-inline-review-guide { color:var(--h-muted); font-size:14px; }
.h-inline-review-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
.h-inline-review-input { width:100%; min-height:52px; padding:0 15px; border:1px solid var(--h-border); border-radius:12px; background:#fff; color:var(--h-text); outline:none; }
.h-inline-review-input:focus { border-color:var(--h-primary); box-shadow:0 0 0 3px rgba(116,7,255,.08); }
.h-inline-review-reward { margin-top:10px; color:var(--h-muted); font-size:13px; }
.h-inline-review-result { margin-top:10px; color:var(--h-success); font-size:14px; font-weight:700; }

/* ------------------------------------------------------------
 * REVIEW COMPLETION ACTIONS
 * 리뷰 보상 완료 후 다음 행동
 * ------------------------------------------------------------ */
.h-review-completion-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--h-border);
}

.h-review-completion-actions .h-btn {
    width:100%;
    min-height:44px;
}

@media(max-width:768px) { .h-inline-review{padding:17px;} .h-inline-review-guide{display:none;} .h-inline-review-row{grid-template-columns:1fr;} .h-inline-review-row .h-btn{width:100%;}
    .h-review-completion-actions {
        grid-template-columns:1fr;
        gap:8px;
    }
}

/* ==========================================================
   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;
    }




    /* ==========================================================
   28. TABLET / DESKTOP
   ========================================================== */

    @media(min-width:768px) {

        .h-page {

            padding: 20px 4px 90px;

        }

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

        .h-profile-avatar {

            width: 64px;
            height: 64px;

            flex-basis: 64px;

        }

        .h-checkin-question {
            font-size: 29px;
        }

        .h-signature-text {
            font-size: 30px;
        }

    }


    /* ==========================================================
   29. MOBILE
   ========================================================== */

    @media(max-width:768px) {

        body {

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

        }

        .h-page {

            padding: 8px 4px 54px;

        }


        /* CARD */

        .h-card {

            border-radius: 18px;

        }

        .h-card+.h-card {

            margin-top: 14px;

        }

        .h-card-body {

            padding: 21px 18px;

        }


        /* PROFILE */

        .h-profile {

            gap: 12px;

        }

        .h-profile-avatar {

            width: 52px;
            height: 52px;

            flex-basis: 52px;

            font-size: 22px;

        }

        .h-profile-name {

            font-size: 18px;

        }

        .h-profile-meta {

            font-size: 14px;

        }

        .h-profile-level {

            padding:   6px 9px;

            font-size: 12px;

        }

        .h-profile-assets {

            margin-top: 17px;
            padding-top: 15px;

        }

        .h-profile-asset-label {

            font-size: 13px;

        }

        .h-profile-asset-value {

            font-size: 17px;

        }


        /* CHECK-IN */

        #sectionCheckIn {

            margin-top: 14px;

        }

        .h-checkin-intro {

            margin-bottom: 22px;

        }

        .h-checkin-question {

            font-size: 24px;
            line-height: 1.42;

        }

        .h-checkin-guide {

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

        }

        .h-label {

            font-size: 16px;

        }

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

            font-size: 16px;

        }

        .h-input,
        .h-select {

            min-height: 54px;

        }

        .h-textarea {

            min-height: 112px;

        }

        .h-checkin-submit {

            min-height: 58px;

            font-size: 17px;

        }


        /* REPORT */

        #sectionReport {

            margin-top: 14px;

        }

        .h-report-header {

            padding:  22px 18px;

        }

        .h-report-date {

            font-size: 13px;

        }

        .h-report-heading {

            font-size: 21px;

        }

        .h-signature {

            padding: 26px 18px;

        }

        .h-signature-text {

            font-size: 25px;

        }

        .h-report-body {

            padding: 20px 18px;

        }

        .h-report-summary {

            grid-template-columns: 1fr;

            gap: 9px;

        }

        .h-report-item {

            padding: 17px;

        }

        .h-report-item-label {

            font-size: 14px;

        }

        .h-report-item-value {

            font-size: 18px;

        }

        .h-report-item-description {

            font-size: 14px;

        }

        .h-navigation-box {

            padding: 19px;

        }

        .h-navigation-label {

            font-size: 13px;

        }

        .h-navigation-title {

            font-size: 20px;

        }

        .h-navigation-text {

            font-size: 16px;

        }

        .h-action-label {

            font-size: 13px;

        }

        .h-action-text {

            font-size: 17px;

        }


        /* REPORT BUTTON */

        .h-report-actions {

            grid-template-columns: 1fr;

        }

        .h-report-actions .h-btn {

            width: 100%;

        }


        /* FULL REPORT */

        .h-report-detail-number {

            font-size: 13px;

        }

        .h-report-detail-title {

            font-size: 19px;

        }

        .h-report-detail-content {

            font-size: 16px;

            line-height: 1.8;

        }


        /* COMMUNITY */

        #sectionCommunity {

            margin-top: 22px;

        }

        .h-community-title {

            font-size: 22px;

        }

        .h-community-description {

            font-size: 15px;

        }

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

            gap: 9px;

        }

        .h-community-item {

            min-height: 128px;

            padding: 16px;

            border-radius: 15px;

        }

        .h-community-icon {

            width: 36px;
            height: 36px;

            font-size: 18px;

        }

        .h-community-item-title {

            font-size: 16px;

        }

        .h-community-item-desc {

            font-size: 14px;

        }

    }


    /* ==========================================================
   30. VERY SMALL MOBILE
   ========================================================== */

    @media(max-width:380px) {

        .h-page {

            padding-left: 9px;
            padding-right: 9px;

        }

        .h-card-body {

            padding: 19px 15px;

        }

        .h-profile-level {
            display: none;
        }

        .h-checkin-question {

            font-size: 22px;

        }

        .h-signature-text {

            font-size: 23px;

        }

        .h-community-grid {

            grid-template-columns: 1fr;

        }

        .h-community-item {

            min-height: 100px;

        }

    }


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

.h-modal {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100vw;
    height: 100vh;

    display: none;

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

    padding: 8px;

    box-sizing: border-box;

    overflow-y: auto;

    background:
        rgba(0, 0, 0, .45);

    z-index: 999999;

}


.h-modal-dialog {

    position: relative;

    width: 100%;

    max-width: 720px;

    max-height:
        calc(100vh - 16px);

    margin: 0;

    overflow-y: auto;

    box-sizing: border-box;

    background: #fff;

    border-radius: 18px;

}.h-modal {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100vw;
    height: 100vh;

    display: none;

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

    padding: 8px;

    box-sizing: border-box;

    overflow-y: auto;

    background:
        rgba(0, 0, 0, .45);

    z-index: 999999;

}


.h-modal-dialog {

    position: relative;

    width: 100%;

    max-width: 720px;

    max-height:
        calc(100vh - 16px);

    margin: 0;

    overflow-y: auto;

    box-sizing: border-box;

    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);

}

@keyframes modalScale{

    from{

        opacity:0;

        transform:scale(.95);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}
@media (max-width: 768px) {

    .h-modal {

        padding: 6px;

    }


    .h-modal-dialog {

        width: 100%;

        max-width: none;

        max-height:
            calc(100vh - 12px);

        border-radius: 16px;

    }

}

/* ==========================================================
   COMMUNITY REVIEW — CLEAN SINGLE PANEL
   ========================================================== */
#sectionCommunity { padding:0; background:transparent; border:0; box-shadow:none; overflow:visible; }
#sectionCommunity .h-inline-review { margin-top:18px; }
.h-review-completion-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid var(--h-border); }
.h-review-completion-actions .h-btn { width:100%; min-height:48px; }
@media(max-width:768px){ .h-review-completion-actions{grid-template-columns:1fr 1fr; gap:8px;} .h-review-completion-actions .h-btn{font-size:14px; min-height:50px;} }

/* REPORT VISUAL REFINEMENT V6 — MICRO POLISH */
/* 03 성장 균형: KPI/주요영역은 중앙정렬, 성장영역 수치는 bar와 함께 좌우 정렬 */
.h-report-growth-panel .h-report-kpi { text-align:center; }
.h-report-growth-panel .h-report-kpi-label,
.h-report-growth-panel .h-report-kpi-value { text-align:center; }
.h-report-growth-focus { align-items:center; }
.h-report-growth-focus-label { text-align:center; }
.h-report-growth-focus-value { text-align:center; }

/* 성장영역은 실제 bar graph로 명확하게 보이도록 유지 */
.h-report-dimension-row { grid-template-columns:112px minmax(0,1fr) 62px; }
.h-report-dimension-track { height:10px; }
.h-report-dimension-name { letter-spacing:-.03em; }

/* 05 방향: 값 중심 정렬 */
.h-report-direction-metric { text-align:center; }
.h-report-direction-metric span,
.h-report-direction-metric strong { text-align:center; }

/* 한줄 리뷰: 입력 영역을 넓히고 CTA의 시각적 압박을 완화 */
.h-inline-review-row { grid-template-columns:minmax(0,1fr) 148px; gap:14px; }
.h-inline-review-input { min-height:62px; padding:0 18px; font-size:16px; border-radius:14px; }
.h-inline-review-row .h-btn { min-height:58px; border-radius:14px; font-size:15px; box-shadow:none; }
.h-inline-review-row .h-btn-primary { background:#8f4cff; border-color:#8f4cff; }
.h-inline-review-reward { font-size:13px; }

/* 08 보상: 중간의 큰 패널을 제거하고 카드만 직접 노출 */
.h-report-reward-panel { margin-top:14px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.h-report-reward-head { padding:0 0 16px; }
.h-report-reward-grid { margin-top:16px; }

@media(max-width:768px){
  .h-report-growth-focus { flex-direction:column; justify-content:center; gap:6px; text-align:center; }
  .h-report-growth-focus-label, .h-report-growth-focus-value { width:100%; }
  .h-report-dimension-row { grid-template-columns:96px minmax(0,1fr) 54px; gap:8px; }
  .h-report-dimension-name { white-space:nowrap; overflow:visible; text-overflow:clip; font-size:12px!important; letter-spacing:-.04em; }
  .h-inline-review-row { grid-template-columns:1fr; gap:10px; }
  .h-inline-review-input { min-height:70px; font-size:16px; }
  .h-inline-review-row .h-btn { min-height:52px; }
  .h-report-reward-head { align-items:flex-start; }
  .h-report-reward-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .h-report-reward-card { min-height:108px; padding:16px 12px; display:flex; flex-direction:column; justify-content:center; text-align:center; }
  .h-report-reward-label, .h-report-reward-value, .h-report-reward-note { text-align:center; }
}
@media(max-width:480px){
  .h-report-reward-grid { grid-template-columns:1fr 1fr; }
  .h-report-reward-card:last-child { grid-column:1 / -1; }
  .h-report-reward-value strong { font-size:23px; }
}

/* REPORT VISUAL REFINEMENT V5 */
.h-report-detail-number{font-size:13px!important;letter-spacing:.14em!important}.h-report-detail-title{font-size:23px!important;line-height:1.3!important}.h-report-summary-label{font-size:13px!important}.h-report-summary-text{font-size:18px!important;line-height:1.85!important}.h-report-energy-label{font-size:14px!important}.h-report-energy-value{font-size:42px!important}.h-report-energy-unit{font-size:13px!important}.h-report-energy-state{font-size:13px!important}.h-report-energy-axis{font-size:12px!important}.h-report-kpi-label{font-size:12px!important}.h-report-kpi-value{font-size:21px!important}.h-report-growth-focus-label{font-size:13px!important}.h-report-growth-focus-value{font-size:17px!important}.h-report-dimension-name,.h-report-dimension-value{font-size:14px!important}.h-report-archetype-kicker{font-size:12px!important}.h-report-archetype-name{font-size:30px!important}.h-report-archetype-desc{font-size:14px!important;line-height:1.75!important}.h-report-archetype-suppressed .h-report-archetype-name{font-size:21px!important}.h-report-archetype-score{font-size:13px!important}
.h-report-energy-panel,.h-report-growth-panel{min-height:0!important;height:auto!important}
.h-report-direction-panel{margin-top:14px;border:1px solid #e8e0ef;border-radius:20px;background:#fff;overflow:hidden;box-shadow:0 8px 24px rgba(45,25,70,.05)}.h-report-direction-hero{padding:24px 25px 22px;background:linear-gradient(135deg,#f8f2ff,#fff 72%);border-bottom:1px solid #eee8f3}.h-report-direction-kicker{font-size:12px;font-weight:850;letter-spacing:.12em;color:#7407ff}.h-report-direction-name{margin-top:8px;font-size:28px;font-weight:850;letter-spacing:-.04em;color:#211a2a}.h-report-direction-meaning{margin-top:8px;font-size:16px;line-height:1.75;color:#62596a;font-weight:600}.h-report-direction-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid #eee8f3}.h-report-direction-metric{padding:18px 16px;border-right:1px solid #eee8f3}.h-report-direction-metric:last-child{border-right:0}.h-report-direction-metric span{display:block;font-size:12px;color:#8a8190;font-weight:750}.h-report-direction-metric strong{display:block;margin-top:7px;font-size:19px;color:#2a2033;font-weight:850;font-variant-numeric:tabular-nums}.h-report-direction-bottom{display:grid;grid-template-columns:minmax(150px,.65fr) minmax(0,1.35fr);gap:24px;padding:18px 20px;align-items:center}.h-report-direction-code-label{font-size:11px;color:#948a9d;font-weight:800;letter-spacing:.1em}.h-report-direction-code{margin-top:5px;font-size:14px;color:#403647;font-weight:750;word-break:break-word}.h-report-confidence-head{display:flex;justify-content:space-between;font-size:13px;color:#665c6e;font-weight:700}.h-report-confidence-head strong{color:#7407ff}.h-report-confidence-track{height:9px;margin-top:8px;border-radius:99px;background:#eeeaf2;overflow:hidden}.h-report-confidence-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#b98aff,#7407ff)}
.h-report-missions-panel{margin-top:14px;padding:22px;border:1px solid #e8e0ef;border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(45,25,70,.05)}.h-report-missions-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding-bottom:17px;border-bottom:1px solid #eee8f3}.h-report-missions-kicker{font-size:12px;font-weight:850;letter-spacing:.1em;color:#7407ff}.h-report-missions-title{margin-top:6px;font-size:18px;line-height:1.55;color:#2d2535;font-weight:750}.h-report-missions-count{font-size:28px;line-height:1;color:#7407ff;font-weight:900;white-space:nowrap}.h-report-missions-count span{font-size:10px;letter-spacing:.1em;color:#958a9e}.h-report-mission-list{display:flex;flex-direction:column}.h-report-mission-row{display:grid;grid-template-columns:48px minmax(0,1fr) 28px;align-items:center;gap:14px;padding:17px 0;border-bottom:1px solid #eee8f3}.h-report-mission-row:last-child{border-bottom:0;padding-bottom:2px}.h-report-mission-index{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#f2e9ff;color:#7407ff;font-size:13px;font-weight:900}.h-report-mission-label{font-size:11px;letter-spacing:.08em;color:#958a9e;font-weight:800}.h-report-mission-text{margin-top:4px;font-size:16px;line-height:1.6;color:#352d3d;font-weight:700}.h-report-mission-arrow{font-size:22px;color:#7407ff;font-weight:700}.h-report-empty-state{padding:18px 0;font-size:15px;color:#817788}
.h-report-personal-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.h-report-personal-card{position:relative;min-height:210px;padding:22px;border:1px solid #e8e0ef;border-radius:18px;background:#fff;box-shadow:0 7px 20px rgba(45,25,70,.04);overflow:hidden}.h-report-personal-card:after{content:"";position:absolute;right:-35px;bottom:-45px;width:110px;height:110px;border-radius:50%;background:rgba(116,7,255,.045)}.h-report-personal-icon{position:relative;z-index:1;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#f1e8ff;color:#7407ff;font-size:20px;font-weight:900}.h-report-personal-label{position:relative;z-index:1;margin-top:18px;font-size:11px;letter-spacing:.1em;color:#938899;font-weight:850}.h-report-personal-title{position:relative;z-index:1;margin-top:5px;font-size:20px;color:#2a2132;font-weight:850}.h-report-personal-text{position:relative;z-index:1;margin-top:9px;font-size:14px;line-height:1.7;color:#655b6b;font-weight:600}.h-report-personal-link{position:absolute;z-index:2;left:22px;bottom:19px;font-size:13px;color:#7407ff;font-weight:850}.h-report-personal-link span{margin-left:4px;font-size:16px}
.h-report-reward-panel{margin-top:14px;padding:22px;border:1px solid #e8e0ef;border-radius:20px;background:linear-gradient(180deg,#fbf8ff,#fff);box-shadow:0 8px 24px rgba(45,25,70,.05)}.h-report-reward-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid #eee8f3}.h-report-reward-kicker{font-size:12px;letter-spacing:.1em;color:#7407ff;font-weight:850}.h-report-reward-title{margin-top:6px;font-size:18px;line-height:1.5;color:#302738;font-weight:750}.h-report-reward-mark{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:#7407ff;color:#fff;font-size:23px;box-shadow:0 7px 18px rgba(116,7,255,.22)}.h-report-reward-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.h-report-reward-card{padding:18px;border:1px solid #e9e2f0;border-radius:16px;background:#fff}.h-report-reward-label{font-size:12px;color:#8b8191;font-weight:750}.h-report-reward-value{margin-top:8px;font-size:19px;color:#34293e;font-weight:800}.h-report-reward-value strong{color:#7407ff;font-size:25px;font-weight:900}.h-report-reward-note{margin-top:8px;font-size:12px;color:#958a9e;line-height:1.5}.h-report-reward-gv{background:#faf7ff;border-color:#e2d3f5}
@media(max-width:768px){.h-report-detail-title{font-size:21px!important}.h-report-summary-text{font-size:16px!important}.h-report-energy-value{font-size:38px!important}.h-report-direction-name{font-size:24px}.h-report-direction-meaning{font-size:15px}.h-report-direction-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.h-report-direction-metric:nth-child(2){border-right:0}.h-report-direction-metric:nth-child(-n+2){border-bottom:1px solid #eee8f3}.h-report-direction-bottom{grid-template-columns:1fr;gap:16px}.h-report-missions-title{font-size:16px}.h-report-mission-text{font-size:15px}.h-report-personal-panel{grid-template-columns:1fr}.h-report-personal-card{min-height:185px}.h-report-reward-grid{grid-template-columns:1fr}.h-report-reward-title{font-size:16px}}
@media(max-width:390px){.h-report-detail-number{font-size:12px!important}.h-report-direction-metric{padding:15px 12px}.h-report-direction-metric strong{font-size:17px}.h-report-missions-panel,.h-report-reward-panel{padding:17px}.h-report-mission-row{grid-template-columns:40px minmax(0,1fr) 22px;gap:10px}}

/* ==========================================================
   HGOS FINAL DEPLOYMENT VISUAL SYSTEM
   ----------------------------------------------------------
   - 전문보고서 참고 디자인 통합
   - 모바일 가독성 강화
   - 기존 V7/V8 보고서 override 통합
   - API / 비즈니스 로직 / 이벤트 핸들러 변경 없음
   ========================================================== */

#sectionReport{
    margin-top:20px;
    border:1px solid #ddd2ff;
    border-radius:24px;
    background:#fff;
    box-shadow:0 12px 40px rgba(92,63,170,.08);
}

.h-report-card{overflow:hidden;}

.h-report-header{
    padding:40px 36px 34px;
    background:
        radial-gradient(circle at 88% 18%,rgba(255,255,255,.18),transparent 24%),
        radial-gradient(circle at 15% 110%,rgba(166,102,255,.22),transparent 34%),
        linear-gradient(135deg,#20162d 0%,#40205f 54%,#7407ff 100%);
}

.h-report-heading{
    font-size:32px;
    line-height:1.25;
    letter-spacing:-.045em;
}

.h-report-flow{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:18px;
    padding:8px 13px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    background:rgba(255,255,255,.09);
    color:rgba(255,255,255,.82);
    font-size:12px;
    font-weight:700;
    letter-spacing:-.01em;
}

.h-report-flow span{color:rgba(255,255,255,.48);}

.h-report-body{
    padding:30px 32px 40px;
    background:linear-gradient(180deg,#fff 0%,#fcfbfe 100%);
}

.h-report-detail{
    position:relative;
    margin:0 0 18px;
    padding:24px;
    border:1px solid #e8e0ef;
    border-radius:20px;
    background:#fff;
    box-shadow:0 7px 22px rgba(40,24,60,.045);
}

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

.h-report-detail-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    height:24px;
    padding:0 9px;
    border-radius:999px;
    background:#f1e8ff;
    color:#7407ff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}

.h-report-detail-title{
    margin-top:10px;
    color:#2e2844;
    font-size:22px;
    font-weight:800;
    line-height:1.3;
    letter-spacing:-.035em;
}

.h-report-detail-guide{
    margin-top:5px;
    color:#8b8191;
    font-size:14px;
    font-weight:600;
    line-height:1.55;
}

.h-report-detail-content{
    margin-top:14px;
    color:#55566a;
    font-size:16px;
    line-height:1.8;
    white-space:pre-line;
}

@media(min-width:769px){
    .h-report-detail:nth-child(2),
    .h-report-detail:nth-child(3){
        display:inline-block;
        vertical-align:top;
        width:calc(50% - 10px);
        margin-right:16px;
    }

    .h-report-detail:nth-child(3){margin-right:0;}

    .h-report-detail:nth-child(2) .h-report-energy-panel,
    .h-report-detail:nth-child(3) .h-report-growth-panel{
        height:530px;
        min-height:530px;
        box-sizing:border-box;
    }
}

.h-report-summary-panel{
    margin-top:0;
    padding:24px 26px;
    border:1px solid #e4d5f8;
    border-radius:18px;
    background:linear-gradient(135deg,#f8f2ff 0%,#fff 72%);
}

.h-report-summary-label{font-size:12px;}

.h-report-summary-text{
    font-size:18px;
    line-height:1.85;
}

.h-report-energy-panel,
.h-report-growth-panel{margin-top:0;}

.h-report-energy-value{font-size:36px;}

.h-report-kpi{
    min-height:74px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.h-report-kpi-value{font-size:19px;}

.h-report-direction-panel{margin-top:0;}

.h-report-direction-name{font-size:29px;}

.h-report-direction-meaning{
    font-size:16px;
    line-height:1.8;
}

.h-report-missions-panel,
.h-report-personal-panel,
.h-report-reward-panel{margin-top:0;}

.h-report-mission-text{
    font-size:17px;
    line-height:1.65;
}

.h-report-personal-title{font-size:21px;}

.h-report-personal-text{
    font-size:15px;
    line-height:1.75;
}

.h-report-reward-panel{
    padding:22px !important;
    border:1px solid #e8e0ef !important;
    border-radius:20px !important;
    background:linear-gradient(180deg,#fbf8ff,#fff) !important;
    box-shadow:0 8px 24px rgba(45,25,70,.05) !important;
}

.h-report-reward-grid{margin-top:16px !important;}

.h-header{
    flex-direction:row !important;
    align-items:flex-end !important;
    gap:14px;
    flex-wrap:nowrap;
}

.h-header-title{
    flex:0 0 auto;
    line-height:.9;
}

.h-header-subtitle{
    margin-top:0 !important;
    padding-bottom:2px;
    white-space:nowrap;
}

.h-review-completion-actions .h-btn-outline{
    background:#fff;
    border-color:#d9cce8;
    color:#5e5368;
    box-shadow:none;
}

.h-review-completion-actions .h-btn-outline:hover{
    border-color:#b98aff;
    color:#7407ff;
    background:#faf7ff;
}

@media(max-width:768px){

    .h-report-header{padding:30px 20px 27px;}

    .h-report-heading{
        font-size:27px;
        line-height:1.3;
    }

    .h-report-flow{
        width:100%;
        justify-content:center;
        gap:5px;
        margin-top:15px;
        padding:8px 9px;
        font-size:11px;
    }

    .h-report-body{padding:18px 12px 28px;}

    .h-report-detail{
        margin-bottom:14px;
        padding:20px 16px;
        border-radius:18px;
        box-shadow:0 5px 18px rgba(40,24,60,.045);
    }

    .h-report-detail-number{
        min-width:32px;
        height:23px;
        font-size:10px;
    }

    .h-report-detail-title{
        margin-top:9px;
        font-size:21px;
        line-height:1.35;
    }

    .h-report-detail-guide{
        margin-top:5px;
        font-size:14px;
        line-height:1.55;
    }

    .h-report-detail-content{
        margin-top:13px;
        font-size:16px;
        line-height:1.82;
    }

    .h-report-summary-panel{
        padding:20px 18px;
        border-radius:16px;
    }

    .h-report-summary-text{
        font-size:17px;
        line-height:1.85;
    }

    .h-report-energy-panel,
    .h-report-growth-panel{padding:17px;}

    .h-report-energy-value{font-size:32px;}

    .h-report-kpis{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .h-report-kpi{
        min-height:70px;
        padding:12px 10px;
    }

    .h-report-kpi-value{font-size:19px;}

    .h-report-dimension-row{
        grid-template-columns:86px minmax(0,1fr) 50px;
        gap:8px;
    }

    .h-report-direction-panel,
    .h-report-missions-panel,
    .h-report-reward-panel{border-radius:17px;}

    .h-report-direction-name{font-size:25px;}

    .h-report-direction-meaning{
        font-size:16px;
        line-height:1.8;
    }

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

    .h-report-direction-metric{border-bottom:1px solid #eee8f3;}

    .h-report-direction-metric:nth-child(2n){border-right:0;}

    .h-report-direction-bottom{
        grid-template-columns:1fr;
        gap:16px;
    }

    .h-report-missions-intro{align-items:flex-start;}

    .h-report-missions-title{
        font-size:17px;
        line-height:1.6;
    }

    .h-report-mission-row{
        grid-template-columns:38px minmax(0,1fr) 22px;
        gap:10px;
        padding:15px 0;
    }

    .h-report-mission-text{
        font-size:16px;
        line-height:1.65;
    }

    .h-report-personal-panel{
        grid-template-columns:1fr;
        gap:10px;
    }

    .h-report-personal-card{
        min-height:0;
        padding:19px;
        padding-bottom:52px;
    }

    .h-report-personal-title{font-size:20px;}

    .h-report-personal-text{
        font-size:15px;
        line-height:1.75;
    }

    .h-report-reward-panel{padding:18px !important;}

    .h-report-reward-grid{grid-template-columns:1fr;}

    .h-report-reward-title{
        font-size:17px;
        line-height:1.6;
    }

    .h-report-reward-value{font-size:18px;}

    .h-report-reward-value strong{font-size:24px;}

    .h-header{
        gap:8px;
        align-items:flex-end !important;
    }

    .h-header-title{font-size:32px !important;}

    .h-header-subtitle{
        font-size:14px !important;
        gap:5px;
        padding-bottom:2px;
    }
}

@media(max-width:430px){

    .h-report-header{padding:27px 16px 24px;}

    .h-report-heading{font-size:24px;}

    .h-report-flow{
        font-size:10px;
        padding:7px 6px;
    }

    .h-report-body{padding:14px 9px 24px;}

    .h-report-detail{padding:18px 14px;}

    .h-report-detail-title{font-size:20px;}

    .h-report-detail-guide{font-size:13px;}

    .h-report-detail-content{
        font-size:16px;
        line-height:1.8;
    }

    .h-report-summary-text{font-size:16.5px;}

    .h-report-energy-value{font-size:30px;}

    .h-report-dimension-row{
        grid-template-columns:78px minmax(0,1fr) 46px;
    }

    .h-header{gap:6px;}

    .h-header-title{font-size:28px !important;}

    .h-header-subtitle{
        font-size:12px !important;
        gap:4px;
    }
}