/* 스쿨맵 「휴대폰 아래 고정 줄 + PC 머리줄 알약」 (2026-10-10 · 뷰티픽 설계를 스쿨맵 파랑으로)
   · 모든 화면이 /s/nav.css + /s/nav.js 두 줄을 <head> 에 끼운다 (정적 19,711장 · 뒷단 layout · 학원 상세 워커)
   · 760px 이하 = 아래 고정 줄(알리미 동그라미 가운데) · 761px 이상 = 머리줄 알약(문의 · 무료등록 · 회원가입/이름님)
   · 로그인 모습은 브라우저 저장소(sm_member·sm_nick)를 먼저 읽어 깜빡임 없이 세운다 (s/main.js·school.js·academy.js 가 적어 둔 것)
   · 원본 scripts/nav/nav.css → 복사 site/s/nav.css (판 번호 ?v= 는 add-nav-tags.mjs 가 붙인다) */
:root{--nb-h:60px;--nb-navy:#0b1f4b;--nb-navy2:#071536;--nb-bl:#0064ff;--nb-bl2:#4d8eff;--nb-sky:#80b3ff}
/* 뒷단의 옛 「휴대폰 아래 메뉴(홈·검색·즐겨찾기·내정보)」 는 이 줄이 대신한다 — 뒷단에서 뺐지만 전에 찍어 둔 화면에 남아 있을 수 있어 숨김 */
nav[aria-label="모바일 하단 네비게이션"]{display:none !important}
.nb-r{min-width:0}

/* ── 머리줄 알약 (PC) ── */
.sm-pill{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--nb-bl2);background:#fff;color:var(--nb-navy);font-family:Pretendard,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;font-weight:700;font-size:13.5px;letter-spacing:-.2px;line-height:1;white-space:nowrap;text-decoration:none;flex:none;cursor:pointer}
.hd-right .smap{order:9}                                       /* 줄 3개 메뉴는 PC·휴대폰 모두 맨 오른쪽 */
.sm-pill:hover{background:#f3f7ff;text-decoration:none}
.sm-pill.em{background:var(--nb-navy);color:#fff}
.sm-pill.em:hover{background:#0f2a66}
@media (min-width:761px){
  .hd-in{height:58px}
  .hd-right{gap:6px}
  .hd-right .btn-join{height:36px;padding:0 15px;border:1px solid var(--nb-bl2);background:#fff;color:var(--nb-navy);font-weight:700;font-size:13.5px;letter-spacing:-.2px}
  .hd-right .btn-join:hover{background:#f3f7ff}
  .hd-right .pill-owner{height:36px;padding:0 13px;border:1px solid var(--nb-bl2);color:var(--nb-navy);background:#fff;font-size:13.5px;max-width:170px}
  .hd-right .pill-owner .cv{color:var(--nb-bl2)}
}
@media (max-width:1100px) and (min-width:761px){.sm-pill,.hd-right .btn-join{padding:0 12px;font-size:13px}}
@media (max-width:900px) and (min-width:761px){.sm-pill,.hd-right .btn-join{padding:0 10px;font-size:12.5px;height:34px}}

/* ── 휴대폰 (760px 이하) ── */
@media (max-width:760px){
  .sm-pill.nb-pc{display:none}                                 /* 「문의」 는 줄 3개 메뉴의 고객센터로 */
  .sm-pill.em{height:32px;padding:0 12px;font-size:12.5px;font-family:Pretendard,"Malgun Gothic",sans-serif;font-weight:800}
  .hd-right #sm-login,.hd-right .smuser{display:none}          /* 회원가입·이름님 은 아래 줄로 (휴대폰 머리줄 = 알림 받기 · 무료등록 · ☰) */
  html:not(.sm-nobar) body{padding-bottom:calc(var(--nb-h) + env(safe-area-inset-bottom) + 12px)}
  html:not(.sm-nobar) .cfab{display:none}                      /* 학원 상세 「상담 신청하기」 떠 있는 알약 → 아래 줄 왼쪽 칸이 대신 */
  html.sm-nobar .smnb,html.sm-nobar .nb-sheet,html.sm-nobar .nb-mymenu{display:none !important}
  html.sm-kb .smnb{display:none}                               /* 글자 칸에 입력 중엔 숨김 */

  .smnb{position:fixed;left:0;right:0;bottom:0;z-index:964;height:calc(var(--nb-h) + env(safe-area-inset-bottom));box-sizing:border-box;
    padding:0 calc(8px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(8px + env(safe-area-inset-left));
    display:grid;grid-template-columns:1fr 76px 1fr;align-items:center;gap:0;
    background:linear-gradient(165deg,#13306f 0,var(--nb-navy) 55%,var(--nb-navy2) 100%);
    box-shadow:0 -1.4px 0 var(--nb-bl2),0 -10px 24px rgba(0,0,0,.18);
    font-family:Pretendard,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;-webkit-tap-highlight-color:transparent}
  html.sm-inapp .smnb{box-shadow:0 -1.4px 0 var(--nb-bl2),0 -4px 8px rgba(0,0,0,.14);transform:translate3d(0,0,0)}
  .smnb *{box-sizing:border-box}
  .smnb a,.smnb button{-webkit-tap-highlight-color:transparent}

  .nb-card{height:44px;width:100%;border-radius:12px;display:flex;align-items:center;gap:8px;padding:0 8px;color:#fff;text-decoration:none;border:0;font:inherit;text-align:left;
    background:linear-gradient(180deg,#132b66,#0b1f4b);box-shadow:inset 0 0 0 1.2px var(--nb-bl2),0 6px 14px rgba(0,0,0,.45);cursor:pointer}
  .nb-card:active{transform:translateY(1px)}
  .nb-ic{width:30px;height:30px;border-radius:7px;background:#eef4ff;border:1px solid #c9d8ff;flex:none;display:flex;align-items:center;justify-content:center}
  .nb-ic svg{width:18px;height:18px;stroke:var(--nb-bl);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .nb-t{display:flex;flex-direction:column;min-width:0;line-height:1.15}
  .nb-t .a{font-size:10.5px;font-weight:600;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nb-t .b{font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nb-t .b em{font-style:normal;color:var(--nb-sky)}
  .nb-card.detail{justify-content:center;text-align:center;background:linear-gradient(180deg,#1a3a8a,#0e2560)}
  .nb-card.detail .nb-t{align-items:center}

  /* 오른쪽 · 로그인 전 */
  .nb-two{display:flex;gap:6px;width:100%}
  .nb-two a{width:calc(50% - 3px);height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:800;text-decoration:none;box-shadow:0 6px 14px rgba(0,0,0,.45)}
  .nb-two .in{background:#0a1a40;color:#dbe8ff;box-shadow:inset 0 0 0 1.2px var(--nb-bl2),0 6px 14px rgba(0,0,0,.45)}
  .nb-two .up{background:linear-gradient(180deg,#5c9bff,#0064ff 55%,#0050cc);color:#fff}
  /* 오른쪽 · 로그인 뒤 */
  .nb-me{position:relative}
  .nb-me .nb-ic{border-radius:50%}
  .nb-me .arr{width:17px;height:17px;border-radius:50%;background:#e5484d;color:#fff;font-size:10px;line-height:17px;text-align:center;margin-left:auto;flex:none;transition:transform .25s}
  html.sm-me-open .nb-me .arr{transform:rotate(180deg)}
  .nb-mymenu{position:fixed;left:8px;right:8px;bottom:calc(var(--nb-h) + env(safe-area-inset-bottom) + 8px);z-index:963;background:#fff;border-radius:16px;box-shadow:0 12px 30px rgba(11,31,75,.25);padding:8px;font-family:Pretendard,"Malgun Gothic",sans-serif}
  .nb-mymenu[hidden]{display:none}
  .nb-mymenu a{display:block;padding:12px;border-radius:10px;color:var(--nb-navy);font-weight:700;text-decoration:none;font-size:14.5px}
  .nb-mymenu a:active{background:#f3f7ff}
  .nb-mymenu a.out{color:#64748b;font-weight:600;border-top:1px solid #eef0f3;border-radius:0 0 10px 10px;margin-top:4px}

  /* 가운데 · 볼록 동그라미 + 아치 */
  .nb-mid{position:relative;height:var(--nb-h);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:3px}
  .nb-arch{position:absolute;left:50%;top:-18px;transform:translateX(-50%);width:80px;height:34.4px;border-radius:40px 40px 0 0;border:1.4px solid var(--nb-bl2);border-bottom:0;background:linear-gradient(165deg,#13306f,var(--nb-navy) 55%,var(--nb-navy2));z-index:0}
  .nb-circle{position:absolute;left:50%;top:-22px;transform:translateX(-50%);width:56px;height:56px;border-radius:50%;border:0;padding:0;cursor:pointer;z-index:2;
    background:linear-gradient(180deg,#4d8eff,#0064ff 60%,#0040b0);
    box-shadow:0 0 0 2px var(--nb-bl2),0 0 0 5px #fff,0 0 0 7px var(--nb-bl2),0 8px 18px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center}
  .nb-circle svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .nb-circle:active{transform:translateX(-50%) translateY(1px)}
  .nb-lbl{position:relative;z-index:3;height:12px;font-size:10.5px;font-weight:800;color:var(--nb-sky);display:flex;align-items:center;gap:4px;line-height:1}
  .nb-lbl .dn{display:none;width:16px;height:16px;border-radius:50%;background:var(--nb-bl2);color:#fff;font-size:9px;line-height:16px;text-align:center;font-style:normal}
  html.sm-mid-open .nb-lbl .dn{display:inline-block}

  .nb-sheet{position:fixed;left:0;right:0;bottom:calc(var(--nb-h) + env(safe-area-inset-bottom));z-index:962;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(11,31,75,.25);padding:16px 14px 36px;font-family:Pretendard,"Malgun Gothic",sans-serif;
    transform:translateY(110%);transition:transform .28s;visibility:hidden}
  .nb-sheet.on{transform:translateY(0);visibility:visible}
  .nb-sheet h3{font-size:15px;color:var(--nb-navy);margin:0 0 10px;font-weight:800}
  .nb-sheet a{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #dbe6ff;border-radius:12px;color:var(--nb-navy);text-decoration:none;font-weight:700;font-size:14.5px;margin-bottom:8px}
  .nb-sheet a:last-child{margin-bottom:0}
  .nb-sheet a .i{width:34px;height:34px;border-radius:9px;background:#eef4ff;display:flex;align-items:center;justify-content:center;flex:none}
  .nb-sheet a .i svg{width:18px;height:18px;stroke:var(--nb-bl);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .nb-sheet a small{margin-left:auto;font-size:11.5px;font-weight:600;color:#64748b;white-space:nowrap}
  .nb-dim{position:fixed;inset:0;z-index:961;background:rgba(11,31,75,.28)}
  .nb-dim[hidden]{display:none}

  @media (max-width:360px){
    .nb-card{padding:0 6px;gap:6px}
    .nb-ic{width:28px;height:28px}
    .nb-t .a{font-size:9.5px}.nb-t .b{font-size:13px}
    .nb-two a{font-size:12.5px}
  }
}
@media (min-width:761px){.smnb,.nb-sheet,.nb-mymenu,.nb-dim{display:none !important}}