:root {
  --random-bg: #f7f8fc;
  --random-card: #ffffff;

  --random-text: #1f2a44;
  --random-subtext: #697386;

  --random-line: #e5e9f2;

  --random-point: #6b7cff;
  --random-point-dark: #5548d9;

  --random-shadow:
    0 18px 40px rgba(15, 23, 42, 0.08);
}


/* ==================================================
   기본
================================================== */

* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  padding: 0;
}


body {
  min-width: 320px;

  color:
    var(--random-text);

  background:
    linear-gradient(
      180deg,
      #faf9fd 0%,
      #f5f7fb 100%
    );

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Pretendard",
    "Segoe UI",
    sans-serif;
}


button,
a {
  font: inherit;
}


.random-shell {
  min-height: 100vh;
}


/* ==================================================
   상단
================================================== */

.random-topbar {
  width: 100%;

  min-height: 64px;

  padding:
    10px 22px;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  background:
    rgba(
      255,
      255,
      255,
      0.90
    );

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  border-bottom:
    1px solid
    rgba(
      225,
      228,
      236,
      0.95
    );
}


/* 돌아가기 */

.random-back-btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 42px;

  padding:
    0 15px;

  border:
    1px solid #e4e7ed;

  border-radius: 999px;

  background: #ffffff;

  color: #334155;

  text-decoration: none;

  font-size: 14px;

  font-weight: 800;

  box-shadow:
    0 4px 12px
    rgba(
      15,
      23,
      42,
      0.05
    );

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}


@media (
  hover: hover
) and (
  pointer: fine
) {

  .random-back-btn:hover {
    transform:
      translateY(-1px);

    background:
      #fafafa;

    box-shadow:
      0 7px 16px
      rgba(
        15,
        23,
        42,
        0.08
      );
  }

}


/*
  사진처럼 우측 상단 타이틀은
  보이지 않게 한다.
*/

.random-topbar-title {
  display: none;
}


/* ==================================================
   메인
================================================== */

.random-main {
  width:
    min(
      1100px,
      calc(100% - 32px)
    );

  margin:
    0 auto;

  padding:
    26px 0 56px;
}


/* ==================================================
   페이지 제목
================================================== */

.random-heading {
  margin:
    0 auto 20px;

  text-align: center;
}


/*
  사진에는 eyebrow 문구가 없으므로 숨김
*/

.random-heading-eyebrow {
  display: none;
}


.random-heading h1 {
  margin:
    0 0 12px;

  color:
    #1f2a44;

  font-size:
    clamp(
      31px,
      3vw,
      42px
    );

  font-weight: 800;

  line-height: 1.2;

  letter-spacing:
    -0.045em;
}


.random-heading p {
  max-width:
    760px;

  margin:
    0 auto;

  color:
    #68758b;

  font-size:
    16px;

  font-weight: 500;

  line-height: 1.7;

  letter-spacing:
    -0.015em;
}


/* ==================================================
   지도 영역
================================================== */

.random-map-section {
  margin-top:
    18px;
}


.map-artboard {
  position: relative;

  /*
    사진과 비슷한 크기
  */

  width: 100%;

  max-width:
    800px;

  margin:
    0 auto;

  aspect-ratio:
    1000 / 760;

  overflow: hidden;

  border:
    1px solid
    #e6eaf2;

  border-radius:
    24px;

  background:
    linear-gradient(
      180deg,
      #fcfdff 0%,
      #f5f7fb 100%
    );

  box-shadow:
    0 17px 36px
    rgba(
      30,
      41,
      59,
      0.07
    );

  isolation: isolate;
}


/* ==================================================
   대한민국 지도 이미지
================================================== */

.korea-map-image {
  position: absolute;

  inset: 0;

  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;

  padding:
    24px 22px 18px;

  object-fit: contain;

  object-position:
    center center;

  user-select: none;

  -webkit-user-drag:
    none;

  pointer-events:
    none;
}


/* ==================================================
   도시 버블

   현재 지도 PNG 자체에 지역 이름이 있기 때문에
   사진처럼 보이도록 별도 도시 원형 이미지는 숨김.

   JS의 도시 선택 데이터에는 영향 없음.
================================================== */

.city-bubble-layer {
  position: absolute;

  inset: 0;

  z-index: 5;

  pointer-events: none;
}


.city-bubble {
  display: none;
}


/* ==================================================
   지도 충돌 위치
================================================== */

.dart-target {
  position: absolute;

  z-index: 25;

  width: 12px;
  height: 12px;

  transform:
    translate(
      -50%,
      -50%
    );

  border:
    3px solid #ffffff;

  border-radius:
    50%;

  background:
    #745ce0;

  box-shadow:
    0 0 0 6px
    rgba(
      116,
      92,
      224,
      0.14
    );

  pointer-events:
    none;
}


.dart-target.hidden {
  display: none;
}


/* ==================================================
   꽂힌 지점 파동
================================================== */

.target-pulse {
  position: absolute;

  z-index: 24;

  width: 26px;
  height: 26px;

  border:
    2px solid
    rgba(
      124,
      92,
      255,
      0.72
    );

  border-radius:
    50%;

  background:
    rgba(
      124,
      92,
      255,
      0.06
    );

  transform:
    translate(
      -50%,
      -50%
    );

  pointer-events:
    none;

  animation:
    targetPulseAnimation
    0.85s
    ease-out
    forwards;
}


.target-pulse.hidden {
  display: none;
}


@keyframes targetPulseAnimation {

  0% {
    opacity: 1;

    transform:
      translate(
        -50%,
        -50%
      )
      scale(0.55);
  }


  100% {
    opacity: 0;

    transform:
      translate(
        -50%,
        -50%
      )
      scale(2.15);
  }

}


/* ==================================================
   지도 아래 조작 영역
================================================== */

.random-controls {
  margin-top:
    20px;

  text-align:
    center;
}


/* 안내 문구 */

.dart-guide {
  margin:
    0 0 12px;

  color:
    #68758b;

  font-size:
    14px;

  font-weight:
    700;

  line-height:
    1.5;
}


/* ==================================================
   다트 런처 영역
================================================== */

.dart-launcher-area {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;
}


/* 흰색 런처 박스 */

.dart-launcher {
  position: relative;

  width: 168px;
  height: 90px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding:
    6px 10px 16px;

  overflow: visible;

  border:
    1px solid
    #e1e5ed;

  border-radius:
    18px;

  background:
    rgba(
      255,
      255,
      255,
      0.97
    );

  box-shadow:
    0 12px 25px
    rgba(
      15,
      23,
      42,
      0.09
    );

  transition:
    border-color
    0.18s ease,
    box-shadow
    0.18s ease,
    background
    0.18s ease;
}


/* 런처 하단 글자 */

.dart-launcher-text {
  position: absolute;

  left: 50%;
  bottom: 7px;

  transform:
    translateX(-50%);

  margin: 0;

  color:
    #929bad;

  font-size:
    10px;

  font-weight:
    700;

  white-space:
    nowrap;

  transition:
    opacity
    0.15s ease;
}


/* ==================================================
   원래 다트 PNG
================================================== */

.draggable-dart {
  position: relative;

  z-index: 50;

  display: block;

  /*
    사진에서 보이는 다트 크기
  */

  width: 112px;
  height: auto;

  max-width: none;

  object-fit:
    contain;

  cursor:
    grab;

  touch-action:
    none;

  user-select:
    none;

  -webkit-user-select:
    none;

  -webkit-user-drag:
    none;

  transform:
    rotate(-4deg);

  transform-origin:
    center center;

  filter:
    drop-shadow(
      0 9px 9px
      rgba(
        56,
        48,
        110,
        0.18
      )
    );

  transition:
    transform
    0.16s ease,
    filter
    0.16s ease;

  animation:
    dartIdle
    2.3s
    ease-in-out
    infinite;
}


/* 마우스 오버 */

@media (
  hover: hover
) and (
  pointer: fine
) {

  .draggable-dart:hover {
    transform:
      rotate(-4deg)
      translateY(-3px)
      scale(1.035);

    filter:
      drop-shadow(
        0 13px 11px
        rgba(
          56,
          48,
          110,
          0.23
        )
      );
  }

}


/* 다트 잡기 */

.draggable-dart.is-dragging {
  animation: none;

  cursor:
    grabbing;
}


/* 대기 중 살짝 떠 있기 */

@keyframes dartIdle {

  0%,
  100% {

    transform:
      rotate(-4deg)
      translateY(0);

  }


  50% {

    transform:
      rotate(-3deg)
      translateY(-4px);

  }

}


/* ==================================================
   다트를 잡아당기는 동안 런처
================================================== */

.dart-launcher.is-dragging {
  border-color:
    rgba(
      107,
      124,
      255,
      0.28
    );

  background:
    rgba(
      255,
      255,
      255,
      0.82
    );

  box-shadow:
    0 12px 26px
    rgba(
      75,
      70,
      160,
      0.10
    );
}


.dart-launcher.is-dragging
.dart-launcher-text {
  opacity: 0;
}


/* ==================================================
   POWER

   random.js가 자동으로 생성한다.

   평상시에는 안 보이고,
   다트를 당기는 중에만 표시.
================================================== */

.dart-launcher
> [aria-hidden="true"] {
  position: absolute;

  left: 50%;
  bottom: -30px;

  transform:
    translateX(-50%);

  margin: 0 !important;

  opacity:
    0 !important;

  pointer-events:
    none;

  transition:
    opacity
    0.15s ease;
}


.dart-launcher.is-dragging
> [aria-hidden="true"] {
  opacity:
    1 !important;
}


/* ==================================================
   날아가는 다트

   실제 위치/회전은 JS가 계산한다.
================================================== */

.dart-projectile {
  max-width: none !important;

  user-select: none;

  -webkit-user-select: none;

  -webkit-user-drag: none;

  pointer-events: none;
}


/* ==================================================
   지도에 꽂힌 다트

   위치와 각도는 JS에서 직접 계산한다.
================================================== */

.stuck-dart {
  max-width: none !important;

  user-select: none;

  -webkit-user-select: none;

  -webkit-user-drag: none;

  pointer-events: none;
}


/* ==================================================
   결과 카드
================================================== */

.random-result {
  width:
    min(
      580px,
      100%
    );

  margin:
    46px auto 0;

  padding:
    22px 24px 24px;

  text-align:
    center;

  border:
    1px solid
    #e5e9f1;

  border-radius:
    20px;

  background:
    rgba(
      255,
      255,
      255,
      0.97
    );

  box-shadow:
    0 14px 30px
    rgba(
      15,
      23,
      42,
      0.07
    );
}


.random-result.hidden {
  display: none;
}


/* 결과 상단 라벨 */

.random-result-label {
  display: inline-block;

  margin-bottom:
    7px;

  color:
    #64748b;

  font-size:
    12px;

  font-weight:
    800;
}


/* 여행지 */

.random-region-name {
  margin: 0;

  color:
    #1f2a44;

  font-size:
    clamp(
      27px,
      4vw,
      36px
    );

  font-weight:
    850;

  line-height:
    1.2;

  letter-spacing:
    -0.04em;
}


/* 설명 */

.random-region-description {
  max-width:
    520px;

  margin:
    10px auto 0;

  color:
    var(--random-subtext);

  font-size:
    14px;

  line-height:
    1.7;
}


/* ==================================================
   결과 버튼
================================================== */

.random-result-actions {
  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;

  margin-top:
    20px;
}


.secondary-btn,
.primary-random-btn {
  min-height:
    46px;

  padding:
    0 18px;

  border-radius:
    13px;

  font-size:
    14px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    transform
    0.14s ease,
    box-shadow
    0.14s ease;
}


.secondary-btn {
  color:
    #334155;

  border:
    1px solid
    #dbe2ea;

  background:
    #ffffff;
}


.primary-random-btn {
  color:
    #ffffff;

  border: 0;

  background:
    linear-gradient(
      135deg,
      #6b7cff 0%,
      #8c73ff 100%
    );

  box-shadow:
    0 11px 20px
    rgba(
      107,
      124,
      255,
      0.20
    );
}


@media (
  hover: hover
) and (
  pointer: fine
) {

  .secondary-btn:hover,
  .primary-random-btn:hover {

    transform:
      translateY(-1px);

  }

}


/* ==================================================
   태블릿
================================================== */

@media (
  max-width: 900px
) {

  .random-main {
    width:
      calc(
        100% - 24px
      );

    padding:
      22px 0 46px;
  }


  .map-artboard {
    max-width:
      760px;

    border-radius:
      21px;
  }


  .korea-map-image {
    padding:
      20px 14px 18px;
  }


  .random-heading h1 {
    font-size:
      clamp(
        29px,
        6vw,
        38px
      );
  }


  .random-heading p {
    font-size:
      15px;
  }

}


/* ==================================================
   모바일
================================================== */

@media (
  max-width: 640px
) {

  .random-topbar {
    min-height:
      58px;

    padding:
      8px 12px;
  }


  .random-back-btn {
    min-height:
      40px;

    padding:
      0 13px;

    font-size:
      13px;
  }


  .random-main {
    width:
      calc(
        100% - 20px
      );

    padding:
      20px 0 40px;
  }


  .random-heading {
    margin-bottom:
      16px;
  }


  .random-heading h1 {
    margin-bottom:
      9px;

    font-size:
      clamp(
        27px,
        8vw,
        34px
      );
  }


  .random-heading p {
    max-width:
      420px;

    font-size:
      13px;

    line-height:
      1.6;
  }


  .random-map-section {
    margin-top:
      14px;
  }


  .map-artboard {
    width: 100%;

    aspect-ratio:
      1000 / 860;

    border-radius:
      18px;
  }


  .korea-map-image {
    padding:
      12px 8px;
  }


  .random-controls {
    margin-top:
      17px;
  }


  .dart-guide {
    margin-bottom:
      10px;

    font-size:
      13px;
  }


  .dart-launcher {
    width:
      156px;

    height:
      84px;

    border-radius:
      17px;
  }


  .draggable-dart {
    width:
      104px;
  }


  .random-result {
    margin-top:
      42px;

    padding:
      20px 16px;

    border-radius:
      18px;
  }


  .random-result-actions {
    flex-direction:
      column;
  }


  .secondary-btn,
  .primary-random-btn {
    width: 100%;
  }

}


/* ==================================================
   작은 모바일
================================================== */

@media (
  max-width: 400px
) {

  .random-main {
    width:
      calc(
        100% - 14px
      );
  }


  .map-artboard {
    border-radius:
      16px;
  }


  .dart-launcher {
    width:
      148px;

    height:
      80px;
  }


  .draggable-dart {
    width:
      98px;
  }

}


/* ==================================================
   애니메이션 최소화
================================================== */

@media (
  prefers-reduced-motion: reduce
) {

  .draggable-dart,
  .dart-projectile,
  .stuck-dart,
  .target-pulse {

    animation:
      none !important;

    transition:
      none !important;

  }

}

/* ==================================================
   모두잇길 자연형 테마 — 2번 시안
   다트 좌표/드래그 로직은 유지하고 표현만 변경
================================================== */

:root {
  --random-bg: #f7faf2;
  --random-card: #ffffff;
  --random-text: #173f2b;
  --random-subtext: #68796e;
  --random-line: #d7e5d8;
  --random-point: #75ad37;
  --random-point-dark: #2f6b4f;
  --random-pale: #eef8df;
  --random-lime: #9bdd2c;
  --random-shadow: 0 18px 44px rgba(45, 83, 58, 0.13);
}

body {
  min-height: 100dvh;
  color: var(--random-text);
  background:
    linear-gradient(180deg, rgba(251, 252, 247, 0.96) 0%, rgba(247, 250, 242, 0.84) 56%, rgba(238, 248, 223, 0.72) 100%),
    url("/random/travel-bg.png") center bottom / cover no-repeat fixed;
}

.random-shell {
  min-height: 100dvh;
}

.random-brand-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(54, 91, 65, 0.10);
  box-shadow: 0 5px 18px rgba(37, 69, 46, 0.045);
}

.random-brand-header .nav-link {
  text-decoration: none;
}

.random-main {
  width: min(1180px, calc(100% - 32px));
  padding: 24px 0 58px;
}

.random-heading {
  position: relative;
  margin: 0 auto 17px;
}

.random-heading::before,
.random-heading::after {
  content: "";
  position: absolute;
  top: 17px;
  width: 15px;
  height: 24px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(145deg, #9bd84d, #4f9638);
  opacity: 0.9;
}

.random-heading::before {
  left: calc(50% - 260px);
  transform: rotate(-28deg);
}

.random-heading::after {
  right: calc(50% - 260px);
  transform: scaleX(-1) rotate(-28deg);
}

.random-heading h1 {
  margin-bottom: 8px;
  color: var(--random-text);
  font-weight: 950;
}

.random-heading p {
  color: var(--random-subtext);
  font-weight: 650;
}

.random-map-section {
  margin-top: 14px;
}

.map-artboard {
  max-width: 820px;
  border: 1px solid #bcd7a5;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.965);
  box-shadow: var(--random-shadow);
}

.korea-map-image {
  padding: 25px 24px 19px;
}

.random-controls {
  width: min(800px, 100%);
  margin: 16px auto 0;
  padding: 19px 26px 21px;
  border: 1px solid #d4e6bd;
  border-radius: 23px;
  background: linear-gradient(135deg, rgba(246, 251, 237, 0.97), rgba(235, 247, 214, 0.95));
  box-shadow: 0 14px 32px rgba(45, 83, 58, 0.10);
  backdrop-filter: blur(10px);
}

.dart-guide {
  margin: 0 0 14px;
  color: var(--random-text);
  font-size: 16px;
  font-weight: 900;
}

.dart-control-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto minmax(170px, 1fr);
  align-items: center;
  gap: 22px;
}

.dart-path {
  position: relative;
  height: 38px;
  border-bottom: 2px dashed #a5ca7e;
  transform: rotate(4deg);
}

.dart-path::after {
  content: "➜";
  position: absolute;
  right: -3px;
  bottom: -10px;
  color: #75ad37;
  font-size: 18px;
  transform: rotate(-4deg);
}

.dart-launcher-area {
  width: auto;
}

.dart-launcher {
  width: 174px;
  height: 94px;
  padding: 5px 10px 14px;
  border: 1px solid #d8e7c9;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 25px rgba(45, 83, 58, 0.13);
}

.draggable-dart {
  width: 118px;
  filter: drop-shadow(0 10px 10px rgba(38, 91, 52, 0.20));
}

.dart-helper {
  margin: 0;
  padding: 11px 15px;
  border: 1px solid #aacb86;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
  color: #46644f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

.random-result {
  margin-top: 22px;
  border-color: #cadfbe;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 34px rgba(45, 83, 58, 0.12);
}

.random-result-label,
.random-region-description {
  color: var(--random-subtext);
}

.random-region-name {
  color: var(--random-text);
}

.secondary-btn {
  color: #315b42;
  border-color: #ccddce;
  background: #ffffff;
}

.primary-random-btn {
  color: #ffffff;
  background: linear-gradient(135deg, #5f7f55 0%, #286644 100%);
  box-shadow: 0 11px 20px rgba(40, 102, 68, 0.20);
}

@media (hover: hover) and (pointer: fine) {
  .random-brand-header .nav-link:hover,
  .secondary-btn:hover {
    background: #f1f7e9;
  }
}

@media (max-width: 900px) {
  body {
    background-attachment: scroll;
  }

  .random-main {
    padding-top: 20px;
  }

  .random-controls {
    width: min(760px, 100%);
  }
}

@media (max-width: 700px) {
  .random-brand-header {
    height: 62px;
  }

  .random-brand-header .home-nav {
    gap: 3px;
  }

  .random-brand-header .nav-link {
    padding: 8px;
    font-size: 12px;
  }

  .random-brand-header .nav-link span {
    display: none;
  }

  .random-heading::before,
  .random-heading::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .random-main {
    width: calc(100% - 18px);
    padding: 17px 0 38px;
  }

  .map-artboard {
    border-radius: 19px;
  }

  .random-controls {
    padding: 16px 14px 17px;
    border-radius: 19px;
  }

  .dart-control-row {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 11px;
  }

  .dart-path {
    display: none;
  }

  .dart-helper {
    width: min(260px, 100%);
  }

  .dart-launcher {
    width: 166px;
    height: 88px;
  }

  .draggable-dart {
    width: 110px;
  }
}

@media (max-width: 440px) {
  .random-brand-header .home-brand strong {
    font-size: 17px;
  }

  .random-brand-header .home-nav .nav-link:first-child,
  .random-brand-header .home-nav .nav-link:last-child {
    display: none;
  }
}