/*
  ================================================================
  TRIP PIN 홈 화면 — 초보자용 수정 파일
  아래 값만 바꾸면 홈의 주요 색상과 크기가 변경됩니다.
  3D 지구 설정은 home-globe.js에 따로 정리되어 있습니다.
  ================================================================
*/

:root {
  /* 홈 컬러 */
  --night: #02090e;
  --sky: #92cde9;
  --cream: #e7c28e;
  --white: #f7f5ef;

  /* 홈 글자 크기 */
  --home-logo-size: 17px;
  --home-menu-size: 10px;
  --home-title-size: clamp(64px, 5.1vw, 102px);
  --home-subtitle-size: 23px;
  --home-description-size: 12px;

  /* MAP VIEW 지도 최대 크기 */
  --home-map-max-width: 1500px;
}

/* 헤더 글자 */
.brand { font-size: var(--home-logo-size); }
.site-header nav a { font-size: var(--home-menu-size); }
.menu-button { display: none; }

@media (max-width: 760px) {
  .menu-button { display: block; }
}

/* 첫 화면 문구 */
.hero-copy h1 { font-size: var(--home-title-size); }
.script-copy { font-size: var(--home-subtitle-size); }
.hero-description { font-size: var(--home-description-size); }

/* 평면 지도 이미지 */
.flat-map-canvas {
  width: min(94vw, var(--home-map-max-width), calc((100vh - 258px) * 1.5));
}

.flat-map-canvas img {
  display: block;
  width: 100%;
  height: 100%;
}

/* MAP VIEW 사진 핀 — 레퍼런스의 원형 여행 핀 스타일 */
.flat-map-canvas {
  aspect-ratio: 3 / 2;
  border: 1px solid rgba(65, 86, 83, .08);
  box-shadow: 0 28px 80px rgba(62, 76, 72, .08);
}

.flat-map-canvas > img {
  object-fit: cover;
  filter: saturate(.86) contrast(.98);
  pointer-events: none;
}

.flat-pin {
  z-index: 5;
  gap: 11px;
  padding: 0;
  transform: translate(-27px, -27px);
  cursor: pointer;
  pointer-events: auto;
}

.flat-pin > i {
  position: relative;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  padding: 3px;
  overflow: visible;
  border: 1px solid rgba(20, 43, 47, .42);
  border-radius: 50%;
  background: #f8f4e9;
  box-shadow: 0 10px 25px rgba(30, 45, 43, .22);
}

.flat-pin > i img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
}

.flat-pin > span {
  position: relative;
  z-index: 7;
  cursor: pointer;
  pointer-events: auto;
}

.flat-pin > i::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto auto -4px 22px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(20, 43, 47, .35);
  border-left: 0;
  border-top: 0;
  border-radius: 0 0 2px 0;
  background: #f8f4e9;
  transform: rotate(45deg);
}

.flat-pin > span {
  padding: 8px 11px;
  border: 1px solid rgba(38, 63, 64, .12);
  border-radius: 3px;
  background: rgba(249, 247, 240, .88);
  box-shadow: 0 8px 22px rgba(55, 69, 66, .08);
  backdrop-filter: blur(8px);
}

.flat-pin:hover > i {
  background: #f8f4e9;
  border-color: #315f68;
  box-shadow: 0 0 0 8px rgba(76, 128, 135, .12), 0 14px 30px rgba(30, 45, 43, .24);
  transform: translateY(-4px) scale(1.06);
}

.flat-pin:hover > i::after { background: #f8f4e9; }

.journey-open{display:inline-block;margin-top:14px;color:var(--cream);font-size:7px;letter-spacing:.1em}

@media (max-width: 760px) {
  :root {
    --home-logo-size: 15px;
    --home-menu-size: 12px;
    --home-title-size: 45px;
    --home-subtitle-size: 19px;
    --home-description-size: 11px;
  }

  .flat-map-canvas { width: 170%; }
  .flat-pin > i { width: 43px; height: 43px; flex-basis: 43px; }
  .flat-pin > i::after { left: 17px; }
  .flat-pin > span { padding: 6px 8px; }
}

/* Full-screen MAP VIEW */
.flat-map-view {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 104px 32px 24px;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 42px);
  align-items: center;
  overflow: hidden;
}

.flat-map-copy {
  width: auto;
  margin: 0;
  padding: 0;
  display: block;
  align-self: center;
}

.flat-map-copy h2 {
  margin: 14px 0 18px;
  font-size: clamp(48px, 4.5vw, 76px);
  line-height: .88;
  white-space: normal;
}

.flat-map-copy h2 br { display: block; }

.flat-map-copy > span {
  display: block;
  max-width: 210px;
  padding: 0;
  text-align: left;
}

.flat-map-selector {
  margin-top: 34px;
  border-top: 1px solid rgba(36, 61, 67, .18);
}

.flat-map-selector button {
  width: 100%;
  min-height: 43px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 0;
  border-bottom: 1px solid rgba(36, 61, 67, .14);
  background: transparent;
  color: #667c84;
  text-align: left;
  cursor: pointer;
}

.flat-map-selector button b {
  color: #91a2a8;
  font-size: 8px;
  font-weight: 500;
}

.flat-map-selector button span {
  font-size: 13px;
  font-weight: 600;
}

.flat-map-selector button::after {
  content: "→";
  margin-left: auto;
  color: #168cca;
  opacity: 0;
  transform: translateX(-6px);
  transition: .25s;
}

.flat-map-selector button:hover,
.flat-map-selector button:focus-visible {
  color: #0b2734;
}

.flat-map-selector button:hover::after,
.flat-map-selector button:focus-visible::after {
  opacity: 1;
  transform: none;
}

.flat-map-canvas {
  width: min(100%, calc((100dvh - 145px) * 1.5));
  max-width: 1600px;
  aspect-ratio: 3 / 2;
  margin: 0 auto;
}

.flat-pin[data-map-country="japan"] {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + 27px), -27px);
}

@media (max-width: 900px) {
  .flat-map-view {
    padding: 104px 20px 82px;
    display: block;
  }

  .flat-map-copy {
    position: static;
    z-index: 8;
  }

  .flat-map-copy > p,
  .flat-map-copy > span {
    display: none;
  }

  .flat-map-copy h2 {
    position: relative;
    z-index: 8;
    margin: 0;
    font-size: clamp(38px, 11vw, 54px);
  }

  .flat-map-copy h2 br { display: none; }

  .flat-map-selector {
    position: absolute;
    z-index: 12;
    right: 20px;
    bottom: 20px;
    left: 20px;
    margin: 0;
    display: flex;
    gap: 7px;
    overflow: hidden;
    border: 0;
  }

  .flat-map-selector button {
    width: auto;
    min-width: 0;
    min-height: 38px;
    padding: 0 9px;
    flex: 1;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(36, 61, 67, .18);
    border-radius: 20px;
    background: rgba(255, 255, 255, .68);
  }

  .flat-map-selector button::after { display: none; }

  .flat-map-canvas {
    width: 120%;
    margin: 24px 0 0 -10%;
  }
}

@media(max-width:520px){
  .flat-map-selector button b{display:none}
  .flat-map-selector button{padding-inline:6px}
}


/* 히어로 버튼 영역 */
.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:25px}.hero-actions .journey-film{margin-top:0}.hero-journey{min-height:46px;padding:0 16px;display:inline-flex;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(255,255,255,.08);color:#f7f5ef;font-size:10px;font-weight:700;letter-spacing:.08em;backdrop-filter:blur(10px);transition:border-color .25s,background .25s,color .25s}.hero-journey>b{display:flex;align-items:center;gap:6px;padding-left:13px;border-left:1px solid rgba(255,255,255,.22);font-weight:700}.hero-journey>b>i{color:#72cbff;font-size:13px;font-style:normal}.hero-journey:hover{border-color:#72cbff;background:rgba(114,203,255,.12);color:#fff}.globe-fallback #globe-stage::before{content:'3D globe could not load. Map view is available.';position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);color:#5f7884;font-size:12px;letter-spacing:.04em}.globe-fallback .flat-map-view{opacity:1;visibility:visible;transform:none}.globe-fallback .view-switch{color:#17262d}.globe-fallback .hero-copy,.globe-fallback .journey-panel,.globe-fallback .country-shortcuts,.globe-fallback .country-hover-card,.globe-fallback .drag-control,.globe-fallback .zoom-control,.globe-fallback .scroll-mark,.globe-fallback .coordinates,.globe-fallback .flight-decoration,.globe-fallback #pin-layer,.globe-fallback #globe-stage,.globe-fallback #globe-interaction{opacity:0;pointer-events:none}
@media(max-width:760px){.hero-actions{gap:12px}.hero-journey{min-height:40px;padding:0 13px;font-size:9px;gap:10px}.hero-journey>b{padding-left:10px}}

/* Compact desktop: keep the full-screen composition inside small monitors. */
@media (min-width: 761px) and (max-width: 1366px) {
  .site-header {
    height: 78px;
    padding-inline: 32px;
  }

  .site-header .brand { font-size: 21px; }
  .site-header nav { gap: 28px; }
  .site-header nav a { font-size: 12px; }
  .menu-button { margin-left: 28px; }

  .hero-copy {
    left: 4vw;
    top: 14%;
    width: 27vw;
  }

  .hero-copy h1 { font-size: clamp(56px, 5.2vw, 78px); }
  .script-copy { margin: 10px 0 22px; font-size: 24px; }
  .hero-description { font-size: 12px; }
  .hero-actions { margin-top: 18px; gap: 10px; }
  .journey-film { font-size: 10px; }
  .journey-film i { width: 40px; height: 40px; }
  .hero-journey { min-height: 40px; padding-inline: 13px; font-size: 9px; }

  .journey-panel {
    left: 4vw;
    bottom: 4vh;
    width: 195px;
    padding: 20px;
  }

  .country-shortcuts { right: 2.5vw; width: 132px; }
  .country-shortcuts button { padding-block: 9px; font-size: 12px; }
  .country-hover-card { display: none; }
  .view-switch { top: 90px; right: 2.5vw; }

  .flat-map-view { padding: 100px 2.5vw 18px; }
  .flat-map-copy { width: min(28vw, 320px); }
  .flat-map-copy h2 { font-size: clamp(44px, 4.5vw, 66px); }
  .flat-map-canvas {
    width: min(95vw, 1280px, calc((100dvh - 215px) * 1.935));
  }
}

/* Browser chrome leaves surprisingly little height on 768px-tall displays. */
@media (min-width: 761px) and (max-height: 800px) {
  .journey-panel {
    left: clamp(390px, 30vw, 520px);
    bottom: 3vh;
    width: 190px;
    padding: 18px;
  }

  .journey-panel > i { margin-block: 12px; }
  .journey-panel p { margin-top: 6px; }
  .journey-open { margin-top: 10px; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .journey-panel { display: none; }
}

@media (min-width: 761px) and (max-height: 680px) {
  .site-header { height: 68px; }
  .hero-copy { top: 12%; }
  .hero-copy h1 { font-size: clamp(50px, 4.8vw, 68px); }
  .script-copy { margin: 7px 0 14px; font-size: 21px; }
  .hero-actions { margin-top: 12px; }
  .journey-panel {
    left: clamp(390px, 30vw, 520px);
    bottom: 2vh;
  }
  .country-shortcuts { top: 25%; }
  .view-switch { top: 76px; }
  .flat-map-view { padding-top: 82px; }
  .flat-map-selector { margin-top: 16px; }
  .flat-map-selector button { min-height: 35px; }
  .flat-map-canvas {
    width: min(94vw, 1180px, calc((100dvh - 175px) * 1.935));
  }
}

/* Do not crop as aggressively on phones and narrow browser windows. */
@media (max-width: 760px) {
  .flat-map-canvas {
    width: 135%;
    margin-left: -17.5%;
  }
}

/* Keep the globe-only destination shortcuts out of MAP VIEW. */
.map-mode .country-shortcuts {
  display: none !important;
}

/* Keep the transparent header readable over both the globe and bright map. */
.site-header {
  background: linear-gradient(180deg, rgba(2, 9, 14, .72) 0%, rgba(2, 9, 14, .24) 68%, transparent 100%);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .75);
}

.map-mode .site-header {
  background: linear-gradient(180deg, rgba(242, 240, 233, .98) 0%, rgba(242, 240, 233, .72) 68%, transparent 100%);
  color: #17262d;
  text-shadow: none;
}

/* MAP VIEW uses the map as a full-screen rear layer, so no empty side remains. */
.map-mode .flat-map-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: auto;
  border: 0;
  box-shadow: none;
}

.map-mode .flat-map-canvas > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-mode .flat-map-copy {
  position: relative;
  z-index: 2;
}

@media (max-width: 420px), (max-height: 600px) {
  .hero-copy { top: 13%; }
  .hero-copy h1 { font-size: clamp(42px, 12vw, 52px); }
  .script-copy { margin: 8px 0 16px; font-size: 20px; }
  .hero-description { font-size: 11px; }
  .hero-actions { margin-top: 14px; }
}

/* MY JOURNEY stays in the header; this compact rectangular card replaces EXPLORE MAP. */
.hero-copy .hero-journey-card {
  position: relative;
  left: auto;
  bottom: auto;
  width: 225px;
  margin-top: 19px;
  padding: 17px 19px;
  display: block;
  transform: none;
}

.hero-copy .hero-journey-card > i { margin: 11px 0; }
.hero-copy .hero-journey-card p { margin-top: 6px; }
.hero-copy .hero-journey-card .journey-open { margin-top: 10px; }

/* A small, distant light source between the headline and the globe. */
.visible-stars {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  animation: visibleStarsTwinkle 4.8s ease-in-out infinite;
}

.visible-stars::before,
.visible-stars::after {
  content: '';
  position: absolute;
  left: 8vw;
  top: 9vh;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(232, 246, 255, .9);
  box-shadow:
    17vw 5vh 3px rgba(205, 235, 255, .9),
    29vw 13vh 2px rgba(255, 239, 199, .85),
    39vw 3vh 2px rgba(220, 242, 255, .78),
    50vw 18vh 3px rgba(214, 240, 255, .88),
    64vw 4vh 2px rgba(255, 235, 191, .75),
    77vw 15vh 3px rgba(218, 241, 255, .9),
    85vw 34vh 2px rgba(228, 245, 255, .8),
    22vw 40vh 2px rgba(255, 235, 194, .72),
    40vw 54vh 3px rgba(214, 239, 255, .82),
    58vw 43vh 2px rgba(231, 246, 255, .86),
    73vw 63vh 3px rgba(255, 236, 196, .8),
    88vw 73vh 2px rgba(218, 241, 255, .82),
    13vw 76vh 3px rgba(224, 243, 255, .75);
}

.visible-stars::after {
  left: 3vw;
  top: 15vh;
  width: 1px;
  height: 1px;
  opacity: .65;
  transform: scale(.72);
}

@keyframes visibleStarsTwinkle {
  0%, 100% { opacity: .62; }
  50% { opacity: 1; }
}

.distant-sun {
  position: absolute;
  z-index: 3;
  left: 31%;
  top: 35%;
  width: 14px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff9df;
  box-shadow:
    0 0 8px rgba(255, 255, 245, .95),
    0 0 23px rgba(255, 210, 122, .8),
    0 0 65px rgba(255, 174, 71, .38);
  pointer-events: none;
  animation: distantSunPulse 5s ease-in-out infinite;
}

.distant-sun::before {
  content: '';
  position: absolute;
  inset: -42px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 207, 118, .2), rgba(255, 184, 79, .06) 38%, transparent 70%);
}

.distant-sun::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 105px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 224, 162, .24), transparent);
  transform: translate(-50%, -50%);
}

@keyframes distantSunPulse {
  0%, 100% { opacity: .82; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.08); }
}

.map-mode .distant-sun,
.globe-fallback .distant-sun,
.map-mode .visible-stars,
.globe-fallback .visible-stars { opacity: 0; }

@media (max-width: 760px) {
  .distant-sun {
    left: 56%;
    top: 31%;
    width: 10px;
  }
}

@media (max-width: 760px) {
  .hero-copy .hero-journey-card {
    width: 215px;
    margin-top: 15px;
    padding: 14px 16px;
  }
  .hero-copy .hero-journey-card > i { margin: 9px 0; }
  .hero-copy .hero-journey-card p { font-size: 9px; line-height: 1.5; }
}