/*
 * 대동여수음식지도 상징 거북선.
 * 기존 가게·주문·위치·공유 UI와 분리된 장식 레이어이며 모든 터치를 통과시킨다.
 */
#navalLane[hidden]{
  display:none!important;
}

.community-intro[hidden]{
  display:none!important;
}

/*
 * 팝업이 열린 동안에만 홈 배경 스택을 고정 하단 메뉴보다 앞으로 올린다.
 * 팝업이 닫히면 이 규칙은 즉시 해제되어 기존 메뉴 순서로 돌아간다.
 */
.yeosu-night-shell:has(.community-intro:not([hidden])){
  z-index:60;
}

/*
 * 첫 진입 메시지는 읽기 쉬운 독립 팝업으로 표시한다.
 * 시작 광고가 닫힌 뒤에만 열리며, X 또는 자동 닫힘 뒤 거북선이 출항한다.
 */
.community-intro{
  position:fixed;
  inset:0;
  z-index:90;
  display:grid;
  place-items:center;
  padding:16px;
  background:rgba(2,17,30,.72);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  pointer-events:auto;
  overflow:auto;
  overscroll-behavior:contain;
}

.community-intro-card{
  position:relative;
  width:min(590px,100%);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  padding:clamp(27px,5vw,42px) clamp(20px,5vw,42px) 24px;
  border:2px solid rgba(255,226,82,.85);
  border-radius:26px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(247,252,249,.98));
  box-shadow:0 24px 64px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.55) inset;
  color:#102b3a;
  text-align:center;
  transform:translateY(12px) scale(.97);
  opacity:0;
}

.community-intro.is-visible{
  animation:community-popup-backdrop-in 220ms ease-out both;
}

.community-intro.is-visible .community-intro-card{
  animation:community-popup-card-in 300ms cubic-bezier(.2,.75,.25,1) both;
}

.community-intro.is-closing{
  animation:community-popup-out 240ms ease-in both;
}

.community-intro-close{
  position:absolute;
  top:10px;
  right:10px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:#f1f4f5;
  color:#101820;
  font-size:34px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.community-intro-close:focus-visible{
  outline:3px solid #ffcf33;
  outline-offset:2px;
}

.community-intro-kicker{
  display:inline-block;
  margin:0 0 10px;
  padding:6px 12px;
  border-radius:999px;
  background:#e6f8ec;
  color:#08723c;
  font-size:13px;
  font-weight:900;
}

.community-intro-card h2{
  margin:0;
  color:#0a3552;
  font-size:clamp(18px,4vw,23px);
  font-weight:850;
  line-height:1.25;
  letter-spacing:-.035em;
}

.community-intro-lead{
  margin:3px 0 15px;
  color:#526875;
  font-size:clamp(16px,3.5vw,20px);
  font-weight:750;
  line-height:1.32;
  letter-spacing:-.035em;
}

.community-intro-guide{
  display:grid;
  gap:11px;
  margin:0 0 18px;
  padding:16px 13px 14px;
  border:2px solid #9fd8b4;
  border-radius:18px;
  background:linear-gradient(145deg,#f4fff7,#e9faef);
  color:#075f36;
  line-height:1.4;
  letter-spacing:-.025em;
  box-shadow:0 8px 22px rgba(8,115,62,.1);
}

.community-intro-action{
  color:#0a3552;
  font-size:clamp(20px,4.8vw,27px);
  font-weight:950;
  line-height:1.3;
  letter-spacing:-.04em;
}

.community-intro-methods{
  display:block;
  padding:10px 8px;
  border-radius:13px;
  background:#fff;
  color:#056135;
  font-size:clamp(21px,5.2vw,29px);
  font-weight:950;
  line-height:1.42;
  letter-spacing:-.045em;
  box-shadow:0 3px 12px rgba(6,97,53,.09);
}

.community-intro-outcome{
  margin:0;
  color:#526875;
  font-size:clamp(14px,3.3vw,18px);
  font-weight:700;
  line-height:1.45;
  letter-spacing:-.025em;
}

.community-intro-heart{
  margin:0;
  color:#08733e;
  font-size:clamp(19px,4.5vw,25px);
  font-weight:800;
  line-height:1.4;
  letter-spacing:-.03em;
}

.community-intro-heart strong{
  color:#05592f;
  font-size:1.06em;
}

.community-intro-auto{
  margin:18px 0 8px;
  color:#687982;
  font-size:12px;
  font-weight:700;
}

.community-intro-progress{
  height:5px;
  overflow:hidden;
  border-radius:999px;
  background:#dce5e7;
}

.community-intro-progress span{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#0b8b4a,#f2c63d);
  transform-origin:left center;
}

.community-intro.is-visible .community-intro-progress span{
  animation:community-popup-progress 15s linear both;
}

@keyframes community-popup-backdrop-in{
  from{background-color:rgba(2,17,30,0)}
  to{background-color:rgba(2,17,30,.72)}
}

@keyframes community-popup-card-in{
  from{opacity:0;transform:translateY(12px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes community-popup-out{
  from{opacity:1}
  to{opacity:0}
}

@keyframes community-popup-progress{
  from{transform:scaleX(1)}
  to{transform:scaleX(0)}
}

.brand-return-slogan{
  position:relative;
  z-index:2;
  margin:-7px 12px 3px;
  color:#0a3552;
  font-size:12px;
  font-weight:900;
  line-height:1.35;
  letter-spacing:-.02em;
  text-align:center;
  text-shadow:0 1px 4px rgba(255,255,255,.98);
}

.order-section .community-order-message h2{
  color:#fff;
  font-weight:950;
  text-shadow:0 2px 3px rgba(4,29,48,.98),0 0 10px rgba(4,29,48,.62);
}

.order-section .community-order-message p{
  display:block;
  margin-top:8px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#ffe95c;
  font-size:clamp(15px,4vw,18px);
  font-weight:950;
  line-height:1.45;
  letter-spacing:-.025em;
  text-shadow:0 2px 3px rgba(4,29,48,.98);
}

/*
 * 거북선 때문에 주문 버튼이나 배너가 밀리지 않도록
 * 최초 열린 바다 보완 때의 간격으로 되돌린다.
 */
.turtle-ship-passage{
  position:relative;
  height:30px;
  pointer-events:none;
}

/*
 * 선체는 여수 배경 위, 주문 버튼·메인 배너 아래에서만 합성된다.
 * 주문 버튼은 원래 위치를 유지하고 30% 유리판으로 선체를 비춘다.
 */
.turtle-ship-hero-scene{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
}

.turtle-ship-hero-voyage{
  position:absolute;
  left:50%;
  top:var(--turtle-passage-center,68%);
  width:min(150vw,1680px);
  aspect-ratio:2/1;
  background:url('assets/yeosu-ux/turtle-ship-northwest-v4.webp') center/contain no-repeat;
  opacity:0;
  transform:translate3d(8%,-35%,0) scale(2.05);
  transform-origin:20% 30%;
  backface-visibility:hidden;
  will-change:transform,opacity;
}

.turtle-ship-hero-voyage picture,
.turtle-ship-hero-voyage img{
  display:none;
  width:100%;
  height:100%;
}

.turtle-ship-hero-scene.is-sailing .turtle-ship-hero-voyage{
  animation:turtle-ship-hero-voyage 16.8s cubic-bezier(.22,.55,.2,1) both;
}

.turtle-ship-hero-scene.is-paused .turtle-ship-hero-voyage{
  animation-play-state:paused!important;
}

.turtle-ship-hero-scene.is-finished .turtle-ship-hero-voyage{
  will-change:auto;
}

@keyframes turtle-ship-hero-voyage{
  0%{
    opacity:0;
    transform:translate3d(8%,-35%,0) scale(2.05);
  }
  6%{
    opacity:1;
    transform:translate3d(3%,-38%,0) scale(1.95);
  }
  40%{
    opacity:1;
    transform:translate3d(-12%,-55%,0) scale(1.45);
  }
  70%{
    opacity:1;
    transform:translate3d(-25%,-72%,0) scale(1);
  }
  94%{
    opacity:.96;
    transform:translate3d(-34%,-84%,0) scale(.72);
  }
  100%{
    opacity:0;
    transform:translate3d(-38%,-89%,0) scale(.62);
  }
}

@media(min-width:768px){
  .turtle-ship-hero-voyage{
    left:50%;
    width:min(120vw,1880px);
  }
}

@media(max-width:767px){
  .community-intro{
    padding:10px;
  }

  .community-intro-card{
    max-height:calc(100dvh - 20px);
    padding:22px 15px 14px;
    border-radius:20px;
  }

  .community-intro-close{
    top:7px;
    right:7px;
    width:38px;
    height:38px;
    font-size:29px;
  }

  .community-intro-kicker{
    margin-bottom:6px;
    padding:5px 10px;
    font-size:11px;
  }

  .community-intro-card h2{
    padding:0 30px;
    font-size:clamp(16px,4vw,19px);
    line-height:1.22;
  }

  .community-intro-lead{
    margin:2px 0 10px;
    font-size:clamp(14px,3.6vw,17px);
    line-height:1.28;
  }

  .community-intro-guide{
    gap:8px;
    margin-bottom:11px;
    padding:11px 9px 9px;
    border-radius:15px;
  }

  .community-intro-action{
    font-size:clamp(18px,4.8vw,22px);
    line-height:1.28;
  }

  .community-intro-methods{
    padding:8px 6px;
    border-radius:11px;
    font-size:clamp(19px,5.2vw,24px);
    line-height:1.36;
  }

  .community-intro-outcome{
    font-size:clamp(13px,3.3vw,16px);
    line-height:1.35;
  }

  .community-intro-heart{
    font-size:clamp(16px,4vw,20px);
    line-height:1.3;
  }

  .community-intro-auto{
    margin:9px 0 5px;
    font-size:11px;
  }

  .brand-return-slogan{
    margin-top:-6px;
    font-size:11px;
  }

  .turtle-ship-passage{
    height:28px;
  }

  .turtle-ship-hero-voyage{
    left:50%;
    width:180vw;
    background-image:url('assets/yeosu-ux/turtle-ship-northwest-mobile-v4.webp');
  }
}

@media(max-width:767px) and (max-height:720px){
  .community-intro-card{
    padding:17px 13px 11px;
    border-radius:18px;
  }

  .community-intro-close{
    top:5px;
    right:5px;
    width:34px;
    height:34px;
    font-size:26px;
  }

  .community-intro-kicker{
    margin-bottom:4px;
    padding:4px 9px;
    font-size:10px;
  }

  .community-intro-card h2{
    font-size:clamp(15px,3.8vw,18px);
  }

  .community-intro-lead{
    margin:2px 0 7px;
    font-size:clamp(13px,3.4vw,16px);
  }

  .community-intro-guide{
    margin-bottom:8px;
    padding:8px 6px 7px;
    gap:6px;
  }

  .community-intro-action{
    font-size:clamp(16px,4.4vw,20px);
  }

  .community-intro-methods{
    padding:6px 5px;
    font-size:clamp(17px,4.8vw,22px);
  }

  .community-intro-outcome{
    font-size:clamp(12px,3.1vw,15px);
    line-height:1.3;
  }

  .community-intro-heart{
    font-size:clamp(15px,3.7vw,18px);
    line-height:1.25;
  }

  .community-intro-auto{
    margin:6px 0 4px;
    font-size:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  .community-intro.is-visible,
  .community-intro.is-visible .community-intro-card,
  .community-intro.is-closing{
    animation:none!important;
  }

  .community-intro.is-visible .community-intro-card{
    opacity:1;
    transform:none;
  }

  .community-intro.is-visible .community-intro-progress span{
    animation:none!important;
  }

  .turtle-ship-hero-scene.is-sailing .turtle-ship-hero-voyage{
    animation:turtle-ship-hero-still 3.4s ease-out both;
  }
}

@keyframes turtle-ship-hero-still{
  0%,100%{
    opacity:0;
    transform:translate3d(-18%,-62%,0) scale(1.15);
  }
  18%,72%{
    opacity:.72;
    transform:translate3d(-18%,-62%,0) scale(1.15);
  }
}