body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: flex-start;
    height: 100vh;
    align-items: center;
    background-color: #f0f2f5;
    margin: 0;
    flex-direction: column;
    margin-top: 50px;
}

.container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 15px;
    padding: 40px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.region-select {
    width: 100px;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') no-repeat right 10px center;
    background-size: 12px;
}

.search-group{
    position: relative;
    width: 300px;
}

.search-group input{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

.autocomplete-list{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-top: none;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 999;
}

.autocomplete-item{
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.autocomplete-item:hover{
    background-color: #f0f0f0;
}

.swap-button{
    margin-bottom: 20px;
    padding: 11px 11px;
    font-size: 16px;
    border-radius: 8px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: center;
}

.swap-button:hover{
    background-color: #0056b3;
}

.reset-button{
    margin-bottom: 20px;
    padding: 11px 11px;
    font-size: 14px;
    border-radius: 8px;
    background-color: #424242;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: center;
}

.search-button{
    margin-bottom: 20px;
    padding: 11px 11px;
    font-size: 14px;
    border-radius: 8px;
    background-color: #424242;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: center;
}

.timeline-container{
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    width: 90%;
    max-width: 600px;
    margin-top: 30px;
    padding: 0;
}

.total-time{
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.timeline-header .details{
    margin-left: 12px;
    font-size: 15px;
    color: #555;
}

.timeline-body{
    padding: 20px;
}

.timeline-segment{
    display: flex;
    position: relative;
}

.timeline-line-container{
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-dot{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc;
    z-index: 1;
}

.timeline-dot.start{background-color: #2a7de2;}
.timeline-dot.end{background-color: #e64545;}

.timeline-line{
    width: 3px;
    flex-grow: 1;
    background-color: #ccc;
    margin: 4px 0;
}

.station-info{
    padding-left: 15px;
    padding-bottom: 25px;
    width: 100%;
}

.station-name{
    font-size: 18px;
    font-weight: 500;
    color: #333;
}
.station-name.main-station{
    font-weight: bold;
}

.station-details{
    font-size: 14px;
    color: #666;
    margin-top: 4px;
}

.line-badge{
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
}

.line-walk, .timeline-dot.line-walk, .timeline-line.line-walk { background-color: #BDBDBD; }

/* 수도권 (서울) */
.line-S1, .timeline-dot.line-S1, .timeline-line.line-S1 { background-color: #0052A4; }
.line-S2, .timeline-dot.line-S2, .timeline-line.line-S2 { background-color: #00A84D; }
.line-S3, .timeline-dot.line-S3, .timeline-line.line-S3 { background-color: #EF7C1C; }
.line-S4, .timeline-dot.line-S4, .timeline-line.line-S4 { background-color: #00A4E3; }
.line-S5, .timeline-dot.line-S5, .timeline-line.line-S5 { background-color: #996CAC; }
.line-S6, .timeline-dot.line-S6, .timeline-line.line-S6 { background-color: #CD7C2F; }
.line-S7, .timeline-dot.line-S7, .timeline-line.line-S7 { background-color: #747F00; }
.line-S8, .timeline-dot.line-S8, .timeline-line.line-S8 { background-color: #E6186C; }
.line-S9, .timeline-dot.line-S9, .timeline-line.line-S9 { background-color: #BDB092; }
.line-SKJ, .timeline-dot.line-SKJ, .timeline-line.line-SKJ { background-color: #77C4A3; }
.line-SKC, .timeline-dot.line-SKC, .timeline-line.line-SKC { background-color: #0C8E72; }
.line-SKK, .timeline-dot.line-SKK, .timeline-line.line-SKK { background-color: #0054A6; }
.line-SSB, .timeline-dot.line-SSB, .timeline-line.line-SSB { background-color: #FABE00; }
.line-SSD, .timeline-dot.line-SSD, .timeline-line.line-SSD { background-color: #D4003B; }
.line-SUS, .timeline-dot.line-SUS, .timeline-line.line-SUS { background-color: #B0CE18; }
.line-SSH, .timeline-dot.line-SSH, .timeline-line.line-SSH { background-color: #81A914; }
.line-SA, .timeline-dot.line-SA, .timeline-line.line-SA { background-color: #0090D2; }
.line-SGL, .timeline-dot.line-SGL, .timeline-line.line-SGL { background-color: #A17800; }
.line-SSL, .timeline-dot.line-SSL, .timeline-line.line-SSL { background-color: #6789CA; }
.line-I1, .timeline-dot.line-I1, .timeline-line.line-I1 { background-color: #7CA8D5; }
.line-I2, .timeline-dot.line-I2, .timeline-line.line-I2 { background-color: #FFB850; }
.line-SGA, .timeline-dot.line-SGA, .timeline-line.line-SGA { background-color: #CD0074; }
.line-SYE, .timeline-dot.line-SYE, .timeline-line.line-SYE { background-color: #AFCF89; }
.line-SUI, .timeline-dot.line-SUI, .timeline-line.line-SUI { background-color: #DD7405; }

/* 부산 */
.line-B1, .timeline-dot.line-B1, .timeline-line.line-B1 { background-color: #FF8200; }
.line-B2, .timeline-dot.line-B2, .timeline-line.line-B2 { background-color: #86BF43; }
.line-B3, .timeline-dot.line-B3, .timeline-line.line-B3 { background-color: #BB8B00; }
.line-B4, .timeline-dot.line-B4, .timeline-line.line-B4 { background-color: #0072BC; }
.line-BE, .timeline-dot.line-BE, .timeline-line.line-BE { background-color: #00A5DE; }
.line-BG, .timeline-dot.line-BG, .timeline-line.line-BG { background-color: #8660A5; }

/* 대구 */
.line-D1, .timeline-dot.line-D1, .timeline-line.line-D1 { background-color: #D93F3F; }
.line-D2, .timeline-dot.line-D2, .timeline-line.line-D2 { background-color: #00AA80; }
.line-D3, .timeline-dot.line-D3, .timeline-line.line-D3 { background-color: #FFB100; }

/* 광주 */
.line-G1, .timeline-dot.line-G1, .timeline-line.line-G1 { background-color: #00907F; }
.line-G2, .timeline-dot.line-G2, .timeline-line.line-G2 { background-color: #F08D41; }

/* 대전 */
.line-J1, .timeline-dot.line-J1, .timeline-line.line-J1 { background-color: #007F3E; }

.station-toggle{
    font-size: 14px;
    color: #555;
    cursor: pointer;
    margin: 12px 0;
    display: inline-block;
}
.station-toggle:hover{
    color: #007bff;
}

.intermediate-stations{
    background-color: #f7f7f7;
    border-radius: 6px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
.intermediate-stations.active{
    padding: 10px;
    max-height: 500px;
}

.intermediate-station-item{
    padding: 6px 0;
    font-size: 14px;
    color: #444;
    padding-left: 10px;
    border-left: 3px solid #ddd;
}
.travel-time { margin-left: 8px; color: #555; font-weight: bold; }

@media (max-width: 600px) {
  body{
    margin-top: 20px;
    height: auto;
    min-height: 100vh;
  }
  .container {
    flex-direction: column;
    padding: 20px;
    width: 90%;
   }

  .region-select, .search-group {
    width: 100%;
   }
  .swap-button, .reset-button, .search-button {
    width: 100%;
    margin-bottom: 10px;
   }
  .timeline-container {
    width: 90%;
    margin-top: 20px;
   }
  .timeline-body{
    padding: 15px;
  }
  .total-time{
    font-size: 20px;
  }
  .station-name{
    font-size: 16px;
  }
  .station-details, .timeline-header, .details, .station-toggle, .intermediate-station-item{
    font-size: 13px;
  }
}