body {
    font-family: Arial, sans-serif;
    margin: 0;

    background: linear-gradient(
    180deg,
    #D5C5E0 0%,   /* header 가운데 색 (보라) */
    #E6D8F0 20%,
    #F4C6D0 40%,
    #E3ECFF 65%,
    #f5f5f5 85%
    );

    /* background:
    linear-gradient(
        180deg,
        rgba(255,255,255,0) 0%,
        rgba(245,245,245,0.9) 70%,
        #f5f5f5 100%
    ),
    linear-gradient(
        90deg,
        #FF9898,
        #D5C5E0,
        #8FB6FF
    ); */
    }
    

    .header {
        background: linear-gradient(90deg,#FF9898,#D5C5E0,#8FB6FF);
        color: white;
        text-align: center;
        padding: 80px 20px;
        position: relative;
        overflow: hidden;
    }
    
    .header h1{
        font-size:52px;
        font-weight:700;
        letter-spacing:1px;
        color:white;
    
        text-shadow:
            0 2px 4px rgba(0,0,0,0.25),
            0 6px 12px rgba(0,0,0,0.15);
    }
        
    .header p{
    font-size:20px;
    opacity:0.9;
    color:white;
    }
    
    .links {
    text-align:center;
    padding:20px;
    }
    
    .links a {
    color:#3b6ea5;
    margin:0 10px;
    text-decoration:none;
    font-weight:bold;
    }
    
    .container {
    max-width:1200px;   
    margin:60px auto;
    background:white;
    padding:40px;


    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,0.15);
    border:1px solid rgba(0,0,0,0.04);

    transition:all 0.25s ease;
    }

    .container:hover{
    transform:translateY(-6px);
    box-shadow:0 30px 80px rgba(63, 62, 62, 0.25);
    }
    
    h2 {
    text-align:center;
    color:#8FB6FF;

    font-size:30px;
    font-weight:650;
    margin-bottom:40px;
    }
    
    .authors {
    text-align:center;
    font-weight:bold;
    }
    
    h3{
        font-size:24px;
        margin-top:10px;
        margin-bottom:18px;
    }

    p{
        font-size:16px;
        line-height:1.7;   /* ← 핵심 */
        color:#444;
    
        margin-bottom:20px;
    }


    /* table {
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
    }
    
    td, th{
    padding:12px 10px;
    text-align:center;
    } */
    table{
        width:100%;
        border-collapse:collapse;
        margin-top:30px;
    
        border:1px solid #dcdcdc;
        border-radius:10px;
        overflow:hidden;
    }
    
    th{
        background:#f3f4f6;
        font-weight:600;
    
        padding:14px 12px;
    
        border:1px solid #dcdcdc;
    
        text-align:center;
    }
    
    td{
        padding:14px 12px;
    
        border:1px solid #e5e5e5;
    
        text-align:center;
    }





    .wer{
        font-size:13px;
        color:#666;
        margin-top:6px;
        }





    audio{
    width:240px;
    min-width:240px;
    }


    
    #particles-js {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:0;
    }
    
    .header h1,
    .header p {
    position: relative;
    z-index:1;
    }

    
    .title-main{
        font-family: 'Inter', sans-serif;
        font-size: 28px;
        font-weight: 600;
        line-height: 1.4;
        text-align: center;
        color: #2c2c2c;
        margin-bottom: 25px;
      }


    .sample-text{
    font-size:14px;
    color:#666;
    padding-top:6px;

    line-height:1.6;        /* 줄 간격 */
    text-align:center;

    max-width:340px;        /* 문장 폭 고정 */
    margin:auto;

    word-break:normal;  /* 긴 단어 줄바꿈 */
    }
    
    .sample-label{
    font-weight:600;
    text-align:center;
    padding-right:20px;
    width:70px;
    }

    .error{
        color:#e74c3c;
        font-weight:600;
    }

    .nowrap{
        white-space: nowrap;
      }

    .audio-note{
        /* text-align:center; */
        font-size:17px;
        color:#414141;
        margin-bottom:20px;
      }

    .framework-figure{
        display:flex;
        justify-content:center;
        margin-top:40px;
    }
    
    .framework-figure img{

        width:65%;
        max-width:700px;
    
        border-radius:12px; /* 너무 둥글지 않게 */
    
        box-shadow:none;    /* 입체감 제거 */
    
        opacity:0;
        transform:translateY(60px);

        animation:riseFade 1.6s ease forwards;
    }
    
    @keyframes riseFade{
    0%{
        opacity:0;
        transform:translateY(60px);
    }
    60%{
        opacity:0.6;
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
    }