/* Japanese 2_8_1_Sound_eardrum BS5 v1
   Freeze: navbar/footer/mobile shell/B DOM/img src/text/href/images.
   Geometry follows Chinese same-name BS5 Golden Reference via structural selectors only. */

.jp-bs5-2-8-1-page .thumbnail{
  border:0 !important;
  border-color:transparent !important;
  box-shadow:none !important;
  outline:0 !important;
}
.jp-bs5-2-8-1-page .more a,
.jp-bs5-2-8-1-page .more a:hover,
.jp-bs5-2-8-1-page .more a:focus,
.jp-bs5-2-8-1-page .more a:active{
  text-decoration:none !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}
.jp-bs5-2-8-1-page .more a .glyphicon-menu-right{
  display:inline-block !important;
  font-size:1.5em !important;
  line-height:1 !important;
  margin-left:.25em !important;
  vertical-align:-.08em !important;
}

/* B1 desktop: full-width shell, source image natural ratio, centered, no crop. */
.jp-bs5-2-8-1-page .container-fluid:has(img[src="img/2_8_1_Sound_eardrum.jpg"]){
  padding-left:0 !important;
  padding-right:0 !important;
  overflow:hidden !important;
}
.jp-bs5-2-8-1-page .container-fluid:has(img[src="img/2_8_1_Sound_eardrum.jpg"]) > .row,
.jp-bs5-2-8-1-page .container-fluid:has(img[src="img/2_8_1_Sound_eardrum.jpg"]) .row:has(> img[src="img/2_8_1_Sound_eardrum.jpg"]){
  --bs-gutter-x:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.jp-bs5-2-8-1-page .container-fluid:has(img[src="img/2_8_1_Sound_eardrum.jpg"]) [class*="col-"]{
  padding-left:0 !important;
  padding-right:0 !important;
}
.jp-bs5-2-8-1-page img[src="img/2_8_1_Sound_eardrum.jpg"]{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto !important;
  object-fit:initial !important;
}

/* B2: existing wrapper contains two text columns + one full-width image.
   Desktop = 50/50 text row, image spans both columns. */
@media (min-width:768px){
  .jp-bs5-2-8-1-page .container:has(img[src="img/2_8_2_Sound_eardrum.jpg"]) > .col-xs-12.col-sm-12{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    align-items:start !important;
  }
  .jp-bs5-2-8-1-page .container:has(img[src="img/2_8_2_Sound_eardrum.jpg"]) > .col-xs-12.col-sm-12 > .col-xs-12.col-sm-6{
    float:none !important;
    width:100% !important;
    max-width:100% !important;
  }
  .jp-bs5-2-8-1-page .container:has(img[src="img/2_8_2_Sound_eardrum.jpg"]) > .col-xs-12.col-sm-12 > .thumbnail{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:100% !important;
  }
}

/* B2 bottom image: natural ratio; Chinese Golden Reference uses full content width. */
.jp-bs5-2-8-1-page img[src="img/2_8_2_Sound_eardrum.jpg"]{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto !important;
  object-fit:initial !important;
}

/* B3 gray zone: both 50/50 rows stay inside one continuous #f2f2f2 region. */
.jp-bs5-2-8-1-page .back-gray:has(img[src="img/2_8_3_Sound_eardrum.jpg"]):has(img[src="img/2_8_4_Sound_eardrum.jpg"]),
.jp-bs5-2-8-1-page .back-gray:has(img[src="img/2_8_3_Sound_eardrum.jpg"]):has(img[src="img/2_8_4_Sound_eardrum.jpg"]) .container,
.jp-bs5-2-8-1-page .back-gray:has(img[src="img/2_8_3_Sound_eardrum.jpg"]):has(img[src="img/2_8_4_Sound_eardrum.jpg"]) [class*="col-"],
.jp-bs5-2-8-1-page .back-gray:has(img[src="img/2_8_3_Sound_eardrum.jpg"]):has(img[src="img/2_8_4_Sound_eardrum.jpg"]) .thumbnail,
.jp-bs5-2-8-1-page .back-gray:has(img[src="img/2_8_3_Sound_eardrum.jpg"]):has(img[src="img/2_8_4_Sound_eardrum.jpg"]) h1,
.jp-bs5-2-8-1-page .back-gray:has(img[src="img/2_8_3_Sound_eardrum.jpg"]):has(img[src="img/2_8_4_Sound_eardrum.jpg"]) h2,
.jp-bs5-2-8-1-page .back-gray:has(img[src="img/2_8_3_Sound_eardrum.jpg"]):has(img[src="img/2_8_4_Sound_eardrum.jpg"]) p,
.jp-bs5-2-8-1-page .back-gray:has(img[src="img/2_8_3_Sound_eardrum.jpg"]):has(img[src="img/2_8_4_Sound_eardrum.jpg"]) a{
  background:#f2f2f2 !important;
}
@media (min-width:768px){
  .jp-bs5-2-8-1-page .back-gray:has(img[src="img/2_8_3_Sound_eardrum.jpg"]):has(img[src="img/2_8_4_Sound_eardrum.jpg"]) > .container{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:flex-start !important;
  }
  .jp-bs5-2-8-1-page .back-gray:has(img[src="img/2_8_3_Sound_eardrum.jpg"]):has(img[src="img/2_8_4_Sound_eardrum.jpg"]) > .container > .col-xs-12.col-sm-6{
    float:none !important;
    width:50% !important;
    max-width:50% !important;
    flex:0 0 50% !important;
  }
}
.jp-bs5-2-8-1-page img[src="img/2_8_3_Sound_eardrum.jpg"],
.jp-bs5-2-8-1-page img[src="img/2_8_4_Sound_eardrum.jpg"]{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:initial !important;
}

/* Shared caption rule: apply only when an actual ▲/▼ h5 node exists; do not create content. */
.jp-bs5-2-8-1-page .thumbnail > h5{
  font-size:16px !important;
}

/* Mobile: one-column content, equal 15px content baseline.
   B1 is the project-standard 400px viewport with cover/center, swipe, snap, release recenter. */
@media (max-width:767.98px){
  .jp-bs5-2-8-1-page .container-fluid:has(img[src="img/2_8_1_Sound_eardrum.jpg"]){
    width:100% !important;
    max-width:100% !important;
    height:400px !important;
    padding:0 !important;
    margin:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x mandatory !important;
    scrollbar-width:none !important;
  }
  .jp-bs5-2-8-1-page .container-fluid:has(img[src="img/2_8_1_Sound_eardrum.jpg"])::-webkit-scrollbar{
    display:none !important;
  }
  .jp-bs5-2-8-1-page .container-fluid:has(img[src="img/2_8_1_Sound_eardrum.jpg"]) > .row,
  .jp-bs5-2-8-1-page .container-fluid:has(img[src="img/2_8_1_Sound_eardrum.jpg"]) .col-xs-12,
  .jp-bs5-2-8-1-page .container-fluid:has(img[src="img/2_8_1_Sound_eardrum.jpg"]) .col-sm-12,
  .jp-bs5-2-8-1-page .container-fluid:has(img[src="img/2_8_1_Sound_eardrum.jpg"]) .row:has(> img[src="img/2_8_1_Sound_eardrum.jpg"]){
    width:max-content !important;
    min-width:100% !important;
    height:400px !important;
    margin:0 !important;
    padding:0 !important;
  }
  .jp-bs5-2-8-1-page img[src="img/2_8_1_Sound_eardrum.jpg"]{
    display:block !important;
    width:auto !important;
    max-width:none !important;
    min-width:100vw !important;
    height:400px !important;
    margin:0 !important;
    object-fit:cover !important;
    object-position:center center !important;
    scroll-snap-align:center !important;
  }

  .jp-bs5-2-8-1-page .container:has(img[src="img/2_8_2_Sound_eardrum.jpg"]),
  .jp-bs5-2-8-1-page .back-gray:has(img[src="img/2_8_3_Sound_eardrum.jpg"]):has(img[src="img/2_8_4_Sound_eardrum.jpg"]) > .container{
    width:100% !important;
    max-width:100% !important;
    padding-left:15px !important;
    padding-right:15px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }
  .jp-bs5-2-8-1-page .container:has(img[src="img/2_8_2_Sound_eardrum.jpg"]) > .col-xs-12.col-sm-12,
  .jp-bs5-2-8-1-page .container:has(img[src="img/2_8_2_Sound_eardrum.jpg"]) > .col-xs-12.col-sm-12 > .col-xs-12.col-sm-6,
  .jp-bs5-2-8-1-page .back-gray:has(img[src="img/2_8_3_Sound_eardrum.jpg"]):has(img[src="img/2_8_4_Sound_eardrum.jpg"]) > .container,
  .jp-bs5-2-8-1-page .back-gray:has(img[src="img/2_8_3_Sound_eardrum.jpg"]):has(img[src="img/2_8_4_Sound_eardrum.jpg"]) > .container > .col-xs-12.col-sm-6{
    float:none !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }
  .jp-bs5-2-8-1-page .thumbnail{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
  }
  .jp-bs5-2-8-1-page img[src="img/2_8_2_Sound_eardrum.jpg"],
  .jp-bs5-2-8-1-page img[src="img/2_8_3_Sound_eardrum.jpg"],
  .jp-bs5-2-8-1-page img[src="img/2_8_4_Sound_eardrum.jpg"]{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .jp-bs5-2-8-1-page .thumbnail > h5{
    font-size:14px !important;
  }
}