@layer theme-custom {
/* ==========================================================
   IN-N-YOUNG  /  THEME CUSTOM CSS
   File    : theme-css-nav-v2.3-20260829.css
   Version : v2.3
   Date    : 2026-08-29
   Paste into: Admin > System > Theme Custom CSS  (replace all)

   ----------------------------------------------------------
   WHAT THIS FILE DOES
   ----------------------------------------------------------
   1. Navbar over the hero
      Scope : body.b_service_detail   (treatment pages)
              body.b_about_detail     (about page /about/detail/N)
              The homepage is NOT affected.
      Effect: navbar floats over the hero image, sticks to the
              top on scroll, logo swapped to .web-title, menu
              right aligned, plus a 901-1180px size tweak.

   2. Dropdown menu (site-wide, desktop only)
      Translucent frosted panel, centred under its label,
      centred item text, hover underline, entrance animation.
      Also fixes the homepage bug where dropdown text was
      white on a white background.

   ----------------------------------------------------------
   VERSION HISTORY
   ----------------------------------------------------------
   v2.3  2026-08-29  Versioned filename + this header. No CSS change.
   v2.2  2026-08-29  Fixed the about-page body class:
                     b_about_list -> b_about_detail (25 places).
                     Sticky state now matches any body class
                     containing "nav-scrolled", so each page keeps
                     its own script name (iy-service-nav-scrolled,
                     iy-about-nav-scrolled, ...).
   v2.1  2026-08-29  Dropdown: translucent panel, centred panel
                     and centred item text.
   v2.0  2026-08-29  Dropdown redesigned and made site-wide.
   v1.0  2026-08-29  Navbar rules moved here out of each page's
                     inline <style>.

   ----------------------------------------------------------
   RULES FOR EDITING
   ----------------------------------------------------------
   - Bump the version, the filename and the history above
     every time this file changes.
   - Comments must stay ASCII only. The admin field mangles
     non-ASCII characters into garbage.
   - New treatment/about pages do NOT copy these rules into
     their page content. Page inline CSS holds page-specific
     rules only (see AGENTS.md rule 1.9).
   ========================================================== */

@media(min-width:901px) {body.b_service_detail .content.nav-logo,
  body.b_about_detail .content.nav-logo {
    position: relative !important
  }body.b_service_detail .content.nav-logo>nav.navbar,
  body.b_about_detail .content.nav-logo>nav.navbar {
    position: absolute !important;
    top: 24px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    grid-template-rows: 72px !important;
    align-items: center !important;
    padding: 0 clamp(32px, 5vw, 80px) !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: top .35s ease, background-color .35s ease, box-shadow .35s ease !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.navi-item:first-child,
  body.b_about_detail .content.nav-logo>nav.navbar>.navi-item:first-child {
    display: none !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.navi-item:nth-child(2),
  body.b_about_detail .content.nav-logo>nav.navbar>.navi-item:nth-child(2) {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 220px !important;
    margin: 0 !important;
    padding: 0 !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.navi-item:nth-child(2)>.container,
  body.b_about_detail .content.nav-logo>nav.navbar>.navi-item:nth-child(2)>.container {
    width: 220px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important
  }body.b_service_detail .content.nav-logo>nav.navbar .navbar-brand,
  body.b_about_detail .content.nav-logo>nav.navbar .navbar-brand {
    display: none !important
  }body.b_service_detail .content.nav-logo>nav.navbar .web-title,
  body.b_about_detail .content.nav-logo>nav.navbar .web-title {
    display: block !important;
    width: 205px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important
  }body.b_service_detail .content.nav-logo>nav.navbar .web-title a,
  body.b_about_detail .content.nav-logo>nav.navbar .web-title a {
    display: block !important;
    width: 205px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-indent: -9999px !important;
    font-size: 0 !important;
    background: url("https://in-n-young.com/images/in-n-young.com/upload_file/350ec4a2-9ef4-4d86-baa1-03bce73ae0ed.png") left center/contain no-repeat !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.naviMain,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.naviMain>.container,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain>.container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.naviMain ul,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain ul {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(16px, 2.2vw, 34px) !important;
    margin: 0 !important;
    padding: 0 !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.naviMain li,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain li {
    margin: 0 !important;
    padding: 0 !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.naviMain a,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain a,
  body.b_service_detail .content.nav-logo>nav.navbar>.naviMain span,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain span,
  body.b_service_detail .content.nav-logo>nav.navbar>.naviMain i,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain i {
    color: #fff !important;
    font-size: 15px !important;
    letter-spacing: .07em !important
  }body.b_service_detail[class*="nav-scrolled"] .content.nav-logo>nav.navbar,
  body.b_about_detail[class*="nav-scrolled"] .content.nav-logo>nav.navbar {
    position: fixed !important;
    top: 0 !important;
    z-index: 1000 !important;
    height: 76px !important;
    min-height: 76px !important;
    background: rgba(43, 33, 28, .94) !important;
    box-shadow: 0 8px 24px rgba(43, 33, 28, .14) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important
  }

}

@media(min-width:901px) and (max-width:1180px) {body.b_service_detail .content.nav-logo>nav.navbar,
  body.b_about_detail .content.nav-logo>nav.navbar {
    grid-template-columns: 180px minmax(0, 1fr) !important;
    padding-left: 4vw !important;
    padding-right: 4vw !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.navi-item:nth-child(2),
  body.b_about_detail .content.nav-logo>nav.navbar>.navi-item:nth-child(2),
  body.b_service_detail .content.nav-logo>nav.navbar>.navi-item:nth-child(2)>.container,
  body.b_about_detail .content.nav-logo>nav.navbar>.navi-item:nth-child(2)>.container {
    width: 180px !important
  }body.b_service_detail .content.nav-logo>nav.navbar .web-title,
  body.b_about_detail .content.nav-logo>nav.navbar .web-title,
  body.b_service_detail .content.nav-logo>nav.navbar .web-title a,
  body.b_about_detail .content.nav-logo>nav.navbar .web-title a {
    width: 176px !important;
    height: 46px !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.naviMain ul,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain ul {
    gap: 16px !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.naviMain a,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain a,
  body.b_service_detail .content.nav-logo>nav.navbar>.naviMain span,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain span,
  body.b_service_detail .content.nav-logo>nav.navbar>.naviMain i,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain i {
    font-size: 13px !important;
    letter-spacing: .035em !important
  }

}

/* ==========================================================
   Global dropdown menu  (site-wide, desktop only)
   Added 2026-08-29 (theme CSS v2)
   v2.1 2026-08-29: translucent frosted panel, centred panel
                    and centred item text.

   Replaces the old service-detail-only dropdown rules and now
   applies to EVERY page. This also fixes the homepage bug where
   dropdown text was white on a white background (invisible).

   The long selector prefix is deliberate: the theme sets the
   menu colour with !important at a high specificity, and a
   shorter selector loses to it.

   Mobile is untouched (it uses .mobile-nav, not .naviMain).
   ========================================================== */

@media(min-width:901px) {

  /* ---- panel: translucent frosted glass, centred under the label ---- */
  body .content.nav-logo nav.navbar .naviMain li.dropdown > .dropdown-menu {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    min-width: 212px !important;
    margin-top: 14px !important;
    padding: 8px !important;
    background: rgba(255, 255, 255, .82) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    border-radius: 14px !important;
    box-shadow:
      0 20px 44px rgba(43, 33, 28, .18),
      0 2px 8px rgba(43, 33, 28, .08) !important;
  }

  /* invisible bridge across the gap, so the menu does not close
     while the cursor travels from the label down to the panel */
  body .content.nav-logo nav.navbar .naviMain li.dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
  }

  /* ---- items: centred text ---- */
  body .content.nav-logo nav.navbar .naviMain li.dropdown > .dropdown-menu > a.dropdown-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    color: #2b211c !important;
    background: transparent !important;
    font-size: 14.5px !important;
    letter-spacing: .06em !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    transition:
      color .24s cubic-bezier(.16, 1, .3, 1),
      background-color .24s cubic-bezier(.16, 1, .3, 1) !important;
  }

  /* centred underline that grows out from the middle on hover */
  body .content.nav-logo nav.navbar .naviMain li.dropdown > .dropdown-menu > a.dropdown-item::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 9px;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #c96500;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform .24s cubic-bezier(.16, 1, .3, 1);
  }

  body .content.nav-logo nav.navbar .naviMain li.dropdown > .dropdown-menu > a.dropdown-item:hover,
  body .content.nav-logo nav.navbar .naviMain li.dropdown > .dropdown-menu > a.dropdown-item:focus {
    color: #c96500 !important;
    background: rgba(247, 243, 236, .9) !important;
  }

  body .content.nav-logo nav.navbar .naviMain li.dropdown > .dropdown-menu > a.dropdown-item:hover::after,
  body .content.nav-logo nav.navbar .naviMain li.dropdown > .dropdown-menu > a.dropdown-item:focus::after {
    transform: translateX(-50%) scaleX(1);
  }

}

/* ---- entrance animation
        (skipped for visitors who ask for reduced motion)
        NOTE: keyframes must keep translateX(-50%), otherwise the
        animation would undo the horizontal centring. ---- */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {

  body .content.nav-logo nav.navbar .naviMain li.dropdown > .dropdown-menu.show {
    animation: innyDropIn .24s cubic-bezier(.16, 1, .3, 1) both;
  }

  @keyframes innyDropIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to   { opacity: 1; transform: translateX(-50%); }
  }

}
}