.attractions-page .page-header { border:0; padding-bottom:46px; }
.attractions-page h1 { font-size:clamp(31px,4.6vw,66px); }
.east-section { padding:0 var(--gutter) 90px; max-width:1600px; margin:auto; }
.east-heading { border-top:1px solid #b8c0b0; padding-top:35px; margin-bottom:34px; display:flex; justify-content:space-between; gap:30px; align-items:end; }
.east-heading h2 { font-size:clamp(25px,3vw,40px); line-height:1.5; letter-spacing:-.045em; }
.east-heading .section-label { font-size:9px; margin-bottom:12px; }
.east-heading > p { font-size:12px; color:var(--text-dim); line-height:1.9; }
.east-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:25px; align-items:start; }
.map-column { min-width:0; }
.map-viewport { overflow-x:auto; border:1px solid #c0cec1; scrollbar-color:#a4b7a6 #dbe7e2; scrollbar-width:thin; overscroll-behavior-x:contain; }
.map-canvas { position:relative; min-width:700px; width:100%; aspect-ratio:920/690; isolation:isolate; background:#dae7e2; }
.east-jeju-map { display:block; width:100%; height:100%; }
.map-region-label { font:26px var(--font-serif); letter-spacing:.12em; fill:#748367; }
.map-region-en { font:9px var(--font-sans); letter-spacing:.24em; fill:#8a987b; }
.sea-label { fill:#8ea8a0; font:10px var(--font-sans); letter-spacing:.27em; }
.map-compass { color:#5c7c70; font:11px var(--font-sans); }
.map-home { position:absolute; left:63.043%; top:25.362%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; color:#f6f4e9; z-index:4; padding:11px 17px; background:#404759; border-radius:3px; box-shadow:0 5px 20px #40475926; }
.map-home::after { content:''; position:absolute; top:100%; border:7px solid transparent; border-top-color:#404759; }
.map-home strong { font:19px var(--font-serif); letter-spacing:.06em; }
.map-home small { font-size:8px; margin-top:3px; letter-spacing:.1em; }
.home-beacon { position:absolute; inset:-6px; border:1px solid #40475966; border-radius:5px; animation:home-beacon 3s ease-out infinite; pointer-events:none; }
.map-pin { position:absolute; left:var(--pin-x); top:var(--pin-y); transform:translate(-50%,-50%); background:transparent; border:0; padding:8px; cursor:pointer; z-index:2; color:#46503d; }
.pin-dot { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; border:1px solid #85977b; background:#fbfaf1; color:#43533b; font:9px var(--font-sans); transition:transform .35s,box-shadow .35s,background .35s; }
.pin-label { display:block; position:absolute; left:50%; top:calc(100% - 5px); transform:translateX(-50%); white-space:nowrap; font-size:11px; font-weight:500; padding:5px 9px; text-align:center; line-height:1.4; pointer-events:none; background:#f7f6e9e6; border-radius:3px; }
.pin-label small { display:block; font-size:8px; margin-top:3px; color:#737d67; }
.map-pin[aria-pressed=true], .map-pin:hover, .map-pin:focus-visible { z-index:5; }
.map-pin[aria-pressed=true] .pin-dot { color:white; background:#9c714a; border-color:#9c714a; transform:scale(1.16); box-shadow:0 0 0 6px #b58b5b24; }
.map-pin[aria-pressed=true] .pin-label { background:#fcf9ed; box-shadow:0 5px 16px #3347321a; }
.map-pin:hover .pin-dot,.map-pin:focus-visible .pin-dot { transform:scale(1.2) translateY(-3px); }
#map-connection { animation:route-flow 2s linear infinite; pointer-events:none; }
#map-destination { pointer-events:none; opacity:.55; }
.map-legend { display:flex; gap:18px; justify-content:space-between; flex-wrap:wrap; padding:15px 0 0; font-size:10px; color:#7b8570; }
.map-legend i { display:inline-block; width:7px; height:7px; background:var(--sea); margin-right:6px; border-radius:50%; }
.map-pan-hint { display:none; }
.place-detail { min-width:0; background:#eae8de; border:1px solid #c6ccbc; }
.place-detail-art { position:relative; height:158px; overflow:hidden; background:#d9dfce; }
.place-detail-art > span { position:absolute; top:14px; left:24px; color:#98a78d; font:70px/1 Georgia,serif; }
.place-detail-art svg { position:absolute; right:0; bottom:0; width:220px; fill:none; stroke:#849a79; stroke-width:1; }
.place-detail-copy { padding:26px; }
.place-eyebrow { font-size:8px; letter-spacing:.16em; color:#7c8770; margin-bottom:14px; }
.place-detail h3 { font-size:29px; letter-spacing:-.04em; }
.place-time { display:inline-block; margin:20px 0 22px; padding:7px 10px; background:#fcfaf0; color:#7b5c38; font-size:12px; line-height:1.7; }
.place-description { font-size:13px; line-height:1.95; color:#6d7665; min-height:104px; }
.place-naver { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #919d85; padding:22px 0 12px; font-size:12px; }
.place-naver span { font-size:22px; }
.journey-note { font-size:11px; color:var(--text-dim); line-height:1.9; max-width:1000px; margin:26px 0 35px; }
.place-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #b8c0b0; gap:0 26px; }
.place-list-item { min-width:0; border-bottom:1px solid #c7cdbe; padding:18px 0 13px; }
.place-list-item > button { cursor:pointer; display:grid; width:100%; grid-template-columns:22px minmax(0,1fr) 20px; text-align:left; gap:6px 8px; padding:0; border:0; background:transparent; color:var(--ink); }
.place-list-item button > span:first-child { color:#849078; font-size:10px; padding-top:3px; }
.place-list-item button strong { font-size:14px; font-weight:500; }
.place-list-item button small { grid-column:2; font-size:11px; color:#7d806b; }
.place-list-item button > span:last-child { grid-column:3; grid-row:1/3; align-self:center; transition:transform .35s; }
.place-list-item button[aria-pressed=true] strong { color:#9b6d41; }
.place-list-item button:hover > span:last-child { transform:translate(3px,-3px); }
.place-direct { display:inline-block; margin:10px 0 0 30px; font-size:9px; color:#66785d; text-decoration:underline; text-underline-offset:4px; }
.naver-location { display:grid; grid-template-columns:1.15fr 1fr; gap:8%; padding:65px var(--gutter); background:#e6e9dc; align-items:center; }
.location-photo img { width:100%; height:auto; }
.naver-location-copy { min-width:0; }
.naver-location-copy h2 { font-size:clamp(28px,3.1vw,45px); line-height:1.6; letter-spacing:-.05em; }
.naver-location-copy address { font-size:14px; line-height:1.9; font-style:normal; margin:24px 0 16px; }
.naver-location-copy p { color:var(--text-dim); font-size:12px; line-height:1.9; }
.naver-location-link { display:flex; width:fit-content; gap:14px; align-items:center; border-bottom:1px solid #909c83; padding:18px 0; margin-top:16px; font-size:12px; }
.naver-letter { color:#16824f; font:bold 23px var(--font-sans); }
.map-motion-toggle { position:fixed; bottom:20px; right:20px; z-index:950; padding:9px 14px; border:1px solid #afb8a2; border-radius:30px; background:#f5f3eef2; color:#364034; font-size:10px; cursor:pointer; }
.motion-paused *, .motion-paused *::before,.motion-paused *::after { animation:none !important; transition:none !important; }
@keyframes home-beacon { from { opacity:.7; transform:scale(.98); } to { opacity:0; transform:scale(1.2); } }
@keyframes route-flow { to { stroke-dashoffset:-26; } }
@media(max-width:1100px) {
 .east-layout { grid-template-columns:minmax(0,1fr); }
 .place-detail { display:grid; grid-template-columns:210px minmax(0,1fr); }
 .place-detail-art { height:100%; min-height:210px; }
 .place-detail-copy { padding:24px 28px; }
 .place-description { min-height:0; }
 .place-time { margin:14px 0; }
 .place-naver { max-width:300px; padding-top:16px; }
 .map-pan-hint { display:block; }
}
@media(max-width:767px) {
 .east-section { padding-bottom:55px; }
 .east-heading { display:block; padding-top:24px; }
 .east-heading > p { margin-top:20px; }
 .map-canvas { min-width:700px; }
 .map-legend { font-size:9px; gap:8px; }
 .map-pan-hint { flex-basis:100%; }
 .place-detail { grid-template-columns:1fr; }
 .place-detail-art { display:none; }
 .place-detail-copy { padding:25px; }
 .place-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; }
 .place-list-item button { grid-template-columns:18px minmax(0,1fr); }
 .place-list-item button > span:last-child { display:none; }
 .place-list-item button strong { font-size:13px; }
 .place-list-item button small { font-size:10px; }
 .place-direct { margin-left:26px; }
 .naver-location { grid-template-columns:1fr; gap:30px; padding:45px var(--gutter); }
 .map-motion-toggle { bottom:calc(88px + env(safe-area-inset-bottom)); right:15px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }
