/* index.html — 모바일 홈 캘리그래피 하단 바로가기 (PC 숨김) */

.intro-mobile-quick-nav {
  display: none;
}

@media (max-width: 820px) {
  /* 홈: 셸·body가 뷰포트만큼 늘어나며 생기는 회색 여백 제거 */
  html:has(body.ti #tiShell > .right.intro-kv),
  body.ti:has(#tiShell > .right.intro-kv) {
    height: auto;
    min-height: 0;
  }

  body.ti:has(#tiShell > .right.intro-kv) #tiShell {
    min-height: 0;
    height: auto;
    align-content: start;
    align-items: start;
  }

  .right.intro-kv {
    --intro-quick-nav-bg: #f4efe6;
    --intro-quick-nav-btn-bg: #faf8f5;
    --intro-quick-nav-btn-bg-hover: #f5f1eb;
    background: var(--intro-quick-nav-bg);
    align-self: start;
    width: 100%;
    flex: none;
    padding-inline: 0;
  }

  body.ti:has(#tiShell > .right.intro-kv) .footer.footer--slot-mobile {
    align-self: start;
    margin-top: 0;
  }

  /* 접힘: 홈은 자연 스택(키비주얼 → 푸터), 행 높이 stretch 방지 */
  .ti .shell.menu-collapsed-mobile:has(> .right.intro-kv) {
    align-items: start;
    align-content: start;
  }

  .ti .shell.menu-collapsed-mobile:has(> .right.intro-kv) > .left {
    height: 0;
    min-height: 0 !important;
    padding: 0;
    margin: 0;
    border: none;
    overflow: visible;
    grid-row: auto;
  }

  .ti .shell.menu-collapsed-mobile:has(> .right.intro-kv) > .right.intro-kv {
    grid-row: auto;
  }

  .ti .shell.menu-collapsed-mobile:has(> .right.intro-kv) > .footer.footer--slot-mobile {
    grid-row: auto;
  }

  .right.intro-kv .intro-kv__frame {
    background: #000;
  }

  .intro-mobile-quick-nav {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    padding: 22px 16px 10px;
    box-sizing: border-box;
    background: var(--intro-quick-nav-bg);
  }

  .intro-mobile-quick-nav__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .intro-mobile-quick-nav__grid > li {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .intro-mobile-quick-nav__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 85%;
    aspect-ratio: 1;
    min-height: 0;
    padding: 10px 6px;
    border: 1px solid #111;
    background: var(--intro-quick-nav-btn-bg);
    color: #111;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
  }

  .intro-mobile-quick-nav__btn:hover,
  .intro-mobile-quick-nav__btn:focus-visible {
    background: var(--intro-quick-nav-btn-bg-hover);
    outline: none;
  }

  .intro-mobile-quick-nav__btn:focus-visible {
    box-shadow: inset 0 0 0 1px #111;
  }

  .intro-mobile-quick-nav__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: #111;
  }

  .intro-mobile-quick-nav__ico img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .intro-mobile-quick-nav__label {
    display: block;
    max-width: 100%;
    word-break: keep-all;
  }

  .intro-mobile-quick-nav__label--sm {
    font-size: 11px;
    letter-spacing: -0.02em;
  }
}