* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: #000; }
body { overflow-x: hidden; color: #ddd; font-family: Arial, sans-serif; }

.top-nav { position: fixed; top: 0; left: 0; width: 100%; height: 48px; z-index: 999; display: grid; grid-template-columns: 170px 1fr 170px; align-items: center; padding: 0 28px; background: rgba(0, 0, 0, 0.9); border-bottom: 1px solid rgba(150, 0, 0, 0.95); backdrop-filter: blur(8px); }
.nav-title { color: #999; font-size: 20px; font-weight: 700; letter-spacing: -1px; }
.nav-links { display: flex; justify-content: center; gap: 34px; }
.nav-links a { color: #aaa; text-decoration: none; font-size: 13px; transition: 0.2s; white-space: nowrap; }
.nav-links a:hover { color: #ff2a1f; text-shadow: 0 0 10px rgba(255, 0, 0, 0.7); }
.start-btn { justify-self: end; padding: 8px 14px; color: #d9352b; border: 1px solid rgba(150, 0, 0, 0.75); border-radius: 6px; text-decoration: none; font-size: 12px; background: rgba(50, 0, 0, 0.45); white-space: nowrap; }

.page { width: 1240px; margin: 0 auto; background: #000; }
.template { width: 100%; display: block; }

.content-section, .world-section, .city-map-section { width: 1168px; margin: 0 auto; padding: 56px 0 0; }
.content-section h2, .world-section h2, .city-map-section h2 { color: #b02a20; font-size: 28px; margin: 0 0 26px; border-bottom: 1px solid rgba(150, 0, 0, 0.8); padding-bottom: 14px; }
.content-section h2 span, .world-section h2 span, .city-map-section h2 span { margin-left: 12px; color: #5d4a46; font-size: 12px; font-weight: 400; }

.city-map-section { width: min(980px, calc(100% - 28px)); padding-top: 64px; }
.city-map-box { position: relative; border: 1px solid rgba(150, 0, 0, 0.75); background: rgba(20, 0, 0, 0.28); padding: 10px; box-shadow: 0 0 28px rgba(160, 0, 0, 0.22); }
.city-map-box img { width: 100%; display: block; }
.map-hotspot { position: absolute; transform: translate(-50%, -50%); width: 8.5%; height: 8.5%; border: 1px solid transparent; border-radius: 999px; background: rgba(255, 0, 0, 0.01); cursor: pointer; transition: 0.2s ease; }
.map-hotspot:hover { border-color: rgba(255, 70, 55, 0.9); background: rgba(255, 0, 0, 0.15); box-shadow: 0 0 18px rgba(255, 40, 30, 0.8); }
.hs-north { left: 50%; top: 22%; }
.hs-school { left: 50%; top: 43%; }
.hs-armory { left: 76%; top: 39%; }
.hs-hospital { left: 29%; top: 49%; }
.hs-farm { left: 58%; top: 62%; }
.hs-subway { left: 73%; top: 66%; }
.hs-bunker { left: 23%; top: 76%; }
.hs-south { left: 50%; top: 88%; }

.area-grid, .route-grid, .character-grid { display: grid; width: 100%; }
.area-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.route-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.character-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }

.area-card { position: relative; transition: 0.25s ease; }
.area-card img { width: 100%; display: block; }
.area-card button { position: absolute; left: 20px; right: 20px; bottom: 16px; height: 31px; border: none; border-radius: 4px; background: #5a1711; color: #f1e5df; font-size: 15px; font-weight: 700; cursor: pointer; }
.area-card:hover { transform: translateY(-6px); filter: brightness(1.18) drop-shadow(0 0 14px rgba(180, 20, 20, 0.65)); cursor: pointer; }
.area-card:hover button { background: #7a2018; box-shadow: 0 0 14px rgba(180, 20, 20, 0.65); }

.route-card { border: 1px solid rgba(160, 20, 20, 0.75); background: rgba(10, 0, 0, 0.55); transition: 0.25s ease; overflow: hidden; cursor: pointer; }
.route-card:hover { transform: translateY(-6px); filter: brightness(1.12) drop-shadow(0 0 14px rgba(180, 20, 20, 0.65)); }
.route-card img { width: 100%; display: block; filter: grayscale(1) brightness(1.15); }
.route-card:hover img { filter: grayscale(0) brightness(1.25) drop-shadow(0 0 14px rgba(180, 20, 20, 0.65)); }

.character-grid img { width: 100%; display: block; transition: 0.25s ease; }
.character-grid img:hover { transform: translateY(-6px); filter: brightness(1.18) drop-shadow(0 0 14px rgba(180, 20, 20, 0.65)); cursor: pointer; }

.zombie-grid, .hound-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.info-card { border: 1px solid rgba(150, 0, 0, 0.78); background: rgba(15, 0, 0, 0.44); transition: 0.25s ease; }
.info-card:hover { transform: translateY(-6px); box-shadow: 0 0 18px rgba(160, 0, 0, 0.45); }
.info-card img { width: 100%; height: 300px; object-fit: cover; object-position: center top; display: block; cursor: pointer; }
.info-body { padding: 16px; }
.info-body h3 { margin: 0 0 12px; color: #e24a3e; font-size: 18px; }
.info-body p { margin: 0 0 10px; color: #cfcfcf; font-size: 13px; line-height: 1.65; }
.info-body strong { color: #ff6a5c; }

.data-box, .craft-list { border: 1px solid rgba(150, 0, 0, 0.75); background: rgba(20, 0, 0, 0.28); padding: 22px 26px; margin-bottom: 18px; }
.data-box h3, .craft-list h3 { margin: 0 0 12px; color: #d63b2e; font-size: 18px; }
.data-box p, .craft-list p { margin: 0 0 8px; color: #cfcfcf; font-size: 14px; line-height: 1.7; }
.data-box strong { color: #ff6a5c; }
.craft-accordion { display: grid; gap: 14px; }
.rule-accordion { margin-bottom: 28px; }
.craft-accordion details { border: 1px solid rgba(150, 0, 0, 0.75); background: rgba(20, 0, 0, 0.28); overflow: hidden; }
.craft-accordion summary { padding: 18px 24px; color: #d63b2e; font-size: 18px; font-weight: 700; cursor: pointer; list-style: none; border-bottom: 1px solid transparent; }
.craft-accordion summary::-webkit-details-marker { display: none; }
.craft-accordion summary::after { content: "▼"; float: right; color: #8f2a22; font-size: 13px; margin-top: 3px; }
.craft-accordion details[open] summary { border-bottom: 1px solid rgba(150, 0, 0, 0.45); background: rgba(70, 0, 0, 0.2); }
.craft-accordion details[open] summary::after { content: "▲"; }
.craft-accordion .craft-list { border: none; background: transparent; margin: 0; padding: 18px 24px 20px; }
.craft-accordion .craft-list p { padding: 6px 0; margin: 0; border-bottom: 1px solid rgba(150, 0, 0, 0.18); }
.craft-accordion .craft-list p:last-child { border-bottom: none; }

.world-section { padding-bottom: 140px; }
.world-box { border: 1px solid rgba(150, 0, 0, 0.75); background: rgba(20, 0, 0, 0.28); padding: 22px 26px; margin-bottom: 18px; }
.world-box h3 { margin: 0 0 12px; color: #d63b2e; font-size: 18px; }
.world-box p { margin: 0; color: #cfcfcf; font-size: 15px; line-height: 1.75; }
.world-box p + p { margin-top: 12px; }
.broadcast-text { color: #ffb0a8 !important; padding: 16px 18px; border-left: 3px solid rgba(220, 40, 30, 0.9); background: rgba(80, 0, 0, 0.28); font-weight: 700; }

.modal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; }
.modal.active { display: flex; }
.modal-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.86); backdrop-filter: blur(6px); }
#modalImg { position: relative; z-index: 2; width: min(900px, 90vw); max-height: 88vh; object-fit: contain; filter: drop-shadow(0 0 30px rgba(255, 0, 0, 0.25)); }

.member-modal { position: fixed; inset: 0; z-index: 2500; display: none; align-items: center; justify-content: center; }
.member-modal.active { display: flex; }
.member-modal-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(6px); }
.member-modal-panel { position: relative; z-index: 2; width: min(1180px, 92vw); max-height: 88vh; overflow-y: auto; padding: 28px; border: 1px solid rgba(180, 20, 20, 0.85); background: rgba(5, 5, 5, 0.96); box-shadow: 0 0 40px rgba(160, 0, 0, 0.35); }
.member-modal-panel h2 { margin: 0 0 24px; color: #d63b2e; font-size: 24px; border-bottom: 1px solid rgba(150, 0, 0, 0.75); padding-bottom: 14px; }
.member-close { position: absolute; top: 18px; right: 22px; width: 34px; height: 34px; border: 1px solid rgba(180, 20, 20, 0.8); background: rgba(60, 0, 0, 0.7); color: #eee; font-size: 24px; line-height: 30px; cursor: pointer; }
.map-detail-hero { width: min(430px, 100%); margin: 0 0 22px; }
.map-detail-hero img { width: 100%; display: block; border: 1px solid rgba(160, 20, 20, 0.85); border-radius: 10px; box-shadow: 0 0 20px rgba(160, 0, 0, 0.25); }
.member-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.member-grid img { width: 100%; display: block; transition: 0.25s ease; cursor: pointer; }
.member-grid img:hover { transform: translateY(-6px); filter: brightness(1.18) drop-shadow(0 0 14px rgba(0, 255, 230, 0.35)); }
.area-resource { margin-top: 28px; padding: 22px; border: 1px solid rgba(150, 0, 0, 0.75); background: rgba(20, 0, 0, 0.35); }
.area-resource h3 { margin: 0 0 16px; color: #e24a3e; font-size: 20px; }
.area-resource p { margin: 0 0 10px; color: #d4d4d4; font-size: 14px; line-height: 1.75; }
.area-resource strong { color: #ff6a5c; }
.loot-list { margin: 18px 0; padding: 16px 18px; border: 1px solid rgba(150, 0, 0, 0.45); background: rgba(5, 0, 0, 0.42); }
.loot-list p { margin: 0 0 9px; padding-bottom: 9px; border-bottom: 1px solid rgba(150, 0, 0, 0.18); }
.loot-list p:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.route-modal { position: fixed; inset: 0; z-index: 2600; display: none; align-items: center; justify-content: center; }
.route-modal.active { display: flex; }
.route-modal-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(6px); }
.route-modal-panel { position: relative; z-index: 2; width: min(860px, 92vw); max-height: 86vh; overflow-y: auto; padding: 30px; border: 1px solid rgba(180, 20, 20, 0.85); background: rgba(5, 5, 5, 0.96); box-shadow: 0 0 40px rgba(160, 0, 0, 0.35); }
.route-close { position: absolute; top: 18px; right: 22px; width: 34px; height: 34px; border: 1px solid rgba(180, 20, 20, 0.8); background: rgba(60, 0, 0, 0.7); color: #eee; font-size: 24px; line-height: 30px; cursor: pointer; }
.route-hero-img { width: min(430px, 100%); display: block; margin: 0 0 22px; border: 1px solid rgba(160, 20, 20, 0.85); border-radius: 10px; box-shadow: 0 0 20px rgba(160, 0, 0, 0.25); }
#routeDetail h2 { margin: 0 0 20px; color: #e24a3e; font-size: 26px; border-bottom: 1px solid rgba(150, 0, 0, 0.75); padding-bottom: 14px; }
#routeDetail p { margin: 0 0 12px; color: #d4d4d4; font-size: 15px; line-height: 1.75; }
#routeDetail strong { color: #ff6a5c; }

@media (max-width: 768px) {
  body { overflow-x: hidden; }
  .top-nav { height: auto; min-height: 58px; grid-template-columns: 1fr; gap: 8px; padding: 10px 14px; }
  .nav-title { font-size: 20px; text-align: center; }
  .nav-links { width: 100%; overflow-x: auto; justify-content: flex-start; gap: 18px; padding: 4px 0 6px; }
  .nav-links a { font-size: 13px; flex: 0 0 auto; }
  .start-btn { display: none; }
  .page { width: 100%; padding-top: 86px; }
  .template { width: 100%; height: auto; content: url("./images/template/full-template.png"); }
  .content-section, .world-section, .city-map-section { width: calc(100% - 28px); margin: 0 auto; padding: 40px 0 0; }
  .city-map-box { padding: 6px; }
  .map-hotspot { width: 11%; height: 11%; }
  .area-grid, .route-grid, .zombie-grid, .hound-grid { grid-template-columns: repeat(2, 1fr); }
  .character-grid { grid-template-columns: 1fr; gap: 14px; }
  .area-card button { left: 14px; right: 14px; bottom: 12px; height: 28px; font-size: 12px; }
  .content-section h2, .world-section h2, .city-map-section h2 { font-size: 24px; }
  .world-box, .data-box, .craft-list, .craft-accordion summary { padding: 18px 16px; }
  .world-box h3, .data-box h3, .craft-list h3 { font-size: 16px; }
  .world-box p, .data-box p, .craft-list p { font-size: 14px; line-height: 1.7; }
  #modalImg { width: 96vw; max-height: 82vh; }
  .member-modal-panel { width: 94vw; padding: 22px 14px; }
  .member-grid { grid-template-columns: 1fr; gap: 14px; }
  .member-modal-panel h2 { font-size: 20px; }
  .route-modal-panel { width: 94vw; padding: 24px 18px; }
}

@media (max-width: 430px) {
  .area-grid, .route-grid, .zombie-grid, .hound-grid { grid-template-columns: 1fr; }
  .nav-links { gap: 16px; }
}



.city-map-box {
  position: relative;
}


.map-click{
  position:absolute;
  z-index:30;
  background:transparent;
  border:none;
  outline:none;
  cursor:pointer;
}



/* 지도 위 클릭 위치 */
.map-north{
  left:33.5%;
  top:2.5%;
  width:24%;
  height:7%;
}

.map-school{
  left:18%;
  top:11.5%;
  width:26%;
  height:7%;
}

.map-armory{
  left:69%;
  top:12%;
  width:26%;
  height:7%;
}

.map-hospital{
  left:3%;
  top:20%;
  width:25%;
  height:7%;
}

.map-subway{
  left:62%;
  top:63%;
  width:26%;
  height:7%;
}

.map-bunker{
  left:9%;
  top:76%;
  width:26%;
  height:7%;
}

.map-farm{
  left:57%;
  top:76%;
  width:27%;
  height:7%;
}

.map-south{
  left:34%;
  top:91%;
  width:23%;
  height:6%;
}

.map-detail-image {
  margin-bottom: 22px;
  border: 1px solid rgba(150, 0, 0, 0.75);
  background: rgba(0, 0, 0, 0.6);
}

.map-detail-image{
  display:flex;
  justify-content:center;
  margin-bottom:18px;
}

.map-detail-image img{
  width:100%;
  max-width:380px;
  border-radius:14px;
  display:block;
}

.route-modal-panel{
  width:auto;
  max-width:92vw;
  padding:18px;
}

.only-map-card{
  display:flex;
  justify-content:center;
  align-items:center;
}

.only-map-card img {
  width: min(1600px, 96vw);
  max-height: 94vh;
  object-fit: contain;
  image-rendering: auto;
}