/* =============================================
   NUFOTO — Mobile Web CSS
   ============================================= */

   @import url('https://fonts.googleapis.com/css2?family=Xanh+Mono:ital@0;1&display=swap');

   /* ── Reset ── */
   *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   html, body {
     width: 100%;
     height: 100%;
     overflow: hidden;
     background: #fff;
     font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
     margin: 0;
     padding: 0;
   }
   
   a {
     text-decoration: none;
     color: inherit;
     -webkit-tap-highlight-color: transparent;
   }

   /* Visually hidden but available to screen readers — used for page h1s
      that duplicate context already shown visually (e.g. via the logo/nav). */
   .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0;
   }

   /* ── Header ── */
   .header {
     position: fixed;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 100%;
     max-width: 430px;
     z-index: 100;
     padding: calc(16px + env(safe-area-inset-top)) 32px 16px;
     background: #fff;
   }
   
   .logo {
     display: block;
     width: fit-content;
     line-height: 0;
     margin-bottom: 4px;
   }
   
   .logo-img {
     height: 36px;
     width: auto;
     display: block;
   }
   
   /* ── Bottom Navigation */
   .bottom-nav {
     position: fixed;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 100%;
     max-width: 430px;
     z-index: 100;
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: #fff;
     padding: 16px 32px calc(16px + env(safe-area-inset-bottom)) 32px;
   }

   
   .nav-item {
     font-family: 'Xanh Mono', monospace;
     font-size: 14px;
     color: #000000;
     padding: 6px 0;
     letter-spacing: 0;
     line-height: 18px;
     transition: color 0.15s;
   }
   
   /* 밑줄 표시 */
   .nav-item.active {
     color: #111;
     text-decoration: underline;
     text-underline-offset: 3px;
     text-decoration-thickness: 1px;
   }
   
   .nav-item:hover {
     opacity: 0.7;
   }

   .nav-item:active {
     opacity: 0.6;
   }
   
   /* ── 콘텐츠: 헤더~네비 사이에 고정, 내부만 스크롤 ── */
   .content {
     position: absolute;
     top: calc(72px + env(safe-area-inset-top));
     bottom: 74px;
     left: 0;
     right: 0;
     max-width: 430px;
     margin-left: auto;
     margin-right: auto;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
 
  
   /* =============================================
      HOME PAGE — 스크롤 없음
      ============================================= */
   
   .home-content {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     display: flex;
     padding: 28px 32px;
   }
   
   .hero-box {
     flex: 1;
     width: 100%;
     height: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
   }
   
   .hero-box > img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
   }
   

   /* =============================================
      FEED PAGE
      ============================================= */
   
   .feed-content {
     padding: 16px 32px 32px;
   }
   
   .feed-controls {
     display: flex;
     gap: 8px;
     margin-bottom: 20px;
     justify-content: flex-end;
   }

   .feed-filter-wrap {
     position: relative;
   }

   .feed-filter-btn {
     padding: 4px 8px;
     border: 1px solid #0D0692;
     border-radius: 0;
     background: transparent;
     color: #0D0692;
     font-family: 'Xanh Mono', monospace;
     font-size: 10px;
     cursor: pointer;
     letter-spacing: 0.03em;
     display: flex;
     align-items: center;
     gap: 4px;
     transition: background 0.15s, color 0.15s;
   }

   .feed-filter-btn.active {
     background: #0D0692;
     color: #fff;
   }

   .feed-filter-arrow {
     font-size: 10px;
   }

   .feed-dropdown {
     display: none;
     position: absolute;
     top: calc(100% + 6px);
     right: 0;
     background: #fff;
     border: 1px solid #e0e0e0;
     border-radius: 0;
     box-shadow: 0 4px 12px rgba(0,0,0,0.08);
     width: max-content;
     z-index: 100;
     overflow: hidden;
   }

   .feed-dropdown.open {
     display: block;
   }

   .feed-dropdown-item {
     padding: 10px 16px;
     font-family: 'Xanh Mono', monospace;
     font-size: 11px;
     color: #111;
     cursor: pointer;
     letter-spacing: 0.03em;
     transition: background 0.1s;
   }

   .feed-dropdown-item:hover {
     background: #f5f5f7;
   }

   .feed-dropdown-item.selected {
     color: #0D0692;
     font-weight: 600;
   }

   .feed-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 32px;
     padding-bottom: 12px;
   }
   
   .feed-card {
     cursor: pointer;
     display: block;
     color: inherit;
   }
   
   .feed-card:hover {
     opacity: 0.85;
   }

   .feed-card:active {
     opacity: 0.75;
   }
   
   .feed-thumb {
     width: 100%;
     aspect-ratio: 3 / 4;
     margin-bottom: 5px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     position: relative;
     border: 1px solid #0D0692;
   }
   
   .feed-thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     position: absolute;
     inset: 0;
   }
 
   .card-text {
     font-size: 12px;
     font-weight: 500;
     font-family: 'Xanh Mono', monospace;
     color: #000000;
     line-height: 2.3;
   }
   
   .card-body {
     font-size: 11px;
     color: #666;
     line-height: 1.4;
     margin-top: 2px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   


   /* =============================================
      FEED DETAIL PAGE
      ============================================= */
   
   .detail-content {
     padding: 28px 32px 14px 32px;
   }

   .detail-img-box {
     width: 100%;
     border-radius: 0;
     overflow: hidden;
     margin-bottom: 14px;
     border: 1px solid #0D0692;
   }

   .detail-img-box img {
     width: 100%;
     height: auto;
     display: block;
   }
   
   .detail-text {
     font-size: 14px;
     font-family: 'Xanh Mono', monospace;
     font-weight: 500;
     color: #111;
     margin-bottom: 6px;
   }

   .detail-body {
     font-size: 12px;
     color: #666;
     line-height: 1.6;
   }

   .feed-detail-title {
     font-family: 'Xanh Mono', monospace;
     font-size: 16px;
     font-weight: 400;
     color: #111;
     line-height: 1.4;
     margin-bottom: 8px;
   }

   .feed-detail-meta {
     font-family: 'Xanh Mono', monospace;
     font-size: 10px;
     color: #6b6b6b;
     letter-spacing: 0.04em;
     margin-bottom: 20px;
     padding-bottom: 16px;
     border-bottom: 1px solid #e8e8e8;
   }

   .feed-detail-body {
     font-size: 13px;
     color: #333;
     line-height: 1.8;
   }

   .feed-detail-body p { margin-bottom: 12px; }
   .feed-detail-body h1, .feed-detail-body h2, .feed-detail-body h3 {
     font-family: 'Xanh Mono', monospace;
     font-weight: 400;
     margin: 20px 0 8px;
     color: #111;
   }
   .feed-detail-body h1 { font-size: 15px; }
   .feed-detail-body h2 { font-size: 14px; }
   .feed-detail-body h3 { font-size: 13px; }
   .feed-detail-body ul, .feed-detail-body ol { padding-left: 18px; margin-bottom: 12px; }
   .feed-detail-body li { margin-bottom: 4px; }
   .feed-detail-body hr { border: none; border-top: 1px solid #e8e8e8; margin: 20px 0; }
   .feed-detail-body a { color: #0D0692; text-decoration: underline; }
   .feed-body-img {
     margin: 16px 0;
     border: 1px solid #0D0692;
   }
   .feed-body-img img {
     width: 100%;
     height: auto;
     display: block;
   }
   .feed-body-img figcaption {
     font-family: 'Xanh Mono', monospace;
     font-size: 10px;
     color: #6b6b6b;
     padding: 6px 8px;
   }
   


   /* =============================================
      EMPTY PAGES (Location, Support)
      ============================================= */
   
   .empty-content {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
   }
   
   .empty-content p {
     font-family: 'Xanh Mono', monospace;
     font-size: 14px;
     color: #6b6b6b;
     letter-spacing: 0.08em;
   }
   
   /* ── Scrollbar hidden ── */
   ::-webkit-scrollbar {
     width: 0;
   }
   



/* =============================================
   LOCATION PAGE
   ============================================= */

.location-content {
  padding: 16px 32px;
}

.location-item {
  display: block;
  color: inherit;
  margin-bottom: 48px;
}

.location-item:last-child {
  margin-bottom: 0;
}

.location-item a:active {
  opacity: 0.75;
}

.location-num {
  font-family: 'Xanh Mono', monospace;
  font-size: 11px;
  color: #6b6b6b;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.location-name {
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  margin-bottom: 5px;
  font-family: 'Xanh Mono', monospace;
  letter-spacing: 0.02em;
}

.location-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #d0d0d0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  position: relative;
  border: 1px solid #0D0692;
}


.location-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}

.maps-btn-main {
  display: block;
  width: 100%;
  padding: 15px 16px;
  background: #DFE8FF;
  color: #000000;
  border: 1px solid #000000;
  font-family: 'Xanh Mono', monospace;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.maps-btn-main:hover {
  background: #6F7BBE;
  color: #ffffff;
  border-color: #0D0692;
}

.maps-btn-main:active {
  background: #0D0692;
  color: #ffffff;
  border-color: #000000;
}

.maps-btn-main:focus {
  outline: none;
  background: #DFE8FF;
  color: #000000;
  border-color: #000000;
}

.maps-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 8px;
  background: transparent;
}

/* Google Maps / Apple Maps 버튼 */
.maps-option {
  display: block;
  width: 100%;
  padding: 15px 16px;
  background: #DFE8FF;
  color: #000000;
  border: none;
  font-family: 'Xanh Mono', monospace;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s, color 0.15s;
}

.maps-option:hover {
  background: #6F7BBE;
  color: #ffffff;
}

.maps-option:active {
  background: #0D0692;
  color: #ffffff;
}

.maps-option:focus {
  outline: none;
  background: #DFE8FF;
  color: #000000;
}

.btn-maps-list {
  display: block;
  width: 100%;
  height: 48px;
  object-fit: cover;
  object-position: center;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

.btn-maps-list:hover {
  opacity: 0.85;
}

.btn-maps-list:active {
  opacity: 0.7;
}

.location-payment-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
}

.payment-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Xanh Mono', monospace;
  font-size: 11px;
  color: #111;
}

.payment-icon {
  height: 12px;
  width: auto;
  object-fit: contain;
}



/* =============================================
   LOCATION DETAIL PAGE
   ============================================= */

.location-detail-content {
  padding: 16px 32px;
}

.location-detail-num {
  font-family: 'Xanh Mono', monospace;
  font-size: 11px;
  color: #6b6b6b;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.location-detail-name {
  font-family: 'Xanh Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: #111;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

.location-detail-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  position: relative;
  border: 1px solid #0D0692;
}

.location-detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}

/* ── Location image carousel (detail page) ──
   Always 1:1 — the track itself is the square; each slide fills it. */
.location-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.location-carousel-track::-webkit-scrollbar {
  display: none;
}

.location-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
}

.location-carousel-slide img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.location-carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}

.location-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.location-carousel-dot.active {
  background: #fff;
}

.location-info {
  margin-bottom: 24px;
}


.location-info p {
  font-size: 13px;
  color: #333;
  line-height: 1.8;
  letter-spacing: 0.01em;
}

.location-extra {
  margin-bottom: 32px;
}

.location-extra p {
  font-size: 12px;
  color: #666;
  line-height: 1.8;
}

.location-extra-separator {
  height: 32px;
}

.btn-maps {
  display: block;
  width: 100%;
  padding: 16px;
  background: #e8e8f5;
  color: #0D0692;
  font-family: 'Xanh Mono', monospace;
  font-size: 13px;
  text-align: center;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  letter-spacing: 0.03em;
  margin-top: 16px;
}

.btn-maps:hover {
  background: #d0d0ee;
  color: #0D0692;
}

.btn-maps:active {
  background: #c0c0e0;
}


/* ==============================================
   SUPPORT PAGE
   ============================================= */

   .support-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .support-search-section {
    padding: 16px 32px 32px;
    min-height: 290px;
    background: #fff;
  }

  .support-search-label {
    font-family: 'Xanh Mono', monospace;
    font-size: 14px;
    color: #111;
    margin-bottom: 10px;
  }
  /* 최소높이 48px; */

  .support-search-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    padding: 10px 14px;
    gap: 8px;
  }

  /* justfy-content: flex-end  */

  .support-search-wrap input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    color: #111;
    background: transparent;
  }

  .support-search-wrap input::placeholder {
    color: #6b6b6b;
  }

/* search results  */
.search-results {
  border: 1px solid #e0e0e0;
  border-top: none;
  background: #fff;
  max-height: 260px;
  overflow-y: auto;
}

.search-result-item {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid #f0f0f0;
  font-family: 'Xanh Mono', monospace;
  font-size: 12px;
  color: #111;
  text-decoration: none;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:active {
  background: #f5f5f5;
}

.search-result-category {
  font-size: 10px;
  color: #6b6b6b;
  margin-bottom: 2px;
}

.search-result-title {
  font-size: 13px;
  color: #111;
}

.search-no-result {
  padding: 12px 14px;
  font-family: 'Xanh Mono', monospace;
  font-size: 12px;
  color: #6b6b6b;
}


  /*  */
  .faq-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-height: 120px;
    padding: 12px 32px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    transition: background-color 0.15s;
  }

  .faq-item:hover {
    background-color: #f0f0f0;
  }

  .faq-item:active {
    background-color: #e8e8e8;
  }

  .faq-text {
    flex: 1;
  }
   
  .faq-subheading {
    font-family: 'Xanh Mono', monospace;
    font-size: 11px;
    color: #6b6b6b;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
  }
   
  .faq-heading {
    font-family: 'Xanh Mono', monospace;
    font-size: 14px;
    color: #111;
    letter-spacing: 0.02em;
    line-height: 1.4;
  }
   
  .faq-thumb {
    flex-shrink: 0;
    width: 90px;
    height: 120px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    position: relative;
  }
   
  .faq-thumb img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
  }



 /* =============================================
   FAQ LIST PAGE
   ============================================= */
 
.faq-list-content {
  padding: 32px 32px;
}
 
.breadcrumb {
  color: #000;
  font-family: "Xanh Mono";
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.breadcrumb a {
  color: #6b6b6b;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb a:active {
  opacity: 0.6;
}

.breadcrumb span {
  color: #000;
}
 
.faq-list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 32px;
  margin-left: -32px;
  margin-right: -32px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s;
}

.faq-list-item:last-child {
  margin-bottom: 0;
}

.faq-list-item:hover {
  background-color: #f0f0f0;
}

.faq-list-item:active {
  background-color: #e8e8e8;
}

.faq-list-text {
  flex: 1;
  padding-top: 4px;
}

.faq-list-sub {
  font-family: 'Xanh Mono', monospace;
  font-size: 14px;
  color: #6b6b6b;
  letter-spacing: 0;
  margin-bottom: 4px;
}

.faq-list-heading {
  font-family: 'Xanh Mono', monospace;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
  line-height: 1.4;
}

.faq-list-thumb {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background: transparent;
}
 
.faq-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}
 

/* =============================================
   NOTIFY US PAGE
   ============================================= */
 
   .notify-content {
    padding: 28px 32px 32px;
  }

  .contact-title {
    font-family: 'Xanh Mono', monospace;
    padding-bottom: 12px;
  }
   
  .notify-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #d0d0d0;
    border: 1.5px dashed #aaa;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    margin-bottom: 20px;
  }
   
  .notify-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
  }
   
  .notify-desc {
    font-size: 13px;
    color: #333;
    line-height: 1.7;
    margin-bottom: 8px;
  }
   
  .notify-sub {
    font-size: 12px;
    color: #6b6b6b;
    line-height: 1.6;
    margin-bottom: 28px;
  }
   
  .btn-notify {
    display: block;
    width: 100%;
    padding: 16px;
    background: #111;
    color: #fff;
    font-family: 'Xanh Mono', monospace;
    font-size: 14px;
    text-align: center;
    border-radius: 6px;
    letter-spacing: 0.03em;
  }
   
  .btn-notify:active {
    background: #333;
  }


/* ---------- error form ---------- */
.contact-form {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 24px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.input-group label {
  font-size: 0.8rem;
}

.input-group input, .input-group select, .input-group textarea {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 0%;
}

.submit-btn {
  margin-top: 8px;
}

.fixed-category {
  padding: 10px;
  background-color: #f8f9fa; 
  border: 1px solid #ccc;
  color: #333;
  font-size: 0.8rem;
}

/* ==============================================
   CONTACT FORM
   ============================================== */

.support-container {
  padding: 0 0 20px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input-group label {
  font-family: -apple-system, sans-serif;
  font-size: 13px;
  color: #111;
  font-weight: 500;
}

.input-group input, 
.input-group textarea,
.input-group select {
  border: 1px solid #e0e0e0;
  padding: 14px;
  border-radius: 2px;
  font-size: 13px;
  font-family: inherit;
  color: #111;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

.input-group input::placeholder,
.input-group textarea::placeholder {
  color: #6b6b6b;
}

.consent-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  flex-shrink: 0;
  border: none;
  border-radius: 3px;
  background: #e8e8e8;
  cursor: pointer;
  position: relative;
}

.consent-checkbox:checked {
  background: #0D0692;
}

.consent-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.submit-btn:disabled {
  background: #D1D0CF;
  color: #3D3D3D;
  border-color: #3D3D3D;
  cursor: not-allowed;
}

/* =============================================
   SUBMISSION POPUP
   ============================================= */

#submissionPopup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

#submissionPopup.visible {
  opacity: 1;
  pointer-events: auto;
}

#submissionPopup img {
  width: 90%;
  max-width: 400px;
  display: block;
}

/* =============================================
   FIELD ERROR
   ============================================= */

.field-error {
  display: none;
  color: #c62828;
  font-size: 11px;
  margin-top: 4px;
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

.field-error.visible {
  display: block;
}

.input-group input.error,
.input-group select.error,
.input-group textarea.error {
  border-color: #c62828;
}

/* =============================================
   BUTTON — 공통 (Open in Maps 제외)
   ============================================= */

.btn {
  display: block;
  width: 100%;
  padding: 15px 16px;
  background: #DFE8FF;
  color: #000000;
  border: 1px solid #000000;
  font-family: 'Xanh Mono', monospace;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn:hover {
  background: #6F7BBE;
  color: #ffffff;
  border-color: #0D0692;
}

.btn:active {
  background: #0D0692;
  color: #ffffff;
  border-color: #000000;
}

.btn:focus {
  outline: none;
  background: #DFE8FF;
  color: #000000;
  border-color: #000000;
}

.btn:focus:hover {
  background: #6F7BBE;
  color: #ffffff;
  border-color: #0D0692;
}

.btn:disabled,
.btn.disabled {
  background: #D1D0CF;
  color: #3D3D3D;
  border-color: #3D3D3D;
  cursor: not-allowed;
}

.maps-option + .maps-option {
  margin-top: 8px;
}
/* =============================================
   NUFACES — spin-the-wheel hero (home page)
   Design space: 1080 x 1920. Vendored from nufaces-wheel-main/nufaces/nufaces.css.
   ============================================= */

.nf-stage {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #fafafa;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  cursor: grab;
}
.nf-stage[data-dragging="true"] { cursor: grabbing; }
.nf-stage[data-fit="contain"],
.nf-stage[data-fit="cover"]   { height: 100dvh; }
.nf-stage[data-fit="width"]   { aspect-ratio: 1080 / 1920; height: auto; }
.nf-stage[data-scroll-lock="true"] { touch-action: none; }

.nf-scene {
  position: absolute;
  top: 0; left: 0;
  width: 1080px;
  height: 1920px;
  overflow: hidden;
  transform-origin: 0 0;
}

.nf-scene img { display: block; -webkit-user-drag: none; user-select: none; }
.nf-layer, .nf-wheel, .nf-hint { position: absolute; pointer-events: none; }

.nf-wheel {
  top: 312px;
  left: -91px;
  width: 1262px;
  height: 1262px;
  z-index: 1;
  will-change: transform;
  transform: rotate(0deg);
}
.nf-disc { width: 100%; height: 100%; }

.nf-slots { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.nf-slot {
  position: absolute;
  top: 50%; left: 50%;
  width: 248px;
  height: 370px;
  margin: -185px 0 0 -124px;
  transform: rotate(var(--nf-slot-angle, 0deg)) translateY(-367px);
}
.nf-face { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Solid-color placeholder, same footprint as .nf-cover but a hair behind it
   in z-index — paints instantly, before cover.webp has even started
   downloading, masking the bare wheel/faces the moment the DOM goes in
   instead of a flash of the uncovered wheel. It can't live as .nf-cover's
   own background-color: that would sit behind cover.webp's own pixels too,
   including its two transparent holes, permanently blocking the peephole
   even once the real image has loaded. nufaces.js removes this element
   once cover.webp actually loads. */
.nf-cover-placeholder { top: 258px; left: 0; width: 1080px; height: 1419px; z-index: 1.5; background-color: #4E47AF; }
.nf-cover  { top: 258px;  left: 0;   width: 1080px; height: 1419px; z-index: 2; }
.nf-logo   { top: 1031px; left: 433px; width: 213px; height: 73px;  z-index: 3; }
.nf-screw  { top: 945px;  left: 518px; width: 46px;  height: 46px;  z-index: 4; }

.nf-hint {
  top: 1310px; left: 0;
  width: 1080px;
  margin: 0;
  z-index: 3;
  text-align: center;
  font: 500 26px/1.2 var(--nf-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
  color: #fff;
}

.nf-peephole {
  position: absolute;
  top: 461px; left: 428px;
  width: 225px; height: 299px;
  z-index: 5;
  pointer-events: auto;
  border-radius: 2px;
  display: block;
}
.nf-peephole:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.nf-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .nf-wheel { will-change: auto; }
}

/* -- site integration: the wheel is the home page's full-bleed background —
   edge-to-edge, no side padding, extending up behind the (transparent)
   header. It fills .hero-box instead of the standalone component's own
   100dvh, and .hero-box/.home-content are stretched full-bleed below by the
   body.home-hero rules. */
.home-content .hero-box .nf-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The scene only draws the artwork down to design height (1920px at the
     current scale) — below that, .nf-scene shows nothing and the stage's own
     flat #fafafa (from the vendored CSS) was showing instead. This tiled
     background-image is the paper's ONLY renderer now (the foreground nf-bg
     layer was removed) — nufaces.js keeps its size/position exactly matched
     to the scene's own transform on every layout(), so there is one single
     paper rendering everywhere instead of two that can drift out of sync and
     show a seam. Values below are just the pre-JS fallback. */
  background-image: url('../images/nufaces/bg.webp');
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
}

/* Header and bottom nav stay their normal solid white. common.js grows
   them a little (still solid white, just taller) so they cover most of the
   paper margin that centering the wheel leaves above/below the purple
   cover, down to a small deliberate peek — and resets .content's inset to
   match, since these values are just the pre-JS fallback (full-bleed). Nav
   needs its content pinned to the bottom instead of centered, since the
   growth has to be invisible padding above the links, not a shift of them. */
body.home-hero .content {
  top: 0;
  bottom: 0;
}

body.home-hero .bottom-nav {
  align-items: flex-end;
}

body.home-hero .home-content {
  padding: 0;
}