/* ============================================================
   모바일 하단 탭 바 (≤768px)
   mobile_tabs_kr.jsp / mobile_tabs_en.jsp 가 이 파일을 직접 불러온다.
   그래서 탭을 넣는 페이지는 CSS 를 따로 챙기지 않아도 된다.

   원칙
   - 이 파일에는 .gm-tabs 와 아이콘만 둔다. 페이지 레이아웃은 건드리지 않는다.
   - 색 토큰이 없는 페이지를 위해 :where() 로 가중치 0 짜리 기본값만 깔아 둔다.
     페이지가 값을 정해 두었다면 언제나 페이지 쪽이 이긴다.
   - 기본은 '숨김'. 아래 미디어쿼리에서만 켠다.
   ============================================================ */

:where(:root) {
  --navy-900: #0a1f3d;
  --ink-400: #8a94a6;
  --ink-300: #b6bdc9;
  --line: #e3e7ee;
}

.gm-tabs { display: none; }

@media (max-width: 768px) {
  body { padding-bottom: 68px; }
  .gm-tabs {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 1000;
    background: rgba(255,255,255,0.97);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: 8px 6px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .gm-tabs a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 6px 0;
    text-decoration: none;
  }
  .gm-tabs i { display: block; width: 18px; height: 18px; background: var(--ink-300); }
  .gm-tabs span {
    font-size: 9.5px; font-weight: 500; line-height: 1;
    color: var(--ink-400);
    white-space: nowrap;
  }
  .gm-tabs a.on i { background: var(--navy-900); }
  .gm-tabs a.on span { color: var(--navy-900); }

  .ic-tab-home {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5.5 9.5V20h13V9.5'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5.5 9.5V20h13V9.5'/></svg>") center/contain no-repeat;
  }
  .ic-tab-about {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='1.5'/><path d='M8 7h3M13 7h3M8 11h3M13 11h3M8 15h3M13 15h3'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='1.5'/><path d='M8 7h3M13 7h3M8 11h3M13 11h3M8 15h3M13 15h3'/></svg>") center/contain no-repeat;
  }
  .ic-tab-product {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/><path d='M4 7.5l8 4.5 8-4.5M12 12v9'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/><path d='M4 7.5l8 4.5 8-4.5M12 12v9'/></svg>") center/contain no-repeat;
  }
  .ic-tab-field {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'><rect x='3.5' y='3.5' width='7' height='7' rx='1'/><rect x='13.5' y='3.5' width='7' height='7' rx='1'/><rect x='3.5' y='13.5' width='7' height='7' rx='1'/><rect x='13.5' y='13.5' width='7' height='7' rx='1'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'><rect x='3.5' y='3.5' width='7' height='7' rx='1'/><rect x='13.5' y='3.5' width='7' height='7' rx='1'/><rect x='3.5' y='13.5' width='7' height='7' rx='1'/><rect x='13.5' y='13.5' width='7' height='7' rx='1'/></svg>") center/contain no-repeat;
  }
  .ic-tab-record {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'><path d='M8 5h11M8 12h11M8 19h11'/><circle cx='4' cy='5' r='1.2' fill='black' stroke='none'/><circle cx='4' cy='12' r='1.2' fill='black' stroke='none'/><circle cx='4' cy='19' r='1.2' fill='black' stroke='none'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'><path d='M8 5h11M8 12h11M8 19h11'/><circle cx='4' cy='5' r='1.2' fill='black' stroke='none'/><circle cx='4' cy='12' r='1.2' fill='black' stroke='none'/><circle cx='4' cy='19' r='1.2' fill='black' stroke='none'/></svg>") center/contain no-repeat;
  }
}