.traffic-overview-page { --traffic-green:#28644a; --traffic-green-dark:#16462f; --traffic-green-soft:#eef8f2; --traffic-amber:#ad6c28; --traffic-amber-soft:#fff4e5; --traffic-blue:#396a83; --traffic-blue-soft:#edf6fa; --traffic-plum:#77566e; --traffic-plum-soft:#f8f0f6; }
.traffic-hero { background:radial-gradient(circle at 86% 18%,rgba(229,173,88,.28),transparent 28%),radial-gradient(circle at 72% 84%,rgba(57,106,131,.14),transparent 35%),linear-gradient(135deg,#eef8f2 0%,#fff8ed 100%); }
.traffic-title { display:flex; flex-wrap:wrap; align-items:center; gap:.38em; max-width:1180px; font-size:clamp(1.9rem,4.25vw,3.55rem); }
.traffic-title span { display:inline-flex; align-items:center; }
.traffic-title span:not(:last-child)::after { content:'→'; margin-left:.38em; color:var(--color-accent-dark); font-size:.54em; }
.quick-traffic-nav { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-8); }
.quick-traffic-nav a { display:inline-flex; align-items:center; gap:var(--space-2); padding:.78rem 1rem; border:1px solid rgba(40,100,74,.22); border-radius:999px; background:rgba(255,255,255,.86); color:var(--traffic-green-dark); font-size:var(--text-sm); font-weight:800; text-decoration:none; box-shadow:0 8px 22px rgba(22,70,47,.06); }
.quick-traffic-nav a:hover,.quick-traffic-nav a:focus-visible { border-color:var(--traffic-green); background:#fff; }
.section-kicker { margin-bottom:var(--space-2); color:var(--color-accent-dark); font-size:var(--text-sm); font-weight:900; letter-spacing:.05em; }
.traffic-symptom-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5); margin-top:var(--space-8); }
.traffic-symptom-card { padding:var(--space-8); border:1px solid #cde0d4; border-radius:28px; background:linear-gradient(155deg,#fff 0%,var(--traffic-green-soft) 100%); box-shadow:0 16px 42px rgba(47,70,84,.08); }
.traffic-symptom-card.is-back { border-color:#e6d3b8; background:linear-gradient(155deg,#fff 0%,var(--traffic-amber-soft) 100%); }
.traffic-symptom-card.is-body { border-color:#cfe0e8; background:linear-gradient(155deg,#fff 0%,var(--traffic-blue-soft) 100%); }
.traffic-symptom-tag { display:inline-flex; padding:.42rem .72rem; border-radius:999px; background:var(--traffic-green); color:#fff; font-size:var(--text-xs); font-weight:900; }
.traffic-symptom-card.is-back .traffic-symptom-tag { background:var(--traffic-amber); }
.traffic-symptom-card.is-body .traffic-symptom-tag { background:var(--traffic-blue); }
.traffic-symptom-card h3 { margin:var(--space-5) 0 var(--space-3); color:var(--color-primary-dark); font-size:clamp(1.3rem,2.15vw,1.6rem); line-height:1.4; }
.traffic-symptom-card>p { margin:0; color:var(--color-text-light); line-height:1.72; }
.traffic-symptom-list { display:grid; gap:var(--space-2); margin:var(--space-5) 0 0; padding:var(--space-4) 0 0; border-top:1px solid rgba(40,100,74,.14); list-style:none; }
.traffic-symptom-list li { position:relative; padding-left:1.15rem; color:var(--color-text-light); font-size:var(--text-sm); line-height:1.55; }
.traffic-symptom-list li::before { content:'•'; position:absolute; left:0; color:var(--color-accent-dark); font-weight:900; }
.traffic-route-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5); margin-top:var(--space-8); }
.traffic-route-card { position:relative; display:flex; min-height:325px; flex-direction:column; padding:var(--space-8); overflow:hidden; border:1px solid #cde0d4; border-radius:28px; background:linear-gradient(155deg,#fff 0%,var(--traffic-green-soft) 100%); box-shadow:0 16px 42px rgba(47,70,84,.08); }
.traffic-route-card.is-body { border-color:#cfe0e8; background:linear-gradient(155deg,#fff 0%,var(--traffic-blue-soft) 100%); }
.traffic-route-card.is-process { border-color:#dfcfdd; background:linear-gradient(155deg,#fff 0%,var(--traffic-plum-soft) 100%); }
.route-number { position:absolute; top:var(--space-5); right:var(--space-6); color:rgba(22,70,47,.17); font-size:2.8rem; font-weight:900; line-height:1; }
.route-icon { display:grid; width:68px; height:58px; place-items:center; border-radius:18px; background:var(--traffic-green); color:#fff; font-size:var(--text-xs); font-weight:900; }
.is-body .route-icon { background:var(--traffic-blue); } .is-process .route-icon { width:76px; background:var(--traffic-plum); }
.traffic-route-card h3 { margin:var(--space-6) 0 var(--space-3); color:var(--color-primary-dark); font-size:clamp(1.3rem,2.2vw,1.65rem); }
.traffic-route-card p { margin:0; color:var(--color-text-light); line-height:1.7; }
.traffic-route-card>a { display:inline-flex; align-items:center; gap:var(--space-2); margin-top:auto; padding-top:var(--space-6); color:var(--traffic-green-dark); font-weight:900; text-decoration:none; }
.traffic-time-section,.traffic-visit-section { background:#f5f8f5; }
.traffic-time-flow { display:grid; grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr; align-items:stretch; gap:var(--space-3); margin-top:var(--space-8); }
.traffic-time-flow article { min-height:200px; padding:var(--space-6); border:1px solid var(--color-border); border-radius:24px; background:#fff; text-align:center; box-shadow:var(--shadow-sm); }
.traffic-time-flow article>span { display:grid; width:40px; height:40px; margin:0 auto var(--space-4); place-items:center; border-radius:50%; background:var(--color-primary-dark); color:#fff; font-weight:900; }
.traffic-time-flow small,.traffic-time-flow strong { display:block; }
.traffic-time-flow small { color:var(--color-text-muted); }
.traffic-time-flow strong { margin-top:var(--space-2); color:var(--color-primary-dark); font-size:var(--text-lg); }
.traffic-time-flow p { margin:var(--space-3) 0 0; color:var(--color-text-light); font-size:var(--text-sm); line-height:1.5; }
.traffic-time-flow>b { display:grid; place-items:center; color:var(--color-accent-dark); font-size:1.55rem; }
.traffic-record-heading { margin:var(--space-10) 0 0; color:var(--color-primary-dark); font-size:clamp(1.35rem,2.3vw,1.75rem); text-align:center; }
.traffic-record-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4); margin-top:var(--space-6); }
.traffic-record-grid article { display:flex; gap:var(--space-5); padding:var(--space-6); border-radius:24px; background:var(--color-primary-dark); color:#fff; }
.traffic-record-grid article>span { display:grid; width:50px; height:50px; flex:0 0 50px; place-items:center; border-radius:16px; background:rgba(255,255,255,.12); font-size:1.35rem; }
.traffic-record-grid small { color:#d9bb91; font-weight:800; }
.traffic-record-grid h3 { margin:var(--space-1) 0 var(--space-2); color:#fff; font-size:var(--text-lg); }
.traffic-record-grid p { margin:0; color:rgba(255,255,255,.72); font-size:var(--text-sm); line-height:1.6; }
.traffic-record-grid p strong { color:#fff; font-weight:800; }
.traffic-care-section { background:linear-gradient(180deg,#fff 0%,#f3f8f4 100%); }
.traffic-care-flow { display:grid; grid-template-columns:1fr 46px 1fr 46px 1fr; align-items:stretch; gap:var(--space-3); margin-top:var(--space-8); }
.traffic-care-flow>b { display:grid; place-items:center; color:var(--color-accent-dark); font-size:1.8rem; }
.traffic-care-card { position:relative; padding:var(--space-8); border:1px solid #cfe0d6; border-radius:28px; background:#fff; box-shadow:0 16px 42px rgba(47,70,84,.08); }
.traffic-care-number { display:grid; width:46px; height:46px; margin-bottom:var(--space-5); place-items:center; border-radius:50%; background:var(--color-primary-dark); color:#fff; font-size:var(--text-lg); font-weight:900; }
.traffic-care-card small { color:var(--color-accent-dark); font-weight:900; }
.traffic-care-card h3 { margin:var(--space-2) 0 var(--space-3); color:var(--color-primary-dark); font-size:clamp(1.25rem,2vw,1.55rem); line-height:1.4; }
.traffic-care-card p { margin:0; color:var(--color-text-light); line-height:1.72; }
.traffic-care-method { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-5); }
.traffic-care-method span { padding:.38rem .68rem; border-radius:999px; background:var(--traffic-green-soft); color:var(--traffic-green-dark); font-size:var(--text-xs); font-weight:900; }
.traffic-care-note { display:grid; gap:.35rem; max-width:940px; margin:var(--space-8) auto 0; padding:var(--space-6); border:1px solid rgba(173,108,40,.25); border-radius:22px; background:var(--traffic-amber-soft); text-align:center; }
.traffic-care-note strong { color:var(--color-primary-dark); }
.traffic-care-note span { color:var(--color-text-light); line-height:1.65; }
.traffic-clinic-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5); margin-top:var(--space-8); }
.traffic-clinic-grid article { position:relative; padding:var(--space-8); overflow:hidden; border:1px solid var(--color-border); border-radius:24px; background:#fff; box-shadow:var(--shadow-sm); }
.traffic-clinic-grid article>span { display:block; margin-bottom:var(--space-5); color:rgba(22,70,47,.2); font-size:2.7rem; font-weight:900; line-height:1; }
.traffic-clinic-grid h3 { margin:0 0 var(--space-3); color:var(--color-primary-dark); font-size:var(--text-xl); }
.traffic-clinic-grid p { margin:0; color:var(--color-text-light); line-height:1.72; }
.traffic-question-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); margin-top:var(--space-8); }
.traffic-question-grid details { border:1px solid var(--color-border); border-radius:18px; background:#fff; box-shadow:var(--shadow-sm); }
.traffic-question-grid summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-5); color:var(--color-primary-dark); font-weight:900; cursor:pointer; list-style:none; }
.traffic-question-grid summary::-webkit-details-marker { display:none; }
.traffic-question-grid summary span { color:var(--color-accent-dark); font-size:1.45rem; transition:transform var(--transition-fast); }
.traffic-question-grid details[open] summary span { transform:rotate(45deg); }
.traffic-question-grid details p { margin:0; padding:0 var(--space-5) var(--space-5); color:var(--color-text-light); line-height:1.7; }
.traffic-visit-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:42px; margin-top:var(--space-8); }
.traffic-visit-step { position:relative; min-height:175px; padding:var(--space-6); border:1px solid var(--color-border); border-radius:22px; background:#fff; text-align:center; }
.traffic-visit-step:not(:last-child)::after { content:'→'; position:absolute; top:50%; right:-34px; color:var(--color-accent-dark); font-size:1.65rem; font-weight:900; transform:translateY(-50%); }
.traffic-visit-step>span { display:grid; width:38px; height:38px; margin:0 auto var(--space-4); place-items:center; border-radius:50%; background:var(--color-primary-dark); color:#fff; font-weight:900; }
.traffic-visit-step h3 { margin:0; color:var(--color-primary-dark); font-size:var(--text-lg); }
.traffic-visit-step p { margin:var(--space-2) 0 0; color:var(--color-text-light); font-size:var(--text-sm); line-height:1.55; }
.traffic-insurance-note { display:flex; align-items:center; gap:var(--space-5); max-width:920px; margin:var(--space-8) auto 0; padding:var(--space-6); border:1px solid rgba(173,108,40,.25); border-radius:22px; background:var(--traffic-amber-soft); }
.traffic-insurance-note>span { display:grid; width:50px; height:50px; flex:0 0 50px; place-items:center; border-radius:50%; background:var(--traffic-amber); color:#fff; font-family:serif; font-size:1.35rem; font-weight:900; }
.traffic-insurance-note strong { display:block; color:var(--color-primary-dark); font-size:var(--text-lg); }
.traffic-insurance-note p { margin:var(--space-2) 0 0; color:var(--color-text-light); line-height:1.65; }
.traffic-actions { justify-content:center; }
.traffic-directory-section { background:#fffdf8; }
.traffic-directory-grid { margin-top:var(--space-8); }
@media (max-width:1100px) { .traffic-record-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:960px) { .traffic-route-grid,.traffic-symptom-grid,.traffic-clinic-grid { grid-template-columns:1fr; } .traffic-route-card { min-height:0; } .traffic-route-card>a { margin-top:var(--space-6); } .traffic-care-flow { grid-template-columns:1fr; } .traffic-care-flow>b { transform:rotate(90deg); } .traffic-visit-flow { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--space-5); } .traffic-visit-step::after { display:none; } }
@media (max-width:720px) { .traffic-title { display:grid; gap:.12em; } .traffic-title span:not(:last-child)::after { content:''; margin:0; } .quick-traffic-nav { display:grid; } .quick-traffic-nav a { justify-content:space-between; } .traffic-time-flow,.traffic-record-grid { grid-template-columns:1fr; } .traffic-time-flow>b { transform:rotate(90deg); } .traffic-question-grid,.traffic-visit-flow { grid-template-columns:1fr; } .traffic-insurance-note { align-items:flex-start; } .traffic-symptom-card,.traffic-care-card,.traffic-clinic-grid article { padding:var(--space-6); } }
@media (prefers-reduced-motion:reduce) { .traffic-question-grid summary span { transition:none; } }