.atlas-page { background: #ded4bc; }
.atlas-page .site-header { position: absolute; }
.atlas-page .desktop-nav a[aria-current="page"]::after { width: 100%; }

.atlas-intro { min-height: 560px; padding: 175px 8vw 80px; position: relative; display: grid; grid-template-columns: 1fr 310px; align-items: end; overflow: hidden; }
.atlas-intro::before { content: "地圖"; position: absolute; right: 4vw; top: 80px; font: 400 290px/1 "Noto Serif SC", serif; color: rgba(29,33,28,.035); }
.atlas-intro__title { position: relative; }
.atlas-intro h1 { font-size: clamp(68px, 8.2vw, 124px); }
.atlas-intro__note { position: relative; display: flex; align-items: flex-end; gap: 35px; padding-bottom: 10px; }
.atlas-intro__note p { margin: 0; max-width: 225px; font: italic 18px/1.45 "Cormorant Garamond", serif; }
.atlas-intro__note span { writing-mode: vertical-rl; font: 400 18px/1 "Noto Serif SC", serif; letter-spacing: .25em; color: var(--red); }
.atlas-coordinates { position: absolute; left: 2.5vw; bottom: 80px; font-size: 7px; line-height: 1.6; letter-spacing: .17em; opacity: .4; transform: rotate(-90deg); }

.map-workspace { min-height: 780px; display: grid; grid-template-columns: minmax(270px, 25%) 1fr; background: #242923; color: var(--paper-light); border-top: 1px solid rgba(29,33,28,.2); }
.map-sidebar { padding: 70px 3vw 45px 5vw; border-right: 1px solid rgba(241,233,216,.14); display: flex; flex-direction: column; }
.map-sidebar h2 { font-size: clamp(48px, 4.5vw, 72px); }
.era-switcher { margin-top: 54px; border-top: 1px solid rgba(241,233,216,.16); }
.period-tab { width: 100%; border: 0; border-bottom: 1px solid rgba(241,233,216,.16); padding: 20px 8px; background: transparent; color: #d8d4c7; text-align: left; display: grid; grid-template-columns: 32px 1fr; gap: 8px; cursor: pointer; transition: background .25s, padding .25s; }
.period-tab:hover, .period-tab.active { background: rgba(241,233,216,.05); padding-left: 14px; }
.period-tab > span:first-child { color: #b65a48; font-size: 8px; letter-spacing: .16em; padding-top: 4px; }
.period-tab b { display: block; font: 400 19px/1.1 "Cormorant Garamond", serif; }
.period-tab small { display: block; margin-top: 5px; color: #8e9289; font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.map-key { margin-top: auto; padding-top: 45px; }
.map-key p { display: flex; align-items: center; gap: 10px; margin: 9px 0; color: #979b92; font-size: 8px; text-transform: uppercase; letter-spacing: .15em; }
.map-key i { width: 15px; height: 15px; display: inline-block; position: relative; }
.key-capital { border: 1px solid #bd6654; border-radius: 50%; }
.key-capital::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #bd6654; }
.key-route::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; border-top: 1px dashed #c09866; }
.key-water::after { content: "≈"; color: #6e9292; font-style: normal; position: absolute; top: -5px; font-size: 18px; }

.map-stage { position: relative; min-width: 0; overflow: hidden; }
.map-toolbar { height: 70px; padding: 0 3vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(241,233,216,.14); }
.map-toolbar p { margin: 0; display: flex; align-items: center; gap: 10px; text-transform: uppercase; font-size: 8px; letter-spacing: .2em; color: #a9ada3; }
.map-pulse { width: 6px; height: 6px; border-radius: 50%; background: #b85a49; box-shadow: 0 0 0 5px rgba(184,90,73,.14); }
.map-controls { display: flex; gap: 5px; }
.map-controls button { width: 30px; height: 30px; border: 1px solid rgba(241,233,216,.22); background: transparent; color: #cbc8bd; cursor: pointer; transition: background .2s; }
.map-controls button:hover { background: rgba(241,233,216,.1); }
.map-canvas { height: 710px; overflow: hidden; cursor: grab; background: #d9d0ba; position: relative; }
.map-canvas:active { cursor: grabbing; }
.map-world { width: 100%; height: 100%; position: relative; transform-origin: center; transition: transform .35s ease; }
#historical-map { display: block; width: 100%; height: 100%; }
.map-markers { position: absolute; inset: 0; pointer-events: none; }
.ocean-wash { fill: #bdcac2; opacity: .72; }
.grid-lines path { fill: none; stroke: rgba(55,65,58,.12); stroke-width: 1; stroke-dasharray: 2 8; }
.land { fill: #c7b894; stroke: #605e50; stroke-width: 1.4; }
.terrain path { fill: none; stroke: rgba(76,77,61,.33); stroke-width: 1; }
.waters path { fill: none; stroke: #668787; stroke-width: 2; opacity: .78; }
.waters text { font: 500 7px "DM Sans", sans-serif; letter-spacing: .24em; fill: #597878; }
.waters .sea-label { font-size: 9px; fill: #66807d; opacity: .68; }
.routes path { fill: none; stroke: #a27042; stroke-width: 2; stroke-dasharray: 5 7; opacity: .85; transition: opacity .3s; }
.realm-label { fill: rgba(50,51,42,.28); font: 500 30px "Cormorant Garamond", serif; letter-spacing: .3em; transition: opacity .25s; }
.label-korea, .label-japan { font-size: 10px; letter-spacing: .18em; }
.label-north { font-size: 14px; }
.map-marker { position: absolute; left: var(--x); top: var(--y); border: 0; padding: 0; background: transparent; color: #282b25; cursor: pointer; transform: translate(-50%,-50%); text-align: center; pointer-events: auto; }
.map-marker span { width: 15px; height: 15px; display: block; margin: 0 auto 5px; border: 1px solid #9f342b; border-radius: 50%; background: rgba(233,223,202,.5); position: relative; transition: transform .25s, background .25s; }
.map-marker span::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #9f342b; }
.map-marker b { display: block; padding: 3px 5px; background: rgba(222,212,188,.78); font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; }
.map-marker:hover span, .map-marker.active span { transform: scale(1.35); background: #9f342b; box-shadow: 0 0 0 5px rgba(159,52,43,.15); }
.map-marker.active span::after { background: #f0e6d2; }
.place-card { position: absolute; z-index: 4; right: 3vw; bottom: 35px; width: min(320px, 38%); padding: 27px 28px 23px; background: rgba(31,36,31,.94); color: var(--paper-light); border-top: 2px solid #a74a3d; box-shadow: 0 15px 50px rgba(20,22,19,.24); transition: opacity .25s, transform .25s; }
.place-card.is-hidden { opacity: 0; transform: translateY(15px); pointer-events: none; }
.place-card__close { position: absolute; right: 16px; top: 13px; border: 0; background: none; color: #aaa99f; font-size: 20px; cursor: pointer; }
.place-card__number { margin: 0 0 18px; color: #b96252; font-size: 7px; letter-spacing: .2em; }
.place-card h3 { margin: 0; font: 400 38px/1 "Cormorant Garamond", serif; }
.place-card__native { margin: 7px 0 16px; color: #b8b8ae; font: italic 14px "Cormorant Garamond", serif; }
.place-card__copy { font-size: 11px; line-height: 1.65; color: #c6c5bd; }
.place-card > div { display: flex; gap: 18px; margin-top: 20px; padding-top: 15px; border-top: 1px solid rgba(241,233,216,.14); color: #858a81; font-size: 7px; letter-spacing: .18em; }

.atlas-story { padding: 130px 8vw 145px; display: grid; grid-template-columns: 22% 1fr; border-bottom: 1px solid var(--line); }
.atlas-story__copy { max-width: 950px; }
.atlas-story .text-link { margin-top: 55px; }

@media (max-width: 950px) {
    .atlas-intro { grid-template-columns: 1fr; gap: 55px; }
    .atlas-intro__note { justify-content: flex-end; }
    .map-workspace { grid-template-columns: 230px 1fr; }
    .map-sidebar { padding-left: 25px; }
    .map-canvas { height: 630px; }
}

@media (max-width: 700px) {
    .atlas-intro { min-height: 600px; padding: 145px 25px 65px; }
    .atlas-intro::before { font-size: 170px; top: 100px; }
    .atlas-intro h1 { font-size: clamp(59px, 18vw, 82px); }
    .atlas-intro__note { justify-content: flex-start; }
    .atlas-coordinates { display: none; }
    .map-workspace { display: block; }
    .map-sidebar { padding: 60px 25px 35px; border-right: 0; }
    .map-sidebar__head { display: flex; justify-content: space-between; align-items: end; }
    .map-sidebar h2 { font-size: 48px; }
    .era-switcher { margin-top: 40px; }
    .map-key { display: none; }
    .map-stage { border-top: 1px solid rgba(241,233,216,.14); }
    .map-toolbar { padding: 0 20px; }
    .map-canvas { height: 540px; overflow: auto; }
    .map-world { width: 780px; max-width: none; }
    .place-card { position: relative; inset: auto; width: 100%; border-top-width: 1px; box-shadow: none; }
    .atlas-story { padding: 90px 25px 100px; grid-template-columns: 1fr; gap: 35px; }
}

@media (prefers-reduced-motion: reduce) {
    .map-world { transition: none; }
}