/* JJ_ALL_PAGES_SHARP_HERO_V9 - one permanent visual, mobile and desktop */
html body section.hero-stage.jj-v9-legacy-hidden,
html body main section.hero-stage.jj-v9-legacy-hidden { display:none!important; }
html body .jj-v9-banner,
html body main .jj-v9-banner,
html body .wrap > .jj-v9-banner {
 position:relative!important;box-sizing:border-box!important;display:block!important;
 width:100%!important;height:403px!important;min-height:403px!important;max-height:403px!important;
 margin:0 0 10px!important;padding:0!important;border:0!important;
 border-radius:32px!important;overflow:hidden!important;isolation:isolate!important;
 background:#543321!important;box-shadow:none!important;
}
html body .jj-v9-banner > a.jj-v9-click {
 display:block!important;position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;
 padding:0!important;margin:0!important;border:0!important;background:none!important;
 box-shadow:none!important;text-decoration:none!important;color:inherit!important;
 overflow:hidden!important;border-radius:inherit!important;cursor:pointer!important;
}
html body .jj-v9-banner .jj-v9-photo {
 display:block!important;position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;max-height:none!important;min-height:0!important;
 padding:0!important;margin:0!important;object-fit:fill!important;object-position:center center!important;
 border:0!important;border-radius:0!important;filter:none!important;transform:none!important;
}
html body .jj-v9-banner .jj-v9-text-canvas {
 display:block!important;position:absolute!important;left:0!important;top:0!important;
 width:1920px!important;height:596px!important;min-width:1920px!important;max-width:none!important;
 padding:0!important;margin:0!important;border:0!important;pointer-events:none!important;
 transform-origin:0 0!important;z-index:2!important;color:#fff6e7!important;
 background:none!important;white-space:normal!important;
}
html body .jj-v9-banner .jj-v9-brand {
 display:block!important;position:absolute!important;left:164px!important;top:177px!important;
 width:690px!important;margin:0!important;padding:0!important;text-align:center!important;
 color:#fff5e9!important;font-family:Georgia,'Noto Serif KR',serif!important;
 font-size:32px!important;line-height:1.28!important;font-weight:800!important;
 text-shadow:0 2px 2px #29120a,0 0 8px #281a10!important;
}
html body .jj-v9-banner .jj-v9-rule {
 display:block!important;position:absolute!important;left:235px!important;top:235px!important;
 width:570px!important;height:2px!important;margin:0!important;
 background:linear-gradient(90deg,transparent,#eed6a6,transparent)!important;
}
html body .jj-v9-banner .jj-v9-date {
 display:block!important;position:absolute!important;left:130px!important;top:254px!important;
 width:820px!important;height:auto!important;margin:0!important;padding:0!important;
 color:#fff0cf!important;text-align:center!important;font-family:Georgia,'Noto Serif KR',serif!important;
 font-size:44px!important;font-weight:850!important;line-height:1.32!important;
 letter-spacing:-1px!important;white-space:nowrap!important;
 text-shadow:0 3px 3px #2f160c,0 0 8px #2b1e16!important;
}
html body .jj-v9-banner .jj-v9-date strong {
 color:#ffe2a9!important;font:inherit!important;font-weight:900!important;
}
html body .jj-v9-banner .jj-v9-caption {
 display:block!important;position:absolute!important;left:135px!important;top:349px!important;
 width:815px!important;margin:0!important;padding:0!important;
 color:#fffaf1!important;text-align:center!important;font-family:Georgia,'Noto Serif KR',serif!important;
 font-size:26px!important;font-weight:750!important;line-height:1.25!important;
 white-space:nowrap!important;
 text-shadow:0 2px 3px #21140b,0 0 8px #20150d!important;
}
html body .jj-v9-banner.jj-v9-approved-day .jj-v9-text-canvas {display:none!important;}
@media screen and (max-width:720px){
 html body .jj-v9-banner,html body main .jj-v9-banner,html body .wrap > .jj-v9-banner {
  width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
  aspect-ratio:1920/596!important;border-radius:18px!important;margin:0 0 8px!important;
 }
}

/* JJ_CTA_10PCT_CAPTION_CLOSE_V10
 * 10% smaller baked CTA, caption 16px closer to date.
 * Only the v9 shared banner is affected; approved original never overwritten.
 */
html body .jj-v9-banner .jj-v9-caption {
  top:333px!important;
}
html body .jj-v9-banner .jj-v9-text-canvas::after {
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:1530px!important;
  top:510px!important;
  width:390px!important;
  height:86px!important;
  background: url("cta_tile_v10.webp") center center / 100% 100% no-repeat!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  pointer-events:none!important;
  z-index:8!important;
}
/* The original approved Oct 9 banner has baked title and date. Preserve those.
 * Only show our new smaller CTA overlay on that day, hiding duplicate live titles.
 */
html body .jj-v9-banner.jj-v9-approved-day .jj-v9-text-canvas {
  display:block!important;
}
html body .jj-v9-banner.jj-v9-approved-day .jj-v9-text-canvas > .jj-v9-brand,
html body .jj-v9-banner.jj-v9-approved-day .jj-v9-text-canvas > .jj-v9-rule,
html body .jj-v9-banner.jj-v9-approved-day .jj-v9-text-canvas > .jj-v9-date,
html body .jj-v9-banner.jj-v9-approved-day .jj-v9-text-canvas > .jj-v9-caption {
  display:none!important;
}


/* JJ_MOBILE_HERO_PLUS_25_V12: mobile banner is 25% TALLER, only <=720px.
   Before: width * 596/1920. After: width * 745/1920.
   Foreground image stays 1920:596, centered in extended canvas. No cropping or stretching.
   Top/bottom ~10% are soft background extensions of the same day's image.
   Desktop 403px height, PC image, pricing, payment, menus remain unchanged. */
@media screen and (max-width:720px) {
 html body .jj-v9-banner,
 html body main .jj-v9-banner,
 html body .wrap > .jj-v9-banner {
   width:100%!important;
   height:auto!important;
   min-height:0!important;
   max-height:none!important;
   aspect-ratio:1920 / 745!important;
 }
 html body .jj-v9-banner > a.jj-v9-click::before {
   content:""!important;
   position:absolute!important;
   display:block!important;
   inset:0!important;
   z-index:0!important;
   background-image:var(--jj-v12-backdrop)!important;
   background-size:100% 100%!important;
   background-position:center!important;
   background-repeat:no-repeat!important;
   filter:blur(5px)!important;
   transform:scale(1.02)!important;
   pointer-events:none!important;
 }
 html body .jj-v9-banner .jj-v9-photo {
   top:10%!important;
   bottom:auto!important;
   left:0!important;
   width:100%!important;
   height:80%!important;
   min-height:0!important;
   max-height:none!important;
   object-fit:fill!important;
   object-position:center!important;
   z-index:1!important;
 }
 html body .jj-v9-banner .jj-v9-text-canvas {
   z-index:2!important;
 }
}


/* JJ_V13_REAL_IMAGE_ZOOM_25_NO_FAKE_FILL
   Phone only. Keep mobile hero height 745/1920 (125% of original 596/1920).
   No colored strips, no blur, no pseudo backdrop, no photo padding.
   Photo is uniformly zoomed by 745/596 = 1.25 and cropped at the LEFT edge;
   desktop 403px banner and the approved original file are untouched.
*/
@media screen and (max-width:720px) {
  html body .jj-v9-banner,
  html body main .jj-v9-banner,
  html body .wrap > .jj-v9-banner {
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:1920 / 745!important;
  }
  html body .jj-v9-banner > a.jj-v9-click::before {
    content:none!important;
    display:none!important;
    background:none!important;
    filter:none!important;
  }
  html body .jj-v9-banner .jj-v9-photo {
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:right center!important;
    filter:none!important;
    transform:none!important;
  }
}

/* JJ_V14_MOBILE_LEFT_THREE_TEXT_110_PERCENT
   Only three left text lines on the V9 live hero, mobile <=720px.
   Scale by exactly 1.10 from the element center; do not change PC,
   right-side five elements, CTA, photo crop, hero dimensions, or JS logic.
*/
@media screen and (max-width:720px) {
  html body .jj-v9-banner .jj-v9-text-canvas > .jj-v9-brand,
  html body .jj-v9-banner .jj-v9-text-canvas > .jj-v9-date,
  html body .jj-v9-banner .jj-v9-text-canvas > .jj-v9-caption {
    transform: scale(1.10) !important;
    transform-origin: center center !important;
  }
}

/* JJ_V15_MOBILE_TEXT_110_MORE_AND_LEFT
   Mobile only (max-width 720px). From V14: 1.10 x 1.10 = 1.21 total.
   Move the LEFT typography group 105px left in its 1920px design coordinates.
   For a 280px-wide phone hero this is about 15.3px left, plus 1.21 scale
   expanding the title left; approximates halfway from previous 2026 starting
   letter to banner left margin. PC, photo, orbs, CTA, JS stay untouched.
*/
@media screen and (max-width:720px) {
  html body .jj-v9-banner .jj-v9-text-canvas > .jj-v9-brand,
  html body .jj-v9-banner .jj-v9-text-canvas > .jj-v9-date,
  html body .jj-v9-banner .jj-v9-text-canvas > .jj-v9-caption {
    transform: translateX(-105px) scale(1.21) !important;
    transform-origin: center center !important;
  }
  html body .jj-v9-banner .jj-v9-text-canvas > .jj-v9-rule {
    transform: translateX(-105px) !important;
  }
}

/* JJ OPEN SALE V23: never display unverified or expired promotional copy. */
#jjop-root:not(.jj-popup-verified){visibility:hidden!important}
#jjop-root.jj-popup-verified{visibility:visible!important}


/* JJ 2026-11-03 customer center visual only. Scope excludes homepage and checkout. */
body:has(.nav a.current[href="customer-center.html"]) .wrap{
 max-width:1160px!important;padding-top:14px!important
}
body:has(.nav a.current[href="customer-center.html"]) header{padding-bottom:13px!important}
body:has(.nav a.current[href="customer-center.html"]) .hero{
 padding:27px 30px 28px!important;border-radius:21px!important;
 box-shadow:0 12px 27px rgba(66,42,20,.12)!important
}
body:has(.nav a.current[href="customer-center.html"]) .hero h1{
 font-size:clamp(27px,3.5vw,35px)!important;letter-spacing:-.035em!important
}
body:has(.nav a.current[href="customer-center.html"]) .hero p{
 max-width:830px!important;line-height:1.55!important
}
body:has(.nav a.current[href="customer-center.html"]) .hero-actions{margin-top:11px!important}
body:has(.nav a.current[href="customer-center.html"]) .section{
 margin-top:12px!important;padding:18px 19px!important;border-radius:17px!important;
 box-shadow:0 7px 17px rgba(81,51,22,.06)!important
}
body:has(.nav a.current[href="customer-center.html"]) .section h2{margin-bottom:10px!important}
body:has(.nav a.current[href="customer-center.html"]) .card{
 padding:14px 15px!important;border-radius:13px!important;box-shadow:none!important
}
body:has(.nav a.current[href="customer-center.html"]) .card a{font-size:12px!important}
@media(max-width:700px){
 body:has(.nav a.current[href="customer-center.html"]) .wrap{
 padding-left:13px!important;padding-right:13px!important
 }
 body:has(.nav a.current[href="customer-center.html"]) .hero{
 padding:23px 19px!important;border-radius:17px!important
 }
 body:has(.nav a.current[href="customer-center.html"]) .section{
 padding:16px 14px!important;border-radius:15px!important
 }
}


/* JJ 2026-11-03 — glossary detail pages (20)
   Scope applies only to the shared detail layout with a quick TOC + facts.
   Keep explanatory prose, anchors, business logic, checkout and page structure untouched. */
body:has(.quick > .box):has(.quick > .facts) {
  background:linear-gradient(180deg,#f7efe3 0%,#fdfaf4 54%,#fffbf5 100%);
  color:#30241b;
}
body:has(.quick > .box):has(.quick > .facts) .wrap {
  max-width:1110px;
  padding:14px 18px 30px;
}
body:has(.quick > .box):has(.quick > .facts) header {
  padding-bottom:14px;
  gap:12px;
}
body:has(.quick > .box):has(.quick > .facts) .logo {
  width:39px;height:39px;
  border-radius:10px;
  box-shadow:0 5px 12px rgba(90,52,18,.10);
}
body:has(.quick > .box):has(.quick > .facts) .brand{
  font-size:18px;
  line-height:1.3;
  letter-spacing:-.035em;
}
body:has(.quick > .box):has(.quick > .facts) .nav {
  gap:7px 15px;
}
body:has(.quick > .box):has(.quick > .facts) .nav a {
  min-height:34px;
  padding:7px 0;
  border:0;
  border-radius:0;
  background:transparent;
  font-size:12px;
  color:#6f4e2d;
  box-shadow:none;
  text-decoration:none;
}
body:has(.quick > .box):has(.quick > .facts) .nav a.current{
  color:#493015;
  text-decoration:underline;
  text-underline-offset:5px;
}
body:has(.quick > .box):has(.quick > .facts) .hero{
  padding:27px 31px 29px;
  border-radius:21px;
  background:linear-gradient(128deg,#2d241b,#433124 65%,#4a3421);
  box-shadow:0 13px 29px rgba(72,47,24,.13);
}
body:has(.quick > .box):has(.quick > .facts) .hero::after{
  right:12px;
  bottom:-53px;
  font-size:180px;
  opacity:.6;
}
body:has(.quick > .box):has(.quick > .facts) .hero .kicker{
  font-size:11px;
  letter-spacing:.12em;
  margin-bottom:7px;
  color:#f0c987;
}
body:has(.quick > .box):has(.quick > .facts) .hero h1{
  font-size:clamp(29px,3.6vw,38px);
  line-height:1.25;
  letter-spacing:-.04em;
}
body:has(.quick > .box):has(.quick > .facts) .hero p{
  max-width:790px;
  margin-top:10px;
  font-size:14px;
  line-height:1.6;
  color:#e5d9c6;
}
body:has(.quick > .box):has(.quick > .facts) .actions{
  margin-top:12px;
}
body:has(.quick > .box):has(.quick > .facts) .actions a{
  padding:7px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#f2cd91;
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:4px;
}
body:has(.quick > .box):has(.quick > .facts) .quick{
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:12px;
  margin-top:14px;
  align-items:stretch;
}
body:has(.quick > .box):has(.quick > .facts) .box,
body:has(.quick > .box):has(.quick > .facts) .section{
  padding:18px 20px;
  border:1px solid #e8d8c0;
  border-radius:17px;
  background:#fffdfa;
  box-shadow:0 5px 17px rgba(75,50,22,.045);
}
body:has(.quick > .box):has(.quick > .facts) .section{
  margin-top:12px;
  scroll-margin-top:16px;
}
body:has(.quick > .box):has(.quick > .facts) .box h2,
body:has(.quick > .box):has(.quick > .facts) .section h2{
  font-size:21px;
  line-height:1.35;
  letter-spacing:-.03em;
  margin-bottom:9px;
  color:#392718;
}
body:has(.quick > .box):has(.quick > .facts) .box a{
  padding:7px 0;
  font-size:13px;
  line-height:1.45;
  color:#705028;
}
body:has(.quick > .box):has(.quick > .facts) .facts{
  gap:9px;
}
body:has(.quick > .box):has(.quick > .facts) .fact{
  padding:14px 16px;
  border-color:#eddfc9;
  border-radius:14px;
  background:#fffefa;
}
body:has(.quick > .box):has(.quick > .facts) .fact b{
  font-size:13px;
  line-height:1.45;
  color:#583b1c;
  margin-bottom:5px;
}
body:has(.quick > .box):has(.quick > .facts) .fact span,
body:has(.quick > .box):has(.quick > .facts) .section p,
body:has(.quick > .box):has(.quick > .facts) .section li{
  font-size:13px;
  line-height:1.75;
  color:#574e44;
}
body:has(.quick > .box):has(.quick > .facts) .example{
  padding:15px 17px;
  border-radius:13px;
  border-color:#d4b680;
  background:#fff8ec;
}
body:has(.quick > .box):has(.quick > .facts) .notice{
  padding:12px 15px;
  margin-top:10px;
  border-radius:0 10px 10px 0;
  font-size:13px;
  line-height:1.7;
}
body:has(.quick > .box):has(.quick > .facts) .grid{
  gap:10px;
}
body:has(.quick > .box):has(.quick > .facts) .card{
  padding:15px 17px;
  border-radius:13px;
  border-color:#eadcc6;
}
body:has(.quick > .box):has(.quick > .facts) .card b{
  font-size:14px;
}
body:has(.quick > .box):has(.quick > .facts) .card p{
  font-size:13px;
  line-height:1.65;
}
body:has(.quick > .box):has(.quick > .facts) .related{
  gap:7px 13px;
  margin-top:12px;
}
body:has(.quick > .box):has(.quick > .facts) .related a{
  padding:7px 0;
  border:0;
  border-radius:0;
  background:transparent;
  font-size:12px;
  line-height:1.45;
  color:#785124;
  text-decoration:underline;
  text-underline-offset:3px;
}
body:has(.quick > .box):has(.quick > .facts) footer{
  margin-top:15px;
  font-size:12px;
}
@media(max-width:720px){
  body:has(.quick > .box):has(.quick > .facts) .wrap{padding:11px 12px 22px}
  body:has(.quick > .box):has(.quick > .facts) header{gap:10px}
  body:has(.quick > .box):has(.quick > .facts) .brand{font-size:16px}
  body:has(.quick > .box):has(.quick > .facts) .nav{gap:4px 12px}
  body:has(.quick > .box):has(.quick > .facts) .nav a{font-size:12px;min-height:34px}
  body:has(.quick > .box):has(.quick > .facts) .hero{padding:23px 20px 24px;border-radius:17px}
  body:has(.quick > .box):has(.quick > .facts) .hero p{font-size:13px}
  body:has(.quick > .box):has(.quick > .facts) .quick{grid-template-columns:1fr;gap:10px;margin-top:11px}
  body:has(.quick > .box):has(.quick > .facts) .box,
  body:has(.quick > .box):has(.quick > .facts) .section{padding:16px 15px;border-radius:15px}
  body:has(.quick > .box):has(.quick > .facts) .section{margin-top:10px}
  body:has(.quick > .box):has(.quick > .facts) .grid{grid-template-columns:1fr}
  body:has(.quick > .box):has(.quick > .facts) .fact{padding:13px 14px}
}


/* JJ November 2026 — informational pages design consolidation.
 * Selectors are scoped to guide or legal-page layouts. Content untouched. */
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
){
  background:linear-gradient(180deg,#f5eada,#fffaf2 55%,#fffcf7);
  color:#31251b;
}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .wrap{
  max-width:1130px;
  padding:13px 18px 32px;
}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) header{padding-bottom:13px;gap:13px}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .nav{gap:5px 13px}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .nav a{
  border:0;border-radius:0;padding:8px 0;
  background:transparent;box-shadow:none;
  font-size:12px;line-height:1.45;
  min-height:36px;
  text-decoration:none;
  color:#705233;
}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .nav a.current{
  background:transparent;
  color:#3d2a17;
  text-decoration:underline;
  text-underline-offset:5px;
}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .hero{
  padding:28px 32px 30px;
  border-radius:21px;
  box-shadow:0 12px 28px rgba(69,45,22,.13);
  overflow:hidden;
}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .hero h1{
  font-size:clamp(28px,3.6vw,37px);
  line-height:1.24;
  letter-spacing:-.04em;
}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .hero p{
  font-size:13px;
  line-height:1.65;
  max-width:830px;
}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .hero-actions{margin-top:12px}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .section{
  margin-top:12px;
  padding:19px 20px;
  border:1px solid #e7d8c2;
  border-radius:17px;
  background:#fffdfa;
  box-shadow:0 6px 19px rgba(77,50,24,.052);
}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .section h2{
  font-size:clamp(19px,2.3vw,23px);
  line-height:1.35;
  letter-spacing:-.028em;
}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .section p,
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .section li{
  font-size:13px;
  line-height:1.72;
}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .grid{gap:11px}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .card{
  padding:15px 16px;
  border:1px solid #ebdfcb;
  border-radius:13px;
  background:#fffefa;
  box-shadow:none;
}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .card b{font-size:14px;line-height:1.45}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .card p{font-size:13px;line-height:1.65}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .steps{gap:9px}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .step{border-radius:13px;padding:13px 15px}
body:is(
  :has(.nav a.current[href="about.html"]),
  :has(.nav a.current[href="methodology.html"]),
  :has(.nav a.current[href="result-storage.html"])
) .notice{border-radius:11px;padding:12px 15px;line-height:1.6}
@media(max-width:720px){
  body:is(
    :has(.nav a.current[href="about.html"]),
    :has(.nav a.current[href="methodology.html"]),
    :has(.nav a.current[href="result-storage.html"])
  ) .wrap{padding:11px 13px 23px}
  body:is(
    :has(.nav a.current[href="about.html"]),
    :has(.nav a.current[href="methodology.html"]),
    :has(.nav a.current[href="result-storage.html"])
  ) .hero{padding:22px 19px 23px;border-radius:17px}
  body:is(
    :has(.nav a.current[href="about.html"]),
    :has(.nav a.current[href="methodology.html"]),
    :has(.nav a.current[href="result-storage.html"])
  ) .section{padding:16px 14px;border-radius:15px}
  body:is(
    :has(.nav a.current[href="about.html"]),
    :has(.nav a.current[href="methodology.html"]),
    :has(.nav a.current[href="result-storage.html"])
  ) .grid{gap:9px}
}
body:has(> .wrap > main.paper){
  background:linear-gradient(180deg,#f5ead9,#fdfaf4 48%,#fffbf6);
  color:#31251c;
}
body:has(> .wrap > main.paper) .wrap{
  max-width:920px;
  padding:21px 18px 50px;
}
body:has(> .wrap > main.paper) .top{
  margin-bottom:15px;
  gap:12px;
  align-items:center;
}
body:has(> .wrap > main.paper) .brand{font-size:18px;letter-spacing:-.035em}
body:has(> .wrap > main.paper) .back{
  font-size:13px;
  color:#754e20;
  text-underline-offset:4px;
}
body:has(> .wrap > main.paper) .paper{
  padding:29px 32px 32px;
  border:1px solid #e5d7c3;
  border-radius:19px;
  background:#fffdfa;
  box-shadow:0 12px 28px rgba(71,45,20,.075);
}
body:has(> .wrap > main.paper) .kicker{font-size:12px;color:#9b6b2e}
body:has(> .wrap > main.paper) .title{
  font-size:clamp(28px,3.8vw,36px);
  margin:7px 0 7px;
  line-height:1.26;
  letter-spacing:-.04em;
}
body:has(> .wrap > main.paper) .date{
  font-size:12px;
  color:#7b6b5b;
  margin-bottom:17px;
}
body:has(> .wrap > main.paper) .notice{
  padding:14px 16px;
  margin-bottom:20px;
  border:1px solid #e3cca9;
  border-radius:12px;
  background:#fff7e8;
  font-size:13px;
  line-height:1.7;
}
body:has(> .wrap > main.paper) h2{
  font-size:19px;
  line-height:1.4;
  margin:25px 0 8px;
  letter-spacing:-.025em;
  color:#3c2a1b;
}
body:has(> .wrap > main.paper) h3{
  font-size:16px;
  line-height:1.4;
}
body:has(> .wrap > main.paper) p,
body:has(> .wrap > main.paper) li{
  font-size:14px;
  line-height:1.8;
  overflow-wrap:break-word;
}
body:has(> .wrap > main.paper) .box{
  padding:14px 16px;
  border-radius:12px;
  background:#fff9f0;
}
body:has(> .wrap > main.paper) .business{
  font-size:12px;
  line-height:1.75;
  overflow-wrap:anywhere;
  margin-top:24px;
  padding-top:16px;
}
body:has(> .wrap > main.paper) .links{gap:8px 16px}
body:has(> .wrap > main.paper) .links a{
  font-size:12px;
  text-underline-offset:4px;
}
@media(max-width:640px){
  body:has(> .wrap > main.paper) .wrap{padding:15px 12px 32px}
  body:has(> .wrap > main.paper) .top{
    flex-direction:row;
    align-items:flex-start;
    flex-wrap:wrap;
    margin-bottom:11px;
  }
  body:has(> .wrap > main.paper) .brand{font-size:16px}
  body:has(> .wrap > main.paper) .paper{padding:20px 17px 23px;border-radius:15px}
  body:has(> .wrap > main.paper) h2{font-size:18px;margin-top:23px}
  body:has(> .wrap > main.paper) .notice{padding:12px 13px}
}


/* 2026-11-04 unified layout: same desktop page width as home (1560px). */
html body .wrap{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:1560px!important;
  margin-left:auto!important;margin-right:auto!important;
  padding-left:18px!important;padding-right:18px!important;
}
/* Customer-center historically had a higher-specificity 1160px override. */
html body:has(.nav a.current[href="customer-center.html"]) .wrap{max-width:1560px!important;}

/* JJ_SUBPAGE_APPROVED_HERO_NOV06 */

/* JJ subpage shared image: use approved main artwork, do not duplicate text overlays. */
html body:not(.jj-lv-home) .jj-v9-banner,
html body:not(.jj-lv-home) .wrap > .jj-v9-banner {
 position:relative!important;box-sizing:border-box!important;
 width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
 aspect-ratio:2170/725!important;
 padding:0!important;margin:0 0 14px!important;
 border:0!important;border-radius:0!important;box-shadow:none!important;
 background:#e8d4f8!important;
 overflow:hidden!important;
}
html body:not(.jj-lv-home) .jj-v9-banner > a.jj-v9-click{
 width:100%!important;height:100%!important;inset:0!important;
 background:none!important;border-radius:0!important;
}
html body:not(.jj-lv-home) .jj-v9-banner .jj-v9-photo{
 display:block!important;object-fit:fill!important;object-position:center!important;
 width:100%!important;height:100%!important;inset:0!important;
 border:0!important;filter:none!important;
}
html body:not(.jj-lv-home) .jj-v9-banner .jj-v9-text-canvas{
 display:none!important;visibility:hidden!important;
}
@media(max-width:720px){
 html body:not(.jj-lv-home) .jj-v9-banner,
 html body:not(.jj-lv-home) .wrap > .jj-v9-banner{
  height:auto!important;min-height:0!important;max-height:none!important;
  aspect-ratio:2170/725!important;border-radius:0!important;
 }
}

/* JJ_SUBPAGE_MENU_PILL_NOV06 */

/* JJ shared subpage nav: refined lavender-outline pills; original links and active-page semantics preserved. */
html body:not(.jj-lv-home) header .nav{
 display:flex!important;flex-wrap:wrap!important;gap:8px!important;
 align-items:center!important;justify-content:flex-end!important;
 background:transparent!important;border:0!important;
}
html body:not(.jj-lv-home) header .nav a{
 display:inline-flex!important;align-items:center!important;justify-content:center!important;
 min-height:35px!important;padding:8px 13px!important;
 border:1px solid #c7b0df!important;border-radius:999px!important;
 background:#fffaff!important;color:#60467d!important;
 box-shadow:0 2px 7px rgba(102,65,144,.045)!important;
 font-weight:800!important;text-decoration:none!important;
 line-height:1.35!important;white-space:nowrap!important;
}
html body:not(.jj-lv-home) header .nav a.current,
html body:not(.jj-lv-home) header .nav a[aria-current="page"]{
 background:linear-gradient(135deg,#7951a2,#68448e)!important;
 color:#fff!important;border-color:#7951a2!important;
 box-shadow:0 4px 10px rgba(103,68,142,.16)!important;
}
html body:not(.jj-lv-home) header .nav a:hover:not(.current):not([aria-current="page"]){
 background:#f0e5fa!important;border-color:#a98bc8!important;color:#50346e!important;
}
html body:not(.jj-lv-home) header .nav a:focus-visible{
 outline:3px solid #9a71c2!important;outline-offset:3px!important;
}
@media(max-width:720px){
 html body:not(.jj-lv-home) header .nav{justify-content:flex-start!important;gap:6px!important;}
 html body:not(.jj-lv-home) header .nav a{
  min-height:34px!important;padding:7px 11px!important;
  font-size:11px!important;
 }
}

/* JJ_MENU_BORDERLESS_NOV06 */

/* User-approved borderless top navigation: spacing and active fill retained. */
html body:not(.jj-lv-home) header .nav,
html body:not(.jj-lv-home) header .nav a,
html body:not(.jj-lv-home) header .nav a.current,
html body:not(.jj-lv-home) header .nav a[aria-current="page"],
html body:not(.jj-lv-home) header .nav a:hover,
html body:not(.jj-lv-home) header .nav a:focus-visible{
 border:0!important;border-width:0!important;border-style:none!important;
 box-shadow:none!important;
}
html body:not(.jj-lv-home) header .nav a{
 padding:8px 13px!important;
 background:transparent!important;
}
html body:not(.jj-lv-home) header .nav a.current,
html body:not(.jj-lv-home) header .nav a[aria-current="page"]{
 background:#78519e!important;
 color:#fff!important;
}
html body:not(.jj-lv-home) header .nav a:hover:not(.current):not([aria-current="page"]){
 background:#f0e6fa!important;
}
html body:not(.jj-lv-home) header .nav a:focus-visible{
 outline:2px solid #7951a2!important;outline-offset:3px!important;
}

/* JJ_ACTIVE_MENU_PASTEL_NOV06 */

/* Selected menu should be soft, not a heavy purple block. No borders anywhere. */
html body:not(.jj-lv-home) header .nav a.current,
html body:not(.jj-lv-home) header .nav a[aria-current="page"]{
 background:#e9d9f5!important;
 background-image:none!important;
 color:#60447a!important;
 border:0!important;border-width:0!important;border-style:none!important;
 box-shadow:none!important;
 font-weight:850!important;
}
html body:not(.jj-lv-home) header .nav a{
 border:0!important;border-width:0!important;border-style:none!important;
 box-shadow:none!important;
}
html body:not(.jj-lv-home) header .nav a.current:hover,
html body:not(.jj-lv-home) header .nav a[aria-current="page"]:hover{
 background:#e4cff3!important;color:#573774!important;
}