.traffic-page{padding:var(--spacing-2xl) 0 var(--spacing-3xl);background:var(--color-gray-50);min-height:calc(100vh - 300px)}.traffic-page__header{margin-bottom:var(--spacing-xl)}.traffic-page__title{display:flex;align-items:center;gap:var(--spacing-md);font-size:var(--text-3xl);font-family:var(--font-display);color:var(--color-gray-900);margin-bottom:var(--spacing-xs)}.traffic-page__title i{color:var(--color-primary)}.traffic-page__subtitle{color:var(--color-gray-500);font-size:var(--text-base);margin:0}.traffic-score-panel{display:flex;align-items:center;justify-content:space-between;background:var(--color-white);border-radius:var(--radius-xl);padding:var(--spacing-lg) var(--spacing-xl);box-shadow:var(--shadow-sm);border:1px solid var(--color-gray-100);margin-bottom:var(--spacing-lg);gap:var(--spacing-xl)}.traffic-score-panel__left{display:flex;align-items:center;gap:var(--spacing-lg)}.traffic-score-panel__circle{width:64px;height:64px;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;background:var(--color-gray-200);transition:background var(--transition-base);flex-shrink:0}.traffic-score-panel__circle[data-level="green"]{background:#22c55e}.traffic-score-panel__circle[data-level="yellow"]{background:#eab308}.traffic-score-panel__circle[data-level="red"]{background:#ef4444}.traffic-score-panel__number{font-size:var(--text-2xl);font-weight:800;color:var(--color-white);line-height:1}.traffic-score-panel__details{display:flex;flex-direction:column;gap:2px}.traffic-score-panel__status{font-size:var(--text-lg);font-weight:600;color:var(--color-gray-900)}.traffic-score-panel__hint{font-size:var(--text-sm);color:var(--color-gray-400)}.traffic-score-panel__legend{display:flex;gap:var(--spacing-lg);flex-shrink:0}.traffic-legend{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--text-xs);color:var(--color-gray-500);white-space:nowrap}.traffic-legend__dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.traffic-legend__dot--green{background:#22c55e}.traffic-legend__dot--yellow{background:#eab308}.traffic-legend__dot--red{background:#ef4444}.traffic-map-wrap{position:relative;margin-bottom:var(--spacing-2xl);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--color-gray-100)}.traffic-map{width:100%;height:520px;background:var(--color-gray-100)}.traffic-map__controls{position:absolute;top:var(--spacing-md);right:var(--spacing-md);display:flex;flex-direction:column;gap:4px;z-index:10}.traffic-map__btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);cursor:pointer;color:var(--color-gray-600);font-size:var(--text-lg);transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}.traffic-map__btn:hover{background:var(--color-gray-50);color:var(--color-primary);border-color:var(--color-primary)}.traffic-scale{margin-bottom:var(--spacing-2xl)}.traffic-scale__title{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-gray-900);margin-bottom:var(--spacing-lg)}.traffic-scale__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--spacing-sm)}.traffic-scale__item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md) var(--spacing-sm);background:var(--color-white);border-radius:var(--radius-lg);border:1px solid var(--color-gray-100);text-align:center;transition:transform var(--transition-fast)}.traffic-scale__item:hover{transform:translateY(-2px)}.traffic-scale__num{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);font-weight:700;font-size:var(--text-base);color:var(--color-white)}.traffic-scale__text{font-size:var(--text-xs);color:var(--color-gray-500);line-height:1.3}.traffic-scale__item--1 .traffic-scale__num{background:#22c55e}.traffic-scale__item--2 .traffic-scale__num{background:#4ade80}.traffic-scale__item--3 .traffic-scale__num{background:#86efac;color:#15803d}.traffic-scale__item--4 .traffic-scale__num{background:#fde047;color:#854d0e}.traffic-scale__item--5 .traffic-scale__num{background:#eab308}.traffic-scale__item--6 .traffic-scale__num{background:#f59e0b}.traffic-scale__item--7 .traffic-scale__num{background:#f97316}.traffic-scale__item--8 .traffic-scale__num{background:#ef4444}.traffic-scale__item--9 .traffic-scale__num{background:#dc2626}.traffic-scale__item--10 .traffic-scale__num{background:#991b1b}.traffic-tips{margin-bottom:var(--spacing-2xl)}.traffic-tips__title{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-gray-900);margin-bottom:var(--spacing-lg)}.traffic-tips__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg)}.traffic-tips__card{display:flex;gap:var(--spacing-md);padding:var(--spacing-lg);background:var(--color-white);border-radius:var(--radius-xl);border:1px solid var(--color-gray-100);box-shadow:var(--shadow-sm)}.traffic-tips__card>i{font-size:var(--text-2xl);color:var(--color-primary);flex-shrink:0;margin-top:2px}.traffic-tips__card strong{display:block;font-size:var(--text-base);color:var(--color-gray-900);margin-bottom:4px}.traffic-tips__card p{font-size:var(--text-sm);color:var(--color-gray-500);margin:0;line-height:1.6}.traffic-note{display:flex;align-items:center;gap:var(--spacing-md);background:var(--color-white);border-radius:var(--radius-lg);padding:var(--spacing-md) var(--spacing-lg);border:1px solid var(--color-gray-100)}.traffic-note i{font-size:var(--text-lg);color:var(--color-gray-300);flex-shrink:0}.traffic-note p{font-size:var(--text-sm);color:var(--color-gray-400);margin:0;line-height:1.5}@media (max-width:1024px){.traffic-scale__grid{grid-template-columns:repeat(5,1fr)}.traffic-tips__grid{grid-template-columns:1fr}}@media (max-width:768px){.traffic-page{padding:var(--spacing-xl) 0 var(--spacing-2xl)}.traffic-page__title{font-size:var(--text-2xl)}.traffic-score-panel{flex-direction:column;align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-lg)}.traffic-score-panel__legend{flex-wrap:wrap;gap:var(--spacing-md)}.traffic-map{height:380px}.traffic-scale__grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.traffic-score-panel__circle{width:52px;height:52px}.traffic-score-panel__number{font-size:var(--text-xl)}.traffic-score-panel__status{font-size:var(--text-base)}.traffic-map{height:300px}.traffic-scale__grid{grid-template-columns:repeat(2,1fr)}.traffic-tips__card{flex-direction:column;gap:var(--spacing-sm)}}