/* Y700 세로 상태 안내는 외부 CSS로 숨겨 CSP 적용 페이지에서도 본문에 노출되지 않게 한다. */
.y700-orientation-notice {
  display: none;
}

html.mts-y700-portrait-ui,
html.mts-y700-portrait-ui body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html.mts-y700-portrait-ui body {
  background: #153f4a;
}

html.mts-y700-portrait-ui body > :not(.y700-orientation-notice) {
  visibility: hidden;
}

html.mts-y700-portrait-ui .y700-orientation-notice:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: max(28px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
  color: #fff;
  background: #153f4a;
  text-align: center;
  font-family: "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}

html.mts-y700-portrait-ui .y700-orientation-notice strong {
  font-size: clamp(24px, 4vw, 34px);
}

html.mts-y700-portrait-ui .y700-orientation-notice > span:last-child {
  color: #d5e7ec;
  font-size: clamp(15px, 2.2vw, 19px);
}

.y700-orientation-symbol {
  display: grid;
  width: 84px;
  height: 84px;
  margin-bottom: 8px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 24px;
  background: rgba(255, 255, 255, .1);
}

.y700-orientation-symbol svg {
  width: 58px;
  height: 58px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

/*
 * Lenovo Legion Y700 4세대 TB322FC 전용 공통 화면.
 * 기능 내부 레이아웃은 각 페이지의 원래 CSS가 단독으로 관리한다.
 */
html.mts-y700-landscape-ui {
  --y700-nav-width: 74px;
  scroll-padding-left: calc(var(--y700-nav-width) + 12px);
}

html.mts-y700-landscape-ui.mts-has-app-nav body {
  padding-left: calc(var(--y700-nav-width) + env(safe-area-inset-left));
  -webkit-tap-highlight-color: transparent;
}

html.mts-y700-landscape-ui .mobile-app-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1000;
  display: flex;
  width: calc(var(--y700-nav-width) + env(safe-area-inset-left));
  min-height: 0;
  padding: calc(7px + env(safe-area-inset-top)) 5px calc(7px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  flex-direction: column;
  overflow: hidden;
  border-top: 0;
  border-right: 1px solid #cbd8e3;
  background: rgba(255, 255, 255, .98);
  box-shadow: 5px 0 20px rgba(24, 43, 63, .1);
  backdrop-filter: blur(14px);
}

html.mts-y700-landscape-ui .mobile-app-nav-home {
  position: relative;
  z-index: 1;
  flex: 0 0 58px;
  border-right: 0;
  border-bottom: 1px solid #dbe4eb;
  background: rgba(255, 255, 255, .98);
}

html.mts-y700-landscape-ui .mobile-app-nav-scroll {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

html.mts-y700-landscape-ui .mobile-app-nav-scroll::-webkit-scrollbar {
  display: none;
}

html.mts-y700-landscape-ui .mobile-app-nav-item {
  display: grid;
  flex: 0 0 56px;
  width: 64px;
  min-height: 56px;
  place-content: center;
  border-radius: 10px;
  color: #66778b;
  scroll-snap-align: center;
  text-decoration: none;
}

html.mts-y700-landscape-ui .mobile-app-nav-item.active {
  background: #e9f3f7;
  color: #15516a;
}

html.mts-y700-landscape-ui .mobile-app-nav-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

html.mts-y700-landscape-ui .mobile-app-nav-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

html.mts-y700-landscape-ui .mobile-app-nav-icon.home-mark { background: #15516a; }
html.mts-y700-landscape-ui .mobile-app-nav-icon.calendar-mark { position: relative; overflow: hidden; padding-top: 6px; background: #1f6f8b; }
html.mts-y700-landscape-ui .mobile-app-nav-icon.calendar-mark::before { height: 8px; border-radius: 11px 11px 0 0; background: #173f54; }
html.mts-y700-landscape-ui .mobile-app-nav-icon.project-mark { background: #267255; }
html.mts-y700-landscape-ui .mobile-app-nav-icon.finish-material-mark { background: #9a5b35; }
html.mts-y700-landscape-ui .mobile-app-nav-icon.schedule-mark { background: #17653a; color: #e3f3e9; }
html.mts-y700-landscape-ui .mobile-app-nav-icon.vehicle-mark { background: #8a5a18; }
html.mts-y700-landscape-ui .mobile-app-nav-icon.calculator-mark { background: #385d8a; }
html.mts-y700-landscape-ui .mobile-app-nav-icon.contact-mark { background: #5968a8; }
html.mts-y700-landscape-ui .mobile-app-nav-icon.trade-knowledge-mark { background: #426b50; }
html.mts-y700-landscape-ui .mobile-app-nav-icon.cost-statement-mark { background: #8a6334; }
html.mts-y700-landscape-ui .mobile-app-nav-icon.daily-report-mark { background: #16766f; }
html.mts-y700-landscape-ui .mobile-app-nav-icon.checklist-mark { background: #6657b8; }
html.mts-y700-landscape-ui .mobile-app-nav-icon.laboratory-mark { background: #5d477f; color: #f3ecff; }

html.mts-y700-landscape-ui .mobile-app-nav-item.active .mobile-app-nav-icon {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px currentColor;
}

html.mts-y700-landscape-ui .app-choice-page {
  width: min(1040px, 100%);
  margin: 8px auto 0;
}

html.mts-y700-landscape-ui .app-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

html.mts-y700-landscape-ui .app-choice-card {
  grid-template-columns: 52px minmax(0, 1fr) 18px;
  gap: 11px;
  min-height: 104px;
  padding: 13px;
  border-radius: 12px;
}

html.mts-y700-landscape-ui .app-choice-icon {
  width: 52px;
  height: 52px;
}

html.mts-y700-landscape-ui .app-choice-copy > strong {
  font-size: 16px;
}

@media (max-width: 900px) {
  html.mts-y700-landscape-ui .app-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-height: 700px) {
  html.mts-y700-landscape-ui .mobile-app-nav-home {
    flex-basis: 50px;
  }

  html.mts-y700-landscape-ui .mobile-app-nav-item {
    flex-basis: 50px;
    min-height: 50px;
  }

  html.mts-y700-landscape-ui .mobile-app-nav-icon {
    width: 35px;
    height: 35px;
  }
}