/* AI 코칭 리포트: 색상, 글꼴, 여백, 테두리는 tokens.css의 UDS 토큰을 사용합니다. */
.report-page{
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:var(--spacing-layout-y-20) var(--spacing-layout-x-20);
    color:var(--color-text-base-primary);
    box-sizing:border-box;
}

.report-title{
    padding-left:var(--spacing-layout-x-16);
    margin:0 0 var(--spacing-gap-12);
    font-size:var(--font-size-24);
    font-weight:var(--font-weight-bold);
}

/* 네 카드의 순서를 유지하며 좁은 화면에서는 가로로 넘깁니다. */
.report-stat-list{
    display:flex;
    align-items:stretch;
    min-width:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.report-stat-list::-webkit-scrollbar{ display:none; }
.report-stat-list > * + *{ margin-left:var(--spacing-gap-20); }

.report-stat-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex:0 0 calc((100% - var(--spacing-gap-20) * 2) / 4);
    min-width:calc(var(--spacing-gap-40) * 5);
    min-height:calc(var(--spacing-layout-y-80) + var(--spacing-layout-y-64));
    padding:var(--spacing-component-y-16) var(--spacing-component-x-16);
    border:var(--border-width-default) solid var(--color-border-base-low);
    border-radius:var(--radius-medium);
    background:var(--color-container-base-primary);
    color:var(--color-text-base-primary);
    font:inherit;
    text-align:left;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    box-sizing:border-box;
}
.report-stat-card:hover{ background:var(--color-state-light-hover); }
.report-stat-card:focus-visible,
.report-start-button:focus-visible,
.report-table-scroll:focus-visible{
    outline:var(--border-width-focus) solid var(--color-border-brand-primary);
    outline-offset:var(--border-width-default);
}
.report-stat-copy{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-self:stretch;
    min-width:0;
    flex:1;
}
.report-stat-label{
    font-size:var(--font-size-14);
    font-weight:var(--font-weight-bold);
}
.report-stat-value{
    font-size:var(--font-size-18);
    font-weight:var(--font-weight-bold);
    line-height:var(--line-height-body);
}
.report-stat-value small{
    font-size:var(--font-size-18);
}
.report-stat-desc{
    font-size:var(--font-size-12);
    font-weight:var(--font-weight-medium);
}
.report-stat-arrow{
    display:block;
    flex-shrink:0;
    width:calc(var(--spacing-gap-16) * 5);
    height:calc(var(--spacing-gap-16) * 5);
    margin-left:var(--spacing-gap-10);
    object-fit:contain;
}

.report-history{
    min-width:0;
    margin-top:var(--spacing-gap-32);
}
.report-history-title{
    margin:0 0 var(--spacing-gap-12);
    font-size:var(--font-size-20);
    font-weight:var(--font-weight-bold);
}
.report-table-scroll{
    max-width:100%;
    overflow-x:auto;
    border:var(--border-width-default) solid var(--color-border-base-low);
    border-radius:var(--radius-medium);
    -webkit-overflow-scrolling:touch;
}
.report-table{
    width:100%;
    min-width:calc(var(--spacing-gap-40) * 19 + var(--spacing-gap-20));
    table-layout:fixed;
    border-collapse:collapse;
    background:var(--color-container-base-primary);
}
.report-table th,
.report-table td{
    width:calc(100% / 6);
    height:calc(var(--spacing-gap-32) + var(--spacing-gap-20));
    padding:var(--spacing-component-y-8) var(--spacing-component-x-12);
    border-bottom:var(--border-width-default) solid var(--color-border-base-low);
    text-align:center;
    white-space:nowrap;
}
.report-table th{
    background:var(--color-container-base-low);
    font-size:var(--font-size-14);
    font-weight:var(--font-weight-bold);
}
.report-table td{
    font-size:var(--font-size-14);
    font-weight:var(--font-weight-medium);
}
.report-table tbody tr:last-child td{ border-bottom:0; }
.report-table td:nth-child(2){ font-weight:var(--font-weight-bold); }
.report-start-button{
    min-height:calc(var(--spacing-gap-32) + var(--spacing-gap-4));
    padding:var(--spacing-component-y-6) var(--spacing-component-x-8);
    border:0;
    border-radius:var(--radius-small);
    background:transparent;
    color:var(--color-text-brand-primary);
    font:inherit;
    font-size:var(--font-size-14);
    font-weight:var(--font-weight-bold);
    cursor:pointer;
}
.report-start-button:hover{ background:var(--color-container-brand-secondary); }

@media (max-width:767px){
    .report-page{ padding:var(--spacing-layout-y-16) var(--spacing-layout-x-16); }
    .report-title{ font-size:var(--font-size-20); }
    .report-stat-card{
        flex:0 0 68%;
        min-width:0;
    }
}