/* =====================================================================
   siteproject 공통 CSS (레이아웃에 1회만 로드)
   - 기존 관리자 HTML 헤더/푸터에 중복 삽입되던 .xet-section / .apply-toast 스타일을
     원래 적용 순서(헤더 → 푸터) 그대로 합쳐 옮김
   ===================================================================== */

/* 스크롤 등장 애니메이션 */
.xet-section{
  opacity:0;
  transform:translateY(50px);
  transition:opacity .9s ease, transform .9s ease;
  will-change:opacity, transform;
}
.xet-section.active{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .xet-section{ opacity:1; transform:none; transition:none; }
}

/* ---------- 방문예약 Toast (기존 헤더 버전) ---------- */
.apply-toast{
    position:fixed;
    left:18px;
    bottom:145px;
    z-index:10000;
    display:flex;
    align-items:center;
    gap:10px;
    width:max-content;
    max-width:430px;
    padding:12px 18px;
    background:rgba(8,26,49,.92);
    color:#fff;
    border:1px solid rgba(245,208,111,.35);
    border-radius:999px;
    backdrop-filter:blur(12px);
    box-shadow:
      0 12px 28px rgba(0,0,0,.35),
      0 0 18px rgba(245,208,111,.18);
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:.35s ease;
    pointer-events:none;
}
.apply-toast.is-show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.apply-toast .dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#39d353;
    box-shadow:0 0 10px #39d353;
    flex-shrink:0;
    animation:toastBlink 1.2s infinite;
}
@keyframes toastBlink{
    50%{
        transform:scale(1.35);
    }
}
.apply-toast .msg{
    display:flex;
    align-items:center;
    white-space:nowrap;
    font-size:14px;
    font-weight:700;
}
.apply-toast strong,
.apply-toast .highlight,
.apply-toast .time{
    color:#f5d06f;
    font-weight:800;
}
@media(max-width:480px){
.apply-toast{
    left:10px;
    right:10px;
    bottom:95px;
    width:auto;
    max-width:calc(100vw - 20px);
    justify-content:center;
}
.apply-toast .msg{
    font-size:12px;
}
}

/* ---------- 방문예약 Toast (기존 푸터 버전: 우측 하단, 위 규칙을 덮어씀) ---------- */
.apply-toast{
    position:fixed;
    right:18px;
    left:auto;
    bottom:145px;
    z-index:10000;
    display:flex;
    align-items:center;
    gap:10px;
    width:max-content;
    max-width:430px;
    padding:12px 18px;
    background:rgba(8,26,49,.92);
    color:#fff;
    border:1px solid rgba(245,208,111,.35);
    border-radius:999px;
    backdrop-filter:blur(12px);
    box-shadow:
        0 12px 28px rgba(0,0,0,.35),
        0 0 18px rgba(245,208,111,.18);
    opacity:0;
    visibility:hidden;
    transform:translateX(30px);
    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease,
        box-shadow .25s ease;
    pointer-events:auto;
    cursor:pointer;
}
.apply-toast.is-show{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
}
.apply-toast:hover{
    transform:translateY(-2px);
    box-shadow:
        0 18px 36px rgba(0,0,0,.45),
        0 0 24px rgba(245,208,111,.28);
}
@media(max-width:480px){
    .apply-toast{
        right:10px;
        left:auto;
        bottom:95px;
        width:max-content;
        max-width:calc(100vw - 20px);
        transform:translateX(20px);
    }
    .apply-toast.is-show{
        transform:translateX(0);
    }
    .apply-toast .msg{
        font-size:12px;
    }
}

/* ---------- 방문예약 폼 ---------- */
.sp-form-wrap{max-width:640px;margin:24px auto;padding:0 4px;scroll-margin-top:90px;font-family:'Noto Sans KR',system-ui,-apple-system,sans-serif;}
.sp-form{background:#fff;border:1px solid #e3e7ef;border-radius:16px;padding:28px 24px;box-shadow:0 10px 30px rgba(8,26,49,.08);color:#1b2433;text-align:left;}
.sp-form-title{margin:0 0 18px;font-size:22px;font-weight:800;color:#0a2342;text-align:center;}
.sp-field{margin:0 0 14px;}
.sp-label{display:block;margin:0 0 6px;font-size:14px;font-weight:700;color:#29344a;}
.sp-req{color:#d33;font-style:normal;}
.sp-form input[type=text],.sp-form input[type=tel],.sp-form input[type=date],.sp-form input[type=email],.sp-form input[type=number],.sp-form select,.sp-form textarea{
  display:block;width:100%;box-sizing:border-box;height:46px;padding:0 12px;border:1px solid #cfd6e3;border-radius:10px;background:#fff;font-size:16px;color:#111;
}
.sp-form textarea{height:auto;min-height:90px;padding:10px 12px;resize:vertical;}
.sp-form input:focus,.sp-form select:focus,.sp-form textarea:focus{outline:none;border-color:#0b5394;box-shadow:0 0 0 3px rgba(11,83,148,.15);}
.sp-radios label{display:inline-flex;align-items:center;gap:6px;margin:0 14px 6px 0;font-size:15px;}
.sp-consent{margin:18px 0 16px;padding:12px 14px;background:#f6f8fb;border-radius:10px;font-size:13px;}
.sp-consent details summary{cursor:pointer;color:#0b5394;font-weight:700;margin-bottom:6px;}
.sp-consent-text{max-height:180px;overflow:auto;margin:6px 0 10px;color:#555;line-height:1.6;}
.sp-check{display:flex;align-items:flex-start;gap:8px;font-size:14px;font-weight:600;cursor:pointer;}
.sp-check input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;}
.sp-submit{display:block;width:100%;height:54px;border:0;border-radius:12px;background:linear-gradient(135deg,#f5d06f,#d4af37);color:#0a1a2f;font-size:18px;font-weight:900;cursor:pointer;}
.sp-submit[disabled]{opacity:.6;cursor:wait;}
.sp-form-msg{margin:12px 0 0;font-size:15px;font-weight:700;text-align:center;min-height:1.4em;}
.sp-form-msg.is-ok{color:#1a7f37;}
.sp-form-msg.is-err{color:#c62828;}
.sp-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden;}
@media (max-width:480px){
  .sp-form{padding:22px 16px;border-radius:12px;}
  .sp-form-title{font-size:19px;}
}

/* ---------- 하단 고정 CTA / 회전 배지 / 우측 스크롤 라인 (기존 푸터 HTML 에서 이동, 현장 설정으로 문구·전화번호 관리) ---------- */
:root{
  --navy:#0a2342;
  --navy-2:#081a31;
  --gold-1:#fff8dc;
  --gold-2:#f5d06f;
  --gold-3:#d4af37;
  --gold-4:#b08d2f;
  --shadow:0 10px 26px rgba(0,0,0,.28);
}
/* ====== 회전 배지 (조금 더 투명하게) ====== */
.km-badge-wrapper{
  position:fixed;
  right:28px;
  bottom:118px;
  width:118px;
  height:118px;
  z-index:9999;
  cursor:pointer;
  user-select:none;
  opacity:.82;
}
.km-badge-rotating{
  position:absolute; inset:0;
  width:100%; height:100%;
  animation:kmRotateBadge 14s linear infinite;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.25));
  opacity:.95;
}
.km-badge-icon{
  position:absolute;
  top:50%; left:50%;
  width:72%; height:72%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 60% 35%, rgba(255,255,255,.20), rgba(0,0,0,.22) 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08));
  box-shadow:
    inset 0 0 14px rgba(255,255,255,.18),
    0 10px 18px rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
}
.km-badge-shine{
  font-family:'Playfair Display', serif;
  font-weight:700;
  font-size:14px;
  line-height:1.05;
  text-align:center;
  letter-spacing:.06em;
  text-transform:uppercase;
  background-image:
    linear-gradient(45deg, var(--gold-4) 0%, var(--gold-3) 18%, var(--gold-2) 35%, var(--gold-1) 50%, var(--gold-3) 65%, var(--gold-4) 82%, var(--gold-2) 100%),
    linear-gradient(75deg, rgba(255,255,255,0) 45%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 55%);
  background-size:100% 100%, 220% 100%;
  background-position:center, -220% 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:kmShineMove 3.4s ease-in-out infinite;
  text-shadow:0 1px 1px rgba(0,0,0,.45);
}
@keyframes kmShineMove{ to{ background-position:center, 220% 0; } }
@keyframes kmRotateBadge{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .km-badge-rotating{ animation:none; }
  .km-badge-shine{ animation:none; }
}

/* ====== 하단 고정 CTA 바 (기본값) ====== */
.km-sticky-cta{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:9999;
  display:flex;
  gap:10px;
  padding:10px;
  border-radius:16px;
  background:rgba(8,26,49,.70);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
  font-family:'Noto Sans KR', system-ui, -apple-system, sans-serif;
}
.km-cta-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:52px;
  padding:0 18px;
  border-radius:14px;
  text-decoration:none;
  font-weight:900;
  font-size:15px;
  letter-spacing:-.2px;
  white-space:nowrap;
  transition:transform .18s ease, filter .18s ease, background .22s ease;
  overflow:hidden;
}
.km-cta-btn:active{ transform:scale(.98); }
.km-cta-btn svg{ width:18px; height:18px; flex:0 0 auto; }

.km-cta-btn .km-sub{
  display:inline;
  font-size:inherit;
  font-weight:inherit;
  opacity:1;
  letter-spacing:inherit;
  margin-left:6px;
}

.km-cta-btn.km-tel{
  color:var(--gold-2);
  background:linear-gradient(180deg, rgba(10,35,66,.92), rgba(8,26,49,.92));
  border:1px solid rgba(245,208,111,.55);
}
.km-cta-btn.km-reserve{
  color:#0a1a2f;
  background:linear-gradient(135deg,var(--gold-2),var(--gold-3));
  border:1px solid rgba(8,26,49,.75);
}
.km-cta-btn:hover{ filter:brightness(1.03); }

/* ====== PC(데스크탑)에서만 버튼 1.5배 확대 ====== */
@media (min-width:1025px){
  .km-sticky-cta{
    padding:14px;
    border-radius:18px;
  }
  .km-cta-btn{
    height:78px;           /* 52px → 78px */
    padding:0 27px;        /* 18px → 27px */
    font-size:18px;        /* 15px → 18px */
    border-radius:18px;
  }
  .km-cta-btn svg{
    width:22px;
    height:22px;
  }
}

/* 강한 펄스 글로우 */
@keyframes kmPulseGlow{
  0%{
    box-shadow:
      0 10px 26px rgba(0,0,0,.30),
      0 0 0 0 rgba(245,208,111,.65),
      0 0 18px 0 rgba(245,208,111,.85);
    transform:translateY(0);
  }
  45%{
    box-shadow:
      0 12px 30px rgba(0,0,0,.34),
      0 0 0 14px rgba(245,208,111,0),
      0 0 26px 0 rgba(245,208,111,.95);
    transform:translateY(-1px);
  }
  100%{
    box-shadow:
      0 10px 26px rgba(0,0,0,.28),
      0 0 0 0 rgba(245,208,111,0),
      0 0 14px 0 rgba(245,208,111,0);
    transform:translateY(0);
  }
}
.km-cta-btn.km-pulse{
  animation:kmPulseGlow 1.9s ease-out infinite;
}

/* ====== 우측 스크롤 라인 (두꺼운 검은 선 + 노란 불빛 + SCROOL 세로 텍스트) ====== */
.km-scroll-line{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:220px;
  z-index:9998;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
.km-scroll-line .label{
  font-family:'Noto Sans KR', system-ui, -apple-system, sans-serif;
  font-size:11px;
  font-weight:800;
  color:#000000;
  margin-bottom:6px;
  letter-spacing:.12em;
  writing-mode:vertical-rl;
  text-orientation:upright;
}
.km-scroll-line .track{
  position:relative;
  width:4px; /* 굵은 검은 선 */
  height:100%;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.6), rgba(0,0,0,.95));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 10px 20px rgba(0,0,0,.25);
  overflow:hidden;
}
.km-scroll-line .track::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:130%;
  height:64px;
  border-radius:999px;
  background:linear-gradient(
    180deg,
    rgba(255,240,180,0) 0%,
    rgba(255,230,120,.98) 50%,
    rgba(255,210,80,0) 100%
  );
  filter:
    drop-shadow(0 14px 20px rgba(255,220,120,.38))
    drop-shadow(0 6px 10px rgba(0,0,0,.4));
  animation:kmFlowDownGold 1.55s ease-in-out infinite;
  opacity:.96;
}
@keyframes kmFlowDownGold{
  0%   { top:-22%; opacity:0; }
  15%  { opacity:1; }
  70%  { opacity:1; }
  100% { top:110%; opacity:0; }
}

/* ====== 모바일 (선 높이 50vh, 오른쪽 벽에 더 붙이기 + 버튼 기본 사이즈 유지) ====== */
@media (max-width:480px){
  .km-sticky-cta{
    left:0; right:0; bottom:0;
    border-radius:0;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    gap:10px;
    justify-content:space-between;
    background:rgba(8,26,49,.82);
    border-left:0; border-right:0;
  }
  .km-cta-btn{
    flex:1 1 50%;
    height:54px;
    border-radius:14px;
    padding:0 12px;
    justify-content:center;
    text-align:center;
    font-size:15px;
  }

  .km-badge-wrapper{
    right:12px;
    bottom:92px;
    width:96px;
    height:96px;
  }

  .km-scroll-line{
    right:4px;              /* 벽에 더 붙임 */
    top:50%;
    bottom:auto;
    transform:translateY(-50%);
    height:50vh;            /* 절반 높이 */
    opacity:.96;
  }
  .km-scroll-line .track{
    height:100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .km-cta-btn.km-pulse{ animation:none; }
  .km-scroll-line .track::after{ animation:none; top:42%; opacity:.9; }
}

/* ---------- 방문예약 폼 안내문 / 날짜칸 ---------- */
.sp-form-notice{margin:-6px 0 18px;padding:12px 14px;background:#f6f8fb;border-radius:10px;font-size:13px;line-height:1.75;color:#444;text-align:center;word-break:keep-all;}
.sp-form-notice-bottom{margin:14px 0 0;}
.sp-form-notice p{margin:0;}
.sp-form input[type=date]{cursor:pointer;}
@media (max-width:480px){.sp-form-notice{font-size:12.5px;text-align:left;}}