/* 홈 화면 반응형 배치 */
@media (min-width: 761px) {
  .home-shell .hero-copy {
    top: clamp(150px, 20vh, 220px) !important;
    width: min(46vw, 720px) !important;
    max-width: 720px !important;
  }

  .home-shell .hero-copy h1 {
    font-size: clamp(48px, 4.2vw, 72px) !important;
    white-space: nowrap;
  }
}

@media (min-width: 761px) and (max-height: 720px) {
  .home-shell .hero-copy { top: 110px !important; }
}

@media (max-width: 760px) {
  .home-shell .hero-copy {
    right: 18px;
    width: auto !important;
    max-width: none !important;
  }

  .home-shell .hero-copy h1 {
    font-size: clamp(27px, 8.5vw, 40px) !important;
    white-space: nowrap;
  }

  .home-shell .script-copy {
    font-size: clamp(17px, 5vw, 23px) !important;
  }

  /* 제목과 보기 전환 버튼이 겹치지 않도록 양쪽에 배치 */
  .home-shell .hero-copy {
    left: 23px !important;
    right: 18px !important;
    top: calc(15% + 14px) !important;
  }

  .home-shell .view-switch {
    left: auto !important;
    right: 14px !important;
    top: 82px !important;
  }
}


/* Home view switch label
   - Edit the button text in index.html.
   - The <br> keeps 3D GLOBE / MAP VIEW on matching two-line labels. */
.view-switch button{
  min-height:36px;
  text-align:center;
}
.view-switch button span{
  display:inline-block;
  line-height:1.05;
  white-space:normal;
}

/* Let globe pins remain clickable when they pass through empty header space. */
.home-shell .site-header {
  pointer-events: none;
}

.home-shell .site-header a,
.home-shell .site-header button {
  pointer-events: auto;
}
/* Globe pins can also act as drag handles without starting browser touch gestures. */
.map-pin {
  touch-action: none;
  transition-duration: .12s;
}
/* 태블릿 지구본 컨트롤 */
@media(min-width:761px) and (max-width:900px){
  .country-shortcuts{
    left:20px;
    right:85px;
    top:auto;
    bottom:20px;
    width:auto;
    max-width:none;
    display:flex;
    gap:8px;
    overflow:hidden;
  }
  .country-shortcuts p{display:none}
  .country-shortcuts button{
    width:auto;
    min-width:0;
    min-height:42px;
    padding:0 12px;
    flex:1 1 0;
    justify-content:center;
    border:1px solid rgba(255,255,255,.2);
    border-radius:22px;
    background:rgba(2,9,14,.68);
    text-align:center;
    white-space:nowrap;
  }
  .country-shortcuts button span,
  .country-shortcuts button::after{display:none}
}

/* Responsive MAP VIEW country controls belong at the bottom, not under the title. */
@media(max-width:900px){
  .flat-map-view{padding-bottom:82px}
  .flat-map-view .flat-map-copy{position:static}
  .flat-map-view .flat-map-selector{
    position:absolute;
    z-index:20;
    top:auto;
    right:auto;
    bottom:20px;
    left:50%;
    width:min(860px,calc(100% - 40px));
    max-width:860px;
    margin:0;
    display:flex;
    gap:8px;
    overflow:hidden;
    border:0;
    transform:translateX(-50%);
  }
  .flat-map-view .flat-map-selector button{
    width:auto;
    min-width:0;
    min-height:42px;
    padding:0 10px;
    flex:1 1 0;
    justify-content:center;
    border:1px solid rgba(36,61,67,.18);
    border-radius:22px;
    background:rgba(255,255,255,.82);
    text-align:center;
    white-space:nowrap;
  }
  .flat-map-view .flat-map-selector button::after{display:none}
  .flat-map-view .map-view-hint{bottom:76px}
}

@media(max-width:450px){
  .country-shortcuts,
  .flat-map-view .flat-map-selector{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:7px;
    overflow:visible;
  }

  .country-shortcuts button,
  .flat-map-view .flat-map-selector button{
    grid-column:span 2;
    width:100%;
    min-width:0;
    min-height:40px;
    padding-inline:6px;
    font-size:10px;
    justify-content:center;
    text-align:center;
  }

  .country-shortcuts button:nth-of-type(4),
  .flat-map-view .flat-map-selector button:nth-of-type(4){grid-column:2 / span 2}

  .country-shortcuts button:nth-of-type(5),
  .flat-map-view .flat-map-selector button:nth-of-type(5){grid-column:4 / span 2}

  .flat-map-view{padding-bottom:126px}
  .flat-map-view .map-view-hint{display:none}
}

@media(max-width:780px){
  .map-mode .site-header.global-header nav{
    background:rgba(2,13,22,.97);
  }
  .map-mode .site-header.global-header nav a,
  .map-mode .site-header.global-header nav .drawer-only{
    color:#dbe8ef;
    text-shadow:none;
  }
  .map-mode .site-header.global-header nav a.active,
  .map-mode .site-header.global-header nav a[aria-current='page']{
    color:#fff;
  }
}