/* =========================================================
   지도(map.html)
   ========================================================= */
.atlas { max-width: 1600px; margin: 0 auto; padding: 32px 24px; display: grid; grid-template-columns: 2fr 6fr 4fr; gap: 24px; align-items: start; }

.places { display: flex; flex-direction: column; align-items: stretch; }
.places .scroll { width: 100%; padding: 8px 0; display: flex; justify-content: center; color: #fff; transition: opacity .2s; }
.places .scroll:hover:not(:disabled) { opacity: .7; }
.places .scroll:disabled { opacity: .2; color: #666; cursor: not-allowed; }
.places .scroll svg { width: 24px; height: 24px; }
.place-list { display: flex; flex-direction: column; gap: 8px; }
.place-btn { position: relative; display: block; width: 100%; animation: slideL .3s both; }
.place-btn .card { background: #fff; padding: 8px 8px 20px; box-shadow: 0 10px 15px rgba(0,0,0,.4); transition: transform .2s; }
.place-btn:hover .card { transform: scale(1.05); }
.place-btn.on { outline: 2px solid #fff; }
.place-btn.on::after { content: ""; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: #fff; }
.place-btn .thumb { aspect-ratio: 4 / 3; border: 1px solid #444; overflow: hidden; background: #000; }
.place-btn .thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.place-btn .ttl { margin-top: 4px; text-align: center; font: 700 11px var(--serif-ko); letter-spacing: .1em; color: #333; }

.place { display: contents; }
.map-view { margin-top: 48px; animation: mapIn .3s both; }
@keyframes mapIn { from { opacity: 0; transform: scale(.95); } }
.map-frame { position: relative; display: inline-block; box-shadow: 0 25px 50px rgba(0,0,0,.5); }
.map-frame img { width: 100%; height: auto; max-height: 600px; object-fit: contain; }
.map-frame .c { position: absolute; width: 32px; height: 32px; border: 0 solid #fff; z-index: 2; }
.map-frame .tl { top: 0; left: 0; border-width: 4px 0 0 4px; } .map-frame .tr { top: 0; right: 0; border-width: 4px 4px 0 0; }
.map-frame .bl { bottom: 0; left: 0; border-width: 0 0 4px 4px; } .map-frame .br { bottom: 0; right: 0; border-width: 0 4px 4px 0; }
.compass { position: absolute; top: 16px; right: 16px; width: 64px; height: 64px; border: 2px solid var(--ink-3); border-radius: 50%; background: var(--paper-2); box-shadow: 0 10px 15px rgba(0,0,0,.4); font: 12px serif; color: var(--ink-2); z-index: 3; }
.compass b { position: absolute; font-weight: 400; }
.compass .n { top: 4px; left: 50%; transform: translateX(-50%); } .compass .s { bottom: 4px; left: 50%; transform: translateX(-50%); }
.compass .w { left: 6px; top: 50%; transform: translateY(-50%); } .compass .e { right: 6px; top: 50%; transform: translateY(-50%); }
.compass i { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #b91c1c; transform: translate(-50%, -50%); }

.place-doc { margin-top: 48px; background: var(--ink-3); box-shadow: 0 20px 25px rgba(0,0,0,.4); overflow: hidden; animation: slideR .3s both; }
.place-doc .head { padding: 16px; display: flex; justify-content: space-between; align-items: center; }
.place-doc .head .org { font-size: 14px; font-weight: 700; letter-spacing: .15em; color: #ccc; }
.place-doc .head .k { font-size: 9px; letter-spacing: .15em; color: #ccc; text-align: right; margin-bottom: 2px; }
.place-doc .head .d { font: 14px serif; color: #fff; text-align: right; }
.place-doc .body { padding: 16px; background: var(--paper-2); color: var(--ink-2); }
.place-doc .k { font-size: 9px; color: #666; letter-spacing: .1em; margin-bottom: 4px; }
.place-doc .two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px; }
.place-doc .mono { font: 12px monospace; }
.place-doc .grade { font: 700 36px/1 serif; color: var(--red); }
.place-doc .rule { border-bottom: 1px solid #999; margin-bottom: 16px; }
.place-doc .code { font: 700 18px var(--serif-ko); margin-bottom: 16px; }
.toll { background: #8B1C1C; color: #fff; padding: 20px; text-align: center; margin-bottom: 16px; }
.toll .k { color: #fff; letter-spacing: .15em; }
.toll b { font: 700 36px serif; }
.log { font: 11px/1.65 var(--serif-ko); margin-bottom: 16px; }
.log p { margin-bottom: 8px; }
.log p + p { border-top: 1px solid #999; padding-top: 8px; }
.log b { font-weight: 700; }
.faces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.faces button { aspect-ratio: 1; overflow: hidden; background: #b8b8b8; transition: transform .2s; }
.faces button:hover { transform: scale(1.05); outline: 2px solid #fff; }
.faces img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) contrast(1.1); }
.done { text-align: right; }
.done span { display: inline-block; border: 3px solid var(--gray-2); padding: 8px 20px; transform: rotate(12deg); opacity: .8; color: var(--gray-2); font: 700 20px var(--serif-ko); letter-spacing: .2em; }

.face-zoom { position: relative; max-width: 896px; max-height: 90vh; background: #fff; padding: 24px; box-shadow: 0 25px 50px rgba(0,0,0,.6); animation: zoomOut .25s both; }
@keyframes zoomOut { from { transform: scale(.8); } }
.face-zoom .c { position: absolute; width: 32px; height: 32px; border: 0 solid var(--ink-3); }
.face-zoom .tl { top: 0; left: 0; border-width: 4px 0 0 4px; } .face-zoom .tr { top: 0; right: 0; border-width: 4px 4px 0 0; }
.face-zoom .bl { bottom: 0; left: 0; border-width: 0 0 4px 4px; } .face-zoom .br { bottom: 0; right: 0; border-width: 0 4px 4px 0; }
.face-zoom img { max-width: 100%; max-height: 80vh; object-fit: contain; filter: grayscale(.3) contrast(1.1); }
.face-zoom div.cap { margin-top: 16px; text-align: center; font: 14px serif; letter-spacing: .15em; color: #666; }

@media (max-width: 1023px) {
  .atlas { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
  .places { flex-direction: row; align-items: center; justify-content: center; gap: 8px; }
  .places .scroll { width: 32px; padding: 0; }
  .places .scroll svg { transform: rotate(-90deg); }
  .place-list { flex-direction: row; }
  .place-btn { width: 96px; }
  .place-btn.on::after { display: none; }
  .map-view, .place-doc { margin-top: 0; }
}
@media (max-width: 640px) {
  .place-btn { width: 80px; }
  .place-btn .ttl { font-size: 9px; }
  .map-frame .c { width: 24px; height: 24px; }
  .compass { width: 48px; height: 48px; top: 8px; right: 8px; font-size: 10px; }
  .place-doc .grade, .toll b { font-size: 30px; }
}