/* =====================================================================
   report.css — สไตล์เฉพาะหน้ารายงานองค์ประกอบร่างกาย
   ใช้ตัวแปรสีชุดเดียวกับ site.css จึงไม่ต้องประกาศสีใหม่
   ===================================================================== */

.rpt-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px
}

    .rpt-head h1 {
        font-size: 22px
    }

    .rpt-head .r {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 10px
    }

/* ---------- แถบสรุปด้านบน ---------- */
.rpt-strip {
    display: grid;
    grid-template-columns: 1.05fr 2.1fr repeat(3,.78fr);
    gap: 14px;
    margin-bottom: 14px
}

@media (max-width:1200px) {
    .rpt-strip {
        grid-template-columns: 1fr 1fr 1fr
    }
}

.rpt-box {
    background: var(--white);
    border-radius: var(--r);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: var(--card);
    padding: 18px 20px;
    display: flex;
    flex-direction: column
}

    .rpt-box .cap {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11.5px;
        color: var(--ink-2);
        font-weight: 600
    }

        .rpt-box .cap svg {
            width: 15px;
            height: 15px;
            stroke: currentColor;
            stroke-width: 1.6;
            fill: none;
            flex-shrink: 0
        }

.big-val {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
    margin-top: 12px;
    font-variant-numeric: tabular-nums
}

    .big-val u {
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        color: var(--ink-2);
        margin-left: 4px
    }

/* สามช่อง lean / fat / bone */
.triple {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    flex: 1
}

    .triple .t {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
        padding: 0 4px;
        border-right: 1px solid var(--hair)
    }

        .triple .t:last-child {
            border-right: 0
        }

        .triple .t .ic {
            width: 34px;
            height: 34px;
            border-radius: 11px;
            display: grid;
            place-items: center;
            margin-bottom: 2px
        }

            .triple .t .ic svg {
                width: 17px;
                height: 17px;
                stroke-width: 1.6;
                fill: none
            }

        .triple .t .lb {
            font-size: 11.5px;
            color: var(--ink-2);
            font-weight: 500;
            line-height: 1.3
        }

        .triple .t .vv {
            font-size: 20px;
            font-weight: 700;
            letter-spacing: -.02em;
            font-variant-numeric: tabular-nums
        }

            .triple .t .vv u {
                text-decoration: none;
                font-size: 11.5px;
                font-weight: 500;
                color: var(--ink-2);
                margin-left: 2px
            }

        .triple .t .pp {
            font-size: 13.5px;
            font-weight: 700;
            font-variant-numeric: tabular-nums
        }

        .triple .t .track {
            width: 100%;
            height: 5px;
            border-radius: 3px;
            background: var(--soft);
            overflow: hidden;
            margin-top: 4px
        }

            .triple .t .track i {
                display: block;
                height: 100%;
                border-radius: 3px
            }

.triple-sum {
    grid-column: 1/-1;
    text-align: center;
    font-size: 12px;
    color: var(--ink-2);
    padding-top: 13px;
    margin-top: 13px;
    border-top: 1px solid var(--hair)
}

/* ช่องค่าเดี่ยวพร้อมช่วงอ้างอิง */
.rpt-metric {
    align-items: center;
    text-align: center;
    justify-content: space-between;
    gap: 6px
}

    .rpt-metric .cap {
        justify-content: center
    }

    .rpt-metric .mv {
        font-size: 28px;
        font-weight: 800;
        letter-spacing: -.03em;
        font-variant-numeric: tabular-nums;
        margin-top: 10px;
        line-height: 1
    }

        .rpt-metric .mv u {
            text-decoration: none;
            font-size: 12.5px;
            font-weight: 600;
            color: var(--ink-2);
            margin-left: 3px
        }

    .rpt-metric .ref {
        font-size: 11px;
        color: var(--ink-3);
        margin-top: 6px
    }

    .rpt-metric .bdg {
        margin-top: 12px
    }

.rpt-note {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    background: var(--white);
    border-radius: var(--r-md);
    border: 1px solid var(--hair);
    padding: 13px 16px;
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.65;
    margin-bottom: 16px
}

    .rpt-note svg {
        width: 15px;
        height: 15px;
        stroke: var(--ink-3);
        stroke-width: 1.6;
        fill: none;
        flex-shrink: 0;
        margin-top: 2px
    }

/* ---------- แถวการ์ดวิเคราะห์ ---------- */
.rpt-row4 {
    display: grid;
    grid-template-columns: 1fr 1.05fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
    align-items: start
}

@media (max-width:1300px) {
    .rpt-row4 {
        grid-template-columns: 1fr 1fr
    }
}

.rpt-row2 {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 14px;
    margin-bottom: 14px;
    align-items: start
}

@media (max-width:1100px) {
    .rpt-row2 {
        grid-template-columns: 1fr
    }
}

/* โดนัทสัดส่วนร่างกาย */
.donut-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px
}

.donut {
    position: relative
}

    .donut .mid {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

        .donut .mid b {
            font-size: 26px;
            font-weight: 800;
            letter-spacing: -.03em;
            line-height: 1
        }

        .donut .mid span {
            font-size: 12px;
            color: var(--ink-2);
            margin-top: 1px
        }

.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 11px;
    width: 100%
}

    .donut-legend .lg {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        font-size: 12.5px
    }

    .donut-legend em {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-top: 5px
    }

    .donut-legend .nm {
        color: var(--ink-2)
    }

        .donut-legend .nm b {
            display: block;
            color: var(--ink);
            font-weight: 700;
            font-size: 13.5px;
            font-variant-numeric: tabular-nums;
            margin-top: 1px
        }

            .donut-legend .nm b u {
                text-decoration: none;
                font-weight: 500;
                font-size: 11.5px;
                color: var(--ink-3);
                margin-left: 3px
            }

/* ตารางค่าวิเคราะห์ไขมัน */
.mtable {
    display: flex;
    flex-direction: column
}

.mrow2 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--hair)
}

    .mrow2:last-child {
        border-bottom: 0
    }

    .mrow2 .nm {
        font-size: 12.5px;
        color: var(--ink-2);
        line-height: 1.3
    }

        .mrow2 .nm small {
            display: block;
            font-size: 10px;
            color: var(--ink-3)
        }

    .mrow2 .vl {
        margin-left: auto;
        font-size: 13.5px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        white-space: nowrap
    }

        .mrow2 .vl u {
            text-decoration: none;
            font-size: 11px;
            font-weight: 500;
            color: var(--ink-3);
            margin-left: 2px
        }

    .mrow2 .fl {
        width: 78px;
        flex-shrink: 0;
        text-align: right
    }

/* ภาพตัดขวางช่องท้อง */
.vat-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px
}

.vat-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    font-size: 12px;
    color: var(--ink-2)
}

    .vat-legend .lg {
        display: flex;
        align-items: center;
        gap: 8px
    }

    .vat-legend em {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        flex-shrink: 0
    }

    .vat-legend b {
        margin-left: auto;
        font-weight: 700;
        color: var(--ink);
        font-variant-numeric: tabular-nums
    }

/* รูปแบบการกระจายไขมัน */
.dist {
    display: flex;
    align-items: center;
    gap: 14px
}

    .dist .txt {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 16px
    }

        .dist .txt .lb {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--ink-3)
        }

        .dist .txt .vl {
            font-size: 14px;
            font-weight: 700;
            line-height: 1.35;
            margin-top: 3px
        }

/* เกจความเสี่ยง */
.gauge-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px
}

.gauge-label {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1
}

.gauge-sub {
    font-size: 11.5px;
    color: var(--ink-3)
}

.risk-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
    margin-top: 4px
}

    .risk-grid .rc {
        text-align: center
    }

        .risk-grid .rc .lb {
            font-size: 10.5px;
            color: var(--ink-2);
            line-height: 1.35;
            min-height: 26px
        }

        .risk-grid .rc .vv {
            font-size: 19px;
            font-weight: 700;
            letter-spacing: -.02em;
            font-variant-numeric: tabular-nums;
            margin-top: 3px
        }

            .risk-grid .rc .vv u {
                text-decoration: none;
                font-size: 10.5px;
                font-weight: 500;
                color: var(--ink-3);
                margin-left: 2px
            }

        .risk-grid .rc .st {
            font-size: 10.5px;
            font-weight: 700;
            margin-top: 3px
        }

        .risk-grid .rc .track {
            height: 4px;
            border-radius: 2px;
            background: var(--soft);
            margin-top: 7px;
            overflow: hidden
        }

            .risk-grid .rc .track i {
                display: block;
                height: 100%;
                border-radius: 2px
            }

.rec {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--soft);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-top: 16px
}

    .rec .ic {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        background: var(--white);
        display: grid;
        place-items: center;
        flex-shrink: 0
    }

        .rec .ic svg {
            width: 16px;
            height: 16px;
            stroke: var(--slate);
            stroke-width: 1.6;
            fill: none
        }

    .rec b {
        display: block;
        font-size: 12.5px;
        color: var(--slate);
        margin-bottom: 3px
    }

    .rec p {
        margin: 0;
        font-size: 12px;
        color: var(--ink-2);
        line-height: 1.65
    }

/* พลังงานและโภชนาการ */
.energy-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px
}

@media (max-width:900px) {
    .energy-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

.energy-grid .eb {
    border: 1px solid var(--hair);
    border-radius: var(--r-md);
    padding: 14px 15px;
    background: linear-gradient(135deg,var(--bg) 0%,var(--soft) 100%);
    display: flex;
    flex-direction: column;
    gap: 3px
}

    .energy-grid .eb .lb {
        font-size: 11px;
        color: var(--ink-2);
        font-weight: 600
    }

    .energy-grid .eb .vv {
        font-size: 23px;
        font-weight: 800;
        letter-spacing: -.03em;
        font-variant-numeric: tabular-nums;
        line-height: 1.15
    }

        .energy-grid .eb .vv u {
            text-decoration: none;
            font-size: 11.5px;
            font-weight: 500;
            color: var(--ink-2);
            margin-left: 3px
        }

    .energy-grid .eb .sub {
        font-size: 10.5px;
        color: var(--ink-3);
        margin-top: 2px
    }

    .energy-grid .eb select {
        margin-top: 5px;
        width: 100%;
        appearance: none;
        -webkit-appearance: none;
        border: 1px solid var(--hair);
        background: var(--white);
        border-radius: 10px;
        padding: 6px 10px;
        font-size: 11.5px;
        color: var(--ink);
        cursor: pointer
    }

.macro {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--hair)
}

    .macro .ttl {
        font-size: 12px;
        color: var(--ink-2);
        font-weight: 600;
        margin-bottom: 10px
    }

.macro-bar {
    display: flex;
    height: 34px;
    border-radius: 10px;
    overflow: hidden
}

    .macro-bar i {
        display: grid;
        place-items: center;
        color: #fff;
        font-size: 12.5px;
        font-weight: 700
    }

.macro-legend {
    display: flex;
    gap: 26px;
    margin-top: 12px;
    flex-wrap: wrap
}

    .macro-legend .lg {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--ink-2)
    }

    .macro-legend em {
        width: 9px;
        height: 9px;
        border-radius: 50%
    }

    .macro-legend b {
        color: var(--ink);
        font-weight: 700;
        font-variant-numeric: tabular-nums
    }

/* กล่องข้อสังเกตท้ายหน้า */
.insight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--white);
    border-radius: var(--r);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: var(--card);
    padding: 18px 20px
}

    .insight .ic {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg,rgba(162,225,218,.30) 0%,rgba(75,93,143,.10) 100%)
    }

        .insight .ic svg {
            width: 19px;
            height: 19px;
            stroke: var(--slate);
            stroke-width: 1.6;
            fill: none
        }

    .insight b {
        display: block;
        font-size: 13px;
        color: var(--slate);
        margin-bottom: 3px
    }

    .insight p {
        margin: 0;
        font-size: 12.5px;
        color: var(--ink);
        line-height: 1.7
    }

/* ---------- โหมดพิมพ์ ---------- */
@media print {
    .side, .navbar-wrap, .rpt-head .r, .no-print {
        display: none !important
    }

    body {
        background: #fff
    }

    .rpt-box, .card, .insight {
        box-shadow: none;
        border: 1px solid #DCE3EE;
        break-inside: avoid
    }

    .rpt-row4, .rpt-row2, .rpt-strip {
        break-inside: avoid
    }

    .main {
        padding: 0
    }
}