/* 2026-10-29 사장님 「모바일 화면 너무 안 이쁘다 · 모바일 프렌들리하게」 — 폰 폭(700px 이하)에서만 쓰는 모양.
   컴퓨터 화면은 그대로 둔다(이 파일의 규칙은 전부 @media 안에 있다). 짝: public/c/mobile.js
   되돌리기: lib/canvas.ts HEAD_EXTRA 의 mobile.css·mobile.js 두 줄을 빼면 끝. */

@media (max-width:700px){

  /* ── 위쪽 띠: 한 줄. [로고][옆으로 밀리는 메뉴 …][맨 오른쪽 고정 버튼] ──
     사장님(10-29): My page 알약이 다음 줄로 내려오는 게 안 예쁨 → M 동그라미로, 맨 오른쪽 고정.
     나머지 메뉴는 옆으로 밀면 더 보이게. 로그아웃 화면도 같은 모양(맨 오른쪽 = Join). */
  header>div{flex-wrap:nowrap!important;gap:0 16px!important;padding:10px 16px!important;
    padding-top:calc(10px + env(safe-area-inset-top))!important;min-height:56px;box-sizing:border-box}
  header>div>a:first-child{flex:none;margin-right:0!important}
  header nav{flex:1 1 auto;min-width:0;flex-wrap:nowrap!important;gap:20px!important;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  header nav::-webkit-scrollbar{display:none}
  header nav>a{flex:none;white-space:nowrap;font-size:14px!important;line-height:36px}
  /* 맨 오른쪽 고정 칸 + 왼쪽으로 번지는 그늘(밑으로 메뉴가 더 있다는 표시) */
  header nav>:last-child{position:sticky!important;right:0;margin-left:auto;flex:none;
    box-shadow:-18px 0 14px 2px #3b2c25;background:#3b2c25;border-radius:18px}
  header nav>a:last-child{min-height:36px!important;padding:0 16px!important;line-height:36px;background:#fff!important;box-shadow:-18px 0 14px 6px #3b2c25}

  /* My page → M 동그라미. 10-29 사장님: 「M이 정중앙에 있어야 · 폰트가 우리 스타일과 어긋남」
     → 원래 My page 알약과 같은 반투명 동그라미 + 제목과 같은 세리프 글꼴(Instrument Serif). 숨긴 글자의 자리·간격을 없애 정중앙에 둔다. */
  header nav>div:last-child{border-radius:50%}
  header nav>div:last-child>button{position:relative;display:block!important;width:38px;height:38px;min-height:38px!important;padding:0!important;gap:0!important;
    border-radius:50%!important;font-size:0!important;line-height:0;color:transparent!important;overflow:hidden;
    background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.24)!important}
  header nav>div:last-child>button::after{content:"M";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:400;font-size:20px;line-height:1;color:#fff;letter-spacing:0;padding-top:1px}
  /* 펼침 메뉴는 옆으로 밀리는 칸에 잘리지 않게 띠 밑으로 띄운다 */
  header nav>div:last-child>div{position:fixed!important;top:calc(100% + 6px)!important;right:12px!important;left:auto!important;
    min-width:min(260px,calc(100vw - 24px))!important}

  /* Ask us 버튼은 원래 크기·자리 그대로 둔다(10-29 사장님). 맨 아래 글만 가리지 않게 바닥에 여백을 둔다. */
  html:has(.nca-fab) footer{padding-bottom:76px}

  /* ── 공통 여백: 화면 좌우 16px, 덩어리 사이 위아래 여백은 72px → 44px (빈 공간이 너무 컸음) ── */
  main section{padding-left:16px!important;padding-right:16px!important}
  main section[style*="padding:"]{padding-top:44px!important;padding-bottom:44px!important}
  main section>div[style*="padding:72px"],main section>div[style*="padding:clamp"]{padding-top:44px!important;padding-bottom:44px!important}

  /* ── 첫 화면 큰 상자: 화면 폭 가득, 안쪽 여백 줄이기 ── */
  section[data-screen-label="첫 화면"]>div:last-child{padding-left:0!important;padding-right:0!important}
  section[data-screen-label="첫 화면"]>div:last-child>div[style*="max-width:600px"]{max-width:none!important;padding:22px 20px!important;border-radius:20px!important}
  section[data-screen-label="첫 화면"] a[href="#/en/apply"],section[data-screen-label="첫 화면"] a[href="#/en/login"]{width:100%;justify-content:center;box-sizing:border-box}
}

/* ── 마이 프로필 탭 3개 (mobile.js 가 붙인다) ── */
.ncm-tabs{display:none}
@media (max-width:700px){
  .ncm-tabs{display:flex;gap:6px;position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:20;
    margin:0 -16px;padding:10px 16px;background:rgba(59,44,37,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.08)}
  .ncm-tabs button{flex:1;min-height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:transparent;
    color:rgba(255,255,255,.72);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
  .ncm-tabs button.on{background:#fff;color:#1a1410;border-color:#fff}
  [data-ncm-tab]{scroll-margin-top:130px}
  section[data-ncm="about"] [data-ncm-tab]:not([data-ncm-tab="about"]),
  section[data-ncm="ship"]  [data-ncm-tab]:not([data-ncm-tab="ship"]),
  section[data-ncm="prefs"] [data-ncm-tab]:not([data-ncm-tab="prefs"]){display:none!important}
  /* 탭으로 나눈 뒤엔 두 칸 짜리 틀의 빈 간격이 남지 않게 */
  section[data-ncm] > div[data-ncm-grid]{gap:24px!important}
}