:root {
  --bg: #0a0e17;
  --panel: rgba(15, 25, 35, 0.78);
  --panel-solid: #101b26;
  --line: rgba(188, 255, 226, 0.13);
  --muted: #819098;
  --text: #edf8f4;
  --green: #28c796;
  --green-soft: #8ce7c4;
  --white-glow: #f3fff9;
  --shadow: 0 20px 70px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--bg); }

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg);
  font-family: "DM Sans", "Noto Sans SC", "Noto Sans KR", sans-serif;
}

button, input, textarea { font: inherit; }
button { cursor: pointer; }

.ambient, .particle-field { position: fixed; pointer-events: none; z-index: 0; }
.ambient { width: 42vw; height: 42vw; border-radius: 50%; filter: blur(80px); opacity: 0.11; }
.ambient-one { top: -17vw; left: -10vw; background: var(--green); }
.ambient-two { right: -18vw; bottom: -22vw; background: #326d85; }
.particle-field { inset: 0; opacity: 0.45; background-image: radial-gradient(circle, rgba(220, 255, 241, 0.72) 0 1px, transparent 1.5px); background-size: 113px 97px; mask-image: linear-gradient(to bottom, black, transparent 86%); animation: drift 28s linear infinite; }

.topbar, .app-shell, .footer { position: relative; z-index: 1; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 1440px; margin: auto; padding: 22px clamp(18px, 4vw, 64px) 14px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; color: var(--green); border: 1px solid rgba(40, 199, 150, 0.3); border-radius: 12px; background: rgba(40, 199, 150, 0.08); box-shadow: 0 0 24px rgba(40, 199, 150, 0.18); font-size: 20px; }
.brand-mark img { width: 25px; height: 25px; object-fit: contain; filter: invert(77%) sepia(28%) saturate(790%) hue-rotate(108deg) brightness(103%) contrast(91%); }
.brand strong { display: block; letter-spacing: -0.03em; font-size: 18px; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; letter-spacing: 0.03em; }
.anniversary-badge { display: flex; align-items: center; gap: 9px; color: var(--green-soft); font-size: 11px; letter-spacing: 0.02em; }
.anniversary-badge b { color: var(--text); font-weight: 500; }
.status-dot, .live-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.language-switcher { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255, 255, 255, 0.03); }
.language-button { min-width: 31px; padding: 6px 7px; color: var(--muted); border: 0; border-radius: 8px; background: transparent; font-size: 10px; font-weight: 700; }
.language-button.active { color: var(--bg); background: var(--green); }

.app-shell { max-width: 1440px; margin: auto; padding: 26px clamp(18px, 4vw, 64px) 28px; }
.intro-panel { display: flex; align-items: end; justify-content: space-between; gap: 32px; padding: 14px 2px 26px; }
.eyebrow { margin: 0 0 11px; color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 610px; margin-bottom: 11px; font-size: clamp(31px, 4.3vw, 57px); line-height: 1.02; letter-spacing: -0.055em; font-weight: 500; }
.intro-copy { max-width: 460px; margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.stats-grid { display: flex; align-items: stretch; gap: 9px; }
.stat-card { min-width: 106px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(19, 31, 42, 0.55); }
.stat-value, .stat-card strong { display: block; color: var(--green-soft); font-size: 24px; line-height: 1.1; font-weight: 600; letter-spacing: -0.04em; }
.stat-label { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.25; }
.top-city-card strong { margin-top: 7px; color: var(--text); font-size: 15px; }

.map-card { position: relative; min-height: 640px; overflow: hidden; border: 1px solid var(--line); border-radius: 25px; background: #0d1822; box-shadow: var(--shadow); }
#map { position: absolute; inset: 0; min-height: 640px; background: #0d1822; }
.leaflet-container { background: #0d1822; font-family: inherit; }
.leaflet-tile { filter: brightness(0.46) saturate(0.48) hue-rotate(110deg); opacity: 0.82; }
.leaflet-control-zoom { display: none; }
.leaflet-control-attribution { margin: 0 8px 7px 0 !important; color: rgba(221, 247, 238, 0.52) !important; background: rgba(8, 14, 22, 0.68) !important; font-size: 9px; }
.leaflet-control-attribution a { color: var(--green-soft) !important; }
.map-toolbar { position: absolute; z-index: 500; top: 19px; left: 20px; right: 20px; display: flex; justify-content: space-between; gap: 10px; pointer-events: none; }
.search-wrap { position: relative; width: min(315px, 72vw); pointer-events: auto; }
.search-wrap input { width: 100%; padding: 13px 15px 13px 39px; color: var(--text); outline: 0; border: 1px solid rgba(209, 255, 236, 0.15); border-radius: 13px; background: rgba(11, 20, 29, 0.83); backdrop-filter: blur(15px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.21); font-size: 12px; }
.search-wrap input::placeholder { color: #87989c; }
.search-wrap input:focus { border-color: rgba(40, 199, 150, 0.6); }
.search-icon { position: absolute; z-index: 1; top: 10px; left: 15px; color: var(--green-soft); font-size: 19px; pointer-events: none; }
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: rgba(13, 25, 35, 0.96); box-shadow: var(--shadow); }
.search-result { display: block; width: 100%; padding: 10px; color: var(--text); text-align: left; border: 0; border-radius: 8px; background: transparent; }
.search-result:hover { background: rgba(40, 199, 150, 0.12); }
.search-result small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.ghost-button { display: inline-flex; align-items: center; gap: 7px; padding: 12px 14px; color: var(--green-soft); border: 1px solid rgba(209, 255, 236, 0.15); border-radius: 13px; background: rgba(11, 20, 29, 0.83); backdrop-filter: blur(15px); font-size: 11px; pointer-events: auto; }
.ghost-button:hover { border-color: var(--green); }
.map-hint { position: absolute; z-index: 400; bottom: 19px; left: 50%; display: flex; align-items: center; gap: 8px; padding: 9px 13px; color: rgba(237, 248, 244, 0.75); transform: translateX(-50%); border: 1px solid rgba(209, 255, 236, 0.12); border-radius: 999px; background: rgba(10, 18, 26, 0.72); backdrop-filter: blur(10px); font-size: 10px; white-space: nowrap; }
.hint-star { color: var(--green); font-size: 15px; }
.center-easter-egg { position: absolute; z-index: 400; top: 50%; left: 50%; display: grid; width: 34px; height: 34px; place-items: center; color: rgba(140, 231, 196, 0.3); transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: transparent; font-size: 16px; transition: 0.3s ease; }
.center-easter-egg:hover { color: var(--green-soft); text-shadow: 0 0 18px var(--green); transform: translate(-50%, -50%) scale(1.25); }
.star-marker { display: grid; width: 30px; height: 30px; place-items: center; color: var(--green-soft); text-shadow: 0 0 5px var(--green), 0 0 16px var(--green), 0 0 30px rgba(255, 255, 255, 0.7); animation: twinkle 3.7s ease-in-out infinite; font-size: 20px; }
.star-marker.medium { color: #d9fff0; text-shadow: 0 0 7px var(--green), 0 0 21px var(--green), 0 0 39px rgba(255, 255, 255, 0.8); font-size: 24px; }
.star-marker.bright { color: var(--white-glow); text-shadow: 0 0 8px #fff, 0 0 17px var(--green), 0 0 32px var(--green), 0 0 54px rgba(40, 199, 150, 0.7); font-size: 29px; }
.star-popup { min-width: 130px; color: #122029; }
.star-popup strong { display: block; font-size: 13px; }
.star-popup span { display: block; margin-top: 3px; color: #5a6d72; font-size: 10px; }
.popup-messages { max-height: 110px; margin-top: 10px; overflow: auto; border-top: 1px solid #dbece5; }
.popup-messages p { margin: 8px 0 0; color: #334a50; font-size: 10px; line-height: 1.45; }
.popup-empty { margin: 10px 0 0; color: #718287; font-size: 10px; }
.popup-action { margin-top: 9px; padding: 6px 8px; color: #0d4737; border: 0; border-radius: 7px; background: #baf5de; font-size: 10px; font-weight: 700; }

.cities-panel { padding: 48px 2px 13px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
h2 { margin-bottom: 0; font-size: clamp(22px, 3vw, 31px); font-weight: 500; letter-spacing: -0.04em; }
.live-label { display: flex; align-items: center; gap: 7px; color: var(--green-soft); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; }
.top-cities { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.city-card { padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(17, 30, 40, 0.5); }
.city-card-rank { color: var(--green); font-size: 10px; }
.city-card-name { display: block; margin-top: 18px; font-size: 14px; }
.city-card-count { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.city-card-bar { height: 2px; margin-top: 12px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.08); }
.city-card-bar::after { display: block; width: var(--bar-width); height: 100%; content: ""; background: var(--green); box-shadow: 0 0 8px var(--green); }
.footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; max-width: 1440px; margin: auto; padding: 0 clamp(18px, 4vw, 64px) 24px; color: #53646b; font-size: 9px; letter-spacing: 0.02em; }
.feedback-link { color: var(--green-soft); text-decoration: none; }
.feedback-link:hover { color: var(--text); text-decoration: underline; }
.feedback-block > span { display: inline; }

.modal-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(4, 9, 14, 0.76); backdrop-filter: blur(12px); }
.modal-backdrop[hidden] { display: none; }
.modal { position: relative; width: min(100%, 410px); padding: 33px 28px 25px; border: 1px solid rgba(140, 231, 196, 0.23); border-radius: 23px; background: linear-gradient(145deg, #11242d, #0d171f 72%); box-shadow: 0 30px 100px rgba(0, 0, 0, 0.48); }
.modal-close { position: absolute; top: 14px; right: 16px; color: var(--muted); border: 0; background: transparent; font-size: 25px; line-height: 1; }
.modal-star { margin-bottom: 18px; color: var(--green-soft); text-shadow: 0 0 20px var(--green); font-size: 30px; }
.modal h2 { margin-bottom: 8px; }
.modal-copy { margin-bottom: 20px; color: var(--muted); font-size: 12px; line-height: 1.5; }
textarea { width: 100%; resize: vertical; padding: 13px; color: var(--text); outline: 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, 0.2); font-size: 12px; line-height: 1.5; }
textarea:focus { border-color: var(--green); }
textarea::placeholder { color: #718287; }
.form-meta { display: flex; justify-content: space-between; gap: 12px; margin: 8px 1px 17px; color: var(--muted); font-size: 9px; }
.primary-button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 15px; color: #071a14; border: 0; border-radius: 12px; background: var(--green); box-shadow: 0 8px 24px rgba(40, 199, 150, 0.2); font-size: 12px; font-weight: 700; }
.primary-button:hover { background: #48e0ad; }
.form-note { margin: 13px 0 0; color: #667a7d; text-align: center; font-size: 9px; }
.toast { position: fixed; z-index: 1100; right: 20px; bottom: 20px; max-width: min(330px, calc(100vw - 40px)); padding: 12px 15px; color: var(--text); opacity: 0; transform: translateY(10px); border: 1px solid rgba(140, 231, 196, 0.2); border-radius: 11px; background: #142832; box-shadow: var(--shadow); font-size: 11px; pointer-events: none; transition: 0.25s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.primary-button:disabled { cursor: wait; opacity: 0.55; }
.share-modal { position: relative; width: min(100%, 430px); padding: 23px 25px 25px; border: 1px solid rgba(140, 231, 196, 0.23); border-radius: 23px; background: linear-gradient(145deg, #11242d, #0d171f 72%); box-shadow: 0 30px 100px rgba(0, 0, 0, 0.48); }
.share-card { position: relative; min-height: 230px; margin-bottom: 22px; overflow: hidden; padding: 25px; border: 1px solid rgba(196, 255, 230, 0.22); border-radius: 18px; background: radial-gradient(circle at 80% 20%, rgba(40, 199, 150, 0.3), transparent 32%), linear-gradient(145deg, #153c3d, #0c1824 74%); }
.share-card::after { position: absolute; inset: 0; content: ""; opacity: 0.35; background-image: radial-gradient(circle, rgba(228, 255, 244, 0.9) 0 1px, transparent 1.5px); background-size: 43px 37px; }
.share-card > * { position: relative; z-index: 1; }
.share-card-star { display: block; color: var(--green-soft); text-shadow: 0 0 12px var(--green), 0 0 28px var(--green); font-size: 38px; }
.share-card-brand { margin: 2px 0 4px; font-size: 21px; font-weight: 700; letter-spacing: -0.04em; }
.share-card-logo { position: absolute !important; top: 23px; right: 24px; z-index: 2 !important; width: 42px; height: 42px; object-fit: contain; filter: invert(77%) sepia(28%) saturate(790%) hue-rotate(108deg) brightness(103%) contrast(91%); opacity: 0.9; }
.share-card-date, .share-card-footer { margin: 0; color: rgba(237, 248, 244, 0.58); font-size: 9px; }
.share-card-city { margin: 29px 0 5px; color: var(--white-glow); font-size: 30px; font-weight: 500; letter-spacing: -0.05em; }
.share-card-copy { margin: 0; color: var(--green-soft); font-size: 11px; }
.share-card-footer { position: absolute; right: 25px; bottom: 23px; }
.share-modal h2 { margin-bottom: 8px; font-size: 22px; }
.share-actions { display: flex; gap: 9px; }
.share-actions .primary-button, .share-actions .share-download { flex: 1; justify-content: center; }
.share-download { color: var(--green-soft); }

/* Small admin surface shares the same visual language as the public map. */
.admin-shell { max-width: 1080px; margin: 0 auto; padding: 48px clamp(18px, 4vw, 64px); }
.admin-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.admin-header h1 { margin-bottom: 0; font-size: clamp(30px, 5vw, 48px); }
.admin-actions { display: flex; gap: 9px; }
.admin-button { padding: 10px 13px; color: var(--green-soft); border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,0.04); font-size: 11px; }
.admin-button.primary { color: #071a14; border-color: var(--green); background: var(--green); font-weight: 700; }
.admin-card { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(17, 30, 40, 0.68); }
.admin-card + .admin-card { margin-top: 12px; }
.admin-message { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.admin-message p { margin: 8px 0 0; color: var(--text); font-size: 13px; line-height: 1.5; }
.admin-message small { color: var(--muted); font-size: 10px; }
.admin-status { color: var(--green-soft); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.admin-card-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.admin-card-actions button { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; font-size: 10px; }
.admin-card-actions .approve { color: var(--green-soft); }
.admin-card-actions .remove { color: #ffaaa9; }
.admin-login { width: min(100%, 380px); margin: 12vh auto 0; }
.admin-login input { width: 100%; margin: 16px 0 9px; padding: 12px; color: var(--text); outline: 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,0.2); }
.admin-empty { color: var(--muted); font-size: 12px; }

@keyframes twinkle { 0%, 100% { opacity: 0.65; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes drift { from { background-position: 0 0; } to { background-position: 113px 97px; } }

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; padding-top: 14px; }
  .anniversary-badge { order: 3; width: 100%; justify-content: center; padding-top: 2px; }
  .app-shell { padding-top: 10px; }
  .intro-panel { display: block; padding-top: 18px; }
  h1 { max-width: 450px; font-size: clamp(34px, 11vw, 49px); }
  .stats-grid { margin-top: 23px; }
  .stat-card { flex: 1; min-width: 0; padding: 11px 10px; }
  .stat-value { font-size: 21px; }
  .map-card, #map { min-height: 570px; }
  .map-toolbar { top: 13px; left: 13px; right: 13px; }
  .ghost-button { padding: 11px; }
  .ghost-button span:last-child { display: none; }
  .map-hint { bottom: 13px; }
  .top-cities { grid-template-columns: repeat(2, 1fr); }
  .city-card:last-child { display: none; }
  .footer { display: block; line-height: 1.8; }
  .footer span { display: block; }
  .feedback-link { display: inline-block; margin: 3px 0; }
  .share-actions { display: block; }
  .share-actions .share-download { width: 100%; margin-top: 8px; }
  .admin-header, .admin-message { display: block; }
  .admin-actions, .admin-card-actions { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}