*{margin:0;padding:0;box-sizing:border-box;}

  /* ============ 크기의 기준 ============
     이 앱의 모든 크기는 rem 으로 적혀 있고, 1rem = 아래 html 의 글자 크기다.
     따라서 이 한 줄만 바꾸면 화면 전체가 같은 비율로 커지거나 작아진다.
     데스크톱(폰 액자 상태)에서는 16px 로 고정 — 설계한 390×790 그대로 보인다.
     실제 폰에서는 아래쪽 @media 에서 화면 크기를 따라가게 만든다. */
  html{font-size:16px;}
  /* 폰 브라우저 「다크 모드」(삼성 인터넷 · 크롬 자동 어둡게)가 이 앱 색을 억지로 바꾸지 않게 — 2026-10-19 사용자 폰에서
     밝은 화면이 뿌옇게(흰 바탕 → 회색, 밝은 버튼 → 남색) 보였다. 어두운 화면은 「이미 어둡다」, 밝은 화면은 「밝게만」으로 알린다. */
  :root{color-scheme:dark;}
  html.lt{color-scheme:only light;}
  @media (prefers-color-scheme: dark){ :root{color-scheme:dark;} html.lt{color-scheme:only light;} }

  html,body{height:100%;background:#0B0E13;font-family:'Pretendard',"맑은 고딕","Malgun Gothic","Noto Sans CJK KR",sans-serif;
    display:flex;align-items:center;justify-content:center;gap:2.25rem;color:#E7F6FF;}


  .phone{width:24.375rem;height:49.375rem;background:#0B0E13;border:11px solid #1A1D2B;border-radius:1.75rem;
    position:relative;overflow:hidden;box-shadow:0 0 40px rgba(0,229,255,.15),0 18px 60px rgba(0,0,0,.7);}
  .notch{height:1.625rem;display:flex;align-items:center;justify-content:center;}
  .notch i{width:6.25rem;height:0.375rem;background:linear-gradient(90deg,#00E5FF,#FF2E88);border-radius:4px;}

  .screen{position:absolute;top:1.625rem;left:0;right:0;bottom:0;padding:1rem;overflow:hidden;
    display:flex;flex-direction:column;
    opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);
    transition:opacity .32s cubic-bezier(.22,.68,.36,1), transform .32s cubic-bezier(.22,.68,.36,1), visibility .32s;
    will-change:opacity,transform;}
  .screen.on{opacity:1;visibility:visible;transform:none;}
  /* v51 : 보이지 않는 화면 안의 CSS 애니메이션(스캔 레이저·배너 등)은 멈춰 둔다 */
  .screen:not(.on) *{animation-play-state:paused !important;}

  /* 위쪽 줄(뒤로가기 + 제목) — 오른쪽 위 아이콘(인터넷 · 세 줄 메뉴)이 늘 떠 있으므로
     그만큼 자리를 비워 둔다. 좁은 폰에서 제목이 아이콘 밑으로 파고들던 것을 막는다.
     제목이 그래도 길면 말줄임(…)으로 자른다. */
  .bar{display:flex;align-items:center;gap:0.625rem;margin-bottom:0.75rem;flex:0 0 auto;padding-right:5.75rem;}   /* 오른쪽 위 [인터넷][☰] 두 개 자리 (2026-10-19 : 아이콘 4개 → 2개) */
  .bar h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .back{background:transparent;border:1px solid #00E5FF;color:#00E5FF;border-radius:0.375rem;
    padding:0.375rem 0.6875rem;font-size:0.9375rem;cursor:pointer;font-family:inherit;
    min-width:44px;min-height:44px;                 /* 손가락 터치 최소 크기(Apple HIG) */
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
  .back:hover{border-color:#FF2E88;color:#FF2E88;}
  .bar h3{font-size:0.9375rem;font-weight:800;}

  .big{background:linear-gradient(90deg,#00E5FF,#7B5CFF);color:#05060A;border:none;border-radius:4px;padding:1.0625rem;
    font-size:1.0625rem;font-weight:800;cursor:pointer;font-family:inherit;width:100%;
    text-transform:uppercase;letter-spacing:1px;}
  .big:hover{box-shadow:0 0 20px rgba(0,229,255,.55);}
  .ghost{background:transparent;color:#00E5FF;border:1px solid #00E5FF;}
  .ghost:hover{background:rgba(0,229,255,.08);}
  .ghost.langActive{background:linear-gradient(90deg,#00E5FF,#7B5CFF);color:#05060A;border-color:transparent;font-weight:800;}

  /* s1 */
  #s1{align-items:center;justify-content:center;text-align:center;gap:0.875rem;}
  #s1 .logo{font-size:3.875rem;}
  #s1 h1{font-size:1.5625rem;font-weight:800;line-height:1.3;}
  #s1 p{color:#7C8AA0;font-size:0.875rem;line-height:1.6;}

  /* 첫 화면 전체 테두리 + 상단 배너 */
  .phone{border:1.5px solid rgba(0,229,255,.35);}
  #s1 .topBanner{position:absolute;top:0;left:0;right:0;height:0.3125rem;
    background:linear-gradient(90deg,#00E5FF,#FF2E88,#00E5FF);
    background-size:200% 100%; animation:bannerSlide 3.5s linear infinite;}
  @keyframes bannerSlide{ from{background-position:0% 0;} to{background-position:200% 0;} }

  /* 우측 상단 아이콘(즐겨찾기·설정) */
  /* 오른쪽 위 아이콘 — 폰에서는 앱이 화면을 꽉 채우므로 시계·배터리가 그려지는
     맨 윗줄(safe-area)을 반드시 비켜야 한다. 안 그러면 설정 아이콘이 배터리와 겹친다.
     (rem 만 쓰면 작은 폰에서 더 위로 올라가 더 심해진다 — 그래서 최소 0.75rem + 기기 여백) */
  .topIcons{position:absolute;top:calc(0.75rem + env(safe-area-inset-top));
    right:calc(0.875rem + env(safe-area-inset-right));display:flex;gap:0.5rem;z-index:6;}
  .iconBtn{width:2.125rem;height:2.125rem;border-radius:50%;background:rgba(15,20,28,.7);
    border:1px solid #00E5FF;color:#00E5FF;font-size:1rem;display:flex;
    align-items:center;justify-content:center;cursor:pointer;}
  .iconBtn:active{background:rgba(0,229,255,.2);}
  /* 인터넷 상태 동그라미 (2026-09-29) — 켜져 있으면 녹색으로 차고, 끊기면 색 없는 테두리만 남는다.
     글자가 아니라 색·채움으로만 알리므로 눈에 거슬리지 않으면서 한눈에 들어온다. */
  #netBtn i{display:block;width:0.75rem;height:0.75rem;border-radius:50%;position:relative;
    border:0.125rem solid #6E7C8C;background:transparent;transition:background .2s,border-color .2s;}
  #netBtn.netOn i{background:#27E07A;border-color:#27E07A;box-shadow:0 0 0.375rem rgba(39,224,122,.75);}
  #netBtn b{display:none;}
  /* 끊겼을 때는 '누가 봐도 오프라인'이 되게 세 가지를 한꺼번에 준다 (2026-09-29) :
     ① 「오프라인」 글자   ② 동그라미를 가로지르는 빗금   ③ 주황 테두리 + 천천히 깜빡임.
     빨강이 아니라 주황인 이유 — 고장이 아니라 '지금은 인터넷만 없다'이고, 길안내는 그대로 되기 때문. */
  #netBtn.netOff{width:auto;gap:0.375rem;padding:0 0.625rem;border-radius:1.0625rem;
    border-color:#FFB33C;color:#FFB33C;background:rgba(48,33,8,.92);animation:netPulse 2s ease-in-out infinite;}
  #netBtn.netOff b{display:block;font-size:0.6875rem;font-weight:800;letter-spacing:.01em;white-space:nowrap;}
  #netBtn.netOff i{border-color:#FFB33C;}
  #netBtn.netOff i::after{content:'';position:absolute;left:-0.1875rem;top:0.1875rem;
    width:1.125rem;height:0.125rem;background:#FFB33C;border-radius:0.0625rem;transform:rotate(-45deg);}
  @keyframes netPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,179,60,.55);}50%{box-shadow:0 0 0 0.3125rem rgba(255,179,60,0);}}
  @media (prefers-reduced-motion: reduce){ #netBtn.netOff{animation:none;} }

  /* 설정·이용안내·즐겨찾기 화면 */
  #sset .row, #sguide .card{background:#131A24;border:1px solid #232D3A;border-radius:0.625rem;
    padding:0.875rem;margin-bottom:0.625rem;}
  #sset .row{display:flex;align-items:center;justify-content:space-between;}
  #sset .row b{color:#E7F6FF;font-size:0.9375rem;}
  #langToggle{background:#0E1217;border:1px solid #00E5FF;color:#00E5FF;border-radius:1.25rem;
    padding:0.375rem 0.875rem;font-weight:700;}
  #sguide h4{color:#00E5FF;margin:0.875rem 0 0.375rem;font-size:0.875rem;}
  #sguide p, #sguide li{color:#B7C3D4;font-size:0.8125rem;line-height:1.6;}
  #sfav .favItem{background:#131A24;border:1px solid #232D3A;border-radius:0.625rem;
    padding:0.75rem 0.875rem;margin-bottom:0.5rem;display:flex;justify-content:space-between;align-items:center;gap:0.5rem;}
  #sfav .favEmpty{color:#7C8AA0;font-size:0.8125rem;text-align:center;margin-top:2.5rem;}
  #sfav .favTitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #sfav .favActions{display:flex;align-items:center;gap:0.25rem;flex:0 0 auto;}
  #sfav .favRemove{background:none;border:none;color:#5A6472;font-size:1rem;line-height:1;
    padding:0.5rem 0.375rem;cursor:pointer;font-family:inherit;}
  #sfav .favRemove:hover{color:#FF6B6B;}
  .starBtn{background:none;border:none;color:#FFC93C;font-size:1.25rem;cursor:pointer;}

  /* 건의함 : 실제와 다른 건물 사진을 사용자가 직접 찍어 올리면, 관리자가 검토해 승인한 사진을
     최신 사진으로 반영하는 사진 제보 시스템(안내용 설명 + 제출 UI). */
  #ssug .card{background:#131A24;border:1px solid #232D3A;border-radius:0.625rem;padding:0.875rem;margin-bottom:0.75rem;}
  #ssug .card p{color:#B7C3D4;font-size:0.8125rem;line-height:1.65;}
  #ssug .card h4{color:#00E5FF;margin:0 0 0.5rem;font-size:0.875rem;}
  #ssug .shot{display:block;border:2px dashed #2A3345;border-radius:0.875rem;padding:1.375rem 0.875rem;text-align:center;
    color:#7C8AA0;font-size:0.7812rem;line-height:1.6;background:#0D0F18;cursor:pointer;}
  #ssug .shot.has{padding:0;border-style:solid;border-color:#00E5FF;overflow:hidden;}
  #ssug .shot img{width:100%;max-height:13.75rem;object-fit:contain;display:block;background:#05060A;}   /* 11/05 사진 전체가 보이게(예전 cover) */
  #ssug .shot .ic{font-size:1.875rem;display:block;margin-bottom:0.375rem;}
  /* v69 : 같은 자리에서 한 장 더 (선택) */
  #ssug .shot2{display:none;margin:-0.25rem 0 0.625rem;padding:0.5625rem 0.625rem;border:1px dashed #33507A;border-radius:0.5625rem;
               color:#94B8E0;font-size:0.75rem;text-align:center;cursor:pointer;}
  #ssug .shot2.has{border-style:solid;border-color:#00E5FF;color:#CFE6FF;}
  #ssug .shot2 .ic{margin-right:0.3125rem;}
  #ssug textarea{width:100%;background:#0D0F18;border:1px solid #232D3A;border-radius:0.625rem;
    color:#E7F6FF;font-family:inherit;font-size:0.8125rem;padding:0.625rem 0.75rem;margin-top:0.625rem;resize:none;}
  #ssug .sugStat{margin-top:0.75rem;text-align:center;font-size:0.8125rem;color:#39FF88;min-height:18px;
    opacity:0;transition:opacity .3s;}
  #ssug .sugStat.on{opacity:1;}

  /* 건의함 관리자(#sadmin) : #sph(사진 등록, 개발자 전용)에서 이어지는 검토 화면 —
     학생이 올린 제보 사진을 사람이 직접 승인/거절한다. */
  #sadmin .mini{color:#7C8AA0;font-size:0.7812rem;line-height:1.65;background:#131A24;
    border:1px solid #232D3A;border-radius:0.625rem;padding:0.75rem 0.875rem;margin-bottom:0.75rem;}
  #sadmin .sugEmpty{color:#5A6472;font-size:0.8125rem;text-align:center;padding:2.125rem 0.625rem;}
  /* ══════════════ 서버(Firestore) 연동 (v49 신규) ══════════════ */
  .dbState{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.6875rem;color:#7C8AA0;
    margin-left:auto;white-space:nowrap;}
  .dbState .dot{width:0.4375rem;height:0.4375rem;border-radius:50%;background:#3E4A5C;}
  .dbState.on .dot{background:#39FF88;box-shadow:0 0 8px rgba(57,255,136,.7);}
  .dbState.load .dot{background:#FFC93C;animation:aiPulse 1s ease-in-out infinite;}
  .dbState.off .dot{background:#FF6B6B;}
  #sadmin .dbBar{display:flex;align-items:center;gap:0.5rem;margin:-2px 0 0.5rem;font-size:0.7188rem;color:#7C8AA0;}
  #sadmin .dbBar button{background:none;border:1px solid #232D3A;color:#7C8AA0;border-radius:0.375rem;
    padding:0.3125rem 0.5625rem;font-size:0.6875rem;font-family:inherit;cursor:pointer;}
  #sadmin .sugLocal{display:inline-block;font-size:0.625rem;padding:2px 0.375rem;border-radius:62.4375rem;
    background:rgba(255,201,60,.13);color:#FFC93C;margin-left:0.375rem;vertical-align:middle;}
  #spwgate .fbGate{display:none;flex-direction:column;gap:0.625rem;}
  #spwgate .fbGate.on{display:flex;}
  #spwgate .fbGate input{width:100%;background:#0D0F18;border:1px solid #232D3A;border-radius:0.625rem;
    padding:0.875rem;color:#E7F6FF;font-size:0.9375rem;font-family:inherit;}
  #spwgate .fbGate input:focus{outline:none;border-color:#00E5FF;}
  #spwgate .fbGate .fbErr{color:#FF6B6B;font-size:0.7812rem;min-height:18px;}
  #spwgate .fbGate .fbTip{color:#7C8AA0;font-size:0.7812rem;line-height:1.6;}
  #spwgate .fbGate .fbTip b{color:#94B8E0;}
  #spwgate .pwGateWrap.hide{display:none;}
  #ssug .sugSync{margin-top:0.375rem;font-size:0.7188rem;color:#7C8AA0;text-align:center;}
  /* v48 : 제보가 여러 건이면 화면 전체가 스크롤되게 — .screen 기본값이 overflow:hidden이라
     둘째 건부터 잘려 보이던 문제. 목록만 스크롤하면 작은 폰에선 안내문이 자리를 다 차지하므로
     안내문까지 같이 위로 밀리도록 화면 자체를 스크롤 컨테이너로 만든다. */
  #sadmin{overflow-y:auto;-webkit-overflow-scrolling:touch;display:block;}
  #sadmin .bar{position:sticky;top:0;background:#0B0E13;z-index:3;padding-bottom:0.5rem;margin:0 0 0.375rem;
    /* 화면 위쪽 여백(padding-top)까지 제목줄 배경으로 덮어 카드가 비쳐 보이지 않게 */
    padding-top:calc(1rem + env(safe-area-inset-top, 0px));
    margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem;}
  /* 화면 자체의 위 여백을 없애고 제목줄이 그 여백을 대신 갖게 → 스크롤된 내용이 위로 비칠 자리가 없다 */
  #sadmin{padding-top:0 !important;}
  #sadmin #sugAdminList{padding-bottom:0.375rem;}
  #ssug{overflow-y:auto;-webkit-overflow-scrolling:touch;}
  /* v53 : 층 선택 버튼 + 촬영 안내 */
  .sugFloorRow{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem;margin-top:0.5rem;font-size:0.75rem;color:#7C8AA0;}
  .sugFloorRow button{background:#131A24;color:#94B8E0;border:1px solid #2A3644;border-radius:0.5rem;padding:0.375rem 0.6875rem;font-size:0.8125rem;white-space:nowrap;}
  .sugFloorRow button.on{background:#1B3A2E;color:#39FF88;border-color:#39FF88;}
  .sugTip{margin-top:0.5rem;font-size:0.75rem;line-height:1.5;color:#7C8AA0;background:#0F141B;border:1px dashed #2A3644;border-radius:0.5rem;padding:0.5rem 0.625rem;}
  .sugTip b{color:#94B8E0;font-weight:600;}
  #sadmin .where .warnsub{color:#E8B339;background:#2A2113;border:1px solid #4A3A16;
    border-radius:0.5rem;padding:0.375rem 0.5rem;margin-top:0.375rem;line-height:1.5;}
  #sadmin .sugLearnTip{margin-top:0.375rem;font-size:0.7188rem;line-height:1.45;color:#7C8AA0;
    background:#0F141B;border:1px dashed #2A3644;border-radius:0.5rem;padding:0.375rem 0.5rem;}
  #sadmin .sugCard{display:flex;gap:0.625rem;background:#131A24;border:1px solid #232D3A;border-radius:0.75rem;
    padding:0.625rem;margin-bottom:0.625rem;}
  /* v54 : 썸네일을 눌러 크게 볼 수 있다는 걸 보이게 (돋보기 표시 + 손가락 커서) */
  #sadmin .sugThumbWrap{position:relative;flex:0 0 auto;width:5.25rem;height:5.25rem;cursor:zoom-in;
    -webkit-tap-highlight-color:transparent;}
  #sadmin .sugThumbWrap .zoomBadge{position:absolute;right:0.1875rem;bottom:0.1875rem;width:1.375rem;height:1.375rem;
    border-radius:0.375rem;background:rgba(5,8,14,.78);border:1px solid #2A3644;color:#94B8E0;
    font-size:0.75rem;line-height:1.25rem;text-align:center;pointer-events:none;}
  #sadmin .sugThumb{width:5.25rem;height:5.25rem;object-fit:cover;border-radius:0.5rem;flex:0 0 auto;background:#0D0F18;display:block;}

  /* ── v54 : 사진 크게 보기 ──────────────────────────────────── */
  /* 2026-10-26 : 바탕을 불투명하게 — 반투명(.95)이면 뒤의 길안내 화면이 겹쳐 보였다(견본 사진) */
  .imgZoom{position:fixed;inset:0;z-index:1200;background:#04060A;display:none;
    flex-direction:column;
    padding-top:env(safe-area-inset-top, 0px);padding-bottom:env(safe-area-inset-bottom, 0px);}
  .imgZoom.on{display:flex;}
  .imgZoom .izBar{display:flex;align-items:center;gap:0.625rem;padding:0.625rem 0.75rem;flex:0 0 auto;}
  .imgZoom .izCap{flex:1;min-width:0;color:#94B8E0;font-size:0.7812rem;line-height:1.4;
    max-height:2.9em;overflow:hidden;word-break:break-word;}
  .imgZoom .izBtn{background:#131A24;color:#E7F6FF;border:1px solid #2A3644;border-radius:0.5625rem;
    min-width:40px;height:2.25rem;font-size:0.9375rem;flex:0 0 auto;}
  .imgZoom .izBtn:active{background:#1B2430;}
  .imgZoom .izStage{flex:1;min-height:0;position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;touch-action:none;}
  .imgZoom .izStage img{max-width:100%;max-height:100%;display:block;
    transform-origin:center center;will-change:transform;-webkit-user-select:none;user-select:none;
    -webkit-user-drag:none;}
  .imgZoom .izFoot{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:0.5rem;
    padding:0.625rem 0.75rem 0.875rem;}
  .imgZoom .izPct{color:#7C8AA0;font-size:0.75rem;min-width:56px;text-align:center;}
  .imgZoom .izHint{color:#5A6472;font-size:0.7188rem;text-align:center;padding:0 0.75rem 0.625rem;}
  .imgZoom .izNum{color:#00E5FF;font-size:0.75rem;font-weight:700;flex:0 0 auto;}
  .imgZoom .izNav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:2.75rem;height:2.75rem;
    border-radius:50%;background:rgba(10,14,20,.72);color:#E7F6FF;border:1.5px solid #00E5FF;font-size:1.375rem;
    display:flex;align-items:center;justify-content:center;padding:0;font-family:inherit;}
  .imgZoom .izPrev{left:0.5rem;} .imgZoom .izNext{right:0.5rem;}
  /* 길안내 사진 상자 : 오른쪽 아래 「🔍 눌러서 크게 보기」 — 사진 설명 줄 바로 위 */
  .photo .zm{position:absolute;right:0.5rem;bottom:2.05rem;display:flex;align-items:center;gap:0.25rem;
    background:rgba(5,6,10,.82);color:#E7F6FF;border:1.5px solid #00E5FF;border-radius:999px;
    padding:0.25rem 0.625rem;font-size:0.6875rem;font-weight:700;pointer-events:none;}
  .photo .cnt{cursor:pointer;}
  #sadmin .sugMeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.375rem;}
  #sadmin .sugNote{color:#E7F6FF;font-size:0.7812rem;line-height:1.4;word-break:break-word;}
  #sadmin .sugNoNote{color:#5A6472;font-style:italic;}
  #sadmin .sugWhen{color:#5A6472;font-size:0.6875rem;}
  #sadmin .sugCodeInput{width:100%;background:#0D0F18;border:1px solid #232D3A;border-radius:0.5rem;
    color:#E7F6FF;font-family:inherit;font-size:0.7812rem;padding:0.4375rem 0.5625rem;box-sizing:border-box;}
  #sadmin .sugSubSel{width:100%;background:#0D0F18;border:1px solid #232D3A;border-radius:0.5rem;
    color:#94B8E0;font-family:inherit;font-size:0.75rem;padding:0.4375rem 0.5625rem;box-sizing:border-box;}
  /* v73 : 코드를 외우지 않고 라운지를 고르는 줄 */
  #sadmin .sugQuick{display:flex;align-items:center;gap:0.3125rem;flex-wrap:wrap;font-size:0.7188rem;color:#5A6472;}
  #sadmin .sugQuick button{background:#0D0F18;border:1px solid #232D3A;color:#94B8E0;border-radius:0.4375rem;
    padding:0.3125rem 0.5625rem;font-size:0.7188rem;font-family:inherit;cursor:pointer;}
  #sadmin .sugQuick button:hover{border-color:#2F6B8A;color:#CFE8FF;}
  /* v74 : 코드 대신 한글 이름으로 고르는 두 칸 */
  #sadmin .sugPick{display:flex;gap:0.375rem;}
  #sadmin .sugPick select{flex:1;min-width:0;background:#0D0F18;border:1px solid #232D3A;border-radius:0.5rem;
    color:#E7F6FF;font-family:inherit;font-size:0.7812rem;padding:0.4375rem 0.5625rem;box-sizing:border-box;}
  #sadmin .sugPick select.sugFloorSel{flex:0 0 96px;}
  #sadmin .sugChosen{font-size:0.8125rem;font-weight:700;padding:0.4375rem 0.625rem;border-radius:0.5rem;
    background:#16301F;border:1px solid #2F6B44;color:#BFEBD0;}
  #sadmin .sugChosen.none{background:#1A1D26;border-color:#232D3A;color:#5A6472;font-weight:400;}
  #sadmin .sugChosen.warn{background:#3A2020;border-color:#7C3B3B;color:#FFD2D2;}
  #sadmin .sugCodeLine{display:flex;align-items:center;gap:0.375rem;}
  #sadmin .sugCodeLine label{flex:0 0 auto;font-size:0.6875rem;color:#5A6472;}
  #sadmin .sugBtnRow{display:flex;gap:0.375rem;}
  #sadmin .sugApprove, #sadmin .sugReject{flex:1;border:none;border-radius:0.5rem;padding:0.5rem;font-weight:700;
    font-size:0.7812rem;cursor:pointer;font-family:inherit;}
  #sadmin .sugApprove{background:#1FE0A8;color:#04241A;}
  #sadmin .sugReject{background:#232D3A;color:#B7C3D4;}
  #sadmin .footRow{display:flex;align-items:center;justify-content:space-between;margin-top:0.875rem;gap:0.625rem;}
  #sadmin .footRow span{font-size:0.75rem;color:#7C8AA0;}
  #sadmin .footRow button{background:none;border:1px solid #232D3A;color:#7C8AA0;border-radius:0.5rem;
    padding:0.5rem 0.875rem;font-size:0.75rem;font-family:inherit;cursor:pointer;flex:0 0 auto;}

  /* 전체 사진 관리(#sphmgr) : 관리자가 앱에 들어있는 모든 사진을 보고 골라서 지울 수 있는 화면.
     #sphMgrList에 flex:1 + overflow-y:auto + min-height:0을 줘야 화면(.screen)의 overflow:hidden에
     막히지 않고 목록 전체를 스크롤해서 볼 수 있다(안 주면 처음 화면에 들어오는 몇 장만 보이고 잘림). */
  #sphmgr{overflow:hidden;}
  #sphmgr #sphMgrList{flex:1 1 auto;overflow-y:auto;min-height:0;}
  #sphmgr .mgrTopBar{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;flex-wrap:wrap;flex:0 0 auto;}
  #sphmgr .mgrTopBar .mgrTotal{color:#7C8AA0;font-size:0.7812rem;flex:1 1 auto;}
  #sphmgr .mgrTopBar .mgrSelInfo{color:#00E5FF;font-size:0.75rem;flex:0 0 auto;}
  #sphmgr .mgrTopBar button{background:none;border:1px solid #232D3A;color:#B7C3D4;border-radius:0.5rem;
    padding:0.4375rem 0.75rem;font-size:0.75rem;font-family:inherit;cursor:pointer;flex:0 0 auto;}
  #sphmgr .mgrDelSelBtn{border-color:#FF6B6B !important;color:#FF6B6B !important;}
  #sphmgr .mgrDelSelBtn:disabled{opacity:.4;cursor:not-allowed;}
  #sphmgr .mgrGroup{color:#94B8E0;font-size:0.75rem;font-weight:700;margin:0.875rem 0 0.375rem;padding-bottom:0.25rem;
    border-bottom:1px solid #1A1D2B;}
  #sphmgr .mgrGroup:first-child{margin-top:0;}
  #sphmgr .mgrRow{display:flex;align-items:center;gap:0.5rem;background:#131A24;border:1px solid #232D3A;
    border-radius:0.625rem;padding:0.375rem 0.5rem;margin-bottom:0.375rem;}
  #sphmgr .mgrChk{flex:0 0 auto;width:1rem;height:1rem;}
  #sphmgr .mgrThumb{width:2.5rem;height:2.5rem;object-fit:cover;border-radius:0.375rem;flex:0 0 auto;background:#0D0F18;}
  #sphmgr .mgrName{flex:1;min-width:0;color:#B7C3D4;font-size:0.7188rem;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;}
  #sphmgr .mgrDel{flex:0 0 auto;background:none;border:none;color:#5A6472;font-size:0.9375rem;line-height:1;
    padding:0.375rem;cursor:pointer;font-family:inherit;}
  #sphmgr .mgrDel:hover{color:#FF6B6B;}
  #sphmgr .mini{color:#7C8AA0;font-size:0.7812rem;line-height:1.6;background:#131A24;border:1px solid #232D3A;
    border-radius:0.625rem;padding:0.75rem 0.875rem;margin-bottom:0.75rem;flex:0 0 auto;}
  /* 파일 탐색기에서 사진을 끌어다 원하는 위치 묶음(.mgrSec) 위에 놓으면 그 자리에 바로 들어간다.
     묶음 전체(제목줄+사진줄)를 드롭 영역으로 잡아야 사진이 여러 장인 위치에도 쉽게 떨어뜨릴 수 있다. */
  #sphmgr .mgrSec{border:1px dashed transparent;border-radius:0.625rem;padding:2px 0.375rem;margin-bottom:0.375rem;
    transition:background .12s, border-color .12s;}
  #sphmgr .mgrSec.over{border-color:#00E5FF;background:rgba(0,229,255,.10);}
  /* 사진과 사진 사이에 끌어다 놓을 때, 어느 자리에 끼워 넣을지 보여주는 선 */
  #sphmgr .mgrRow.dropBefore{box-shadow:inset 0 3px 0 0 #00E5FF, 0 -2px 10px rgba(0,229,255,.45);}
  #sphmgr .mgrRow.dropAfter{box-shadow:inset 0 -3px 0 0 #00E5FF, 0 2px 10px rgba(0,229,255,.45);}
  #sphmgr .mgrSec .mgrGroup{display:flex;align-items:center;gap:0.375rem;}
  #sphmgr .mgrGroup .mgrGName{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #sphmgr .mgrGroup .mgrGCnt{flex:0 0 auto;color:#7C8AA0;font-weight:400;}
  #sphmgr .mgrAdd{flex:0 0 auto;background:none;border:1px solid #232D3A;color:#00E5FF;border-radius:0.375rem;
    font-size:0.8125rem;line-height:1;padding:0.25rem 0.5rem;cursor:pointer;font-family:inherit;}
  #sphmgr .mgrAdd:hover{border-color:#00E5FF;}
  #sphmgr .mgrEmptyHint{color:#5A6472;font-size:0.7188rem;padding:2px 2px 0.375rem;}
  #sphmgr .mgrDropStat{color:#39FF88;font-size:0.75rem;line-height:1.5;min-height:16px;margin-bottom:0.375rem;flex:0 0 auto;}
  #sphmgr .mgrEmptyBtn.on{border-color:#00E5FF !important;color:#00E5FF !important;}

  /* 인앱 확인창(appConfirm) : 일부 기기(특히 iOS WebView)에서 window.confirm()이 동작하지 않아
     삭제 버튼을 눌러도 아무 반응이 없는 문제가 있어, 네이티브 confirm() 대신 직접 만든 확인창을 쓴다. */
  .appConfirmOverlay{position:fixed;inset:0;background:rgba(5,6,10,.72);z-index:980;
    display:flex;align-items:center;justify-content:center;padding:1.5rem;}
  .appConfirmBox{background:#0D0F18;border:1px solid #1A1D2B;border-radius:0.875rem;max-width:20rem;width:100%;
    padding:1.25rem 1.125rem;box-shadow:0 0 40px rgba(0,229,255,.15);}
  .appConfirmBox p{color:#E7F6FF;font-size:0.875rem;line-height:1.5;margin:0 0 1.125rem;text-align:center;}
  .appConfirmBtns{display:flex;gap:0.625rem;}
  .appConfirmBtns button{flex:1;border-radius:0.5rem;padding:0.6875rem 0;font-size:0.875rem;font-weight:700;
    font-family:inherit;cursor:pointer;}
  .appConfirmCancel{background:transparent;color:#00E5FF;border:1px solid #00E5FF;}
  .appConfirmOk{background:linear-gradient(90deg,#00E5FF,#7B5CFF);color:#05060A;border:none;}

  /* 관리자 진입 비밀번호 화면 */
  .pwGateWrap{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:0 0.5rem;text-align:center;}
  .pwGateTip{color:#7C8AA0;font-size:0.8438rem;margin:0 0 1.25rem;line-height:1.5;}
  .pwInput{width:100%;max-width:16.25rem;background:#0D0F18;border:2px solid #1A1D2B;border-radius:0.75rem;
    color:#E7F6FF;font-size:1.625rem;font-weight:700;letter-spacing:14px;text-align:center;
    padding:0.875rem 0.625rem 0.875rem 1.5rem;font-family:inherit;}
  .pwInput:focus{outline:none;border-color:#00E5FF;}
  .pwErr{color:#FF2E88;font-size:0.7812rem;min-height:18px;margin-top:0.625rem;}

  /* ===== 사진 기능 ===== */
  .photo.has{padding:0;border-style:solid;border-color:#FF2E88;overflow:hidden;position:relative;cursor:pointer;}
  .photo.has{background:#05060A;}
  .photo.has img{width:100%;height:100%;object-fit:contain;display:block;}   /* 11/05 사용자 「사진이 너무 확대돼 전체가 안 보인다」 — 자르지 않고 통째로(예전 cover) */
  .photo .cap{position:absolute;left:0;right:0;bottom:0;background:rgba(5,6,10,.78);
    color:#E7F6FF;font-size:0.6875rem;padding:0.375rem 0.5rem;text-align:left;line-height:1.35;}
  /* '여기가 맞나요?' 화면의 실사 3D 상자 */
  .b3dbox{position:relative;overflow:hidden;background:#0D0F18;
    border:1px solid #FF2E88;border-radius:4px;min-height:180px;}
  .b3dbox iframe{width:100%;height:100%;border:0;display:block;background:#0b0e13;}
  .b3dload{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:#94B8E0;font-size:0.75rem;letter-spacing:-.2px;}
  .photo .cnt{position:absolute;top:0.5rem;right:0.5rem;background:rgba(5,6,10,.78);color:#00E5FF;
    font-size:0.6875rem;font-weight:700;padding:0.1875rem 0.5rem;border-radius:1.25rem;}

  #sph .drop{border:2px dashed #2A3345;border-radius:0.875rem;padding:1.125rem;text-align:center;
    color:#7C8AA0;font-size:0.7812rem;line-height:1.6;background:#0D0F18;}
  #sph .drop.over{border-color:#00E5FF;background:rgba(0,229,255,.08);}
  #sph .row{display:flex;gap:0.5rem;margin-top:0.625rem;}
  #sph .row .big{font-size:0.875rem;padding:0.8125rem;}
  #sph .stat{margin-top:0.75rem;background:#0D0F18;border:1px solid #1A1D2B;border-radius:0.75rem;padding:0.75rem;
    font-size:0.7812rem;color:#7C8AA0;line-height:1.6;box-shadow:0 0 40px rgba(0,229,255,.08);}
  #sph .stat b{color:#E7F6FF;}
  #sph .bar2{height:0.375rem;background:#1A1D2B;border-radius:4px;overflow:hidden;margin-top:0.5rem;}
  #sph .bar2 i{display:block;height:100%;width:0;background:#00E5FF;box-shadow:0 0 8px #00E5FF;transition:width .15s;}
  #sph .list{flex:1;overflow-y:auto;margin-top:0.75rem;display:flex;flex-direction:column;gap:0.375rem;}
  #sph .fl{background:#0D0F18;border:1px solid #1A1D2B;border-radius:0.625rem;padding:0.625rem 0.75rem;
    display:flex;justify-content:space-between;align-items:center;font-size:0.8125rem;}
  #sph .fl span{color:#7C8AA0;font-size:0.75rem;}
  #sph .fl b{color:#39FF88;}
  #sph .fl b.zero{color:#7C8AA0;}
  #sph .mini{font-size:0.7188rem;color:#7C8AA0;margin-top:0.5rem;line-height:1.55;}

  /* ===== 사진 분류 확인 화면 (#phsort) ===== */
  #phsort .row{display:flex;gap:0.5rem;margin-top:0.625rem;flex:0 0 auto;}
  #phsort .row .big{font-size:0.875rem;padding:0.8125rem;}
  #phsort .mini{font-size:0.6875rem;color:#7C8AA0;margin-top:0.4375rem;line-height:1.5;flex:0 0 auto;}
  #phsort .sum{background:#0D0F18;border:1px solid #1A1D2B;border-radius:0.75rem;padding:0.6875rem 0.75rem;
    font-size:0.7812rem;color:#7C8AA0;line-height:1.6;}
  #phsort .sum b{color:#00E5FF;}
  #phsort .sum b.warn{color:#FF2E88;}
  #phsort .tools{display:flex;gap:0.375rem;margin-top:0.625rem;flex-wrap:wrap;}
  #phsort .tools button{background:transparent;border:1px solid #2A3345;color:#93A1B0;
    border-radius:0.375rem;padding:0.4375rem 0.625rem;font-size:0.7188rem;font-family:inherit;cursor:pointer;}
  #phsort .tools button.on{border-color:#00E5FF;color:#00E5FF;background:rgba(0,229,255,.1);}
  #phsort .tools button:disabled{opacity:.35;cursor:default;}
  #phsort .plist{flex:1;overflow-y:auto;margin-top:0.625rem;display:flex;flex-direction:column;gap:0.4375rem;
    -webkit-overflow-scrolling:touch;}
  #phsort .pit{background:#0D0F18;border:1px solid #1A1D2B;border-radius:0.625rem;padding:0.5rem;
    display:flex;gap:0.5625rem;align-items:center;}
  #phsort .pit.sel{border-color:#00E5FF;box-shadow:0 0 14px rgba(0,229,255,.18);}
  #phsort .pit.none{border-color:#FF2E88;}
  #phsort .pit .tick{width:1.375rem;height:1.375rem;flex:0 0 auto;border-radius:0.3125rem;border:1px solid #2A3345;
    display:flex;align-items:center;justify-content:center;color:#05060A;font-size:0.8125rem;font-weight:800;}
  #phsort .pit.sel .tick{background:#00E5FF;border-color:#00E5FF;}
  #phsort .pit img{width:3.5rem;height:3.5rem;flex:0 0 auto;object-fit:cover;border-radius:0.4375rem;
    border:1px solid #1A1D2B;background:#05060A;}
  #phsort .pit .meta{flex:1;min-width:0;}
  #phsort .pit .fn{color:#7C8AA0;font-size:0.6562rem;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;margin-bottom:0.25rem;}
  #phsort .pit .dest{display:inline-flex;align-items:center;gap:0.3125rem;max-width:100%;
    background:transparent;border:1px solid #00E5FF;color:#00E5FF;border-radius:0.375rem;
    padding:0.375rem 0.5625rem;font-size:0.75rem;font-weight:700;font-family:inherit;cursor:pointer;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #phsort .pit .dest.empty{border-color:#FF2E88;color:#FF2E88;}
  #phsort .pit .auto{font-size:0.625rem;color:#39FF88;font-weight:600;margin-left:0.375rem;}
  #phsort .pit .drop1{background:transparent;border:none;color:#7C8AA0;font-size:1.0625rem;
    padding:0.25rem 0.375rem;cursor:pointer;font-family:inherit;}

  /* 위치 고르기 오버레이 */
  #phPick{position:absolute;inset:0;background:#05060A;z-index:30;display:none;
    flex-direction:column;padding:1rem;}
  #phPick.on{display:flex;}
  #phPick .pkq{width:100%;box-sizing:border-box;background:#0D0F18;border:1px solid #1A1D2B;
    border-radius:0.625rem;color:#E7F6FF;font-size:0.9375rem;padding:0.75rem;font-family:inherit;}
  #phPick .pkq:focus{outline:none;border-color:#00E5FF;}
  #phPick .pkf{display:flex;gap:0.375rem;flex-wrap:wrap;margin-top:0.5625rem;flex:0 0 auto;}
  #phPick .pkf button{background:transparent;border:1px solid #2A3345;color:#93A1B0;
    border-radius:1.25rem;padding:0.4375rem 0.8125rem;font-size:0.75rem;font-family:inherit;cursor:pointer;}
  #phPick .pkf button.on{border-color:#00E5FF;color:#00E5FF;background:rgba(0,229,255,.12);
    font-weight:700;}
  #phPick .pkl{flex:1;overflow-y:auto;margin-top:0.625rem;-webkit-overflow-scrolling:touch;}
  #phPick .pkg{color:#7C8AA0;font-size:0.6562rem;font-weight:700;letter-spacing:1px;
    margin:0.75rem 2px 0.3125rem;}
  #phPick .pko{width:100%;text-align:left;background:#0D0F18;border:1px solid #1A1D2B;
    border-radius:0.5rem;color:#E7F6FF;font-size:0.8438rem;padding:0.6875rem 0.75rem;margin-bottom:0.3125rem;
    font-family:inherit;cursor:pointer;}
  #phPick .pko:active{border-color:#00E5FF;background:rgba(0,229,255,.1);}
  #phPick .pko small{color:#7C8AA0;font-size:0.7188rem;margin-left:0.375rem;}
  #phPick .pko em{color:#39FF88;font-style:normal;font-size:0.6875rem;margin-left:0.375rem;}

  /* s2 building photo */
  .photo{background:#0D0F18;border:1px solid #FF2E88;border-radius:4px;
    display:flex;align-items:center;justify-content:center;color:#FF2E88;font-size:0.8125rem;text-align:center;}

  /* ---- 안내 화면(s6)의 복도 사진 ----
     예전에는 min-height:0 이라, 화면이 짧은 폰이거나 안내 문장이 길어지면
     남는 자리가 없어 높이가 0 이 되었다 → 그 폰에서만 사진이 아예 안 보였다.
     이제 최소 높이를 주어 어떤 기기에서도 사라지지 않게 하고,
     그래도 모자라면 화면을 위아래로 밀어 볼 수 있게 한다. */
  /* 넘칠 때만 밀어 볼 수 있게 하되, 끝에서 더 끌어도 화면 전체가 따라 움직이지 않게 막는다
     (overscroll-behavior:contain — 2026-09-24 "화면 전체가 움직인다" 제보). */
  #s6{overflow-y:auto;overscroll-behavior:contain;}
  #s6 #ph{flex:1 1 auto;min-height:9rem;max-height:52vh;margin-top:0.875rem;}
  /* 도착 화면(s7)의 사진 — 높이를 rem 으로 두어 기기마다 같은 비율로 커진다 */
  #s7{overflow-y:auto;overscroll-behavior:contain;}
  #s7 #ph7{flex:0 0 auto;width:100%;height:13.125rem;max-height:30vh;min-height:7.5rem;}
  .binfo{background:#0D0F18;border:1px solid #1A1D2B;border-radius:0.875rem;padding:1rem;margin-top:0.875rem;
    box-shadow:0 0 40px rgba(0,229,255,.08);}
  .binfo h2{font-size:1.4375rem;font-weight:800;}
  .binfo p{color:#7C8AA0;font-size:0.8125rem;margin-top:0.375rem;line-height:1.5;}

  /* 이름 검색 */
  /* 휴대폰 기본 자판을 그대로 쓰는 통합 검색창 — 번호·이름을 한 곳에 입력한다 */
  .nsearch input{width:100%;background:#0D0F18;border:2px solid #1A1D2B;border-radius:0.875rem;
    padding:1.125rem 1rem;font-size:1.1875rem;font-weight:700;color:#E7F6FF;font-family:inherit;}
  .nsearch input:focus{outline:none;border-color:#00E5FF;box-shadow:0 0 12px rgba(0,229,255,.35);}
  .nsearch input::placeholder{color:#7C8AA0;font-size:0.9062rem;font-weight:600;}
  .nresults{margin-top:0.625rem;display:flex;flex-direction:column;gap:0.5rem;overflow-y:auto;
    flex:1 1 auto;min-height:0;}
  .nresults button{display:flex;justify-content:space-between;align-items:center;gap:0.625rem;
    background:#0D0F18;border:1px solid #1A1D2B;border-radius:0.75rem;padding:0.9375rem 0.875rem;min-height:56px;
    color:#E7F6FF;font-family:inherit;font-size:0.8438rem;cursor:pointer;text-align:left;}
  .nresults button:hover{border-color:#00E5FF;background:rgba(0,229,255,.08);}
  .nresults button .nm{font-weight:700;}
  .nresults button .rc{color:#00E5FF;font-size:0.7812rem;font-weight:700;flex:0 0 auto;}
  .nresults .none{color:#7C8AA0;font-size:0.7812rem;padding:0.5rem 0.25rem;text-align:center;}
  .ndiv{display:flex;align-items:center;gap:0.625rem;margin:0.75rem 0 0.625rem;color:#7C8AA0;font-size:0.7188rem;}
  .ndiv:before,.ndiv:after{content:"";flex:1;height:1px;background:#1A1D2B;}

  /* 최근 기록 */
  .recentWrap{margin-top:0.75rem;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
  .recentWrap.hidden{display:none;}
  .recentLabel{color:#7C8AA0;font-size:0.7188rem;font-weight:700;margin:2px 2px 0.5rem;flex:0 0 auto;letter-spacing:.2px;}
  .recentList{display:flex;flex-direction:column;gap:0.5rem;overflow-y:auto;flex:1 1 auto;min-height:0;}
  .recentEmpty{color:#5A6472;font-size:0.7812rem;padding:0.875rem 0.25rem;text-align:center;}
  .recentItem{position:relative;border-radius:0.75rem;flex:0 0 auto;}
  .recentItem .rrow{display:flex;align-items:center;gap:0.625rem;background:#0D0F18;border:1px solid #1A1D2B;
    border-radius:0.75rem;padding:0.75rem 0.875rem;cursor:pointer;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
  .recentItem .rrow:active{border-color:#00E5FF;}
  .recentItem .ric{color:#5A6472;font-size:0.8125rem;flex:0 0 auto;}
  .recentItem .rtxt{flex:1;min-width:0;color:#93A1B0;font-size:0.8125rem;font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .recentItem .rx{background:none;border:none;color:#5A6472;font-size:0.9375rem;line-height:1;
    padding:0.375rem 0.25rem;cursor:pointer;flex:0 0 auto;font-family:inherit;}
  .recentItem .rx:hover{color:#FF6B6B;}

  /* 출발층 선택 */
  .startfloor{display:flex;align-items:center;gap:0.5rem;margin:0.5rem 0 0.625rem;padding-top:0.625rem;flex:0 0 auto;
    border-top:1px solid #1A1D2B;}
  .startfloor .sflabel{color:#7C8AA0;font-size:0.7188rem;font-weight:600;flex:0 0 auto;letter-spacing:.2px;}
  .sfbtns{display:flex;gap:0.3125rem;flex:1;min-width:0;}
  .sfbtns button{flex:1;min-width:0;min-height:44px;background:transparent;border:1px solid #1A1D2B;color:#7C8AA0;
    border-radius:0.4375rem;padding:0.375rem 0;font-size:0.7812rem;font-weight:700;font-family:inherit;cursor:pointer;}
  .sfbtns button:hover{border-color:#00E5FF;color:#E7F6FF;}
  .sfbtns button.on{background:rgba(0,229,255,.15);color:#00E5FF;border-color:#00E5FF;}

  /* s3 search */
  .searchbox{display:flex;gap:0.5rem;margin-bottom:0.75rem;}
  .searchbox input{flex:1;min-width:0;background:#0D0F18;border:2px solid #1A1D2B;border-radius:0.75rem;
    padding:1rem;font-size:1.3125rem;color:#E7F6FF;font-family:inherit;font-weight:700;text-align:center;}
  .searchbox input:focus{outline:none;border-color:#00E5FF;box-shadow:0 0 12px rgba(0,229,255,.35);}
  .keypad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);
    gap:0.5rem;margin-top:0.25rem;flex:1;min-height:0;}
  .keypad button{background:#0D0F18;border:1px solid #1A1D2B;color:#E7F6FF;border-radius:0.75rem;
    padding:0;font-size:1.375rem;font-weight:700;cursor:pointer;font-family:inherit;}
  .keypad button:hover{background:rgba(0,229,255,.08);border-color:#00E5FF;}
  .hintlist{margin-top:0.625rem;color:#7C8AA0;font-size:0.75rem;line-height:1.6;flex:0 0 auto;text-align:center;}
  /* 검색 안내는 자판이 올라와도 가려지지 않도록 입력창 바로 밑에 둔다.
     '무엇으로 찾는지'(이름표) + '예시'를 짝지어 보여준다. */
  #shint{margin:0.625rem 0 2px;font-size:0.8125rem;line-height:1.7;
    display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0.25rem 0.5625rem;}
  #shint span{white-space:nowrap;color:#7C8AA0;}
  #shint b{color:#9FEFFF;font-weight:700;margin-left:0.1875rem;}
  #shint i{color:#1A1D2B;font-style:normal;}
  #shint .ex{color:#7C8AA0;font-weight:700;}
  .err{color:#FF3B3B;font-size:0.8125rem;margin-top:0.625rem;min-height:18px;text-align:center;}

  /* 카테고리 : 칸 크기를 기존의 절반으로 줄이고, 아래로 늘어나 채우지 않도록 위쪽으로 정렬한다. */
  .cats{display:flex;flex-direction:column;gap:0.875rem;flex:1;min-height:0;justify-content:flex-start;overflow-y:auto;}
  .cats button{background:#0D0F18;border:1px solid #1A1D2B;color:#E7F6FF;border-radius:1rem;
    padding:0.6875rem 1.375rem;font-size:1.1875rem;font-weight:700;cursor:pointer;font-family:inherit;
    width:100%;display:flex;align-items:center;gap:1.25rem;flex:0 0 auto;min-height:44px;text-align:left;}
  .cats button:hover{background:rgba(0,229,255,.08);border-color:#00E5FF;}
  .cats button .ic{font-size:2.5rem;flex:0 0 auto;line-height:1;}
  .cats button .txt{display:flex;flex-direction:column;gap:0.375rem;min-width:0;flex:1;}
  .cats button .nm{white-space:nowrap;}
  .cats button small{color:#7C8AA0;font-size:0.875rem;font-weight:600;white-space:normal;line-height:1.4;}
  .cats button[disabled],.cats button.catSoon{opacity:.45;cursor:default;}

  /* s4 3D */
  .c3dWrap{position:relative;flex:1;min-height:0;display:flex;}
  /* touch-action:none — 3D 화면의 손가락 동작은 앱이 직접 처리한다(회전·이동·확대).
     이게 없으면 두 손가락으로 벌릴 때 브라우저가 '페이지 전체'를 확대해서 글자까지 커졌다.
     (터치 처리기가 passive 라 preventDefault 로는 막을 수 없다 — 2026-09-24 제보) */
  #c3d{width:100%;height:100%;border-radius:0.875rem;background:#05060A;border:1px solid #1A1D2B;display:block;cursor:grab;
    touch-action:none;
    /* 2026-09-24 : 폰에서 "안개 낀 것처럼 뿌옇다"는 제보 — 가장자리를 어둡게 하는 그림자가
       두 겹(여기 + .c3dWrap::after)으로 겹쳐 있었다. 이 겹은 많이 줄여 건물이 선명하게 보이게 한다.
       길이를 rem 으로 둬서 작은 폰에서는 더 얕게 깔린다. */
    /* 2026-10-18 : 그래도 폰에서 「건물 주변이 안개 낀 것처럼 뿌옇다」(사용자) → 가장자리 그림자를 아예 없앤다 */
    box-shadow:none;}
  /* 화면 가장자리를 은은하게 어둡게 해서 시선이 건물(가운데) 쪽으로 자연스레 모이게 하는 비네트.
     클릭·드래그를 가리면 안 되므로 pointer-events는 꺼둔다. */
  .c3dWrap::after{content:'';position:absolute;inset:0;border-radius:0.875rem;pointer-events:none;z-index:4;
    /* 예전 : inset 0 0 70px 14px + inset 0 0 130px 40px 두 겹. 폰(가로 약 360px)에서는
       이 130px+40px 짜리가 화면의 절반 가까이를 덮어 뿌옇게 보였다 → 한 겹으로, 얕게. */
    /* 2026-10-18 : 이 겹(가장자리 그림자 + 가운데 옅은 청록 막)도 「건물 주변이 뿌옇다」의 원인 — 없앤다 */
    box-shadow:none;
    background:none;}
  #s4.fsMode .c3dWrap::after{border-radius:0;}
  .fsBtn{position:absolute;bottom:0.75rem;right:0.75rem;width:2.125rem;height:2.125rem;border-radius:50%;
    background:rgba(8,12,20,.78);border:1px solid #00E5FF;color:#00E5FF;font-size:0.9375rem;
    display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;font-family:inherit;}
  .fsBtn:active{background:rgba(0,229,255,.2);}
  .favFloat{position:absolute;top:0.625rem;right:0.625rem;width:2.5rem;height:2.5rem;border-radius:50%;
    background:rgba(8,12,20,.82);border:1px solid #FFC93C;color:#FFC93C;font-size:1.1875rem;
    display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:9;font-family:inherit;}
  .favFloat:active{background:rgba(255,201,60,.18);}
  /* 건물 3D를 자유 회전·이동(팬)·확대로 보다가 처음 열었을 때 시점으로 되돌리는 버튼 */
  .viewBtn{left:0.75rem;right:auto;}
  /* 전체화면 모드일 때만 나타나는 좌측 상단 뒤로가기 + 바로 오른쪽 이동경로 버튼(유튜브 쇼츠 스타일) */
  /* 전체화면에서는 #s4 의 안쪽 여백이 0 이라 이 줄이 화면 맨 위(아이폰 노치·시계 자리)에 걸린다.
     → 기기 여백(safe-area)만큼 내려서 버튼이 가려지지 않게 한다 (2026-09-24 제보 : 아이폰 전체화면에서
        뒤로가기·처음으로·경로 미리보기·직접 걸어보기 버튼이 안 보임). */
  .fsBar{position:absolute;top:calc(0.625rem + env(safe-area-inset-top));
    left:calc(0.625rem + env(safe-area-inset-left));display:none;align-items:center;gap:0.5rem;z-index:5;}
  .fsBar .iconBtn{background:rgba(8,12,20,.85);}
  .fsBar .trip{padding:0.5625rem 0.875rem;font-size:0.7812rem;}
  /* 2026-10-18 : 3D 바닥이 밝은 파랑이 되자 테두리만 있는 버튼(직접 걸어보기 · 일시정지) 글자가 바닥에 묻혔다 → 어두운 바탕 */
  .fsBar .trip.ghost2{background:rgba(8,12,20,.85);}
  #s4.fsMode{padding:0;}
  #s4.fsMode>.bar,#s4.fsMode>.tip,#s4.fsMode>.triprow,#s4.fsMode>.fprow,
  #s4.fsMode>.startfloor,#s4.fsMode>.big{display:none;}
  #s4.fsMode .c3dWrap{border-radius:0;}
  #s4.fsMode #c3d{border-radius:0;border:none;}
  #s4.fsMode .fsBtn,#s4.fsMode .favFloat,#s4.fsMode .viewBtn{display:none;}
  #s4.fsMode .fsBar{display:flex;}
  .phone.fsActive .topIcons{display:none;}
  /* 층 버튼 두 줄이 똑같이 생겨서 헷갈렸음 → 둘 다 왼쪽에 이름표를 붙여 역할을 구분 */
  .fprow{display:flex;align-items:center;gap:0.5rem;margin:0.625rem 0;}
  .fprow .floorpick{flex:1;min-width:0;margin:0;}
  .fprow .sflabel{color:#7C8AA0;font-size:0.7188rem;font-weight:600;flex:0 0 auto;letter-spacing:.2px;}
  /* 층 상세 버튼 7개(B1~5F·옥상) — 한 줄에 다 안 들어가 줄바꿈하면 남는 버튼 하나가 줄 전체로 늘어났다.
     같은 크기의 격자로 놓는다 (2026-10-17 4칸). 2026-10-18 「버튼이 너무 크다」 → 6칸 :
     B1 1F 2F 3F 4F 5F / 옥상 — 바로 아래 「현재 위치」 버튼(B1~5F)과 칸·크기·간격이 똑같아 같은 층이 위아래로 맞는다 */
  .floorpick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0.3125rem;margin:0.625rem 0;}
  .floorpick button{min-width:0;min-height:44px;background:#0D0F18;border:1px solid #1A1D2B;color:#7C8AA0;border-radius:0.5625rem;
    padding:0.375rem 0;font-size:0.8125rem;font-weight:700;cursor:pointer;font-family:inherit;}
  .floorpick button.tgt{border-color:#FF2E88;color:#E7F6FF;}
  .floorpick button.on{background:#00E5FF;color:#05060A;border-color:#00E5FF;}
  /* 안내 화면 아래 이전/다음 : 한 줄을 반씩 나눠 쓰고 기존 버튼보다 조금 크게 */
  .navrow{display:flex;gap:0.625rem;margin-top:0.75rem;flex:0 0 auto;}
  .navrow .big{flex:1 1 0;min-width:0;margin:0;min-height:64px;font-size:1.1875rem;}
  .navrow .big#pv{background:transparent;border:1px solid #00E5FF;color:#00E5FF;box-shadow:none;}
  .tip{color:#7C8AA0;font-size:0.7188rem;text-align:center;margin-bottom:0.375rem;line-height:1.75;}
  /* 이동 경로 재생 줄 : 왼쪽에 현재→목적지 층, 오른쪽에 재생 버튼 */
  .triprow{display:flex;align-items:center;justify-content:center;gap:0.5625rem;margin-bottom:0.5rem;flex:0 0 auto;}
  .tripst{color:#7C8AA0;font-size:0.75rem;font-weight:700;white-space:nowrap;letter-spacing:.2px;}
  .trip{background:#0D0F18;border:1px solid #1A1D2B;color:#00E5FF;border-radius:0.625rem;
    padding:0.5rem 0.9375rem;font-size:0.7812rem;font-weight:800;cursor:pointer;font-family:inherit;
    min-height:40px;display:inline-flex;align-items:center;white-space:nowrap;flex:0 0 auto;}
  .trip:hover{background:rgba(0,229,255,.08);}
  .trip.on{background:linear-gradient(90deg,#00E5FF,#7B5CFF);border-color:#00E5FF;color:#05060A;}

  /* s5 */
  /* touch-action:none — #c3d 와 같은 까닭(2026-10-20 종합검진 : 아이폰 사파리는 user-scalable=no 를 무시해서 층 지도를 두 손가락으로 벌리면 페이지 전체가 커졌다) */
  #cfd{width:100%;flex:1;min-height:0;border-radius:0.875rem;background:#05060A;border:1px solid #1A1D2B;display:block;cursor:grab;touch-action:none;}
  .legend2{display:flex;gap:0.875rem;justify-content:center;margin:0.625rem 0;font-size:0.7188rem;color:#7C8AA0;flex-wrap:wrap;}
  .legend2 i{width:0.625rem;height:0.625rem;border-radius:2px;display:inline-block;margin-right:0.3125rem;}
  .legend2 em{font-style:normal;}
  /* 3D 전체보기(홀로그램) 화면 좌상단에 떠 있는 색상 범례 — 캔버스 안쪽 오버레이라 전체화면에서도
     그대로 보이고, 별도 줄을 차지하지 않아 이미 빽빽한 s4 레이아웃에 영향을 주지 않는다. */
  .legend3d{position:absolute;top:0.75rem;left:0.75rem;z-index:5;display:flex;flex-direction:column;gap:0.25rem;
    background:rgba(6,10,18,.62);border:1px solid rgba(0,229,255,.25);border-radius:0.5rem;
    padding:0.4375rem 0.625rem;font-size:0.6562rem;color:#CFE3F2;pointer-events:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
  .legend3d span{display:flex;align-items:center;gap:0.375rem;white-space:nowrap;}
  .legend3d i{width:0.5rem;height:0.5rem;border-radius:2px;flex:0 0 auto;}
  .legend3d em{font-style:normal;}
  #s4.fsMode .legend3d{top:calc(4rem + env(safe-area-inset-top));}   /* 전체화면에선 좌상단 뒤로가기·이동경로 버튼 줄 아래로 내림 */
  /* 1인칭(로드뷰) 재생 중 지금 어느 단계인지 알려주는 자막 — 캔버스 안쪽 오버레이라
     일반 화면·전체화면 어디서든 똑같이 보이고, 별도 줄을 차지하지 않는다. */
  .fpcap{position:absolute;left:50%;bottom:0.875rem;transform:translateX(-50%);z-index:6;display:none;
    max-width:calc(100% - 6.75rem);padding:0.4375rem 0.875rem;border-radius:4px;
    background:rgba(5,6,10,.8);border:1px solid #00E5FF;color:#E7F6FF;
    font-size:0.7812rem;font-weight:800;letter-spacing:.4px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;pointer-events:none;
    box-shadow:0 0 18px rgba(0,229,255,.32);}
  .fpcap.on{display:block;}
  /* 자유 탐색 : 목적지 방향·거리 안내 */
  /* 버그 수정: max-width가 86%라 안내 문구가 길면 배지가 오른쪽 위
     즐겨찾기(★) 버튼 자리까지 뻗어 그 위를 덮었다(배지 z-index가 더 높아 별이
     가려짐). 가운데 정렬이므로 좌우로 62px씩 비워 두면(=100% - 124px) 왼쪽
     시점복귀 버튼·오른쪽 즐겨찾기 버튼과 절대 겹치지 않는다. 문구가 길면
     말줄임(…)으로 잘린다. */
  /* 문구를 자르지 않으면서도 좌우 버튼과 안 겹치게 —
     가운데 정렬(left:50%+translate) 대신 좌우 62px씩 비운 '띠' 안에서
     내용 크기만큼만(width:fit-content) 차지하고 margin:auto로 가운데 정렬한다.
     문구가 그 폭을 넘으면 잘라내지 않고 두 줄로 넘긴다(한글은 어절 단위). */
  .fpguide{position:absolute;left:3.875rem;right:3.875rem;top:0.875rem;margin:0 auto;
    width:fit-content;max-width:calc(100% - 7.75rem);z-index:7;display:none;
    background:rgba(5,8,14,.82);border:1px solid #00E5FF;border-radius:1.125rem;
    padding:0.4375rem 0.875rem;color:#EAF9FF;font-size:0.8125rem;font-weight:700;
    white-space:normal;word-break:keep-all;text-align:center;line-height:1.32;
    align-items:center;gap:0.5rem;box-shadow:0 0 18px rgba(0,229,255,.25);}
  .fpguide.on{display:flex;}
  .fpguide b{min-width:0;}
  .fpguide i{flex:0 0 auto;}
  /* 버그 수정: 전체화면에서는 좌상단에 뒤로가기(←)·시점(⟳)·경로
     버튼 줄(.fsBar, top:0.625rem)이 뜨는데, 이 안내 배지가 같은 높이(top:0.875rem)에
     가운데 정렬로 떠서 좁은 폰 화면에서는 배지가 그 버튼들 위를 덮어 눌리지
     않았다 — 범례(.legend3d)에 이미 쓰고 있는 것과 같은 값으로 버튼 줄 아래로
     내린다. */
  #s4.fsMode .fpguide{top:calc(4rem + env(safe-area-inset-top));}
  .fpguide i{display:inline-block;font-style:normal;color:#00E5FF;font-size:1.0625rem;line-height:1;}
  /* 자유 탐색 : 엘리베이터·계단 층 선택 */
  .fpsel{position:absolute;left:50%;bottom:3.625rem;transform:translateX(-50%);z-index:8;display:none;
    background:rgba(5,8,14,.9);border:1px solid #2A3646;border-radius:0.75rem;padding:0.5rem;
    gap:0.375rem;flex-wrap:wrap;justify-content:center;max-width:88%;
    box-shadow:0 8px 26px rgba(0,0,0,.5);}
  .fpsel.on{display:flex;}
  .fpsel button{background:#111A26;border:1px solid #33445A;color:#DCEEF8;border-radius:0.5rem;
    min-width:46px;padding:0.5625rem 0.625rem;font-size:0.875rem;font-weight:800;cursor:pointer;}
  .fpsel button.now{background:#00E5FF;border-color:#00E5FF;color:#04070C;}
  .fpsel button.x{background:transparent;border-color:#3A4656;color:#8FA0B4;min-width:38px;}
  /* 자유 탐색 : 폰 한 손 조작용 앞으로·뒤돌기·뒤로 */
  .fpctl{position:absolute;right:0.75rem;bottom:4rem;z-index:8;display:none;
    flex-direction:column;gap:0.5rem;}
  .fpctl.on{display:flex;}
  .fpctl button{width:3.25rem;height:3.25rem;border-radius:50%;cursor:pointer;
    background:rgba(6,10,17,.82);border:1px solid #2F4256;color:#CFEFFB;
    font-size:1.1875rem;font-weight:800;line-height:1;
    -webkit-tap-highlight-color:transparent;
    box-shadow:0 4px 14px rgba(0,0,0,.45);}
  .fpctl button.up{border-color:#00E5FF;color:#00E5FF;}
  .fpctl button.dn{border-color:#5C6C80;color:#9FB3C6;}
  .trip.ghost2{background:transparent;border:1px solid #00E5FF;color:#00E5FF;box-shadow:none;}

  /* s6 guide */
  .arrow{text-align:center;font-size:4.875rem;line-height:1;color:#FF2E88;text-shadow:0 0 18px rgba(255,46,136,.85);margin:0.375rem 0 2px;}
  /* 마지막 도착 단계의 체크표시는 작게 — 그만큼 설명 글씨에 자리를 넘긴다 */
  .arrow.done{font-size:3.125rem;color:#39FF88;text-shadow:0 0 14px rgba(57,255,136,.7);margin:0.625rem 0 0.375rem;
    animation:arrowArrive .55s cubic-bezier(.22,.9,.4,1.3) both;}
  .instr{text-align:center;font-size:1.5rem;font-weight:800;line-height:1.35;padding:0 0.25rem;}
  .prog{display:flex;gap:0.3125rem;margin:0.75rem 0 0.625rem;}
  .prog i{flex:1;height:0.3125rem;border-radius:3px;background:#1A1D2B;}
  .prog i.on{background:#00E5FF;box-shadow:0 0 8px #00E5FF;}
  .stepno{text-align:center;color:#7C8AA0;font-size:0.75rem;margin-bottom:0.25rem;}

  /* 걷는 사람 표시 : 진행 단계 바(.prog) 위에 트랙을 만들어, 출발(📍)에서 도착(🏁)까지
     사람이 실제로 왼쪽→오른쪽으로 걸어가는 것처럼 위치가 이동한다.
     🚶 이모지는 기본적으로 왼쪽을 보고 있어서 그대로 두면 걷는 방향과 반대로 보임
     → scaleX(-1)로 좌우를 뒤집어 진행 방향(오른쪽)을 보게 한다.
     칸 이동은 JS(rAF)로 직접 애니메이션해서(약 2.6초) 다음 단계까지 실제로 걸어가는
     모습이 보이게 하고, 도착 단계는 그 이동이 끝난 뒤에만 골인 효과가 시작되게 한다. */
  .walkTrack{position:relative;display:flex;align-items:center;gap:0.375rem;margin:0.875rem 0 0.375rem;}
  .walkTrack .wtStart,.walkTrack .wtFinish{font-size:0.875rem;flex:0 0 auto;line-height:1;opacity:.85;}
  .walkTrack .prog{flex:1;margin:0;}
  .walker{position:absolute;top:50%;left:0;font-size:1.5rem;line-height:1;z-index:2;
    transform:translate(-50%,-50%) scaleX(-1);}
  .walker.walk{animation:walkerStep .42s ease-in-out infinite;}
  .walker.arrived{animation:walkerFinish .7s cubic-bezier(.22,.9,.4,1.3) both;}
  @keyframes walkerStep{
    0%,100%{ transform:translate(-50%,-58%) scaleX(-1) rotate(8deg); }
    50%    { transform:translate(-50%,-42%) scaleX(-1) rotate(-8deg); }
  }
  @keyframes walkerFinish{
    0%  { transform:translate(-50%,-50%) scaleX(-1) scale(.85); }
    45% { transform:translate(-50%,-78%) scaleX(-1) scale(1.5) rotate(14deg); }
    70% { transform:translate(-50%,-58%) scaleX(-1) scale(1.15) rotate(-8deg); }
    100%{ transform:translate(-50%,-50%) scaleX(-1) scale(1); }
  }

  /* 화살표 모션 : 위/아래(엘리베이터)는 그 방향으로 둥실거리고,
     좌/우(회전)는 곡선을 그리듯 휘어지고, 직진(복도)은 앞으로 흘러가듯 반복한다. */
  .arrow.anim-lift{animation:arrowLiftUp 1.05s ease-in-out infinite;}
  .arrow.anim-lift.dir-down{animation:arrowLiftDown 1.05s ease-in-out infinite;}
  @keyframes arrowLiftUp{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(-12px); }
  }
  @keyframes arrowLiftDown{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(12px); }
  }
  .arrow.anim-turn.dir-left{animation:arrowTurnLeft 1.2s ease-in-out infinite;}
  .arrow.anim-turn.dir-right{animation:arrowTurnRight 1.2s ease-in-out infinite;}
  @keyframes arrowTurnLeft{
    0%,100%{ transform:translateX(0) rotate(0deg); }
    50%    { transform:translateX(-10px) rotate(-18deg); }
  }
  @keyframes arrowTurnRight{
    0%,100%{ transform:translateX(0) rotate(0deg); }
    50%    { transform:translateX(10px) rotate(18deg); }
  }
  .arrow.anim-straight{animation:arrowMarch 1s ease-in-out infinite;}
  @keyframes arrowMarch{
    0%  { transform:translateY(10px); opacity:.35; }
    50% { transform:translateY(-4px); opacity:1; }
    100%{ transform:translateY(-16px); opacity:0; }
  }
  @keyframes arrowArrive{
    0%  { transform:scale(.4); opacity:0; }
    60% { transform:scale(1.18); opacity:1; }
    100%{ transform:scale(1); }
  }

  /* s7 */
  #s7{align-items:center;justify-content:center;text-align:center;gap:1rem;}
  /* 도착 아이콘 : 체크가 그려지는 원형 배지 (브랜드 컬러 그라디언트 + 은은한 펄스 링) */
  #s7 .chk{width:5.25rem;height:5.25rem;margin:0 auto;
    filter:drop-shadow(0 0 14px rgba(57,255,136,.55));
    animation:arriveIconPop .6s cubic-bezier(.22,.9,.4,1.3) both;}
  #s7 .chk svg{width:100%;height:100%;display:block;}
  #s7 .chk .arriveRing{transform-origin:50% 50%;animation:arriveRingPulse 1.8s ease-out .5s infinite;}
  #s7 .chk .arriveCheck{stroke-dasharray:60;stroke-dashoffset:60;
    animation:arriveCheckDraw .5s .35s cubic-bezier(.65,0,.35,1) forwards;}
  @keyframes arriveIconPop{0%{transform:scale(.4);opacity:0;}60%{transform:scale(1.12);opacity:1;}100%{transform:scale(1);}}
  @keyframes arriveRingPulse{0%{opacity:.5;transform:scale(1);}100%{opacity:0;transform:scale(1.4);}}
  @keyframes arriveCheckDraw{to{stroke-dashoffset:0;}}
  #s7 h1{font-size:1.6875rem;font-weight:800;}
  #s7 p{color:#7C8AA0;font-size:0.875rem;}

  /* 도착 파티클 효과 (s6 마지막 단계 · s7 도착 화면 공용) */
  .particleLayer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:50;}
  .particleLayer .p{position:absolute;border-radius:50%;opacity:0;
    animation-name:particlePop;animation-timing-function:cubic-bezier(.16,.84,.44,1);animation-fill-mode:forwards;}
  @keyframes particlePop{
    0%  { transform:translate(-50%,-50%) scale(.2); opacity:1; }
    65% { opacity:1; }
    100%{ transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) scale(1); opacity:0; }
  }
  .particleLayer .ring{position:absolute;left:50%;top:50%;border-radius:50%;
    border:2px solid #00E5FF;opacity:0;transform:translate(-50%,-50%) scale(.3);
    animation:particleRing .9s cubic-bezier(.16,.84,.44,1) forwards;}
  @keyframes particleRing{
    0%  { transform:translate(-50%,-50%) scale(.2); opacity:.9; }
    100%{ transform:translate(-50%,-50%) scale(2.6); opacity:0; }
  }

  /* ============ 반응형 : 폰(갤럭시·아이폰)에서 전체화면 ============ */
  /* 데스크톱에서는 폰 목업 액자 + 설명 패널을 그대로 보여주고,
     화면이 좁으면(실제 휴대폰) 액자를 벗겨 앱이 화면을 꽉 채우게 한다. */
  /* ══ Lucide 아이콘 (js/app/icons.js) ══════════════════════════════════
     이모지·기호 글자를 Lucide 그림(<svg class="lc lc-이름">)으로 바꾼 것의 크기·색. 기본은 글자 크기에 맞춘다(1.15em).
     lcL = 글자 앞에 붙은 그림(오른쪽 간격) · lcR = 글자 뒤에 붙은 그림(왼쪽 간격) · lcFill = 채운 별(★) */
  .lc{width:1.15em;height:1.15em;vertical-align:-0.2em;stroke-width:2.2;flex:none;display:inline-block;}
  .lc.lcL{margin-right:0.3em;}
  .lc.lcR{margin-left:0.25em;}
  .lc.lcFill{fill:currentColor;}
  .topIcons .iconBtn .lc{width:1.3rem;height:1.3rem;margin:0;vertical-align:middle;}
  .topIcons .iconBtn .lc-house,.topIcons .iconBtn .lc-settings{color:#E7F6FF;}
  .topIcons .iconBtn .lc-star{color:#FFD43B;}
  #netBtn i{display:none;}                                   /* 인터넷 상태 : 녹색 점 → 와이파이 그림 */
  #netBtn .lcNetOn{color:#39FF88;width:1.15rem;height:1.15rem;}
  #netBtn .lcNetOff{display:none;color:#FFB33C;width:1.05rem;height:1.05rem;}
  #netBtn.netOff .lcNetOn{display:none;}
  #netBtn.netOff .lcNetOff{display:inline-block;}
  .back .lc,.fsBar .iconBtn .lc{width:1.35rem;height:1.35rem;margin:0;vertical-align:middle;}
  #s1 .logo .lc{width:5rem;height:5rem;color:#00E5FF;stroke-width:1.5;margin:0;}
  .cats button .ic .lc{width:2.4rem;height:2.4rem;stroke-width:1.8;margin:0;vertical-align:middle;}
  .cats .lc-door-open{color:#F2A65A;}                        /* 장소 종류 색 = 3D 색깔과 같은 계열 */
  .cats .lc-toilet{color:#5FA8D3;}
  .cats .lc-book-open{color:#A48BE0;}
  .cats .lc-siren{color:#FF6B6B;}
  .cats .lc-wrench{color:#7C8AA0;}
  #ar .lc{width:1em;height:1em;stroke-width:2.6;vertical-align:middle;margin:0;}
  #walkTrack .lc{width:1.1rem;height:1.1rem;vertical-align:middle;margin:0;}
  #walker .lc{width:1.35rem;height:1.35rem;color:#E7F6FF;}
  #sqrok .okTick .lc{width:3rem;height:3rem;color:#FF2E88;stroke-width:2;margin:0;}
  .favFloat .lc,.fsBtn .lc{width:1.25rem;height:1.25rem;margin:0;vertical-align:middle;}
  .ezBubble .ezIc .lc{width:1.7rem;height:1.7rem;color:#1F2A37;stroke-width:2;margin:0;}
  .izBtn .lc{margin:0;}
  @media (max-width: 640px){
    /* ---- 기기마다 화면 크기가 달라도 같은 비율로 보이게 ----
       설계 기준은 390 x 790 (1rem = 16px).
       가로는 화면 폭의 4.1%, 세로는 화면 높이의 2.03% 가 1rem 이 되게 하고,
       둘 중 작은 쪽을 쓴다 — 그래야 폭이 넓지만 키가 작은 폰에서 아래가 잘리지 않는다.
       너무 작아지거나(13.5px) 너무 커지지(19px) 않게 위아래로 막아 둔다.
       dvh 는 주소창이 접혔다 펴져도 흔들리지 않는 높이 단위(옛 브라우저는 윗줄 vh 를 쓴다). */
    html{ font-size:clamp(13.5px, min(4.1vw, 2.03vh), 19px); }
    html{ font-size:clamp(13.5px, min(4.1vw, 2.03dvh), 19px); }

    html,body{
      display:block; gap:0; height:100%;
      overflow:hidden;                       /* 바운스 스크롤 방지 */
      -webkit-text-size-adjust:100%;         /* 아이폰 자동 글자확대 방지 */
      overscroll-behavior:none;
    }
    /* .side 패널을 아예 삭제했으므로 여기서 숨길 필요도 없어짐 */
    .phone{
      width:100%; height:100%;
      border:none; border-radius:0;           /* 액자 제거 */
      box-shadow:none;
    }
    /* 상단 여백을 목업 상태바(26px) 대신 기기 노치(safe-area)에 맞춤 */
    .screen{
      top:0;
      padding-top:calc(1rem + env(safe-area-inset-top));
      padding-left:calc(1rem + env(safe-area-inset-left));
      padding-right:calc(1rem + env(safe-area-inset-right));
      padding-bottom:calc(1rem + env(safe-area-inset-bottom));
    }
    /* 터치 매끄럽게 : 파란 탭 하이라이트 제거, 세로 스와이프만 허용 */
    button, .btn, input{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
  }
  /* 아주 좁은 기기(구형 갤럭시 등)에서 키패드/버튼 글자 살짝 축소 */
  @media (max-width: 360px){
    .keypad button{ font-size:1.125rem; }
    .big{ padding:0.9375rem; font-size:1rem; }
  }

  /* ══════════════ QR 위치판별 (v42 신규) ══════════════ */
  #s1 .qrStart{background:transparent;color:#39FF88;border:1.5px solid #39FF88;border-radius:4px;
    padding:0.9375rem;font-size:0.9375rem;font-weight:800;cursor:pointer;font-family:inherit;width:100%;
    letter-spacing:.5px;display:flex;align-items:center;justify-content:center;gap:0.5rem;}
  #s1 .qrStart:hover{background:rgba(57,255,136,.10);box-shadow:0 0 18px rgba(57,255,136,.35);}
  #s1 .qrHint{color:#5D6B80;font-size:0.7188rem;line-height:1.5;margin-top:-0.375rem;}
  /* 첫 화면 '앱 다운로드는 설정에서' — 회색 설명들 사이에서 한눈에 보이게 노란색 */
  #s1 .appHint{color:#FFD54A;font-size:0.8125rem;font-weight:700;line-height:1.5;margin-top:-0.25rem;cursor:pointer;
    text-decoration:underline;text-decoration-color:rgba(255,213,74,.45);text-underline-offset:3px;}
  /* 앱 설치 안내 (js/app/pwa.js) */
  .pwaSheet{position:fixed;inset:0;background:rgba(5,6,10,.78);z-index:990;display:flex;align-items:flex-end;justify-content:center;}
  .pwaBox{background:#0D0F18;border:1px solid #1A1D2B;border-radius:1rem 1rem 0 0;width:100%;max-width:27.5rem;
    padding:1.125rem 1.125rem calc(1.125rem + env(safe-area-inset-bottom));box-shadow:0 0 40px rgba(0,229,255,.15);color:#E7F6FF;}
  .pwaHead{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.875rem;}
  .pwaHead img{width:3.5rem;height:3.5rem;border-radius:0.8125rem;}
  .pwaHead b{display:block;font-size:1rem;}
  .pwaHead span{display:block;color:#7C8AA0;font-size:0.75rem;margin-top:2px;}
  .pwaSteps{list-style:none;margin:0 0 0.875rem;padding:0;display:flex;flex-direction:column;gap:0.625rem;}
  .pwaSteps li{display:flex;align-items:center;gap:0.75rem;background:#131A24;border:1px solid #232D3A;border-radius:0.625rem;padding:0.625rem 0.75rem;font-size:0.8438rem;line-height:1.5;}
  .pwaSteps li i{font-style:normal;flex:0 0 22px;height:1.375rem;border-radius:50%;background:#00E5FF;color:#04121A;font-weight:800;font-size:0.75rem;text-align:center;line-height:1.375rem;}
  .pwaSteps li svg{flex:0 0 30px;width:1.875rem;height:1.875rem;}
  .pwaSteps li b{color:#FFD54A;}
  .pwaNote{color:#7C8AA0;font-size:0.75rem;line-height:1.55;margin:0 0 0.875rem;}
  .pwaBox button{width:100%;border-radius:0.625rem;padding:0.75rem 0;font-size:0.875rem;font-weight:700;font-family:inherit;cursor:pointer;
    background:#131A24;color:#E7F6FF;border:1px solid #2A3644;}
  .pwaBox button.go{background:#00E5FF;color:#04121A;border:0;}
  .pwaBox button + button{margin-top:0.5rem;}
  .pwaSteps li small{color:#7C8AA0;font-size:0.75rem;}
  #sset .offStat{color:#7C8AA0;font-size:0.7812rem;text-align:right;}

  #sqr .qrStage{position:relative;flex:1;min-height:0;border-radius:0.75rem;overflow:hidden;
    background:#05070B;border:1px solid #232D3A;display:flex;align-items:center;justify-content:center;}
  #sqr video{width:100%;height:100%;object-fit:cover;display:block;}
  #sqr .qrFrame{position:absolute;inset:0;pointer-events:none;}
  #sqr .qrFrame i{position:absolute;width:2.375rem;height:2.375rem;border:3px solid #00E5FF;}
  #sqr .qrFrame i:nth-child(1){top:22%;left:14%;border-right:0;border-bottom:0;border-radius:0.5rem 0 0 0;}
  #sqr .qrFrame i:nth-child(2){top:22%;right:14%;border-left:0;border-bottom:0;border-radius:0 0.5rem 0 0;}
  #sqr .qrFrame i:nth-child(3){bottom:22%;left:14%;border-right:0;border-top:0;border-radius:0 0 0 0.5rem;}
  #sqr .qrFrame i:nth-child(4){bottom:22%;right:14%;border-left:0;border-top:0;border-radius:0 0 0.5rem 0;}
  #sqr .qrLaser{position:absolute;left:14%;right:14%;height:2px;
    background:linear-gradient(90deg,transparent,#00E5FF,transparent);
    box-shadow:0 0 12px rgba(0,229,255,.8);animation:qrScanMove 2.4s ease-in-out infinite;}
  @keyframes qrScanMove{0%,100%{top:23%;}50%{top:77%;}}
  #sqr .qrOff{color:#7C8AA0;font-size:0.8125rem;line-height:1.7;text-align:center;padding:1.375rem;}
  #sqr .qrOff > b{color:#FFC93C;display:block;margin-bottom:0.5rem;font-size:0.875rem;}
  #sqr .qrOff span b{color:#E7F6FF;display:inline;font-size:inherit;margin:0;}
  #sqr .qrFix{display:block;width:100%;margin:1rem auto 0;max-width:17.5rem;
    background:linear-gradient(90deg,#00E5FF,#7B5CFF);color:#05060A;border:none;border-radius:0.375rem;
    padding:0.9375rem 0.75rem;font-size:0.9062rem;font-weight:800;font-family:inherit;cursor:pointer;}
  #sqr .qrFix:hover{box-shadow:0 0 18px rgba(0,229,255,.5);}
  #sqr .qrFix.ghost{background:transparent;color:#00E5FF;border:1px solid #00E5FF;
    margin-top:0.5rem;font-size:0.8125rem;padding:0.75rem;}
  #sqr .qrDiag{display:block;margin-top:0.875rem;color:#3E4A5C;font-size:0.6562rem;letter-spacing:.4px;}
  #sqr .qrStat{margin-top:0.625rem;font-size:0.8125rem;color:#7C8AA0;text-align:center;min-height:19px;flex:0 0 auto;}
  #sqr .qrStat.err{color:#FF6B6B;}
  #sqr .qrTools{display:flex;gap:0.5rem;margin-top:0.625rem;flex:0 0 auto;}
  #sqr .qrTools button{flex:1;background:transparent;color:#00E5FF;border:1px solid #2A3644;
    border-radius:0.375rem;padding:0.75rem 0.5rem;font-size:0.7812rem;font-family:inherit;cursor:pointer;font-weight:700;}
  #sqr .qrTools button:hover{border-color:#00E5FF;}
  #sqr .qrTools button.prime{background:rgba(0,229,255,.10);border-color:#00E5FF;}
  #sqr .qrManual{margin-top:0.625rem;flex:0 0 auto;}
  #sqr .qrManual .lbl{color:#5D6B80;font-size:0.7188rem;margin-bottom:0.375rem;text-align:center;}
  #sqr .qrManual .row{display:grid;grid-template-columns:repeat(4,1fr);gap:0.375rem;}
  #sqr .qrManual button{background:#131A24;color:#94B8E0;border:1px solid #232D3A;border-radius:0.375rem;
    padding:0.6875rem 0.25rem;font-size:0.7812rem;font-family:inherit;cursor:pointer;font-weight:700;}
  #sqr .qrManual button:hover{border-color:#7B5CFF;color:#E7F6FF;}

  #sqrok{align-items:center;text-align:center;}
  #sqrok .okWrap{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:0.875rem;width:100%;}
  #sqrok .okTick{font-size:2.75rem;line-height:1;}
  #sqrok .okName{font-size:1.625rem;font-weight:800;color:#39FF88;letter-spacing:-.5px;}
  #sqrok .okSub{color:#7C8AA0;font-size:0.8438rem;line-height:1.6;}
  #sqrok .okPhoto{width:auto;height:auto;max-width:100%;max-height:38vh;border-radius:0.75rem;border:1px solid #232D3A;
    object-fit:contain;background:#05070B;}   /* 11/05 세로 사진도 잘리지 않게 — 사진 비율 그대로 줄인다(예전 width 100% + cover) */
  #sqrok .okPhoto.hide{display:none;}
  #sqrok .okChip{display:inline-flex;align-items:center;gap:0.375rem;background:rgba(57,255,136,.10);
    border:1px solid rgba(57,255,136,.45);color:#39FF88;border-radius:62.4375rem;
    padding:0.375rem 0.8125rem;font-size:0.75rem;font-weight:700;}
  #sqrok .okBtns{width:100%;display:flex;flex-direction:column;gap:0.5rem;flex:0 0 auto;margin-top:0.75rem;}


  /* ══════════════ 사진 판별 AI (v44 신규) ══════════════ */
  #ssug .aiPrep{margin-top:0.625rem;font-size:0.75rem;color:#5D6B80;text-align:center;
    display:flex;align-items:center;justify-content:center;gap:0.4375rem;min-height:18px;}
  #ssug .aiPrep .dot{width:0.4375rem;height:0.4375rem;border-radius:50%;background:#3E4A5C;flex:0 0 auto;}
  #ssug .aiPrep.on .dot{background:#39FF88;box-shadow:0 0 8px rgba(57,255,136,.7);}
  #ssug .aiPrep.load .dot{background:#FFC93C;animation:aiPulse 1s ease-in-out infinite;}
  #ssug .aiPrep.off .dot{background:#5D6B80;}
  @keyframes aiPulse{0%,100%{opacity:.35;}50%{opacity:1;}}

  #ssug .aiCard{margin-top:0.75rem;border:1px solid #232D3A;border-radius:0.625rem;padding:0.75rem;
    background:#0E141C;display:none;}
  #ssug .aiCard.on{display:block;}
  #ssug .aiCard .hd{display:flex;align-items:center;gap:0.5rem;font-size:0.8125rem;font-weight:800;margin-bottom:0.4375rem;}
  #ssug .aiCard .hd .tag{font-size:0.6562rem;padding:2px 0.4375rem;border-radius:62.4375rem;font-weight:800;letter-spacing:.3px;}
  #ssug .aiCard .body{font-size:0.7812rem;color:#94B8E0;line-height:1.65;}
  #ssug .aiCard .why{margin-top:0.4375rem;font-size:0.6875rem;color:#5D6B80;}
  .aiOk   {background:rgba(57,255,136,.13);color:#39FF88;}
  .aiWarn {background:rgba(255,201,60,.13);color:#FFC93C;}
  .aiBad  {background:rgba(255,107,107,.13);color:#FF6B6B;}
  .aiInfo {background:rgba(0,229,255,.12);color:#00E5FF;}

  /* 관리자 화면 AI 배지 */
  #sadmin .sugAi{margin:0.4375rem 0 0.3125rem;padding:0.5rem 0.625rem;border-radius:0.5rem;background:#0E141C;
    border:1px solid #232D3A;font-size:0.7188rem;line-height:1.6;}
  #sadmin .sugAi .row1{display:flex;align-items:center;gap:0.375rem;flex-wrap:wrap;margin-bottom:0.25rem;}
  #sadmin .sugAi .tag{font-size:0.625rem;padding:2px 0.4375rem;border-radius:62.4375rem;font-weight:800;}
  #sadmin .sugAi .num{color:#7C8AA0;font-size:0.6562rem;}
  #sadmin .sugAi .cands{display:flex;gap:0.3125rem;flex-wrap:wrap;margin-top:0.3125rem;}
  #sadmin .sugAi .cands button{background:#131A24;color:#94B8E0;border:1px solid #2A3644;
    border-radius:62.4375rem;padding:0.3125rem 0.625rem;font-size:0.6875rem;font-family:inherit;cursor:pointer;font-weight:700;}
  #sadmin .sugAi .cands button:hover{border-color:#00E5FF;color:#E7F6FF;}
  #sadmin .sugAi .qr{color:#39FF88;}
  #sadmin .sugAi .where{margin:0.375rem 0 0.25rem;padding:0.5rem 0.625rem;border-radius:0.4375rem;background:#131A24;
    border-left:3px solid #00E5FF;font-size:0.75rem;line-height:1.55;color:#E7F6FF;}
  #sadmin .sugAi .where b{color:#00E5FF;}
  #sadmin .sugAi .where .sub{display:block;color:#7C8AA0;font-size:0.6875rem;margin-top:2px;}
  #sadmin .sugAi .where.low{border-left-color:#FFC93C;}
  #sadmin .sugAi .where.low b{color:#FFC93C;}
  /* v83 : 후보 평면도 */
  #sadmin .sugAi .cands .rk{display:inline-block;min-width:15px;height:0.9375rem;line-height:0.9375rem;margin-right:0.25rem;border-radius:62.4375rem;
    background:#1E2A3A;color:#E7F6FF;font-size:0.625rem;font-weight:800;text-align:center;}
  #sadmin .sugAi .cands button:first-child .rk{background:#00E5FF;color:#04121A;}
  #sadmin .aiMap{margin-top:0.4375rem;}
  #sadmin .aiMap .fl{font-size:0.6562rem;color:#94B8E0;margin:0.375rem 0 0.1875rem;}
  #sadmin .aiMap .fl b{color:#E7F6FF;}
  #sadmin .aiMap svg{display:block;width:100%;max-width:28.75rem;height:auto;background:#0B1017;border:1px solid #1E2733;border-radius:0.375rem;}
  #sadmin .aiMap .o{fill:#101822;stroke:#2A3644;stroke-width:.25;}
  #sadmin .aiMap .r{fill:#16202C;stroke:#223041;stroke-width:.15;}
  #sadmin .aiMap .c{fill:#0C1219;}
  #sadmin .aiMap .k{fill:#1C2838;stroke:#33445A;stroke-width:.15;}
  #sadmin .aiMap .t{fill:#62748C;font-size:1.6px;}
  #sadmin .aiMap .z{fill:rgba(0,229,255,.10);stroke:rgba(0,229,255,.55);stroke-width:.2;stroke-dasharray:.7 .5;}
  #sadmin .aiMap .d{fill:#131A24;stroke:#94B8E0;stroke-width:.3;}
  #sadmin .aiMap .d1{fill:#00E5FF;stroke:#E7F6FF;stroke-width:.3;}
  #sadmin .aiMap .ap{stroke-dasharray:.6 .45;}
  #sadmin .aiMap .n{fill:#E7F6FF;font-size:1.9px;font-weight:800;text-anchor:middle;dominant-baseline:central;}
  #sadmin .aiMap .n1{fill:#04121A;}
  #sadmin .aiMapNote{font-size:0.625rem;color:#7C8AA0;margin-top:0.25rem;line-height:1.45;}


  /* ══════════════ AI 자동 학습·분류 (v45 신규) ══════════════ */
  #phsort .aiBar{display:flex;gap:0.5rem;margin-bottom:0.625rem;flex:0 0 auto;}
  #phsort .aiBar button{flex:1;background:linear-gradient(90deg,#00E5FF,#7B5CFF);color:#05060A;
    border:none;border-radius:0.375rem;padding:0.75rem 0.5rem;font-size:0.8125rem;font-weight:800;
    font-family:inherit;cursor:pointer;}
  #phsort .aiBar button:disabled{background:#1A2230;color:#5D6B80;cursor:default;}
  #phsort .aiBar button.ghost{background:transparent;color:#00E5FF;border:1px solid #2A3644;font-weight:700;}
  #phsort .aiProg{font-size:0.7188rem;color:#7C8AA0;text-align:center;margin-bottom:0.5rem;min-height:16px;}

  #phsort .pit .aiRec{display:block;margin-top:0.25rem;font-size:0.6562rem;color:#39FF88;font-weight:700;}
  #phsort .pit .aiRec.warn{color:#FFC93C;}
  #phsort .pit .aiRec.newp{color:#FF2E88;}

  /* 새 장소 묶음 */
  #phsort .newGroups{margin-bottom:0.625rem;}
  #phsort .ngCard{background:#0E141C;border:1px solid #2A3644;border-radius:0.625rem;
    padding:0.625rem;margin-bottom:0.5rem;}
  #phsort .ngCard .ngHd{font-size:0.7812rem;font-weight:800;color:#FF2E88;margin-bottom:0.375rem;}
  #phsort .ngCard .ngThumbs{display:flex;gap:0.3125rem;flex-wrap:wrap;margin-bottom:0.5rem;}
  #phsort .ngCard .ngThumbs img{width:2.875rem;height:2.875rem;object-fit:cover;border-radius:0.375rem;
    border:1px solid #232D3A;}
  #phsort .ngCard .ngRow{display:flex;gap:0.375rem;}
  #phsort .ngCard input{flex:1;background:#131A24;border:1px solid #2A3644;color:#E7F6FF;
    border-radius:0.375rem;padding:0.625rem;font-size:0.7812rem;font-family:inherit;}
  #phsort .ngCard button{background:rgba(57,255,136,.14);color:#39FF88;border:1px solid rgba(57,255,136,.5);
    border-radius:0.375rem;padding:0.625rem 0.875rem;font-size:0.7812rem;font-weight:800;font-family:inherit;cursor:pointer;}
  #phsort .ngCard .ngTip{font-size:0.6562rem;color:#5D6B80;margin-top:0.375rem;line-height:1.5;}

  /* 학습 현황 (사진 등록 화면) */
  #sph .aiLearn{margin-top:0.625rem;font-size:0.7188rem;color:#5D6B80;text-align:center;line-height:1.6;}

  /* ── v55 : AI 사진 파악 자료집 ───────────────────────────── */
  /* 화면 전체가 아래로 스크롤되게 (전체 사진 관리와 같은 느낌) */
  #saidat{overflow-y:auto;-webkit-overflow-scrolling:touch;display:block;}
  #saidat .aidWhat{background:#0D1420;border:1px solid #1D2B3E;border-radius:0.75rem;padding:0.75rem 0.8125rem;
    font-size:0.75rem;line-height:1.6;color:#8FA6C0;margin-bottom:0.625rem;}
  #saidat .aidWhat b{color:#39FF88;font-weight:600;}
  #saidat .aidWhat .warn{color:#FFC93C;}
  #saidat .aidStat{background:#0D0F18;border:1px solid #1A1D2B;border-radius:0.75rem;padding:0.6875rem 0.8125rem;
    font-size:0.7812rem;color:#94B8E0;line-height:1.6;}
  #saidat .aidStat b{color:#E7F6FF;}
  #saidat .aidStat .sub{display:block;color:#5D6B80;font-size:0.7188rem;margin-top:0.1875rem;}
  #saidat .aidBox{margin-top:0.625rem;background:#0B0E14;border:1px solid #1A1D2B;border-radius:0.75rem;padding:0.75rem;}
  #saidat .aidLab{font-size:0.75rem;color:#7C8AA0;margin-bottom:0.375rem;}
  #saidat input[type=text]{width:100%;background:#111722;border:1px solid #2A3644;border-radius:0.5625rem;
    color:#E7F6FF;font-size:0.9375rem;padding:0.625rem 0.6875rem;}
  #saidat .aidHit{margin-top:0.375rem;font-size:0.75rem;color:#39FF88;min-height:17px;}
  #saidat .aidHit.bad{color:#FF6B6B;}
  #saidat .aidDrop{margin-top:0.625rem;border:2px dashed #2A3345;border-radius:0.875rem;padding:1.25rem 0.875rem;
    text-align:center;color:#7C8AA0;font-size:0.7812rem;line-height:1.7;background:#0D0F18;cursor:pointer;}
  #saidat .aidDrop.over{border-color:#00E5FF;background:rgba(0,229,255,.08);}
  #saidat .aidDrop b{color:#39FF88;font-weight:600;}
  #saidat .aidDrop .ic{font-size:1.375rem;display:block;margin-bottom:0.375rem;}
  #saidat .aidFloor{color:#94B8E0;font-size:0.75rem;font-weight:700;margin:1rem 0 0.4375rem;padding-bottom:0.3125rem;
    border-bottom:1px solid #1E2735;display:flex;align-items:center;gap:0.4375rem;}
  #saidat .aidFloor:first-child{margin-top:0;}
  #saidat .aidFloor .n{color:#39FF88;font-weight:600;}
  #saidat .aidFloor .none{color:#4A5566;font-weight:400;}
  #saidat .aidStage{margin-top:0.625rem;background:#0B1017;border:1px solid #1E2735;border-radius:0.75rem;padding:0.625rem;}
  #saidat .aidStage .sHd{display:flex;align-items:center;gap:0.5rem;font-size:0.75rem;color:#94B8E0;margin-bottom:0.5rem;flex-wrap:wrap;}
  #saidat .aidStage .sHd .auto{color:#39FF88;}
  #saidat .aidStage .sHd .miss{color:#FFC93C;}
  #saidat .aidStage .sRows{max-height:18.75rem;overflow-y:auto;-webkit-overflow-scrolling:touch;
    display:flex;flex-direction:column;gap:0.3125rem;}
  #saidat .aidStage .sRow{display:flex;align-items:center;gap:0.4375rem;background:#131A24;border:1px solid #232D3A;
    border-radius:0.5625rem;padding:0.375rem;}
  #saidat .aidStage .sRow.none{border-color:#4A3A18;background:#171208;}
  #saidat .aidStage .sRow img{width:2.375rem;height:2.375rem;object-fit:cover;border-radius:0.375rem;flex:0 0 auto;background:#05060A;}
  #saidat .aidStage .sName{flex:1 1 auto;min-width:0;font-size:0.6875rem;color:#7C8AA0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #saidat .aidStage .sName b{display:block;color:#E7F6FF;font-size:0.7188rem;font-weight:600;}
  #saidat .aidStage input.sCode{flex:0 0 96px;width:6rem;background:#0D131C;border:1px solid #2A3644;
    border-radius:0.4375rem;color:#E7F6FF;font-size:0.8125rem;padding:0.375rem 0.4375rem;text-align:center;}
  #saidat .aidStage .sRow .x{background:none;border:none;color:#6A7686;font-size:0.875rem;padding:2px 0.25rem;flex:0 0 auto;}
  #saidat .aidProg{margin-top:0.5625rem;font-size:0.75rem;color:#7C8AA0;min-height:16px;}
  #saidat .aidProg .bar2{margin-top:0.3125rem;height:0.3125rem;background:#161C26;border-radius:3px;overflow:hidden;}
  #saidat .aidProg .bar2 i{display:block;height:100%;width:0;background:#39FF88;transition:width .2s;}
  #saidat .aidList{margin-top:0.75rem;display:flex;flex-direction:column;gap:0.5rem;padding-bottom:0.5rem;}
  #saidat .aidCard{background:#0D0F18;border:1px solid #1A1D2B;border-radius:0.75rem;padding:0.625rem;}
  #saidat .aidCard .hd{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;}
  #saidat .aidCard .nm{flex:1;min-width:0;color:#E7F6FF;font-size:0.8125rem;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #saidat .aidCard .cnt{color:#39FF88;font-size:0.75rem;flex:0 0 auto;}
  #saidat .aidCard .del{background:#1A1116;color:#FF8A8A;border:1px solid #3A2028;border-radius:0.5rem;
    padding:0.3125rem 0.5625rem;font-size:0.7188rem;flex:0 0 auto;}
  #saidat .aidThumbs{display:flex;gap:0.375rem;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
  #saidat .aidThumbs .t{position:relative;flex:0 0 auto;width:4.125rem;height:4.125rem;}
  #saidat .aidThumbs img{width:4.125rem;height:4.125rem;object-fit:cover;border-radius:0.5rem;background:#05060A;
    cursor:zoom-in;display:block;}
  #saidat .aidThumbs .vw{position:absolute;left:0;right:0;bottom:0;background:rgba(5,8,14,.82);
    color:#94B8E0;font-size:0.5938rem;line-height:0.875rem;height:0.875rem;text-align:center;
    border-radius:0 0 0.5rem 0.5rem;white-space:nowrap;overflow:hidden;pointer-events:none;}
  #saidat .aidCard .views{margin-top:0.4375rem;font-size:0.6875rem;color:#5D6B80;line-height:1.5;}
  #saidat .aidCard .views b{color:#39FF88;font-weight:600;}
  /* ── v57 : 어디인지 고르기 ─────────────────────────────── */
  #spick{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:1.75rem;}
  #spick .pkTop{display:flex;gap:0.75rem;align-items:flex-start;margin:0.25rem 2px 0.875rem;}
  #spick .pkTop img{width:7rem;height:7rem;object-fit:contain;border-radius:0.75rem;
    border:1px solid rgba(90,140,200,.30);background:#0A1018;flex:0 0 auto;}
  #spick .pkWhy{font-size:0.7812rem;color:#7C8AA0;line-height:1.7;}
  #spick .pkWhy b{color:#94B8E0;font-weight:600;}
  #spick .pkWhy .hi{color:#39FF88;}
  #spick .pkLab{font-size:0.75rem;color:#5D6B80;margin:0.875rem 2px 0.5rem;letter-spacing:.2px;}
  #spick .pkQ{width:100%;padding:0.6875rem 0.8125rem;border-radius:0.75rem;font-size:0.875rem;margin:0 0 0.625rem;
    background:rgba(10,18,30,.9);color:#E8EDF2;border:1px solid rgba(90,140,200,.30);}
  #spick .pkQ::placeholder{color:#4A5566;}
  #spick .pkFloors{display:flex;flex-wrap:wrap;gap:0.4375rem;margin:0 0 0.75rem;}
  #spick .pkFloors button{flex:0 0 auto;padding:0.5625rem 0.8125rem;border-radius:62.4375rem;font-size:0.7812rem;
    background:rgba(20,32,50,.85);color:#94B8E0;border:1px solid rgba(90,140,200,.28);}
  #spick .pkFloors button.on{background:linear-gradient(135deg,#39FF88,#00C2FF);color:#06111C;font-weight:700;border-color:transparent;}
  #spick .pkGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:0.5625rem;}
  #spick .pkGrid:empty{display:none;}
  #spick .pkCard{background:rgba(14,22,36,.92);border:1px solid rgba(90,140,200,.22);
    border-radius:0.75rem;overflow:hidden;text-align:left;padding:0 0 0.4375rem;}
  #spick .pkCard img{width:100%;height:4.875rem;object-fit:contain;display:block;background:#0A1018;}   /* 11/05 사진 전체(예전 cover) */
  #spick .pkCard .noimg{width:100%;height:4.875rem;display:flex;align-items:center;justify-content:center;
    color:#3C4A5A;font-size:1.375rem;background:#0A1018;}
  #spick .pkCard .nm{display:block;font-size:0.75rem;color:#E8EDF2;font-weight:600;margin:0.375rem 0.4375rem 0;line-height:1.35;}
  #spick .pkCard .sub{display:block;font-size:0.6562rem;color:#6B7A90;margin:2px 0.4375rem 0;line-height:1.35;}
  #spick .pkCard .sim{display:inline-block;font-size:0.625rem;color:#39FF88;margin:0.1875rem 0.4375rem 0;}
  #spick .pkCard.best{border-color:rgba(57,255,136,.55);}
  #saidat .aidThumbs .t.mine img{outline:2px solid #FFD166;outline-offset:-2px;}
  #saidat .aidExportRow{margin:0.875rem 0 0.25rem;}
  #saidat .aidExportRow .big{background:linear-gradient(135deg,#39FF88,#00C2FF);color:#06111C;font-weight:700;}
  #saidat .aidExportNote{font-size:0.7188rem;color:#7C8AA0;line-height:1.65;margin:0.375rem 2px 0;}
  #saidat .aidExportNote b{color:#94B8E0;font-weight:600;}
  #saidat .aidThumbs .x{position:absolute;top:-0.25rem;right:-0.25rem;width:1.25rem;height:1.25rem;border-radius:50%;
    background:#2A1218;border:1px solid #4A2430;color:#FF8A8A;font-size:0.6875rem;line-height:1.125rem;text-align:center;padding:0;}
  #saidat .aidEmpty{color:#5A6472;font-size:0.8125rem;text-align:center;padding:1.875rem 0.625rem;line-height:1.7;}
  #saidat .mini{margin-top:0.5rem;font-size:0.7188rem;color:#5D6B80;line-height:1.6;}
  #sph .aiLearn b{color:#39FF88;}

  /* 메모 힌트 표시 */
  #sadmin .sugAi .hint{color:#00E5FF;}

  /* 출발지 배지 — 목적지 화면(s4)에 현재 출발 문을 표시 */
  .entryChip{display:inline-flex;align-items:center;gap:0.3125rem;background:rgba(57,255,136,.09);
    border:1px solid rgba(57,255,136,.4);color:#39FF88;border-radius:62.4375rem;
    padding:0.25rem 0.625rem;font-size:0.6875rem;font-weight:700;margin-left:0.375rem;vertical-align:middle;}

  /* ══ 2026-10-18 : 메모 · 초성 검색 안내 · 건의함 하루 3번 · 구성 및 변경 (js/app/roomfix.js · suggest.js) ══ */
  /* 관리자가 메모를 적은 방만 회색 한 줄 — 검색 결과(이름 아래) · 3D 화면(제목 아래) · 도착 화면(방 이름 아래) */
  .rfMemo{display:block;font-size:0.7812rem;color:#8FA3BC;font-weight:600;line-height:1.45;margin-top:0.1875rem;
    text-transform:none;letter-spacing:0;word-break:keep-all;}
  .nresults button .nm .rfMemo{font-weight:600;}
  .cats .rfMemo{margin-top:0.125rem;}
  #t4memo{margin:-0.125rem 0.125rem 0.5rem;font-size:0.8125rem;color:#9FB2C8;flex:0 0 auto;}
  #s4.fsMode #t4memo{display:none;}
  #t7memo{margin:-0.375rem 0 0;font-size:0.875rem;color:#9FB2C8;text-align:center;}
  .choTip{margin:0 0.125rem 0.625rem;padding:0.5rem 0.625rem;border-radius:0.625rem;background:rgba(255,212,59,.08);
    border:1px solid rgba(255,212,59,.35);color:#FFE9A3;font-size:0.8125rem;line-height:1.5;flex:0 0 auto;}

  /* 건의함 : 오늘 올릴 수 있는 횟수 · 다 쓰면 경고 상자 */
  .sugQuota{display:flex;align-items:center;justify-content:center;gap:0.375rem;margin-top:0.625rem;padding:0.5rem 0.75rem;
    border-radius:2rem;background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.45);color:#9FEFFF;font-size:0.8125rem;font-weight:700;}
  .sugQuota b{color:#E7F6FF;font-size:0.9375rem;}
  .sugQuota.full{background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.5);color:#FFB4B4;}
  .sugQuota.full b{color:#FFE1E1;}
  /* 관리자 : 금색 「관리자」 딱지 + 숫자 대신 무한(∞) — 2026-10-19 사용자가 사진 ③ 을 고름 */
  .sugQuota.admin{background:rgba(255,212,59,.10);border-color:rgba(255,212,59,.6);color:#FFE9A3;}
  .sugQuota .adm{background:#FFD43B;color:#1A1500;font-size:0.7188rem;padding:0.125rem 0.5rem;border-radius:2rem;margin-right:0.125rem;}
  .sugQuota .inf{display:inline-flex;color:#FFD43B;}
  .sugQuota .inf .lc{width:1.75em;height:1.75em;margin:-0.25rem 0;stroke-width:2.4;vertical-align:middle;}
  .sugQuotaFull{display:none;margin-top:0.625rem;padding:0.75rem 0.875rem;border-radius:0.75rem;background:rgba(255,179,60,.10);
    border:1px solid #FFB33C;color:#FFE1B0;font-size:0.875rem;line-height:1.55;word-break:keep-all;}
  .sugQuotaFull.on{display:block;}
  .sugQuotaFull .t{display:block;color:#FFB33C;font-size:0.9375rem;font-weight:800;margin-bottom:0.25rem;}
  .sugQuotaFull .warn{display:block;margin-top:0.375rem;color:#FF5252;font-size:0.9375rem;font-weight:800;}
  .sugQuotaFull small{display:block;color:#C9B98F;font-size:0.8125rem;}
  #ssug .big.sugOff{opacity:.35;}

  /* 관리자 「구성 및 변경」 — 층 상세(5번) 화면을 고치는 모드로 빌려 쓴다 */
  #s5:not(.rfEdit) .rfOnly{display:none;}
  #s5.rfEdit{overflow-y:auto;}
  #s5.rfEdit>.tip,#s5.rfEdit>.legend2,#s5.rfEdit>.big{display:none;}
  #s5.rfEdit #cfd{min-height:11rem;touch-action:none;}
  #s5.rfEdit:not(.rfOpen):not(.rfListOn) #cfd{min-height:18rem;}
  #s5.rfListOn #cfd,#s5.rfListOn .rfHint,#s5.rfListOn .rfPanel,#s5.rfListOn .rfFloors{display:none;}
  #s5:not(.rfListOn) .rfList{display:none;}
  .rfTop{display:flex;flex-direction:column;gap:0.375rem;margin:0.375rem 0 0.5rem;flex:0 0 auto;}
  .rfFloors{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0.3125rem;}
  .rfFloors button{min-width:0;min-height:40px;background:#121722;border:1px solid #2A3646;color:#C7D3E3;border-radius:0.625rem;
    font-weight:700;font-size:0.8125rem;font-family:inherit;cursor:pointer;}
  .rfFloors button.on{background:#00E5FF;color:#04121A;border-color:#00E5FF;}
  .rfListBtn{align-self:flex-end;background:none;border:1px solid #2A3646;color:#9FEFFF;border-radius:2rem;padding:0.375rem 0.75rem;
    font-weight:700;font-size:0.75rem;font-family:inherit;cursor:pointer;}
  .rfHint{font-size:0.75rem;color:#8FA3BC;text-align:center;margin:0.375rem 0 0;flex:0 0 auto;}
  #s5.rfOpen .rfHint{display:none;}
  .rfPanel{flex:0 0 auto;}
  .rfPanel:empty{display:none;}
  .rfPanel{margin-top:0.625rem;background:#101622;border:1px solid #2A3646;border-radius:1rem;padding:0.875rem 1rem 1rem;}
  .rfHead{display:flex;justify-content:space-between;align-items:center;gap:0.5rem;}
  .rfHead b{color:#E7F6FF;font-size:1rem;}
  .rfX{background:none;border:none;color:#8FA3BC;font-size:1.125rem;cursor:pointer;padding:0.25rem;}
  .rfRow{display:flex;gap:0.625rem;}
  .rfRow .rfL{flex:1;min-width:0;}
  .rfRow .rfNoL{flex:0 0 38%;}
  .rfL{display:block;font-size:0.75rem;color:#8FA3BC;margin-top:0.625rem;}
  .rfL input{display:block;width:100%;box-sizing:border-box;margin-top:0.25rem;padding:0.625rem 0.75rem;border-radius:0.625rem;
    border:1px solid #2A3646;background:#0B0E13;color:#E7F6FF;font-weight:600;font-size:1rem;font-family:inherit;}
  .rfL input:focus{outline:none;border-color:#00E5FF;}
  .rfL input.bad{border-color:#FF6B6B;color:#FFB4B4;}
  .rfErr{color:#FFB4B4;font-size:0.8125rem;font-weight:700;margin-top:0.5rem;line-height:1.45;}
  .rfErr:empty{display:none;}
  .rfChips{display:flex;gap:0.375rem;flex-wrap:wrap;margin-top:0.375rem;}
  .rfChip{display:inline-flex;align-items:center;gap:0.375rem;padding:0.4375rem 0.625rem;border-radius:0.625rem;border:1px solid #2A3646;
    background:#0B0E13;color:#8FA3BC;font-weight:700;font-size:0.8125rem;font-family:inherit;cursor:pointer;}
  .rfChip .bx{width:16px;height:16px;border-radius:4px;border:1.5px solid #4A5A70;box-sizing:border-box;display:inline-flex;
    align-items:center;justify-content:center;font-weight:900;font-size:12px;font-family:inherit;}
  .rfChip.on{border-color:#00E5FF;background:rgba(0,229,255,.10);color:#BFF4FF;}
  .rfChip.on .bx{background:#00E5FF;border-color:#00E5FF;color:#04121A;}
  .rfChip.on .bx::after{content:'✓';}
  .rfTip{margin-top:0.5rem;font-size:0.75rem;color:#FFD43B;line-height:1.45;}
  .rfBtns{display:flex;gap:0.5rem;margin-top:0.75rem;}
  .rfBtns .big{flex:1;margin:0;padding:0.875rem;font-size:0.9375rem;}
  .rfDone{display:flex;align-items:center;gap:0.625rem;background:rgba(57,255,136,.12);border:1px solid #39FF88;border-radius:0.75rem;
    padding:0.75rem 0.875rem;color:#BFF5D3;font-size:0.9375rem;font-weight:700;line-height:1.45;}
  .rfDone small{display:block;font-weight:600;color:#8FD8A8;font-size:0.8125rem;margin-top:0.125rem;word-break:keep-all;}
  .rfDone .rfOk{flex:0 0 auto;}
  .rfList{display:flex;flex-direction:column;gap:0.625rem;margin-top:0.375rem;}
  .rfItem{background:#131A24;border:1px solid #232D3A;border-radius:0.75rem;padding:0.75rem 0.875rem;}
  .rfItemHd{display:flex;justify-content:space-between;align-items:center;gap:0.5rem;}
  .rfItemHd b{color:#E7F6FF;font-size:0.9375rem;}
  .rfItemHd button{padding:0.3125rem 0.625rem;border-radius:0.5rem;font-size:0.75rem;font-family:inherit;cursor:pointer;flex:0 0 auto;}
  .rfItemTx{color:#C3CFDE;font-size:0.875rem;margin-top:0.375rem;}
  .rfItemTx b{color:#FFD43B;}
  .rfItemEx{color:#8FA3BC;font-size:0.75rem;margin-top:0.25rem;line-height:1.45;word-break:keep-all;}
  .rfItemTs{color:#7C8AA0;font-size:0.75rem;margin-top:0.375rem;}
  .rfEmpty{text-align:center;color:#7C8AA0;font-size:0.75rem;margin:0.25rem 0;}

  /* ══ 2026-10-19 : 오른쪽 위 세 줄(☰) 메뉴 · 버튼 테두리 3px · 밝은 화면 (js/app/topmenu.js) ══
     사용자가 사진 견본(밝은화면_견본 9~11)과 움직이는 견본(펼치는 속도 0.12~0.4초)을 보고 고른 것. */

  /* ── 세 줄(☰) 메뉴 : 오른쪽 위 모서리에서 커지며 나타나고, 줄이 위에서부터 차례로 ── */
  :root{--tmDur:220ms;}                                   /* 펼치는 데 0.22초 (사용자) · 닫힐 때는 0.7배 */
  .tmMenu{position:relative;}
  .tmBtn{color:#E7F6FF;transition:background .15s,color .15s;}
  .tmMenu.tmOpen .tmBtn{background:#00E5FF;color:#04121A;border-color:#00E5FF;}
  .tmList{position:absolute;top:calc(100% + 0.5rem);right:0;width:13.25rem;padding:0.375rem;display:flex;flex-direction:column;
    background:#121822;border:3px solid #34465E;border-radius:0.875rem;box-shadow:0 10px 28px rgba(0,0,0,.55);
    transform-origin:top right;transform:scale(.6);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform calc(var(--tmDur) * .7) ease-in,opacity calc(var(--tmDur) * .7) ease-in,visibility 0s linear calc(var(--tmDur) * .7);}
  .tmMenu.tmOpen .tmList{transform:none;opacity:1;visibility:visible;pointer-events:auto;
    transition:transform var(--tmDur) cubic-bezier(.2,.9,.3,1.12),opacity var(--tmDur) ease-out,visibility 0s;}
  .tmList .ln{display:flex;align-items:center;gap:0.75rem;width:100%;padding:0.75rem 0.625rem;border:0;border-radius:0.625rem;
    background:none;color:#E7F6FF;font-family:inherit;font-size:0.9375rem;font-weight:700;text-align:left;cursor:pointer;
    opacity:0;transform:translateY(-8px);transition:opacity calc(var(--tmDur) * .5),transform calc(var(--tmDur) * .5);}
  .tmList .ln + .ln{border-top:1px solid #1C2532;border-radius:0;}
  .tmList .ln:active{background:rgba(0,229,255,.12);}
  .tmMenu.tmOpen .tmList .ln{opacity:1;transform:none;transition:opacity var(--tmDur) ease-out,transform var(--tmDur) cubic-bezier(.2,.9,.3,1);}
  .tmMenu.tmOpen .tmList .ln:nth-child(1){transition-delay:calc(var(--tmDur) * .15);}
  .tmMenu.tmOpen .tmList .ln:nth-child(2){transition-delay:calc(var(--tmDur) * .3);}
  .tmMenu.tmOpen .tmList .ln:nth-child(3){transition-delay:calc(var(--tmDur) * .45);}
  .tmMenu.tmOpen .tmList .ln:nth-child(4){transition-delay:calc(var(--tmDur) * .6);}
  .tmList .ln .lc{width:1.25rem;height:1.25rem;margin:0;flex:none;color:#E7F6FF;}
  .tmList .ln .lc-sun,.tmList .ln .lc-star{color:#FFD43B;}
  .tmSw{margin-left:auto;width:2.5rem;height:1.4375rem;border-radius:0.75rem;background:#3A4C64;position:relative;flex:none;transition:background .15s;}
  .tmSw::after{content:"";position:absolute;top:3px;left:3px;width:1.0625rem;height:1.0625rem;border-radius:50%;background:#FFFFFF;transition:left .15s;}
  .tmSw.on{background:#0B6FB8;}
  .tmSw.on::after{left:calc(100% - 1.0625rem - 3px);}
  @media (prefers-reduced-motion: reduce){ .tmList,.tmList .ln,.tmMenu.tmOpen .tmList,.tmMenu.tmOpen .tmList .ln{transition:none !important;} }

  /* ── 버튼 테두리 3px (사용자 : 「지금도 너무 얇다, 3px 까지만」) — 어두운 화면 · 밝은 화면 모두 ── */
  .back,.ghost,.iconBtn,.cats button,.nresults button,.recentItem .rrow,.floorpick button,.sfbtns button,
  .trip,.trip.ghost2,.navrow .big#pv,#s1 .qrStart,.binfo,.nsearch input,.sugFloorRow button,#sfav .favItem{border-width:3px;border-style:solid;}
  /* 누르는 칸의 테두리 색 = 차분한 하늘색 (2026-10-19 사용자가 회색 · 하늘색 · 보라 사진을 보고 고름 — 앱 대표색 #00E5FF 와 한 가족,
     선택된 버튼(꽉 찬 하늘색) · 목적지 층(분홍)은 따로). 어두운 화면 #1FA9C9 · 밝은 화면 #2B88C8(아래 「밝은 화면」 묶음) */
  .cats button,.nresults button,.recentItem .rrow,.binfo,.nsearch input,#sfav .favItem{border-color:#1FA9C9;}
  .floorpick button,.sfbtns button,.trip,.sugFloorRow button{border-color:#1FA9C9;}

  /* ── 밝은 화면 (html.lt) : 흰 바탕 · 진한 남색 글자 · 강조는 진한 파랑 #0B6FB8 · 글자 크기는 그대로 ──
     관리자 화면 · QR 카메라 화면은 어두운 채로 둔다(topmenu.js 가 .dk 를 붙인다). 3D 건물 바탕(하늘색)·사진은 그대로. */
  html.lt,html.lt body{background:#EEF3F8;color:#0F1B2D;}
  html.lt .phone{background:#EEF3F8;}
  html.lt .screen.dk{background:#0B0E13;color:#E7F6FF;}
  html.lt .topIcons .iconBtn{background:rgba(255,255,255,.94);border-color:#0B6FB8;color:#0B6FB8;box-shadow:0 1px 4px rgba(15,27,45,.12);}
  html.lt #netBtn .lcNetOn{color:#16A34A;}
  html.lt .tmBtn{color:#0F1B2D;}
  html.lt .tmMenu.tmOpen .tmBtn{background:#0B6FB8;color:#FFFFFF;border-color:#0B6FB8;}
  html.lt .tmList{background:#FFFFFF;border-color:#AEBCCD;box-shadow:0 10px 28px rgba(15,27,45,.18);}
  html.lt .tmList .ln{color:#0F1B2D;}
  html.lt .tmList .ln + .ln{border-top-color:#E3E9F0;}
  html.lt .tmList .ln .lc{color:#0F1B2D;}
  html.lt .tmList .ln .lc-sun,html.lt .tmList .ln .lc-star{color:#D99A00;}
  html.lt .tmList .ln:active{background:rgba(11,111,184,.10);}
  html.lt .tmSw{background:#C5D0DC;}
  html.lt .tmSw.on{background:#0B6FB8;}
  html.lt .screen:not(.dk) .back{background:#FFFFFF;border-color:#0B6FB8;color:#0B6FB8;}
  html.lt .screen:not(.dk) .ghost{background:#FFFFFF;color:#0B6FB8;border-color:#0B6FB8;}
  html.lt .screen:not(.dk) .ghost.langActive{background:linear-gradient(90deg,#00E5FF,#7B5CFF);color:#05060A;border-color:transparent;}
  html.lt .screen:not(.dk) .tip,html.lt .screen:not(.dk) .tripst,html.lt .screen:not(.dk) .stepno,
  html.lt .screen:not(.dk) .sflabel,html.lt .screen:not(.dk) .legend2{color:#44546A;}
  html.lt .screen:not(.dk) .rfMemo{color:#53647A;}
  html.lt #t4memo,html.lt #t7memo{color:#44546A;}
  /* 첫 화면 */
  html.lt #s1 p,html.lt #s1 .qrHint{color:#44546A;}
  html.lt #s1 .logo .lc{color:#0891B2;}
  html.lt #s1 .qrStart{color:#0E8A45;border-color:#0E8A45;background:#FFFFFF;}
  html.lt #s1 .appHint{color:#A26A00;text-decoration-color:rgba(162,106,0,.45);}
  /* 무엇을 찾으세요? */
  html.lt .screen:not(.dk) .cats button{background:#FFFFFF;border-color:#2B88C8;color:#0F1B2D;box-shadow:0 1px 3px rgba(15,27,45,.06);}
  html.lt .screen:not(.dk) .cats button small{color:#44546A;}
  html.lt .cats .lc-door-open{color:#D9700F;} html.lt .cats .lc-toilet{color:#1F78B4;} html.lt .cats .lc-book-open{color:#6B4FC0;}
  html.lt .cats .lc-siren{color:#D92D2D;} html.lt .cats .lc-wrench{color:#64748B;}
  /* 검색 */
  html.lt .nsearch input{background:#FFFFFF;border-color:#2B88C8;color:#0F1B2D;}
  html.lt .nsearch input:focus{border-color:#0B6FB8;box-shadow:0 0 0 3px rgba(11,111,184,.15);}
  html.lt .nsearch input::placeholder{color:#6B7A8E;}
  html.lt .nresults button{background:#FFFFFF;border-color:#2B88C8;color:#0F1B2D;}
  html.lt .nresults button .rc{color:#0B6FB8;}
  html.lt .nresults .none,html.lt .recentLabel{color:#44546A;}
  html.lt .recentItem .rrow{background:#FFFFFF;border-color:#2B88C8;}
  html.lt .recentItem .rtxt{color:#2A3A4E;}
  html.lt .recentItem .ric,html.lt .recentItem .rx,html.lt .recentEmpty{color:#6B7A8E;}
  html.lt .choTip{background:#FFF6D6;border-color:#E6B800;color:#5C4400;}
  /* 3D 화면 */
  html.lt #c3d{border-color:#C5D0DC;}
  html.lt .legend3d{background:rgba(255,255,255,.9);color:#0F1B2D;border-color:#C5D0DC;}
  html.lt .screen:not(.dk) .trip{background:#FFFFFF;border-color:#2B88C8;color:#0B6FB8;}
  html.lt .screen:not(.dk) .trip.ghost2{background:#FFFFFF;border-color:#0B6FB8;color:#0B6FB8;}
  html.lt .screen:not(.dk) .trip.on{background:linear-gradient(90deg,#00E5FF,#7B5CFF);border-color:#00E5FF;color:#05060A;}
  html.lt .floorpick button{background:#FFFFFF;border-color:#2B88C8;color:#44546A;}
  html.lt .floorpick button.tgt{border-color:#E0115F;color:#0F1B2D;}
  html.lt .floorpick button.on{background:#0B6FB8;color:#FFFFFF;border-color:#0B6FB8;}
  html.lt .startfloor{border-top-color:#D3DCE6;}
  html.lt .sfbtns button{background:#FFFFFF;border-color:#2B88C8;color:#44546A;}
  html.lt .sfbtns button.on{background:rgba(11,111,184,.12);color:#0B6FB8;border-color:#0B6FB8;}
  html.lt .entryChip{background:rgba(14,138,69,.08);border-color:rgba(14,138,69,.45);color:#0E8A45;}
  /* 층 상세 (지도 바탕은 topmenu.js 가 바꾼다) */
  html.lt #cfd{background:#DCE4EE;border-color:#C5D0DC;}
  /* 길안내 · 도착 */
  html.lt .instr{color:#0F1B2D;}
  html.lt .arrow{color:#E0115F;text-shadow:none;}
  html.lt .arrow.done{color:#0E9F4F;text-shadow:none;}
  html.lt .prog i{background:#D3DCE6;}
  html.lt .prog i.on{background:#0B6FB8;box-shadow:none;}
  html.lt #walker .lc{color:#0F1B2D;}
  html.lt .screen:not(.dk) .photo{background:#FFFFFF;}
  html.lt .navrow .big#pv{background:#FFFFFF;border-color:#0B6FB8;color:#0B6FB8;}
  html.lt #s7 p{color:#44546A;}
  html.lt #s7 #arriveGrad stop:first-child{stop-color:#0891B2;}
  html.lt #s7 #arriveGrad stop:last-child{stop-color:#0E9F4F;}
  /* 여기가 맞나요? (건물 · QR) */
  html.lt .binfo{background:#FFFFFF;border-color:#2B88C8;box-shadow:0 1px 3px rgba(15,27,45,.06);}
  html.lt .binfo p{color:#44546A;}
  html.lt .binfo p span{color:#3B6A9A !important;}
  html.lt #sqrok .okName{color:#0E8A45;}
  html.lt #sqrok .okSub{color:#44546A;}
  html.lt #sqrok .okPhoto{border-color:#C5D0DC;}
  html.lt #sqrok .okChip{background:rgba(14,138,69,.08);border-color:rgba(14,138,69,.45);color:#0E8A45;}
  /* 설정 · 이용안내 · 즐겨찾기 */
  html.lt #sset .row,html.lt #sguide .card{background:#FFFFFF;border-color:#D3DCE6;}
  html.lt #sset .row b{color:#0F1B2D;}
  html.lt #sset .offStat{color:#53647A;}
  html.lt #sguide h4{color:#0B6FB8;}
  html.lt #sguide p,html.lt #sguide li{color:#2A3A4E;}
  html.lt #sfav .favItem{background:#FFFFFF;border-color:#2B88C8;color:#0F1B2D;}
  html.lt #sfav .favEmpty,html.lt #sfav .favRemove{color:#6B7A8E;}
  /* 건의함 */
  html.lt #ssug .card{background:#FFFFFF;border-color:#D3DCE6;}
  html.lt #ssug .card p{color:#2A3A4E;}
  html.lt #ssug .card h4{color:#0B6FB8;}
  html.lt #ssug .shot{background:#F6F9FC;border-color:#AEBCCD;color:#44546A;}
  html.lt #ssug .shot.has{border-color:#0B6FB8;}
  html.lt #ssug .shot2{border-color:#8FA9C8;color:#2E5A8A;}
  html.lt #ssug textarea{background:#FFFFFF;border-color:#AEBCCD;color:#0F1B2D;}
  html.lt .sugFloorRow{color:#44546A;}
  html.lt .sugFloorRow button{background:#FFFFFF;color:#2E5A8A;border-color:#2B88C8;}
  html.lt .sugFloorRow button.on{background:rgba(14,138,69,.10);color:#0E8A45;border-color:#0E8A45;}
  html.lt .sugTip{background:#F6F9FC;border-color:#AEBCCD;color:#44546A;}
  html.lt .sugTip b{color:#2E5A8A;}
  html.lt #ssug .sugStat,html.lt #ssug .sugSync{filter:brightness(.55) saturate(1.3);}   /* 글자 색을 코드가 정하므로(초록·빨강) 어둡게만 */
  html.lt #ssug .aiPrep{color:#53647A;}
  html.lt #ssug .aiCard{background:#F6F9FC;border-color:#D3DCE6;}
  html.lt #ssug .aiCard .body{color:#2E5A8A;}
  html.lt #ssug .aiCard .why{color:#53647A;}
  html.lt .sugQuota{background:rgba(11,111,184,.08);border-color:#0B6FB8;color:#0B6FB8;}
  html.lt .sugQuota b{color:#0F1B2D;}
  html.lt .sugQuota.full{background:rgba(211,47,47,.06);border-color:#D32F2F;color:#B42323;}
  html.lt .sugQuota.full b{color:#7A1414;}
  html.lt .sugQuota.admin{background:#FFF6D6;border-color:#E6B800;color:#5C4400;}
  html.lt .sugQuota.admin .inf{color:#A26A00;}
  html.lt .sugQuotaFull{background:#FFF4E0;border-color:#E69A00;color:#5C3D00;}
  html.lt .sugQuotaFull .t{color:#B86E00;}
  html.lt .sugQuotaFull .warn{color:#D32F2F;}
  html.lt .sugQuotaFull small{color:#6B5A3A;}

  /* ══ 2026-10-19 : 길안내 이어 하기 (js/app/resume.js) — 첫 화면 아래 카드 · 이어서 볼 때 위에 잠깐 뜨는 안내 ══ */
  .rsCard{position:absolute;left:0.75rem;right:0.75rem;bottom:calc(0.75rem + env(safe-area-inset-bottom));z-index:70;
    background:#121822;border:3px solid #1FA9C9;border-radius:1.125rem;padding:0.875rem 0.875rem 0.75rem;
    box-shadow:0 -0.5rem 2rem rgba(0,0,0,.55);color:#E7F6FF;animation:rsUp .28s cubic-bezier(.2,.9,.3,1.05);}
  @keyframes rsUp{ from{transform:translateY(1.5rem);opacity:0;} to{transform:none;opacity:1;} }
  .rsHead{display:flex;align-items:center;gap:0.5rem;font-weight:800;font-size:1rem;color:#9FEFFF;}
  .rsHead .lc{width:1.3rem;height:1.3rem;margin:0;}
  .rsBody{display:flex;gap:0.75rem;align-items:center;margin:0.625rem 0 0.75rem;padding:0.5rem;border-radius:0.75rem;background:rgba(0,229,255,.06);}
  .rsBody img{width:3.4rem;height:4.5rem;object-fit:contain;background:#05060A;border-radius:0.5rem;border:2px solid #FF2E88;flex:none;}
  .rsBody b{display:block;font-size:1.0625rem;line-height:1.35;word-break:keep-all;}
  .rsBody small{display:block;font-size:0.8125rem;color:#9FB2C8;margin-top:0.1875rem;line-height:1.4;word-break:keep-all;}
  .rsBody .pg{display:inline-block;margin-top:0.3125rem;padding:0.125rem 0.5rem;border-radius:1rem;background:#00E5FF;color:#04121A;font-size:0.75rem;font-weight:800;}
  .rsCard .big{margin:0;padding:0.875rem;font-size:1rem;}
  .rsCard .big + .big{margin-top:0.5rem;}
  .rsToast{position:absolute;left:50%;top:calc(4.25rem + env(safe-area-inset-top));transform:translateX(-50%);z-index:70;white-space:nowrap;
    background:#0E3B2A;border:2px solid #39FF88;color:#BFF5D3;font-weight:800;font-size:0.875rem;padding:0.5rem 0.875rem;border-radius:2rem;
    box-shadow:0 0.375rem 1.25rem rgba(0,0,0,.45);transition:opacity .4s;pointer-events:none;}
  .rsToast.out{opacity:0;}
  html.lt .rsCard{background:#FFFFFF;border-color:#2B88C8;color:#0F1B2D;box-shadow:0 -0.5rem 2rem rgba(15,27,45,.22);}
  html.lt .rsHead{color:#0B6FB8;}
  html.lt .rsBody{background:rgba(11,111,184,.07);}
  html.lt .rsBody small{color:#44546A;}
  html.lt .rsBody .pg{background:#0B6FB8;color:#FFFFFF;}
  html.lt .rsCard .ghost{background:#FFFFFF;color:#0B6FB8;border-color:#0B6FB8;}
  html.lt .rsToast{background:#E6F6EC;border-color:#0E8A45;color:#0E5A2E;}

  /* ══ 쉬운 사용모드 · 사진으로 보는 이용안내 (js/app/easy.js · howto.js) ══
     2026-10-18 시험 페이지(easy.css)로 만들어 사용자가 폰으로 만져 봄 → 2026-10-20 본 앱으로 옮김(사용자).
     실제 화면 위에 「여기를 누르세요」— 누를 곳만 노란 빛 테두리 · 👆 · 말풍선 한 문장. 덮개는 눌림을 통과시킨다. */
  .ezMain{display:flex;align-items:center;gap:0.75rem;width:100%;padding:0.6875rem 0.875rem;border-radius:0.875rem;
    border:2px solid #FFD43B;background:rgba(255,212,59,.10);color:#FFE27A;font-family:inherit;cursor:pointer;text-align:left;}
  .ezMain .ic{font-size:1.875rem;line-height:1;}
  .ezMain .tx{flex:1;min-width:0;}
  .ezMain .tx b{display:block;font-size:1.0625rem;color:#FFE27A;}
  .ezMain .tx small{display:block;font-size:0.75rem;color:#C9B66B;margin-top:0.125rem;}
  .ezMain .ezState{flex:none;font-size:0.8125rem;font-weight:800;border-radius:1rem;padding:0.3125rem 0.75rem;
    border:1px solid #6B5E2E;color:#C9B66B;}
  .ezMain.isOn .ezState{background:#FFD43B;border-color:#FFD43B;color:#1A1500;}
  .ezRowBtn.isOn{background:#FFD43B !important;border-color:#FFD43B !important;color:#1A1500 !important;}
  .ezLayer{position:absolute;inset:0;z-index:55;pointer-events:none;display:none;}
  .ezLayer.on{display:block;}
  /* 주변을 어둡게 덮지 않는다 (.52 → .28 → .12 → 없음) — 사용자 : 해가 쨍쨍할 때 많이 쓰는데 폰에서 앱이 너무 어둡다.
     앱 밝기는 쉬운 사용모드를 끈 때와 똑같고, 누를 곳은 노란 테두리·손가락·말풍선으로만 알려 준다. */
  .ezSpot{position:absolute;border-radius:0.875rem;box-shadow:none;transition:all .25s ease;}
  .ezRing{position:absolute;border-radius:0.875rem;border:3px solid #FFD43B;transition:all .25s ease;animation:ezRing 1.4s ease-out infinite;
    }   /* 밝은 버튼 위에서도 노란 테두리가 보이게 바깥에 얇은 짙은 선 — outline 은 아이폰 16.3 이하에서 둥근 모서리를 안 따라가 네모로 보여서(2026-10-20 종합검진) 그림자 첫 겹으로 그린다 */
  @keyframes ezRing{0%{box-shadow:0 0 0 2px rgba(26,21,0,.55),0 0 0 2px rgba(255,212,59,.75)}100%{box-shadow:0 0 0 2px rgba(26,21,0,.55),0 0 0 1.125rem rgba(255,212,59,0)}}
  .ezFinger{position:absolute;font-size:2.25rem;line-height:1;transition:left .25s ease,top .25s ease;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.75));animation:ezTap 1.4s ease-in-out infinite;}
  @keyframes ezTap{0%,100%{transform:translate(0,0) scale(1)}45%{transform:translate(-0.25rem,-0.375rem) scale(1.05)}60%{transform:translate(0,0) scale(.94)}}   /* 덜 튀게 — 옆 글자를 건드리지 않게 */
  .ezGap{flex:0 0 auto;width:100%;pointer-events:none;}   /* 말풍선이 앉을 빈칸 — 사진이 없는 화면에서만 */
  .ezHid{visibility:hidden !important;}   /* 말풍선이 그 자리에 앉는 동안만 — 같은 뜻의 안내 글·진행 표시 */
  .ezBubble{position:absolute;left:0.75rem;right:0.75rem;display:flex;align-items:center;gap:0.625rem;
    background:#FFF7D6;color:#1A1A1A;border-radius:1rem;padding:0.75rem 0.75rem 0.75rem 0.875rem;
    box-shadow:0 0.5rem 1.5rem rgba(0,0,0,.5);transition:top .25s ease;}
  .ezBubble.pop{animation:ezPop .35s ease;}
  .ezBubble.compact{padding:0.25rem 0.375rem 0.25rem 0.75rem;gap:0.5rem;}   /* 좁은 자리용 — 한 문장만 */
  .ezBubble.compact .ezIc{font-size:1.375rem;}
  .ezBubble.compact .ezTx b{font-size:0.9375rem;line-height:1.3;}
  .ezBubble.compact .ezTx small{display:none !important;}
  .ezBubble.compact .ezOff{width:1.5rem;height:1.5rem;font-size:0.75rem;}
  .ezBubble .ezIc.num{font-size:0.875rem;font-weight:800;color:#1A1500;background:#FFD43B;border-radius:1rem;padding:0.3125rem 0.5rem;letter-spacing:-.3px;}
  @keyframes ezPop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}
  .ezBubble .ezIc{font-size:1.875rem;line-height:1;flex:none;}
  .ezBubble .ezTx{flex:1;min-width:0;word-break:keep-all;overflow-wrap:break-word;}   /* 낱말 중간에서 줄 바꾸지 않게 */
  .ezBubble .ezTx b{display:block;font-size:1.125rem;line-height:1.35;letter-spacing:-.3px;}
  .ezBubble .ezTx small{display:block;font-size:0.8125rem;color:#5A5440;margin-top:0.1875rem;line-height:1.4;}
  .ezBubble .ezOff{pointer-events:auto;flex:none;width:2.25rem;height:2.25rem;border-radius:50%;border:none;
    background:rgba(0,0,0,.08);color:#5A5440;font-size:1rem;cursor:pointer;font-family:inherit;}
  /* 쉬운 사용모드 켜기/끄기 — 따로 한 단계(사용자 2026-10-20 : 초록 글과 동시에 뜨면 안 된다).
     앱을 가리는 불투명 바탕 · 켜는 화면(.fx-boot 950) 바로 아래(940) : 초록 화면이 스캔으로 걷히면 이 화면이 드러나고, 답하면 앱이 보인다. */
  .ezAsk{position:absolute;inset:0;z-index:940;background:#0B0E13;display:flex;align-items:center;justify-content:center;padding:1.25rem;}
  .ezAsk .card{width:100%;background:#121722;border:2px solid #FFD43B;border-radius:1.25rem;padding:1.5rem 1.25rem 1.125rem;text-align:center;
    animation:ezPop .35s ease;}
  .ezAsk .ic{font-size:3.5rem;line-height:1;animation:ezTap 1.4s ease-in-out infinite;}
  .ezAsk b{display:block;font-size:1.5rem;margin:0.75rem 0 0.375rem;color:#FFE27A;}
  .ezAsk p{margin:0 0 0.75rem;color:#C7D3E3;font-size:1rem;line-height:1.5;}
  .ezAsk .note{display:inline-block;margin:0 0 1rem;padding:0.4375rem 0.875rem;border-radius:2rem;
    background:rgba(255,212,59,.16);border:1.5px solid #FFD43B;color:#FFD43B;font-size:0.9375rem;font-weight:800;line-height:1.4;}
  .ezAsk .big{margin-top:0.5rem;}
  /* 처음이 아닌 사람 — 「쉬운 사용모드  지금 꺼짐」 (2026-11-03 : 켜는 화면이 끝날 때마다 묻는다) */
  .ezAsk b .now{display:inline-block;vertical-align:middle;margin-left:.5rem;padding:.2rem .65rem;border-radius:2rem;font-size:.8rem;font-weight:800;color:#0B0E13;background:#FFD43B;}
  
  /* ── 이용안내 (howto.js) — 실제 화면 사진 + 번호 설명. 그림의 노란 번호 = 설명 번호 ── */
  #sguide h4 small{color:#7C8AA0;font-weight:600;font-size:0.75rem;}
  .hwBody{color:#C3CFDE;}
  .hwLead{font-size:1rem;color:#E7F6FF;font-weight:700;line-height:1.5;margin:0.25rem 0 0.75rem;word-break:keep-all;}
  .hwHead{font-size:0.9375rem;color:#FFD43B;margin:1.25rem 0 0.5rem;word-break:keep-all;}
  .hwShot{margin:0 auto 0.875rem;width:64%;max-width:15rem;cursor:zoom-in;}
  .hwShot img{width:100%;display:block;border-radius:0.75rem;border:1px solid #2A3646;box-shadow:0 0.375rem 1.25rem rgba(0,0,0,.45);background:#0B0E13;aspect-ratio:540/1169;}
  .hwShot figcaption{text-align:center;font-size:0.75rem;color:#8FA3BC;margin-top:0.375rem;}
  .hwList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.75rem;}
  .hwList li{display:flex;gap:0.625rem;align-items:flex-start;}
  .hwList i{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;background:#FFD43B;color:#111;font-style:normal;font-weight:800;
    font-size:0.8125rem;line-height:1.5rem;text-align:center;box-shadow:0 0 0 2px #111;margin-top:0.0625rem;}
  .hwList div{flex:1;min-width:0;word-break:keep-all;overflow-wrap:break-word;}
  .hwList b{display:block;color:#E7F6FF;font-size:0.9375rem;line-height:1.4;}
  .hwList span{display:block;color:#C3CFDE;font-size:0.875rem;line-height:1.6;margin-top:0.125rem;}
  .hwTip{margin-top:1rem;padding:0.625rem 0.75rem;border-radius:0.625rem;background:rgba(255,212,59,.10);border:1px solid rgba(255,212,59,.45);
    color:#FFE9A3;font-size:0.875rem;line-height:1.6;word-break:keep-all;}
  
  /* 밝은 화면 (2026-10-19 사용자 : 「쉬운 사용모드」 노란 글씨와 설명이 흰 바탕에서 잘 안 보인다) — 진한 황토색 글씨 · 연한 노랑 바탕 */
  html.lt .ezMain{background:#FFF6D6;border-color:#D9A800;color:#5C4400;}
  html.lt .ezMain .tx b{color:#7A5200;}
  html.lt .ezMain .tx small{color:#5C4A1F;}
  html.lt .ezMain .ezState{background:#FFFFFF;border-color:#C9A227;color:#7A5200;}
  html.lt .ezMain.isOn .ezState{background:#FFD43B;border-color:#D9A800;color:#1A1500;}
  html.lt .ezBubble{border:2px solid #D9A800;box-shadow:0 0.5rem 1.5rem rgba(15,27,45,.28);}
  html.lt .ezBubble .ezTx small{color:#4A4230;}
  html.lt .hwBody,html.lt .hwList span{color:#2A3A4E;}
  html.lt .hwLead,html.lt .hwList b{color:#0F1B2D;}
  html.lt .hwHead{color:#8A5D00;}
  html.lt .hwShot img{border-color:#C5D0DC;box-shadow:0 0.375rem 1.25rem rgba(15,27,45,.18);}
  html.lt .hwShot figcaption,html.lt #sguide h4 small{color:#53647A;}
  html.lt .hwTip{background:#FFF6D6;border-color:#D9A800;color:#5C4400;}

  /* ══ 폰을 가로로 눕히면 (2026-10-20 종합검진) ══
     화면들은 세로로 긴 폰에 맞춰 만들었고(manifest 도 portrait), 가로로 눕힌 폰은 폭이 넓어 컴퓨터용 액자(390×790)가 떠서
     위(← · ☰)와 아래가 잘린 채 움직일 수도 없었다(아이폰은 manifest 의 방향 고정을 따르지 않는다).
     → 손가락으로 쓰는 기기를 가로로 낮게 눕혔을 때만 「세로로 돌려 주세요」 한 장을 덮는다. 세우면 그대로 이어진다. */
  @media (pointer: coarse) and (orientation: landscape) and (max-height: 500px){
    body::after{content:'📱  휴대폰을 세로로 돌려 주세요\A\APlease turn your phone upright';white-space:pre;text-align:center;
      position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;
      background:#0B0E13;color:#E7F6FF;font:800 20px/1.6 'Pretendard','맑은 고딕','Malgun Gothic',sans-serif;}
  }

  /* 3D(WebGL)를 못 쓰는 폰 — 3D 칸 자리의 알림 (view3d.js makeNoGLRenderer · 2026-10-20 종합검진) */
  .noGL{flex:1;min-height:8rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.375rem;text-align:center;
    padding:1rem;border-radius:0.875rem;border:1px dashed #2A3646;color:#9FB3C8;font-size:0.9375rem;line-height:1.6;word-break:keep-all;}
  .noGL b{color:#E7F6FF;}
  .noGL small{font-size:0.75rem;color:#6B7A90;}
  html.lt .noGL{border-color:#AEBCCD;color:#44546A;}
  html.lt .noGL b{color:#0F1B2D;}
  html.noGL3d #s4 > .triprow, html.noGL3d #fsBtn{display:none !important;}

  /* ══ 길안내 · 도착 화면 — 인스타 감성 + 공항 표지판 (2026-10-28 사용자 · js/app/story.js) ══
     견본(생성물\견본_재출발_사진주인공_표지판_접속수\9_합친3_눌러보기.html)을 사용자가 고쳐 가며 정한 모양 그대로 :
       · 실제 사진이 화면 맨 위부터 맨 아래까지(위 검은 칸 · 아래 흐린 바탕 없이) — 경로 · 단계 막대 · 위치는 사진 위에
       · 아래는 공항 안내판 : 노란 칸 그림(직진 = 굵은 화살표 · 좌/우회전 = 앱의 원래 화살표 · 엘리베이터 그림 · 도착 ✓) + 큰 글 + 영어
       · 사진을 누르면 누른 곳이 2배(「🔍 누르면 크게 / 작게」) · 좌우로 밀면 이전 · 다음
     밝은 화면에서도 이 두 화면은 사진 + 표지판 그대로 둔다. */
  #s6.story,#s7.story{padding:0 !important;overflow:hidden;background:#000;display:block;text-align:left;}
  #s6.story > .bar,#s6.story > .walkTrack,#s6.story > .stepno,#s6.story > #ar,#s6.story > #ins{display:none !important;}
  #s7.story > .chk,#s7.story > h1,#s7.story > p{display:none !important;}
  #s6.story #ph,#s7.story #ph7{position:absolute;inset:0;margin:0;width:auto;height:auto;max-height:none;min-height:0;
    border:0;border-radius:0;background:#000;color:#8A8A8A;z-index:0;cursor:pointer;touch-action:pan-y;}
  #s6.story #ph img,#s7.story #ph7 img{transition:transform .38s ease;will-change:transform;-webkit-user-drag:none;user-select:none;}
  #s6.story.zoomed #ph img,#s7.story.zoomed #ph7 img{transform:scale(2);}
  /* 사진 전체가 보이게 (2026-11-05 사용자 「길안내 사진이 너무 확대돼 전체가 안 보인다」)
     예전 : 사진으로 화면을 꽉 채워(cover) 폰에서는 세로 사진 양옆 · 가로 사진은 2/3 가 잘렸다.
     지금 : 사진 전체를 위 칸(경로 · 단계 · 자리)과 아래 안내판 사이에 통째로(contain) 넣고, 둘레는 같은 사진을 흐리게 깔아 채운다.
     --phT · --phB = 위 칸 · 아래 칸 높이(story.js 가 그릴 때마다 잰다). 괄호 안 값은 재기 전 기본값. */
  #s6.story #ph::before,#s7.story #ph7::before{content:"";position:absolute;inset:-3rem;z-index:0;pointer-events:none;
    background:#000 var(--phBg,none) center/cover no-repeat;filter:blur(1.5rem) brightness(.4);}
  #s6.story #ph img,#s7.story #ph7 img{position:absolute;left:0;top:var(--phT,10.5rem);z-index:1;width:100% !important;
    height:calc(100% - var(--phT,10.5rem) - var(--phB,15rem)) !important;object-fit:contain !important;}
  #s7.story #ph7 img{top:var(--phT,8.5rem);height:calc(100% - var(--phT,8.5rem) - var(--phB,10rem)) !important;}
  @media (max-height:700px){ #s6.story .stHint{display:none;} }   /* 작은 폰은 사진 자리를 조금이라도 더 — 「누르면 크게」 칩은 위에 그대로 */
  #s6.story #ph .cap,#s6.story #ph .zm,#s7.story #ph7 .cap,#s7.story #ph7 .zm{display:none;}
  #s6.story #ph .cnt,#s7.story #ph7 .cnt{top:auto;right:0.9rem;bottom:auto;z-index:4;background:rgba(15,15,16,.92);color:#FFC400;
    border:1.5px solid #FFC400;border-radius:0.375rem;font-size:0.75rem;font-weight:900;padding:0.3rem 0.6rem;}
  #s6.story #ph .cnt{top:calc(env(safe-area-inset-top) + 8.85rem);}
  #s7.story #ph7 .cnt{top:calc(env(safe-area-inset-top) + 11.1rem);}
  .stShade{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to top,rgba(10,10,11,.8) 0,rgba(10,10,11,.3) calc(var(--phB,15rem) - 1rem),rgba(10,10,11,0) var(--phB,15rem));}   /* 사진 아래(안내판 뒤)만 어둡게 — 사진은 가리지 않는다 */
  .stTop{position:absolute;left:0;right:0;top:0;z-index:3;padding:calc(3.55rem + env(safe-area-inset-top)) 0.9rem 1.5rem;
    background:linear-gradient(to bottom,rgba(0,0,0,.62) 0%,rgba(0,0,0,.3) 62%,rgba(0,0,0,0) 100%);color:#fff;}
  .stTop .row{display:flex;align-items:center;gap:0.5rem;font-size:0.85rem;font-weight:800;color:#EDEDED;text-shadow:0 1px 5px rgba(0,0,0,.85);}
  .stTop .row .rt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .stTop .row b{color:#FFC400;font-size:1rem;}
  .stTop .stBack{flex:none;width:2rem;height:2rem;border-radius:50%;border:1.5px solid #FFC400;background:rgba(15,15,16,.8);color:#FFC400;
    display:flex;align-items:center;justify-content:center;padding:0;font:900 1rem inherit;font-family:inherit;cursor:pointer;}
  .stTop .stBack .lc{width:1.05rem;height:1.05rem;margin:0;}
  .stSegs{display:flex;gap:0.22rem;margin-top:0.55rem;}
  .stSegs i{flex:1;height:0.32rem;background:rgba(255,255,255,.38);box-shadow:0 1px 4px rgba(0,0,0,.35);}
  .stSegs i.on{background:#FFC400;}
  .stWhere{display:inline-flex;align-items:center;gap:0.3rem;margin-top:0.55rem;max-width:100%;font-size:0.75rem;font-weight:800;color:#fff;
    border-left:3px solid #FFC400;padding:0.25rem 0.5rem;background:#1E1F22;border-radius:0.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 8.5rem);}
  .stWhere svg{flex:none;width:0.9rem;height:0.9rem;}
  /* [엘리베이터 | 계단] — 2026-11-05 사용자 「계단으로 올라가면서 라이브」 (story.js · guide.js GUIDE_VIA) */
  .stVia{display:flex;width:max-content;max-width:calc(100% - 8.5rem);margin-top:0.45rem;border:1.5px solid #FFC400;border-radius:0.375rem;overflow:hidden;
    background:rgba(15,15,16,.9);box-shadow:0 4px 14px rgba(0,0,0,.4);}
  .stVia[hidden]{display:none;}
  .stVia button{display:flex;align-items:center;gap:0.3rem;margin:0;padding:0.36rem 0.62rem;border:0;border-radius:0;background:transparent;color:#FFC400;
    font:inherit;font-size:0.8rem;font-weight:900;cursor:pointer;white-space:nowrap;}
  .stVia button + button{border-left:1.5px solid #FFC400;}
  .stVia button.on{background:#FFC400;color:#111;}
  .stVia .vi{flex:none;width:1rem;height:1rem;}
  .stZm{position:absolute;right:0.9rem;z-index:4;display:flex;align-items:center;gap:0.3rem;background:rgba(15,15,16,.92);color:#FFC400;
    font-size:0.78rem;font-weight:900;padding:0.3rem 0.6rem;border-radius:0.375rem;pointer-events:none;}
  .stZm svg{width:0.95rem;height:0.95rem;flex:none;}
  #s6 .stZm{top:calc(env(safe-area-inset-top) + 6.97rem);}
  #s7 .stZm{top:calc(env(safe-area-inset-top) + 9.2rem);}
  .stEdge{position:absolute;top:44%;z-index:2;font-size:1.6rem;color:rgba(255,255,255,.55);text-shadow:0 1px 8px rgba(0,0,0,.6);pointer-events:none;}
  .stEdge.l{left:0.35rem;} .stEdge.r{right:0.35rem;}
  .stBottom{position:absolute;left:0.8rem;right:0.8rem;bottom:calc(0.8rem + env(safe-area-inset-bottom));z-index:3;}
  .stSign{display:flex;background:rgba(15,15,16,.96);border-radius:0.375rem;overflow:hidden;min-height:6.4rem;box-shadow:0 10px 30px rgba(0,0,0,.5);}
  .stSign .ic{flex:none;width:5.8rem;background:#FFC400;display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .stSign .ic svg{width:68%;height:68%;}
  .stSign .tx{flex:1;min-width:0;padding:0.75rem 0.85rem;display:flex;flex-direction:column;justify-content:center;word-break:keep-all;}
  .stSign .ko{font-size:1.28rem;line-height:1.24;font-weight:900;letter-spacing:-0.02em;color:#fff;}
  .stSign .ko.long{font-size:1.05rem;}
  .stSign .en{font-size:0.75rem;color:#B5B5B5;font-weight:700;margin-top:0.3rem;}
  .stSign .ic.turnR svg{animation:stTurnR 1.2s ease-in-out infinite;}
  .stSign .ic.turnL svg{animation:stTurnL 1.2s ease-in-out infinite;}
  @keyframes stTurnR{0%,100%{transform:translateX(0) rotate(0deg);}50%{transform:translateX(9%) rotate(18deg);}}
  @keyframes stTurnL{0%,100%{transform:translateX(0) rotate(0deg);}50%{transform:translateX(-9%) rotate(-18deg);}}
  .stBottom .navrow{margin-top:0.55rem;gap:0.5rem;}
  html #s6.story .navrow .big,html #s7.story .stBottom .big{min-height:0;padding:0.75rem 0.4rem;border-radius:0.375rem;font-size:1rem;font-weight:900;
    box-shadow:none;background-image:none;margin:0;}
  html #s6.story .navrow .big#pv,html #s7.story .stBottom .big.ghost{background:rgba(15,15,16,.9);border:1.5px solid #5A5B60;color:#E0E0E0;}
  html #s6.story .navrow .big#nx,html #s7.story .stBottom .big:not(.ghost){background:#FFC400;border:0;color:#111;}
  .stHint{text-align:center;font-size:0.6875rem;color:#9A9A9A;font-weight:700;margin-top:0.45rem;text-shadow:0 1px 4px rgba(0,0,0,.8);}
  /* 도착 화면 */
  .stBand{position:absolute;left:0.9rem;right:0.9rem;top:calc(3.55rem + env(safe-area-inset-top));z-index:3;background:#FFC400;color:#111;
    border-radius:0.375rem;padding:0.875rem;display:flex;gap:0.8rem;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.45);}
  .stBand .ck{flex:none;width:3.25rem;height:3.25rem;background:#111;border-radius:0.3rem;display:flex;align-items:center;justify-content:center;}
  .stBand .ck svg{width:70%;height:70%;}
  .stBand .ko{font-size:1.5rem;font-weight:900;letter-spacing:-0.02em;line-height:1.1;}
  .stBand .en{font-size:0.78rem;font-weight:800;color:#3A2E00;margin-top:0.2rem;}
  .stWho{background:rgba(15,15,16,.94);border-radius:0.375rem;padding:0.75rem 0.875rem;font-size:1rem;font-weight:800;color:#fff;border-left:5px solid #FFC400;word-break:keep-all;}
  .stWho small{display:block;color:#B5B5B5;font-size:0.72rem;font-weight:700;margin-top:0.2rem;}
  .stWho small svg{width:0.85rem;height:0.85rem;vertical-align:-0.12rem;}
  .stWho:empty{display:none;}
  .stBtns{display:flex;gap:0.5rem;margin-top:0.55rem;}
  .stBtns .big{flex:1 1 0;min-width:0;}
  #s7.story .rfMemo{position:absolute;left:0.9rem;right:9rem;top:calc(9.6rem + env(safe-area-inset-top));z-index:3;
    background:rgba(15,15,16,.9);color:#E0E0E0;border-radius:0.3rem;padding:0.35rem 0.6rem;font-size:0.75rem;}
  /* 이 두 화면에서는 오른쪽 위 [인터넷][☰] 테두리도 노랑 */
  html.stOn .topIcons .iconBtn{border-color:#FFC400 !important;background:rgba(15,15,16,.9) !important;box-shadow:none !important;}
  html.stOn #tmBtn,html.stOn #tmBtn .lc{color:#FFC400 !important;}
  /* ── 사진 골라 다시 출발 (2026-11-04 사용자 · js/app/restart.js) — 견본(생성물\견본_재출발_층고르기)의 모양 그대로, 밝은 화면에서도 그대로 ──
     안내판 위 「여기가 어디인지 모르겠어요」 · 지금 보이는 사진 고르기 · 현재 계신 층(엘리베이터 사진) */
  .rxLost{display:flex;align-items:center;justify-content:center;gap:0.4rem;width:100%;margin-bottom:0.5rem;padding:0.65rem 0.8rem;border-radius:0.5rem;
    border:2px solid #FFC400;background:rgba(15,15,16,.92);color:#FFC400;font:inherit;font-size:0.95rem;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.45);}
  .rxLost b{font-weight:900;}
  .rxLost small{color:#B5B5B5;font-weight:700;font-size:0.78rem;}
  .rxDim{position:absolute;inset:0;z-index:70;background:rgba(0,0,0,.62);animation:rxFade .18s;}
  .rxSheet{position:absolute;left:0;right:0;bottom:0;z-index:71;max-height:88%;overflow:auto;background:#111;border-top:3px solid #FFC400;color:#fff;text-align:left;
    padding:1.1rem 0.9rem calc(1rem + env(safe-area-inset-bottom));animation:rxUp .22s cubic-bezier(.22,.68,.36,1);word-break:keep-all;}
  @keyframes rxUp{from{transform:translateY(40px);opacity:0;}to{transform:none;opacity:1;}}
  @keyframes rxFade{from{opacity:0;}to{opacity:1;}}
  .rxSheet h4{margin:0;color:#FFC400;font-size:1.3rem;font-weight:900;letter-spacing:-0.02em;}
  .rxSheet .sub{margin:0.25rem 0 0.85rem;color:#B5B5B5;font-size:0.82rem;font-weight:700;}
  .rxGrid{display:grid;grid-template-columns:1fr 1fr;gap:0.55rem;}
  .rxCard{position:relative;display:block;width:100%;margin:0;padding:0;border:2px solid #2C2C2C;border-radius:0.5rem;overflow:hidden;background:#1A1A1A;cursor:pointer;font:inherit;text-align:left;}
  .rxCard:active,.rxCard:hover{border-color:#FFC400;}
  .rxCard img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;background:#000;}   /* 11/05 사진 전체(예전 정사각형으로 잘림) — 사진 대부분이 세로 3:4 */
  .rxCard .cp{display:block;padding:0.5rem 0.6rem;color:#fff;font-weight:800;font-size:0.86rem;}
  .rxCard .tg{position:absolute;left:0.4rem;top:0.4rem;padding:0.18rem 0.45rem;border-radius:0.3rem;font-size:0.7rem;font-weight:900;background:#FFC400;color:#111;}
  .rxCard .tg.side{background:#3A3A3A;color:#E5E5E5;}
  .rxCard .fl{position:absolute;right:0.4rem;top:0.4rem;min-width:2.4rem;padding:0.2rem 0.45rem;border-radius:0.3rem;text-align:center;
    font-size:1.05rem;font-weight:900;background:#FFC400;color:#111;box-shadow:0 2px 8px rgba(0,0,0,.5);}
  .rxFloor{display:block;width:100%;margin-top:0.75rem;padding:0.8rem 0.9rem;border-radius:0.5rem;border:2px solid #FFC400;background:#1A1A1A;color:#FFC400;font:inherit;cursor:pointer;text-align:center;}
  .rxFloor b{display:block;font-size:1.02rem;font-weight:900;}
  .rxFloor small{display:block;margin-top:0.15rem;color:#B5B5B5;font-size:0.76rem;font-weight:700;}
  .rxBack{display:block;margin:0.75rem auto 0;padding:0.45rem 0.8rem;border:0;background:none;color:#B5B5B5;font:inherit;font-size:0.82rem;font-weight:800;cursor:pointer;}
/* ════════ 2026-11-03 처음 켤 때 동의 · 길 공유하기 · 내 시간표 · 수업 알림 (js/app/consent.js · share.js · timetable.js) ════════
   사용자가 눌러 보며 열 번 고친 견본(생성물\견본_링크공유_시간표_개인정보)의 모양 그대로 */
.syI{width:1.1em;height:1.1em;vertical-align:-0.18em;flex:none;}
.tmList .ln .syI{width:1.25rem;height:1.25rem;margin:0;color:#00E5FF;}
.tmMenu.tmOpen .tmList .ln:nth-child(5){transition-delay:calc(var(--tmDur) * .75);}
.sySetSub{display:block;font-size:0.72rem;color:#7C8AA0;font-weight:600;margin-top:0.1rem;}
.syDimBg{position:absolute;inset:0;background:rgba(2,4,8,.66);z-index:70;animation:syFade .2s;}
@keyframes syFade{from{opacity:0}to{opacity:1}}
.sySheet{position:absolute;left:0;right:0;bottom:0;z-index:71;background:#121822;border-top:3px solid #1FA9C9;border-radius:1.25rem 1.25rem 0 0;
 padding:0.75rem 1rem calc(1rem + env(safe-area-inset-bottom));box-shadow:0 -0.75rem 2.5rem rgba(0,0,0,.6);color:#E7F6FF;word-break:keep-all;
 max-height:calc(100% - 2.5rem);overflow:auto;animation:syUp .26s cubic-bezier(.2,.9,.3,1.05);text-align:left;}
@keyframes syUp{from{transform:translateY(2rem);opacity:0}to{transform:none;opacity:1}}
.sySheet .grab{width:2.6rem;height:0.28rem;border-radius:9px;background:#33404F;margin:0 auto 0.75rem;}
.sySheet h4{margin:0;font-size:1.15rem;font-weight:900;letter-spacing:-0.02em;display:flex;align-items:center;gap:0.45rem;color:#9FEFFF;}
.sySheet .sub{margin:0.35rem 0 0.7rem;font-size:0.84rem;color:#9FB2C8;line-height:1.5;}
.sySheet .sub b{color:#E7F6FF;}
.sySheet .lab{font-size:0.82rem;font-weight:800;color:#CFE3F5;margin:0.7rem 0 0.4rem;}
.sySheet .big{margin:0.7rem 0 0;display:flex;align-items:center;justify-content:center;gap:0.45rem;}
.sySheet .big + .big{margin-top:0.5rem;}
.sySheet .big:disabled{opacity:.38;filter:grayscale(.6);cursor:default;box-shadow:none;}
.sySheet ul{margin:0.2rem 0 0;padding-left:1.1rem;font-size:0.84rem;line-height:1.6;color:#DCEBF7;}
.sySheet li{margin:0.2rem 0;}
.sySheet li b{color:#fff;}
.sySheet .big.del{background:transparent;border:1.5px solid #FF6B6B;color:#FF8A8A;}
.syInp{display:block;width:100%;background:#0B1118;border:1.5px solid #33404F;border-radius:0.5rem;padding:0.65rem 0.75rem;font-weight:700;font-size:1rem;font-family:inherit;color:#fff;outline:none;}
.syInp:focus{border-color:#00E5FF;box-shadow:0 0 0 2px rgba(0,229,255,.25);}
textarea.syInp{resize:none;line-height:1.5;}
.syOk{margin-top:0.4rem;display:flex;align-items:center;gap:0.4rem;font-size:0.84rem;font-weight:800;color:#39FF88;}
.syOk small{color:#8FA3B8;font-weight:700;font-size:0.72rem;}
.syBad{margin-top:0.4rem;font-size:0.82rem;font-weight:800;color:#FF6B6B;}
.syTip{margin-top:0.4rem;font-size:0.76rem;color:#8FA3B8;}
.syHits{display:flex;flex-wrap:wrap;gap:0.35rem;margin-top:0.45rem;}
.syHits button{border:1.5px solid #2A6F86;background:rgba(0,229,255,.07);color:#CFEFFF;border-radius:0.5rem;padding:0.35rem 0.55rem;font-weight:700;font-size:0.78rem;font-family:inherit;cursor:pointer;text-align:left;}
.syHits button b{color:#fff;}
.syToast{position:absolute;left:1rem;right:1rem;top:calc(4.2rem + env(safe-area-inset-top));z-index:990;text-align:center;
 background:#0E3B2A;border:2px solid #39FF88;color:#BFF5D3;font-weight:800;font-size:0.86rem;padding:0.55rem 0.8rem;border-radius:1rem;
 box-shadow:0 0.375rem 1.25rem rgba(0,0,0,.45);transition:opacity .4s;pointer-events:none;word-break:keep-all;}
.syToast.info{background:#10202E;border-color:#00E5FF;color:#CFEFFF;}
.syToast.out{opacity:0;}
.syNote{display:flex;align-items:center;gap:0.35rem;justify-content:center;margin-top:0.6rem;font-size:0.75rem;color:#8FA3B8;font-weight:700;}
.syErr{margin-top:0.5rem;color:#FF6B6B;font-weight:800;font-size:0.82rem;min-height:0;}

/* 건의함 : 사진 칸 아래 한 줄 · 개인정보 동의 창 · 삭제 요청 */
.syPvLine{margin:0.5rem 0 0;font-size:0.76rem;color:#7FCFEF;display:flex;align-items:center;gap:0.35rem;}
.syPvLine u{cursor:pointer;}
.syDelLink{margin-top:0.8rem;display:flex;align-items:center;justify-content:center;gap:0.35rem;font-size:0.78rem;color:#8FA3B8;font-weight:700;cursor:pointer;}
.syDelLink .syI{width:0.95rem;height:0.95rem;}
.syCk{display:flex;gap:0.6rem;align-items:flex-start;margin-top:0.8rem;padding:0.65rem 0.7rem;border-radius:0.6rem;background:#0B1118;border:1.5px solid #3A4A5C;font-weight:800;color:#fff;font-size:0.88rem;line-height:1.45;cursor:pointer;user-select:none;}
.syCk .box{flex:none;width:1.5rem;height:1.5rem;border-radius:0.35rem;border:2.5px solid #7C8AA0;display:flex;align-items:center;justify-content:center;color:#04121A;margin-top:0.05rem;}
.syCk .box svg{width:1rem;height:1rem;opacity:0;}
.syCk em{font-style:normal;color:#FF8DBA;font-size:0.75rem;}
.syCk.on{border-color:#39FF88;background:rgba(57,255,136,.08);}
.syCk.on .box{background:#39FF88;border-color:#39FF88;}
.syCk.on .box svg{opacity:1;}
.syMore{margin-top:0.55rem;font-size:0.8rem;font-weight:800;color:#7FCFEF;cursor:pointer;}
.syTbl{width:100%;border-collapse:collapse;font-size:0.8rem;line-height:1.5;margin-top:0.3rem;}
.syTbl th{width:4.8rem;text-align:left;vertical-align:top;color:#9FEFFF;font-weight:900;padding:0.45rem 0.4rem 0.45rem 0;border-top:1px solid #26354A;}
.syTbl td{color:#DCEBF7;padding:0.45rem 0;border-top:1px solid #26354A;}
.syTbl td b{color:#fff;}
#sguide .syTbl td{color:#C3CFDE;}
.sugCard.syDelCard{border-color:#FFC400;}
.syDelHead{display:flex;align-items:center;gap:0.35rem;color:#FFC400;font-weight:900;font-size:0.95rem;margin-bottom:0.3rem;}

/* 길 공유하기 */
.syGates{display:grid;grid-template-columns:repeat(4,1fr);gap:0.4rem;}
.syGate{position:relative;border-radius:0.6rem;overflow:hidden;border:2px solid #26354A;background:#0B0E13;cursor:pointer;padding:0;}
.syGate img{display:block;width:100%;aspect-ratio:3/3.4;object-fit:contain;background:#000;}   /* 11/05 사진 전체(예전 cover) */
.syGate b{position:absolute;left:0;right:0;bottom:0;padding:1rem 0.2rem 0.3rem;text-align:center;font-size:0.85rem;font-weight:900;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,0));}
.syGate.pick{border-color:#39FF88;box-shadow:0 0 0 2px #39FF88;}
.syGate.pick:after{content:"";position:absolute;top:0.3rem;right:0.3rem;width:1.25rem;height:1.25rem;border-radius:50%;background:#39FF88 url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2304121A%27 stroke-width=%273.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E") center/70% no-repeat;}
.syWho{display:block;width:100%;margin-top:0.45rem;padding:0.55rem;border-radius:0.6rem;background:transparent;border:1.5px dashed #3A4A5C;color:#9FB2C8;font-weight:700;font-size:0.8rem;font-family:inherit;cursor:pointer;}
.syWho.pick{border:2px solid #39FF88;color:#BFF5D3;background:rgba(57,255,136,.08);}
.syMsg{background:#0B1118;border:1.5px solid #26354A;border-radius:0.7rem;padding:0.65rem 0.75rem;font-size:0.82rem;line-height:1.55;color:#DCEBF7;white-space:pre-line;}
.syMsg u{color:#7FCFEF;text-decoration:none;font-weight:700;word-break:break-all;}
.syMsg.empty{color:#6F8296;}
/* 보낼 글 — 고쳐 쓰는 글상자 + 고칠 수 없는 링크 줄 (2026-11-03 사용자). 글자 16px : 아이폰은 그보다 작으면 누를 때 화면이 확대된다 */
.syMsgLab{display:flex;align-items:center;gap:0.3rem;}
.syMsgLab small{color:#6F8296;font-weight:600;font-size:0.72rem;}
.syReset{margin-left:auto;background:transparent;border:1px solid #33404F;color:#9FB2C8;border-radius:1rem;padding:0.15rem 0.6rem;font-family:inherit;font-size:0.75rem;font-weight:800;cursor:pointer;}
.syMsgBox{padding:0;white-space:normal;overflow:hidden;}
.syMsgBox:focus-within{border-color:#00E5FF;box-shadow:0 0 0 2px rgba(0,229,255,.25);}
.syMsgTx{display:block;width:100%;min-height:6.4rem;background:transparent;border:0;outline:none;resize:none;padding:0.65rem 0.75rem 0.4rem;font-family:inherit;font-size:16px;line-height:1.5;color:#DCEBF7;}
.syMsgTx::placeholder{color:#6F8296;}
.syMsgLink{display:flex;align-items:center;gap:0.35rem;padding:0.45rem 0.75rem 0.6rem;border-top:1px dashed #26354A;font-size:0.78rem;}
.syMsgLink svg{width:0.9rem;height:0.9rem;flex:none;color:#7FCFEF;}
.syMsgLink u{flex:1;min-width:0;}
.syMsgLink small{flex:none;color:#6F8296;font-size:0.7rem;}
.syMsgBox.empty .syMsgLink{display:none;}

/* 받은 길 : 문 고르기 (공항 표지판 모양) */
#srcv{padding:calc(2.4rem + env(safe-area-inset-top)) 0.9rem calc(0.9rem + env(safe-area-inset-bottom)) !important;background:#0F0F10;color:#fff;text-align:left;word-break:keep-all;}
#srcv .got{align-self:flex-start;display:inline-flex;align-items:center;gap:0.35rem;background:#FFC400;color:#111;font-weight:900;font-size:0.8rem;padding:0.3rem 0.65rem;border-radius:0.3rem;}
#srcv h2{margin:0.6rem 0 0;font-size:1.5rem;line-height:1.2;font-weight:900;letter-spacing:-0.02em;}
#srcv h2 b{color:#FFC400;}
#srcv .q{margin:0.8rem 0 0.15rem;font-size:1.2rem;font-weight:900;}
#srcv .qe{font-size:0.8rem;color:#B5B5B5;font-weight:700;margin-bottom:0.7rem;}
#srcv .grid{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0.55rem;min-height:0;}
#srcv .g{position:relative;border-radius:0.4rem;overflow:hidden;border:2px solid #3A3B40;min-height:0;cursor:pointer;}
#srcv .g img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;}   /* 11/05 사진 전체(예전 cover) */
#srcv .g b{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:0.4rem;padding:1.4rem 0.6rem 0.5rem;background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,0));font-size:1.25rem;font-weight:900;}
#srcv .g b small{font-size:0.7rem;color:#B5B5B5;font-weight:800;}
#srcv .g.pick{border-color:#FFC400;box-shadow:0 0 0 2px #FFC400;}
#srcv .out{margin-top:0.7rem;display:flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.7rem;border-radius:0.375rem;border:1.5px solid #5A5B60;color:#E0E0E0;font-weight:800;font-size:0.9rem;background:rgba(15,15,16,.9);cursor:pointer;}

/* 길안내 아래 안내판 바로 위 카드 (받은 길 · 시간표) · 도착 화면 「도착했어요」 */
.syCtx{margin-bottom:0.5rem;background:rgba(15,15,16,.92);border:1.5px solid #FFC400;border-radius:0.375rem;padding:0.5rem 0.6rem;color:#fff;word-break:keep-all;}
.syCtx .l1{display:flex;align-items:center;gap:0.45rem;font-size:0.92rem;font-weight:900;}
.syCtx .l1 .syI{color:#FFC400;width:1.15rem;height:1.15rem;}
.syCtx .l1 em{font-style:normal;margin-left:auto;background:#FFC400;color:#111;font-size:0.75rem;font-weight:900;padding:0.12rem 0.45rem;border-radius:0.25rem;white-space:nowrap;}
.syCtx .l2{display:flex;align-items:center;gap:0.35rem;margin-top:0.3rem;font-size:0.75rem;color:#C8C8C8;font-weight:700;}
.syCtx .l2 span{flex:1;min-width:0;}
.syCtx .l2 button{flex:none;display:inline-flex;align-items:center;gap:0.25rem;color:#FFC400;background:transparent;border:1.5px solid #FFC400;border-radius:0.3rem;padding:0.22rem 0.45rem;font-weight:900;font-size:0.72rem;font-family:inherit;white-space:nowrap;cursor:pointer;}
.syTell{display:flex;align-items:center;justify-content:center;gap:0.45rem;width:100%;margin:0.55rem 0 0.2rem;padding:0.75rem;border-radius:0.375rem;background:rgba(15,15,16,.92);border:2px solid #FFC400;color:#FFC400;font-weight:900;font-size:1rem;font-family:inherit;cursor:pointer;}
.syStartFl{display:flex;gap:0.35rem;flex-wrap:wrap;}
.syStartFl button{flex:1;min-width:3.6rem;padding:0.55rem 0;border-radius:0.5rem;border:1.5px solid #33404F;background:transparent;color:#CFE3F5;font-weight:800;font-size:0.85rem;font-family:inherit;cursor:pointer;}
.syStartFl button.on{border-color:#39FF88;color:#BFF5D3;background:rgba(57,255,136,.1);}

/* 내 시간표 */
#stt{text-align:left;}
#stt .bar h3,#salm .bar h3{display:flex;align-items:center;gap:0.45rem;}
#stt .bar .syI,#salm .bar .syI{width:1.3rem;height:1.3rem;color:#00E5FF;}
.sySw{margin-left:auto;flex:none;width:2.7rem;height:1.55rem;border-radius:1rem;background:#3A4656;position:relative;transition:background .2s;}
.sySw:after{content:"";position:absolute;left:0.2rem;top:0.2rem;width:1.15rem;height:1.15rem;border-radius:50%;background:#C9D3DE;transition:left .2s;}
.sySw.on{background:#39FF88;}
.sySw.on:after{left:1.35rem;background:#04121A;}
.syTop2{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;flex:none;}
.syChip2{display:flex;align-items:center;gap:0.5rem;padding:0.55rem 0.6rem;border-radius:0.7rem;border:2px solid #22303F;background:#121822;color:#E7F6FF;font-family:inherit;text-align:left;cursor:pointer;min-width:0;}
.syChip2 .syI{width:1.35rem;height:1.35rem;color:#00E5FF;}
.syChip2 b{display:block;font-size:0.86rem;font-weight:900;}
.syChip2 small{display:block;font-size:0.7rem;color:#8FA3B8;font-weight:700;margin-top:0.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.syChip2 > span{min-width:0;}
.syChip2.off{opacity:.6;}
.syChip2.off .syI{color:#7C8AA0;}
.syGrid{--syGridLine:#1A2430;position:relative;flex:1;min-height:0;margin-top:0.55rem;display:grid;grid-template-columns:1.5rem repeat(5,1fr);grid-template-rows:1.6rem 1fr;border:1px solid #22303F;border-radius:0.6rem;overflow:hidden;background:#0E141C;}
.syGrid .hd{display:flex;align-items:center;justify-content:center;font-size:0.78rem;font-weight:800;color:#8FA3B8;border-bottom:1px solid #22303F;border-left:1px solid #1A2430;}
.syGrid .hd.today{color:#04121A;background:#00E5FF;}
.syGrid .hd:first-child{border-left:0;}
.syGrid .col{position:relative;border-left:1px solid #1A2430;cursor:pointer;}
.syGrid .col.hrs{border-left:0;cursor:default;}
.syGrid .col.hrs span{position:absolute;right:0.2rem;font-size:0.62rem;color:#6F8296;font-weight:700;transform:translateY(0.1rem);}
.syGrid .col.today{background-color:rgba(0,229,255,.04);}
.syEmpty{position:absolute;left:1.5rem;right:0;top:45%;text-align:center;pointer-events:none;color:#6F8296;font-size:0.8rem;font-weight:700;line-height:1.6;}
.syBlk{position:absolute;left:1px;right:1px;border-radius:0.25rem;padding:0.2rem 0.22rem;overflow:hidden;color:#fff;font-size:0.64rem;line-height:1.22;word-break:break-all;cursor:pointer;}
.syBlk b{display:block;font-weight:800;font-size:0.66rem;}
.syBlk small{display:block;opacity:.85;font-size:0.6rem;margin-top:0.1rem;}
.syBlk.next{box-shadow:0 0 0 2px #FFC400;}
.syNow{position:absolute;left:0;right:0;height:0;border-top:2px solid #FF2E88;z-index:2;pointer-events:none;}
.syNow:before{content:"";position:absolute;left:-0.25rem;top:-0.3rem;width:0.5rem;height:0.5rem;border-radius:50%;background:#FF2E88;}
.syAdd{margin-top:0.55rem;flex:none;display:flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.75rem;border-radius:4px;border:2px dashed #1FA9C9;background:transparent;color:#9FEFFF;font-weight:900;font-size:0.95rem;font-family:inherit;cursor:pointer;width:100%;}
.syDays{display:flex;gap:0.35rem;}
.syDays button{flex:1;padding:0.5rem 0;border-radius:0.5rem;border:1.5px solid #33404F;background:transparent;color:#9FB2C8;font-weight:900;font-size:0.95rem;font-family:inherit;cursor:pointer;}
.syDays button.on{border-color:#00E5FF;background:rgba(0,229,255,.16);color:#9FEFFF;}
.syTimes{display:flex;align-items:center;gap:0.5rem;}
.syCols{display:grid;grid-template-columns:repeat(7,1fr);gap:0.45rem;}
.syCols button{width:100%;aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;}
.syCols button.on{box-shadow:0 0 0 2px #121822,0 0 0 4px #fff;}
.syHueRow{display:flex;align-items:center;gap:0.55rem;margin-top:0.6rem;}
.syHue{flex:1;-webkit-appearance:none;appearance:none;height:1.2rem;border-radius:1rem;outline:none;cursor:pointer;
 background:linear-gradient(to right,hsl(0,75%,50%),hsl(30,85%,50%),hsl(55,85%,48%),hsl(90,60%,42%),hsl(140,60%,38%),hsl(175,70%,36%),hsl(200,80%,45%),hsl(225,70%,50%),hsl(260,60%,55%),hsl(290,55%,48%),hsl(320,65%,50%),hsl(359,75%,50%));}
.syHue::-webkit-slider-thumb{-webkit-appearance:none;width:1.6rem;height:1.6rem;border-radius:50%;background:#fff;border:3px solid #0B0E13;box-shadow:0 1px 6px rgba(0,0,0,.5);}
.syHue::-moz-range-thumb{width:1.4rem;height:1.4rem;border-radius:50%;background:#fff;border:3px solid #0B0E13;}
.syPick{flex:none;position:relative;width:2.2rem;height:2.2rem;border-radius:0.5rem;border:1.5px solid #33404F;overflow:hidden;cursor:pointer;background:conic-gradient(red,orange,yellow,lime,cyan,blue,magenta,red);}
.syPick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.syPrev{margin-top:0.6rem;border-radius:0.35rem;padding:0.4rem 0.55rem;font-size:0.8rem;line-height:1.25;}
.syPrev b{display:block;font-size:0.84rem;}
.syDur{margin-top:0.35rem;font-size:0.76rem;color:#8FA3B8;font-weight:700;}
.syNum{width:3.6rem;text-align:center;background:#0B1118;border:1.5px solid #33404F;border-radius:0.5rem;padding:0.5rem 0.3rem;font-weight:900;font-size:1.05rem;font-family:inherit;color:#fff;outline:none;}
.syNum:focus{border-color:#00E5FF;box-shadow:0 0 0 2px rgba(0,229,255,.25);}
.syHM{display:inline-flex;align-items:center;gap:0.2rem;font-weight:900;font-size:1.1rem;color:#9FB2C8;}
.syHM .syNum{width:3rem;}
.syMinRow{display:flex;align-items:center;gap:0.5rem;margin-top:0.45rem;font-size:0.92rem;font-weight:700;color:#CFE3F5;}
.syMinRow .lb{min-width:4.6rem;}
.syRowS{display:flex;align-items:center;gap:0.6rem;padding:0.55rem 0;border-bottom:1px solid #22303F;}
.syRowS b{flex:1;font-size:0.95rem;}
.syRowS .sySw{cursor:pointer;}
.syGateC{display:flex;gap:0.35rem;}
.syGateC button{flex:1;padding:0.5rem 0;border-radius:0.5rem;border:1.5px solid #33404F;background:transparent;color:#9FB2C8;font-weight:900;font-size:0.92rem;font-family:inherit;cursor:pointer;}
.syGateC button.on{border-color:#00E5FF;background:rgba(0,229,255,.16);color:#9FEFFF;}
.syHome .rsHead .syI{width:1.25rem;height:1.25rem;}
.syHome .rsBody .pg{background:#FFC400;color:#111;}
.syHome .x{margin-left:auto;background:none;border:0;color:#9FB2C8;font-size:1.1rem;cursor:pointer;padding:0 0.2rem;}

/* 수업 알림 페이지 — 시트 모양(글 · 단추)은 그대로 쓰고 자리만 페이지 안으로 */
.sySheet.syPage{position:static;flex:1;min-height:0;max-height:none;overflow:auto;border:0;border-radius:0;box-shadow:none;background:transparent;padding:0 0 calc(0.5rem + env(safe-area-inset-bottom));animation:none;}
.sySnd{display:flex;flex-direction:column;border:1.5px solid #22303F;border-radius:0.7rem;overflow:hidden;}
.sySnd .it{display:flex;align-items:center;gap:0.6rem;padding:0.55rem 0.7rem;border-bottom:1px solid #1A2430;cursor:pointer;}
.sySnd .it:last-child{border-bottom:0;}
.sySnd .rd{flex:none;width:1.2rem;height:1.2rem;border-radius:50%;border:2.5px solid #7C8AA0;}
.sySnd .it.on .rd{border-color:#39FF88;background:radial-gradient(#39FF88 45%,transparent 50%);}
.sySnd .it b{flex:1;font-size:0.9rem;}
.sySnd .it b small{font-weight:600;color:#8FA3B8;font-size:0.72rem;margin-left:0.3rem;}
.sySnd .pl{flex:none;display:inline-flex;align-items:center;gap:0.25rem;border:1.5px solid #2A6F86;background:rgba(0,229,255,.08);color:#9FEFFF;border-radius:1rem;padding:0.2rem 0.6rem;font-weight:800;font-size:0.75rem;font-family:inherit;cursor:pointer;}
.sySnd .pl .syI{width:0.85rem;height:0.85rem;}
.syVol{display:flex;align-items:center;gap:0.6rem;}
.syVol input{flex:1;accent-color:#00E5FF;}
.syVol .syI{color:#9FB2C8;}
.syPermLine{margin-top:0.7rem;padding:0.55rem 0.7rem;border-radius:0.6rem;font-size:0.8rem;font-weight:700;display:flex;align-items:center;gap:0.5rem;}
.syPermLine.ok{background:rgba(57,255,136,.08);border:1.5px solid rgba(57,255,136,.5);color:#BFF5D3;}
.syPermLine.no{background:rgba(255,196,0,.07);border:1.5px solid rgba(255,196,0,.5);color:#FFE08A;}
.syPermLine span{flex:1;}

/* 처음 켤 때 한 번 — 동의 모아 받기 (초록 글 다음 · 쉬운 사용모드 앞 : ezAsk 940 < 이것 945 < 켜는 화면 950) */
.syAgree{position:absolute;inset:0;z-index:945;background:#0B0E13;display:flex;flex-direction:column;color:#E7F6FF;text-align:left;word-break:keep-all;}
.syAgree .sc{flex:1;overflow:auto;padding:calc(2.6rem + env(safe-area-inset-top)) 1.1rem 0.8rem;}
.syAgree .brand{display:flex;align-items:center;gap:0.45rem;color:#00E5FF;font-weight:900;font-size:0.9rem;}
.syAgree h2{font-size:1.55rem;line-height:1.25;font-weight:900;margin:0.55rem 0 0.25rem;letter-spacing:-0.02em;}
.syAgree .sub{color:#9FB2C8;font-size:0.86rem;margin-bottom:0.85rem;}
.syBox{flex:none;width:1.55rem;height:1.55rem;border-radius:0.4rem;border:2.5px solid #7C8AA0;display:flex;align-items:center;justify-content:center;color:#04121A;}
.syBox svg{width:1rem;height:1rem;opacity:0;}
.on > .syBox{background:#39FF88;border-color:#39FF88;}
.on > .syBox svg{opacity:1;}
.syAgAll{display:flex;align-items:center;gap:0.7rem;padding:0.8rem 0.85rem;border-radius:0.8rem;border:2px solid #1FA9C9;background:rgba(0,229,255,.06);cursor:pointer;user-select:none;}
.syAgAll b{font-size:1.06rem;font-weight:900;}
.syAgAll small{display:block;color:#8FA3B8;font-size:0.74rem;font-weight:700;margin-top:0.05rem;}
.syAgItem{border-bottom:1px solid #1A2430;padding:0.7rem 0.15rem;}
.syAgItem .hd{display:flex;align-items:flex-start;gap:0.6rem;cursor:pointer;user-select:none;}
.syAgItem .t{flex:1;min-width:0;}
.syAgItem .t b{font-size:0.94rem;font-weight:900;}
.syAgItem .t small{display:block;color:#9FB2C8;font-size:0.77rem;margin-top:0.15rem;line-height:1.45;}
.syTg{font-style:normal;font-size:0.68rem;font-weight:900;padding:0.08rem 0.38rem;border-radius:0.3rem;margin-right:0.3rem;vertical-align:0.08rem;}
.syTg.req{background:rgba(255,46,136,.18);color:#FF8DBA;}
.syTg.opt{background:rgba(0,229,255,.13);color:#9FEFFF;}
.syAgItem .more{flex:none;color:#7FCFEF;font-size:0.78rem;font-weight:800;background:none;border:0;cursor:pointer;padding:0.15rem 0.1rem;font-family:inherit;}
.syAgItem .det{display:none;margin:0.5rem 0 0.1rem 2.15rem;font-size:0.8rem;color:#DCEBF7;line-height:1.55;}
.syAgItem .det ul{margin:0;padding-left:1rem;}
.syAgItem .det li{margin:0.15rem 0;}
.syAgItem .det b{color:#fff;}
.syAgItem.open .det{display:block;}
.syAgItem.plain .hd{align-items:center;}   /* 설명 없이 체크만 있는 줄(처리방침 · 라이선스 · 수집·이용) */
.syAgItem.plain .t{line-height:1.4rem;min-height:1.6rem;}   /* 글꼴이 늦게 받아지면 글줄 높이가 19 · 20px 로 흔들려서(안전망) — 글줄 높이를 정하고, 칸은 그보다 조금 높게 */
/* 개인정보 처리방침 · 오픈소스 라이선스 쪽 (consent.js doc — 동의 화면 z945 위) */
.syDoc{position:absolute;inset:0;z-index:985;background:#0B0E13;display:flex;flex-direction:column;}
.syDoc .hd{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;padding:calc(0.8rem + env(safe-area-inset-top)) 1rem 0.65rem;border-bottom:1px solid #1A2430;}
.syDoc .hd b{display:flex;align-items:center;gap:0.45rem;color:#E7F6FF;font-size:1.02rem;font-weight:900;}
.syDoc .hd .syI{width:1.15rem;height:1.15rem;color:#00E5FF;}
.syDoc .x{flex:none;width:2.4rem;height:2.4rem;border-radius:0.6rem;border:2px solid #00E5FF;background:transparent;color:#00E5FF;font-size:1.05rem;font-family:inherit;cursor:pointer;}
.syDoc iframe{flex:1;width:100%;border:0;background:#0B0E13;}
.syDocLinks{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.85rem;}
.syDocLinks button{flex:1 1 9rem;display:flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.7rem 0.8rem;border-radius:0.7rem;border:2px solid #2A3A4E;background:#121A26;color:#E7F6FF;font-family:inherit;font-size:0.9rem;font-weight:800;cursor:pointer;}
.syDocLinks .syI{width:1rem;height:1rem;color:#00E5FF;}
.syPerm{margin-top:0.85rem;padding:0.65rem 0.75rem;border-radius:0.7rem;background:#121822;border:1.5px dashed #33404F;font-size:0.78rem;color:#CFE3F5;line-height:1.55;}
.syPerm b{color:#fff;}
.syAgree .ft{padding:0.7rem 1.1rem calc(0.85rem + env(safe-area-inset-bottom));border-top:1px solid #1A2430;background:#0B0E13;}
.syAgree .ft .big{width:100%;}
.syAgree .ft .big:disabled{opacity:.38;filter:grayscale(.6);box-shadow:none;cursor:default;}
.syAgree .ft small{display:block;text-align:center;color:#7C8AA0;font-size:0.72rem;margin-top:0.45rem;}

/* 앱이 묻는 「허용할까요?」 — 앱 색(어두운 바탕 · 하늘색) */
.syPermDlg{position:absolute;inset:0;z-index:980;background:rgba(0,0,0,.68);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:calc(5rem + env(safe-area-inset-top)) 1.2rem 0;font-family:inherit;}
.syPermDlg .box{width:100%;max-width:20rem;border-radius:1rem;padding:1rem 1rem 0.8rem;text-align:left;box-shadow:0 12px 40px rgba(0,0,0,.45);animation:syUp .22s;
 background:#121822;color:#E7F6FF;border:2px solid #1FA9C9;}
.syPermDlg .box .ic{width:2.2rem;height:2.2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,229,255,.12);color:#00E5FF;}
.syPermDlg .box b{display:block;margin-top:0.55rem;font-size:1.1rem;}
.syPermDlg .box p{margin:0.2rem 0 0;font-size:0.9rem;color:#9FB2C8;line-height:1.5;word-break:keep-all;}
.syPermDlg .bt{display:flex;justify-content:flex-end;gap:0.4rem;margin-top:0.9rem;}
.syPermDlg .bt button{border:0;background:transparent;color:#9FEFFF;font-weight:800;font-size:0.95rem;padding:0.45rem 0.8rem;border-radius:0.5rem;font-family:inherit;cursor:pointer;}
.syPermDlg .bt button[data-a="1"]{background:#00E5FF;color:#04121A;}
#sqr .qrOff span{display:block;margin-top:0.35rem;line-height:1.5;}

/* 밝은 화면 */
html.lt .sySheet{background:#FFFFFF;color:#0F1B2D;border-top-color:#2B88C8;box-shadow:0 -0.75rem 2.5rem rgba(15,27,45,.25);}
html.lt .sySheet h4{color:#0B6FB8;}
html.lt .sySheet .sub,html.lt .syTip,html.lt .syNote{color:#44546A;}
html.lt .sySheet .sub b,html.lt .sySheet li b{color:#0F1B2D;}
html.lt .sySheet .lab,html.lt .sySheet ul{color:#24364D;}
html.lt .sySheet.syPage{background:transparent;}
html.lt .syInp,html.lt .syMsg,html.lt .syCk{background:#F3F7FB;border-color:#B9C6D6;color:#0F1B2D;}
html.lt .syMsgTx{color:#0F1B2D;} html.lt .syMsgLink{border-top-color:#B9C6D6;} html.lt .syReset{border-color:#B9C6D6;color:#3A4A5C;}
html.lt .syCk.on{background:#E6F6EC;border-color:#0E8A45;}
html.lt .syCk.on .box{background:#0E8A45;border-color:#0E8A45;color:#fff;}
html.lt .syOk{color:#0E8A45;}
html.lt .syTbl td{color:#24364D;}
html.lt .syTbl th{color:#0B6FB8;}
html.lt .syTbl td b{color:#0F1B2D;}
html.lt .syHits button{background:#EEF6FC;border-color:#7FB2D6;color:#24364D;}
html.lt .syHits button b{color:#0F1B2D;}
html.lt .syWho,html.lt .syDays button,html.lt .syStartFl button{color:#44546A;border-color:#B9C6D6;}
html.lt .syDays button.on{color:#0B6FB8;border-color:#0B6FB8;background:rgba(11,111,184,.1);}
html.lt .syGrid{--syGridLine:#E3E9F0;background:#FFFFFF;border-color:#C9D5E2;}
html.lt .syGrid .hd{color:#44546A;border-color:#DCE4EE;}
html.lt .syGrid .col{border-left-color:#E3E9F0;}
html.lt .syAdd{color:#0B6FB8;border-color:#2B88C8;}
html.lt .syChip2{background:#FFFFFF;border-color:#C9D5E2;color:#0F1B2D;}
html.lt .syNum{background:#F3F7FB;border-color:#B9C6D6;color:#0F1B2D;}
html.lt .sySnd{border-color:#C9D5E2;}
html.lt .sySnd .it{border-color:#E3E9F0;}
html.lt .syGateC button{color:#44546A;border-color:#B9C6D6;}
html.lt .syGateC button.on{color:#0B6FB8;border-color:#0B6FB8;background:rgba(11,111,184,.1);}
html.lt .syMinRow{color:#24364D;}
html.lt .syRowS{border-color:#DCE4EE;}
html.lt .syAgree,html.lt .syAgree .ft{background:#EEF3F8;color:#0F1B2D;}
html.lt .syAgree .sub,html.lt .syAgItem .t small{color:#44546A;}
html.lt .syAgAll{background:#FFFFFF;border-color:#2B88C8;}
html.lt .syAgItem{border-color:#D5DEE8;}
html.lt .syDoc,html.lt .syDoc iframe{background:#F4F7FB;}
html.lt .syDoc .hd{border-bottom-color:#D5DEE8;}
html.lt .syDoc .hd b{color:#0F1B2D;}
html.lt .syDoc .hd .syI,html.lt .syDocLinks .syI{color:#0B6FB8;}
html.lt .syDoc .x{border-color:#0B6FB8;color:#0B6FB8;}
html.lt .syDocLinks button{background:#FFFFFF;border-color:#C9D6E4;color:#0F1B2D;}
html.lt .syAgItem .det,html.lt .syPerm{color:#24364D;}
html.lt .syAgItem .det b,html.lt .syPerm b{color:#0F1B2D;}
html.lt .syPerm{background:#FFFFFF;border-color:#B9C6D6;}
html.lt .syPermDlg .box{background:#FFFFFF;color:#0F1B2D;border-color:#2B88C8;}
html.lt .syPermDlg .box p{color:#44546A;}
html.lt .syPermDlg .bt button{color:#0B6FB8;}
html.lt .syPermDlg .bt button[data-a="1"]{background:#0B6FB8;color:#fff;}

/* ════════ 2026-11-03 휴대폰 뒤로가기 — 첫 화면에서 「앱을 종료하시겠어요?」 (shell.js exitAsk · 견본 그대로) ════════ */
.syExit{position:absolute;inset:0;z-index:985;background:rgba(0,0,0,.66);display:flex;align-items:flex-end;justify-content:center;padding:0 0.9rem calc(1rem + env(safe-area-inset-bottom));animation:syFade .2s;}
.syExit .card{width:100%;background:#121822;border:2px solid #1FA9C9;border-radius:1.2rem;padding:1.3rem 1.1rem 1rem;text-align:center;color:#E7F6FF;animation:syUp .24s cubic-bezier(.2,.9,.3,1.05);word-break:keep-all;}
.syExit .ic img{width:3.6rem;height:3.6rem;border-radius:0.9rem;display:block;margin:0 auto;}
.syExit b{display:block;margin-top:0.7rem;font-size:1.25rem;font-weight:900;}
.syExit p{margin:0.4rem 0 0;font-size:0.88rem;color:#9FB2C8;line-height:1.55;}
.syExit .bt{display:flex;gap:0.55rem;margin-top:1.1rem;}
.syExit .bt button{flex:1;padding:0.85rem 0;border-radius:0.6rem;font-weight:900;font-size:1.02rem;font-family:inherit;cursor:pointer;}
.syExit .bt .no{background:transparent;border:2px solid #3A4A5C;color:#CFE3F5;}
.syExit .bt .yes{background:#FF5A5F;border:2px solid #FF5A5F;color:#fff;}
html.lt .syExit .card{background:#FFFFFF;color:#0F1B2D;border-color:#2B88C8;}
html.lt .syExit p{color:#44546A;}
html.lt .syExit .bt .no{color:#24364D;border-color:#B9C6D6;}

/* ════════ 강의실 찾기 → 「○층까지 어떻게 갈까요?」 엘리베이터 · 중앙계단 고르기 (2026-11-07 · js/app/via.js) ════════
   11/05 견본의 「A · 사진 카드 두 장」 그대로 — 앱 색(어두운 남색 · 하늘색 #00E5FF · 분홍 #FF2E88) · 사진은 자르지 않는다(contain) */
.vcDim{position:absolute;inset:0;z-index:900;background:rgba(4,6,10,.74);animation:vcFade .18s;}
@keyframes vcFade{from{opacity:0;}to{opacity:1;}}
@keyframes vcPop{from{transform:translateY(14px) scale(.97);opacity:0;}to{transform:none;opacity:1;}}
.vcWrap{position:absolute;inset:0;z-index:901;display:flex;align-items:center;justify-content:center;padding:1rem;color:#E7F6FF;text-align:left;word-break:keep-all;}
.vcCard{width:100%;max-height:100%;overflow:auto;background:#121722;border:2px solid #00E5FF;border-radius:1.25rem;padding:1rem 0.9rem 0.85rem;
  box-shadow:0 0 30px rgba(0,229,255,.18),0 18px 50px rgba(0,0,0,.6);animation:vcPop .26s cubic-bezier(.22,.68,.36,1);}
.vcHead{display:flex;align-items:center;gap:0.5rem;}
.vcTo{flex:1;min-width:0;font-size:0.8rem;font-weight:700;color:#8FA3BA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vcTo b{color:#FF2E88;font-weight:900;}
.vcX{flex:none;width:2rem;height:2rem;border-radius:50%;border:1.5px solid #2A3646;background:#0D121B;color:#C7D3E3;font:inherit;font-size:0.9rem;cursor:pointer;}
.vcWrap h4{margin:0.35rem 0 0;font-size:1.45rem;font-weight:900;letter-spacing:-0.02em;color:#fff;}
.vcSub{margin:0.2rem 0 0.8rem;font-size:0.82rem;color:#9FB2C8;}
.vcFoot{margin:0.75rem 0 0;font-size:0.72rem;color:#7C8AA0;text-align:center;line-height:1.45;}
.vcGrid{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem;}
.vcOpt{position:relative;display:flex;flex-direction:column;gap:0.3rem;margin:0;padding:0.45rem 0.45rem 0.6rem;border-radius:0.9rem;
  border:2px solid #263445;background:#0D121B;color:#E7F6FF;font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,transform .12s;}
.vcOpt:hover,.vcOpt:focus-visible{border-color:#00E5FF;outline:none;}
.vcOpt:active{transform:scale(.98);}
.vcOpt.last{border-color:#00E5FF;box-shadow:0 0 0 1px rgba(0,229,255,.35);}
.vcPh{position:relative;display:block;border-radius:0.6rem;overflow:hidden;background:#000;}
.vcPh img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;background:#000;}
.vcCap{position:absolute;left:0;right:0;bottom:0;padding:1rem 0.4rem 0.3rem;font-size:0.66rem;font-weight:700;color:#E7F6FF;
  background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0));}
.vcNm{display:flex;align-items:center;gap:0.35rem;margin-top:0.15rem;font-size:1.08rem;font-weight:900;color:#fff;}
.vcNm .vi{width:1.3rem;height:1.3rem;flex:none;color:#00E5FF;}
.vcOpt[data-v="stairs"] .vcNm .vi{color:#7FB069;}
.vcWhat{font-size:0.76rem;line-height:1.35;color:#C7D3E3;font-weight:600;}
.vcMeta{font-size:0.7rem;color:#8FA3BA;line-height:1.35;}
.vcMeta b{color:#39FF88;font-weight:900;}
.vcTag{position:absolute;z-index:2;left:0.75rem;top:0.75rem;padding:0.15rem 0.45rem;border-radius:0.35rem;background:#00E5FF;color:#06111C;font-size:0.66rem;font-weight:900;}
/* 3D 전체 건물도 : 가는 방법 한 줄 */
.vcRow{display:flex;align-items:center;justify-content:center;gap:0.55rem;margin:0.35rem 0 0.1rem;}
.vcRow[hidden]{display:none;}
.vcRow .lb{font-size:0.78rem;font-weight:800;color:#8FA3BA;}
.vcRow .seg{display:flex;border:1.5px solid #00E5FF;border-radius:0.6rem;overflow:hidden;}
.vcRow button{display:flex;align-items:center;gap:0.3rem;margin:0;padding:0.38rem 0.75rem;border:0;border-radius:0;background:#0D121B;color:#00E5FF;
  font:inherit;font-size:0.8rem;font-weight:900;cursor:pointer;}
.vcRow button + button{border-left:1.5px solid #00E5FF;}
.vcRow button.on{background:#00E5FF;color:#06111C;}
.vcRow .vi{width:1rem;height:1rem;flex:none;}
/* 작은 폰 : 사진을 조금 줄여 창이 화면 안에 다 들어오게(사진은 자르지 않는다) */
@media (max-height: 700px){
  .vcPh img{max-height:27vh;aspect-ratio:auto;height:27vh;}
  .vcWrap h4{font-size:1.25rem;}
  .vcSub{margin-bottom:0.55rem;}
  .vcMeta .nt{display:none;}
}
/* 밝은 화면 */
html.lt .vcDim{background:rgba(15,27,45,.45);}
html.lt .vcWrap{color:#0F1B2D;}
html.lt .vcCard{background:#FFFFFF;border-color:#2B88C8;box-shadow:0 18px 50px rgba(15,27,45,.25);}
html.lt .vcWrap h4,html.lt .vcNm{color:#0F1B2D;}
html.lt .vcSub,html.lt .vcTo,html.lt .vcMeta{color:#44546A;}
html.lt .vcFoot{color:#5B6B80;}
html.lt .vcTo b{color:#D61F69;}
html.lt .vcX{background:#FFFFFF;border-color:#B9C6D6;color:#24364D;}
html.lt .vcOpt{background:#F4F7FB;border-color:#C9D5E3;color:#0F1B2D;}
html.lt .vcOpt:hover,html.lt .vcOpt:focus-visible,html.lt .vcOpt.last{border-color:#0B6FB8;}
html.lt .vcWhat{color:#24364D;}
html.lt .vcMeta b{color:#0E8A45;}
html.lt .vcNm .vi{color:#0B6FB8;}
html.lt .vcOpt[data-v="stairs"] .vcNm .vi{color:#3E8A2E;}
html.lt .vcTag{background:#0B6FB8;color:#FFFFFF;}
html.lt .vcRow .lb{color:#44546A;}
html.lt .vcRow .seg{border-color:#0B6FB8;}
html.lt .vcRow button{background:#FFFFFF;color:#0B6FB8;}
html.lt .vcRow button + button{border-left-color:#0B6FB8;}
html.lt .vcRow button.on{background:#0B6FB8;color:#FFFFFF;}