.junction-page{padding-block:28px 60px}.junction-back{font-size:.85rem;color:#52657a}.junction-intro{max-width:680px;text-align:center;margin:30px auto}.junction-intro h1{font-size:clamp(2.2rem,6vw,3.7rem);letter-spacing:-1px;line-height:1.15;margin:12px 0 18px}.junction-intro>p{color:#52657a}.junction-caution{font-size:.8rem;background:#fff7da;padding:8px;border-radius:8px}.junction-preview{max-width:680px;margin:auto;display:flex;justify-content:center;gap:25px;background:#eef4f8;padding:25px;border-radius:16px}.junction-preview span{display:flex;align-items:center;gap:8px;font-size:.9rem}.junction-preview b{font-size:1.3rem;color:#997517}.junction-method{max-width:760px;margin:28px auto}.junction-method summary{padding:12px 0;cursor:pointer;font-weight:700}.junction-method p{font-size:.9rem;line-height:1.7}.junction-related{text-align:center}#junction-dialog{inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#edf3f8;color:#16354d;overflow:auto}#junction-dialog::backdrop{background:#102536}#junction-dialog[open]{display:flex;flex-direction:column}.junction-modal-open{overflow:hidden}.junction-top{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:6px max(12px,env(safe-area-inset-right));background:#f7fafc;border-bottom:1px solid #cedce6}.junction-top strong{margin-left:auto}.junction-top button{min-height:44px;font:inherit;font-size:.85rem;background:white;color:#153c64;border:1px solid #b8cbd8;border-radius:9px;padding:6px 12px}.junction-app{width:100%;max-width:660px;margin:0 auto;padding:10px 14px max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:stretch;gap:8px}.junction-heading{text-align:center}.junction-heading>p:first-child{color:#8d6b16;font-weight:700;font-size:.75rem;margin:0}.junction-heading h2{font-size:1.2rem;margin:4px 0}.junction-heading>p:last-child{font-size:.82rem;line-height:1.4;margin:4px 0;min-height:2.8em}.junction-map{width:min(100%,400px);position:relative;aspect-ratio:1;margin:auto;background:#27493f;border-radius:18px;overflow:hidden;box-shadow:0 8px 24px #153c6426}#junction-road{display:block;width:100%;height:100%}.junction-touch{position:absolute;transform:translate(-50%,-50%);width:64px;height:64px;border:2px solid #ffffff90;border-radius:50%;background:transparent;cursor:pointer;touch-action:manipulation}.junction-touch:hover,.junction-touch:focus-visible{border-color:#fff;background:#ffffff18;outline:3px solid #e6c25f;outline-offset:2px}.junction-touch:disabled{border-color:transparent;cursor:default}.junction-legend{text-align:center;margin:0;font-size:.69rem;color:#52657a}.junction-question{text-align:center;margin:2px 0 7px;font-size:.95rem;font-weight:700}.junction-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}.junction-choices button{font:inherit;text-align:center;min-height:60px;padding:7px;border:1px solid #b4cad9;border-bottom:4px solid #358ac0;border-radius:12px;background:white;color:#153c64;touch-action:manipulation}.junction-choices button:last-child{border-bottom-color:#c4a045}.junction-choices button strong{display:block;font-size:.96rem}.junction-choices button span{display:block;font-size:.76rem;margin-top:3px}.junction-feedback{background:white;border-right:4px solid #d6ad31;border-radius:10px;padding:10px 12px;font-size:.9rem;line-height:1.4}.junction-feedback p{margin:5px 0 0;font-size:.81rem}.junction-navigation{display:flex;gap:8px}.junction-app .button{min-height:44px;font-size:.9rem;padding:9px 12px;text-align:center;flex:1}.junction-note{font-size:.65rem;line-height:1.4;color:#52657a;text-align:center;margin:2px 0}.junction-summary{background:white;padding:22px;border-radius:15px}.junction-summary h2{font-size:1.2rem;margin:0 0 12px}.junction-summary p{font-size:.95rem;line-height:1.6}.junction-summary .button{width:100%}.junction-app button:focus-visible,.junction-top button:focus-visible{outline:3px solid #a57313;outline-offset:3px}#junction-dialog [hidden]{display:none!important}
@media(max-width:600px){.junction-app{padding:8px;gap:6px}.junction-map{width:min(100%,calc(100dvh - 340px));min-width:230px}.junction-heading h2{font-size:1.1rem}.junction-heading>p:last-child{font-size:.78rem}.junction-top strong{font-size:.9rem}.junction-preview{padding:18px 10px;gap:12px}.junction-preview span{font-size:.74rem;flex-direction:column}.junction-touch{width:60px;height:60px}.junction-app[data-phase=explain] .junction-map,.junction-app[data-phase=done] .junction-map{width:min(100%,calc(100dvh - 375px))}}
@media(max-height:650px){.junction-heading>p:last-child{min-height:0}.junction-map{width:240px}.junction-feedback{font-size:.82rem;padding:8px}.junction-feedback p{font-size:.75rem}.junction-heading h2{font-size:1rem}.junction-app{gap:5px}}
@media(min-width:700px) and (max-height:650px){.junction-app{display:grid;grid-template-columns:1fr 1fr;max-width:960px;align-items:center}.junction-heading{grid-column:1/-1}.junction-map{grid-column:1;grid-row:2/6;width:min(100%,300px)}.junction-legend{grid-column:1}.junction-app>div:not(.junction-map):not(.junction-heading),.junction-app>.button,.junction-note{grid-column:2}.junction-summary{grid-column:1/-1!important}.junction-heading>p:last-child{margin-bottom:4px}}