/* 86·87·88: 모바일 상단 헤더(로고 + 전체보기) + 메뉴 탭 줄 + 전체보기 화면 — E안 v2. 768px 이하에서만 동작 */
#spMnav, #spMnavSheet, #spSwipe { display: none; } /* 94: 스와이프 가장자리 패널 PC 숨김(88번 누락 — PC 하단에 메뉴 글자가 보이던 버그) */
@media (max-width: 768px) {
  #spSwipe { display: block; }
  :root, body, body[data-density] { --logo-top: 0px !important; --gnb-h: 108px !important; }
  #brandLogo, #gnb, #mobileMenuBtn, #mobileNavDrawer, #gnbProgressBarTrack, #gnbProgressBadge { display: none !important; }

  #spMnav { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 999990; font-family: inherit; }
  #spMnav .spm-hdr { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 14px; background: #c0c0c0; border-bottom: 2px solid #000000; box-shadow: inset 0 2px 0 #ffffff; }
  #spMnav .spm-logo { display: flex; align-items: center; height: 44px; }
  #spMnav .spm-logo img { display: block; height: 14px; width: auto; }
  #spMnav .spm-all { height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 13.5px; font-weight: 800; color: #000000; background: #c0c0c0; border: 2px solid #000000; box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080, 2px 2px 0 #000000; cursor: pointer; }
  #spMnav .spm-all.is-open { background: #000000; color: #ffffff; box-shadow: 2px 2px 0 #808080; }

  #spMnav .spm-bar { position: relative; height: 50px; background: #c0c0c0; border-bottom: 2px solid #000000; }
  #spMnav .spm-tabs { display: flex; gap: 6px; height: 48px; padding: 8px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
  #spMnav .spm-tabs::-webkit-scrollbar { display: none; }
  #spMnav .spm-tabs::after { content: ''; flex: none; width: 40px; }
  #spMnav .spm-tabs a { flex: none; height: 30px; padding: 0 12px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 800; color: #000000; background: #ffffff; border: 2px solid #000000; box-shadow: 2px 2px 0 #808080; text-decoration: none; }
  #spMnav .spm-tabs a.is-on { background: #000000; color: #ffffff; }
  #spMnav .spm-fade { position: absolute; top: 0; width: 40px; height: 48px; pointer-events: none; }
  #spMnav .spm-fade.r { right: 44px; background: linear-gradient(90deg, rgba(192,192,192,0), #c0c0c0); }
  #spMnav .spm-fade.l { left: 44px; background: linear-gradient(270deg, rgba(192,192,192,0), #c0c0c0); }
  #spMnav .spm-arr { position: absolute; top: 0; width: 44px; height: 48px; padding: 0; display: flex; align-items: center; justify-content: center; background: #c0c0c0; border: 0; cursor: pointer; }
  #spMnav .spm-arr.r { right: 0; border-left: 2px solid #000000; }
  #spMnav .spm-arr.l { left: 0; border-right: 2px solid #000000; }
  #spMnav .spm-arr b { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; line-height: 1; color: #ffffff; background: #000000; border: 2px solid #000000; box-shadow: 2px 2px 0 #808080; }
  #spMnav .spm-arr.r.is-nudge b { animation: spmNudge 0.6s ease-in-out 2; }
  #spMnav .spm-badge { position: absolute; top: 2px; right: 1px; z-index: 2; padding: 0 4px; font-size: 10px; font-weight: 900; line-height: 14px; color: #000000; background: #ffffff; border: 2px solid #000000; border-radius: 7px; pointer-events: none; }
  #spMnav .is-hidden { display: none !important; }
  @keyframes spmNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
  @media (prefers-reduced-motion: reduce) { #spMnav .spm-arr.r.is-nudge b { animation: none; } #spMnav .spm-tabs { scroll-behavior: auto; } }

  #spMnavSheet.is-open { display: block; position: fixed; top: 58px; left: 0; right: 0; bottom: 0; z-index: 9999990; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #c0c0c0; border-top: 2px solid #000000; }
  #spMnavSheet .spm-st { height: 30px; display: flex; align-items: center; padding: 0 10px; font-size: 13px; font-weight: 800; color: #ffffff; background: #000000; }
  #spMnavSheet .spm-sb { padding: 4px 10px 14px; }
  #spMnavSheet h4 { margin: 12px 0 6px; font-size: 12px; font-weight: 900; color: #333333; }
  #spMnavSheet .spm-g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #spMnavSheet .spm-g3 { grid-template-columns: 1fr 1fr 1fr; }
  #spMnavSheet .spm-g a { min-height: 46px; display: flex; align-items: center; padding: 0 12px; font-size: 14px; font-weight: 900; color: #000000; background: #ffffff; border: 2px solid #000000; box-shadow: 2px 2px 0 #808080; text-decoration: none; word-break: keep-all; }
  #spMnavSheet .spm-g3 a { justify-content: center; padding: 0 6px; }
  #spMnavSheet .spm-g a.is-on { background: #000000; color: #ffffff; }
  #spMnavSheet .spm-cta { display: flex; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #808080; box-shadow: inset 0 1px 0 #ffffff; }
  #spMnavSheet .spm-cta a { flex: 1; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 900; color: #000000; background: #c0c0c0; border: 2px solid #000000; box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080, 2px 2px 0 #000000; text-decoration: none; }

  /* 87: 모바일 회사소개서 보기(페이지 이미지) */
  #spPdf { display: none; }
  #spPdf.is-open { display: block; position: fixed; top: 58px; left: 0; right: 0; bottom: 0; z-index: 9999990; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #c0c0c0; border-top: 2px solid #000000; }
  #spPdf .spp-wt { position: sticky; top: 0; z-index: 2; height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 10px; font-size: 13.5px; font-weight: 800; color: #ffffff; background: #000000; }
  #spPdf .spp-x { width: 26px; height: 22px; padding: 0; font-size: 13px; font-weight: 900; color: #000000; background: #c0c0c0; border: 1px solid #ffffff; box-shadow: inset -1px -1px 0 #808080; cursor: pointer; }
  #spPdf .spp-info { margin: 8px; padding: 10px; background: #ffffff; border: 2px solid; border-color: #808080 #ffffff #ffffff #808080; }
  #spPdf .spp-info b { display: block; font-size: 15px; font-weight: 900; }
  #spPdf .spp-info small { display: block; margin-top: 3px; font-size: 12px; color: #555555; }
  #spPdf .spp-btns { display: flex; gap: 8px; margin: 0 8px 8px; }
  #spPdf .spp-btns a, #spPdf .spp-end a { flex: 1; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 900; color: #000000; background: #c0c0c0; border: 2px solid #000000; box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080, 2px 2px 0 #000000; text-decoration: none; white-space: nowrap; }
  #spPdf .spp-tip { margin: 2px 10px 6px; font-size: 11.5px; color: #333333; }
  #spPdf .spp-pages { margin: 0 8px 8px; padding: 8px; display: flex; flex-direction: column; gap: 8px; background: #808080; border: 2px solid; border-color: #808080 #ffffff #ffffff #808080; }
  #spPdf .spp-pg { position: relative; background: #ffffff; border: 1px solid #000000; }
  #spPdf .spp-pg img { display: block; width: 100%; height: auto; }
  #spPdf .spp-pg i { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; font-size: 11px; font-style: normal; font-weight: 800; color: #ffffff; background: #000000; }
  #spPdf .spp-end { margin: 0 8px 16px; padding: 14px 12px; text-align: center; background: #ffffff; border: 2px solid #000000; }
  #spPdf .spp-end p { margin: 0 0 10px; font-size: 13.5px; font-weight: 800; word-break: keep-all; }
  #spPdf .spp-end a { display: inline-flex; flex: none; padding: 0 20px; }
  body.spm-lock { overflow: hidden !important; }

  /* 88: 좌우 스와이프 이동 표시(밀고 있는 쪽 가장자리에 다음·이전 메뉴) + 메인 안내 토스트 */
  #spSwipe .sps { position: fixed; top: 50%; z-index: 999998; width: 0; height: 132px; margin-top: -66px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #c0c0c0; border: 2px solid #000000; box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080; pointer-events: none; }
  #spSwipe .sps.r { right: 0; border-right: 0; }
  #spSwipe .sps.l { left: 0; border-left: 0; }
  #spSwipe .sps b { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; color: #ffffff; background: #000000; border: 2px solid #000000; box-shadow: 2px 2px 0 #808080; }
  #spSwipe .sps span { font-size: 13px; font-weight: 900; white-space: nowrap; color: #000000; }
  #spSwipe .sps i { font-size: 10.5px; font-style: normal; font-weight: 800; color: #333333; }
  #spSwipe .sps.ready { background: #000000; }
  #spSwipe .sps.ready b { color: #000000; background: #ffffff; border-color: #ffffff; }
  #spSwipe .sps.ready span { color: #ffffff; }
  #spSwipe .sps.ready i { color: #c0c0c0; }
  #spSwipeToast { position: fixed; left: 50%; top: 46%; z-index: 999998; width: 176px; height: 112px; margin: -56px 0 0 -88px; display: flex; align-items: center; justify-content: center; background: #000000; border: 2px solid #ffffff; outline: 2px solid #000000; box-shadow: 6px 6px 0 rgba(0,0,0,0.35); pointer-events: none; animation: spsToast 1.5s ease forwards; }
  #spSwipeToast .h { animation: spsHand 1.5s ease-in-out forwards; }
  #spSwipeToast .al { animation: spsBlinkL 0.5s step-end 3; }
  #spSwipeToast .ar { animation: spsBlinkR 0.5s step-end 3; }
  @keyframes spsToast { 0% { opacity: 0; transform: scale(0.92); } 8% { opacity: 1; transform: scale(1); } 82% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes spsHand { 0% { transform: translateX(16px); } 40% { transform: translateX(-16px); } 55% { transform: translateX(-16px); } 80% { transform: translateX(16px); } 100% { transform: translateX(16px); } }
  @keyframes spsBlinkL { 0% { opacity: 1; } 50% { opacity: 0.35; } }
  @keyframes spsBlinkR { 0% { opacity: 0.35; } 50% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { #spSwipeToast, #spSwipeToast * { animation: none !important; } }

  /* 86: /contact/ 문의내용 입력칸 — 모바일에서 플레이스홀더가 잘리지 않게 */
  #inqMessage { min-height: 140px !important; }
}
/* 90·92: 페이지 수 안내 말풍선(4·7번째 페이지, 글자만, 3초, 누를 수 없음) — 모바일·PC 공통 */
#spPvToast { position: fixed; right: 24px; bottom: 56px; z-index: 999998; padding: 11px 16px; font-family: inherit; font-size: 13.5px; font-weight: 800; line-height: 1.55; text-align: center; white-space: nowrap; word-break: keep-all; color: #ffffff; background: #000000; border: 2px solid #ffffff; outline: 2px solid #000000; box-shadow: 5px 5px 0 rgba(0,0,0,0.35); pointer-events: none; animation: spPvToast 5s ease forwards; }
#spPvToast.to-bar::after, #spPvToast.to-qb::after { content: ''; position: absolute; right: var(--tail, 40px); border-left: 10px solid transparent; border-right: 10px solid transparent; }
#spPvToast.to-bar::after { bottom: -12px; border-top: 10px solid #000000; }
#spPvToast.to-qb { right: auto; bottom: auto; }
#spPvToast.to-qb::after { top: -12px; border-bottom: 10px solid #000000; }
@keyframes spPvToast { 0% { opacity: 0; transform: translateY(6px); } 5% { opacity: 1; transform: none; } 93% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 768px) { #spPvToast { right: 12px; bottom: 16px; } #spPvToast.to-bar { bottom: 78px; } }
@media (prefers-reduced-motion: reduce) { #spPvToast { animation: none; } }
/* 99: 전체보기 [프로젝트 문의하기] 말풍선(모바일, 꼬리 오른쪽) */
@media (max-width: 768px) {
  #spMnavSheet .spm-cta { padding-top: 46px; }
  #spMnavSheet .spm-cta a.i { position: relative; }
  #spMnavSheet .spm-cta a.i::before { content: "정리 안 된 생각도 가볍게"; position: absolute; bottom: calc(100% + 9px); left: 50%; margin-left: -76px; width: 152px; box-sizing: border-box; text-align: center; background: #383838; color: #ffffff; font-size: 11.5px; font-weight: 700; line-height: 1.5; padding: 4px 10px; border-radius: 6px; border: 1px solid #1f1f1f; white-space: nowrap; box-shadow: 2px 2px 5px rgba(0,0,0,0.25); letter-spacing: -0.2px; pointer-events: none; animation: spmTipFloat 2.6s ease-in-out infinite; }
  #spMnavSheet .spm-cta a.i::after { content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%; margin-left: 53px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #383838; pointer-events: none; animation: spmTipFloat 2.6s ease-in-out infinite; }
  @keyframes spmTipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
}
@media (prefers-reduced-motion: reduce) { #spMnavSheet .spm-cta a.i::before, #spMnavSheet .spm-cta a.i::after { animation: none; } }