:root{--font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;--color-primary: #007bff;--color-secondary: #ff9800;--color-bg: #f5f5f5;--color-text: #333;--color-white: #ffffff;--spacing-unit: 1rem}body{margin:0;font-family:var(--font-family);background-color:var(--color-bg);color:var(--color-text);line-height:1.5;-webkit-font-smoothing:antialiased}.app-container{max-width:600px;margin:0 auto;padding:var(--spacing-unit);min-height:100vh;display:flex;flex-direction:column}header{text-align:center;margin-bottom:2rem}header h1{margin:0;font-size:2rem;color:#333}h2{font-size:1.25rem;color:#555;margin-bottom:.5rem}.selection-section{margin-bottom:2rem;background:var(--color-white);padding:1rem;border-radius:8px;box-shadow:0 2px 4px #0000001a}.area-selector{display:flex;justify-content:space-between;gap:.5rem}.area-button{flex:1;padding:1rem .5rem;font-size:1.25rem;border:2px solid #ddd;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s;color:#333}.area-button.active{border-color:var(--color-primary);background:#e6f2ff;font-weight:700}.bus-stop-selector{width:100%}.bus-stop-select{width:100%;padding:1rem;font-size:1.25rem;border:1px solid #ddd;border-radius:8px;background:#fff;appearance:none}.countdown-container{display:flex;flex-direction:column;gap:1rem}.countdown-card{background:#fff;padding:1.5rem;border-radius:12px;box-shadow:0 4px 6px #0000001a;text-align:center;border-left:8px solid #ccc}.countdown-card.left-loop{border-left-color:var(--color-primary)}.countdown-card.right-loop{border-left-color:var(--color-secondary)}.direction-label{font-size:1.25rem;font-weight:700;margin-bottom:.5rem;color:#444}.time-info{display:flex;flex-direction:column;align-items:center}.remaining-time{font-size:2.5rem;font-weight:700;color:#222;margin:.5rem 0}.arrival-time{font-size:1.2rem;color:#666}.no-service{font-size:1.2rem;color:#999;padding:1rem 0}.recent-section{margin-top:2rem}.recent-list{display:flex;flex-wrap:wrap;gap:.5rem}.recent-stop-button{padding:.5rem 1rem;font-size:1rem;background:#fff;border:1px solid #ddd;border-radius:20px;cursor:pointer}.subsequent-buses{margin-top:1rem;padding-top:.5rem;border-top:1px solid rgba(0,0,0,.1);font-size:1rem}.subsequent-label{font-size:.9rem;opacity:.8;margin-bottom:.25rem;color:#555;text-align:left}.subsequent-times{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;justify-items:center}.subsequent-time{background:#0000000d;padding:4px 8px;border-radius:4px;color:#333;width:100%;text-align:center;box-sizing:border-box}.app-container{max-width:600px;margin:0 auto;padding:20px;font-family:Helvetica Neue,Arial,sans-serif}header{text-align:center;margin-bottom:10px}h1{font-size:18px;color:#333;margin:0}.area-selection-toggle{background-color:#fd7e14;color:#fff;border:none;padding:10px 16px;margin:0;display:flex;align-items:center;gap:8px;cursor:pointer;text-align:left;border-radius:8px;width:fit-content}.area-selection-toggle h2{margin:0;font-size:16px;color:#fff}.toggle-icon{font-size:12px;transition:transform .3s ease;display:inline-block}.toggle-icon.open{transform:rotate(180deg)}.header-right-column{display:flex;flex-direction:column;align-items:center;gap:4px}.day-type-section{display:flex;justify-content:flex-end;gap:0;margin-bottom:0}.header-top{display:flex;justify-content:space-between;align-items:center;width:100%}.selection-header{display:flex;flex-direction:column;gap:8px;margin-bottom:0}.selected-bus-stop-row{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:#f8f9fa;border-top:1px solid #f0f0f0;border-bottom:1px solid #eee}.selected-bus-stop-name{font-size:16px;font-weight:700;color:#007bff}.current-date-info{display:flex;align-items:center;justify-content:flex-end;font-size:14px;color:#666;margin-bottom:8px}.accordion-item{border-bottom:1px solid #eee}.accordion-header{width:100%;text-align:left;padding:16px;background:#fff;border:none;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;color:#333}.accordion-header .arrow{margin-right:8px;transition:transform .2s;font-size:12px;color:#888}.accordion-header:not(.expanded) .arrow{transform:rotate(-90deg)}.accordion-content{padding:0 16px 16px 24px}.route-line-container{position:relative;padding-left:8px}.stop-item{display:flex;align-items:center;padding:12px 16px;cursor:pointer;position:relative;transition:background-color .2s}.time-line-visual{display:flex;flex-direction:column;align-items:center;margin-right:16px;width:30px;position:relative}.time-line-visual:before{content:"";position:absolute;top:-24px;bottom:-24px;left:50%;width:6px;background-color:orange;transform:translate(-50%);z-index:0}.stop-item:first-child .time-line-visual:before{top:0}.stop-item:last-child .time-line-visual:before{bottom:0}.marker{position:relative;z-index:1;font-size:26px;line-height:1;color:#bbb;background:#fff}.marker.selected{color:orange;background:#007bff;border-radius:50%;transform:scale(1.2)}.stop-name{font-size:16px;color:#333}.stop-name.selected{font-weight:700;color:#007bff}.stop-item.selected{background-color:#007bff;border-radius:8px}.stop-item.selected .stop-name{color:#fff}.stop-item.selected .selected-label{color:#ffffffe6}.selected-label{font-size:.8em;font-weight:400;color:#666;margin-left:8px}.footer-container{display:flex;justify-content:center;padding:16px;background:#fff;border-top:1px solid #eee;box-shadow:0 -2px 10px #0000001a;position:fixed;bottom:0;left:0;width:100%;z-index:1000;box-sizing:border-box}.footer-buttons{display:flex;gap:12px;width:100%;max-width:400px}.date-setting-btn{flex:1;background-color:#dc3545;color:#fff;border:none;padding:12px;border-radius:20px;font-size:14px;font-weight:700;cursor:pointer;text-align:center}.route-map-btn{flex:1;display:inline-block;background-color:#28a745;color:#fff;text-decoration:none;padding:12px;border-radius:20px;font-size:14px;font-weight:700;text-align:center;transition:background-color .2s;max-width:none;width:auto}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:2000;display:flex;align-items:flex-end}.modal-content{background:#fff;width:100%;border-top-left-radius:16px;border-top-right-radius:16px;padding-bottom:30px;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #eee;background:#f8f9fa;border-top-left-radius:16px;border-top-right-radius:16px}.modal-title{font-weight:700;font-size:16px}.modal-cancel-btn{background:none;border:none;color:#007bff;font-size:16px;cursor:pointer}.modal-done-btn{background:none;border:none;color:#007bff;font-size:16px;font-weight:700;cursor:pointer}.modal-body{padding:20px 20px 2px}.shortcut-buttons{display:flex;justify-content:center;gap:16px;margin-bottom:24px}.shortcut-buttons button{padding:8px 24px;border-radius:20px;border:1px solid #ddd;background:#fff;font-size:14px;color:#333}.date-time-pickers{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.picker-group{flex:1;display:flex;flex-direction:column;align-items:center}.picker-group label{font-size:12px;color:#666;margin-bottom:2px;text-align:center;width:100%}.picker-group input{font-size:20px;padding:4px 8px;border:1px solid #eee;border-radius:8px;width:auto;min-width:unset;text-align:center;background:#f8f9fa}.reset-section{text-align:center}.reset-time-btn{background:none;border:none;color:#dc3545;font-size:14px;text-decoration:underline;cursor:pointer}main.has-fixed-footer{padding-bottom:80px}.confirm-selection-btn{background-color:#007bff;color:#fff;border:none;padding:12px 24px;border-radius:20px;font-size:16px;font-weight:700;cursor:pointer;width:100%;max-width:300px;transition:background-color .2s}.confirm-selection-btn:hover{background-color:#0056b3}.disclaimer{font-size:12px;color:#666;margin-top:8px;line-height:1.5}.disclaimer a{color:#007bff;text-decoration:underline}.header-right-column{display:flex;flex-direction:column;align-items:flex-end}.route-map-btn:hover{background-color:#218838}.holiday-warning{font-size:12px;color:#666;margin-top:2px;margin-bottom:0;text-align:center}