/* 1023px 이하 — 상단 메뉴·서브 탭 */
@media all and (max-width: 1023px) {

  /* ── 상단 메뉴줄 ─────────────────────────────────────────
     옆으로 밀리는 줄이다. 가려진 쪽 끝에 그림자를 깔아 더 있다는 것을 보인다.
     (흰 덮개는 내용과 함께 밀리고, 그림자는 제자리에 남는다) */
  .header .hd_wrap {
    background:
      linear-gradient(to right, #fff 60%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
      linear-gradient(to left, #fff 60%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
      linear-gradient(to right, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) left center / 18px 100% no-repeat scroll,
      linear-gradient(to left, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) right center / 18px 100% no-repeat scroll,
      #fff;
  }

  /* 폭 해제 규칙(body * max-width:100%)이 줄을 화면 폭에 가두므로 여기서 푼다 */
  .header .hd_wrap > .main_menu {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
  }

  /* 지금 보고 있는 지면의 메뉴 */
  body:has(:is(#introduce, #introduce2, #introduce3) > .head) .main_menu a[href="/intro01.php"],
  body:has(#sleep) .main_menu a[href="/sleep01.php"],
  body:has(#oneday > .head) .main_menu a[href="/digital01.php"],
  body:has(#digital > .head) .main_menu a[href="/implant01.php"],
  body:has(#ddc > .head) .main_menu a[href="/orthodontic01.php"],
  body:has(#mise > .head) .main_menu a[href="/endodontic01.php"],
  body:has(#child > .head) .main_menu a[href="/child01.php"],
  body:has(#smart > .head) .main_menu a[href="/care01.php"],
  body:has(:is(#news, #tips, #youtube, #kin) > .head) .main_menu a[href="/notice01.php"] {
    color: #558ed5;
  }

  body:has(:is(#introduce, #introduce2, #introduce3) > .head) .main_menu a[href="/intro01.php"]::after,
  body:has(#sleep) .main_menu a[href="/sleep01.php"]::after,
  body:has(#oneday > .head) .main_menu a[href="/digital01.php"]::after,
  body:has(#digital > .head) .main_menu a[href="/implant01.php"]::after,
  body:has(#ddc > .head) .main_menu a[href="/orthodontic01.php"]::after,
  body:has(#mise > .head) .main_menu a[href="/endodontic01.php"]::after,
  body:has(#child > .head) .main_menu a[href="/child01.php"]::after,
  body:has(#smart > .head) .main_menu a[href="/care01.php"]::after,
  body:has(:is(#news, #tips, #youtube, #kin) > .head) .main_menu a[href="/notice01.php"]::after {
    width: 100%;
    height: 3px;
  }

  /* ── 서브 탭바 ──────────────────────────────────────────
     칸을 글자 폭만큼 두고 한 줄로 민다. 다 들어가면 가운데 모인다. */
  body :is(#introduce, #introduce2, #introduce3, #oneday, #digital, #ddc, #mise, #child, #smart, #news, #tips, #youtube, #kin) > .head > div {
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    background:
      linear-gradient(to right, #fff 60%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
      linear-gradient(to left, #fff 60%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
      linear-gradient(to right, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0)) left center / 16px 100% no-repeat scroll,
      linear-gradient(to left, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0)) right center / 16px 100% no-repeat scroll,
      #fff;
  }

  body :is(#introduce, #introduce2, #introduce3, #oneday, #digital, #ddc, #mise, #child, #smart, #news, #tips, #youtube, #kin) > .head > div::-webkit-scrollbar {
    display: none;
  }

  body :is(#introduce, #introduce2, #introduce3, #oneday, #digital, #ddc, #mise, #child, #smart, #news, #tips, #youtube, #kin) > .head > div > ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    height: auto;
    margin: 0;
    padding: 0 12px 1px;
  }

  body :is(#introduce, #introduce2, #introduce3, #oneday, #digital, #ddc, #mise, #child, #smart, #news, #tips, #youtube, #kin) > .head > div > ul > li {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin: 0 0 0 -1px;
  }

  body :is(#introduce, #introduce2, #introduce3, #oneday, #digital, #ddc, #mise, #child, #smart, #news, #tips, #youtube, #kin) > .head > div > ul > li:first-child {
    margin-left: 0;
  }

  body :is(#introduce, #introduce2, #introduce3, #oneday, #digital, #ddc, #mise, #child, #smart, #news, #tips, #youtube, #kin) > .head > div > ul > li > button {
    display: block;
    width: auto;
    height: 100%;
    min-height: 46px;
    padding: 0;
  }

  body :is(#introduce, #introduce2, #introduce3, #oneday, #digital, #ddc, #mise, #child, #smart, #news, #tips, #youtube, #kin) > .head > div > ul > li > button > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 100%;
    min-height: 46px;
    padding: 0 14px;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: -0.03em;
    white-space: nowrap;
  }
}

/* 태블릿 폭 — 칸과 글자를 조금 키운다 */
@media all and (min-width: 600px) and (max-width: 1023px) {
  body :is(#introduce, #introduce2, #introduce3, #oneday, #digital, #ddc, #mise, #child, #smart, #news, #tips, #youtube, #kin) > .head > div > ul > li > button,
  body :is(#introduce, #introduce2, #introduce3, #oneday, #digital, #ddc, #mise, #child, #smart, #news, #tips, #youtube, #kin) > .head > div > ul > li > button > a {
    min-height: 52px;
  }

  body :is(#introduce, #introduce2, #introduce3, #oneday, #digital, #ddc, #mise, #child, #smart, #news, #tips, #youtube, #kin) > .head > div > ul > li > button > a {
    padding: 0 16px;
    font-size: 16px;
  }
}

/* 좁은 폰 — 네 칸짜리 줄이 한 화면에 들어오게 여백을 줄인다 */
@media all and (max-width: 374px) {
  body :is(#introduce, #introduce2, #introduce3, #oneday, #digital, #ddc, #mise, #child, #smart, #news, #tips, #youtube, #kin) > .head > div > ul {
    padding: 0 4px 1px;
  }

  body :is(#introduce, #introduce2, #introduce3, #oneday, #digital, #ddc, #mise, #child, #smart, #news, #tips, #youtube, #kin) > .head > div > ul > li > button > a {
    padding: 0 10px;
  }
}