/* 공개 메인(수강신청 랜딩) — 풀스크린 배경영상 + 하단 수강신청 오버레이.
   자립형. 공용 public.css 및 타 공개페이지(reserve·my)와 분리. 지점 카드는 고정폭 슬라이더(가로 확장 안 함). */
:root{
  color-scheme:light;
  --mv-blue1:#2472ff; --mv-blue2:#0d55e0; --mv-blue3:#0a3aa8;
  --mv-ink:#12243d; --mv-muted:#5c6b82; --mv-line:#e6edf7;
  --mv-ok:#12814a; --mv-ok-bg:#e4f4ea; --mv-wait:#8a6a17; --mv-wait-bg:#f9f0d6;
  --mv-kr:'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
  --mv-lat:'Inter',var(--mv-kr); --mv-mono:'JetBrains Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{word-break:keep-all;overflow-wrap:break-word;background:#0a1526;color:#fff;font-family:var(--mv-lat);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:6px}

/* 무대(풀스크린) */
.mv-stage{position:relative;height:100vh;height:100dvh;min-height:600px;overflow:hidden;
  background:linear-gradient(125deg,#0a2a72,#123f9e 50%,#1f6fe0)}
.mv-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.mv-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,14,32,.5),rgba(6,14,32,.32) 50%,rgba(6,14,32,.66))}

/* 투명 헤더 */
.mv-nav{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:24px;padding:20px clamp(18px,4vw,44px)}
.mv-brand{display:flex;align-items:center;gap:2px;font-family:var(--mv-kr);font-weight:900;font-size:19px;letter-spacing:-.02em;color:#fff}
.mv-brand b{color:#7db4ff;font-weight:900}
.mv-navr{margin-left:auto;font-family:var(--mv-kr);font-size:13px;color:rgba(255,255,255,.85)}

/* 상단 히어로 카피 */
.mv-hero{position:absolute;left:clamp(18px,4vw,48px);top:clamp(94px,17vh,160px);z-index:4;max-width:560px}
.mv-hero .eye{font-family:var(--mv-lat);font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#bcd6ff;margin-bottom:14px}
.mv-hero h1{font-family:var(--mv-kr);font-weight:900;font-size:clamp(30px,4.6vw,52px);line-height:1.16;letter-spacing:-.02em;text-shadow:0 4px 30px rgba(0,10,40,.5)}
.mv-hero p{font-family:var(--mv-kr);font-weight:500;font-size:clamp(14px,1.5vw,17px);color:#dce7f5;margin-top:16px;max-width:40ch;text-shadow:0 2px 14px rgba(0,10,40,.4)}

/* 수강신청 오버레이 — 시안2 하단 프로스티드 시트 */
.mv-enroll{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:center;padding:0 clamp(18px,4vw,44px)}
/* 시트: 반투명 유리 패널(상단 라운드). 폭은 콘텐츠에 맞춤(지점 적으면 좁게 가운데, 많으면 넓어짐) */
.mv-ewrap{width:fit-content;max-width:100%;margin:0;
  background:rgba(18,30,52,.55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.16);border-bottom:0;border-radius:24px 24px 0 0;
  padding:22px 26px 26px;box-shadow:0 -20px 50px -20px rgba(0,0,0,.5)}
.mv-eyebrow{display:block;font-family:var(--mv-kr);font-size:12px;font-weight:800;color:#bcd6ff;letter-spacing:.03em;margin:0 0 12px}
.mv-row{display:flex;gap:16px;align-items:stretch}

/* 파란 수강신청 카드(고정폭) */
.mv-card{flex:0 0 266px;background:linear-gradient(160deg,#2f7bff,#0d55e0 72%,#0a3aa8);border-radius:20px;color:#fff;
  padding:24px 22px;display:flex;flex-direction:column;box-shadow:0 22px 46px -18px rgba(0,0,0,.55)}
.mv-card .mv-today{font-family:var(--mv-mono);font-weight:700;font-size:12.5px;letter-spacing:.03em;color:#dbe8ff;text-align:center}
.mv-card .mv-title{font-family:var(--mv-kr);font-weight:900;font-size:34px;letter-spacing:-.02em;text-align:center;margin:9px 0 4px}
.mv-card .mv-sub{font-family:var(--mv-kr);font-weight:500;font-size:13px;color:#d6e4ff;text-align:center}
.mv-card .mv-chip{margin-top:auto;align-self:center;font-family:var(--mv-kr);font-weight:700;font-size:12px;
  color:#eaf2ff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);border-radius:20px;padding:7px 15px}

/* 지점 선택(고정폭 카드 슬라이더 — 가로 확장 안 함) */
.mv-centers{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;gap:12px}
.mv-centers-hd{display:flex;align-items:center;gap:10px}
.mv-centers-hd h2{font-family:var(--mv-kr);font-weight:900;font-size:18px;color:#fff;text-shadow:0 2px 12px rgba(0,10,40,.5)}
.mv-centers-hd .mv-cnt{font-family:var(--mv-kr);font-size:12.5px;color:rgba(255,255,255,.82)}
.mv-arrows{margin-left:auto;display:flex;gap:7px}
.mv-arrows button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.2);
  color:#fff;display:grid;place-items:center;transition:.15s}
.mv-arrows button:hover{background:rgba(0,0,0,.4)}
.mv-arrows button:disabled{opacity:.35;cursor:default}
.mv-trackwrap{flex:1;min-width:0;display:flex}
.mv-track{flex:1;min-width:0;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.mv-track::-webkit-scrollbar{display:none}

.mv-cc{flex:0 0 250px;scroll-snap-align:start;background:#fff;border:2px solid transparent;border-radius:16px;
  padding:17px;display:flex;flex-direction:column;position:relative;overflow:hidden;color:var(--mv-ink);
  transition:border-color .16s ease, background-color .16s ease}
/* 움직임 대신 테두리와 바탕만 바꾼다. 카드가 줄지어 있어 들썩이면 눈이 피로하다 */
a.mv-cc:hover{border-color:var(--mv-blue1);background:#f5f8ff}
a.mv-cc:hover .mv-arw{background:var(--mv-blue1)}
a.mv-cc:focus-visible{outline:none;border-color:var(--mv-blue1);background:#f5f8ff;
  box-shadow:0 0 0 3px rgba(36,114,255,.28)}
.mv-cc .mv-accent{display:none}
.mv-cc-body{flex:1;min-width:0}
.mv-cc .mv-nm{font-family:var(--mv-kr);font-weight:800;font-size:16.5px;letter-spacing:-.02em}
.mv-cc .mv-addr{font-family:var(--mv-kr);font-size:12.5px;color:#42506a;margin-top:6px}
.mv-cc .mv-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:13px;font-family:var(--mv-kr);font-size:12.5px;color:#5c6b82}
.mv-cc .mv-meta b{font-weight:800;color:var(--mv-blue2)}
.mv-cc .mv-meta b.ok{color:var(--mv-ok)}
.mv-arw{align-self:flex-end;margin-top:14px;flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  background:var(--mv-blue2);color:#fff;display:grid;place-items:center;transition:background-color .16s ease}
.mv-arw svg{width:15px;height:15px}
.mv-cc.off{opacity:.82}
.mv-cc.off .mv-arw{background:#9aa6b8}
.mv-state{flex:1;min-height:120px;display:flex;align-items:center;justify-content:center;font-family:var(--mv-kr);font-size:13.5px;color:rgba(255,255,255,.85)}

@media (prefers-reduced-motion:reduce){.mv-bg{display:none}}

/* ── 모바일(≤820px): 컴팩트 히어로 밴드 + 지점 세로 타일 ── */
@media(max-width:820px){
  html,body{height:auto;overflow-x:hidden;overflow-y:auto}
  body{background:#f4f8fc;color:var(--mv-ink)}

  .mv-stage{height:auto;min-height:0;overflow:visible;padding-top:220px;
    background:linear-gradient(#0a2a56,#0b2f60) top/100% 220px no-repeat,#f4f8fc}
  .mv-bg{bottom:auto;height:220px}
  .mv-scrim{bottom:auto;height:220px;
    background:linear-gradient(180deg,rgba(8,26,58,.24),rgba(8,26,58,.34) 46%,rgba(8,26,58,.72))}

  .mv-nav{padding:3px 18px;gap:12px}
  .mv-brand{min-height:44px}
  .mv-brand{font-size:16px}
  .mv-navr{display:none}

  .mv-hero{display:block;position:absolute;left:20px;right:20px;top:118px;max-width:none}
  .mv-hero .eye{font-size:12px;letter-spacing:.2em;margin-bottom:7px;color:#c3ddff}
  .mv-hero h1{font-size:23px;line-height:1.24;color:#fff}
  .mv-hero p{display:none}

  .mv-enroll{position:static;transform:none;left:auto;right:auto;bottom:auto;top:auto;
    display:block;max-width:none;width:100%;padding:18px 16px 30px}
  .mv-ewrap{width:auto;max-width:none;margin:0;background:none;border:0;border-radius:0;padding:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .mv-eyebrow{color:var(--mv-blue2);margin:0 2px 11px;font-size:12.5px}
  .mv-row{flex-direction:column;gap:0}
  .mv-card{display:none}
  .mv-centers{gap:12px}
  .mv-centers-hd{margin:0 2px}
  .mv-centers-hd h2{color:var(--mv-ink);text-shadow:none;font-size:17px}
  .mv-centers-hd .mv-cnt{color:var(--mv-muted)}
  .mv-arrows{display:none}
  .mv-trackwrap{display:block}
  .mv-track{flex-direction:column;overflow:visible;gap:11px;scroll-snap-type:none}

  .mv-cc{flex:0 0 auto;width:100%;min-height:0;flex-direction:row;align-items:center;gap:12px;
    padding:15px 16px 15px 20px;border-color:var(--mv-line);box-shadow:0 2px 10px rgba(11,43,92,.05)}
  .mv-cc .mv-accent{display:block;position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(#2472ff,#12b3a3)}
  .mv-cc .mv-nm{font-size:17px}
  .mv-cc .mv-addr{margin-top:4px}
  .mv-cc .mv-meta{margin-top:9px}
  .mv-arw{align-self:center;margin-top:0;width:40px;height:40px}
  .mv-arw svg{width:17px;height:17px}
}
.mv-brand .brand-wm{display:block;color:#fff}
.mv-brand .brand-wm-svg{display:block;height:24px;width:auto}
@media (max-width:640px){.mv-brand .brand-wm-svg{height:20px}}