/* Page: directions (#page-directions) */
#directions-place-name-top{
  text-align:center;
}
#directions-place-name-title{
  margin-top:8px;
  font-size:32px;
  font-weight:700;
  text-align:center;
}
#directions-place-address{
  margin-top:8px;
  font-style:italic;
  text-align:center;
}

#map-outer{
  /* Width */
  --map-outer-width: min(var(--pages-actual-width), 800px);
  /* Height: target aspect 4:3, 
   *         but try to be at least 400px 
   *         and never bigger than 60svh */
  --map-outer-height: min(
                        max(
                          calc(var(--map-outer-width) * 0.75),
                          400px),
                        60svh);
  width:var(--map-outer-width);
  height:var(--map-outer-height);
  position:relative;
}
#kakaomap-content{
  width:100%;height:100%;
}
#map-box-with-padding{
  position:absolute;
  inset:-32px;
  pointer-events:none;
}

#kakaomap-content .atm-label-overlay{
  margin-top:12px;
  padding:8px;
  padding-bottom:6px;
  border-radius:8px;
  background-color:hsl(from var(--template-malang-TWI) h s l / 90%);
  color:var(--color-text-light);
  text-align:center;
  font-size:16px;
  line-height:1.4;
}

#kakaomap-content .route-waypoint-container{
  display:flex;
  flex-direction:column;
  align-items:center;
}
#kakaomap-content .route-waypoint-text{
  padding:4px;
  border-radius:8px;
  background-color:hsl(from var(--template-malang-TWI) h s l / 90%);
  color:var(--color-text-light);
  text-align:center;
  font-size:16px;
}
#kakaomap-content .route-waypoint-arrow{
  color:var(--template-malang-TWI);
  margin-top:-0.40em;
  font-size:2.0em;
  height:0.8em;
  font-family:"Material Symbols Rounded";
}


#kakaomap-content .previous-marker-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  width:220px;
  height:200px;
  pointer-events:none;
}
#kakaomap-content .previous-marker-image{
  width:200px;
  height:100px;
  margin-bottom:-10px;
  object-fit:contain;
  object-position:center bottom;
}
#kakaomap-content .previous-marker-container.compact .previous-marker-image{
  width:100px;
  height:50px;
  margin-bottom:-5px;
}
#kakaomap-content .previous-marker-texts{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:8px;
  border-radius:8px;
  background-color:hsl(from var(--template-malang-TWI) h s l / 90%);
  color:var(--color-text-light);
  text-align:center;
  font-size:16px;
  gap:4px;
  margin-top:4px;
}
#kakaomap-content .previous-marker-container.compact .previous-marker-texts{
  display:none;
}
#kakaomap-content .previous-marker-description{
  font-weight:700;
}
#kakaomap-content .previous-marker-date{
  font-size:0.7em;
}
#kakaomap-content .previous-marker-arrow{
  color:var(--template-malang-TWI);
  margin-top:-0.40em;
  font-size:2.0em;
  height:0.8em;
  font-family:"Material Symbols Rounded";
}


#kakaomap-content .station-drawings{
  pointer-events:none;
  object-fit: contain;
}

.map-inside-button{
  position:absolute;
  z-index:10;
  /* bg-color and color is changed from .link-button code */
  transition-property: inset,  opacity, background-color, color;
  transition-duration: 0.5s, 0.5s,    0.2s,             0.2s;
  
  opacity:1.0;
}
.anim-disabled .map-inside-button{
  transition-duration:0s;
}
.map-inside-button.hidden{
  opacity:0.0;
  pointer-events:none;
}

#map-btn-jump{
  top:16px;
  left:16px;
  margin-right:16px;
  --lb-color-bg:var(--color-text-dark);
  --lb-color-text:var(--color-text-light);
  --lb-color-outline:#333;
}
#map-btn-jump.hidden{
  top:-64px;
}
#map-btn-erase{
  bottom:16px;
  left:16px;
  --lb-color-bg:var(--template-malang-PP);
  --lb-color-text:#533;
  
}
#map-btn-erase.hidden{
  bottom:-64px;
}

.directions-intercity-divider{
  margin-top:40px;
  margin-bottom:8px;
  font-size:1.5em;
  font-weight:700;
  text-align:center;
  line-height:1.4;
}

#directions-list .card-list-entry{
  --cle-color-bg: light-dark(
    hsl(from var(--color-base) h s 90%),
    hsl(from var(--color-base) h s 15%));
  --cle-color-title: light-dark(
    hsl(from var(--color-base) h s max(calc(l - 10),0)),
    hsl(from var(--color-base) h s min(calc(l + 20),100)));
}

/* All colors below match the icons */
#directions-yangpyong{
  --color-base:#964db7;
}
#directions-munrae{
  --color-base:#4fb74d;
}
#directions-bus{
  --color-base:#0077e2;
}
#directions-icn{
  --color-base:#14bfd6;
}
#directions-gmp{
  --color-base:#14d6ac;
}
#directions-railway{
  --color-base:#005bac;
}
#directions-gsbus{
  --color-base:#e13e61;
}

/* Responsive Section */
/* Targeting down to 300px. */

/* Mobile mode */
@media (width<640px) {
}

/* Smaller Mobiles */
@media (width<480px) {
}

/* Ridiculously Small Mobiles */
@media (width<360px) {
}

/* Mobile ladder */
/* PC <-640-> Big Mobile <-480-> Small Mobile <-360-> Ridiculous <-300-> I give up */
@media (width>=480px) and (width<640px) {
  /* 640 ~ 480 : Big Mobiles */
}
@media (width>=360px) and (width<480px) {
  /* 480 ~ 360 : Small Mobiles */
}
@media (width<360px) {
  /* 360 ~ 300 : Ridiculously Small Mobiles */
}