@layer theme-custom {
/* ==========================================================
   IN-N-YOUNG  /  THEME CUSTOM CSS
   File    : theme-css-nav-v2.7-20260901.css
   Version : v2.7
   Date    : 2026-09-01
   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.7  2026-09-01  Homepage mobile shell width guard.
                     Removes Bootstrap row negative margins and
                     child column padding only for the row that
                     contains #iy-home.
   v2.6  2026-08-30  IMPORTANT ENVIRONMENT FINDING.
                     The admin wraps everything pasted into
                     Theme Custom CSS inside
                        @layer theme-custom { ... }
                     Under CSS cascade layers, a NORMAL
                     declaration in a layer always loses to the
                     theme's own unlayered CSS, no matter the
                     source order or the selector. An
                     !important declaration in a layer wins.
                     Every rule in blocks 1 and 2 already uses
                     !important, so they were never affected.
                     Block 3 did not, so v2.5 published fine but
                     word-break stayed break-all on the live
                     site. Verified on the homepage:
                     :root word-break = break-all,
                     overflow-wrap = anywhere (the second one
                     applied only because the theme does not
                     set it at all).
                     Fix: !important on block 3, and the same
                     rule repeated for  a  because the theme
                     also sets  a { word-break: break-all }
                     directly, which inheritance cannot beat.
                     Verified live on the homepage and
                     /about/detail/1: root and a both become
                     normal, horizontal overflow stays 0.
   v2.5  2026-08-30  Word-break fix corrected and regression
                     tested. v2.4 used overflow-wrap:break-word,
                     which made auto-layout TABLES push the page
                     235px wider at 375px (break-word does not
                     shrink min-content width). Changed to
                     overflow-wrap:anywhere. Retested at 375 /
                     768 / 1440: zero horizontal overflow on
                     long URLs, long English names, table cells,
                     breadcrumbs, buttons, fixed-width cards,
                     flex and grid columns. DO NOT PUBLISH v2.4.
   v2.4  2026-08-30  Site-wide word-break fix. SUPERSEDED, do
                     not publish - broke tables on mobile.
   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%); }
  }

}


/* ==========================================================
   3. Word breaking  (site-wide)
   Added 2026-08-30 (v2.4), corrected 2026-08-30 (v2.5)

   The theme sets  :root { word-break: break-all }  which is
   inherited by every element. break-all may break INSIDE a
   normal word, so English headings render as "beau / ty" on
   narrow screens. Chinese is unaffected.

   overflow-wrap: anywhere keeps the original intent - long
   unbreakable strings such as URLs still wrap instead of
   overflowing - without cutting normal words.

   Why "anywhere" and not "break-word":
   break-word does NOT reduce an element's min-content width.
   Inside an auto-layout <table> the cell therefore keeps
   demanding the full width of the longest URL, and the table
   pushes the whole page sideways. Measured at 375px: 235px of
   horizontal overflow. "anywhere" does reduce min-content
   width, so tables, flex items and grid items all stay inside
   the viewport.

   Why !important here (v2.6):
   the admin wraps this whole file in @layer theme-custom.
   Normal declarations in a layer lose to the theme's own
   unlayered CSS. !important declarations in a layer win.
   The  a  selector is repeated on purpose: the theme sets
   a { word-break: break-all } directly on the element, and
   an inherited value from :root can never beat that.

   Regression tested 2026-08-30 at 375 / 768 / 1440 px:
   long URL with query string, long English treatment name,
   very long single English word, long email address, Chinese
   paragraph, table cell with URL, breadcrumb, pill button,
   fixed-width card, flex column, grid column.
   Result: horizontal overflow 0 everywhere, same as the
   current live break-all. Only effect is that some blocks
   grow 1 line taller because words no longer split.
   ========================================================== */

:root,
a{
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* ==========================================================
   IN-N-YOUNG / HOME MOBILE SHELL WIDTH GUARD v1.0 / 2026-09-01
   Scope: homepage only, <=767px.
   ========================================================== */
@media (max-width: 767px) {
  #pjax-container main .index-editor .small.html-info > .row:has(#iy-home) {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #pjax-container main .index-editor .small.html-info > .row:has(#iy-home) > .col-md-12 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

}