.jj-daily-story-home{border-top:1px solid #dfd5c7;border-bottom:1px solid #dfd5c7;margin:34px 0;padding:30px 8px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}.jj-daily-story-home .st-kicker{font-size:11px;letter-spacing:2px;color:#93682e;font-weight:800;margin:0 0 10px}.jj-daily-story-home h2{font-size:24px;letter-spacing:-.7px;line-height:1.5;margin:0 0 8px;color:#302a24}.jj-daily-story-home p{font-size:14px;line-height:1.8;margin:0;color:#72685d}.jj-daily-story-home a{font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:7px;color:#795322;white-space:nowrap;padding:10px 0}.jj-daily-story-home a:focus-visible{outline:3px solid #92692f;outline-offset:5px}.jj-daily-story-nav{white-space:nowrap}@media(max-width:640px){.jj-daily-story-home{grid-template-columns:1fr;padding:25px 2px;gap:10px;margin:25px 0}.jj-daily-story-home h2{font-size:21px}.jj-daily-story-home a{justify-self:start}}


/* JJ POPUP COMPACT 20261102 — overrides only jjop-root. */
html body #jjop-root .jjop-position{padding:12px!important}
html body #jjop-root .jjop-position .jjop-panel{width:min(94vw,700px)!important;max-height:calc(100dvh - 24px)!important;border-radius:22px!important}
html body #jjop-root .jjop-panel .jjop-content{padding:13px 19px 11px!important;max-height:calc(100dvh - 24px)!important;overflow-y:auto!important}
#jjop-root .jjop-tag{padding:5px 11px!important;font-size:12px!important}
#jjop-root .jjop-tag .jjop-star{font-size:14px!important}
#jjop-root .jjop-close{width:35px!important;height:35px!important;font-size:22px!important}
#jjop-root .jjop-kicker{margin:2px 0 4px!important;font-size:13px!important}
#jjop-root h2{font-size:clamp(23px,3.3vw,34px)!important;line-height:1.16!important}
#jjop-root .jjop-discount{font-size:clamp(52px,7vw,70px)!important;margin:2px 0 5px!important;line-height:1.04!important}
#jjop-root .jjop-message{font-size:13px!important;line-height:1.35!important;margin:5px 0 8px!important}
#jjop-root .jjop-message small{font-size:11px!important;margin-top:2px!important}
#jjop-root .jjop-period{padding:6px 10px!important;border-radius:13px!important;margin-bottom:9px!important;font-size:13px!important;line-height:1.35!important}
#jjop-root .jjop-period small{font-size:11px!important}
#jjop-root .jjop-prices{gap:7px!important;margin-bottom:9px!important}
#jjop-root .jjop-price{padding:8px 4px!important;border-radius:12px!important}
#jjop-root .jjop-price strong{font-size:15px!important;line-height:1.3!important}
#jjop-root .jjop-price span{font-size:12px!important}
#jjop-root .jjop-price .jjop-benefit{min-height:2.2em!important;margin:4px 2px 0!important;padding-top:3px!important;font-size:10.5px!important;line-height:1.2!important}
#jjop-root .jjop-actions{gap:9px!important;margin:3px 0 7px!important}
#jjop-root .jjop-btn{padding:10px 16px!important;font-size:13px!important;line-height:1.3!important}
#jjop-root .jjop-foot{margin-top:5px!important;padding-top:6px!important;font-size:10px!important}
@media(max-width:550px){
html body #jjop-root .jjop-position{padding:7px!important}
html body #jjop-root .jjop-position .jjop-panel{width:calc(100vw - 14px)!important;max-height:calc(100dvh - 14px)!important;border-radius:17px!important}
html body #jjop-root .jjop-panel .jjop-content{padding:9px 11px 7px!important;max-height:calc(100dvh - 14px)!important}
#jjop-root .jjop-tag{padding:4px 7px!important;font-size:10px!important}
#jjop-root .jjop-close{width:32px!important;height:32px!important;font-size:20px!important}
#jjop-root .jjop-kicker{margin:1px 0 3px!important;font-size:11px!important}
#jjop-root h2{font-size:clamp(20px,5.6vw,25px)!important}
#jjop-root .jjop-discount{font-size:clamp(42px,12.5vw,52px)!important;margin:0 0 3px!important}
#jjop-root .jjop-message{font-size:11px!important;line-height:1.3!important;margin:3px 0 6px!important}
#jjop-root .jjop-message small{font-size:10px!important;margin-top:2px!important}
#jjop-root .jjop-period{font-size:10.5px!important;line-height:1.3!important;padding:5px 7px!important;margin-bottom:7px!important}
#jjop-root .jjop-period small{font-size:9.5px!important}
#jjop-root .jjop-prices{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;margin-bottom:7px!important}
#jjop-root .jjop-price{padding:6px 3px!important;border-radius:10px!important}
#jjop-root .jjop-price strong{font-size:11.5px!important}
#jjop-root .jjop-price span{font-size:10px!important}
#jjop-root .jjop-price .jjop-benefit{font-size:9.5px!important;min-height:2.1em!important;margin:3px 1px 0!important;padding-top:3px!important}
#jjop-root .jjop-actions{gap:6px!important;margin:3px 0 5px!important}
#jjop-root .jjop-btn{font-size:11px!important;padding:9px 6px!important}
#jjop-root .jjop-foot{margin-top:3px!important;padding-top:5px!important;font-size:9px!important}
}
@media(max-height:600px){
#jjop-root .jjop-discount{font-size:clamp(37px,7vh,54px)!important;margin:0 0 2px!important}
#jjop-root .jjop-kicker{margin:0 0 2px!important}
#jjop-root .jjop-message{margin:2px 0 4px!important}
#jjop-root .jjop-period{margin-bottom:5px!important}
#jjop-root .jjop-prices{margin-bottom:5px!important}
#jjop-root .jjop-price{padding-top:4px!important;padding-bottom:4px!important}
#jjop-root .jjop-btn{padding-top:7px!important;padding-bottom:7px!important}
}


/* JJ_TWO_DISCOUNT_POPUP_ONLY_20261102 — show only the two 50%-off products; leave a single accessible X close control.
   Hidden nodes stay intact because the deployed popup's JS installs event listeners on them. */
html body #jjop-root .jjop-prices > .jjop-price:nth-child(1),
html body #jjop-root .jjop-prices > .jjop-price:nth-child(2) {display:none!important}
html body #jjop-root .jjop-actions {display:none!important}
html body #jjop-root .jjop-prices {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-bottom:6px!important}
html body #jjop-root .jjop-price {padding:10px 7px!important}
html body #jjop-root .jjop-foot {margin-top:3px!important}
@media(max-width:550px){
 html body #jjop-root .jjop-prices {gap:6px!important}
 html body #jjop-root .jjop-price {padding:8px 3px!important}
}


/* Hide old static sale popup until final stylesheet and copy are ready. */
html body #jjop-root:not([hidden]):not(.jj-popup-final-ready){
  display:none!important;
}
html body #jjop-root .jjop-panel:focus{
  outline:none!important;
}


/* JJ 2026-11-03: prevent stale sale wording from flashing while pricing refresh runs.
 * The text nodes are also synchronized in the accompanying JS for accessibility. */
html body #jjop-root .jjop-period strong{font-size:0!important}
html body #jjop-root .jjop-period strong::after{
  content:"2026년 11월 1일~15일";
  font-size:16px!important;line-height:1.45!important;
  display:inline-block;
}
html body #jjop-root .jjop-period small{font-size:0!important}
html body #jjop-root .jjop-period small::after{
  content:"유료상품 7종 모두 50% 할인";
  font-size:13px!important;line-height:1.35!important;
  display:inline-block;
}
@media(max-width:600px){
  html body #jjop-root .jjop-period strong::after{font-size:12px!important}
  html body #jjop-root .jjop-period small::after{font-size:11px!important}
}
/* Reserve distinct vertical bands for price, short benefit, and revisit button.
   Prevent previous absolute elements from appearing through the button's top edge. */
html body section.product-zone .products > article.product{
  position:relative!important;
  isolation:isolate!important;
  box-sizing:border-box!important;
  min-height:275px!important;
  padding-bottom:136px!important;
}
html body section.product-zone .products > article.product > .price{
  position:absolute!important;
  bottom:98px!important;
  left:22px!important;
  z-index:2!important;
}
html body section.product-zone .products > article.product > .product-benefit,
html body section.product-zone .products > article.product > .full-benefit{
  position:absolute!important;
  left:22px!important;
  right:75px!important;
  bottom:75px!important;
  line-height:1.3!important;
  z-index:2!important;
}
html body section.product-zone .products > article.product > .stamp{
  position:absolute!important;
  bottom:91px!important;
  z-index:2!important;
}
html body section.product-zone .products > article.product > button.product-revisit-btn{
  position:absolute!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  left:16px!important;right:16px!important;
  bottom:12px!important;
  width:calc(100% - 32px)!important;
  min-height:43px!important;
  margin:0!important;
  z-index:10!important;
  background:#fff2d7!important;
  opacity:1!important;
  color:#714a17!important;
  box-shadow:0 2px 5px rgba(97,69,21,.10)!important;
}
@media(max-width:720px){
 html body section.product-zone .products > article.product{
   min-height:265px!important;padding-bottom:130px!important;
 }
 html body section.product-zone .products > article.product > .price{
   left:20px!important;bottom:94px!important;
 }
 html body section.product-zone .products > article.product > .product-benefit,
 html body section.product-zone .products > article.product > .full-benefit{
   left:20px!important;bottom:71px!important;
 }
 html body section.product-zone .products > article.product > .stamp{
   bottom:86px!important;
 }
 html body section.product-zone .products > article.product > button.product-revisit-btn{
   position:absolute!important;left:14px!important;right:14px!important;
   width:calc(100% - 28px)!important;bottom:12px!important;
   min-height:43px!important;margin:0!important;
 }
}

/* The 2027 card has a legacy ID-specific style: keep its price, stamp and perks in the same bands. */
html body section.product-zone .products > article.product#jj-newyear-launch-card{
  padding-bottom:136px!important;
}
html body section.product-zone .products > article.product#jj-newyear-launch-card > .price{
  bottom:98px!important;
}
html body section.product-zone .products > article.product#jj-newyear-launch-card > .full-benefit{
  bottom:75px!important;
}
html body section.product-zone .products > article.product#jj-newyear-launch-card > .stamp{
  bottom:91px!important;
}
@media(max-width:720px){
html body section.product-zone .products > article.product#jj-newyear-launch-card{
  padding-bottom:130px!important;
}
html body section.product-zone .products > article.product#jj-newyear-launch-card > .price{bottom:94px!important}
html body section.product-zone .products > article.product#jj-newyear-launch-card > .full-benefit{bottom:71px!important}
html body section.product-zone .products > article.product#jj-newyear-launch-card > .stamp{bottom:86px!important}
}


/* JJ_MOBILE_CARD_FLOW_SAFE_20261103: Restore the established mobile page width.
 * Only restructure content inside each product card; never force grid/page width. */
@media(max-width:720px) {
  html body section.product-zone#products .products > article.product {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    box-sizing:border-box!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    padding:19px 18px 16px!important;
    gap:0!important;
    transform:none!important;
  }
  html body section.product-zone#products .products > article.product > .tier {
    order:1!important;
    align-self:flex-start!important;
  }
  html body section.product-zone#products .products > article.product > h3{
    order:2!important;
    margin:11px 0 6px!important;
    line-height:1.35!important;
    overflow-wrap:break-word!important;
  }
  html body section.product-zone#products .products > article.product > p{
    order:3!important;
    position:static!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 0 12px!important;
    line-height:1.6!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
  }
  html body section.product-zone#products .products > article.product > .price{
    order:4!important;
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    transform:none!important;
    margin:0 0 5px!important;
    line-height:1.3!important;
    font-size:clamp(22px,6vw,28px)!important;
    flex:0 0 auto!important;
  }
  html body section.product-zone#products .products > article.product > .product-benefit,
  html body section.product-zone#products .products > article.product > .full-benefit {
    order:5!important;
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    display:block!important;
    height:auto!important;
    min-width:0!important;
    max-height:none!important;
    margin:0 0 13px!important;
    padding:0!important;
    line-height:1.5!important;
    font-size:12px!important;
    flex:0 0 auto!important;
    overflow-wrap:break-word!important;
    white-space:normal!important;
    transform:none!important;
  }
  html body section.product-zone#products .products > article.product > .stamp {
    display:none!important;
  }
  html body section.product-zone#products .products > article.product > button.product-revisit-btn{
    order:6!important;
    position:static!important;
    top:auto!important;
    bottom:auto!important;
    left:auto!important;
    right:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:44px!important;
    min-width:0!important;
    flex:0 0 auto!important;
    margin:0!important;
    padding:10px!important;
    box-sizing:border-box!important;
    transform:none!important;
    background:#fff2d7!important;
    background-image:none!important;
    opacity:1!important;
    line-height:1.3!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
  }
}


/* JJ_MOBILE_HERO_WIDTH_REPAIR_20261103
   Real 360/390/430/720px viewport measurements reproduced a 1050px
   page overflow originating in the 3:1 hero's automatic preferred width.
   Clamp the HERO ITSELF, not the entire site or the product-card grid. */
@media(max-width:720px){
  html body .wrap > main > section.hero-stage{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  html body .wrap > main > section.hero-stage > .weekday-hero-link,
  html body .wrap > main > section.hero-stage .weekday-hero-picture{
    max-width:100%!important;
    min-width:0!important;
  }
}


/* JJ 2026-11-03 iOS WebKit mobile horizontal overflow repair.
   The header navigation was flex-nowrap and its FAQ link extended to 539px
   on a 390px viewport. Wrap only the existing homepage nav; keep links usable. */
@media(max-width:720px){
 html body .wrap > header .nav{
   flex-wrap:wrap!important;
   max-width:100%!important;
   min-width:0!important;
 }
}

html body #jjop-root .jjop-period strong::after,html body #jjop-root .jjop-period small::after{content:none!important}
html body #jjop-root .jjop-period strong{font-size:16px!important}html body #jjop-root .jjop-period small{font-size:13px!important}