/* Numbered PDF audit overrides — loaded after the 20260803 final layer. */
.ho12-required-question-anchor[data-ho12-tooltip]::after{content:attr(data-ho12-tooltip)!important;position:absolute!important;left:50%!important;bottom:calc(100% + 9px)!important;transform:translateX(-50%)!important;z-index:2147483000!important;width:max-content!important;max-width:min(320px,82vw)!important;padding:7px 10px!important;border:1.5px solid currentColor!important;border-radius:6px 8px 5px 7px!important;background:#fff!important;color:#111!important;font-size:12px!important;font-weight:800!important;line-height:1.45!important;text-align:center!important;white-space:normal!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.ho12-required-question-anchor[data-ho12-tooltip]:has(.ho12-required-question-icon:hover)::after,.ho12-required-question-anchor[data-ho12-tooltip]:has(.ho12-required-question-icon:focus)::after{opacity:1!important;visibility:visible!important}
.ho12-required-question-icon{width:24px!important;height:24px!important;cursor:pointer!important;object-fit:contain!important}.ho12-login-error{display:none!important}
.ho12-login-form-element .ho12-input-container{position:relative!important}
.ho12-login-form-element .ho12-input-container.ho12-required-question-anchor{position:relative!important}
.ho12-login-form-element .ho12-input-container > .ho12-required-question-icon{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  transform:translate(-50%,-50%)!important;
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  min-height:22px!important;
  margin:0!important;
  z-index:30!important;
  pointer-events:auto!important;
}

/* Login fields: keep browser autofill typography identical to normal input. */
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:-webkit-autofill,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:-webkit-autofill:hover,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:-webkit-autofill:focus,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:-webkit-autofill:active,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:autofill {
  font-family: 'Nanum Gothic', 'Noto Sans KR', sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: #9b9b9b !important;
  -webkit-text-fill-color: #9b9b9b !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Login validation marker: never replace the mouse pointer with a help cursor. */
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:hover,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:focus,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:active {
  cursor: default !important;
}

/* Match validation help text to the subtle wake-up tooltip treatment. */
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]::after,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]:hover::after,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]:focus-within::after {
  width: max-content !important;
  max-width: 220px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #9b9b9b !important;
  font-family: 'Nanum Gothic', 'Noto Sans KR', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

/* Login field labels stay in the shared inactive gray instead of inheriting
 * the shortcode's later black label rule. Scope this to the two login labels. */
html body.page-id-17 #page#page
  .ho12-login.ho12-center-login
  form.ho12-login-form-element
  .ho12-input-field-group
  .ho12-input-wrapper > span.ho12-input-label {
  color: #9b9b9b !important;
}

/* Art-goods cards: let each product image fill its complete hand-drawn
 * rectangle. The white border mask and yellow/gray stroke stay above the
 * image, so square sources can crop cleanly without covering the outline. */
html body.page-id-15 #page .ho12-goods-card > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  z-index: 2 !important;
}

html body.page-id-15 #page .ho12-goods-card > .ho12-card-border-svg {
  z-index: 4 !important;
  pointer-events: none !important;
}

/* Product detail option, summary and basket treatment matched to source P34.
 * Keep every control on the established 740px content axis and remove motion. */
html body.single-product #page .ho12-simple-options-container {
  display: block !important;
  width: 360px !important;
  max-width: 100% !important;
  margin: 22px 0 6px !important;
}

html body.single-product #page .ho12-simple-option-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html body.single-product #page .ho12-simple-custom-dropdown {
  position: relative !important;
  z-index: 40 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html body.single-product #page .ho12-simple-dropdown-trigger,
html body.single-product #page .ho12-simple-dropdown-trigger:is(:hover, :focus, :focus-visible, :active) {
  width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  border: 0 !important;
  border-bottom: 1px solid #ececec !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #aaa !important;
  appearance: none !important;
  transform: none !important;
  scale: 1 !important;
  transition: none !important;
}

html body.single-product #page .ho12-simple-dropdown-value {
  min-width: 0 !important;
  color: #aaa !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

html body.single-product #page .ho12-simple-dropdown-arrow {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  flex: 0 0 13px !important;
  overflow: visible !important;
  color: #aaa !important;
  transform: none !important;
  transform-origin: center !important;
  transition: none !important;
}

html body.single-product #page .ho12-simple-dropdown-arrow path {
  fill: none !important;
  stroke: currentColor !important;
}

html body.single-product #page .ho12-simple-custom-dropdown.open .ho12-simple-dropdown-arrow {
  transform: rotate(-90deg) !important;
}

/* The basket artwork already communicates the action; remove its duplicate
 * text caption without changing the button's hit area or behavior. */
html body.single-product #page .ho12-action-cart-label {
  display: none !important;
}

html body.single-product #page .ho12-simple-dropdown-menu {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 3px 2px 5px !important;
  display: none !important;
  flex-direction: column !important;
  gap: 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  transition: none !important;
}

html body.single-product #page .ho12-simple-custom-dropdown.open .ho12-simple-dropdown-menu {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

html body.single-product #page .ho12-simple-dropdown-menu-head {
  display: none !important;
}

html body.single-product #page .ho12-simple-dropdown-option,
html body.single-product #page .ho12-simple-dropdown-option:is(:hover, :focus, :focus-visible, :active),
html body.single-product #page .ho12-simple-dropdown-option.active {
  width: 100% !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 15px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  transform: none !important;
  scale: 1 !important;
  transition: none !important;
}

html body.single-product #page .ho12-simple-dropdown-option.active {
  color: #888 !important;
}

html body.single-product #page .ho12-simple-dropdown-radio {
  position: relative !important;
  width: 12px !important;
  height: 12px !important;
  flex: 0 0 12px !important;
  display: block !important;
  border: 1.5px solid #bcbcbc !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

html body.single-product #page .ho12-simple-dropdown-option.active .ho12-simple-dropdown-radio {
  border-color: #bcbcbc !important;
}

html body.single-product #page .ho12-simple-dropdown-option.active .ho12-simple-dropdown-radio i {
  position: absolute !important;
  inset: 2px !important;
  display: block !important;
  border-radius: 50% !important;
  background: #f1bb43 !important;
}

html body.single-product #page .ho12-selected-option-summary {
  position: relative !important;
  width: 360px !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 6px 0 0 !important;
  padding: 5px 2px !important;
  flex-direction: column !important;
  gap: 5px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transform: none !important;
}

html body.single-product #page .ho12-summary-border-svg,
html body.single-product #page .ho12-selected-option-summary::before,
html body.single-product #page .ho12-selected-option-summary::after {
  display: none !important;
  content: none !important;
}

html body.single-product #page .ho12-summary-top-row,
html body.single-product #page .ho12-summary-bottom-row {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 0 !important;
  color: #aaa !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

html body.single-product #page .ho12-summary-name,
html body.single-product #page .ho12-summary-total-qty-text,
html body.single-product #page .ho12-summary-total-price-label,
html body.single-product #page .ho12-summary-total-price,
html body.single-product #page .ho12-summary-price-wrap {
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

html body.single-product #page .ho12-summary-controls-group,
html body.single-product #page .ho12-summary-qty-controls,
html body.single-product #page .ho12-summary-price-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

html body.single-product #page .ho12-summary-qty-controls {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body.single-product #page :is(.ho12-qty-btn-dec, .ho12-qty-btn-inc),
html body.single-product #page :is(.ho12-qty-btn-dec, .ho12-qty-btn-inc):is(:hover, :focus-visible, :active) {
  width: 10px !important;
  height: 10px !important;
  transform: none !important;
  scale: 1 !important;
  transition: none !important;
}

html body.single-product #page .ho12-qty-val {
  min-width: 11px !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-align: center !important;
}

html body.single-product #page .ho12-summary-remove-btn,
html body.single-product #page .ho12-summary-remove-btn:is(:hover, :focus-visible, :active) {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  transform: none !important;
  scale: 1 !important;
  transition: none !important;
}

html body.single-product #page .ho12-summary-price-wrap .ho12-gamtae-icon-wrapper,
html body.single-product #page .ho12-summary-price-wrap .ho12-gamtae-icon-wrapper img {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  flex: 0 0 15px !important;
}

html body.single-product #page #ho12-option-warning {
  position: static !important;
  width: max-content !important;
  max-width: 210px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 7px 0 0 auto !important;
  padding: 4px 8px !important;
  border: 1.5px solid #f1bb43 !important;
  background: #fff !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html body.single-product #page #ho12-option-warning > img {
  display: none !important;
}

html body.single-product #page #ho12-option-warning > span,
html body.single-product #page #ho12-option-warning:is(:hover, :focus, :focus-within) > span {
  position: static !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* 2026-08-10: keep the contact form inside the shared 1000px content rail. */
html body.page-id-19 #page .ho12-contact-container {
  width: min(100%, 1000px) !important;
  max-width: 1000px !important;
  margin: 0 auto 54px !important;
  padding: 40px 20px !important;
  overflow-x: clip !important;
  box-sizing: border-box !important;
}

html body.page-id-19 #page .ho12-contact-box,
html body.page-id-19 #page .ho12-ct-form {
  width: min(100%, 300px) !important;
  max-width: 300px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body.page-id-19 #page .ho12-contact-submit-icon-btn:hover {
  transform: none !important;
}

/* 2026-08-09 final cascade lock: product-checkout address panel. */
html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-wrapper {
  position: relative !important;
  min-height: 430px !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-wrapper.is-address-panel-open .ho12-checkout-content {
  margin-left: 0 !important;
  margin-right: auto !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-wrapper > #ho12-address-modal {
  position: absolute !important;
  inset: 0 0 auto auto !important;
  display: none !important;
  width: 300px !important;
  min-width: 0 !important;
  max-width: 300px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  z-index: 30 !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-wrapper.is-address-panel-open > #ho12-address-modal {
  display: block !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-modal .ho12-address-panel {
  width: 100% !important;
  max-width: 300px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 6px 2px 0 8px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-modal h3 {
  margin: 47px 0 14px !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-saved-addresses-list {
  max-height: none !important;
  overflow: visible !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-modal :is(input, button) {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-search-trigger,
html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-modal .ho12-address-postcode-row input,
html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-editor > input {
  height: 25px !important;
  min-height: 25px !important;
  padding: 0 !important;
  line-height: 25px !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-modal .ho12-address-panel-close {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-modal .ho12-address-panel-close--bottom {
  margin: 3px 0 0 auto !important;
}

@media (max-width: 760px) {
  html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-wrapper.is-address-panel-open .ho12-checkout-content {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-wrapper > #ho12-address-modal,
  html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-wrapper.is-address-panel-open > #ho12-address-modal {
    position: relative !important;
    inset: auto !important;
    width: min(300px, 100%) !important;
    max-width: 300px !important;
    margin: 32px auto 0 !important;
    transform: none !important;
  }
}

/* 2026-08-09 PDF lock: product-checkout address manager is an inline right panel. */
html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-wrapper {
  position: relative !important;
  min-height: 430px !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-wrapper.is-address-panel-open .ho12-checkout-content {
  margin-left: 0 !important;
  margin-right: auto !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal {
  position: absolute !important;
  inset: 0 0 auto auto !important;
  display: none !important;
  width: 300px !important;
  min-width: 0 !important;
  max-width: 300px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  z-index: 30 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-wrapper.is-address-panel-open > #ho12-address-modal {
  display: block !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-address-panel {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 300px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 6px 2px 0 8px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  color: #aaa !important;
  font-family: inherit !important;
  text-align: left !important;
  pointer-events: auto !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal [hidden] {
  display: none !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-address-search-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-search-trigger,
html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-address-postcode-row input,
html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-editor > input {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 25px !important;
  min-height: 25px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #777 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 25px !important;
  text-align: left !important;
  transform: none !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-search-trigger::placeholder {
  color: #111 !important;
  opacity: 1 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal button {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  cursor: pointer !important;
  opacity: 1 !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal button:is(:hover, :focus-visible, :active) {
  background: transparent !important;
  box-shadow: none !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
}

/* 2026-08-10 checkout/history/contact final pass */
#ho12-confirm-modal .ho12-wobbly-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  max-width: 300px !important;
  width: calc(100% - 40px) !important;
  min-height: 170px !important;
  padding: 0 !important;
  position: relative !important;
  text-align: center !important;
  animation: none !important;
  transform: none !important;
}
#ho12-confirm-modal .ho12-confirm-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
}
#ho12-confirm-modal .ho12-confirm-frame path {
  fill: #fff !important;
  stroke: #efb424 !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
}
#ho12-confirm-modal .ho12-confirm-inner {
  position: relative !important;
  z-index: 1 !important;
  min-height: 170px !important;
  padding: 30px 24px 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
#ho12-confirm-modal #ho12-confirm-title { display: none !important; }
#ho12-confirm-modal #ho12-confirm-msg {
  color: #555 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0 0 18px !important;
}
#ho12-confirm-modal .ho12-confirm-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}
#ho12-confirm-modal .ho12-confirm-amount {
  color: var(--h-gamtae-color, #64c832) !important;
  font-family: 'NanumJangmi', 'Rose', 'Nanum Pen Script', sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}
#ho12-confirm-modal .ho12-confirm-gamtae-unit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
#ho12-confirm-modal .ho12-confirm-gamtae-icon {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 3px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
  vertical-align: middle !important;
}
#ho12-confirm-modal .ho12-confirm-gamtae-unit .ho12-confirm-gamtae-icon {
  margin: 0 !important;
}
#ho12-confirm-modal :is(#ho12-confirm-yes, #ho12-confirm-no) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #efb424 !important;
  padding: 6px 12px !important;
  min-width: 72px !important;
  transform: none !important;
  transition: none !important;
}
#ho12-goods-success-overlay img {
  width: min(320px, 72vw) !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  display: block !important;
}
html body.page-id-19 #page .ho12-unused-contact-field { display: none !important; }
html body.page-id-19 #page .ho12-contact-textarea-fg > label { display: none !important; }
html body.page-id-19 #page .ho12-contact-textarea-fg .ho12-contact-lines-wrap {
  width: 100% !important;
  flex: 1 1 100% !important;
}
html body.page-id-19 #page .ho12-contact-submit-icon-btn {
  opacity: 1 !important;
  filter: grayscale(1) opacity(.45) !important;
  transition: filter .25s ease, opacity .25s ease !important;
  transform: none !important;
}
html body.page-id-19 #page .ho12-contact-submit-icon-btn:hover,
html body.page-id-19 #page .ho12-contact-submit-icon-btn:focus-visible {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
.ho12-cart-tab-btn,
.ho12-cart-tab-btn:hover,
#ho12-cart-checkout-btn,
#ho12-cart-checkout-btn:hover {
  transform: none !important;
}
.ho12-history-list {
  gap: 0 !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}
.ho12-history-item-row {
  display: grid !important;
  grid-template-columns: 170px 62px minmax(200px, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 18px 0 !important;
  color: #aaa !important;
}
.ho12-history-item-row > div:first-child {
  width: auto !important;
  border-right: 0 !important;
  padding-right: 0 !important;
}
.ho12-history-item-thumb {
  width: 56px !important;
  height: 56px !important;
  border: 1.5px solid #d6d6d6 !important;
}
.ho12-history-item-row a,
.ho12-history-item-row button {
  border: 0 !important;
  background: transparent !important;
  color: #aaa !important;
  padding: 4px 6px !important;
  box-shadow: none !important;
  transition: none !important;
  transform: none !important;
}
.ho12-history-item-row a:hover,
.ho12-history-item-row button:hover {
  color: #737373 !important;
  background: transparent !important;
  transform: none !important;
}
@media (max-width: 800px) {
  .ho12-history-item-row {
    grid-template-columns: 1fr 56px minmax(0, 2fr) !important;
    gap: 10px !important;
  }
  .ho12-history-item-row > div:last-child {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-address-panel-close {
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  color: #aaa !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-address-panel-close svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  overflow: visible !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-address-text-action {
  display: block !important;
  width: max-content !important;
  color: #f0b800 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-search-btn {
  margin: 11px 3px 0 auto !important;
  font-size: 12px !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal h3 {
  margin: 47px 0 14px !important;
  padding: 0 !important;
  color: #111 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-new-toggle {
  margin: 0 0 14px !important;
  font-size: 11px !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-saved-addresses-list {
  display: block !important;
  width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-address-status {
  margin: 5px 0 0 !important;
  color: #aaa !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-saved-address-row {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 68px !important;
  margin: 0 0 17px !important;
  padding: 0 30px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-saved-address-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
  color: #aaa !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-saved-address-copy strong,
html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-saved-address-copy span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #aaa !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-select-addr-btn {
  position: absolute !important;
  top: 2px !important;
  right: 4px !important;
  display: grid !important;
  place-items: center !important;
  width: 15px !important;
  min-width: 15px !important;
  height: 15px !important;
  min-height: 15px !important;
  border: 1.4px solid #aaa !important;
  border-radius: 50% !important;
  background: #fff !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-select-addr-btn > span {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #f0b800 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-saved-address-actions {
  display: flex !important;
  gap: 12px !important;
  margin-top: 9px !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-saved-address-actions button {
  color: #f0b800 !important;
  font-size: 10px !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-editor {
  width: 100% !important;
  margin: 7px 0 19px !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid #eee !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-editor h4 {
  margin: 0 0 9px !important;
  color: #111 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-editor label {
  display: block !important;
  margin: 7px 0 1px !important;
  color: #aaa !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-address-postcode-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 10px !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-address-postcode-row input,
html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-editor > input {
  border-bottom-color: #eee !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-address-editor-actions {
  display: flex !important;
  gap: 13px !important;
  margin-top: 11px !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-address-editor-actions button:first-child,
html body.woocommerce-checkout.ho12-checkout-products #page #ho12-modal-postcode-btn {
  color: #f0b800 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-address-editor-actions button:last-child {
  color: #aaa !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal .ho12-address-panel-close--bottom {
  margin: 3px 0 0 auto !important;
}

@media (max-width: 760px) {
  html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-wrapper.is-address-panel-open .ho12-checkout-content {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.woocommerce-checkout.ho12-checkout-products #page #ho12-address-modal,
  html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-wrapper.is-address-panel-open > #ho12-address-modal {
    position: relative !important;
    inset: auto !important;
    width: min(300px, 100%) !important;
    max-width: 300px !important;
    margin: 32px auto 0 !important;
    transform: none !important;
  }
}

/* 2026-08-09 — 상품 결제창: 원본 PDF의 고정 콘텐츠 레일과 무테 세로 정보 구조. */
html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-wrapper,
html body.woocommerce-checkout.ho12-checkout-products #page form.checkout {
  width: min(740px, calc(100vw - 32px)) !important;
  max-width: 740px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 340px !important;
  min-width: 0 !important;
  max-width: 340px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-shipping-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 340px !important;
  min-width: 0 !important;
  max-width: 340px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #aaa !important;
  box-sizing: border-box !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-shipping-head {
  display: block !important;
  width: 100% !important;
  margin: 0 0 19px !important;
  padding: 0 !important;
  border: 0 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-section-label {
  display: block !important;
  color: #f0b800 !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page :is(
  .ho12-checkout-field,
  .ho12-checkout-memo-row
) {
  display: grid !important;
  grid-template-columns: 102px minmax(0, 1fr) !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 24px !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  gap: 14px !important;
  box-sizing: border-box !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page :is(
  .ho12-checkout-field,
  .ho12-checkout-memo-row
) > label,
html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-address-heading > label {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #aaa !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page :is(
  #ho12-custom-recipient,
  #ho12-custom-phone,
  #ho12-custom-memo
) {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #999 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: none !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page :is(
  #ho12-custom-recipient,
  #ho12-custom-phone,
  #ho12-custom-memo
)::placeholder {
  color: #aaa !important;
  opacity: 1 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-address-field {
  display: block !important;
  min-height: 24px !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-address-heading {
  display: grid !important;
  grid-template-columns: 102px minmax(0, 1fr) auto !important;
  align-items: center !important;
  width: 100% !important;
  gap: 14px !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-address-required-target {
  display: block !important;
  align-self: stretch !important;
  min-width: 24px !important;
  min-height: 24px !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-custom-manage-btn,
html body.woocommerce-checkout.ho12-checkout-products #page #ho12-custom-manage-btn:is(:hover, :focus-visible, :active) {
  justify-self: end !important;
  width: auto !important;
  min-width: 0 !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #777 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-address-inputs {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-order-section {
  width: 340px !important;
  min-width: 0 !important;
  max-width: 340px !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-order-overview,
html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-order-total {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #aaa !important;
  box-sizing: border-box !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-order-copy {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: 1px !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-toggle-checkout-items,
html body.woocommerce-checkout.ho12-checkout-products #page #ho12-toggle-checkout-items:is(:hover, :focus-visible, :active) {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
  cursor: pointer !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-toggle-icon {
  position: relative !important;
  display: block !important;
  width: 15px !important;
  height: 12px !important;
  font-size: 0 !important;
  transition: none !important;
  transform: none !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-toggle-icon::before {
  content: "" !important;
  position: absolute !important;
  left: 1px !important;
  top: 1px !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-left: 9px solid #aaa !important;
  transform: rotate(90deg) translateX(1px) !important;
  transform-origin: 45% 50% !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-toggle-icon::after {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: 4px !important;
  width: 7px !important;
  height: 1.5px !important;
  background: #fff !important;
  transform: rotate(90deg) !important;
  transform-origin: center !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-toggle-checkout-items.is-open #ho12-toggle-icon {
  transform: rotate(180deg) !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-order-total {
  min-height: 26px !important;
  color: #aaa !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-order-total-value {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  color: var(--h-gamtae-color) !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-order-total-value .ho12-gamtae-amount-num {
  color: var(--h-gamtae-color) !important;
  font-family: "NanumJangmi", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-order-total-value img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-checkout-items-list {
  width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-cart-item {
  min-height: 46px !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid #eee !important;
  color: #aaa !important;
  transform: none !important;
  transition: none !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-cart-item img {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid #ccc !important;
  padding: 1px !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-summary-box {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  margin: 13px auto 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-summary-box > svg {
  display: none !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-summary-row {
  min-height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #aaa !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-summary-row .ho12-gamtae-amount-num {
  color: var(--h-gamtae-color) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-summary-row img:not(.ho12-gamtae-question-icon) {
  width: 19px !important;
  height: 19px !important;
  object-fit: contain !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-summary-total {
  min-height: 30px !important;
  margin-top: 12px !important;
  padding-top: 0 !important;
  color: #111 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-summary-total .ho12-gamtae-amount-num {
  font-size: 22px !important;
  font-weight: 700 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-pay-trigger-btn,
html body.woocommerce-checkout.ho12-checkout-products #page #ho12-pay-trigger-btn:is(:hover, :focus-visible, :active) {
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-gamtae-question-icon {
  width: auto !important;
  height: 23px !important;
  border: 0 !important;
  object-fit: contain !important;
}

@media (max-width: 560px) {
  html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-content,
  html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-shipping-card,
  html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-order-section {
    width: min(340px, calc(100vw - 40px)) !important;
    max-width: min(340px, calc(100vw - 40px)) !important;
  }
}

/* 2026-08-09 PDF lock: basket / purchase-history screen.
 * This block intentionally lives at EOF so older cart rules cannot resize it. */
html body.page-id-15 #page .ho12-cart-content-wrapper,
html body.page-id-15 #page .ho12-cart-page-wrapper,
html body.page-id-15 #page .ho12-cart-tabs-row,
html body.page-id-15 #page .ho12-cart-panel,
html body.page-id-15 #page .ho12-cart-list,
html body.page-id-15 #page .ho12-cart-item-row,
html body.page-id-15 #page .ho12-cart-actions,
html body.page-id-15 #page .ho12-cart-summary-wrap {
  width: min(740px, calc(100vw - 28px)) !important;
  max-width: 740px !important;
  box-sizing: border-box !important;
}

html body.page-id-15 #page .ho12-cart-content-wrapper {
  margin: 0 auto !important;
  overflow: visible !important;
}

html body.page-id-15 #page .ho12-cart-page-wrapper {
  margin: 28px auto 56px !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body.page-id-15 #page .ho12-cart-tabs-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 42px !important;
  min-height: 70px !important;
  margin: 0 auto 26px !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn,
html body.page-id-15 #page .ho12-cart-tab-btn:is(:hover, :focus-visible, :active) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 68px !important;
  min-height: 68px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn::after {
  content: none !important;
  display: none !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn > img,
html body.page-id-15 #page .ho12-cart-tab-btn:is(:hover, :focus-visible, :active) > img {
  order: 1 !important;
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  object-fit: contain !important;
  opacity: .28 !important;
  filter: none !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn[data-tab="history"] > img,
html body.page-id-15 #page .ho12-cart-tab-btn[data-tab="history"]:is(:hover, :focus-visible, :active) > img {
  transform: scaleY(-1) !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn > span {
  position: static !important;
  inset: auto !important;
  order: 2 !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  border: 0 !important;
  background: transparent !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn.active > img,
html body.page-id-15 #page .ho12-cart-tab-btn:is(:hover, :focus-visible) > img {
  opacity: 1 !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn.active > span,
html body.page-id-15 #page .ho12-cart-tab-btn:is(:hover, :focus-visible) > span {
  color: #f0b800 !important;
}

html body.page-id-15 #page .ho12-cart-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}

html body.page-id-15 #page .ho12-cart-item-row {
  display: grid !important;
  grid-template-columns: 18px 60px minmax(0, 1fr) 228px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.page-id-15 #page :is(.ho12-cart-item-checkbox, #ho12-cart-select-all) {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-block !important;
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  border: 1.5px solid #aaa !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
}

html body.page-id-15 #page :is(.ho12-cart-item-checkbox, #ho12-cart-select-all):checked {
  border-color: #aaa !important;
  background: #f0b800 !important;
  box-shadow: inset 0 0 0 3px #fff !important;
}

html body.page-id-15 #page .ho12-cart-item-thumb {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
  overflow: hidden !important;
  border: 1.25px solid #ccc !important;
  background: #fff !important;
  box-shadow: none !important;
}

html body.page-id-15 #page .ho12-cart-item-thumb img {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  margin: auto !important;
  object-fit: contain !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
}

html body.page-id-15 #page .ho12-cart-item-details {
  min-width: 0 !important;
  overflow: hidden !important;
}

html body.page-id-15 #page .ho12-cart-item-name {
  margin: 0 0 5px !important;
  overflow: hidden !important;
  color: #aaa !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.page-id-15 #page .ho12-cart-item-meta,
html body.page-id-15 #page .ho12-cart-item-meta :is(dl, dt, dd, p) {
  margin: 0 !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

html body.page-id-15 #page .ho12-cart-item-tail {
  display: grid !important;
  grid-template-columns: 92px 104px !important;
  align-items: center !important;
  justify-content: end !important;
  gap: 20px !important;
  min-width: 0 !important;
}

html body.page-id-15 #page .ho12-summary-qty-controls {
  display: grid !important;
  grid-template-columns: 15px 22px 15px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 92px !important;
  min-width: 92px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.page-id-15 #page :is(.ho12-cart-qty-btn-dec, .ho12-cart-qty-btn-inc),
html body.page-id-15 #page :is(.ho12-cart-qty-btn-dec, .ho12-cart-qty-btn-inc):is(:hover, :focus-visible, :active) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 15px !important;
  height: 15px !important;
  color: #aaa !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.page-id-15 #page .ho12-cart-qty-val {
  display: inline-block !important;
  min-width: 22px !important;
  color: #aaa !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-align: center !important;
}

html body.page-id-15 #page .ho12-cart-item-price {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  width: 104px !important;
  color: #55c928 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

html body.page-id-15 #page .ho12-cart-item-price img {
  width: 21px !important;
  height: 21px !important;
  object-fit: contain !important;
}

html body.page-id-15 #page .ho12-cart-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 4px 0 30px !important;
  padding: 0 8px !important;
}

html body.page-id-15 #page .ho12-cart-select-all-label,
html body.page-id-15 #page #ho12-cart-delete-selected,
html body.page-id-15 #page #ho12-cart-delete-selected:is(:hover, :focus-visible, :active) {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.page-id-15 #page .ho12-cart-summary-wrap {
  position: relative !important;
  display: flex !important;
  justify-content: flex-end !important;
  margin: 0 0 20px !important;
  padding: 0 8px !important;
}

html body.page-id-15 #page .ho12-cart-summary-box {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  width: 218px !important;
  min-width: 218px !important;
  max-width: 218px !important;
  min-height: 104px !important;
  margin: 0 !important;
  padding: 11px 14px !important;
  border: 1.5px solid #f0b800 !important;
  border-radius: 3px 7px 2px 5px !important;
  background: #fff !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html body.page-id-15 #page .ho12-cart-summary-box > div {
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

html body.page-id-15 #page .ho12-cart-summary-box > div:last-child {
  min-height: 25px !important;
  margin-top: 3px !important;
  color: #111 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

html body.page-id-15 #page :is(#ho12-cart-summary-subtotal, #ho12-cart-summary-shipping, #ho12-cart-summary-total) {
  color: #55c928 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

html body.page-id-15 #page #ho12-cart-summary-total {
  font-size: 21px !important;
  font-weight: 700 !important;
}

html body.page-id-15 #page .ho12-cart-summary-box img:not(#ho12-cart-checkout-btn) {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
}

html body.page-id-15 #page #ho12-cart-checkout-btn,
html body.page-id-15 #page #ho12-cart-checkout-btn:is(:hover, :focus-visible, :active) {
  width: auto !important;
  height: 24px !important;
  opacity: 1 !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.page-id-15 #page .ho12-cart-selection-warning {
  position: absolute !important;
  left: 10px !important;
  top: 0 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #f0b800 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #f0b800 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  z-index: 4 !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.page-id-15 #page .ho12-cart-selection-warning.is-visible {
  display: inline-flex !important;
}

html body.page-id-15 #page .ho12-cart-selection-warning::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  left: 0 !important;
  bottom: calc(100% + 7px) !important;
  display: block !important;
  width: max-content !important;
  max-width: 190px !important;
  height: auto !important;
  padding: 4px 7px !important;
  border: 1.5px solid #f0b800 !important;
  background: #fff !important;
  color: #aaa !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
}

html body.page-id-15 #page .ho12-cart-selection-warning:is(:focus, :hover)::after {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 680px) {
  html body.page-id-15 #page .ho12-cart-item-row {
    grid-template-columns: 18px 48px minmax(0, 1fr) !important;
    row-gap: 6px !important;
  }

  html body.page-id-15 #page .ho12-cart-item-thumb {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }

  html body.page-id-15 #page .ho12-cart-item-thumb img {
    width: 42px !important;
    height: 42px !important;
  }

  html body.page-id-15 #page .ho12-cart-item-tail {
    grid-column: 3 / 4 !important;
    grid-template-columns: 78px 92px !important;
    justify-content: start !important;
    gap: 12px !important;
  }

  html body.page-id-15 #page .ho12-summary-qty-controls {
    width: 78px !important;
    min-width: 78px !important;
  }

  html body.page-id-15 #page .ho12-cart-item-price {
    width: 92px !important;
  }
}

/* PDF purchase-info / basket: keep the whole cart inside the same 740px
 * content rail as the header, with compact rows and the hand-drawn total box. */
html body.page-id-15 #page .ho12-cart-content-wrapper,
html body.page-id-15 #page .ho12-cart-page-wrapper,
html body.page-id-15 #page :is(.ho12-cart-tabs-row,.ho12-cart-panel,.ho12-cart-list,.ho12-cart-item-row,.ho12-cart-actions,.ho12-cart-summary-wrap) {
  width: min(740px, calc(100vw - 28px)) !important;
  max-width: 740px !important;
  box-sizing: border-box !important;
}

html body.page-id-15 #page .ho12-cart-content-wrapper {
  margin: 0 auto !important;
  overflow: visible !important;
}

html body.page-id-15 #page .ho12-cart-page-wrapper {
  margin: 30px auto 54px !important;
  padding: 0 !important;
}

html body.page-id-15 #page .ho12-cart-tabs-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 44px !important;
  min-height: 70px !important;
  margin: 0 auto 28px !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn,
html body.page-id-15 #page .ho12-cart-tab-btn:is(:hover,:focus-visible,:active) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 68px !important;
  min-height: 68px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn img,
html body.page-id-15 #page .ho12-cart-tab-btn:is(:hover,:focus-visible,:active) img {
  order: 1 !important;
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  opacity: .26 !important;
  filter: grayscale(1) !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn[data-tab="history"] img,
html body.page-id-15 #page .ho12-cart-tab-btn[data-tab="history"]:is(:hover,:focus-visible,:active) img {
  transform: scaleY(-1) !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn span {
  order: 2 !important;
  display: block !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn.active img,
html body.page-id-15 #page .ho12-cart-tab-btn:is(:hover,:focus-visible) img {
  opacity: 1 !important;
  filter: none !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn.active span,
html body.page-id-15 #page .ho12-cart-tab-btn:is(:hover,:focus-visible) span {
  color: #f0b800 !important;
}

html body.page-id-15 #page .ho12-cart-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 0 10px !important;
}

html body.page-id-15 #page .ho12-cart-item-row {
  display: grid !important;
  grid-template-columns: 18px 60px minmax(0,1fr) 228px !important;
  align-items: center !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  gap: 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.page-id-15 #page .ho12-cart-item-thumb {
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
  border: 1.25px solid #ccc !important;
  background: #fff !important;
  box-shadow: none !important;
}

html body.page-id-15 #page .ho12-cart-item-thumb img {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  margin: auto !important;
  object-fit: contain !important;
}

html body.page-id-15 #page .ho12-cart-item-details {
  overflow: hidden !important;
}

html body.page-id-15 #page .ho12-cart-item-name {
  margin: 0 0 5px !important;
  color: #aaa !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

html body.page-id-15 #page .ho12-cart-item-meta,
html body.page-id-15 #page .ho12-cart-item-meta :is(dl,dt,dd,p) {
  margin: 0 !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

html body.page-id-15 #page .ho12-cart-item-tail {
  display: grid !important;
  grid-template-columns: 92px 104px !important;
  align-items: center !important;
  justify-content: end !important;
  gap: 20px !important;
  min-width: 0 !important;
}

html body.page-id-15 #page .ho12-summary-qty-controls {
  display: grid !important;
  grid-template-columns: 15px 22px 15px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 92px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body.page-id-15 #page :is(.ho12-cart-qty-btn-dec,.ho12-cart-qty-btn-inc),
html body.page-id-15 #page :is(.ho12-cart-qty-btn-dec,.ho12-cart-qty-btn-inc):is(:hover,:focus-visible,:active) {
  width: 15px !important;
  height: 15px !important;
  color: #aaa !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.page-id-15 #page .ho12-cart-qty-val {
  min-width: 22px !important;
  color: #aaa !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

html body.page-id-15 #page .ho12-cart-item-price {
  width: 104px !important;
  justify-content: flex-end !important;
  color: #55c928 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

html body.page-id-15 #page .ho12-cart-item-price img {
  width: 21px !important;
  height: 21px !important;
  object-fit: contain !important;
}

html body.page-id-15 #page .ho12-cart-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 4px 0 30px !important;
  padding: 0 8px !important;
}

html body.page-id-15 #page .ho12-cart-select-all-label,
html body.page-id-15 #page #ho12-cart-delete-selected,
html body.page-id-15 #page #ho12-cart-delete-selected:is(:hover,:focus-visible,:active) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.page-id-15 #page .ho12-cart-summary-wrap {
  position: relative !important;
  display: flex !important;
  justify-content: flex-end !important;
  margin: 0 0 20px !important;
  padding: 0 8px !important;
}

html body.page-id-15 #page .ho12-cart-summary-box {
  width: 218px !important;
  max-width: 218px !important;
  min-height: 104px !important;
  padding: 11px 14px !important;
  gap: 7px !important;
  border: 1.5px solid #f0b800 !important;
  border-radius: 3px 7px 2px 5px !important;
  background: #fff !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html body.page-id-15 #page .ho12-cart-summary-box > div {
  min-height: 20px !important;
  padding: 0 !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

html body.page-id-15 #page .ho12-cart-summary-box > div:last-child {
  min-height: 25px !important;
  margin-top: 3px !important;
  color: #111 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

html body.page-id-15 #page :is(#ho12-cart-summary-subtotal,#ho12-cart-summary-shipping,#ho12-cart-summary-total) {
  color: #55c928 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

html body.page-id-15 #page #ho12-cart-summary-total {
  font-size: 21px !important;
  font-weight: 700 !important;
}

html body.page-id-15 #page .ho12-cart-summary-box img:not(#ho12-cart-checkout-btn) {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
}

html body.page-id-15 #page #ho12-cart-checkout-btn,
html body.page-id-15 #page #ho12-cart-checkout-btn:is(:hover,:focus-visible,:active) {
  width: auto !important;
  height: 24px !important;
  opacity: 1 !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.page-id-15 #page .ho12-cart-selection-warning {
  position: absolute !important;
  left: 10px !important;
  top: 0 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #f0b800 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #f0b800 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  z-index: 4 !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.page-id-15 #page .ho12-cart-selection-warning.is-visible {
  display: inline-flex !important;
}

html body.page-id-15 #page .ho12-cart-selection-warning::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  left: 0 !important;
  bottom: calc(100% + 7px) !important;
  display: block !important;
  width: max-content !important;
  max-width: 190px !important;
  padding: 4px 7px !important;
  border: 1.5px solid #f0b800 !important;
  background: #fff !important;
  color: #aaa !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body.page-id-15 #page .ho12-cart-selection-warning:is(:focus,:hover)::after {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 680px) {
  html body.page-id-15 #page .ho12-cart-item-row {
    grid-template-columns: 18px 48px minmax(0,1fr) !important;
    row-gap: 6px !important;
  }

  html body.page-id-15 #page .ho12-cart-item-thumb {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }

  html body.page-id-15 #page .ho12-cart-item-thumb img {
    width: 42px !important;
    height: 42px !important;
  }

  html body.page-id-15 #page .ho12-cart-item-tail {
    grid-column: 3 / 4 !important;
    grid-template-columns: 78px 92px !important;
    gap: 12px !important;
    justify-content: start !important;
  }

  html body.page-id-15 #page .ho12-summary-qty-controls {
    width: 78px !important;
  }

  html body.page-id-15 #page .ho12-cart-item-price {
    width: 92px !important;
  }
}

html body.single-product #page .ho12-pd-action-buttons {
  width: 360px !important;
  max-width: 100% !important;
  margin: 9px 0 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 34px !important;
}

html body.single-product #page .ho12-action-item-cart,
html body.single-product #page .ho12-action-item-cart:is(:hover, :focus-visible, :active) {
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  transform: none !important;
  scale: 1 !important;
  transition: none !important;
}

html body.single-product #page .ho12-action-cart-basket-img {
  width: 30px !important;
  height: 30px !important;
  display: block !important;
  object-fit: contain !important;
  margin: 0 !important;
}

html body.single-product #page .ho12-action-cart-label {
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

html body.single-product #page .ho12-action-item-buy,
html body.single-product #page .ho12-action-item-buy:is(:hover, :focus-visible, :active),
html body.single-product #page .ho12-action-buy-custom-img,
html body.single-product #page .ho12-action-buy-custom-img:is(:hover, :focus-visible, :active) {
  transform: none !important;
  scale: 1 !important;
  transition: none !important;
}

html body.single-product #page .ho12-action-buy-custom-img {
  max-height: 34px !important;
  width: auto !important;
}

html body.single-product .ho12-cart-done-popup {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

html body.single-product .ho12-cart-done-popup.active {
  display: flex !important;
}

html body.single-product .ho12-cart-done-inner {
  width: min(360px, calc(100vw - 40px)) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  border: 1.5px solid #f1bb43 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transform: none !important;
}

html body.single-product .ho12-cart-done-inner > span,
html body.single-product .ho12-goto-cart-btn,
html body.single-product .ho12-goto-cart-btn:is(:hover, :focus-visible, :active) {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #aaa !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  transform: none !important;
  scale: 1 !important;
  transition: none !important;
}

html body.single-product .ho12-goto-cart-btn {
  cursor: pointer !important;
}

@media (max-width: 768px) {
  html body.single-product #page .ho12-simple-options-container,
  html body.single-product #page .ho12-selected-option-summary,
  html body.single-product #page .ho12-pd-action-buttons {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Product option validation: keep the reference inline notice, never the legacy tooltip dot. */
html body.single-product #page #ho12-option-warning {
  position: static !important;
  display: block !important;
  width: max-content !important;
  max-width: 360px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 8px 0 2px !important;
  padding: 4px 9px !important;
  overflow: visible !important;
  border: 1.5px solid #f3b300 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  visibility: visible !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
}

html body.single-product #page #ho12-option-warning > span,
html body.single-product #page #ho12-option-warning:is(:hover, :focus, :focus-within) > span {
  position: static !important;
  inset: auto !important;
  display: inline !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
}

.ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:hover,
.ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:focus{
  transform:translate(-50%,-50%)!important;
}
.ho12-required-question-field-center{
  position:relative!important;
}
.ho12-required-question-field-center > .ho12-required-question-icon,
.ho12-required-question-field-center > .ho12-required-question-icon:hover,
.ho12-required-question-field-center > .ho12-required-question-icon:focus{
  position:absolute!important;
  left:var(--ho12-required-question-x,50%)!important;
  top:var(--ho12-required-question-y,50%)!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  transition:none!important;
  pointer-events:auto!important;
  z-index:30!important;
}
.ho12-gamtae-buy-wrapper .ho12-required-question-icon{
  filter:hue-rotate(48deg) saturate(1.25) brightness(.96)!important
}
.ho12-mypage-container,.ho12-tab-content,#ho12-devices-section,.ho12-adult-verify-section{background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important}
.ho12-mp-nav-item,.ho12-mp-nav-item:hover,.ho12-mp-nav-item.active{transform:none!important;transition:none!important}.ho12-mp-hover-bubble{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#999!important;font-size:12px!important}
.ho12-mp-action-wrapper{position:relative!important}
.ho12-mp-action-wrapper .ho12-mp-action-btn{
  position:absolute!important;
  left:50%!important;
  top:calc(100% + 4px)!important;
  width:max-content!important;
  margin:0!important;
  color:#999!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateX(-50%)!important;
  pointer-events:none!important
}
.ho12-mp-action-wrapper:is(:hover,:focus-within) .ho12-mp-action-btn{
  opacity:1!important;
  visibility:visible!important
}
.ho12-dev-card,.ho12-dev-current-card,.ho12-device-card,.ho12-device-list,.ho12-devices-list{background:transparent!important;border:0!important;box-shadow:none!important}.ho12-dev-remove-btn-circle{width:18px!important;height:18px!important;padding:0!important;border:0!important;background:transparent!important;color:#00a0d2!important;font-size:15px!important;line-height:18px!important}
body.single-ho12_work :is(.ho12-planet,.ho12-planet img,.ho12-work-logo,.ho12-viewer-logo),body.single-ho12_episode :is(.ho12-planet,.ho12-planet img,.ho12-work-logo,.ho12-viewer-logo){animation:none!important;transition:none!important;transform:none!important}
body.single-ho12_episode .ho12-tooltip:not(.ho12-tt-next-lock):not(.ho12-tt-prev-lock),body.single-ho12_episode :is(.ho12-viewer-tooltip,.ho12-icon-tooltip){display:none!important}body.single-ho12_episode :is(.ho12-viewer-settings,.ho12-viewer-settings-box,.ho12-settings-panel,.vr-settings){width:165px!important;max-width:calc(100vw - 24px)!important}
body.single-ho12_episode :is(.ho12-tt-next-lock,.ho12-tt-prev-lock){width:60px!important;height:60px!important;background:transparent!important;border:0!important;box-shadow:none!important}body.single-ho12_episode :is(.ho12-tt-next-lock,.ho12-tt-prev-lock) .ho12-pdf17-spray-img{width:60px!important;height:60px!important;object-fit:contain!important}

/* PDF 77/79: desktop header and work-detail proportions are based on the
   1920px source capture used in the supplied PDF, not the PDF's 1200px page. */
@media(min-width:769px){
  html body #ho12-header .ho12-hd-top,
  html body #ho12-header #ho12-planet-nav{
    width:100%!important;
    max-width:740px!important
  }
  html body #ho12-header .ho12-logo,
  html body #ho12-header .ho12-logo:hover{transform:none!important}
  html body #ho12-header .ho12-logo-img{
    width:auto!important;
    height:128px!important;
    max-height:128px!important
  }
  html body #ho12-header .ho12-hd-search-img{
    width:45px!important;
    height:45px!important
  }
  html body #ho12-header .ho12-hd-user-wrapper,
  html body #ho12-header .ho12-hd-user-tree{
    width:68px!important;
    height:68px!important
  }
  html body #ho12-header #ho12-planet-nav{padding:10px 0!important}
  html body #ho12-header .ho12-pnav-item,
  html body #ho12-header .ho12-pnav-planet{
    width:68px!important;
    min-width:68px!important;
    height:68px!important
  }
}
html body.single-ho12_work #page .ho12-sw-title-frame{
  width:min(100%,720px)!important
}
html body.single-ho12_work #page .ho12-episodes-section{
  margin-top:90px!important
}

/* Header scale reconciliation against the supplied desktop source captures.
   Logged out keeps the lying astronaut asset, only at its source proportion.
   Logged in keeps the correctly sized standing astronaut and restores the
   three speech pieces from the accidental 68px menu squeeze. */
@media(min-width:769px){
  html body #ho12-header .ho12-logo-img{
    width:auto!important;
    height:108px!important;
    max-height:108px!important
  }
  html body #ho12-header .ho12-hd-search-img{
    width:45px!important;
    height:45px!important
  }
  html body #ho12-header .ho12-pnav-item,
  html body #ho12-header .ho12-pnav-planet,
  html body #ho12-header .ho12-pnav-planet :is(.ho12-planet-static,.ho12-planet-gif){
    width:56px!important;
    min-width:56px!important;
    height:56px!important
  }
  html body #ho12-header .ho12-hd-user-wrapper{
    width:56px!important;
    height:56px!important
  }
  html body.logged-in #ho12-header .ho12-hd-user-icon.ho12-standing,
  html body.logged-in #ho12-header .ho12-hd-user-icon.ho12-standing .ho12-hd-standing-img{
    width:20px!important;
    min-width:20px!important;
    height:40px!important;
    max-height:40px!important;
    object-fit:contain!important
  }
  html body #ho12-header .ho12-hd-user-icon.ho12-lying{
    width:54px!important;
    min-width:54px!important;
    height:auto!important
  }
  html body #ho12-header .ho12-hd-user-icon.ho12-lying .ho12-hd-lying-img{
    width:54px!important;
    height:auto!important;
    max-width:none!important
  }
  html body #ho12-header .ho12-hd-user-wrapper > .ho12-hd-user-tree.ho12-pdf18-speech-menu{
    top:-57px!important;
    width:144px!important;
    height:76px!important;
    transform:translateX(-50%)!important
  }
  html body #ho12-header .ho12-pdf18-speech-menu > .ho12-pdf18-speech-link-blue{
    left:0!important;top:27px!important;width:47px!important;height:48px!important
  }
  html body #ho12-header .ho12-pdf18-speech-menu > .ho12-pdf18-speech-link-green{
    left:48px!important;top:0!important;width:48px!important;height:49px!important
  }
  html body #ho12-header .ho12-pdf18-speech-menu > .ho12-pdf18-speech-link-yellow{
    left:97px!important;right:auto!important;top:27px!important;width:47px!important;height:48px!important
  }
}

/* Applied PDF page 2 / item 1: compact empty search bubble. */
@media(min-width:769px){
  html body #ho12-header .ho12-hd-search-expand{
    width:150px!important;
    max-width:0!important;
    height:34px!important;
    min-height:34px!important;
    margin-left:0!important;
    visibility:hidden!important
  }
  html body #ho12-header .ho12-hd-search-expand #ho12-search-input{
    width:150px!important;
    max-width:150px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 10px 0 24px!important;
    font-size:12px!important
  }
  html body #ho12-header .ho12-hd-search:is(:hover,:focus-within,.active) > .ho12-hd-search-expand{
    max-width:150px!important;
    margin-left:4px!important;
    visibility:visible!important
  }
  html body #ho12-header .ho12-hd-search.active,
  html body #ho12-header .ho12-hd-search:hover,
  html body #ho12-header .ho12-hd-search:focus-within{
    width:203px!important;
    max-width:203px!important;
    height:49px!important
  }
  html body #ho12-header .ho12-hd-search:is(:hover,:focus-within,.active) .ho12-hd-search-icon{
    opacity:1!important
  }
  html body #ho12-header .ho12-hd-search:is(:hover,:focus-within,.active) .ho12-hd-search-img{
    opacity:1!important;
    transform:none!important;
    transition:none!important
  }
  html body #ho12-header .ho12-hd-search:is(:hover,:focus-within,.active) #ho12-search-input{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 764 187' preserveAspectRatio='none'><path d='M 4.0 124.0 L 4.0 134.0 L 8.0 136.0 L 38.0 139.0 L 41.0 142.0 L 43.0 174.0 L 49.0 182.0 L 286.0 179.0 L 385.0 180.0 L 436.0 177.0 L 578.0 176.0 L 695.0 171.0 L 747.0 171.0 L 753.0 164.0 L 755.0 153.0 L 759.0 86.0 L 757.0 30.0 L 753.0 15.0 L 744.0 9.0 L 707.0 10.0 L 572.0 4.0 L 275.0 5.0 L 103.0 12.0 L 55.0 16.0 L 48.0 18.0 L 42.0 28.0 L 40.0 100.0 Z' fill='white' stroke='%23111111' stroke-width='3' vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round'/></svg>")!important
  }
}

/* Art-goods listing: keep three available products centered as one group.
   The former 1000px space-between grid pushed the cards outside the source
   composition when fewer than five products exist. */
@media(min-width:769px){
  html body.page-id-15 .ho12-goods-grid{
    width:640px!important;
    max-width:calc(100vw - 48px)!important;
    grid-template-columns:repeat(3,184px)!important;
    justify-content:center!important;
    align-items:start!important;
    column-gap:44px!important;
    row-gap:24px!important;
    margin-left:auto!important;
    margin-right:auto!important
  }

  /* Cart/history tabs align to the left edge of the narrower source content
     column, rather than the former 900px column that pushed them too far left. */
  html body.page-id-15 .ho12-cart-page-wrapper{
    width:720px!important;
    max-width:calc(100vw - 48px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important
  }
  html body.page-id-15 .ho12-cart-tabs-row,
  html body.page-id-15 .ho12-cart-panel{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important
  }
}

@media(max-width:768px){
  html body #ho12-header .ho12-hd-user-icon.ho12-lying,
  html body #ho12-header .ho12-hd-user-icon.ho12-lying .ho12-hd-lying-img{
    width:48px!important;
    min-width:48px!important;
    height:auto!important
  }
}

/* PDF 85: the next/previous purchase spray is a hover-only indicator.
   frontend.css is loaded after viewer-dynamic.css, so repeat the display rule
   here with a stronger selector to prevent the generic tooltip rule winning. */
html body.single-ho12_episode .ho12-tooltip.ho12-tt-next-lock,
html body.single-ho12_episode .ho12-tooltip.ho12-tt-prev-lock{
  display:none!important
}
html body.single-ho12_episode .ho12-tooltip.ho12-tt-next-lock.active,
html body.single-ho12_episode .ho12-tooltip.ho12-tt-prev-lock.active,
html body.single-ho12_episode .ho12-next-lock-wrapper:hover .ho12-tt-next-lock,
html body.single-ho12_episode .ho12-prev-lock-wrapper:hover .ho12-tt-prev-lock{
  display:flex!important
}
#ho12-bulk-purchase-btn,.ho12-bulk-purchase-row{border-color:#aaa!important;color:#999!important;box-shadow:none!important}
.ho12-system-dialog,:is(.ho12-gift-gif-overlay,#ho12-checkout-success-overlay,#ho12-goods-success-overlay,.ho12-contact-success-overlay,.ho12-address-modal,.ho12-address-modal-overlay,.ho12-postcode-embed,.ho12-cart-done-popup,#ho12-confirm-modal,#ho12-charge-modal,#ho12-gift-created-modal,#ho12-gift-claimed-modal,#ho12-device-limit-modal,#ho12-gt-receipt-modal,#ho12-gift-history-code-modal,#ho12-pdf17-confirm,#ho12-pdf17-purchase,#ho12-pdf17-bulk-confirm,#ho12-inline-confirm-modal,#ho12-bulk-calc-modal){background:transparent!important;backdrop-filter:none!important}
.ho12-pd-price-row,.ho12-summary-price-wrap{gap:6px!important}.ho12-pd-price-row .ho12-gamtae-icon-wrapper,.ho12-summary-price-wrap .ho12-gamtae-icon-wrapper{margin-left:0!important}.ho12-pd-related-section{border:2px solid #f1bb43!important;background:#fff!important;box-shadow:none!important;padding:18px!important}
html body.single-product #page :is(.ho12-pd-price-row,.ho12-summary-price-wrap){gap:3px!important}html body.single-product #page :is(.ho12-pd-price-row,.ho12-summary-price-wrap) img.ho12-gamtae-icon-img{margin-left:0!important;margin-right:0!important}
html body.single-product #page #ho12-option-warning{position:relative!important;width:18px!important;height:18px!important;margin:8px auto 0!important;padding:0!important;line-height:normal!important;overflow:visible!important}html body.single-product #page #ho12-option-warning>span{position:absolute!important;left:50%!important;bottom:calc(100% + 7px)!important;z-index:20!important;width:max-content!important;max-width:220px!important;padding:6px 9px!important;border:1px solid #f1bb43!important;background:#fff!important;color:#888!important;font-size:12px!important;font-weight:700!important;line-height:1.35!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateX(-50%)!important;transition:none!important}html body.single-product #page #ho12-option-warning:is(:hover,:focus,:focus-within)>span{opacity:1!important;visibility:visible!important}
.ho12-history-item-row{border:0!important;background:transparent!important;box-shadow:none!important;padding:12px 0!important}.ho12-history-item-row>div:first-child{border-right:0!important;color:#999!important}.ho12-history-item-thumb{width:54px!important;height:54px!important;border:0!important;overflow:visible!important}.ho12-history-item-thumb img,.ho12-cart-item img,.ho12-cart-product-image img{width:100%!important;height:100%!important;object-fit:contain!important}
.ho12-address-modal-card{background:#fff!important;border:0!important;box-shadow:none!important}.ho12-address-modal-card :is(input,select,textarea){border-style:solid!important;border-color:#aaa!important;color:#999!important}
.ho12-contact-container :is(label,.ho12-contact-desc,.ho12-contact-help,.ho12-contact-history){color:#999!important}.ho12-contact-box{max-width:560px!important}html body #ho12-dynamic-order-num:not(.ho12-is-visible),html body #ho12-dynamic-phone:not(.ho12-is-visible){display:none!important;visibility:hidden!important;height:0!important;margin:0!important;padding:0!important}html body #ho12-dynamic-order-num.ho12-is-visible,html body #ho12-dynamic-phone.ho12-is-visible{display:flex!important;visibility:visible!important;height:auto!important}
.ho12-contact-submit-icon-btn{position:relative!important;opacity:.45!important}.ho12-contact-submit-icon-btn::after{content:'전송';position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);color:#111;background:#fff;border:1px solid #111;padding:5px 8px;font-size:12px;font-weight:800;opacity:0;visibility:hidden;pointer-events:none;white-space:nowrap}.ho12-contact-submit-icon-btn:hover::after,.ho12-contact-submit-icon-btn:focus-visible::after{opacity:1;visibility:visible}
.ho12-contact-success-box,.ho12-gift-success-card,.ho12-gift-gif-box,.ho12-system-dialog__card{width:min(340px,calc(100vw - 32px))!important;max-width:340px!important;box-shadow:none!important}
.ho12-gift-send-actions{display:grid!important;grid-template-columns:auto auto!important;align-items:center!important;justify-content:start!important;gap:10px 14px!important;color:#999!important}.ho12-gift-send-actions::before{content:none!important;display:none!important}.ho12-gift-send-actions>button{grid-column:2!important;opacity:.42!important}.ho12-gift-send-actions>button:hover,.ho12-gift-send-actions>button:focus-visible{opacity:1!important}.ho12-gift-send-actions::after{content:'수량을 선택한 후 감태 아이콘을 누르면 선물용 감태 암호가 생성됩니다. 선물용 감태 암호를 복사하여 선물하고 싶은 분에게 전하세요.'!important;grid-column:1/-1!important;max-width:520px!important;color:#999!important;font-size:12px!important;font-weight:700!important;line-height:1.65!important}
@media(max-width:767px){.ho12-contact-container,.ho12-mypage-container,.ho12-gamtae-buy-wrapper,.ho12-gift-page-wrapper{width:100%!important;padding-left:16px!important;padding-right:16px!important;box-sizing:border-box!important}}

/* PDF 64-1/64-2 and 70: only the active gift tab is visible, and guidance precedes amounts. */
html body #ho12-gift-panel-send:not(.active),
html body #ho12-gift-panel-receive:not(.active){display:none!important}
html body #ho12-gift-panel-send.active{display:flex!important;flex-direction:column!important}
html body #ho12-gift-panel-receive.active{display:block!important}
html body .ho12-gift-send-actions::after{content:none!important;display:none!important}
html body #page .ho12-gift-instructions{
  order:1!important;
  width:min(100%,560px)!important;
  margin:0 auto 28px!important;
  color:#b0b0b0!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.65!important;
  text-align:center!important
}
html body .ho12-gift-instructions img{
  display:inline-block!important;
  width:13px!important;
  height:13px!important;
  margin:0 2px!important;
  object-fit:contain!important;
  vertical-align:-2px!important
}

/* PDF 14-15: compact grey/yellow agreement state used by the original sign-up art. */
html body .ho12-reg-custom-check{gap:5px!important}
html body .ho12-reg-checkbox-box{
  position:relative!important;
  flex:0 0 14px!important;
  width:14px!important;
  min-width:14px!important;
  max-width:14px!important;
  height:14px!important;
  min-height:14px!important;
  max-height:14px!important
}
html body .ho12-reg-custom-check #ho12-reg-agree:not(:checked) + .ho12-reg-checkbox-box::after{
  content:''!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  z-index:2!important;
  width:7px!important;
  height:7px!important;
  border-radius:50%!important;
  background:#fff!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:none!important
}
html body .ho12-reg-custom-check #ho12-reg-agree:checked + .ho12-reg-checkbox-box::after{
  content:none!important
}
html body .ho12-reg-checkbox-box img,
html body .ho12-reg-checkbox-box .reg-icon-unchecked,
html body .ho12-reg-checkbox-box .reg-icon-checked{
  width:14px!important;
  min-width:14px!important;
  max-width:14px!important;
  height:14px!important;
  min-height:14px!important;
  max-height:14px!important
}

/* PDF 18-20: the lost-password copy is inactive grey; only its two actions are yellow. */
html body #page .ho12-lost-guide,
html body #page .ho12-lost-label,
html body #page .ho12-lost-input{color:#9b9b9b!important}
html body #page .ho12-lost-submit,
html body #page .ho12-lost-back{color:#e4ae00!important}

/* Original PDF p.12: device management flows vertically in one centered column. */
html body #ho12-tab-device #ho12-devices-section{
  display:grid!important;
  grid-template-columns:minmax(0,340px)!important;
  grid-template-areas:"device-head" "device-current" "device-list"!important;
  align-items:start!important;
  justify-items:stretch!important;
  justify-content:center!important;
  column-gap:0!important;
  row-gap:24px!important;
  width:100%!important;
  max-width:740px!important;
  margin:24px auto 0!important;
  padding:0!important
}
html body #ho12-tab-device .ho12-dev-header{
  grid-area:device-head!important;
  justify-self:center!important;
  width:320px!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important
}
html body #ho12-tab-device .ho12-dev-header h2{
  margin:0 0 28px!important;
  color:#00a9df!important;
  font-size:15px!important
}
html body #ho12-tab-device .ho12-dev-stats{font-size:12px!important}
html body #ho12-tab-device .ho12-dev-current{
  grid-area:device-current!important;
  justify-self:center!important;
  width:320px!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important
}
html body #ho12-tab-device .ho12-dev-current-info{
  justify-content:flex-start!important;
  gap:14px!important;
  margin-bottom:20px!important
}
html body #ho12-tab-device .ho12-dev-current>h3{
  justify-content:flex-start!important;
  margin:0 0 14px!important;
  font-size:13px!important
}
html body #ho12-tab-device #ho12-dev-current-display-name,
html body #ho12-tab-device .ho12-dev-item-name-text{font-size:12px!important}
html body #ho12-tab-device .ho12-dev-list-section{
  grid-area:device-list!important;
  justify-self:center!important;
  width:340px!important;
  margin:0!important;
  padding:8px 0 0!important;
  text-align:left!important
}
html body #ho12-tab-device .ho12-dev-list-section>h3{
  justify-content:space-between!important;
  gap:18px!important;
  margin:0 0 18px!important;
  font-size:13px!important
}
html body #ho12-tab-device #ho12-dev-manage-btn{font-size:12px!important}
html body #ho12-tab-device #ho12-dev-list{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  column-gap:40px!important;
  row-gap:28px!important;
  min-height:0!important;
  padding:0!important
}
html body #ho12-tab-device .ho12-dev-register-row{max-width:340px!important;margin-inline:auto!important}
html body #ho12-tab-device .ho12-dev-card{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  width:110px!important;
  text-align:center!important
}
html body #ho12-tab-device .ho12-dev-card>div:first-of-type,
html body #ho12-tab-device .ho12-dev-card-icon{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:84px!important;
  height:84px!important;
  margin:0 0 8px!important
}
html body #ho12-tab-device .ho12-dev-card>div:first-of-type>img,
html body #ho12-tab-device .ho12-dev-card-icon>img{
  width:76px!important;
  height:76px!important;
  object-fit:contain!important
}
html body #ho12-tab-device .ho12-dev-item-name-wrap{width:100%!important}
html body #ho12-tab-device .ho12-dev-item-rename-input{
  display:none;
  width:100%!important;
  height:26px!important;
  margin:0 auto!important;
  padding:2px 4px!important;
  border:0!important;
  border-bottom:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#0fa6d8!important;
  box-shadow:none!important;
  text-align:center!important;
  font-size:12px!important
}
html body #ho12-tab-device .ho12-dev-remove-btn-circle{
  top:-2px!important;
  right:4px!important;
  width:18px!important;
  height:18px!important
}
html body #ho12-tab-device .ho12-dev-remove-btn-circle>img{
  width:18px!important;
  height:18px!important;
  object-fit:contain!important
}
html body #ho12-tab-device .ho12-dev-register-row span,
html body #ho12-tab-device #ho12-dev-nickname,
html body #ho12-tab-device #ho12-dev-register-btn{font-size:12px!important}

@media(max-width:760px){
  html body #ho12-tab-device #ho12-devices-section{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"device-head" "device-current" "device-list"!important;
    justify-items:center!important;
    row-gap:26px!important;
    width:min(100%,320px)!important;
    max-width:320px!important
  }
  html body #ho12-tab-device .ho12-dev-header,
  html body #ho12-tab-device .ho12-dev-current,
  html body #ho12-tab-device .ho12-dev-list-section{text-align:center!important}
  html body #ho12-tab-device .ho12-dev-list-section{padding-top:18px!important}
  html body #ho12-tab-device .ho12-dev-list-section>h3{justify-content:center!important}
  html body #ho12-tab-device #ho12-dev-list{justify-content:center!important}
}

/* 104: 소쿠리 선택 표시는 PDF의 원형 노란 인증 자산을 그대로 사용한다. */
html body #page #ho12-cart-panel-cart input.ho12-cart-item-checkbox,
html body #page #ho12-cart-panel-cart input#ho12-cart-select-all{
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
  appearance:none!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background-color:transparent!important;
  background-image:url('https://12ho.com/wp-content/uploads/2026/06/%EC%9E%90%EC%82%B0-3%EB%85%B8%EB%9E%91%EC%9D%B8%EC%A6%9D.png')!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  filter:grayscale(1)!important;
  opacity:.28!important;
  box-shadow:none!important
}
html body #page #ho12-cart-panel-cart input.ho12-cart-item-checkbox:checked,
html body #page #ho12-cart-panel-cart input#ho12-cart-select-all:checked{
  background-color:transparent!important;
  background-image:url('https://12ho.com/wp-content/uploads/2026/06/%EC%9E%90%EC%82%B0-3%EB%85%B8%EB%9E%91%EC%9D%B8%EC%A6%9D.png')!important;
  filter:none!important;
  opacity:1!important
}
html body #page #ho12-cart-panel-cart input.ho12-cart-item-checkbox:checked::after,
html body #page #ho12-cart-panel-cart input#ho12-cart-select-all:checked::after{content:none!important}
/* PDF 45-46: payment methods always use the green verification artwork.
 * Keep this in the last-loaded audit sheet so legacy shorthand backgrounds
 * cannot erase the indicator. */
html body #page #ho12-gt-payment-methods .ho12-gt-payment-indicator {
  display: block !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url('https://12ho.com/wp-content/uploads/2026/06/%EC%9E%90%EC%82%B0-4%EC%B4%88%EB%A1%9D%EC%9D%B8%EC%A6%9D.png') !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: grayscale(1) !important;
  opacity: .28 !important;
}

html body #page #ho12-gt-payment-methods .ho12-gt-payment-method.is-selected .ho12-gt-payment-indicator {
  background-color: transparent !important;
  background-image: url('https://12ho.com/wp-content/uploads/2026/06/%EC%9E%90%EC%82%B0-4%EC%B4%88%EB%A1%9D%EC%9D%B8%EC%A6%9D.png') !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Legacy library sizing; the final PDF-audit override below fixes the desktop
 * layout to five persistent slots so incomplete rows start at the left. */
@media (min-width: 761px) {
  html body.page-id-16 #ho12-lib-grid {
    grid-template-columns: repeat(auto-fit, 176px) !important;
    justify-content: center !important;
    justify-items: stretch !important;
    column-gap: 20px !important;
    row-gap: 20px !important;
  }
}

/* PDF p35: direct purchase opens the goods checkout.  A legacy desktop rule
 * expanded the wrapper to 1180px but left its 600px form at the far left,
 * making the visual system change immediately after pressing Buy now.
 * Keep the same centered, narrow content column used by the supplied layout. */
@media (min-width: 980px) {
  html body.woocommerce-checkout.ho12-checkout-goods .ho12-checkout-wrapper {
    width: min(600px, calc(100% - 32px)) !important;
    max-width: 600px !important;
    margin: 28px auto 80px !important;
    padding: 0 !important;
  }

  html body.woocommerce-checkout.ho12-checkout-goods .ho12-checkout-content {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 !important;
  }
}

/* Confirmed item 21: all three signed-in speech bubbles remain in the
 * neutral gray state. Hover or keyboard focus colors only that one control. */
html body.logged-in #ho12-header .ho12-hd-user-wrapper > .ho12-hd-user-tree.ho12-pdf18-speech-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body.logged-in #ho12-header .ho12-pdf18-speech-menu > a.ho12-pdf18-speech-link {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body.logged-in #ho12-header .ho12-pdf18-speech-menu > a.ho12-pdf18-speech-link .ho12-pdf18-speech-piece {
  filter: grayscale(1) !important;
  opacity: .34 !important;
  transition: filter .18s ease, opacity .18s ease !important;
}

html body.logged-in #ho12-header .ho12-pdf18-speech-menu > a.ho12-pdf18-speech-link:hover .ho12-pdf18-speech-piece,
html body.logged-in #ho12-header .ho12-pdf18-speech-menu > a.ho12-pdf18-speech-link:focus-visible .ho12-pdf18-speech-piece {
  filter: none !important;
  opacity: 1 !important;
}

/* Confirmed item 25: icon-attached tooltips for device, adult verification,
 * and edit. The previous 190px bordered panel was visually unrelated to the
 * supplied artwork, and the edit action had no tooltip. */
html body #page .ho12-mp-nav-item .ho12-mp-hover-bubble {
  top: calc(100% + 7px) !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: 150px !important;
  padding: 4px 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #8d8d8d !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  z-index: 110 !important;
}

html body #page #ho12-btn-edit-wrap {
  position: relative !important;
}

html body #page #ho12-btn-edit-wrap::after {
  content: '수정하기';
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  z-index: 110;
  padding: 4px 7px;
  color: #8d8d8d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: opacity .18s ease, visibility .18s ease;
}

html body #page #ho12-btn-edit-wrap:hover::after,
html body #page #ho12-btn-edit-wrap:focus-within::after {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Confirmed item 8-2: the dormant Earth is neutral gray and switches to the
 * colored Earth only while the wake-up control is active. */
html body .ho12-login-submit-btn .ho12-login-btn-icon-normal {
  filter: grayscale(1) !important;
  opacity: .35 !important;
}

html body .ho12-login-submit-btn:hover .ho12-login-btn-icon-normal,
html body .ho12-login-submit-btn:focus-visible .ho12-login-btn-icon-normal {
  opacity: 0 !important;
}

html body .ho12-login-submit-btn:hover .ho12-login-btn-icon-hover,
html body .ho12-login-submit-btn:focus-visible .ho12-login-btn-icon-hover {
  filter: none !important;
  opacity: 1 !important;
}

/* PDF P5 / items 13-15: bring the supplied hand-drawn sign-up artwork up to
 * the same top edge as the reference page and keep its controls stationary. */
@media (min-width: 769px) {
  html body.page-id-118 .ho12-login.ho12-center-login {
    padding-top: 0 !important;
  }

  html body.page-id-118 .ho12-register-card-container {
    margin-top: -26px !important;
  }
}

/* PDF P5 item 17: all completion GIFs use one shared 340px centered frame.
 * The source GIFs have different native pixel sizes, so sizing the image
 * itself (rather than relying on each inline wrapper) keeps their placement
 * consistent across registration, contact, gift, checkout, and order success. */
html body :is(
  .ho12-reg-success-gif-container,
  .ho12-contact-success-box
) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* The device confirmation card is a top-level dialog rather than a child of
 * an overlay. Keep it out of the page flow and on the same stable viewport
 * anchor as the other centred popups. */
html body .ho12-device-remove-confirm.ho12-popup-frame-standard {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2147483000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .ho12-device-remove-confirm .ho12-device-remove-confirm-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 88px !important;
  width: auto !important;
  margin-top: 18px !important;
  padding: 0 !important;
  transform: translateY(5px) !important;
}

html body :is(
  .ho12-reg-success-gif-container > img,
  .ho12-contact-success-box > img,
  #ho12-order-received-overlay > img,
  #ho12-goods-success-overlay img,
  #ho12-checkout-success-overlay img,
  #ho12-gift-claim-gif-overlay img
) {
  display: block !important;
  width: min(340px, calc(100vw - 32px)) !important;
  min-width: 0 !important;
  max-width: 340px !important;
  height: min(340px, calc(100vw - 32px), calc(100vh - 120px)) !important;
  max-height: min(340px, calc(100vh - 120px)) !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
  transition: none !important;
}

html body :is(
  .ho12-reg-success-gif-container,
  .ho12-contact-success-box
) {
  width: min(340px, calc(100vw - 32px)) !important;
  max-width: 340px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Registration completion: the GIF is a standalone result scene. The large
 * registration artwork exists only while the form is active. */
html body.page-id-118 .ho12-register-card-container.ho12-register-complete {
  width: min(740px, calc(100vw - 48px)) !important;
  min-width: 0 !important;
  max-width: 740px !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  background-image: none !important;
  background: transparent !important;
  overflow: visible !important;
}

html body.page-id-118 #page .ho12-register-card-container.ho12-register-complete #ho12-reg-form {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 60px 0 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  transform: translateY(-58px) !important;
}

html body.page-id-118 #page .ho12-register-card-container.ho12-register-complete .ho12-register-box {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 768px) {
  html body.page-id-118 .ho12-register-card-container.ho12-register-complete {
    width: 100% !important;
  }

  html body.page-id-118 #page .ho12-register-card-container.ho12-register-complete #ho12-reg-form {
    padding-top: 64px !important;
    transform: none !important;
  }

  html body.page-id-118 #page .ho12-register-card-container.ho12-register-complete .ho12-register-box {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
}

html body :is(
  #ho12-order-received-overlay,
  #ho12-goods-success-overlay,
  #ho12-checkout-success-overlay,
  #ho12-gift-claim-gif-overlay
) {
  padding: 16px !important;
  background: transparent !important;
}

html body.page-id-118 .ho12-inline-verify-btn,
html body.page-id-118 .ho12-inline-verify-btn:hover,
html body.page-id-118 .ho12-inline-verify-btn:focus,
html body.page-id-118 .ho12-inline-verify-btn:active {
  transform: translateY(-50%) !important;
  transition: none !important;
}

html body.page-id-118 .ho12-reg-checkbox-box,
html body.page-id-118 .ho12-reg-checkbox-box img,
html body.page-id-118 .ho12-reg-checkbox-box .reg-icon-unchecked,
html body.page-id-118 .ho12-reg-checkbox-box .reg-icon-checked {
  width: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  height: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
  transform: none !important;
}

html body.page-id-118 .ho12-reg-checkbox-box .reg-icon-unchecked {
  filter: none !important;
  opacity: 1 !important;
}

html body.page-id-118 .ho12-reg-custom-check #ho12-reg-agree:not(:checked) + .ho12-reg-checkbox-box::after {
  background: #fff !important;
}

html body.page-id-118 .ho12-reg-checkbox-box .reg-icon-checked {
  filter: none !important;
}

html body.page-id-118 .ho12-reg-submit-btn-image,
html body.page-id-118 .ho12-reg-submit-btn-image:hover,
html body.page-id-118 .ho12-reg-submit-btn-image:focus,
html body.page-id-118 .ho12-reg-submit-btn-image:active,
html body.page-id-118 .ho12-reg-submit-btn-icon {
  transform: none !important;
  transition: none !important;
}

/* P5 item 15: use the exact media-library hand-drawn boarding label. */
@media (min-width: 769px) {
  html body.page-id-118 #page .ho12-register-card-container #ho12-reg-form {
    left: 33% !important;
  }

  html body.page-id-118 #page #ho12-reg-form .ho12-reg-input-wrapper {
    left: -8% !important;
    width: 126% !important;
  }

  html body.page-id-118 #page #ho12-reg-form .ho12-reg-label {
    width: 85px !important;
    min-width: 85px !important;
  }

  html body.page-id-118 #page #ho12-reg-form .ho12-inline-verify-btn {
    right: -31px !important;
  }

  html body.page-id-118 .ho12-reg-agreement {
    /* Reference P5: keep the consent row above the boarding button and
       place its check mark at the right end of the label. */
    top: 52% !important;
    left: 94.25% !important;
  }

  html body.page-id-118 .ho12-reg-agreement .ho12-reg-custom-check,
  html body.page-id-118 .ho12-reg-agreement .ho12-reg-standard-check {
    flex-direction: row-reverse !important;
  }

  html body.page-id-118 #page #ho12-reg-form .ho12-reg-agreement .ho12-reg-checkbox-label {
    font-size: 9px !important;
    letter-spacing: -0.15px !important;
  }

  html body.page-id-118 .ho12-reg-submit-wrap {
    top: 63% !important;
    left: 111% !important;
    width: 82.857px !important;
    height: 34px !important;
  }

  html body.page-id-118 .ho12-reg-submit-btn-image {
    width: 82.857px !important;
    height: 34px !important;
    background-color: transparent !important;
    background-image: url('https://12ho.com/wp-content/uploads/2026/06/%EC%9E%90%EC%82%B0-1%EB%AC%B8%EC%9D%98-2.png') !important;
    background-position: center !important;
    background-size: 82.857px 32.976px !important;
    background-repeat: no-repeat !important;
  }

  html body.page-id-118 .ho12-reg-submit-btn-icon {
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
  }
}

/* Applied PDF page 3 / items 2-5: main-page proportions and inactive tone. */
@media (min-width: 769px) {
  /* 2: the lying astronaut is an always-active icon, without a tooltip. */
  html body.page-id-12 #ho12-header .ho12-hd-user,
  html body.page-id-12 #ho12-header .ho12-hd-user-icon.ho12-lying,
  html body.page-id-12 #ho12-header .ho12-hd-user-icon.ho12-lying .ho12-hd-lying-img {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: auto !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html body.page-id-12 #ho12-header .ho12-hd-user::before,
  html body.page-id-12 #ho12-header .ho12-hd-user::after,
  html body.page-id-12 #ho12-header .ho12-hd-user-icon.ho12-lying::before,
  html body.page-id-12 #ho12-header .ho12-hd-user-icon.ho12-lying::after {
    content: none !important;
    display: none !important;
  }

  /* 3: the three-column header grid keeps the logo on the exact viewport axis. */
  html body.page-id-12 #ho12-header .ho12-hd-top {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  }

  html body.page-id-12 #ho12-header .ho12-hd-center {
    justify-self: center !important;
  }

  /* 4: slightly smaller than the old 236 x 295 cards, while three still fill the main row. */
  html body.page-id-12 #page #ho12-works-grid.ho12-works-grid {
    grid-template-columns: repeat(3, 218px) !important;
    justify-content: center !important;
    column-gap: 80px !important;
    row-gap: 34px !important;
  }

  html body.page-id-12 #page #ho12-works-grid .ho12-work-card {
    width: 218px !important;
    height: 273px !important;
    min-height: 273px !important;
  }
}

/* 5: the satellite is the inactive-color reference for nav icons and main cards. */
html body.page-id-12 #ho12-header .ho12-pnav-planet .ho12-planet-static {
  filter: none !important;
}

html body.page-id-12 #page #ho12-works-grid .ho12-work-card {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.page-id-12 #page #ho12-works-grid .ho12-work-card .ho12-card-border-stroke {
  stroke: #9b9b9b !important;
}

html body.page-id-12 #page #ho12-works-grid .ho12-work-card .ho12-wc-title,
html body.page-id-13 #page #ho12-works-grid .ho12-work-card .ho12-wc-title {
  color: #9b9b9b !important;
}

html body.page-id-12 #page #ho12-works-grid .ho12-work-card:hover,
html body.page-id-12 #page #ho12-works-grid .ho12-work-card:focus-visible {
  filter: none !important;
  transform: none !important;
}

html body.page-id-12 #page #ho12-works-grid .ho12-work-card:hover .ho12-card-border-stroke,
html body.page-id-12 #page #ho12-works-grid .ho12-work-card:focus-visible .ho12-card-border-stroke {
  stroke: #111 !important;
}

html body.page-id-12 #page #ho12-works-grid .ho12-work-card:hover .ho12-wc-title,
html body.page-id-12 #page #ho12-works-grid .ho12-work-card:focus-visible .ho12-wc-title,
html body.page-id-13 #page #ho12-works-grid .ho12-work-card:hover .ho12-wc-title,
html body.page-id-13 #page #ho12-works-grid .ho12-work-card:focus-visible .ho12-wc-title {
  color: #111 !important;
}

/* Applied PDF page 4 / items 7-11: logged-out login screen. */
@media (min-width: 769px) {
  /* The lying astronaut uses the same small, always-active size on every logged-out screen. */
  html body:not(.logged-in) #ho12-header .ho12-hd-user,
  html body:not(.logged-in) #ho12-header .ho12-hd-user-icon.ho12-lying,
  html body:not(.logged-in) #ho12-header .ho12-hd-user-icon.ho12-lying .ho12-hd-lying-img {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: auto !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 5 / 8-2: one neutral inactive density until the corresponding control is approached. */
html body #ho12-header .ho12-pnav-planet .ho12-planet-static {
  filter: none !important;
}

html body.page-id-17 .ho12-input-label,
html body.page-id-17 .ho12-input-container input {
  color: #9b9b9b !important;
}

/* 7: remove the password-eye control completely. */
html body.page-id-17 #ho12-toggle-pwd-btn,
html body.page-id-17 .ho12-eye-icon {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 8-1: no fixed keep-awake text; the dormant icon itself stays neutral. */
html body.page-id-17 .ho12-remember-wrapper .ho12-tooltip-bubble,
html body.page-id-17 .ho12-remember-wrapper .ho12-checkbox-label {
  display: none !important;
}

html body.page-id-17 .rem-icon-unchecked {
  filter: grayscale(1) !important;
  opacity: .5 !important;
}

/* 9: all three social marks share the compact source size. */
html body.page-id-17 .ho12-sns-icon-wrap,
html body.page-id-17 .ho12-sns-icon-wrap img {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  transform: none !important;
}

/* 10: retain the tuned 60/54px optical sizes, but align their lower edges. */
html body.page-id-17 .ho12-login-sub-links {
  align-items: flex-end !important;
}

html body.page-id-17 .ho12-login-sub-links .ho12-tooltip-wrap,
html body.page-id-17 .ho12-login-sub-links .ho12-sub-link-item {
  align-self: flex-end !important;
}

html body.page-id-17 .ho12-login-sub-links .ho12-sub-link-item,
html body.page-id-17 .ho12-login-sub-links .ho12-sub-link-item img {
  transform: none !important;
  transition: none !important;
}

/* Registration PDF P5: fill the fixed 740px content shell without crossing
   its left or right boundary. */
@media (min-width: 769px) {
  html body.page-id-118 .ho12-login.ho12-center-login {
    overflow: visible !important;
  }

  html body.page-id-118 .ho12-register-card-container {
    flex: 0 0 min(740px, calc(100vw - 48px)) !important;
    width: min(740px, calc(100vw - 48px)) !important;
    min-width: min(740px, calc(100vw - 48px)) !important;
    max-width: 740px !important;
  }

  html body.page-id-118 :is(
    .ho12-reg-label,
    .ho12-reg-input-container input,
    .ho12-reg-input-container input::placeholder,
    .ho12-reg-verify-label,
    .ho12-reg-checkbox-label
  ) {
    color: #9b9b9b !important;
    font-weight: 600 !important;
  }
}

/* Applied PDF page 6 / items 13-15: source-page registration scale. */
@media (min-width: 769px) {
  html body.page-id-118 .ho12-register-card-container {
    width: min(740px, calc(100vw - 48px)) !important;
    max-width: 740px !important;
    aspect-ratio: 1742 / 1540 !important;
    margin-top: -26px !important;
  }

  html body.page-id-118 .ho12-inline-verify-btn,
  html body.page-id-118 .ho12-inline-verify-btn:hover,
html body.page-id-118 .ho12-inline-verify-btn:focus-visible {
    transform: translateY(-50%) !important;
    transition: none !important;
  }
}

/* Applied PDF pages 9-10 / items 18-19: original open lost-password layout. */
html body.page-id-1391 #page .ho12-lost-password-screen {
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: 540px !important;
  padding: 0 20px 60px !important;
}

html body.page-id-1391 #page .ho12-lost-password-box {
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 58px 20px 42px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.page-id-1391 #page .ho12-lost-guide {
  width: min(100%, 620px) !important;
  max-width: 620px !important;
  margin: 0 auto 24px !important;
  color: #9b9b9b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  text-align: center !important;
}

html body.page-id-1391 #page .ho12-lost-row {
  width: min(100%, 360px) !important;
  margin: 0 auto 28px !important;
}

html body.page-id-1391 #page .ho12-lost-message {
  display: none;
  width: min(100%, 260px) !important;
  max-width: 260px !important;
  margin: 0 auto 32px !important;
  padding: 8px 12px !important;
  background: rgba(255, 217, 64, 0.16) !important;
  color: #9b9b9b !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

html body.page-id-1391 #page input.ho12-lost-input[type='email'] {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #9b9b9b !important;
  caret-color: #111 !important;
  cursor: text !important;
  text-decoration: none !important;
}

html body.page-id-1391 #page .ho12-lost-actions {
  width: min(100%, 360px) !important;
  margin: 0 auto !important;
  justify-content: flex-end !important;
  gap: 0 !important;
}

html body.page-id-1391 #page .ho12-lost-submit,
html body.page-id-1391 #page .ho12-lost-back {
  min-width: 32px !important;
  color: #9b9b9b !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  transform: none !important;
  transition: none !important;
}

html body.page-id-1391 #page .ho12-lost-submit {
  color: #e4ae00 !important;
}

html body.page-id-1391 #page .ho12-lost-submit span {
  color: inherit !important;
}

html body.page-id-1391 #page .ho12-lost-back {
  display: none !important;
}

html body.page-id-1391 #page .ho12-lost-submit:hover,
html body.page-id-1391 #page .ho12-lost-submit:focus-visible,
html body.page-id-1391 #page .ho12-lost-back:hover,
html body.page-id-1391 #page .ho12-lost-back:focus-visible {
  color: #e4ae00 !important;
  transform: none !important;
}

/* Applied PDF page 11 / item 20: plain, borderless mismatch tooltip. */
#resetpassform .ho12-reset-mismatch-question::after {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #9b9b9b !important;
}

/* Applied PDF page 12 / item 21: the three speech pieces stay neutral until
 * the individual link is approached. Header artwork never scales on hover. */
html body #ho12-header :is(
  .ho12-hd-search-img,
  .ho12-hd-standing-img,
  .ho12-hd-standing-svg,
  .ho12-hd-lying-img,
  .ho12-hd-lying-svg,
  .ho12-pdf18-speech-piece
) {
  transform: none !important;
}

html body.logged-in #ho12-header .ho12-pdf18-speech-menu > a.ho12-pdf18-speech-link > img.ho12-pdf18-speech-piece {
  filter: grayscale(1) !important;
  opacity: .34 !important;
  transform: none !important;
}

html body.logged-in #ho12-header .ho12-pdf18-speech-menu > a.ho12-pdf18-speech-link:is(:hover, :focus-visible) > img.ho12-pdf18-speech-piece {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Applied PDF page 14 / item 28: phone verification is a fixed action, not a
 * checkbox. Only its color and adjacent help text change on approach. */
html body #page #ho12-mp-verify-btn-inline,
html body #page #ho12-mp-verify-btn-inline:hover,
html body #page #ho12-mp-verify-btn-inline:focus-visible {
  transform: none !important;
  transition: none !important;
}

html body #page #ho12-mp-verify-btn-inline > img {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body #page #ho12-mp-verify-btn-inline:is(:hover, :focus-visible) > img,
html body #page #ho12-mp-verify-btn-inline[data-verified='1'] > img {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* My-info edit: both password rows remain visible, and the phone verification
 * artwork uses the supplied media assets at their native colour. */
html body #page #ho12-profile-form.is-editing #ho12-fg-password,
html body #page #ho12-profile-form.is-editing #ho12-fg-password-confirm {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #page #ho12-profile-form .ho12-mp-phone-input-container,
html body #page #ho12-profile-form .ho12-mp-phone-verify-wrap,
html body #page #ho12-profile-form #ho12-mp-verify-btn-inline {
  align-items: center !important;
}

html body #page #ho12-profile-form .ho12-mp-phone-verify-wrap {
  align-self: center !important;
  line-height: 1 !important;
}

html body #page #ho12-profile-form #ho12-mp-verify-btn-inline {
  display: inline-flex !important;
  line-height: 1 !important;
}

/* Phone verification is plain copy: muted at rest and black only while the
 * action is approached. The circular artwork is intentionally omitted. */
html body.page-id-17 #page#page #ho12-profile-form #ho12-mp-verify-btn-inline {
  gap: 0 !important;
  color: #9b9b9b !important;
  font-family: 'Nanum Gothic', 'Noto Sans KR', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

html body.page-id-17 #page#page #ho12-profile-form
  #ho12-mp-verify-btn-inline .ho12-mp-verify-text {
  color: inherit !important;
}

html body.page-id-17 #page#page #ho12-profile-form
  #ho12-mp-verify-btn-inline[data-verified='0']:is(:hover, :focus-visible),
html body.page-id-17 #page#page #ho12-profile-form
  #ho12-mp-verify-btn-inline[data-verified='0']:is(:hover, :focus-visible) .ho12-mp-verify-text {
  color: #111111 !important;
}

html body.page-id-17 #page#page #ho12-profile-form
  #ho12-mp-verify-btn-inline[data-verified='1'],
html body.page-id-17 #page#page #ho12-profile-form
  #ho12-mp-verify-btn-inline[data-verified='1'] .ho12-mp-verify-text {
  color: #00a9df !important;
}

/* Preserve the measured registration-label position after removing the
 * circular mark by retaining only its invisible layout footprint. */
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-verify-spacer {
  display: block !important;
  visibility: hidden !important;
  width: 11.429px !important;
  min-width: 11.429px !important;
  max-width: 11.429px !important;
  height: 11.429px !important;
  min-height: 11.429px !important;
  max-height: 11.429px !important;
  flex: 0 0 11.429px !important;
  pointer-events: none !important;
}

html body #page #ho12-profile-form #ho12-mp-verify-btn-inline > img {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Applied PDF pages 15-16 / items 30-34: remove the empty back-row space,
 * keep the device layout borderless, and use inactive text until interaction. */
html body #page #ho12-tab-device > div:first-child:has(> .ho12-mp-back-to-info-btn) {
  display: none !important;
  margin: 0 !important;
}

html body #page #ho12-tab-device #ho12-devices-section,
html body #page #ho12-tab-device :is(
  .ho12-dev-header,
  .ho12-dev-current,
  .ho12-dev-list-section,
  #ho12-dev-list,
  .ho12-dev-card,
  .ho12-dev-empty
) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #page #ho12-tab-device :is(
  h3,
  .ho12-dev-stats,
  #ho12-dev-current-display-name,
  .ho12-dev-register-row span,
  .ho12-dev-input,
  .ho12-dev-item-name-text,
  .ho12-dev-empty,
  #ho12-dev-register-btn,
  #ho12-dev-manage-btn
) {
  color: #a3a3a3 !important;
}

html body #page #ho12-tab-device :is(#ho12-dev-register-btn, #ho12-dev-manage-btn):is(:hover, :focus-visible) {
  color: #00a9df !important;
  transform: none !important;
}

html body #page #ho12-tab-device .ho12-dev-remove-btn-circle,
html body #page #ho12-tab-device .ho12-dev-remove-btn-circle:is(:hover, :focus-visible),
html body #page #ho12-tab-device .ho12-dev-remove-btn-circle > img {
  transform: none !important;
  transition: none !important;
}

/* Applied PDF pages 17-18 / items 35-37: remove the empty back row, keep the
 * verification prompt inline, and align the completion artwork to the shared
 * completion frame used elsewhere. */
html body #page #ho12-tab-adult > div:first-child:has(> .ho12-mp-back-to-info-btn) {
  display: none !important;
  margin: 0 !important;
}

html body #page #ho12-tab-adult .ho12-adult-status-box.is-unverified {
  width: min(100%, 500px) !important;
  max-width: 500px !important;
  margin: 48px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #page #ho12-tab-adult .ho12-adult-status-box[hidden] {
  display: none !important;
}

html body #page #ho12-tab-adult .ho12-adult-guide-title {
  margin: 0 auto 44px !important;
  padding: 0 !important;
  color: #00a9df !important;
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

html body #page #ho12-tab-adult .ho12-adult-guide-copy {
  /* Desktop content is rendered at zoom:.7. 32.857px paints as the same
   * 23px message-to-action distance used by the shared popup. */
  margin: 0 auto 32.857px !important;
  padding: 0 !important;
  color: #a3a3a3 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
}

html body #page #ho12-tab-adult .ho12-adult-guide-copy > span {
  display: block !important;
}

html body #page #ho12-tab-adult .ho12-adult-guide-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Desktop is painted at zoom:.7. These values place the two action-image
   * centres directly under the device/adult shortcut-image centres. */
  gap: 146.28px !important;
  transform: translateX(-56.007px) !important;
}

@media (max-width: 1040px) {
  html body #page #ho12-tab-adult .ho12-adult-guide-copy {
    margin-bottom: 23px !important;
  }

  html body #page #ho12-tab-adult .ho12-adult-guide-actions {
    gap: 88px !important;
    transform: none !important;
  }
}

html body #page #ho12-tab-adult .ho12-adult-guide-actions > button,
html body #page #ho12-tab-adult .ho12-adult-guide-actions > button:is(:hover, :focus-visible) {
  min-width: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #00a9df !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  transform: none !important;
  transition: none !important;
}

html body #page #ho12-tab-adult .ho12-adult-status-box.is-verified {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* The registration-complete GIF is 620px wide but its visible artwork
   * occupies 61.7896% (about 383px). This PNG has no horizontal padding, so
   * matching that visible-artwork width keeps both completion scenes equal. */
  width: min(383px, calc(100vw - 32px)) !important;
  max-width: 383px !important;
  height: auto !important;
  margin: 28px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #page #ho12-tab-adult .ho12-adult-status-box.is-verified > img {
  display: block !important;
  width: min(383px, calc(100vw - 32px)) !important;
  max-width: 383px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

/* Applied PDF page 19 / items 38-43: original compact gamtae proportions. */
html body #page .ho12-gamtae-buy-wrapper {
  width: min(600px, calc(100vw - 32px)) !important;
  max-width: 600px !important;
  margin: 10px auto 80px !important;
  padding: 0 !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-charge-gif-banner {
  left: 50% !important;
  width: min(1000px, calc(100vw - 32px)) !important;
  max-width: 1000px !important;
  margin: 0 0 10px !important;
  transform: translateX(-50%) !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-balance-info-flow {
  width: 100% !important;
  margin: -38px auto 22px !important;
}

/* Keep the balance number slightly smaller than the adjacent gamtae artwork,
 * while giving the two hand-drawn forms a little breathing room. */
html body #page .ho12-gamtae-buy-wrapper .ho12-gt-balance-info-flow > div:first-child {
  transform: translate(-62px, -148px) !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-user-balance-val {
  color: #73cf18 !important;
  font-family: 'NanumJangmi','Rose',sans-serif !important;
  font-size: 52px !important;
  transform: translateY(-5px) !important;
}

html body #page #ho12-gt-user-balance-val#ho12-gt-user-balance-val#ho12-gt-user-balance-val {
  transform: translateY(-5px) !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-user-name {
  margin-top: 10px !important;
  color: #a3a3a3 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-tabs-icons {
  gap: 34px !important;
  max-width: 180px !important;
  margin: 0 auto 30px !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-icon-btn,
html body #page .ho12-gamtae-buy-wrapper .ho12-gt-icon-btn:is(:hover, :focus-visible) {
  position: relative !important;
  width: 52px !important;
  height: 52px !important;
  transform: none !important;
  transition: none !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-icon-btn > img {
  width: 52px !important;
  height: 52px !important;
  filter: none !important;
  opacity: .42 !important;
  transform: none !important;
  transition: filter .18s ease, opacity .18s ease !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-tabs-icons > .ho12-gt-icon-btn:is(:hover, :focus-visible, .active, [aria-pressed="true"]) > img {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-icon-btn::after {
  position: absolute !important;
  top: calc(100% + 5px) !important;
  left: 50% !important;
  width: max-content !important;
  color: #8d8d8d !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-icon-btn:first-child::after { content: '내역' !important; }
html body #page .ho12-gamtae-buy-wrapper .ho12-gt-icon-btn:nth-child(2)::after { content: '선물' !important; }
html body #page .ho12-gamtae-buy-wrapper .ho12-gt-icon-btn:is(:hover, :focus-visible)::after {
  opacity: 1 !important;
  visibility: visible !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-options-col {
  width: min(520px, 100%) !important;
  max-width: 520px !important;
  gap: 32px !important;
}

/* Match the amount-list rhythm to the login form: its field stack uses a
 * 32px desktop gap and a tighter 22px gap on compact screens. */
@media (max-width: 600px) {
  html body #page .ho12-gamtae-buy-wrapper .ho12-gt-options-col {
    gap: 22px !important;
  }
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-row,
html body #page .ho12-gamtae-buy-wrapper .ho12-gt-row:hover {
  width: 100% !important;
  height: 40px !important;
  transform: none !important;
  transition: none !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-row-left {
  gap: 6px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-row-left > span {
  color: #73cf18 !important;
  font-family: 'NanumJangmi', 'Rose', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  opacity: .42 !important;
  transform: none !important;
}

/* Applied PDF p.19 numeric scale: keep every Gamtae image unchanged and
 * enlarge only the Jangmi numerals on charge and gift states. */
html body #page #ho12-gt-user-balance-val#ho12-gt-user-balance-val {
  font-family: 'NanumJangmi', 'Rose', sans-serif !important;
  font-size: 52px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-row .ho12-gt-row-left > span {
  font-family: 'NanumJangmi', 'Rose', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

html body #page #ho12-gt-panel-gift .ho12-gift-page-wrapper .ho12-gift-amount-card .ho12-gift-card-amount {
  font-family: 'NanumJangmi', 'Rose', sans-serif !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: translateY(1px) !important;
}

html body #page #ho12-gt-panel-gift .ho12-gift-send-actions .ho12-gift-send-selected-amount,
html body #page #ho12-gt-panel-gift #ho12-gift-send-action-amount#ho12-gift-send-action-amount {
  font-family: 'NanumJangmi', 'Rose', sans-serif !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-row-left > img {
  width: 22px !important;
  height: 22px !important;
  filter: none !important;
  opacity: .42 !important;
  transform: none !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-line-wrap {
  margin: 0 12px !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-row-right {
  width: 112px !important;
  height: 34px !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-price-text {
  color: #cde1c8 !important;
  font-family: 'KoPubWorldDotum','KoPubWorld Dotum','KoPub Dotum',sans-serif !important;
  font-size: 14px !important;
  transform: none !important;
  transition: none !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-row:is(:hover, :focus-within) :is(.ho12-gt-price-text, .ho12-gt-row-left > span) {
  color: #73cf18 !important;
  opacity: 1 !important;
  transform: none !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-row:is(:hover, :focus-within) .ho12-gt-row-left > img {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-row:is(:hover, :focus-within) :is(.ho12-gt-wobbly-line-svg, .ho12-gt-wobbly-box-svg) path {
  stroke: #73cf18 !important;
}

/* Applied PDF pages 20-22 / items 43-3-50: narrow borderless payment flow. */
html body #page .ho12-gamtae-buy-wrapper #ho12-gt-step2-container {
  width: min(390px, 100%) !important;
  max-width: 390px !important;
  margin: 0 auto !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-step2-container .ho12-gt-back-to-step1 {
  display: none !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-step2-container .ho12-gt-section {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-step2-container .ho12-gt-section-title {
  margin: 0 0 22px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #73cf18 !important;
  font-family: 'KoPubWorldDotum','KoPubWorld Dotum','KoPub Dotum',sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-payment-methods {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 0 22px !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-payment-label {
  margin: 0 0 10px !important;
  color: #c3c3c3 !important;
  font-family: 'KoPubWorldDotum','KoPubWorld Dotum','KoPub Dotum',sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-payment-methods .ho12-gt-payment-method,
html body #page .ho12-gamtae-buy-wrapper #ho12-gt-payment-methods .ho12-gt-payment-method:is(:hover, :focus-visible) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #bdbdbd !important;
  box-shadow: none !important;
  font-family: 'KoPubWorldDotum','KoPubWorld Dotum','KoPub Dotum',sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 30px !important;
  text-align: left !important;
  transform: none !important;
  transition: color .16s ease !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-payment-methods .ho12-gt-payment-method.is-selected {
  color: #73cf18 !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-payment-methods .ho12-gt-payment-method > span:first-child {
  color: #bdbdbd !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-payment-methods .ho12-gt-payment-method.is-selected > span:first-child {
  color: #73cf18 !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-payment-methods .ho12-gt-payment-indicator {
  flex-basis: 16px !important;
  width: 16px !important;
  height: 16px !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gt-payment-guide {
  margin: 0 0 20px !important;
  color: #c8c8c8 !important;
  font-family: 'KoPubWorldDotum','KoPubWorld Dotum','KoPub Dotum',sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-step2-container .ho12-gt-agree-row {
  min-height: 27px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #bdbdbd !important;
  font-family: 'KoPubWorldDotum','KoPubWorld Dotum','KoPub Dotum',sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  transform: none !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-step2-container .ho12-gt-agree-row > span {
  color: inherit !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-step2-container input[type='checkbox'] {
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent url('https://12ho.com/wp-content/uploads/2026/06/%EC%9E%90%EC%82%B0-4%EC%B4%88%EB%A1%9D%EC%9D%B8%EC%A6%9D.png') center/contain no-repeat !important;
  filter: grayscale(1) !important;
  opacity: .28 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-step2-container input[type='checkbox']:checked {
  filter: none !important;
  opacity: 1 !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-step2-container #ho12-gt-pay-btn {
  gap: 4px !important;
  color: #bdbdbd !important;
  filter: grayscale(1) !important;
  opacity: .42 !important;
  transform: none !important;
  transition: color .16s ease, filter .16s ease, opacity .16s ease !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-step2-container #ho12-gt-pay-btn:is(:hover, :focus-visible),
html body #page .ho12-gamtae-buy-wrapper #ho12-gt-step2-container:has(.ho12-gt-payment-method.is-selected) #ho12-gt-pay-btn:has(~ *) {
  transform: none !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-step2-container #ho12-gt-pay-btn:is(:hover, :focus-visible) {
  color: #111 !important;
  filter: none !important;
  opacity: 1 !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-step2-container #ho12-gt-pay-btn:is(:hover, :focus-visible) .ho12-gamtae-amount-num {
  color: #73cf18 !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-step2-container #ho12-gt-pay-btn > * {
  color: inherit !important;
  font-family: 'KoPubWorldDotum','KoPubWorld Dotum','KoPub Dotum',sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  transform: none !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-step2-container #ho12-gt-pay-btn .ho12-gamtae-amount-num {
  font-family: 'NanumJangmi','Rose',sans-serif !important;
  font-size: 22px !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-step2-container #ho12-gt-pay-btn > img {
  width: 22px !important;
  height: 22px !important;
  transform: none !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-step2-container:has(.ho12-gt-payment-method.is-selected):has(#ho12-agree-terms:checked):has(#ho12-agree-privacy:checked) #ho12-gt-pay-btn {
  color: #111 !important;
  filter: none !important;
  opacity: 1 !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gt-step2-container:has(.ho12-gt-payment-method.is-selected):has(#ho12-agree-terms:checked):has(#ho12-agree-privacy:checked) #ho12-gt-pay-btn .ho12-gamtae-amount-num {
  color: #73cf18 !important;
}

@media (max-width: 520px) {
  html body #page .ho12-gamtae-buy-wrapper .ho12-gt-payment-guide {
    white-space: normal !important;
  }
}

/* Applied PDF pages 24-25 / items 52-63: quiet, evenly spaced history list. */
html body #page .ho12-gamtae-buy-wrapper #ho12-gt-panel-history {
  width: min(1000px, calc(100vw - 32px)) !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}

html body #page #ho12-gt-panel-history .ho12-history-table-wrap {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #page #ho12-gt-panel-history .ho12-history-table {
  width: 100% !important;
  min-width: 590px !important;
  table-layout: fixed !important;
  border: 0 !important;
  border-collapse: collapse !important;
  background: transparent !important;
  font-family: 'KoPubWorldDotum','KoPubWorld Dotum','KoPub Dotum',sans-serif !important;
}

html body #page #ho12-gt-panel-history .ho12-history-table tr,
html body #page #ho12-gt-panel-history .ho12-history-table tr:is(:hover, :focus-within) {
  height: 54px !important;
  border: 0 !important;
  background: transparent !important;
  transform: none !important;
  transition: none !important;
}

html body #page #ho12-gt-panel-history .ho12-history-table td {
  height: 54px !important;
  padding: 7px 5px !important;
  border: 0 !important;
  background: transparent !important;
  color: #9b9b9b !important;
  font-family: 'KoPubWorldDotum','KoPubWorld Dotum','KoPub Dotum',sans-serif !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
  vertical-align: middle !important;
}

html body #page #ho12-gt-panel-history .ho12-history-table td:nth-child(1) { width: 142px !important; }
html body #page #ho12-gt-panel-history .ho12-history-table td:nth-child(2) { width: 50px !important; }
html body #page #ho12-gt-panel-history .ho12-history-table td:nth-child(3) { width: 42px !important; }
html body #page #ho12-gt-panel-history .ho12-history-table td:nth-child(4) { width: 84px !important; }
html body #page #ho12-gt-panel-history .ho12-history-table td:nth-child(5) { width: 86px !important; }
html body #page #ho12-gt-panel-history .ho12-history-table td:nth-child(6) { width: 82px !important; }
html body #page #ho12-gt-panel-history .ho12-history-table td:nth-child(7) { width: 64px !important; }

html body #page #ho12-gt-panel-history .ho12-history-table td span {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

html body #page #ho12-gt-panel-history .ho12-history-table .ho12-history-gift-amount.ho12-history-gift-amount {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  color: #a8cfa2 !important;
  font-family: 'NanumJangmi','Rose',sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transform: none !important;
}

html body #page #ho12-gt-panel-history .ho12-history-gift-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  margin: 0 !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

html body #page #ho12-gt-panel-history :is(.ho12-gift-history-controls, .ho12-gt-receipt-control) {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  min-height: 36px !important;
}

html body #page #ho12-gt-panel-history :is(.ho12-gift-code-view-btn, .ho12-gift-cancel-btn, .ho12-gt-receipt-btn),
html body #page #ho12-gt-panel-history :is(.ho12-gift-code-view-btn, .ho12-gift-cancel-btn, .ho12-gt-receipt-btn):is(:hover, :focus-visible) {
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #9b9b9b !important;
  font-family: 'KoPubWorldDotum','KoPubWorld Dotum','KoPub Dotum',sans-serif !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  transform: none !important;
  transition: color .16s ease !important;
}

html body #page #ho12-gt-panel-history :is(.ho12-gift-code-view-btn, .ho12-gift-cancel-btn, .ho12-gt-receipt-btn):is(:hover, :focus-visible) {
  color: #111 !important;
}

html body #page #ho12-gt-panel-history .ho12-gift-history-controls {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  column-gap: 7px !important;
}

html body #page #ho12-gt-panel-history .ho12-gift-inline-code {
  flex-basis: 100% !important;
  width: max-content !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #777 !important;
  font-family: 'KoPubWorldDotum','KoPubWorld Dotum','KoPub Dotum',sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  transform: none !important;
}

html body #page #ho12-gt-panel-history .ho12-gift-inline-code[hidden],
html body #page #ho12-gt-panel-history .ho12-gt-receipt-menu[hidden] {
  display: none !important;
}

html body #page #ho12-gt-panel-history .ho12-gt-receipt-menu {
  position: absolute !important;
  z-index: 30 !important;
  top: calc(50% + 7px) !important;
  right: 0 !important;
  min-width: 78px !important;
  padding: 4px 6px !important;
  border: 1px solid #dedede !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.06) !important;
}

html body #page #ho12-gt-panel-history .ho12-gt-receipt-menu button,
html body #page #ho12-gt-panel-history .ho12-gt-receipt-menu button:is(:hover, :focus-visible) {
  display: block !important;
  width: 100% !important;
  padding: 3px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #9b9b9b !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  text-align: left !important;
  transform: none !important;
}

html body #page #ho12-gt-panel-history .ho12-gt-receipt-menu button:is(:hover, :focus-visible) {
  color: #111 !important;
}

html body #page #ho12-gt-panel-history .ho12-history-receipt-actions {
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #page #ho12-gt-panel-history .ho12-history-receipt-actions button:is(:hover, :focus-visible) {
  color: #111 !important;
}

/* An unavailable card receipt must remain visually inactive on hover/focus. */
html body #page #ho12-gt-panel-history .ho12-history-receipt-actions #ho12-gt-receipt-card:disabled,
html body #page #ho12-gt-panel-history .ho12-history-receipt-actions #ho12-gt-receipt-card:disabled:hover,
html body #page #ho12-gt-panel-history .ho12-history-receipt-actions #ho12-gt-receipt-card:disabled:focus,
html body #page #ho12-gt-panel-history .ho12-history-receipt-actions #ho12-gt-receipt-card:disabled:focus-visible {
  color: #8f8f8f !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: .35 !important;
  cursor: default !important;
  transform: none !important;
}

html body #page #ho12-gt-panel-history .ho12-pagination {
  gap: 10px !important;
  margin: 36px auto 12px !important;
}

html body #page #ho12-gt-panel-history .ho12-pagination a,
html body #page #ho12-gt-panel-history .ho12-pagination a:is(:hover, :focus-visible) {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #bdbdbd !important;
  box-shadow: none !important;
  font-family: 'KoPubWorldDotum','KoPubWorld Dotum','KoPub Dotum',sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  transform: none !important;
}

/* 감태 내역: 날짜 줄을 기준선으로 삼고 수량은 초록색 숫자 역할로 강조한다. */
html body #page #ho12-gt-panel-history .ho12-gt-history-table td {
  vertical-align: bottom !important;
}

html body #page #ho12-gt-panel-history .ho12-gt-history-table td.ho12-gamtae-amount-num,
html body #page #ho12-gt-panel-history .ho12-gt-history-table td.ho12-gamtae-amount-num .ho12-history-gift-amount,
html body #page #ho12-gt-panel-history .ho12-gt-history-table td.ho12-gamtae-amount-num .ho12-history-gift-amount > span {
  color: #73cf18 !important;
  font-family: 'NanumJangmi','Rose',sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}

html body #page #ho12-gt-panel-history .ho12-gt-history-table td.ho12-gamtae-amount-num .ho12-history-gift-amount {
  position: relative !important;
  top: 8px !important;
}

/* Copyable gift values stay quiet at rest and turn black on hover/focus.
 * Native title tooltips are intentionally omitted from their markup. */
html body #page #ho12-gt-panel-history #ho12-gift-history-code-value:is(:hover, :focus-visible),
html body #page .ho12-gamtae-buy-wrapper #ho12-gift-code-copy-btn-inline:is(:hover, :focus-visible),
html body #ho12-gift-send-overlay #ho12-gift-send-modal-code:is(:hover, :focus-visible),
html body #ho12-gift-send-overlay .ho12-gift-guide-image-copy:is(:hover, :focus-visible) {
  color: #111 !important;
}

html body #page #ho12-gt-panel-history .ho12-pagination a[aria-current='page'] {
  color: #111 !important;
}

@media (max-width: 640px) {
  html body #page #ho12-gt-panel-history .ho12-history-table {
    min-width: 590px !important;
  }
}

/* Applied PDF pages 26-31 / items 64-72: gift send/receive states. */
html body #page .ho12-gamtae-buy-wrapper .ho12-gift-page-wrapper {
  width: min(500px, 100%) !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gift-tabs {
  justify-content: flex-start !important;
  width: 100% !important;
  gap: 46px !important;
  margin: 0 auto 40px !important;
  padding: 0 !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gift-tab-btn,
html body #page .ho12-gamtae-buy-wrapper .ho12-gift-tab-btn:is(:hover, :focus-visible) {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gift-tab-btn > img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: .42 !important;
  transform: none !important;
  transition: filter .16s ease, opacity .16s ease !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gift-tab-btn:is(.active, :hover, :focus-visible) > img {
  filter: none !important;
  opacity: 1 !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gift-tab-btn::after {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 50% !important;
  color: #9b9b9b !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-50%) !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gift-tab-btn[data-tab='send']::after { content: '주기' !important; }
html body #page .ho12-gamtae-buy-wrapper .ho12-gift-tab-btn[data-tab='receive']::after { content: '받기' !important; }
html body #page .ho12-gamtae-buy-wrapper .ho12-gift-tab-btn:is(:hover, :focus-visible)::after {
  opacity: 1 !important;
  visibility: visible !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gift-panel-send > .ho12-gift-field-group:first-child {
  display: none !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gift-instructions {
  width: 100% !important;
  margin: 0 0 40px !important;
  color: #b0b0b0 !important;
  font-family: 'KoPubWorldDotum','KoPubWorld Dotum','KoPub Dotum',sans-serif !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gift-instructions img {
  width: 14px !important;
  height: 14px !important;
  object-fit: contain !important;
  transform: none !important;
}

/* Every two-action popup shares the My Info confirmation spacing. */
html body :is(
  .ho12-system-dialog__actions,
  .ho12-device-remove-confirm-actions,
  #ho12-confirm-modal .ho12-confirm-actions,
  .ho12-lib-confirm-buttons
):has(> *:nth-child(2)) {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 88px !important;
  width: auto !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gift-amount-grid {
  display: flex !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 0 40px !important;
  gap: 16px !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gift-amount-card,
html body #page .ho12-gamtae-buy-wrapper .ho12-gift-amount-card:is(:hover, :focus-within) {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-height: 20px !important;
  padding: 0 !important;
  gap: 3px !important;
  border: 0 !important;
  background: transparent !important;
  color: #a8cfa2 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: .42 !important;
  transform: none !important;
  transition: filter .16s ease, opacity .16s ease !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gift-amount-card:is(.active, :hover, :focus-within) {
  filter: none !important;
  opacity: 1 !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gift-amount-card .ho12-gift-card-amount {
  color: #73cf18 !important;
  font-family: 'NanumJangmi','Rose',sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  transform: none !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gift-amount-card > img {
  width: 19px !important;
  height: 19px !important;
  object-fit: contain !important;
  transform: none !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gift-send-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-height: 50px !important;
  margin: 0 auto !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gift-send-actions:is(:hover, :focus-within) {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gift-send-actions::before {
  content: none !important;
  display: none !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gift-send-selected-amount {
  color: #73cf18 !important;
  font-family: 'NanumJangmi','Rose',sans-serif !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gift-send-action-amount {
  color: #73cf18 !important;
  font-family: 'NanumJangmi','Rose',sans-serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: none !important;
}

html body #page #ho12-gift-send-action-amount#ho12-gift-send-action-amount#ho12-gift-send-action-amount {
  transform: none !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gift-send-action-btn,
html body #page .ho12-gamtae-buy-wrapper #ho12-gift-send-action-btn:is(:hover, :focus-visible) {
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gift-send-action-btn > img {
  width: 46px !important;
  height: 46px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

html body #page .ho12-gamtae-buy-wrapper .ho12-gift-payment-question {
  display: block !important;
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 32px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
  transform: translateY(5px) !important;
}

html body #ho12-gift-send-overlay .ho12-gift-success-card {
  position: relative !important;
  z-index: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: min(380px, calc(100vw - 32px)) !important;
  max-width: 380px !important;
  min-height: 540px !important;
  max-height: calc(100dvh - 32px) !important;
  margin: 0 auto !important;
  padding: 38px 34px 28px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #ho12-gift-send-overlay,
html body #ho12-gift-claim-gif-overlay {
  background: #fff !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

html body :is(#ho12-gift-send-overlay, #ho12-gift-claim-gif-overlay) .ho12-completion-gif {
  display: block !important;
  width: 148px !important;
  max-width: 148px !important;
  height: 148px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  transform: none !important;
  transition: none !important;
}

html body #ho12-gift-send-overlay .ho12-gift-success-card > svg {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  overflow: visible !important;
}

html body #ho12-gift-send-overlay .ho12-gift-success-card > svg path {
  fill: #fff !important;
  stroke: #8bc34a !important;
  stroke-width: 2.25px !important;
}

html body #ho12-gift-send-overlay .ho12-gift-send-close-btn {
  top: 14px !important;
  right: 16px !important;
  width: 22px !important;
  height: 22px !important;
  opacity: .38 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

html body #ho12-gift-send-overlay .ho12-gift-send-completion-gif {
  flex: 0 0 auto !important;
  margin: 2px auto 22px !important;
}

html body #ho12-gift-send-overlay .ho12-gift-guide-code {
  display: block !important;
  width: 100% !important;
  margin: 0 auto 24px !important;
  color: #73cf18 !important;
  font-family: 'KoPubWorldDotum','KoPubWorld Dotum','KoPub Dotum',sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  text-decoration: none !important;
  transform: none !important;
}

html body #ho12-gift-send-overlay .ho12-gift-guide-amount {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 auto 42px !important;
  color: #73cf18 !important;
  font-family: 'NanumJangmi','Rose',sans-serif !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: none !important;
}

html body #ho12-gift-send-overlay .ho12-gift-guide-amount img {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

html body #ho12-gift-send-overlay .ho12-gift-guide-copy {
  width: 100% !important;
  max-width: 292px !important;
  margin: 0 auto !important;
  color: #b0b0b0 !important;
  font-family: 'KoPubWorldDotum','KoPubWorld Dotum','KoPub Dotum',sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

html body #ho12-gift-send-overlay .ho12-gift-guide-copy > div {
  display: block !important;
  margin: 0 !important;
  white-space: normal !important;
}

html body #ho12-gift-send-overlay .ho12-gift-guide-image-copy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 24px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #73cf18 !important;
  font-family: 'KoPubWorldDotum','KoPubWorld Dotum','KoPub Dotum',sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  text-decoration: underline !important;
  cursor: copy !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

html body #ho12-gift-send-overlay .ho12-gift-guide-image-copy:is(:hover,:focus-visible) {
  color: #73cf18 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

html body #ho12-gift-send-overlay .ho12-gift-guide-copy-status {
  display: block !important;
  min-height: 16px !important;
  margin: 5px auto 0 !important;
  color: #73cf18 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gift-panel-receive {
  position: relative !important;
  width: min(390px, 100%) !important;
  margin: 0 auto !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gift-panel-receive .ho12-gift-field-group {
  position: relative !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gift-panel-receive .ho12-gift-field-group > label {
  position: absolute !important;
  z-index: 4 !important;
  top: 5px !important;
  right: 42px !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  pointer-events: none !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gift-panel-receive .ho12-gift-field-group > label .ho12-required-question-icon {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  pointer-events: auto !important;
  transform: none !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gift-panel-receive .ho12-gift-field-group > div {
  width: 100% !important;
  max-width: none !important;
  gap: 10px !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gift-panel-receive #ho12-gift-receive-code {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #d8d8d8 !important;
  background: transparent !important;
  color: #73cf18 !important;
  box-shadow: none !important;
  font-family: 'KoPubWorldDotum','KoPubWorld Dotum','KoPub Dotum',sans-serif !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 28px !important;
  transform: none !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gift-panel-receive #ho12-gift-receive-code::placeholder {
  color: #bdbdbd !important;
  opacity: 1 !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gift-panel-receive #ho12-gift-claim-confirm-btn,
html body #page .ho12-gamtae-buy-wrapper #ho12-gift-panel-receive #ho12-gift-claim-confirm-btn:is(:hover, :focus-visible) {
  width: 34px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gift-panel-receive #ho12-gift-claim-confirm-btn > img {
  width: 34px !important;
  height: 28px !important;
  object-fit: contain !important;
  transform: none !important;
}

html body #page .ho12-gamtae-buy-wrapper #ho12-gift-panel-receive .ho12-gift-field-group + div {
  margin-top: 12px !important;
  color: #bdbdbd !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.5 !important;
}

@media (max-width: 560px) {
  html body #page .ho12-gamtae-buy-wrapper .ho12-gift-amount-grid {
    gap: 8px !important;
  }
}

/* PDF p32-34 — My library proportions and delete flow. */
html body.page-id-16 #page .ho12-library {
  width: 740px !important;
  max-width: 740px !important;
  margin: 28px auto 80px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.page-id-16 #page .ho12-lib-filter {
  gap: 24px !important;
  margin-bottom: 28px !important;
}

html body.page-id-16 #page .ho12-lib-filter .ho12-filt,
html body.page-id-16 #page .ho12-lib-filter .ho12-filt:is(:hover, :focus-visible) {
  position: relative !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.page-id-16 #page .ho12-lib-filter .ho12-filt-icon-wrapper,
html body.page-id-16 #page .ho12-lib-filter .ho12-filt-icon-img {
  width: 36px !important;
  height: 24px !important;
  max-width: 36px !important;
  max-height: 24px !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: none !important;
}

html body.page-id-16 #page .ho12-lib-filter .ho12-filt[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  bottom: auto;
  z-index: 30;
  width: max-content;
  max-width: 112px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #aaaaaa;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
  transform: translateX(-50%) !important;
  transition: none !important;
}

html body.page-id-16 #page .ho12-lib-filter .ho12-filt[data-tooltip]:is(:hover, :focus-visible, .active)::after {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (min-width: 761px) {
  html body.page-id-16 #page #ho12-lib-grid {
    grid-template-columns: repeat(5, 106px) !important;
    justify-content: center !important;
    justify-items: center !important;
    column-gap: 20px !important;
    row-gap: 20px !important;
  }

  html body.page-id-16 #page #ho12-lib-grid .ho12-lib-item {
    width: 106px !important;
    max-width: 106px !important;
    height: auto !important;
    aspect-ratio: 272 / 340 !important;
    margin: 0 !important;
  }
}

html body.page-id-16 #page .ho12-lib-item,
html body.page-id-16 #page .ho12-lib-item:is(:hover, :focus-within) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.page-id-16 #page .ho12-lib-item .ho12-card-border-stroke {
  stroke: #b7b7b7 !important;
  stroke-width: 2.25px !important;
}

html body.page-id-16 #page .ho12-lib-item:is(:hover, :focus-within) .ho12-card-border-stroke {
  stroke: #111 !important;
}

html body.page-id-16 #page .ho12-lib-item-delete-btn,
html body.page-id-16 #page .ho12-lib-item-delete-btn img {
  transform: none !important;
}

html body.page-id-16 #page .ho12-lib-item-delete-btn {
  top: -7px !important;
  right: -7px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.page-id-16 #page .ho12-lib-item-delete-btn img {
  filter: none !important;
  opacity: 1 !important;
}

html body.page-id-16 #page .ho12-lib-item-delete-btn:is(:hover, :focus-visible) img {
  filter: none !important;
  opacity: 1 !important;
}

html body.page-id-16 .ho12-lib-confirm-overlay {
  background: transparent !important;
}

html body.page-id-16 .ho12-lib-confirm-box,
html body.page-id-16 .ho12-lib-confirm-box *:is(:hover, :focus-visible) {
  transform: none !important;
}

@media (max-width: 760px) {
  html body.page-id-16 #page .ho12-library {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  html body.page-id-16 #page .ho12-lib-filter {
    gap: 14px !important;
  }

  html body.page-id-16 #page #ho12-lib-grid {
    grid-template-columns: repeat(2, minmax(0, 106px)) !important;
    justify-content: center !important;
    gap: 18px !important;
  }

  html body.page-id-16 #page #ho12-lib-grid .ho12-lib-item {
    width: 106px !important;
    max-width: 106px !important;
    aspect-ratio: 272 / 340 !important;
  }
}

/* PDF p36-37 — work title frame and episode purchase affordances. */
html body.single-ho12_work #page .ho12-sw-title-frame {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

html body.single-ho12_work #page .ho12-sw-title-frame .ho12-sw-title-frame-bg {
  opacity: .58 !important;
  filter: grayscale(1) contrast(.72) brightness(1.16) !important;
  transform: none !important;
}

html body.single-ho12_work #page #ho12-bulk-purchase-btn,
html body.single-ho12_work #page #ho12-bulk-purchase-btn:not([data-total-locked="0"]) {
  width: auto !important;
  height: 38px !important;
  filter: grayscale(1) opacity(.34) !important;
  opacity: 1 !important;
  transform: none !important;
}

html body.single-ho12_work #page #ho12-bulk-purchase-btn:is(:hover, :focus-visible) {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

html body.single-ho12_work #page .ho12-bulk-tooltip {
  min-width: 190px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #aaa !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  transform: translateX(-50%) !important;
}

html body.single-ho12_work #page .ho12-planet,
html body.single-ho12_work #page .ho12-planet-inner,
html body.single-ho12_work #page .ho12-planet:is(:hover, :focus-visible),
html body.single-ho12_work #page .ho12-planet-inner:is(:hover, :focus-visible) {
  transform: none !important;
}

html body.single-ho12_work #ho12-pdf17-bulk-confirm {
  background: transparent !important;
}

/* PDF p35 — work-list cards are shorter than the home/library covers. */
html body:is(.page-id-13, .page-id-14) #page .ho12-work-card,
html body:is(.page-id-13, .page-id-14) #page .ho12-work-card:is(:hover, :focus-within) {
  width: 192px !important;
  max-width: 192px !important;
  height: 216px !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body:is(.page-id-13, .page-id-14) #page .ho12-work-card .ho12-card-border-stroke {
  stroke: #b7b7b7 !important;
  stroke-width: 2.25px !important;
}

html body:is(.page-id-13, .page-id-14) #page .ho12-work-card h3 {
  color: #777 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html body:is(.page-id-13, .page-id-14) #page .ho12-work-card:is(:hover, :focus-within) .ho12-card-border-stroke {
  stroke: #111 !important;
}

html body:is(.page-id-13, .page-id-14) #page .ho12-work-card:is(:hover, :focus-within) h3 {
  color: #111 !important;
}

@media (max-width: 760px) {
  html body:is(.page-id-13, .page-id-14) #page .ho12-work-card,
  html body:is(.page-id-13, .page-id-14) #page .ho12-work-card:is(:hover, :focus-within) {
    width: 144px !important;
    max-width: 144px !important;
    height: 162px !important;
  }
}

/* Applied PDF pp.41-43 / original p.30: final episode-viewer proportions. */
@media (min-width: 601px) {
  html body.single-ho12_episode #vr-bottombar.vr-bottombar {
    width: min(950px, calc(100vw - 48px)) !important;
    max-width: 950px !important;
  }

  html body.single-ho12_episode #vr-settings.vr-settings {
    width: 215px !important;
    height: 200px !important;
    padding: 18px !important;
    /* Original PDF p.30: the settings box shares the toolbar's right edge. */
    right: max(24px, calc((100vw - 950px) / 2)) !important;
  }

  html body.single-ho12_episode #vr-settings .vr-set-row {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 5px !important;
  }

  html body.single-ho12_episode #vr-settings .vr-set-label {
    width: 39px !important;
    height: 34px !important;
  }

  html body.single-ho12_episode #vr-settings .vr-set-label-img {
    max-width: 39px !important;
    max-height: 32px !important;
  }

  html body.single-ho12_episode #vr-settings .vr-set-btn {
    width: 28px !important;
    height: 28px !important;
  }

  html body.single-ho12_episode #vr-settings .vr-set-btn :is(img, svg) {
    width: 17px !important;
    height: 17px !important;
  }

  html body.single-ho12_episode #vr-settings .vr-set-val {
    min-width: 33px !important;
    font-size: 19px !important;
  }

  html body.single-ho12_episode #vr-settings .vr-theme-btn {
    width: 22px !important;
    height: 22px !important;
  }

  html body.single-ho12_episode :is(.ho12-tooltip.ho12-tt-next-lock,.ho12-tooltip.ho12-tt-prev-lock),
  html body.single-ho12_episode :is(.ho12-tooltip.ho12-tt-next-lock,.ho12-tooltip.ho12-tt-prev-lock) .ho12-pdf17-spray-img {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }
}

html body.single-ho12_episode #vr-bottombar :is(a,button,[role="button"],img,svg):is(:hover,:focus-visible),
html body.single-ho12_episode #vr-settings :is(button,[role="button"],img,svg):is(:hover,:focus-visible) {
  transform: none !important;
}

/* Applied PDF p.44 / item 87: a still "잠잠" webtoon panel occupies the
   same strip width and center line as the animated webtoon panels. */
html body.single-ho12_episode #vr-content.vr-content.webtoon img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  transform: none !important;
}

/* Applied PDF pp.45-46 / original p.32: art-goods submenu and cards. */
html body.page-id-15 #page #ho12-goods-category-accordion,
html body.page-id-15 #page #ho12-goods-category-accordion .ho12-goods-acc-links {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.page-id-15 #page #ho12-goods-category-accordion .ho12-goods-acc-links {
  padding: 8px 0 !important;
}

html body.page-id-15 #page .ho12-goods-acc-link {
  color: #aaa !important;
  text-decoration: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.page-id-15 #page .ho12-goods-acc-link::after {
  content: none !important;
  display: none !important;
}

html body.page-id-15 #page .ho12-goods-acc-link:is(:hover,:focus-visible,.active) {
  color: #111 !important;
  transform: none !important;
}

html body.page-id-15 #page :is(
  .ho12-goods-dots-placeholder,
  .ho12-goods-const-placeholder,
  .ho12-goods-card,
  .ho12-goods-card img,
  .ho12-cart-tab-btn
):is(:hover,:focus-visible) {
  transform: none !important;
}

/* PDF 88: the two art-goods controls are inactive by default and active only
   while the pointer or keyboard focus is on that control. A stale `.active`
   class must not leave either icon coloured after the interaction ends. */
html body.page-id-15 #page :is(
  .ho12-goods-dots-placeholder,
  .ho12-goods-const-placeholder
) .ho12-goods-tab-img {
  filter: grayscale(1) opacity(.4) !important;
  opacity: 1 !important;
  transition: none !important;
  transform: none !important;
}

html body.page-id-15 #page :is(
  .ho12-goods-dots-placeholder,
  .ho12-goods-const-placeholder
):is(:hover,:focus-visible) .ho12-goods-tab-img {
  filter: none !important;
  opacity: 1 !important;
}

/* Applied PDF pp.47-49 / original pp.33-34: compact product-detail scale. */
@media (min-width: 769px) {
  html body.single-product #page .ho12-product-page-wrapper {
    width: 600px !important;
    max-width: 600px !important;
    margin: 0 auto 44px !important;
    padding: 0 !important;
  }

  html body.single-product #page .ho12-goods-detail-nav {
    width: 600px !important;
    max-width: 600px !important;
    margin: 0 auto 24px !important;
  }

  html body.single-product #page .ho12-pd-wrap {
    display: flex !important;
    width: 600px !important;
    max-width: 600px !important;
    min-height: 0 !important;
    margin: 0 auto 28px !important;
    padding: 0 !important;
    gap: 32px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  html body.single-product #page .ho12-pd-left-panel {
    width: 240px !important;
    flex: 0 0 240px !important;
    gap: 16px !important;
  }

  html body.single-product #page .ho12-pd-right-panel {
    width: 328px !important;
    flex: 0 0 328px !important;
    gap: 14px !important;
  }

  html body.single-product #page .ho12-pd-main-wrap {
    width: 240px !important;
    height: 240px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 12px !important;
  }

  html body.single-product #page .ho12-pd-thumbs-horizontal-container {
    width: 240px !important;
    gap: 5px !important;
  }

  html body.single-product #page .ho12-pd-thumbs-scroll-btn {
    width: 16px !important;
    height: 22px !important;
    transform: none !important;
  }

  html body.single-product #page .ho12-pd-thumb-item {
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    transform: none !important;
  }

  html body.single-product #page .ho12-simple-options-container,
  html body.single-product #page .ho12-selected-option-summary,
  html body.single-product #page .ho12-pd-action-buttons {
    width: 328px !important;
    max-width: 328px !important;
  }

  html body.single-product #page .ho12-pd-action-buttons {
    gap: 10px !important;
    margin-top: 20px !important;
  }

  html body.single-product #page :is(.ho12-action-cart-custom-img,.ho12-action-buy-custom-img) {
    max-height: 42px !important;
    width: auto !important;
    object-fit: contain !important;
    transform: none !important;
  }
}

html body.single-product #page .ho12-goods-detail-category-panel {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.single-product #page .ho12-goods-detail-category-panel a {
  color: #aaa !important;
  transform: none !important;
}

html body.single-product #page .ho12-goods-detail-category-panel a:is(:hover,:focus-visible) {
  color: #111 !important;
}

html body.single-product #page .ho12-pd-description {
  display: none !important;
}

html body.single-product #page .ho12-selected-option-summary,
html body.single-product #page .ho12-selected-option-summary::before,
html body.single-product #page .ho12-selected-option-summary::after {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.single-product #page .ho12-summary-border-svg {
  display: none !important;
}

html body.single-product #page :is(.ho12-summary-total-price,.ho12-summary-total-price-label,.ho12-summary-total-qty-text) {
  color: #999 !important;
}

html body.single-product #page .ho12-pd-related-section {
  width: 600px !important;
  max-width: 600px !important;
  min-height: 0 !important;
  margin: 20px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.single-product #page .ho12-pd-related-section :is(h2,.woocommerce-loop-product__title) {
  display: none !important;
}

html body.single-product #page .ho12-pd-related-section ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, 54px) !important;
  justify-content: center !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.single-product #page .ho12-pd-related-section ul.products li.product,
html body.single-product #page .ho12-pd-related-section ul.products li.product:nth-child(n) {
  width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 5px !important;
  transform: none !important;
}

html body.single-product #page .ho12-pd-related-section ul.products li.product img {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  transform: none !important;
}

html body.single-product #page :is(
  .ho12-goods-detail-link,
  .ho12-pd-thumbs-scroll-btn,
  .ho12-pd-thumb-item,
  .ho12-action-item-cart,
  .ho12-action-item-buy,
  .ho12-pd-related-section li.product
):is(:hover,:focus-visible) {
  transform: none !important;
}

/* Applied PDF pp.50-52 / original pp.35-36: compact checkout at left and
 * an in-page address manager in the reserved right column. */
html body.woocommerce-checkout.ho12-checkout-goods :is(
  .ho12-checkout-wrapper,
  .ho12-checkout-content,
  .ho12-checkout-shipping-card,
  .ho12-checkout-cart-item,
  .ho12-checkout-summary-box,
  #ho12-address-modal,
  #ho12-address-modal > div
) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body.woocommerce-checkout.ho12-checkout-goods :is(
  .ho12-checkout-shipping-card,
  .ho12-checkout-cart-item,
  .ho12-checkout-summary-box
) {
  background: transparent !important;
}

@media (min-width: 980px) {
  html body.woocommerce-checkout.ho12-checkout-goods .ho12-checkout-wrapper {
    position: relative !important;
    width: 760px !important;
    max-width: 760px !important;
    margin: -74px auto 80px !important;
    padding: 0 !important;
  }

  html body.woocommerce-checkout.ho12-checkout-goods form.checkout {
    width: 760px !important;
    max-width: 760px !important;
  }

  html body.woocommerce-checkout.ho12-checkout-goods .ho12-checkout-content {
    width: 360px !important;
    max-width: 360px !important;
    margin: 0 auto 0 0 !important;
    gap: 18px !important;
  }

  html body.woocommerce-checkout.ho12-checkout-goods .ho12-checkout-content > div,
  html body.woocommerce-checkout.ho12-checkout-goods .ho12-checkout-shipping-card,
  html body.woocommerce-checkout.ho12-checkout-goods .ho12-checkout-cart-item,
  html body.woocommerce-checkout.ho12-checkout-goods .ho12-checkout-field {
    width: 360px !important;
    max-width: 360px !important;
  }

  html body.woocommerce-checkout.ho12-checkout-goods .ho12-checkout-address-row {
    width: 260px !important;
    max-width: 260px !important;
    margin-left: 100px !important;
  }

  html body.woocommerce-checkout.ho12-checkout-goods .ho12-checkout-summary-box {
    width: 320px !important;
    max-width: 320px !important;
    margin-inline: auto !important;
    padding: 0 !important;
  }

  html body.woocommerce-checkout.ho12-checkout-goods #ho12-address-modal {
    position: absolute !important;
    inset: 0 auto auto 400px !important;
    width: 300px !important;
    max-width: 300px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    background: transparent !important;
    z-index: 30 !important;
  }

  html body.woocommerce-checkout.ho12-checkout-goods #ho12-address-modal > div {
    width: 300px !important;
    max-width: 300px !important;
    max-height: 470px !important;
    padding: 8px 12px !important;
    overflow-y: auto !important;
    background: rgba(255,255,255,.98) !important;
  }
}

html body.woocommerce-checkout.ho12-checkout-goods #ho12-address-modal h3 {
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

html body.woocommerce-checkout.ho12-checkout-goods #ho12-address-modal :is(p,label) {
  margin-block: 0 5px !important;
  padding: 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

html body.woocommerce-checkout.ho12-checkout-goods #ho12-address-list-container {
  margin-bottom: 9px !important;
}

html body.woocommerce-checkout.ho12-checkout-goods #ho12-saved-addresses-list {
  gap: 6px !important;
  max-height: 92px !important;
}

html body.woocommerce-checkout.ho12-checkout-goods #ho12-address-modal > div > div:last-of-type {
  padding-top: 8px !important;
}

html body.woocommerce-checkout.ho12-checkout-goods #ho12-address-modal > div > div:last-of-type > div {
  gap: 6px !important;
}

html body.woocommerce-checkout.ho12-checkout-goods #ho12-address-modal :is(input,button) {
  min-height: 0 !important;
  height: 28px !important;
  padding: 0 5px !important;
  font-size: 11px !important;
  line-height: 28px !important;
  transform: none !important;
}

html body.woocommerce-checkout.ho12-checkout-goods #ho12-address-modal-close {
  top: 5px !important;
  right: 5px !important;
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  padding: 0 !important;
  color: #f4b400 !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

html body .ho12-postcode-embed__panel {
  width: min(420px, calc(100vw - 32px)) !important;
  height: min(500px, calc(100vh - 56px)) !important;
}

html body :is(.ho12-postcode-embed__close,#ho12-address-modal button):is(:hover,:focus-visible) {
  transform: none !important;
}

@media (max-width: 979px) {
  html body.woocommerce-checkout.ho12-checkout-goods #ho12-address-modal {
    position: fixed !important;
    inset: 50% auto auto 50% !important;
    width: min(300px, calc(100vw - 28px)) !important;
    height: auto !important;
    transform: translate(-50%,-50%) !important;
    padding: 0 !important;
  }

  html body.woocommerce-checkout.ho12-checkout-goods #ho12-address-modal > div {
    width: 100% !important;
    max-width: 300px !important;
    max-height: min(470px, calc(100vh - 36px)) !important;
    padding: 8px 12px !important;
    overflow-y: auto !important;
  }
}

/* Applied PDF pp.53-56 / original p.34: compact basket, image-backed
 * selection marks, stable quantity controls and in-page feedback. */
html body.page-id-15 #page .ho12-cart-content-wrapper {
  width: min(600px, calc(100% - 28px)) !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

html body.page-id-15 #page .ho12-cart-page-wrapper {
  width: 600px !important;
  max-width: 100% !important;
  margin: 24px auto 52px !important;
  padding: 0 !important;
}

html body.page-id-15 #page .ho12-cart-tabs-row {
  width: 600px !important;
  max-width: 100% !important;
  justify-content: flex-start !important;
  gap: 22px !important;
  margin: 0 0 24px !important;
  padding: 0 0 8px !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn,
html body.page-id-15 #page .ho12-cart-tab-btn:is(:hover,:focus-visible) {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  transform: none !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn::after {
  color: #aaa !important;
  font-size: 11px !important;
}

html body.page-id-15 #page :is(.ho12-cart-panel,.ho12-cart-list,.ho12-cart-item-row) {
  width: 600px !important;
  max-width: 100% !important;
}

html body.page-id-15 #page .ho12-cart-item-row {
  min-height: 66px !important;
  padding: 5px 8px !important;
  gap: 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.page-id-15 #page .ho12-cart-item-thumb {
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
  overflow: visible !important;
}

html body.page-id-15 #page .ho12-cart-item-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

html body.page-id-15 #page :is(.ho12-cart-item-checkbox,#ho12-cart-select-all) {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url('https://12ho.com/wp-content/uploads/2026/06/%EC%9E%90%EC%82%B0-3%EB%85%B8%EB%9E%91%EC%9D%B8%EC%A6%9D.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  filter: grayscale(1) !important;
  opacity: .28 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.page-id-15 #page :is(.ho12-cart-item-checkbox,#ho12-cart-select-all):checked {
  border: 0 !important;
  background-color: transparent !important;
  background-image: url('https://12ho.com/wp-content/uploads/2026/06/%EC%9E%90%EC%82%B0-3%EB%85%B8%EB%9E%91%EC%9D%B8%EC%A6%9D.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  filter: none !important;
  opacity: 1 !important;
}

html body.page-id-15 #page .ho12-summary-qty-controls,
html body.page-id-15 #page .ho12-summary-qty-controls[aria-busy='true'] {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html body.page-id-15 #page :is(.ho12-cart-qty-btn-dec,.ho12-cart-qty-btn-inc) {
  position: relative !important;
  color: #aaa !important;
  background: transparent !important;
  transform: none !important;
}

html body.page-id-15 #page :is(.ho12-cart-qty-btn-dec,.ho12-cart-qty-btn-inc):is(:hover,:focus-visible) {
  color: #111 !important;
  background: transparent !important;
  transform: none !important;
}

html body.page-id-15 #page :is(.ho12-cart-qty-btn-dec,.ho12-cart-qty-btn-inc)::after {
  content: attr(data-ho12-tooltip) !important;
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 6px) !important;
  width: max-content !important;
  color: #aaa !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
}

html body.page-id-15 #page :is(.ho12-cart-qty-btn-dec,.ho12-cart-qty-btn-inc):is(:hover,:focus-visible)::after {
  opacity: 1 !important;
  visibility: visible !important;
}

html body.page-id-15 #page #ho12-cart-delete-selected {
  color: #aaa !important;
  background: transparent !important;
  transform: none !important;
}

html body.page-id-15 #page #ho12-cart-delete-selected:is(:hover,:focus-visible) {
  color: #111 !important;
  background: transparent !important;
  transform: none !important;
}

html body.page-id-15 #page .ho12-cart-summary-box {
  width: 240px !important;
  max-width: 240px !important;
  padding: 0 !important;
  gap: 10px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.page-id-15 #page #ho12-cart-checkout-btn,
html body.page-id-15 #page #ho12-cart-checkout-btn:is(:hover,:focus-visible) {
  transform: none !important;
}

html body.page-id-15 #page .ho12-cart-empty-state {
  padding: 28px 0 !important;
}

html body.page-id-15 #page .ho12-cart-empty-image {
  width: min(450px, 100%) !important;
  max-width: 450px !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 680px) {
  html body.page-id-15 #page .ho12-cart-content-wrapper,
  html body.page-id-15 #page .ho12-cart-page-wrapper,
  html body.page-id-15 #page :is(.ho12-cart-tabs-row,.ho12-cart-panel,.ho12-cart-list,.ho12-cart-item-row) {
    width: calc(100vw - 28px) !important;
  }

  html body.page-id-15 #page .ho12-cart-item-row {
    gap: 8px !important;
  }

  html body.page-id-15 #page .ho12-cart-item-thumb {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }
}

/* Applied PDF pp.64-66 / original pp.2-3,23: compact footer, policy
 * wordmarks and the intentionally quiet book-terms placeholder. */
html body footer.ho12-footer {
  padding: 18px 16px !important;
  font-size: 10.5px !important;
  line-height: 1.55 !important;
}

html body footer.ho12-footer .ho12-footer-container {
  max-width: 1100px !important;
  gap: 8px !important;
}

html body footer.ho12-footer .ho12-footer-links {
  gap: 8px !important;
  margin-bottom: 0 !important;
}

html body footer.ho12-footer .ho12-footer-links a {
  gap: 4px !important;
  color: #aaa !important;
  font-size: 10.5px !important;
  transform: none !important;
}

html body footer.ho12-footer .ho12-footer-img,
html body footer.ho12-footer .ho12-footer-img.force-active {
  max-height: 20px !important;
  filter: grayscale(100%) opacity(40%) !important;
  transform: none !important;
}

html body footer.ho12-footer .ho12-footer-links a:is(:hover,:focus-visible),
html body footer.ho12-footer .ho12-footer-links a:is(:hover,:focus-visible) .ho12-footer-link-label {
  color: #111 !important;
}

html body footer.ho12-footer .ho12-footer-links a:is(:hover,:focus-visible) .ho12-footer-img {
  filter: grayscale(0%) opacity(1) !important;
}

html body footer.ho12-footer .ho12-footer-link-label {
  font-size: 10.5px !important;
}

html body footer.ho12-footer .ho12-footer-separator {
  font-size: 12px !important;
}

html body footer.ho12-footer .ho12-footer-info {
  max-width: 1100px !important;
  gap: 3px 5px !important;
  line-height: 1.45 !important;
}

html body footer.ho12-footer .ho12-footer-copyright {
  margin-top: 0 !important;
  font-size: 10.5px !important;
}

/* Footer policy links: color-only hover/focus. Keep every size and position
 * fixed, while the Long-distance Spaceship terms artwork regains its color. */
html body footer.ho12-footer .ho12-footer-links a[href$="/terms/"]:is(:hover,:focus-visible),
html body footer.ho12-footer .ho12-footer-links a[href*="/privacy/"]:is(:hover,:focus-visible),
html body footer.ho12-footer .ho12-footer-links a[href*="/youth-policy/"]:is(:hover,:focus-visible),
html body footer.ho12-footer .ho12-footer-links a[href$="/terms/"]:is(:hover,:focus-visible) .ho12-footer-link-label {
  color: #111 !important;
  transform: none !important;
}

html body footer.ho12-footer .ho12-footer-links a[href$="/terms/"]:is(:hover,:focus-visible) .ho12-footer-img {
  filter: grayscale(0%) opacity(1) !important;
  transform: none !important;
}

/* Privacy/youth hover activates only the wordmark image, not the terms label. */
html body footer.ho12-footer .ho12-footer-links:has(> a[href*="/privacy/"]:is(:hover,:focus-visible)) > a:first-child .ho12-footer-img,
html body footer.ho12-footer .ho12-footer-links:has(> a[href*="/youth-policy/"]:is(:hover,:focus-visible)) > a:first-child .ho12-footer-img {
  filter: grayscale(0%) opacity(1) !important;
  transform: none !important;
}

html body #page .ho12-pdf-policy__header {
  gap: 8px !important;
  margin-bottom: 48px !important;
}

html body #page .ho12-pdf-policy__brand-image {
  width: 140px !important;
  height: auto !important;
  max-height: 30px !important;
  object-fit: contain !important;
}

html body #page .ho12-pdf-policy__title {
  font-size: 18px !important;
  line-height: 1.45 !important;
}

html body #page .ho12-pdf-policy__header .ho12-gamtae-inline-icon {
  width: auto !important;
  height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
}

html body.page-id-1242 #page .ho12-book-placeholder {
  width: 100% !important;
  min-height: 420px !important;
  padding: 36px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body.page-id-1242 #page .ho12-book-placeholder img {
  width: 260px !important;
  height: 260px !important;
  max-width: min(260px, calc(100vw - 40px)) !important;
  max-height: min(260px, calc(100vw - 40px)) !important;
  object-fit: contain !important;
  transform: none !important;
}

@media (max-width: 768px) {
  html body footer.ho12-footer {
    padding: 16px 14px !important;
  }

  html body footer.ho12-footer .ho12-footer-info {
    flex-direction: row !important;
    gap: 3px 5px !important;
  }

  html body footer.ho12-footer .ho12-footer-info .ho12-info-sep {
    display: inline !important;
  }

  html body #page .ho12-pdf-policy__brand-image {
    width: 118px !important;
    max-height: 26px !important;
  }

  html body #page .ho12-pdf-policy__title {
    font-size: 16px !important;
  }

  html body #page .ho12-pdf-policy__header .ho12-gamtae-inline-icon {
    height: 27px !important;
    max-height: 27px !important;
  }
}

/* Applied PDF pp.59-63 / original pp.43-46: compact inquiry form, inline
 * history details and success-only animation. */
html body.page-id-19 #page .ho12-contact-container {
  width: 300px !important;
  max-width: 300px !important;
  min-height: 0 !important;
  margin: 0 auto 54px !important;
  padding: 20px 0 0 !important;
  color: #aaa !important;
  background: transparent !important;
}

html body.page-id-19 #page .ho12-contact-box,
html body.page-id-19 #page .ho12-ct-form {
  width: 300px !important;
  max-width: 300px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.page-id-19 #page .ho12-contact-fg {
  width: 300px !important;
  min-height: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body.page-id-19 #page .ho12-contact-fg label {
  width: 72px !important;
  min-width: 72px !important;
  height: 32px !important;
  padding: 0 !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 32px !important;
  letter-spacing: 0 !important;
}

html body.page-id-19 #page .ho12-contact-fg :is(input,textarea),
html body.page-id-19 #page #ho12-ct-type-trigger .ho12-wobbly-arrow-icon {
  color: #aaa !important;
  font-size: 11px !important;
  transform: none !important;
}

html body.page-id-19 #page .ho12-contact-fg:is(:hover,:focus-within) label,
html body.page-id-19 #page .ho12-contact-fg:is(:hover,:focus-within) :is(input,textarea),
html body.page-id-19 #page #ho12-ct-type-trigger:is(:hover,:focus-visible) .ho12-wobbly-arrow-icon {
  color: #111 !important;
}

html body.page-id-19 #page .ho12-contact-fg :is(input,textarea) {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.page-id-19 #page .ho12-contact-textarea-fg {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  width: 300px !important;
  height: 92px !important;
  min-height: 92px !important;
  margin: 0 !important;
}

html body.page-id-19 #page .ho12-contact-lines-wrap {
  flex: 1 1 auto !important;
  width: 228px !important;
  height: 88px !important;
  min-height: 88px !important;
  padding: 0 !important;
  border: 0 !important;
}

html body.page-id-19 #page .ho12-contact-lines-wrap textarea {
  width: 228px !important;
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  padding: 0 !important;
  line-height: 1.55 !important;
}

html body.page-id-19 #page .ho12-contact-submit-wrap {
  width: 300px !important;
  height: 36px !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  justify-content: flex-end !important;
}

html body.page-id-19 #page .ho12-contact-submit-icon-btn,
html body.page-id-19 #page .ho12-contact-submit-icon-btn:is(:hover,:focus-visible) {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.page-id-19 #page .ho12-contact-submit-icon-btn::after {
  top: calc(100% + 2px) !important;
  bottom: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #aaa !important;
  font-size: 10px !important;
}

html body.page-id-19 #page #ho12-ct-type-dropdown {
  left: 72px !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  border: 1.5px solid #f4b400 !important;
  background: #fff !important;
  box-shadow: none !important;
}

html body.page-id-19 #page #ho12-ct-type-dropdown .ho12-ct-type-option {
  min-height: 22px !important;
  padding: 3px 7px !important;
  color: #aaa !important;
  background: #fff !important;
  font-size: 10.5px !important;
  line-height: 16px !important;
  transform: none !important;
}

html body.page-id-19 #page #ho12-ct-type-dropdown .ho12-ct-type-option:is(:hover,:focus-visible,[aria-selected='true']) {
  color: #111 !important;
  background: #fff !important;
  transform: none !important;
}

html body.page-id-19 #page .ho12-contact-fg > label .ho12-required-question-icon {
  left: 104px !important;
  width: 18px !important;
  height: 18px !important;
}

html body.page-id-19 #page .ho12-contact-textarea-fg.ho12-required-question-host--floating > .ho12-required-question-icon {
  left: 186px !important;
  top: 42px !important;
  width: 18px !important;
  height: 18px !important;
}

html body.page-id-19 #page .ho12-my-contacts-section {
  width: 300px !important;
  max-width: 300px !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
}

html body.page-id-19 #page .ho12-my-contacts-section:has(.ho12-my-contacts-list:empty) {
  display: none !important;
}

html body.page-id-19 #page :is(.ho12-my-contact-item,.ho12-my-contact-header,.ho12-my-contact-details) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.page-id-19 #page .ho12-my-contact-item {
  margin: 0 0 10px !important;
  padding: 0 !important;
}

html body.page-id-19 #page .ho12-my-contact-header {
  padding: 4px 0 !important;
}

html body.page-id-19 #page :is(.ho12-my-contact-date,.ho12-my-contact-title-text,.ho12-my-contact-question) {
  color: #aaa !important;
  font-size: 10.5px !important;
}

html body.page-id-19 #page .ho12-my-contact-answer {
  color: #f4b400 !important;
  font-size: 10.5px !important;
}

html body.page-id-19 #page :is(.ho12-contact-status-icon,.ho12-contact-submit-icon-btn img):is(:hover,:focus-visible) {
  transform: none !important;
}

@media (max-width: 360px) {
  html body.page-id-19 #page .ho12-contact-container,
  html body.page-id-19 #page .ho12-contact-box,
  html body.page-id-19 #page .ho12-ct-form,
  html body.page-id-19 #page .ho12-contact-fg,
  html body.page-id-19 #page .ho12-contact-textarea-fg,
  html body.page-id-19 #page .ho12-contact-submit-wrap,
  html body.page-id-19 #page .ho12-my-contacts-section {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
  }
}

/* Applied PDF pp.57-58 / original p.39: unboxed purchase history and direct
 * carrier links. */
html body.page-id-15 #page #ho12-cart-panel-history,
html body.page-id-15 #page #ho12-cart-panel-history .ho12-history-list,
html body.page-id-15 #page #ho12-cart-panel-history .ho12-history-item-row {
  width: 600px !important;
  max-width: 100% !important;
}

html body.page-id-15 #page #ho12-cart-panel-history .ho12-history-item-row {
  min-height: 98px !important;
  padding: 10px 8px !important;
  gap: 14px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.page-id-15 #page #ho12-cart-panel-history .ho12-history-item-row,
html body.page-id-15 #page #ho12-cart-panel-history .ho12-history-item-row * {
  color: #aaa !important;
}

html body.page-id-15 #page #ho12-cart-panel-history .ho12-history-item-row > div:first-child {
  border: 0 !important;
}

html body.page-id-15 #page #ho12-cart-panel-history .ho12-history-item-thumb {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  flex: 0 0 60px !important;
  margin-left: 14px !important;
  border: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

html body.page-id-15 #page #ho12-cart-panel-history .ho12-history-item-thumb img {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

html body.page-id-15 #page #ho12-cart-panel-history .ho12-history-item-row .ho12-gamtae-amount-num {
  color: #aaa !important;
}

html body.page-id-15 #page #ho12-cart-panel-history :is(.ho12-history-item-row a,.ho12-history-item-row button) {
  padding: 2px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #aaa !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.page-id-15 #page #ho12-cart-panel-history :is(.ho12-history-item-row a,.ho12-history-item-row button):is(:hover,:focus-visible) {
  color: #111 !important;
  background: transparent !important;
  transform: none !important;
}

/* The purchase-history panel shares the exact cart rail.  Earlier PDF notes
 * used an ID selector at 600px, so keep this ID-level lock here as well. */
html body.page-id-15 #page #ho12-cart-panel-history,
html body.page-id-15 #page #ho12-cart-panel-history .ho12-history-list,
html body.page-id-15 #page #ho12-cart-panel-history .ho12-history-item-row {
  width: min(740px, calc(100vw - 28px)) !important;
  max-width: 740px !important;
  box-sizing: border-box !important;
}

@media (max-width: 680px) {
  html body.page-id-15 #page #ho12-cart-panel-history,
  html body.page-id-15 #page #ho12-cart-panel-history .ho12-history-list,
  html body.page-id-15 #page #ho12-cart-panel-history .ho12-history-item-row {
    width: calc(100vw - 28px) !important;
  }
}

/* Global user requirement: hovering must never enlarge an element.  Keep
 * necessary centering/rotation transforms, but remove every hover scale. */
html body #page :is(
  .ho12-btn-glow,
  .ho12-sw-cover,
  .ho12-planet,
  .ho12-goods-card,
  .ho12-pd-fullscreen,
  .ho12-dev-remove-btn,
  .ho12-main-deco-icon-item,
  .ho12-cart-tab-btn,
  .ho12-gt-icon-btn,
  .ho12-gt-row,
  .vr-bottombar-left-btn,
  .vr-bottombar-right-btn,
  .vr-bottombar-icon-btn,
  .vr-set-btn
):hover {
  transform: none !important;
}

html body #page :is(
  .ho12-work-card:hover.completed .ho12-wc-img,
  .ho12-work-card:hover .ho12-wc-thumb img,
  .ho12-work-card.has-thumbnail:hover .ho12-wc-thumb img,
  .ho12-goods-card:hover img,
  .ho12-pd-main:hover img,
  .ho12-pd-related-card:hover img,
  .ho12-pd-related-card:hover .ho12-pd-related-img img,
  .wc-block-grid__product:hover .wc-block-grid__product-image img,
  .ho12-tree-bubble.has-custom-icon:hover img,
  .ho12-tree-bubble:hover .ho12-tree-icon,
  .ho12-gt-row:hover .ho12-gt-price-text
) {
  transform: none !important;
}

html body #page .ho12-slider-nav:hover {
  transform: translateY(-50%) !important;
}

html body #page .ho12-planet:hover .ho12-planet-info-under {
  transform: translateX(-50%) !important;
}

html body #page .ho12-cosmic-icon:hover,
html body #page :is(.ho12-cosmic-btn-label,.ho12-cosmic-check-label):hover .ho12-action-icon {
  transform: rotate(15deg) !important;
}

html body #page .ho12-main-deco-icon-item:hover {
  animation: none !important;
}

html body #ho12-header :is(
  .ho12-hd-search-icon:hover .ho12-hd-search-img,
  .ho12-hd-user-icon:hover,
  .ho12-hd-user-icon:hover .ho12-hd-standing-img,
  .ho12-hd-user-icon:hover .ho12-hd-standing-svg,
  .ho12-hd-user-icon:hover .ho12-hd-lying-img,
  .ho12-hd-user-icon:hover .ho12-hd-lying-svg,
  .ho12-logo:hover,
  .ho12-hero-logo-img:hover
) {
  transform: none !important;
}

html body #ho12-header .ho12-hd-user-wrapper:hover .ho12-bubble-blue {
  transform: rotate(-6deg) !important;
}

html body #ho12-header .ho12-bubble-blue:hover {
  transform: rotate(-3deg) !important;
}

html body #ho12-header .ho12-hd-user-wrapper:hover .ho12-bubble-green {
  transform: translate(-50%, 0) rotate(5deg) !important;
}

html body #ho12-header .ho12-bubble-green:hover {
  transform: translate(-50%, 0) rotate(2deg) !important;
}

html body #ho12-header .ho12-hd-user-wrapper:hover .ho12-bubble-yellow {
  transform: rotate(8deg) !important;
}

html body #ho12-header .ho12-bubble-yellow:hover {
  transform: rotate(4deg) !important;
}

@media (max-width: 767px) {
  html body #ho12-header .ho12-logo:hover {
    transform: translateX(45px) !important;
  }
}

/* Final responsive pass: keep the three tablet main cards fully in-frame and
 * release the desktop-only 600px related-products width on narrow screens. */
@media (min-width: 601px) and (max-width: 768px) {
  html body.page-id-12 #page #ho12-works-grid#ho12-works-grid.ho12-works-grid {
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 0 !important;
    justify-content: stretch !important;
    justify-items: center !important;
  }
}

@media (max-width: 768px) {
  html body.single-product #page .ho12-pd-related-section,
  html body.single-product #page .ho12-pd-related-section section.related.products,
  html body.single-product #page .ho12-pd-related-section ul.products {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  html body.single-product #page .ho12-pd-related-section ul.products {
    grid-template-columns: repeat(auto-fit, 54px) !important;
    justify-content: center !important;
  }

  html body #page .ho12-pdf-policy {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
}

/* Original design pp.32-33: one shared art-goods subnav and source-scale
 * listing/detail composition.  The PDF artwork is intentionally compact. */
html body.single-product #page .ho12-goods-detail-link.is-active img {
  filter: none !important;
  opacity: 1 !important;
}

@media (min-width: 769px) {
  html body.page-id-15 #page .ho12-goods-gnb-sub,
  html body.single-product #page .ho12-goods-detail-nav {
    width: 600px !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    justify-content: space-between !important;
  }

  html body.page-id-15 #page .ho12-goods-featured-slider-wrap {
    width: 600px !important;
    max-width: 600px !important;
    margin: 20px auto 0 !important;
  }

  html body.page-id-15 #page .ho12-goods-featured-slider-container {
    width: 600px !important;
    max-width: 600px !important;
  }

  html body.page-id-15 #page .ho12-goods-featured-slider-track {
    width: max-content !important;
    min-width: 600px !important;
    justify-content: center !important;
    gap: 44px !important;
    padding: 0 !important;
  }

  html body.page-id-15 #page .ho12-goods-featured-slider-track .ho12-goods-card,
  html body.page-id-15 #page .ho12-goods-grid .ho12-goods-card {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    height: auto !important;
    flex: 0 0 78px !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body.page-id-15 #page .ho12-goods-grid {
    width: 600px !important;
    max-width: 600px !important;
    grid-template-columns: repeat(3, 78px) !important;
    justify-content: center !important;
    align-items: start !important;
    column-gap: 44px !important;
    row-gap: 24px !important;
    margin: 0 auto !important;
    padding: 20px 0 !important;
  }

  html body.page-id-15 #page .ho12-slider-nav {
    width: 22px !important;
    height: 30px !important;
  }

  html body.page-id-15 #page .ho12-slider-nav svg {
    width: 14px !important;
    height: 22px !important;
  }

  html body.page-id-15 #page .ho12-slider-nav.ho12-slider-prev {
    left: -24px !important;
  }

  html body.page-id-15 #page .ho12-slider-nav.ho12-slider-next {
    right: -24px !important;
  }

  html body.single-product #page .ho12-product-page-wrapper {
    width: 600px !important;
    max-width: 600px !important;
    margin: 0 auto 44px !important;
  }

  html body.single-product #page .ho12-pd-wrap {
    width: 500px !important;
    max-width: 500px !important;
    gap: 32px !important;
    margin: 0 auto 24px !important;
  }

  html body.single-product #page .ho12-pd-left-panel {
    width: 240px !important;
    flex: 0 0 240px !important;
    gap: 12px !important;
  }

  html body.single-product #page .ho12-pd-right-panel {
    width: 228px !important;
    max-width: 228px !important;
    flex: 0 0 228px !important;
    gap: 8px !important;
  }

  html body.single-product #page .ho12-pd-main-wrap {
    width: 150px !important;
    height: 150px !important;
    padding: 8px !important;
    margin: 0 auto !important;
  }

  html body.single-product #page .ho12-pd-thumbs-horizontal-container {
    width: 220px !important;
    max-width: 220px !important;
    gap: 5px !important;
    margin: 0 auto !important;
  }

  html body.single-product #page .ho12-pd-thumbs-scroll-btn {
    width: 14px !important;
    height: 18px !important;
    transform: none !important;
  }

  html body.single-product #page .ho12-pd-thumbs-horizontal {
    gap: 7px !important;
  }

  html body.single-product #page .ho12-pd-thumb-item {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    padding: 3px !important;
  }

  html body.single-product #page .ho12-pd-info-title {
    min-height: 0 !important;
    margin: 0 !important;
    color: #aaa !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
  }

  html body.single-product #page .ho12-pd-price-row,
  html body.single-product #page .ho12-pd-price-num {
    min-height: 0 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  html body.single-product #page .ho12-pd-price-row .ho12-gamtae-icon-wrapper,
  html body.single-product #page .ho12-pd-price-row .ho12-gamtae-icon-wrapper img {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
  }

  html body.single-product #page .ho12-simple-options-container {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 228px !important;
    max-width: 228px !important;
    margin: 18px 0 4px !important;
  }

  html body.single-product #page .ho12-simple-option-label {
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
  }

  html body.single-product #page .ho12-simple-color-select {
    width: 132px !important;
    max-width: 132px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 2px 24px 2px 10px !important;
    border: 0 !important;
    border-left: 1px solid #ddd !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: #777 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  html body.single-product #page .ho12-selected-option-summary,
  html body.single-product #page .ho12-pd-action-buttons {
    width: 228px !important;
    max-width: 228px !important;
  }

  html body.single-product #page .ho12-selected-option-summary {
    min-height: 0 !important;
    margin: 4px 0 0 !important;
    padding: 4px 0 !important;
    gap: 4px !important;
  }

  html body.single-product #page .ho12-summary-top-row,
  html body.single-product #page .ho12-summary-bottom-row {
    min-height: 0 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  html body.single-product #page .ho12-summary-name,
  html body.single-product #page .ho12-summary-total-qty-text,
  html body.single-product #page .ho12-summary-price-wrap,
  html body.single-product #page .ho12-summary-price-wrap .ho12-summary-total-price {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  html body.single-product #page .ho12-summary-controls-group {
    gap: 5px !important;
  }

  html body.single-product #page .ho12-summary-qty-controls {
    gap: 3px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body.single-product #page :is(.ho12-qty-btn-dec,.ho12-qty-btn-inc) {
    width: 10px !important;
    height: 10px !important;
  }

  html body.single-product #page .ho12-qty-val {
    min-width: 12px !important;
    font-size: 11px !important;
  }

  html body.single-product #page .ho12-summary-bottom-row {
    padding-top: 4px !important;
    border-top: 0 !important;
  }

  html body.single-product #page .ho12-summary-price-wrap .ho12-gamtae-icon-wrapper,
  html body.single-product #page .ho12-summary-price-wrap .ho12-gamtae-icon-wrapper img {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    flex: 0 0 14px !important;
  }

  html body.single-product #page .ho12-pd-action-buttons {
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 18px !important;
    margin-top: 8px !important;
  }

  html body.single-product #page .ho12-action-item-cart {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  html body.single-product #page .ho12-action-cart-custom-img {
    max-height: 30px !important;
  }

  html body.single-product #page .ho12-action-buy-custom-img {
    max-height: 34px !important;
  }

  html body.single-product #page .ho12-pd-related-section {
    width: 500px !important;
    max-width: 500px !important;
    margin: 18px auto 0 !important;
  }
}

/* Product detail correction: restore a readable middle scale and replace the
 * browser-native select with the source artwork's line-and-radio menu. */
html body.single-product #page .ho12-simple-custom-dropdown {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  z-index: 40 !important;
}

html body.single-product #page .ho12-simple-color-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html body.single-product #page .ho12-simple-dropdown-trigger {
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 3px 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  border: 0 !important;
  border-bottom: 1px solid #dedede !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #aaa !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transform: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

html body.single-product #page .ho12-simple-dropdown-trigger:is(:focus,:focus-visible,:active) {
  outline: none !important;
  border: 0 !important;
  border-bottom: 1px solid #dedede !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body.single-product #page .ho12-simple-dropdown-value {
  min-width: 0 !important;
  color: #999 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

html body.single-product #page .ho12-simple-dropdown-arrow {
  width: 9px !important;
  height: 12px !important;
  flex: 0 0 9px !important;
  color: #999 !important;
  transform: rotate(90deg) !important;
  transform-origin: center !important;
}

/* My information page: keep dormant actions quiet and reveal only the
 * approached control.  Position and dimensions stay fixed on interaction. */
html body #page .ho12-mypage-container .ho12-mp-nav-item,
html body #page .ho12-mypage-container .ho12-mp-nav-item:is(:hover, :focus-visible, .active),
html body #page .ho12-mypage-container #ho12-btn-edit-wrap,
html body #page .ho12-mypage-container #ho12-btn-edit-wrap:is(:hover, :focus-within) {
  transform: none !important;
  scale: 1 !important;
}

html body #page .ho12-mypage-container .ho12-mp-nav-item:not(.active):not(:hover) > img,
html body #page .ho12-mypage-container #ho12-btn-edit-wrap > .ho12-mp-btn-icon {
  filter: grayscale(1) !important;
  opacity: .34 !important;
}

html body #page .ho12-mypage-container .ho12-mp-nav-item:is(.active, :hover, :focus-visible) > img,
html body #page .ho12-mypage-container #ho12-btn-edit-wrap:is(:hover, :focus-within) > .ho12-mp-btn-icon {
  filter: none !important;
  opacity: 1 !important;
}

html body #page .ho12-mypage-container :is(.ho12-mp-nav-item > img, #ho12-btn-edit-wrap > .ho12-mp-btn-icon) {
  transition-property: filter, opacity !important;
}

/* The real button text is the edit tooltip; suppress the duplicate pseudo
 * tooltip left by the earlier audit layer. */
html body #page .ho12-mypage-container #ho12-btn-edit-wrap::after {
  content: none !important;
  display: none !important;
}

html body #page .ho12-mypage-container #ho12-btn-edit-wrap > .ho12-mp-action-btn {
  top: calc(100% + 7px) !important;
  padding: 4px 7px !important;
  color: #8d8d8d !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

html body.single-product #page .ho12-simple-custom-dropdown.open .ho12-simple-dropdown-arrow {
  transform: rotate(270deg) !important;
}

html body.single-product #page .ho12-simple-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  z-index: 80 !important;
  width: 240px !important;
  max-width: min(240px, calc(100vw - 32px)) !important;
  padding: 10px 12px 9px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  border: 1px solid #ededed !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-3px) !important;
  transition: none !important;
}

html body.single-product #page .ho12-simple-custom-dropdown.open .ho12-simple-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

html body.single-product #page .ho12-simple-dropdown-menu-head {
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 0 3px !important;
  padding: 0 0 4px !important;
  border-bottom: 1px solid #eee !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html body.single-product #page .ho12-simple-dropdown-menu-head svg {
  width: 12px !important;
  height: 12px !important;
  color: #aaa !important;
}

html body.single-product #page .ho12-simple-dropdown-option {
  width: 100% !important;
  min-height: 23px !important;
  margin: 0 !important;
  padding: 2px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #aaa !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transform: none !important;
}

html body.single-product #page .ho12-simple-dropdown-option:is(:hover,:focus-visible),
html body.single-product #page .ho12-simple-dropdown-option.active {
  background: transparent !important;
  color: #777 !important;
  transform: none !important;
}

html body.single-product #page .ho12-simple-dropdown-radio {
  position: relative !important;
  width: 11px !important;
  height: 11px !important;
  flex: 0 0 11px !important;
  display: block !important;
  border: 1.5px solid #c9c9c9 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

html body.single-product #page .ho12-simple-dropdown-option.active .ho12-simple-dropdown-radio {
  border-color: #111 !important;
}

html body.single-product #page .ho12-simple-dropdown-option.active .ho12-simple-dropdown-radio i {
  position: absolute !important;
  inset: 2px !important;
  display: block !important;
  border-radius: 50% !important;
  background: #f1bb43 !important;
}

@media (min-width: 769px) {
  html body.single-product #page .ho12-product-page-wrapper {
    width: 660px !important;
    max-width: 660px !important;
  }

  html body.single-product #page .ho12-pd-wrap {
    width: 620px !important;
    max-width: 620px !important;
    gap: 40px !important;
  }

  html body.single-product #page .ho12-pd-left-panel {
    width: 280px !important;
    flex: 0 0 280px !important;
    gap: 14px !important;
  }

  html body.single-product #page .ho12-pd-right-panel {
    width: 300px !important;
    max-width: 300px !important;
    flex: 0 0 300px !important;
    gap: 10px !important;
  }

  html body.single-product #page .ho12-pd-main-wrap {
    width: 200px !important;
    height: 200px !important;
    padding: 10px !important;
  }

  html body.single-product #page .ho12-pd-thumbs-horizontal-container {
    width: 260px !important;
    max-width: 260px !important;
  }

  html body.single-product #page .ho12-pd-thumb-item {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
  }

  html body.single-product #page .ho12-pd-info-title {
    font-size: 19px !important;
  }

  html body.single-product #page .ho12-pd-price-row,
  html body.single-product #page .ho12-pd-price-num {
    font-size: 19px !important;
  }

  html body.single-product #page .ho12-simple-options-container {
    grid-template-columns: 108px minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 300px !important;
    max-width: 300px !important;
    margin: 22px 0 5px !important;
  }

  html body.single-product #page .ho12-simple-option-label {
    font-size: 13px !important;
  }

  html body.single-product #page .ho12-selected-option-summary,
  html body.single-product #page .ho12-pd-action-buttons {
    width: 300px !important;
    max-width: 300px !important;
  }

  html body.single-product #page .ho12-summary-name,
  html body.single-product #page .ho12-summary-total-qty-text,
  html body.single-product #page .ho12-summary-price-wrap,
  html body.single-product #page .ho12-summary-price-wrap .ho12-summary-total-price {
    font-size: 12px !important;
  }

  html body.single-product #page .ho12-action-cart-custom-img {
    max-height: 36px !important;
  }

  html body.single-product #page .ho12-action-buy-custom-img {
    max-height: 40px !important;
  }

  html body.single-product #page .ho12-pd-related-section {
    width: 620px !important;
    max-width: 620px !important;
  }
}

@media (max-width: 768px) {
  html body.single-product #page .ho12-simple-dropdown-menu {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Final art-goods scale: the live header navigation is 740px wide on desktop.
 * Keep the whole shop composition on that same axis instead of shrinking the
 * listing and product detail into a separate miniature canvas. */
@media (min-width: 769px) {
  html body.page-id-15 #page .ho12-goods-gnb-sub,
  html body.single-product #page .ho12-goods-detail-nav,
  html body.single-product #page .ho12-product-page-wrapper {
    width: 740px !important;
    max-width: 740px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.page-id-15 #page .ho12-goods-featured-slider-wrap,
  html body.page-id-15 #page .ho12-goods-featured-slider-container {
    width: 740px !important;
    max-width: 740px !important;
  }

  html body.page-id-15 #page .ho12-goods-featured-slider-track {
    width: max-content !important;
    min-width: 740px !important;
    gap: 44px !important;
  }

  html body.page-id-15 #page .ho12-goods-featured-slider-track .ho12-goods-card,
  html body.page-id-15 #page .ho12-goods-grid .ho12-goods-card {
    width: 184px !important;
    min-width: 184px !important;
    max-width: 184px !important;
    height: auto !important;
    flex: 0 0 184px !important;
  }

  html body.page-id-15 #page .ho12-goods-grid {
    width: 740px !important;
    max-width: 740px !important;
    grid-template-columns: repeat(3, 184px) !important;
    justify-content: center !important;
    column-gap: 44px !important;
    row-gap: 28px !important;
  }

  html body.page-id-15 #page .ho12-slider-nav {
    width: 36px !important;
    height: 44px !important;
  }

  html body.page-id-15 #page .ho12-slider-nav svg {
    width: 22px !important;
    height: 30px !important;
  }

  html body.page-id-15 #page .ho12-slider-nav.ho12-slider-prev {
    left: -38px !important;
  }

  html body.page-id-15 #page .ho12-slider-nav.ho12-slider-next {
    right: -38px !important;
  }

  html body.single-product #page .ho12-pd-wrap {
    width: 740px !important;
    max-width: 740px !important;
    gap: 40px !important;
  }

  html body.single-product #page .ho12-pd-left-panel {
    width: 320px !important;
    flex: 0 0 320px !important;
    gap: 16px !important;
  }

  html body.single-product #page .ho12-pd-right-panel {
    width: 380px !important;
    max-width: 380px !important;
    flex: 0 0 380px !important;
    gap: 12px !important;
  }

  html body.single-product #page .ho12-pd-main-wrap {
    width: 240px !important;
    height: 240px !important;
    padding: 12px !important;
  }

  html body.single-product #page .ho12-pd-thumbs-horizontal-container {
    width: 300px !important;
    max-width: 300px !important;
  }

  html body.single-product #page .ho12-pd-thumbs-scroll-btn {
    width: 16px !important;
    height: 22px !important;
  }

  html body.single-product #page .ho12-pd-thumb-item {
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    padding: 4px !important;
  }

  html body.single-product #page .ho12-pd-info-title {
    font-size: 26px !important;
    line-height: 1.3 !important;
  }

  html body.single-product #page .ho12-pd-price-row,
  html body.single-product #page .ho12-pd-price-num {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  html body.single-product #page .ho12-pd-price-row .ho12-gamtae-icon-wrapper,
  html body.single-product #page .ho12-pd-price-row .ho12-gamtae-icon-wrapper img {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
  }

  html body.single-product #page .ho12-simple-options-container {
    grid-template-columns: 132px minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 380px !important;
    max-width: 380px !important;
    margin: 24px 0 6px !important;
  }

  html body.single-product #page .ho12-simple-option-label {
    font-size: 14px !important;
  }

  html body.single-product #page .ho12-simple-dropdown-trigger {
    height: 34px !important;
    min-height: 34px !important;
  }

  html body.single-product #page .ho12-simple-dropdown-value {
    font-size: 13px !important;
  }

  html body.single-product #page .ho12-simple-dropdown-menu {
    width: 260px !important;
  }

  html body.single-product #page .ho12-simple-dropdown-menu-head,
  html body.single-product #page .ho12-simple-dropdown-option {
    font-size: 12px !important;
  }

  html body.single-product #page .ho12-selected-option-summary,
  html body.single-product #page .ho12-pd-action-buttons {
    width: 380px !important;
    max-width: 380px !important;
  }

  html body.single-product #page .ho12-selected-option-summary {
    padding: 6px 0 !important;
    gap: 6px !important;
  }

  html body.single-product #page .ho12-summary-name,
  html body.single-product #page .ho12-summary-total-qty-text,
  html body.single-product #page .ho12-summary-price-wrap,
  html body.single-product #page .ho12-summary-price-wrap .ho12-summary-total-price {
    font-size: 13px !important;
  }

  html body.single-product #page .ho12-pd-action-buttons {
    gap: 24px !important;
    margin-top: 12px !important;
  }

  html body.single-product #page .ho12-action-cart-custom-img {
    max-height: 42px !important;
  }

  html body.single-product #page .ho12-action-buy-custom-img {
    max-height: 46px !important;
  }

  html body.single-product #page .ho12-pd-related-section {
    width: 740px !important;
    max-width: 740px !important;
  }

  html body.single-product #page .ho12-pd-policy {
    width: 320px !important;
    max-width: 320px !important;
  }
}

/* Main page: the three cover cards must stay inside the same 740px content
 * boundary as the six-planet header navigation. */
@media (min-width: 769px) {
  html body.page-id-12 #page #ho12-works-grid#ho12-works-grid.ho12-works-grid {
    width: 740px !important;
    max-width: 740px !important;
    grid-template-columns: repeat(3, 218px) !important;
    justify-content: center !important;
    justify-items: center !important;
    column-gap: 43px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* Original fixed compositions: the main page is a three-card row, while the
 * art-goods page is a five-card row within the same 740px header boundary. */
@media (min-width: 769px) {
  html body.page-id-15 #page .ho12-goods-featured-slider-track {
    gap: 20px !important;
    justify-content: center !important;
  }

  html body.page-id-15 #page .ho12-goods-featured-slider-track .ho12-goods-card,
  html body.page-id-15 #page .ho12-goods-grid .ho12-goods-card {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    flex: 0 0 132px !important;
  }

  html body.page-id-15 #page .ho12-goods-grid {
    grid-template-columns: repeat(5, 132px) !important;
    column-gap: 20px !important;
    justify-content: center !important;
  }
}

/* Shared desktop composition: the main page establishes one 740px visible
 * header/content axis. Keep that axis identical on every standard page. */
@media (min-width: 769px) {
  html body #ho12-header .ho12-hd-top {
    width: 740px !important;
    max-width: 740px !important;
  }

  html body #ho12-header #ho12-planet-nav {
    width: 740px !important;
    max-width: 740px !important;
  }

  html body:has(#ho12-header) #page {
    width: 740px !important;
    max-width: 740px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body:is(.page-id-12, .page-id-13, .page-id-14) #page #ho12-works-grid {
    width: 740px !important;
    max-width: 740px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.page-id-12 #page #ho12-works-grid#ho12-works-grid.ho12-works-grid {
    width: 740px !important;
    max-width: 740px !important;
    grid-template-columns: repeat(3, 218px) !important;
    justify-content: center !important;
    column-gap: 43px !important;
  }

  html body.page-id-12 #page #ho12-works-grid .ho12-work-card {
    width: 218px !important;
    max-width: 218px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 218 / 273 !important;
  }

  html body.page-id-16 #page #ho12-lib-grid {
    width: 740px !important;
    max-width: 740px !important;
    grid-template-columns: repeat(5, 120px) !important;
    justify-content: start !important;
    justify-items: center !important;
    column-gap: 35px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.page-id-16 #page #ho12-lib-grid .ho12-lib-item {
    width: 120px !important;
    max-width: 120px !important;
  }

  html body.single-ho12_work #page .ho12-sw-title-frame {
    width: min(880px, calc(100vw - 80px)) !important;
    max-width: 880px !important;
  }

  html body.page-id-15 #page .ho12-goods-gnb-sub,
  html body.page-id-15 #page .ho12-goods-featured-slider-wrap,
  html body.page-id-15 #page .ho12-goods-featured-slider-container,
  html body.page-id-15 #page .ho12-goods-grid {
    width: 740px !important;
    max-width: 740px !important;
  }

  html body.page-id-15 #page .ho12-goods-featured-slider-track {
    width: max-content !important;
    min-width: 100% !important;
    justify-content: flex-start !important;
    gap: 20px !important;
  }

  html body.page-id-15 #page .ho12-goods-grid {
    grid-template-columns: repeat(5, 132px) !important;
    justify-content: space-between !important;
    column-gap: 0 !important;
  }

  html body.page-id-15 #page .ho12-slider-nav.ho12-slider-prev {
    left: -50px !important;
  }

  html body.page-id-15 #page .ho12-slider-nav.ho12-slider-next {
    right: -50px !important;
  }

  html body.single-product #page .ho12-goods-detail-nav,
  html body.single-product #page .ho12-product-page-wrapper,
  html body.single-product #page .ho12-pd-wrap,
  html body.single-product #page .ho12-pd-related-section {
    width: 740px !important;
    max-width: 740px !important;
  }

  html body.single-product #page .ho12-pd-wrap {
    gap: 70px !important;
  }

  html body.single-product #page .ho12-pd-left-panel {
    width: 380px !important;
    flex: 0 0 380px !important;
  }

  html body.single-product #page .ho12-pd-right-panel {
    width: 550px !important;
    max-width: 550px !important;
    flex: 0 0 550px !important;
  }

  html body.single-product #page .ho12-pd-main-wrap {
    width: 340px !important;
    height: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.single-product #page .ho12-pd-thumbs-horizontal-container {
    width: 380px !important;
    max-width: 380px !important;
  }

  html body.single-product #page .ho12-simple-options-container,
  html body.single-product #page .ho12-selected-option-summary,
  html body.single-product #page .ho12-pd-action-buttons {
    width: 420px !important;
    max-width: 420px !important;
  }

  html body.single-product #page .ho12-simple-dropdown-menu {
    width: 420px !important;
    max-width: 420px !important;
  }

  html body.single-product #page .ho12-pd-related-section ul.products {
    grid-template-columns: repeat(auto-fit, 80px) !important;
    gap: 24px !important;
  }

  html body.single-product #page .ho12-pd-related-section ul.products li.product,
  html body.single-product #page .ho12-pd-related-section ul.products li.product:nth-child(n) {
    width: 80px !important;
    height: 80px !important;
    min-height: 80px !important;
    padding: 7px !important;
  }

  html body.single-product #page .ho12-pd-related-section ul.products li.product img {
    width: 66px !important;
    height: 66px !important;
  }
}

/* Explicitly cover the remaining inline/component hover rules. */
html body :is(
  .ho12-contact-submit-icon-btn,
  .ho12-mp-nav-item,
  .ho12-mp-back-to-info-btn,
  .ho12-login-submit-btn,
  .ho12-login-submit-btn-standard,
  .ho12-sns-login-btn,
  .ho12-reg-submit-btn-image,
  .ho12-reg-submit-btn,
  .ho12-pd-thumbs-scroll-btn,
  .ho12-action-item-cart,
  .ho12-action-item-buy,
  .ho12-cart-tab-btn,
  .ho12-gt-icon-btn,
  .ho12-gt-row
):is(:hover, :focus-visible) {
  transform: none !important;
}

html body .ho12-gt-row:is(:hover, :focus-within) .ho12-gt-price-text {
  transform: none !important;
}

/* Gamtae purchase tabs: preserve the source green and express state only by
 * green density.  The repeated page id intentionally wins over the late
 * inline component stylesheet used by this legacy shortcode. */
html body #page#page .ho12-gamtae-buy-wrapper .ho12-gt-tabs-icons > button.ho12-gt-icon-btn[aria-pressed="false"][data-tab] > img {
  filter: none !important;
  opacity: .42 !important;
}

html body #page#page .ho12-gamtae-buy-wrapper .ho12-gt-tabs-icons > button.ho12-gt-icon-btn:is([aria-pressed="true"], :hover, :focus-visible)[data-tab] > img {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Product-detail correction after direct original-P33 review.
 * Keep the six navigation drawings and compact hand-drawn option control on
 * the same 740px visible axis established by the main page. */
@media (min-width: 769px) {
  html body #ho12-header #ho12-planet-nav {
    width: min(1000px, calc(100vw - 80px)) !important;
    max-width: 1000px !important;
    padding-left: 130px !important;
    padding-right: 130px !important;
    box-sizing: border-box !important;
  }

  html body.single-product #page .ho12-simple-options-container {
    display: block !important;
    width: 380px !important;
    max-width: 380px !important;
    margin: 24px 0 6px !important;
  }

  html body.single-product #page .ho12-simple-option-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  html body.single-product #page .ho12-simple-custom-dropdown,
  html body.single-product #page .ho12-simple-dropdown-trigger {
    width: 380px !important;
    max-width: 380px !important;
  }

  html body.single-product #page .ho12-simple-dropdown-trigger {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 3px 0 2px !important;
  }

  html body.single-product #page .ho12-simple-dropdown-value {
    display: block !important;
    color: #aaa !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  html body.single-product #page .ho12-simple-dropdown-menu {
    left: 0 !important;
    width: 420px !important;
    max-width: 420px !important;
  }

  html body.single-product #page .ho12-selected-option-summary,
  html body.single-product #page .ho12-pd-action-buttons {
    width: 380px !important;
    max-width: 380px !important;
  }

  /* Fit the complete static product composition inside the shared 740px axis. */
  html body.single-product #page .ho12-pd-wrap {
    gap: 40px !important;
  }

  html body.single-product #page .ho12-pd-left-panel {
    width: 340px !important;
    max-width: 340px !important;
    flex: 0 0 340px !important;
  }

  html body.single-product #page .ho12-pd-right-panel {
    width: 360px !important;
    max-width: 360px !important;
    flex: 0 0 360px !important;
  }

  html body.single-product #page .ho12-pd-thumbs-horizontal-container,
  html body.single-product #page .ho12-simple-options-container,
  html body.single-product #page .ho12-simple-custom-dropdown,
  html body.single-product #page .ho12-simple-dropdown-trigger,
  html body.single-product #page .ho12-selected-option-summary,
  html body.single-product #page .ho12-pd-action-buttons {
    width: 360px !important;
    max-width: 360px !important;
  }

  html body.single-product #page .ho12-simple-dropdown-menu {
    left: auto !important;
    right: 0 !important;
  }

  html body.single-ho12_work #page .ho12-sw-title-frame,
  html body.single-ho12_work #page .ho12-planets {
    width: 740px !important;
    max-width: 740px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.single-ho12_work #page .ho12-planets {
    display: grid !important;
    grid-template-columns: repeat(5, 76px) !important;
    justify-content: start !important;
    column-gap: 90px !important;
    row-gap: 36px !important;
  }

  html body.single-ho12_work #page .ho12-single-work {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Product detail: keep the tab row fixed and reserve its hover filter space. */
@media (min-width: 769px) {
  html body.single-product #page .ho12-goods-detail-nav {
    margin-bottom: 64px !important;
    position: relative !important;
    z-index: 100 !important;
  }

  html body.single-product #page .ho12-goods-detail-category-panel {
    top: calc(100% - 1px) !important;
    z-index: 110 !important;
  }

  html body.single-product #page .ho12-pd-wrap {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* Art-goods carousel: cards stay completely fixed on hover and the arrows do
 * not shift while their visual state changes. */
html body.page-id-15 #page :is(
  .ho12-goods-featured-slider-track .ho12-goods-card,
  .ho12-goods-grid .ho12-goods-card
),
html body.page-id-15 #page :is(
  .ho12-goods-featured-slider-track .ho12-goods-card,
  .ho12-goods-grid .ho12-goods-card
):is(:hover, :focus-visible, :active) {
  translate: none !important;
  rotate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition-property: filter, color, opacity !important;
}

html body.page-id-15 #page :is(
  .ho12-goods-featured-slider-track .ho12-goods-card,
  .ho12-goods-grid .ho12-goods-card
) :is(img, .ho12-card-border-svg),
html body.page-id-15 #page :is(
  .ho12-goods-featured-slider-track .ho12-goods-card,
  .ho12-goods-grid .ho12-goods-card
):is(:hover, :focus-visible, :active) :is(img, .ho12-card-border-svg) {
  translate: none !important;
  rotate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition-property: filter, stroke, opacity !important;
}

html body.page-id-15 #page .ho12-slider-nav,
html body.page-id-15 #page .ho12-slider-nav:is(:hover, :focus-visible, :active) {
  translate: none !important;
  scale: 1 !important;
  transform: translateY(-50%) !important;
  transition: none !important;
}

html body.page-id-15 #page .ho12-slider-nav svg {
  transition: none !important;
}

/* Product detail marked controls: use the source PDF's tiny outlined triangle,
 * with no browser-like underline or font-glyph chevron. */
html body.single-product #page .ho12-simple-dropdown-trigger,
html body.single-product #page .ho12-simple-dropdown-trigger:is(:hover, :focus, :focus-visible, :active) {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.single-product #page .ho12-simple-dropdown-value {
  color: #b3b3b3 !important;
  font-weight: 500 !important;
}

html body.single-product #page .ho12-simple-dropdown-arrow {
  width: 8px !important;
  height: 14px !important;
  min-width: 8px !important;
  flex: 0 0 14px !important;
  overflow: visible !important;
  color: #aaa !important;
  transform: rotate(90deg) !important;
  transform-origin: center !important;
  transition: none !important;
}

html body.single-product #page .ho12-simple-dropdown-arrow path {
  fill: currentColor !important;
  stroke: none !important;
}

html body.single-product #page .ho12-simple-custom-dropdown.open .ho12-simple-dropdown-arrow {
  transform: rotate(270deg) !important;
}

html body.single-product #page #ho12-pd-policy-title::after {
  content: none !important;
  display: none !important;
}

html body.single-product #page #ho12-pd-policy-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body.single-product #page #ho12-pd-policy-title .ho12-pd-policy-toggle-arrow {
  display: block !important;
  width: 8px !important;
  height: 14px !important;
  min-width: 8px !important;
  flex: 0 0 8px !important;
  margin-right: 4px !important;
  overflow: visible !important;
  color: #aaa !important;
  transform: rotate(90deg) !important;
  transform-origin: center !important;
  transition: none !important;
}

html body.single-product #page #ho12-pd-policy-title .ho12-pd-policy-toggle-arrow path {
  fill: currentColor !important;
  stroke: none !important;
}

html body.single-product #page .ho12-pd-policy.is-open #ho12-pd-policy-title .ho12-pd-policy-toggle-arrow {
  transform: rotate(270deg) !important;
}

/* Keep the main-page menu at the same 740px / 56px scale as every other page.
 * INTRO exits to the main page, so a larger home-only scale causes a visible jump. */
@media (min-width: 769px) {
  html body.page-id-12 #ho12-header #ho12-planet-nav {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: center !important;
    width: 740px !important;
    max-width: 740px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    column-gap: 0 !important;
  }

  html body.page-id-12 #ho12-header #ho12-planet-nav > .ho12-pnav-item {
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    justify-self: center !important;
  }

  html body.page-id-12 #ho12-header #ho12-planet-nav > .ho12-pnav-item .ho12-pnav-planet,
  html body.page-id-12 #ho12-header #ho12-planet-nav > .ho12-pnav-item .ho12-planet-static,
  html body.page-id-12 #ho12-header #ho12-planet-nav > .ho12-pnav-item .ho12-planet-gif {
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
  }

  html body.page-id-12 #page #ho12-works-grid#ho12-works-grid.ho12-works-grid {
    display: grid !important;
    width: 808px !important;
    max-width: 808px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-content: center !important;
    justify-items: center !important;
    column-gap: 0 !important;
    margin-left: -34px !important;
    margin-right: -34px !important;
  }

  html body.page-id-12 #page #ho12-works-grid#ho12-works-grid .ho12-work-card {
    width: 197px !important;
    max-width: 197px !important;
    height: 246px !important;
    min-height: 246px !important;
    aspect-ratio: 197 / 246 !important;
    justify-self: center !important;
  }
}

/* Header artwork alignment against the original main-page capture.
 * Match visible artwork, including transparent padding inside the assets. */
@media (min-width: 769px) {
  html body #ho12-header .ho12-hd-search {
    left: 5px !important;
  }

  html body #ho12-header .ho12-hd-search-img {
    width: 51px !important;
    height: 51px !important;
  }

  html body #ho12-header .ho12-logo,
  html body #ho12-header .ho12-logo:hover {
    position: relative !important;
    left: 40px !important;
    transform: none !important;
  }

  html body #ho12-header .ho12-logo-img {
    width: auto !important;
    height: 138px !important;
    max-height: 138px !important;
  }

  html body #ho12-header .ho12-hd-user-wrapper {
    left: -15px !important;
    top: -6px !important;
    width: 52px !important;
    height: 52px !important;
  }

  html body.logged-in #ho12-header .ho12-hd-user-icon.ho12-standing {
    position: relative !important;
    top: -12px !important;
  }

  html body.logged-in #ho12-header .ho12-hd-user-icon.ho12-standing,
  html body.logged-in #ho12-header .ho12-hd-user-icon.ho12-standing .ho12-hd-standing-img {
    width: 18px !important;
    min-width: 18px !important;
    height: 36px !important;
    max-height: 36px !important;
  }

  html body #ho12-header .ho12-hd-user-wrapper > .ho12-hd-user-tree.ho12-pdf18-speech-menu {
    top: -57px !important;
    width: 136px !important;
    height: 72px !important;
  }

  html body #ho12-header .ho12-pdf18-speech-menu > .ho12-pdf18-speech-link-blue {
    left: 0 !important;
    top: 26px !important;
    width: 44px !important;
    height: 45px !important;
  }

  html body #ho12-header .ho12-pdf18-speech-menu > .ho12-pdf18-speech-link-green {
    left: 45px !important;
    top: 0 !important;
    width: 45px !important;
    height: 46px !important;
  }

  html body #ho12-header .ho12-pdf18-speech-menu > .ho12-pdf18-speech-link-yellow {
    left: 92px !important;
    right: auto !important;
    top: 26px !important;
    width: 44px !important;
    height: 45px !important;
  }
}

/* Keep the expanded search-bubble artwork inside its animated width.
 * The input padding previously enlarged the content-box and clipped its
 * right-hand outline at the parent's 150px boundary. */
@media (min-width: 769px) {
  html body #ho12-header .ho12-hd-search-expand,
  html body #ho12-header .ho12-hd-search-expand #ho12-search-input {
    box-sizing: border-box !important;
  }

  html body #ho12-header .ho12-hd-search:is(:hover, :focus-within, .active) > .ho12-hd-search-expand {
    overflow: visible !important;
  }
}

/* Login keep-awake state: the checked comet artwork has a much wider source
 * canvas than the dormant planet. Enlarge and offset the complete artwork so
 * the circular planet itself keeps the same visible diameter in both states. */
html body.page-id-17 .ho12-checkbox-box {
  overflow: visible !important;
}

html body.page-id-17 #page .ho12-checkbox-box .rem-icon-checked {
  inset: auto !important;
  left: -3px !important;
  top: -16px !important;
  right: auto !important;
  bottom: auto !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  transform-origin: center !important;
  object-fit: contain !important;
}

/* Login secondary actions: the password-recovery drawing has optically
 * heavier source strokes, so reduce only that artwork while preserving the
 * shared lower alignment with the boarding icon. */
html body.page-id-17 #page .ho12-login-sub-links .ho12-sub-link-item img[alt='비밀번호 찾기'] {
  width: 50px !important;
  min-width: 50px !important;
  height: 50px !important;
  min-height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  transform: none !important;
}

/* Login icon hover labels: match the original PDF P4 typography, colors and
 * icon-specific placement. The source uses plain 12px Nanum Gothic labels
 * without a bubble, pointer, shadow or hover movement. */
html body.page-id-17 #page .ho12-login-box .ho12-tooltip-wrap > .ho12-tooltip-bubble {
  display: block !important;
  width: max-content !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #afabab !important;
  font-family: 'Nanum Gothic', 'Noto Sans KR', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .12s linear, visibility .12s linear !important;
  transform: none !important;
}

html body.page-id-17 #page .ho12-login-box .ho12-tooltip-wrap > .ho12-tooltip-bubble::before,
html body.page-id-17 #page .ho12-login-box .ho12-tooltip-wrap > .ho12-tooltip-bubble::after {
  display: none !important;
  content: none !important;
}

html body.page-id-17 #page .ho12-login-box .ho12-tooltip-wrap:is(:hover, :focus-within) > .ho12-tooltip-bubble {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Keep-awake label: directly to the right of the dormant/active mark. */
html body.page-id-17 #page .ho12-remember-wrapper .ho12-tooltip-wrap > .ho12-tooltip-bubble {
  left: calc(100% + 8px) !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

html body.page-id-17 #page .ho12-remember-wrapper .ho12-tooltip-wrap:is(:hover, :focus-within) > .ho12-tooltip-bubble {
  transform: translateY(-50%) !important;
}

/* Main login action: label sits to the left and shares the icon baseline. */
html body.page-id-17 #page .ho12-submit-wrapper .ho12-tooltip-wrap > .ho12-tooltip-bubble {
  left: auto !important;
  right: calc(100% + 8px) !important;
  top: auto !important;
  bottom: 2px !important;
}

/* Social labels follow the asymmetric positions and brand tints in P4. */
html body.page-id-17 #page .ho12-sns-login-buttons > .ho12-tooltip-wrap:nth-child(1) > .ho12-tooltip-bubble {
  left: auto !important;
  right: calc(100% + 20px) !important;
  top: 50% !important;
  bottom: auto !important;
  color: #ffe699 !important;
  transform: translateY(-50%) !important;
}

html body.page-id-17 #page .ho12-sns-login-buttons > .ho12-tooltip-wrap:nth-child(1):is(:hover, :focus-within) > .ho12-tooltip-bubble {
  transform: translateY(-50%) !important;
}

html body.page-id-17 #page .ho12-sns-login-buttons > .ho12-tooltip-wrap:nth-child(2) > .ho12-tooltip-bubble {
  left: 50% !important;
  right: auto !important;
  top: calc(100% + 6px) !important;
  bottom: auto !important;
  color: #c5e0b4 !important;
  transform: translateX(-50%) !important;
}

html body.page-id-17 #page .ho12-sns-login-buttons > .ho12-tooltip-wrap:nth-child(2):is(:hover, :focus-within) > .ho12-tooltip-bubble {
  transform: translateX(-50%) !important;
}

html body.page-id-17 #page .ho12-sns-login-buttons > .ho12-tooltip-wrap:nth-child(3) > .ho12-tooltip-bubble {
  left: calc(100% + 6px) !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  color: #a8c8fd !important;
  transform: translateY(-50%) !important;
}

html body.page-id-17 #page .ho12-sns-login-buttons > .ho12-tooltip-wrap:nth-child(3):is(:hover, :focus-within) > .ho12-tooltip-bubble {
  transform: translateY(-50%) !important;
}

/* Registration P5 final text tone. The shortcode emits later inline rules,
   so keep this selector explicit enough to preserve the reference gray. */
@media (min-width: 769px) {
  html body.page-id-118 #page .ho12-login.ho12-center-login .ho12-register-card-container #ho12-reg-form .ho12-register-box .ho12-reg-label,
  html body.page-id-118 #page .ho12-login.ho12-center-login .ho12-register-card-container #ho12-reg-form .ho12-reg-input-container input,
  html body.page-id-118 #page .ho12-login.ho12-center-login .ho12-register-card-container #ho12-reg-form .ho12-reg-input-container input::placeholder,
  html body.page-id-118 #page .ho12-login.ho12-center-login .ho12-register-card-container #ho12-reg-form .ho12-reg-verify-label,
  html body.page-id-118 #page .ho12-login.ho12-center-login .ho12-register-card-container #ho12-reg-form .ho12-reg-checkbox-label {
    color: #9b9b9b !important;
    font-weight: 600 !important;
  }
}

/* Boarding and password recovery labels flank their drawings. */
html body.page-id-17 #page .ho12-login-sub-links > .ho12-tooltip-wrap:nth-child(1) > .ho12-tooltip-bubble {
  left: auto !important;
  right: calc(100% + 14px) !important;
  top: auto !important;
  bottom: 1px !important;
}

html body.page-id-17 #page .ho12-login-sub-links > .ho12-tooltip-wrap:nth-child(2) > .ho12-tooltip-bubble {
  left: calc(100% + 14px) !important;
  right: auto !important;
  top: auto !important;
  bottom: 4px !important;
}

/* -------------------------------------------------------------------------
 * Art goods P4 — accordion categories and five-column recommendation rail
 * ---------------------------------------------------------------------- */
html body.page-id-15 #page #ho12-goods-category-accordion {
  position: static !important;
  width: 740px !important;
  max-width: 740px !important;
  min-height: 0 !important;
  margin: 0 auto 28px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  font-family: 'KoPubWorldDotum', 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
}

html body.page-id-15 #page #ho12-goods-category-accordion .ho12-goods-acc-links {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 78px !important;
  width: 100% !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 10px 0 24px !important;
  border: 0 !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

html body.page-id-15 #page #ho12-goods-category-accordion .ho12-goods-acc-link {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #afabab !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transform: none !important;
  transition: color .12s linear !important;
}

html body.page-id-15 #page #ho12-goods-category-accordion .ho12-goods-acc-link::before,
html body.page-id-15 #page #ho12-goods-category-accordion .ho12-goods-acc-link::after {
  display: none !important;
  content: none !important;
}

html body.page-id-15 #page #ho12-goods-category-accordion .ho12-goods-acc-link:is(:hover, :focus-visible),
html body.page-id-15 #page #ho12-goods-category-accordion .ho12-goods-acc-link.active {
  color: #737373 !important;
  transform: none !important;
}

html body.page-id-15 #page .ho12-goods-content-wrapper,
html body.page-id-15 #page .ho12-goods-featured-slider-wrap,
html body.page-id-15 #page .ho12-goods-featured-slider-container,
html body.page-id-15 #page .ho12-goods-grid {
  width: 740px !important;
  max-width: 740px !important;
  box-sizing: border-box !important;
}

html body.page-id-15 #page .ho12-goods-content-wrapper {
  position: relative !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

html body.page-id-15 #page .ho12-goods-featured-slider-wrap {
  position: relative !important;
  margin: 0 auto 24px !important;
  overflow: visible !important;
}

html body.page-id-15 #page .ho12-goods-featured-slider-container {
  margin: 0 auto !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
}

html body.page-id-15 #page .ho12-goods-featured-slider-container::-webkit-scrollbar {
  display: none !important;
}

html body.page-id-15 #page .ho12-goods-featured-slider-track {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  width: max-content !important;
  min-width: 100% !important;
  transform: none !important;
}

html body.page-id-15 #page .ho12-goods-featured-slider-track > .ho12-goods-card,
html body.page-id-15 #page .ho12-goods-grid > .ho12-goods-card {
  flex: 0 0 132px !important;
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  margin: 0 !important;
  transform: none !important;
}

html body.page-id-15 #page .ho12-goods-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 132px) !important;
  justify-content: space-between !important;
  gap: 24px 0 !important;
  margin: 0 auto !important;
}

html body.page-id-15 #page .ho12-goods-card:is(:hover, :focus-visible),
html body.page-id-15 #page .ho12-goods-card:is(:hover, :focus-visible) img {
  transform: none !important;
}

html body.page-id-15 #page .ho12-slider-nav,
html body.page-id-15 #page .ho12-slider-nav:is(:hover, :focus-visible, :active) {
  translate: none !important;
  scale: 1 !important;
  transform: translateY(-50%) !important;
  transition: none !important;
}

html body.page-id-15 #page .ho12-slider-nav svg,
html body.page-id-15 #page .ho12-slider-nav:is(:hover, :focus-visible, :active) svg {
  transition: none !important;
}

html body.page-id-15 #page .ho12-goods-featured-slider-wrap.ho12-filter-hidden,
html body.page-id-15 #page .ho12-goods-grid .ho12-goods-card.ho12-filter-hidden {
  display: none !important;
}

html body.page-id-15 #page .ho12-goods-featured-slider-wrap > .ho12-slider-prev {
  left: -52px !important;
}

html body.page-id-15 #page .ho12-goods-featured-slider-wrap > .ho12-slider-next {
  right: -52px !important;
}

@media (max-width: 768px) {
  html body.page-id-15 #page #ho12-goods-category-accordion,
  html body.page-id-15 #page .ho12-goods-content-wrapper,
  html body.page-id-15 #page .ho12-goods-featured-slider-wrap,
  html body.page-id-15 #page .ho12-goods-featured-slider-container,
  html body.page-id-15 #page .ho12-goods-grid {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
  }

  html body.page-id-15 #page #ho12-goods-category-accordion .ho12-goods-acc-links {
    gap: 34px !important;
  }

  html body.page-id-15 #page .ho12-goods-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  html body.page-id-15 #page .ho12-goods-grid > .ho12-goods-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* Final product-detail lock: source PDF P34 option accordion and basket states. */
html body.single-product #page .ho12-simple-options-container,
html body.single-product #page .ho12-selected-option-summary,
html body.single-product #page .ho12-pd-action-buttons {
  width: 360px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body.single-product #page .ho12-simple-options-container {
  display: block !important;
  margin: 22px 0 6px !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body.single-product #page .ho12-simple-option-label,
html body.single-product #page .ho12-simple-color-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html body.single-product #page .ho12-simple-custom-dropdown {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html body.single-product #page .ho12-simple-dropdown-trigger,
html body.single-product #page .ho12-simple-dropdown-trigger:is(:hover, :focus, :focus-visible, :active) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 29px !important;
  min-height: 29px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-bottom: 1px solid #ececec !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #aaa !important;
  cursor: pointer !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.single-product #page .ho12-simple-dropdown-value {
  color: #aaa !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

html body.single-product #page .ho12-simple-dropdown-arrow,
html body.single-product #page .ho12-simple-dropdown-trigger:is(:hover, :focus, :focus-visible, :active) .ho12-simple-dropdown-arrow {
  display: block !important;
  width: 13px !important;
  min-width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  margin: 0 2px 0 12px !important;
  overflow: visible !important;
  color: #aaa !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transform-origin: center !important;
  transition: none !important;
}

html body.single-product #page .ho12-simple-dropdown-arrow path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.35 !important;
  vector-effect: non-scaling-stroke !important;
}

html body.single-product #page .ho12-simple-custom-dropdown.open .ho12-simple-dropdown-arrow {
  transform: rotate(-90deg) !important;
}

html body.single-product #page .ho12-simple-dropdown-menu {
  position: static !important;
  inset: auto !important;
  display: none !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 7px 2px 2px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  z-index: auto !important;
}

html body.single-product #page .ho12-simple-custom-dropdown.open .ho12-simple-dropdown-menu {
  display: flex !important;
}

html body.single-product #page .ho12-simple-dropdown-menu-head {
  display: none !important;
}

html body.single-product #page .ho12-simple-dropdown-option,
html body.single-product #page .ho12-simple-dropdown-option:is(:hover, :focus, :focus-visible, :active) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 15px !important;
  width: 100% !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 2px 1px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #aaa !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  text-align: right !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.single-product #page .ho12-simple-dropdown-radio {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 12px !important;
  min-width: 12px !important;
  height: 12px !important;
  border: 2px solid #aaa !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  background: #fff !important;
}

html body.single-product #page .ho12-simple-dropdown-radio > i {
  display: none !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #f5b800 !important;
}

html body.single-product #page .ho12-simple-dropdown-option[aria-selected="true"] .ho12-simple-dropdown-radio > i {
  display: block !important;
}

html body.single-product #page .ho12-option-warning {
  position: static !important;
  width: max-content !important;
  max-width: 360px !important;
  min-height: 0 !important;
  margin: 8px 0 2px !important;
  padding: 4px 9px !important;
  border: 1.5px solid #f3b300 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  box-sizing: border-box !important;
  transform: none !important;
}

html body.single-product #page .ho12-option-warning > span {
  position: static !important;
  display: inline !important;
  color: inherit !important;
}

html body.single-product #page .ho12-selected-option-summary {
  flex-direction: column !important;
  gap: 7px !important;
  min-height: 0 !important;
  margin: 9px 0 0 !important;
  padding: 0 2px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.single-product #page .ho12-summary-border-svg {
  display: none !important;
}

html body.single-product #page .ho12-summary-top-row,
html body.single-product #page .ho12-summary-bottom-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html body.single-product #page .ho12-summary-name,
html body.single-product #page .ho12-summary-total-qty-text,
html body.single-product #page .ho12-summary-total-price-label {
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

html body.single-product #page .ho12-summary-controls-group,
html body.single-product #page .ho12-summary-qty-controls,
html body.single-product #page .ho12-summary-price-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html body.single-product #page .ho12-qty-btn-dec,
html body.single-product #page .ho12-qty-btn-inc {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 11px !important;
  height: 11px !important;
  color: #aaa !important;
  transform: none !important;
}

html body.single-product #page .ho12-arrow-qty-svg {
  width: 7px !important;
  height: 10px !important;
}

html body.single-product #page .ho12-qty-val {
  min-width: 12px !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

html body.single-product #page .ho12-summary-remove-btn {
  width: 12px !important;
  min-width: 12px !important;
  height: 12px !important;
  transform: none !important;
}

html body.single-product #page .ho12-summary-price-wrap,
html body.single-product #page .ho12-summary-total-price {
  color: #55c928 !important;
}

html body.single-product #page .ho12-summary-price-wrap .ho12-summary-total-price {
  font-size: 14px !important;
  font-weight: 700 !important;
}

html body.single-product #page .ho12-pd-action-buttons {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 60px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
}

html body.single-product #page .ho12-action-item-cart,
html body.single-product #page .ho12-action-item-cart:is(:hover, :focus-visible, :active) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  width: 54px !important;
  margin: 0 !important;
  color: #f4ba19 !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.single-product #page .ho12-action-cart-basket-img,
html body.single-product #page .ho12-action-item-cart:is(:hover, :focus-visible, :active) .ho12-action-cart-basket-img {
  display: block !important;
  width: 31px !important;
  min-width: 31px !important;
  height: 31px !important;
  object-fit: contain !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
}

html body.single-product #page .ho12-action-cart-label {
  color: #f4ba19 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

html body.single-product .ho12-cart-done-popup {
  padding: 20px !important;
  background: transparent !important;
}

html body.single-product .ho12-cart-done-inner {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  width: 360px !important;
  max-width: calc(100vw - 40px) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border: 1.5px solid #f3b300 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  animation: none !important;
  box-sizing: border-box !important;
}

html body.single-product .ho12-cart-done-inner span,
html body.single-product .ho12-cart-done-inner .ho12-goto-cart-btn {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 768px) {
  html body.single-product #page .ho12-simple-options-container,
  html body.single-product #page .ho12-selected-option-summary,
  html body.single-product #page .ho12-pd-action-buttons {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* EOF cart cascade lock: preserve the 740px PDF basket after legacy rules. */
html body.page-id-15 #page :is(
  .ho12-cart-content-wrapper,
  .ho12-cart-page-wrapper,
  .ho12-cart-tabs-row,
  .ho12-cart-panel,
  .ho12-cart-list,
  .ho12-cart-item-row,
  .ho12-cart-actions,
  .ho12-cart-summary-wrap
) {
  width: min(740px, calc(100vw - 28px)) !important;
  max-width: 740px !important;
  box-sizing: border-box !important;
}

html body.page-id-15 #page .ho12-cart-page-wrapper {
  margin: 28px auto 56px !important;
  padding: 0 !important;
}

html body.page-id-15 #page .ho12-cart-tabs-row {
  justify-content: center !important;
  gap: 42px !important;
  min-height: 70px !important;
  margin: 0 auto 26px !important;
  padding: 0 !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn,
html body.page-id-15 #page .ho12-cart-tab-btn:is(:hover, :focus-visible, :active) {
  width: 58px !important;
  min-width: 58px !important;
  height: 68px !important;
  min-height: 68px !important;
  gap: 7px !important;
  transform: none !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn::after {
  content: none !important;
  display: none !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn > img,
html body.page-id-15 #page .ho12-cart-tab-btn:is(:hover, :focus-visible, :active) > img {
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  opacity: .28 !important;
  filter: none !important;
  transform: none !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn[data-tab="history"] > img,
html body.page-id-15 #page .ho12-cart-tab-btn[data-tab="history"]:is(:hover, :focus-visible, :active) > img {
  transform: scaleY(-1) !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn > span {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  color: #aaa !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn.active > img,
html body.page-id-15 #page .ho12-cart-tab-btn:is(:hover, :focus-visible) > img {
  opacity: 1 !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn.active > span,
html body.page-id-15 #page .ho12-cart-tab-btn:is(:hover, :focus-visible) > span {
  color: #f0b800 !important;
}

html body.page-id-15 #page .ho12-cart-item-row {
  display: grid !important;
  grid-template-columns: 18px 60px minmax(0, 1fr) 228px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 76px !important;
  padding: 5px 8px !important;
}

html body.page-id-15 #page .ho12-cart-item-thumb {
  width: 58px !important;
  min-width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
  overflow: hidden !important;
  border: 1.25px solid #ccc !important;
}

html body.page-id-15 #page .ho12-cart-item-thumb img {
  width: 52px !important;
  height: 52px !important;
  margin: auto !important;
}

html body.page-id-15 #page :is(.ho12-cart-item-checkbox, #ho12-cart-select-all),
html body.page-id-15 #page :is(.ho12-cart-item-checkbox, #ho12-cart-select-all):checked {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  border: 1.5px solid #aaa !important;
  border-radius: 50% !important;
  background-image: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

html body.page-id-15 #page :is(.ho12-cart-item-checkbox, #ho12-cart-select-all) {
  background-color: #fff !important;
  box-shadow: none !important;
}

html body.page-id-15 #page :is(.ho12-cart-item-checkbox, #ho12-cart-select-all):checked {
  background-color: #f0b800 !important;
  box-shadow: inset 0 0 0 3px #fff !important;
}

html body.page-id-15 #page .ho12-cart-item-tail {
  display: grid !important;
  grid-template-columns: 92px 104px !important;
  justify-content: end !important;
  gap: 20px !important;
}

html body.page-id-15 #page .ho12-summary-qty-controls,
html body.page-id-15 #page .ho12-summary-qty-controls[aria-busy="true"] {
  display: grid !important;
  grid-template-columns: 15px 22px 15px !important;
  width: 92px !important;
  min-width: 92px !important;
  gap: 6px !important;
  padding: 0 !important;
  border: 0 !important;
}

html body.page-id-15 #page :is(.ho12-cart-qty-btn-dec, .ho12-cart-qty-btn-inc):is(:hover, :focus-visible, :active) {
  color: #aaa !important;
  transform: none !important;
}

html body.page-id-15 #page #ho12-cart-delete-selected:is(:hover, :focus-visible, :active) {
  color: #aaa !important;
  background: transparent !important;
  transform: none !important;
}

html body.page-id-15 #page .ho12-cart-summary-wrap {
  position: relative !important;
  display: flex !important;
  justify-content: flex-end !important;
  margin: 0 0 20px !important;
  padding: 0 8px !important;
}

html body.page-id-15 #page .ho12-cart-summary-box {
  position: static !important;
  width: 218px !important;
  min-width: 218px !important;
  max-width: 218px !important;
  min-height: 104px !important;
  padding: 11px 14px !important;
  gap: 7px !important;
  border: 1.5px solid #f0b800 !important;
  border-radius: 3px 7px 2px 5px !important;
  background: #fff !important;
  box-shadow: none !important;
}

html body.page-id-15 #page .ho12-cart-summary-box > div {
  min-height: 20px !important;
  padding: 0 !important;
  color: #aaa !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

html body.page-id-15 #page .ho12-cart-summary-box > div:last-child {
  min-height: 25px !important;
  margin-top: 3px !important;
  color: #111 !important;
  font-size: 14px !important;
}

html body.page-id-15 #page #ho12-cart-checkout-btn,
html body.page-id-15 #page #ho12-cart-checkout-btn:is(:hover, :focus-visible, :active) {
  height: 24px !important;
  transform: none !important;
  transition: none !important;
}

html body.page-id-15 #page .ho12-cart-selection-warning {
  position: absolute !important;
  left: 10px !important;
  top: 0 !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  border: 2px solid #f0b800 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #f0b800 !important;
  transform: none !important;
}

@media (max-width: 680px) {
  html body.page-id-15 #page .ho12-cart-item-row {
    grid-template-columns: 18px 48px minmax(0, 1fr) !important;
  }

  html body.page-id-15 #page .ho12-cart-item-tail {
    grid-column: 3 / 4 !important;
    grid-template-columns: 78px 92px !important;
    justify-content: start !important;
    gap: 12px !important;
  }
}

/* 2026-08-09 PDF lock: product checkout stays inside the shared content rail. */
html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-wrapper,
html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page form.checkout {
  width: min(740px, calc(100vw - 32px)) !important;
  max-width: 740px !important;
  margin: 42px auto 80px !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: min(340px, 100%) !important;
  max-width: 340px !important;
  margin: 0 auto !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-content > div,
html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-shipping-card,
html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-order-section,
html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-items-list {
  width: min(340px, 100%) !important;
  min-width: 0 !important;
  max-width: 340px !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-shipping-card,
html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-order-section,
html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-summary-box {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-field {
  width: 100% !important;
  max-width: none !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-summary-box {
  width: min(220px, 100%) !important;
  min-width: 0 !important;
  max-width: 220px !important;
  margin: 13px auto 0 !important;
  padding: 0 !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-order-overview,
html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-order-total,
html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-summary-row,
html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-summary-total {
  transform: none !important;
  transition: none !important;
}

@media (max-width: 560px) {
  html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-wrapper,
  html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page form.checkout {
    width: calc(100vw - 24px) !important;
    margin: 26px auto 64px !important;
  }

  html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-content,
  html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-content > div,
  html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-shipping-card,
  html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-order-section,
  html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-items-list {
    width: 100% !important;
    max-width: 340px !important;
  }
}

/* 2026-08-09 late cascade lock: keep the address manager in the product rail. */
html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-wrapper {
  position: relative !important;
  min-height: 430px !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-wrapper.is-address-panel-open .ho12-checkout-content {
  margin-left: 0 !important;
  margin-right: auto !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-wrapper > #ho12-address-modal {
  position: absolute !important;
  inset: 0 0 auto auto !important;
  display: none !important;
  width: 300px !important;
  max-width: 300px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  z-index: 30 !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-wrapper.is-address-panel-open > #ho12-address-modal {
  display: block !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-modal h3 {
  margin: 47px 0 14px !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-saved-addresses-list {
  max-height: none !important;
  overflow: visible !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-modal :is(input, button) {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-search-trigger,
html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-modal .ho12-address-postcode-row input,
html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-editor > input {
  height: 25px !important;
  min-height: 25px !important;
  line-height: 25px !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-modal .ho12-address-panel-close {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
}

@media (max-width: 760px) {
  html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-wrapper.is-address-panel-open .ho12-checkout-content {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-wrapper > #ho12-address-modal,
  html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page .ho12-checkout-wrapper.is-address-panel-open > #ho12-address-modal {
    position: relative !important;
    inset: auto !important;
    width: min(300px, 100%) !important;
    max-width: 300px !important;
    margin: 32px auto 0 !important;
    transform: none !important;
  }
}

/* Address editor uses native state so WooCommerce fragment refreshes cannot
   immediately collapse the new-address form after the user opens it. */
html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-editor-toggle:not(:checked) ~ #ho12-address-editor {
  display: none !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-editor-toggle:checked ~ #ho12-address-editor {
  display: grid !important;
}

/* The address panel has more than one checkout lifecycle listener. Keep the
   editor's visible state on the panel itself so no later listener can collapse
   the form immediately after the user opens it. */
html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-modal:not(.is-editor-open) #ho12-address-editor {
  display: none !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-modal.is-editor-open #ho12-address-editor {
  display: grid !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page :is(#ho12-address-new-toggle, #ho12-address-editor-cancel) {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  user-select: none !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: none !important;
}

html body.woocommerce-checkout.ho12-checkout-goods.ho12-checkout-products #page #ho12-address-editor #ho12-address-editor-cancel {
  display: inline-block !important;
  width: max-content !important;
  margin: 0 !important;
  color: #aaa !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
}

/* Keep option validation as the reference's inline yellow box. */
html body.single-product #page #ho12-option-warning {
  position: static !important;
  display: block !important;
  width: max-content !important;
  max-width: 360px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 8px 0 2px !important;
  padding: 4px 9px !important;
  overflow: visible !important;
  border: 1.5px solid #f3b300 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #aaa !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  visibility: visible !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
}

html body.single-product #page #ho12-option-warning > span,
html body.single-product #page #ho12-option-warning:is(:hover, :focus, :focus-within) > span {
  position: static !important;
  inset: auto !important;
  display: inline !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
}

/* 20260810: shared 740px content rail; the episode viewer and About stay unrestricted. */
@media (min-width: 769px) {
  html body:not(.single-ho12_episode) #page:not(:has(.ho12-about)),
  html body:not(.single-ho12_episode) #page:not(:has(.ho12-about)) #content,
  html body:not(.single-ho12_episode) #page:not(:has(.ho12-about)) .site-main {
    width: 740px !important;
    max-width: 740px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* The six header planets occupy the centered 740px inner axis. */
  html body.page-id-12 #page #ho12-works-grid#ho12-works-grid.ho12-works-grid {
    display: grid !important;
    width: 740px !important;
    max-width: 740px !important;
    grid-template-columns: repeat(3, 197px) !important;
    justify-content: space-between !important;
    justify-items: center !important;
    column-gap: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Match the hand-drawn title frame to the shared content rail. */
  html body.single-ho12_work #page .ho12-sw-title-frame {
    width: 740px !important;
    max-width: 740px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    translate: none !important;
    scale: 1 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Pull the five-column episode row 20px inward on both sides. */
  html body.single-ho12_work #page .ho12-planets.novel-planets {
    width: 700px !important;
    max-width: 700px !important;
    grid-template-columns: repeat(5, 76px) !important;
    justify-content: space-between !important;
    justify-items: center !important;
    column-gap: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* 20260810: product-detail polish.
 * Related goods use the entire thumbnail frame, and their yellow outline
 * matches the lighter weight of the primary product frame. */
html body.single-product #page .ho12-pd-related-section ul.products li.product,
html body.single-product #page .ho12-pd-related-section ul.products li.product:nth-child(n) {
  padding: 0 !important;
  border-width: 2px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html body.single-product #page .ho12-pd-related-section ul.products li.product
  > a.woocommerce-LoopProduct-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body.single-product #page .ho12-pd-related-section ul.products li.product
  > a.woocommerce-LoopProduct-link > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
}

/* 2026-08-11: keep product option typography and selection marks stable.
 * Earlier 12px hover rules overrode the later 14px option scale, so a label
 * visibly changed size under the pointer. Both simple and variable products
 * now use the same type size and the same muted radio treatment. */
html body.single-product #page .ho12-simple-dropdown-option,
html body.single-product #page .ho12-simple-dropdown-option:is(:hover, :focus, :focus-visible, :active),
html body.single-product #page .ho12-custom-dropdown-option-item,
html body.single-product #page .ho12-custom-dropdown-option-item:is(:hover, :focus, :focus-within, :active),
html body.single-product #page .ho12-custom-dropdown-option-item:is(:hover, :focus, :focus-within, :active)
  .ho12-custom-dropdown-option-text {
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
  transition: color 0.15s ease !important;
}

html body.single-product #page .ho12-simple-dropdown-radio {
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  border: 2px solid #aaa !important;
  background: #fff !important;
}

html body.single-product #page .ho12-simple-dropdown-radio > i {
  width: 6px !important;
  height: 6px !important;
  background: #aaa !important;
}

html body.single-product #page .ho12-simple-dropdown-option.active .ho12-simple-dropdown-radio,
html body.single-product #page .ho12-simple-dropdown-option[aria-selected="true"] .ho12-simple-dropdown-radio {
  border-color: #aaa !important;
  background: #fff !important;
}

html body.single-product #page .ho12-simple-dropdown-option.active .ho12-simple-dropdown-radio > i,
html body.single-product #page .ho12-simple-dropdown-option[aria-selected="true"] .ho12-simple-dropdown-radio > i {
  background: #aaa !important;
}

html body.single-product #page .ho12-custom-dropdown-option-radio,
html body.single-product #page .ho12-custom-dropdown-radio-svg {
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
}

html body.single-product #page .ho12-custom-dropdown-radio-svg .radio-outer {
  stroke: #aaa !important;
  stroke-width: 2 !important;
  fill: #fff !important;
}

html body.single-product #page .ho12-custom-dropdown-radio-svg .radio-inner[fill="none"] {
  fill: none !important;
}

html body.single-product #page .ho12-custom-dropdown-radio-svg .radio-inner:not([fill="none"]) {
  fill: #aaa !important;
}

/* 2026-08-13: inset the standing-user control so its fully expanded
 * three-bubble artwork ends on the right edge of the 1000px galaxy menu. */
@media (min-width: 769px) {
  html body #ho12-header .ho12-hd-user-wrapper {
    left: -73px !important;
  }
}

/* 2026-08-12: keep repeated desktop collections on the same 1000px rail as
 * the enlarged home page. Tablet and mobile retain their existing layouts. */
@media (min-width: 1041px) {
  /* Novel and comics archives: match the home page's 3 x 272px card rhythm. */
  html body:is(.page-id-13, .page-id-14) #page #ho12-works-grid,
  html body:is(.page-id-13, .page-id-14) #page .ho12-works-grid,
  html body:is(.page-id-13, .page-id-14) #page .ho12-novels-grid,
  html body:is(.page-id-13, .page-id-14) #page .ho12-comics-grid {
    width: 1000px !important;
    max-width: 1000px !important;
    grid-template-columns: repeat(3, 272px) !important;
    justify-content: space-between !important;
    justify-items: center !important;
    column-gap: 0 !important;
    row-gap: 34px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  html body:is(.page-id-13, .page-id-14) #page :is(.ho12-works-grid, .ho12-novels-grid, .ho12-comics-grid) .ho12-work-card {
    width: 272px !important;
    min-width: 272px !important;
    max-width: 272px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 272 / 340 !important;
    margin: 0 !important;
  }

  /* Art goods: retain five columns while scaling the 740px cards by the
   * same 1000 / 740 ratio used for the main content rail. */
  html body.page-id-15 #page .ho12-goods-gnb-sub,
  html body.page-id-15 #page #ho12-goods-category-accordion,
  html body.page-id-15 #page .ho12-goods-content-wrapper,
  html body.page-id-15 #page .ho12-goods-featured-slider-wrap,
  html body.page-id-15 #page .ho12-goods-featured-slider-container,
  html body.page-id-15 #page .ho12-goods-grid {
    width: 1000px !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  html body.page-id-15 #page .ho12-goods-featured-slider-track {
    gap: 27.5px !important;
  }

  html body.page-id-15 #page .ho12-goods-featured-slider-track > .ho12-goods-card,
  html body.page-id-15 #page .ho12-goods-grid > .ho12-goods-card {
    flex: 0 0 178px !important;
    width: 178px !important;
    min-width: 178px !important;
    max-width: 178px !important;
    height: auto !important;
    aspect-ratio: 272 / 340 !important;
  }

  html body.page-id-15 #page .ho12-goods-grid {
    grid-template-columns: repeat(5, 178px) !important;
    justify-content: space-between !important;
    justify-items: center !important;
    column-gap: 0 !important;
    row-gap: 32px !important;
  }

  /* My Library: five cards use the same proportional enlargement. */
  html body.page-id-16 #page .ho12-library,
  html body.page-id-16 #page #ho12-lib-grid {
    width: 1000px !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  html body.page-id-16 #page #ho12-lib-grid {
    grid-template-columns: repeat(5, 162px) !important;
    justify-content: space-between !important;
    justify-items: center !important;
    column-gap: 0 !important;
    row-gap: 32px !important;
  }

  html body.page-id-16 #page #ho12-lib-grid .ho12-lib-item {
    width: 162px !important;
    min-width: 162px !important;
    max-width: 162px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 272 / 340 !important;
    margin: 0 !important;
  }

  /* Work detail: the title rail follows the 1000px header and the five
   * episode planets keep the original 20px inset, proportionally enlarged. */
  html body.single-ho12_work #page .ho12-single-work,
  html body.single-ho12_work #page .ho12-sw-title-frame,
  html body.single-ho12_work #page .ho12-episodes-section {
    width: 1000px !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  html body.single-ho12_work #page .ho12-planets.novel-planets {
    width: 946px !important;
    max-width: 946px !important;
    grid-template-columns: repeat(5, 103px) !important;
    justify-content: space-between !important;
    justify-items: center !important;
    column-gap: 0 !important;
    row-gap: 49px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  html body.single-ho12_work #page .ho12-planets.novel-planets > .ho12-planet {
    width: 103px !important;
    min-width: 103px !important;
    max-width: 103px !important;
    height: 103px !important;
    min-height: 103px !important;
    max-height: 103px !important;
    margin: 0 !important;
  }
}

/* 2026-08-25: registered devices grow from the current-device left rail. */
html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list > .ho12-dev-card {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card > :is(div:first-of-type, .ho12-dev-card-icon) {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-item-name-wrap {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  text-align: center !important;
  overflow: visible !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-item-name-text {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  text-align: center !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-item-rename-input {
  display: none !important;
}

/* 2026-08-26: device manage mode — inline rename and compact vertical rhythm */
html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-devices-section {
  margin-top: 0 !important;
  row-gap: 24px !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device
  #ho12-devices-section .ho12-dev-current > h3,
html body.page-id-17 #page#page#page#page #ho12-tab-device
  #ho12-devices-section .ho12-dev-list-section > h3 {
  margin-bottom: 20px !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device
  #ho12-devices-section .ho12-dev-current-info {
  margin-bottom: 0 !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device
  #ho12-devices-section .ho12-dev-item-name-wrap {
  position: relative !important;
  overflow: visible !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device
  #ho12-devices-section.is-managing .ho12-dev-item-name-wrap:not(.is-renaming)
  .ho12-dev-item-name-text {
  cursor: text !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device
  #ho12-devices-section.is-managing .ho12-dev-item-name-wrap.is-renaming
  .ho12-dev-item-name-text {
  display: none !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device
  #ho12-devices-section.is-managing .ho12-dev-item-name-wrap.is-renaming
  .ho12-dev-item-rename-input {
  display: block !important;
  position: absolute !important;
  z-index: 12 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100px !important;
  min-width: 100px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #a3a3a3 !important;
  caret-color: #9b9b9b !important;
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  text-align: left !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-remove-btn-circle {
  right: auto !important;
  left: 36px !important;
}

@media (min-width: 1041px) {
  html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
    > .ho12-dev-card .ho12-dev-item-name-wrap {
    width: 45.7142857px !important;
    min-width: 45.7142857px !important;
    max-width: 45.7142857px !important;
  }

  html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
    > .ho12-dev-card .ho12-dev-remove-btn-circle {
    left: 50px !important;
  }
}

/* The rails above were widened from 320px to 340px. Restore the 10px center
 * compensation so their painted origin remains on the login e-mail rail. */
@media (min-width: 1041px) {
  html body.page-id-17 #page#page#page#page #ho12-tab-device :is(
    .ho12-dev-header,
    .ho12-dev-current,
    .ho12-dev-list-section
  ) {
    position: relative !important;
    left: -50.4px !important;
  }
}

@media (min-width: 601px) and (max-width: 1040px) {
  html body.page-id-17 #page#page#page#page #ho12-tab-device :is(
    .ho12-dev-header,
    .ho12-dev-current,
    .ho12-dev-list-section
  ) {
    position: relative !important;
    left: -45px !important;
  }
}

/* 2026-08-31 PASSWORD RECOVERY LABEL — FINAL CASCADE OVERRIDE
 * The row box and input rail already match the login form to sub-pixel
 * precision.  The visible label did not: login right-aligns text inside its
 * 90px label column while recovery inherited left alignment.  Reuse the same
 * painted-text origin without moving either form or its input rail. */
html body.page-id-1391 #page#page#page#page#page
  .ho12-lost-password-screen .ho12-lost-row > .ho12-lost-label {
  text-align: right !important;
}

/* 2026-08-28 SHARED FIELD-ERROR STANDARD
 * A validation marker replaces the invalid value. All marker tooltips use
 * the same neutral typography as the login-page helper copy. */
html body .ho12-required-question-anchor[data-ho12-tooltip]::after {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #9b9b9b !important;
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.15px !important;
}

html body :is(input, textarea, select).ho12-required-missing {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: transparent !important;
}

/* 2026-08-26 DEVICE CARD LABEL RHYTHM — keep the current-state line separate. */
html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-item-name-wrap {
  display: block !important;
  min-height: 20px !important;
  line-height: 20px !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-item-name-text {
  min-height: 20px !important;
  line-height: 20px !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-current-label {
  display: block !important;
  width: 32px !important;
  min-width: 32px !important;
  margin: 7px 0 0 !important;
  line-height: 12px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

@media (min-width: 1041px) {
  html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
    > .ho12-dev-card .ho12-dev-current-label {
    width: 45.7142857px !important;
    min-width: 45.7142857px !important;
  }
}

/* 2026-08-26 DEVICE ACTION ALIGNMENT — FINAL */
html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-register-btn {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-remove-btn-circle {
  right: auto !important;
  left: 36px !important;
}

@media (min-width: 1041px) {
  html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
    > .ho12-dev-card .ho12-dev-remove-btn-circle {
    left: 50px !important;
  }
}

/* 2026-08-26 REAL-CHROME ALIGNMENT: the login e-mail field receives a
 * -4.285714px pre-interaction autofill translation. Mirror that painted
 * origin on password recovery so both value rails start at the same pixel. */
@media (min-width: 601px) {
  html body.page-id-1391 #page#page#page#page
    .ho12-lost-password-screen .ho12-lost-input-wrap {
    transform: translateX(-4.285714px) !important;
  }
}

/* 2026-08-26 DEVICE MANAGE STABILITY — final cascade override. */
html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-item-name-wrap {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  text-align: center !important;
  overflow: visible !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-item-name-text {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  text-align: center !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-item-rename-input {
  display: none !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-remove-btn-circle {
  right: auto !important;
  left: 36px !important;
}

@media (min-width: 1041px) {
  html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
    > .ho12-dev-card .ho12-dev-item-name-wrap {
    width: 45.7142857px !important;
    min-width: 45.7142857px !important;
    max-width: 45.7142857px !important;
  }

  html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
    > .ho12-dev-card .ho12-dev-remove-btn-circle {
    left: 50px !important;
  }
}

/* 2026-08-26 DEVICE MANAGE STABILITY — center names beneath the 32px artwork
 * and keep every card frozen in place while delete controls are visible. */
html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-item-name-wrap {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  text-align: center !important;
  overflow: visible !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-item-name-text {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  text-align: center !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-item-rename-input {
  display: none !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-remove-btn-circle {
  right: auto !important;
  left: 36px !important;
}

@media (min-width: 1041px) {
  html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
    > .ho12-dev-card .ho12-dev-item-name-wrap {
    width: 45.7142857px !important;
    min-width: 45.7142857px !important;
    max-width: 45.7142857px !important;
  }

  html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
    > .ho12-dev-card .ho12-dev-remove-btn-circle {
    left: 50px !important;
  }
}

/* 2026-08-26: login is tall enough to reserve a vertical scrollbar while
 * password recovery is not. Reserve the same gutter so both centered shells,
 * labels and field rails share the exact painted x origin in real Chrome. */
@media (min-width: 601px) {
  html:has(body.page-id-17),
  html:has(body.page-id-1391) {
    overflow-y: scroll !important;
    scrollbar-gutter: stable !important;
  }
}

/* 2026-08-25: device name is always visible; registration sits beneath it. */
html body.page-id-17 #page#page#page#page #ho12-tab-device .ho12-dev-register-fields {
  display: grid !important;
  grid-template-columns: 90px minmax(0, 1fr) !important;
  align-items: center !important;
  order: 1 !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-register-btn {
  order: 2 !important;
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* 2026-08-13: share the same desktop center anchor for both user-state figures. */
@media (min-width: 769px) {
  html body:not(.logged-in) #ho12-header#ho12-header#ho12-header .ho12-hd-user {
    position: relative !important;
    left: -68.5px !important;
  }
}

/* Closed options point down; an expanded menu points back up. */
html body.single-product #page .ho12-simple-dropdown-arrow,
html body.single-product #page .ho12-simple-dropdown-trigger:is(:hover, :focus, :focus-visible, :active)
  .ho12-simple-dropdown-arrow {
  transform: rotate(90deg) !important;
}

html body.single-product #page .ho12-simple-custom-dropdown.open .ho12-simple-dropdown-arrow {
  transform: rotate(-90deg) !important;
}

/* 20260810: one arrow language across the public site.
 * Every exceptional chevron/triangle uses the same hand-drawn arrow path as
 * the product gallery, goods carousel, quantity controls, and viewer. */
:root {
  --ho12-arrow-shape: url("../images/ho12-arrow.svg");
}

html body #page :is(
  .ho12-simple-dropdown-arrow,
  .ho12-pd-policy-toggle-arrow,
  .ho12-contact__select-arrow,
  #ho12-toggle-icon,
  .ho12-address-panel-close svg
),
html body .select2-container .select2-selection__arrow b {
  display: block !important;
  border: 0 !important;
  background-color: currentColor !important;
  background-image: none !important;
  -webkit-mask: var(--ho12-arrow-shape) center / contain no-repeat !important;
  mask: var(--ho12-arrow-shape) center / contain no-repeat !important;
  transform-origin: center !important;
  transition: none !important;
}

html body #page :is(
  .ho12-simple-dropdown-arrow,
  .ho12-pd-policy-toggle-arrow,
  .ho12-address-panel-close svg
) path {
  display: none !important;
}

/* Down/up disclosure arrows. */
html body.single-product #page :is(.ho12-simple-dropdown-arrow,.ho12-pd-policy-toggle-arrow) {
  width: 10px !important;
  min-width: 10px !important;
  height: 17px !important;
  flex: 0 0 10px !important;
  color: #aaa !important;
  transform: rotate(90deg) !important;
}

html body.single-product #page .ho12-simple-custom-dropdown.open .ho12-simple-dropdown-arrow,
html body.single-product #page .ho12-pd-policy.is-open .ho12-pd-policy-toggle-arrow {
  transform: rotate(-90deg) !important;
}

/* Contact form's native-select indicator. */
html body.page-id-19 #page .ho12-contact__select-arrow {
  top: 8px !important;
  right: 9px !important;
  width: 9px !important;
  height: 15px !important;
  color: #aaa6a3 !important;
  pointer-events: none !important;
  transform: rotate(90deg) !important;
}

/* Checkout product-list disclosure. */
html body.woocommerce-checkout #page #ho12-toggle-icon {
  width: 9px !important;
  height: 15px !important;
  color: #aaa !important;
  transform: rotate(90deg) !important;
}

html body.woocommerce-checkout #page #ho12-toggle-icon::before,
html body.woocommerce-checkout #page #ho12-toggle-icon::after {
  content: none !important;
  display: none !important;
}

html body.woocommerce-checkout #page #ho12-toggle-checkout-items.is-open #ho12-toggle-icon {
  transform: rotate(-90deg) !important;
}

/* Address-panel back controls use the same arrow turned left. */
html body.woocommerce-checkout #page #ho12-address-modal .ho12-address-panel-close svg {
  width: 10px !important;
  height: 17px !important;
  color: #aaa !important;
  transform: rotate(180deg) !important;
}

/* Legacy lightbox and WooCommerce pagination controls, if shown. */
html body :is(.ho12-pd-lb-prev,.ho12-pd-lb-next),
html body .woocommerce-pagination :is(.prev,.next) {
  font-size: 0 !important;
}

html body :is(.ho12-pd-lb-prev,.ho12-pd-lb-next)::before,
html body .woocommerce-pagination :is(.prev,.next)::before {
  content: "" !important;
  display: block !important;
  width: 12px !important;
  height: 21px !important;
  background-color: currentColor !important;
  -webkit-mask: var(--ho12-arrow-shape) center / contain no-repeat !important;
  mask: var(--ho12-arrow-shape) center / contain no-repeat !important;
}

html body :is(.ho12-pd-lb-prev,.woocommerce-pagination .prev)::before {
  transform: rotate(180deg) !important;
}

html body :is(.ho12-pd-lb-next,.woocommerce-pagination .next)::before {
  transform: none !important;
}

html body .select2-container .select2-selection__arrow b {
  width: 9px !important;
  height: 15px !important;
  margin: -7px 0 0 -4px !important;
  color: #aaa !important;
  transform: rotate(90deg) !important;
}

html body .select2-container--open .select2-selection__arrow b {
  transform: rotate(-90deg) !important;
}

/* Keep the basket caption suppressed after the arrow-system overrides. */
html body.single-product #page .ho12-action-cart-label {
  display: none !important;
}

/* 20260810: product-detail reference-state correction.
 * The side callouts in the supplied artwork describe transient states; they
 * are not permanent content in the centered product composition. */
html body.single-product #page .ho12-pd-description {
  display: block !important;
}

html body.single-product #page #ho12-option-warning {
  display: none !important;
}

html body.single-product #page #ho12-option-warning.is-visible {
  display: block !important;
}

/* 20260810: art-goods category control is the same disclosure on listing and
 * product-detail pages. Detail pages never pre-activate it just because a
 * product is being viewed; hover/focus opens it transiently and click pins it. */
html body.single-product #page .ho12-goods-detail-filter {
  width: min(740px, calc(100vw - 28px)) !important;
  max-width: 740px !important;
  margin: 0 auto 32px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

html body.single-product #page .ho12-goods-detail-filter .ho12-goods-detail-nav {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
}

html body.single-product #page .ho12-goods-detail-categories img {
  filter: grayscale(100%) opacity(.4) !important;
  opacity: 1 !important;
}

html body.single-product #page .ho12-goods-detail-categories:is(:hover,:focus-visible) img,
html body.single-product #page .ho12-goods-detail-categories.is-active img {
  filter: none !important;
}

html body.single-product #page .ho12-goods-detail-category-panel {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 78px !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transform: none !important;
  box-sizing: border-box !important;
  transition: max-height .22s ease, padding .22s ease, opacity .14s linear, visibility 0s linear .22s !important;
}

html body.single-product #page .ho12-goods-detail-category-panel.is-open {
  max-height: 68px !important;
  padding: 12px 0 20px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition-delay: 0s !important;
}

html body.single-product #page .ho12-goods-detail-category-panel a {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #afabab !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transform: none !important;
}

html body.single-product #page .ho12-goods-detail-category-panel a:is(:hover,:focus-visible) {
  color: #737373 !important;
}

@media (max-width: 768px) {
  html body.single-product #page .ho12-goods-detail-filter {
    width: calc(100vw - 28px) !important;
    margin-bottom: 24px !important;
  }

  html body.single-product #page .ho12-goods-detail-category-panel {
    gap: 34px !important;
  }

  html body.single-product #page .ho12-goods-detail-category-panel a {
    font-size: 14px !important;
  }
}

/* 20260810: product-detail disclosure controls use the same state language as
 * the rest of 12ho: inactive is gray; hover, keyboard focus and open/pressed
 * states are black. */
html body.single-product #page .ho12-pd-thumbs-scroll-btn {
  color: #aaa !important;
  transition: color .14s ease !important;
}

html body.single-product #page .ho12-pd-thumbs-scroll-btn:is(:hover, :focus-visible, :active) {
  color: #111 !important;
}

html body.single-product #page #ho12-pd-policy-title {
  color: #aaa !important;
  transition: color .14s ease !important;
}

html body.single-product #page #ho12-pd-policy-title > span {
  color: #aaa !important;
  transition: color .14s ease !important;
}

html body.single-product #page #ho12-pd-policy-title:is(:hover, :focus-visible),
html body.single-product #page #ho12-pd-policy-title[aria-expanded="true"] {
  color: #111 !important;
}

html body.single-product #page #ho12-pd-policy-title:is(:hover, :focus-visible) > span,
html body.single-product #page #ho12-pd-policy-title[aria-expanded="true"] > span {
  color: #111 !important;
}

html body.single-product #page #ho12-pd-policy-title .ho12-pd-policy-toggle-arrow {
  color: inherit !important;
}

/* 20260810: an opened art-goods sub-navigation is an active state, not merely
 * a hover state. Keep its black/yellow artwork visible until it is closed. */
html body.page-id-15 #page :is(
  .ho12-goods-dots-placeholder,
  .ho12-goods-const-placeholder
):is(.active, [aria-expanded="true"]) .ho12-goods-tab-img {
  filter: none !important;
  opacity: 1 !important;
}

/* 20260810: checkout order disclosure. Price-unit artwork is not a product
 * thumbnail, so it has no frame; the house arrow points down when collapsed
 * and up when expanded. */
html body.woocommerce-checkout.ho12-checkout-products #page
.ho12-checkout-cart-item img.ho12-checkout-line-gamtae-icon {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-toggle-icon {
  width: 10px !important;
  min-width: 10px !important;
  height: 17px !important;
  color: #aaa !important;
  background-color: currentColor !important;
  background-image: none !important;
  -webkit-mask: var(--ho12-arrow-shape) center / contain no-repeat !important;
  mask: var(--ho12-arrow-shape) center / contain no-repeat !important;
  transform: rotate(90deg) !important;
  transform-origin: center !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page
#ho12-toggle-checkout-items:is(.is-open, [aria-expanded="true"]) #ho12-toggle-icon {
  transform: rotate(-90deg) !important;
}

/* The whole total value, including the Gamtae artwork, is one payment
 * trigger. Let its children pass every pointer click to that trigger. */
html body.woocommerce-checkout.ho12-checkout-products #page #ho12-pay-trigger-btn {
  cursor: pointer !important;
  pointer-events: auto !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-pay-trigger-btn > * {
  pointer-events: none !important;
}

/* 20260810: the basket/history tab uses the requested pale green inactive
 * artwork; active, hover and keyboard-focus states restore the yellow source. */
html body.page-id-15 #page .ho12-cart-tab-btn:not(.active):not(:hover):not(:focus-visible) > img {
  opacity: .38 !important;
  filter: grayscale(1) saturate(0) brightness(1.06) !important;
}

html body.page-id-15 #page .ho12-cart-tab-btn.active > img,
html body.page-id-15 #page .ho12-cart-tab-btn:is(:hover, :focus-visible) > img {
  opacity: 1 !important;
  filter: none !important;
}

/* The quantity arrows are standalone controls in the reference—not a boxed
 * widget. Their inline frame was removed from the template; keep the rail
 * transparent in every loading state. */
html body.page-id-15 #page .ho12-summary-qty-controls,
html body.page-id-15 #page .ho12-summary-qty-controls[aria-busy="true"] {
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Checkout disclosure sequence: overview, expanded product rows, then the
 * order total. When collapsed, the hidden rows take no space. */
html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-order-section {
  display: flex !important;
  flex-direction: column !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-order-overview {
  order: 1 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page #ho12-checkout-items-list {
  order: 2 !important;
}

html body.woocommerce-checkout.ho12-checkout-products #page .ho12-checkout-order-total {
  order: 3 !important;
}

/* Cart item selection must use the same approved yellow verification artwork
 * and dimensions as the "전체선택" control. A later legacy circle rule was
 * shrinking only the individual product checkbox and restoring a grey rim. */
html body.page-id-15 #page #ho12-cart-panel-cart input.ho12-cart-item-checkbox {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url('https://12ho.com/wp-content/uploads/2026/06/%EC%9E%90%EC%82%B0-3%EB%85%B8%EB%9E%91%EC%9D%B8%EC%A6%9D.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: none !important;
  filter: grayscale(1) !important;
  opacity: .28 !important;
  transform: none !important;
}

html body.page-id-15 #page #ho12-cart-panel-cart input.ho12-cart-item-checkbox:checked {
  border: 0 !important;
  background-color: transparent !important;
  background-image: url('https://12ho.com/wp-content/uploads/2026/06/%EC%9E%90%EC%82%B0-3%EB%85%B8%EB%9E%91%EC%9D%B8%EC%A6%9D.png') !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* 2026-08-10: PDF final frame — non-viewer desktop chrome is fixed to 740px. */
@media (min-width: 769px) {
  html body:not(.single-ho12_episode) #ho12-header#ho12-header .ho12-hd-top,
  html body:not(.single-ho12_episode) #ho12-header#ho12-header #ho12-planet-nav#ho12-planet-nav,
  html body:not(.single-ho12_episode) #page footer.ho12-footer .ho12-footer-container,
  html body:not(.single-ho12_episode) #page footer.ho12-footer .ho12-footer-info {
    width: 740px !important;
    max-width: 740px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  html body:not(.single-ho12_episode) #ho12-header#ho12-header #ho12-planet-nav#ho12-planet-nav {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

html body .ho12-sns-login-btn.is-disabled {
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(1) !important;
  opacity: .42 !important;
}

html body .ho12-gt-payment-method.is-disabled,
html body .ho12-gt-payment-method:disabled {
  color: #b9b9b9 !important;
  cursor: not-allowed !important;
  opacity: .52 !important;
}

html body .ho12-gt-payment-method.is-disabled .ho12-gt-payment-indicator,
html body .ho12-gt-payment-method:disabled .ho12-gt-payment-indicator {
  filter: grayscale(1) !important;
  opacity: .45 !important;
}

/* 2026-08-11: one immutable desktop rail.
 * Header artwork, the six-item menu, standard-page content and footer must
 * never escape the same 740px axis. The episode viewer stays unrestricted;
 * About keeps its intentionally wider body while sharing the site chrome. */
@media (min-width: 769px) {
  html body:not(.single-ho12_episode) #ho12-header#ho12-header .ho12-hd-top,
  html body:not(.single-ho12_episode) #ho12-header#ho12-header #ho12-planet-nav#ho12-planet-nav,
  html body:not(.single-ho12_episode) #page footer.ho12-footer .ho12-footer-container,
  html body:not(.single-ho12_episode) #page footer.ho12-footer .ho12-footer-info {
    width: 740px !important;
    min-width: 0 !important;
    max-width: 740px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  html body:not(.single-ho12_episode) #ho12-header#ho12-header #ho12-planet-nav#ho12-planet-nav {
    padding-inline: 0 !important;
  }

  /* Keep the visible header centre on the same axis as the menu/content.
   * A legacy artwork adjustment was moving only the logo 40px to the right. */
  html body:not(.single-ho12_episode) #ho12-header#ho12-header .ho12-logo,
  html body:not(.single-ho12_episode) #ho12-header#ho12-header .ho12-logo:hover {
    left: 0 !important;
    translate: none !important;
    transform: none !important;
  }

  html body:not(.single-ho12_episode) #page:not(:has(.ho12-about)),
  html body:not(.single-ho12_episode) #page:not(:has(.ho12-about)) #content,
  html body:not(.single-ho12_episode) #page:not(:has(.ho12-about)) .site-main {
    width: 740px !important;
    min-width: 0 !important;
    max-width: 740px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  html body.page-id-12 #ho12-header#ho12-header #ho12-planet-nav#ho12-planet-nav {
    display: grid !important;
    grid-template-columns: repeat(6, 66px) !important;
    justify-content: space-between !important;
    align-items: center !important;
    column-gap: 0 !important;
  }

  html body.page-id-12 #page
  #ho12-works-grid#ho12-works-grid.ho12-works-grid {
    width: 740px !important;
    min-width: 0 !important;
    max-width: 740px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: repeat(3, 197px) !important;
    justify-content: space-between !important;
    justify-items: center !important;
    column-gap: 0 !important;
    box-sizing: border-box !important;
  }
}

/* The desktop rail is a maximum, never a mobile minimum. An old unscoped
 * main-grid width left a hidden 740px document behind the clipped viewport. */
@media (max-width: 768px) {
  html body.page-id-12 #page #ho12-works-grid#ho12-works-grid.ho12-works-grid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    grid-template-columns: repeat(2, 150px) !important;
    justify-content: center !important;
    justify-items: center !important;
    column-gap: 18px !important;
    box-sizing: border-box !important;
  }
}

/* 2026-08-11: restore the original PDF's product-detail type ratio.
 * The 11-12px supporting copy was disproportionately small beside the
 * 26px product title. Keep the established fonts and colors; only restore
 * legible option, quantity and total sizing. */
html body.single-product #page .ho12-simple-dropdown-value,
html body.single-product #page .ho12-simple-dropdown-option,
html body.single-product #page .ho12-custom-dropdown-option-item,
html body.single-product #page .ho12-summary-top-row,
html body.single-product #page .ho12-summary-bottom-row,
html body.single-product #page .ho12-summary-name,
html body.single-product #page .ho12-summary-total-qty-text,
html body.single-product #page .ho12-summary-total-price-label,
html body.single-product #page #ho12-summary-total-qty,
html body.single-product #page .ho12-qty-val {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

html body.single-product #page .ho12-summary-price-wrap .ho12-summary-total-price,
html body.single-product #page #ho12-summary-total-price.ho12-gamtae-amount-num {
  font-size: 16px !important;
  line-height: 1.25 !important;
}

/* 2026-08-11: related-product frames use the same subtly wobbled square
 * path as the primary product artwork. Keep the established 2px yellow
 * weight while removing the mechanically perfect CSS rectangle. */
html body.single-product #page .ho12-pd-related-section ul.products li.product,
html body.single-product #page .ho12-pd-related-section ul.products li.product:nth-child(n) {
  position: relative !important;
  border: 0 !important;
  overflow: hidden !important;
}

html body.single-product #page .ho12-pd-related-section ul.products li.product::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' preserveAspectRatio='none'%3E%3Cpath d='M 10 10 Q 150 8, 290 10 Q 292 150, 290 290 Q 150 292, 10 290 Q 8 150, 10 10 Z' fill='none' stroke='%23f4b400' stroke-width='2' vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
}

/* The artwork itself must stop inside the wobbled stroke, not underneath it. */
html body.single-product #page .ho12-pd-related-section ul.products li.product
  > a.woocommerce-LoopProduct-link {
  width: calc(100% - 7px) !important;
  height: calc(100% - 7px) !important;
  margin: 3.5px !important;
}

/* 2026-08-11: quantity arrows stay inactive grey at rest and gain the
 * brand's solid active stroke on hover/focus/press. No movement effects. */
html body.single-product #page :is(.ho12-qty-btn-dec, .ho12-qty-btn-inc) {
  color: #aaa !important;
  cursor: pointer !important;
}

html body.single-product #page :is(.ho12-qty-btn-dec, .ho12-qty-btn-inc):is(:hover, :focus-visible, :active) {
  color: #111 !important;
  transform: none !important;
}

html body.single-product #page :is(.ho12-qty-btn-dec, .ho12-qty-btn-inc) .ho12-arrow-qty-svg {
  color: inherit !important;
}

/* 2026-08-11: device-management corrections only.
 * Keep the two secondary labels visible and mark the active device view in blue. */
html body #page .ho12-mp-quick-nav .ho12-mp-nav-item:is([data-tab="device"], [data-tab="adult"]) .ho12-mp-hover-bubble {
  opacity: 1 !important;
  visibility: visible !important;
  color: #a3a3a3 !important;
  pointer-events: none !important;
}

html body #page .ho12-mp-quick-nav .ho12-mp-nav-item:is([data-tab="device"], [data-tab="adult"]).active .ho12-mp-hover-bubble {
  color: #00a9df !important;
}

/* 2026-08-19 call review: the device artwork is nearly square while the
 * adult-verification source is wide.  A shared CSS width made the device
 * mark visibly taller.  Match their visible top/bottom bounds. */
html body #page .ho12-mp-quick-nav .ho12-mp-nav-item[data-tab="device"] > img {
  width: 38px !important;
  height: auto !important;
  object-fit: contain !important;
}

html body #page #ho12-tab-device #ho12-devices-section .ho12-dev-header h2 {
  color: #00a9df !important;
}

/* Header galaxy menu: keep each yellow accent faintly visible while inactive,
 * matching the satellite and speech-bubble artwork instead of erasing color. */
html body #ho12-header #ho12-planet-nav > .ho12-pnav-item:not(.current):not(:hover):not(:focus-visible) .ho12-planet-static {
  filter: none !important;
  opacity: .5 !important;
  transition: opacity .15s ease !important;
}

html body #ho12-header #ho12-planet-nav > .ho12-pnav-item:is(:hover, :focus-visible, .current) .ho12-planet-static {
  filter: none !important;
  opacity: 0 !important;
  transition: opacity .15s ease !important;
}

html body #ho12-header #ho12-planet-nav > .ho12-pnav-item:not(:hover):not(:focus-visible):not(.current) .ho12-planet-gif {
  opacity: 0 !important;
}

html body #ho12-header #ho12-planet-nav > .ho12-pnav-item:is(:hover, :focus-visible, .current) .ho12-planet-gif {
  opacity: 1 !important;
}

/* 2026-08-11: final product-option state lock.
 * Keep normal, hover and selected labels identical in size, and use the
 * checkout-style muted ring/dot on both simple and variable products. */
html body.single-product #page .ho12-simple-dropdown-option,
html body.single-product #page .ho12-simple-dropdown-option.active,
html body.single-product #page .ho12-simple-dropdown-option[aria-selected="true"],
html body.single-product #page .ho12-simple-dropdown-option:is(:hover, :focus, :focus-visible, :active),
html body.single-product #page .ho12-custom-dropdown-option-item,
html body.single-product #page .ho12-custom-dropdown-option-item:is(:hover, :focus, :focus-within, :active),
html body.single-product #page .ho12-custom-dropdown-option-item:is(:hover, :focus, :focus-within, :active)
  .ho12-custom-dropdown-option-text {
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
}

html body.single-product #page .ho12-simple-dropdown-radio,
html body.single-product #page .ho12-simple-dropdown-option.active .ho12-simple-dropdown-radio,
html body.single-product #page .ho12-simple-dropdown-option[aria-selected="true"] .ho12-simple-dropdown-radio {
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  border: 2px solid #aaa !important;
  background: #fff !important;
}

html body.single-product #page .ho12-simple-dropdown-radio > i,
html body.single-product #page .ho12-simple-dropdown-option.active .ho12-simple-dropdown-radio > i,
html body.single-product #page .ho12-simple-dropdown-option[aria-selected="true"] .ho12-simple-dropdown-radio > i {
  position: static !important;
  inset: auto !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #aaa !important;
}

html body.single-product #page .ho12-custom-dropdown-option-radio,
html body.single-product #page .ho12-custom-dropdown-radio-svg {
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
}

html body.single-product #page .ho12-custom-dropdown-radio-svg .radio-outer {
  stroke: #aaa !important;
  stroke-width: 2 !important;
  fill: #fff !important;
}

html body.single-product #page .ho12-custom-dropdown-radio-svg .radio-inner[fill="none"] {
  fill: none !important;
}

html body.single-product #page .ho12-custom-dropdown-radio-svg .radio-inner:not([fill="none"]) {
  fill: #aaa !important;
}

/* 2026-08-13: pair each home novel frame with two adjacent galaxy menu cells. */
@media (min-width: 1041px) {
  html body:is(.page-id-12, .page-id-13) #page #ho12-works-grid#ho12-works-grid.ho12-works-grid {
    width: 1000px !important;
    max-width: 1000px !important;
    grid-template-columns: repeat(3, 251px) !important;
    justify-content: space-between !important;
    justify-items: center !important;
    column-gap: 0 !important;
    padding-top: 100px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    box-sizing: border-box !important;
  }

  html body:is(.page-id-12, .page-id-13) #page #ho12-works-grid#ho12-works-grid .ho12-work-card {
    width: 251px !important;
    min-width: 251px !important;
    max-width: 251px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 272 / 340 !important;
    margin: 0 !important;
  }
}

/* 2026-08-13: reduce only the empty space above the shared desktop header.
 * The previous 75px inset is reduced by 60%; all artwork and the
 * spacing below the logo keep their existing proportions. */
@media (min-width: 769px) {
  html body #ho12-header#ho12-header#ho12-header#ho12-header .ho12-hd-top {
    padding-top: 30px !important;
  }
}

/* 2026-08-14: desktop-wide 70% proportional scale.
 * The requested 700px presentation is the existing 1000px composition viewed
 * at 70%, so scale each first-party site shell instead of only narrowing its
 * rail. This keeps logo, galaxies, type, cards, gaps, borders and repeated
 * 3/5-column collections in the same visual ratio. The novel reader remains
 * an intentional full-width exception, and external payment layers are not
 * descendants of these shells. */
@media (min-width: 1041px) {
  html body:not(.single-ho12_episode) #ho12-header#ho12-header#ho12-header#ho12-header,
  html body:not(.single-ho12_episode) #page#page#page#page,
  html body:not(.single-ho12_episode) footer.ho12-footer.ho12-footer {
    zoom: 0.7 !important;
  }

  /* Tighten only the logo-to-galaxy rhythm; the negative flow margin moves
   * the menu upward without changing either artwork's size. */
  html body:not(.single-ho12_episode) #ho12-header#ho12-header#ho12-header#ho12-header
    .ho12-hd-top {
    margin-bottom: -25px !important;
  }

  /* Keep the three novel frames inside their paired galaxy cells. The frame
   * centres remain aligned to each two-icon group, while a small proportional
   * inset prevents the hand-drawn edge from touching the outer galaxy bounds. */
  html body:is(.page-id-12, .page-id-13) #page#page
    #ho12-works-grid#ho12-works-grid .ho12-work-card {
    scale: 0.94 !important;
    transform-origin: center top !important;
  }

  /* Pull the novel row about 50px closer to the galaxy menu. */
  html body:is(.page-id-12, .page-id-13) #page#page
    #ho12-works-grid#ho12-works-grid.ho12-works-grid {
    padding-top: 50px !important;
  }

  /* Keep the requested original 3px hand-drawn frame weight. */
  html body:is(.page-id-12, .page-id-13) #page#page
    #ho12-works-grid#ho12-works-grid .ho12-card-border-stroke {
    stroke-width: 3px !important;
  }

  /* Align the login field labels with the first home novel frame. Anchor the
   * two-row group to the 700px page rail so viewport height cannot recenter it.
   * Preserve its original form space so all login actions remain untouched. */
  html body.page-id-17 #page#page {
    position: relative !important;
  }

  /* The legacy fade-in temporarily applies translateY() to the login box.
   * That transform becomes the absolute field group's containing block and
   * makes the labels jump from the box position to the page position on load. */
  html body.page-id-17 #page#page
    .ho12-login.ho12-center-login
    .ho12-login-box {
    animation: none !important;
    transform: none !important;
  }

  /* The desktop composition is rendered at 70%; 64.286px becomes a visible
   * 45px Earth, slightly smaller than the 53px galaxy artwork on PDF P4. */
  html body.page-id-17 #page#page .ho12-submit-wrapper,
  html body.page-id-17 #page#page .ho12-login-submit-btn,
  html body.page-id-17 #page#page .ho12-login-btn-icon-normal,
  html body.page-id-17 #page#page .ho12-login-btn-icon-hover {
    width: 64.286px !important;
    height: 64.286px !important;
    min-width: 64.286px !important;
    min-height: 64.286px !important;
  }

  html body.page-id-17 #page#page
    .ho12-login.ho12-center-login
    form.ho12-login-form-element {
    padding-top: 97.5px !important;
  }

  html body.page-id-17 #page#page
    .ho12-login.ho12-center-login
    form.ho12-login-form-element
    .ho12-input-field-group {
    position: absolute !important;
    left: 279.62px !important;
    top: 390.99px !important;
    transform: none !important;
  }

  /* Align the rendered label text itself—not only its fixed-width box—to the
   * third galaxy's leading edge. The vertical anchor already matches the home
   * card border, so keep that coordinate unchanged. */
  html body.page-id-17 #page#page
    .ho12-login.ho12-center-login
    .ho12-input-field-group
    .ho12-input-label {
    display: flex !important;
    justify-content: flex-end !important;
    text-align: right !important;
  }

  /* The login footer is emitted inside #page, which already carries the 70%
   * desktop scale. Neutralize the footer's second scale and restore the same
   * 1000px composition used by the footer on regular pages. */
  html body.page-id-17 #page#page footer.ho12-footer.ho12-footer {
    zoom: 1 !important;
    width: 1000px !important;
    min-width: 1000px !important;
    max-width: 1000px !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    margin: auto auto 0 !important;
    box-sizing: border-box !important;
  }

  html body.page-id-17 #page#page footer.ho12-footer.ho12-footer
    :is(.ho12-footer-container, .ho12-footer-info) {
    width: 1000px !important;
    min-width: 1000px !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* 2026-08-14: PDF P4 login-state polish. Keep this layer login-only so the
 * existing header, page rail and footer measurements remain untouched. */
html body.page-id-17 #page#page .ho12-login-box {
  --ho12-login-inactive: #9b9b9b;
  --ho12-login-inactive-opacity: .5;
}

/* Use one neutral density for every dormant login control. */
html body.page-id-17 #page#page .ho12-input-label,
html body.page-id-17 #page#page .ho12-input-container input,
html body.page-id-17 #page#page .ho12-input-container input::placeholder {
  color: var(--ho12-login-inactive) !important;
}

html body.page-id-17 #page#page
  .ho12-remember-wrapper .rem-icon-unchecked {
  filter: grayscale(1) !important;
  opacity: var(--ho12-login-inactive-opacity) !important;
}

/* 로그인 동작 아이콘은 비활성 상태에서도 각 이미지의 고유색을 은은하게 남긴다. */
html body.page-id-17 #page#page
  .ho12-login-submit-btn .ho12-login-btn-icon-normal,
html body.page-id-17 #page#page
  .ho12-sns-login-buttons .ho12-sns-login-btn,
html body.page-id-17 #page#page
  .ho12-login-sub-links .ho12-sub-link-item {
  filter: none !important;
  opacity: .5 !important;
}

/* 지구는 파랑·초록 활성 이미지를 낮은 농도로 겹쳐 고유색을 살짝 보여준다. */
html body.page-id-17 #page#page
  .ho12-login-submit-btn .ho12-login-btn-icon-hover {
  filter: none !important;
  opacity: .14 !important;
}

html body.page-id-17 #page#page
  .ho12-login-submit-btn:is(:hover, :focus-visible) .ho12-login-btn-icon-hover {
  filter: none !important;
  opacity: 1 !important;
}

html body.page-id-17 #page#page
  .ho12-login-submit-btn:is(:hover, :focus-visible) .ho12-login-btn-icon-normal {
  opacity: 0 !important;
}

html body.page-id-17 #page#page
  .ho12-sns-login-buttons .ho12-sns-login-btn:not(.is-disabled):hover,
html body.page-id-17 #page#page
  .ho12-sns-login-buttons .ho12-sns-login-btn:not(.is-disabled):focus-visible,
html body.page-id-17 #page#page
  .ho12-login-sub-links .ho12-sub-link-item:hover,
html body.page-id-17 #page#page
  .ho12-login-sub-links .ho12-sub-link-item:focus-visible {
  filter: none !important;
  opacity: 1 !important;
}

/* Keep the 44px interaction area, but size both visible planets to the small
 * red planet embedded in the original checked artwork. */
html body.page-id-17 #page#page .ho12-checkbox-box {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}

html body.page-id-17 #page#page
  .ho12-checkbox-box .rem-icon-unchecked {
  inset: auto !important;
  left: 13.5px !important;
  top: 13.5px !important;
  width: 17px !important;
  min-width: 17px !important;
  max-width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  max-height: 17px !important;
  object-fit: contain !important;
  transform: none !important;
}

html body.page-id-17 #page#page
  .ho12-checkbox-box .rem-icon-checked {
  inset: auto !important;
  left: 9.1px !important;
  top: -4.6px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  object-fit: contain !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Hover labels are hover-only. Keyboard or pointer clicks must not leave a
 * label pinned after the pointer leaves the control. */
html body.page-id-17 #page#page
  .ho12-login-box .ho12-tooltip-wrap:not(:hover) > .ho12-tooltip-bubble {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body.page-id-17 #page#page
  .ho12-login-box .ho12-tooltip-wrap:hover > .ho12-tooltip-bubble {
  opacity: 1 !important;
  visibility: visible !important;
}

/* SNS icons do not show any text tooltip on the approved login screen. */
html body.page-id-17 #page#page
  .ho12-sns-login-buttons .ho12-tooltip-bubble {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* The Naver mark is the central social item and shares the Earth's axis. */
html body.page-id-17 #page#page
  .ho12-sns-login-buttons > .ho12-tooltip-wrap:nth-child(2) .ho12-sns-login-btn,
html body.page-id-17 #page#page
  .ho12-sns-login-buttons > .ho12-tooltip-wrap:nth-child(2) .ho12-sns-icon-wrap {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
}

/* Enlarge boarding slightly, reduce password recovery to the satellite scale,
 * and bring the pair closer while keeping the group centred. */
html body.page-id-17 #page#page .ho12-login-sub-links {
  left: 180px !important;
  width: 380px !important;
  min-width: 380px !important;
  max-width: 380px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: space-between !important;
}

html body.page-id-17 #page#page
  .ho12-login-sub-links > .ho12-tooltip-wrap:nth-child(1),
html body.page-id-17 #page#page
  .ho12-login-sub-links > .ho12-tooltip-wrap:nth-child(1) .ho12-sub-link-item,
html body.page-id-17 #page#page
  .ho12-login-sub-links > .ho12-tooltip-wrap:nth-child(1) img {
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
}

html body.page-id-17 #page#page
  .ho12-login-sub-links > .ho12-tooltip-wrap:nth-child(2),
html body.page-id-17 #page#page
  .ho12-login-sub-links > .ho12-tooltip-wrap:nth-child(2) .ho12-sub-link-item,
html body.page-id-17 #page#page
  .ho12-login-sub-links > .ho12-tooltip-wrap:nth-child(2) img {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}

/* Secondary login actions swap artwork on hover, but must not lift vertically. */
html body.page-id-17 #page#page
  .ho12-login-sub-links .ho12-sub-link-item,
html body.page-id-17 #page#page
  .ho12-login-sub-links .ho12-sub-link-item:hover,
html body.page-id-17 #page#page
  .ho12-login-sub-links .ho12-sub-link-item:focus-visible {
  transform: none !important;
  transition: none !important;
}

/* 2026-08-18: finish the two remaining PDF P4 login details only. Chrome's
 * autofill paint can ignore `color`, so set its text fill explicitly as well. */
html body.page-id-17 #page#page .ho12-input-container input,
html body.page-id-17 #page#page .ho12-input-container input:-webkit-autofill,
html body.page-id-17 #page#page .ho12-input-container input:autofill {
  color: #9b9b9b !important;
  -webkit-text-fill-color: #9b9b9b !important;
  caret-color: #9b9b9b !important;
}

/* P4 keeps the small wake-up planet close to Earth's upper-right edge. The
 * desktop shell is rendered at 70%, so 85.714px becomes a visible 60px pull.
 * Move it down by two visible planet diameters (about 23.8px). */
@media (min-width: 1041px) {
  html body.page-id-17 #page#page .ho12-remember-wrapper {
    left: -85.714px !important;
    top: 34px !important;
  }
}

/* Login email/password required markers match the keep-awake planet size and
 * remain perfectly still in every pointer/focus state. The desktop shell is
 * rendered at 70%, so 17px becomes the same visible 11.9px diameter. */
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:hover,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:focus,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:active {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  translate: none !important;
  scale: 1 !important;
  rotate: none !important;
  transition: none !important;
  animation: none !important;
}

/* Keep the login validation message as plain text only: no rectangle, fill,
 * shadow, or animated entrance. */
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]::after {
  content: attr(data-ho12-tooltip) !important;
  display: block !important;
  width: max-content !important;
  max-width: min(320px, 82vw) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #9b9b9b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  transform: translateX(-50%) !important;
  transition: none !important;
  animation: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]:has(> .ho12-required-question-icon:hover)::after,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]:has(> .ho12-required-question-icon:focus)::after {
  transform: translateX(-50%) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* The login question mark is a stationary input placeholder, not an
 * moving hover target. Only the plain validation label reacts to hover. */
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:hover,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:focus,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:active {
  pointer-events: auto !important;
  cursor: help !important;
  box-sizing: content-box !important;
  padding: 10px !important;
  transform-origin: 50% 50% !important;
  backface-visibility: hidden !important;
  will-change: auto !important;
  transition-property: none !important;
}

/* 2026-08-18: the required markers share the Naver login icon's vertical
 * axis. The input itself starts 106px (90px label + 16px gap) to the right of
 * the full login row, so its midpoint is 53px right of the login-box centre. */
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:hover,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:focus,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:active,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]::after {
  left: calc(50% - 53px) !important;
}

@media (max-width: 600px) {
  /* Mobile uses a 76px label and an 8px gap. */
  html body.page-id-17 #page#page
    .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon,
  html body.page-id-17 #page#page
    .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:hover,
  html body.page-id-17 #page#page
    .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:focus,
  html body.page-id-17 #page#page
    .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:active,
  html body.page-id-17 #page#page
    .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]::after {
    left: calc(50% - 42px) !important;
  }
}

/* Consent is a plain verification dot—not a planet. It stays as an empty
 * white circle until selected, then only its centre fills with yellow. */
html body.page-id-118 #page#page #ho12-reg-form
  #ho12-reg-agree + .ho12-reg-checkbox-box {
  position: relative !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  background-image: none !important;
}

html body.page-id-118 #page#page #ho12-reg-form
  #ho12-reg-agree + .ho12-reg-checkbox-box > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

html body.page-id-118 #page#page #ho12-reg-form
  #ho12-reg-agree:not(:checked) + .ho12-reg-checkbox-box > .reg-icon-unchecked,
html body.page-id-118 #page#page #ho12-reg-form
  #ho12-reg-agree:checked + .ho12-reg-checkbox-box > .reg-icon-checked {
  display: block !important;
}

html body.page-id-118 #page#page #ho12-reg-form
  #ho12-reg-agree:not(:checked) + .ho12-reg-checkbox-box > .reg-icon-checked,
html body.page-id-118 #page#page #ho12-reg-form
  #ho12-reg-agree:checked + .ho12-reg-checkbox-box > .reg-icon-unchecked {
  display: none !important;
}

/* Password recovery confirmation is artwork. Hold its visible width at 25px
 * in both the full-size and 70%-scaled desktop compositions. */
html body.page-id-1391 #page#page .ho12-lost-submit img[alt='확인'] {
  width: 25px !important;
  min-width: 25px !important;
  max-width: 25px !important;
  height: auto !important;
}

@media (min-width: 1041px) {
  html body.page-id-1391 #page#page .ho12-lost-submit img[alt='확인'] {
    width: 35.714px !important;
    min-width: 35.714px !important;
    max-width: 35.714px !important;
  }
}

/* 2026-08-20 password recovery: start the guide and email row on the same
 * responsive content rail as the login page's email label. */
@media (min-width: 1041px) {
  html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-guide {
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    margin-left: 119.571px !important;
    margin-right: 0 !important;
    text-align: left !important;
    transform: translateY(-4.571px) !important;
  }

  html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-row {
    margin-left: 119.571px !important;
    margin-right: auto !important;
  }
}

@media (min-width: 768px) and (max-width: 1040px) {
  html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-guide {
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    margin-left: 125px !important;
    margin-right: 0 !important;
    text-align: left !important;
    transform: translateY(-17.3px) !important;
  }

  html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-row {
    margin-left: 125px !important;
    margin-right: auto !important;
  }
}

@media (max-width: 767px) {
  html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-guide {
    width: calc(100% + 7px) !important;
    margin-left: -7px !important;
    margin-right: 0 !important;
    text-align: left !important;
    transform: translateY(-13.8px) !important;
  }

  html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-row {
    margin-left: -7px !important;
    margin-right: auto !important;
  }
}

/* 2026-08-20 registration phone row: reserve room for verification instead
 * of letting the phone-input underline run behind the action. The desktop
 * artwork now keeps the phone label, shortened field and verification control
 * on one centre line; the intentionally stacked mobile form stays unchanged. */
@media (min-width: 768px) {
  html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-wrapper-phone {
    display: flex !important;
    align-items: center !important;
  }

  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-wrapper-phone > .ho12-reg-input-container {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-wrapper-phone > .ho12-inline-verify-btn,
  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-wrapper-phone > .ho12-inline-verify-btn:hover,
  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-wrapper-phone > .ho12-inline-verify-btn:focus,
  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-wrapper-phone > .ho12-inline-verify-btn:active {
    position: static !important;
    inset: auto !important;
    flex: 0 0 76px !important;
    width: 76px !important;
    height: 28px !important;
    margin: 0 0 0 4px !important;
    /* The visible verification icon shares the right rail used by the
     * consent mark and boarding artwork below. */
    transform: translateX(42.8px) !important;
  }

  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-wrapper-phone .ho12-reg-verify-label,
  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-wrapper-phone .ho12-inline-verify-btn > img {
    transform: none !important;
  }
}

/* The tablet composition is not scaled, so it needs its own measured offset
 * to share the consent mark's painted right edge exactly. */
@media (min-width: 768px) and (max-width: 1040px) {
  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-wrapper-phone > .ho12-inline-verify-btn,
  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-wrapper-phone > .ho12-inline-verify-btn:hover,
  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-wrapper-phone > .ho12-inline-verify-btn:focus,
  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-wrapper-phone > .ho12-inline-verify-btn:active {
    transform: translateX(43.6px) !important;
  }
}

/* 2026-08-20 registration validation: the shortened phone field must not
 * pull its marker away from the shared email/password validation column. */
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-reg-input-container.ho12-required-question-anchor
  > .ho12-required-question-icon,
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-reg-input-container.ho12-required-question-anchor
  > .ho12-required-question-icon:hover,
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-reg-input-container.ho12-required-question-anchor
  > .ho12-required-question-icon:focus,
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-reg-input-container.ho12-required-question-anchor
  > .ho12-required-question-icon:active {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
}

@media (min-width: 768px) and (max-width: 1040px) {
  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-wrapper-phone .ho12-reg-input-container
    > .ho12-required-question-icon {
    left: calc(var(--ho12-required-question-x, 50%) + 40px) !important;
  }

  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-wrapper-phone
    .ho12-reg-input-container.ho12-required-question-anchor[data-ho12-tooltip]::after {
    left: calc(var(--ho12-required-question-x, 50%) + 52px) !important;
  }
}

@media (min-width: 1041px) {
  html body.page-id-1391 #page#page .ho12-lost-question,
  html body.page-id-1391 #page#page .ho12-lost-question > img {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
  }

  html body.page-id-1391 #page#page .ho12-lost-submit > img[alt="확인"] {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 35.714286px !important;
    min-height: 35.714286px !important;
    max-height: 35.714286px !important;
  }

  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-wrapper-phone .ho12-reg-input-container
    > .ho12-required-question-icon {
    left: calc(var(--ho12-required-question-x, 50%) + 28px) !important;
  }

  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-wrapper-phone
    .ho12-reg-input-container.ho12-required-question-anchor[data-ho12-tooltip]::after {
    left: calc(var(--ho12-required-question-x, 50%) + 40px) !important;
  }
}

/* Registration action copy is muted at rest and black on pointer/keyboard
 * interaction. Geometry and icon artwork remain unchanged. */
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-inline-verify-btn:is(:hover, :focus-visible) .ho12-reg-verify-label {
  color: #111111 !important;
}

/* Login final state overrides: keep autofill, validation cursor and tooltip stable. */
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:-webkit-autofill,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:-webkit-autofill:hover,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:-webkit-autofill:focus,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:-webkit-autofill:active,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:autofill {
  font-family: 'Nanum Gothic', 'Noto Sans KR', sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: #9b9b9b !important;
  -webkit-text-fill-color: #9b9b9b !important;
  -webkit-font-smoothing: antialiased !important;
}

html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:hover,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:focus,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:active {
  cursor: default !important;
}

html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]::after,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]:hover::after,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]:focus-within::after {
  width: max-content !important;
  max-width: 220px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #afabab !important;
  font-family: 'Nanum Gothic', 'Noto Sans KR', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

/* Consent mark: match the visible size of the verification mark above. */
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box,
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box > img.reg-icon-unchecked,
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box > img.reg-icon-checked {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  max-width: 8px !important;
  max-height: 8px !important;
}

html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box {
  flex: 0 0 8px !important;
  flex-basis: 8px !important;
}

/* Registration icon alignment: the verification control sits outside the
 * 70%-scaled artwork while the consent control sits inside it. Render both
 * at the same optical 8px and move the verification label/icon as one unit so
 * their centers cannot drift apart. */
html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn,
html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn:hover,
html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn:focus,
html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn:active {
  align-items: center !important;
  transform: translateY(calc(-50% + 7px)) !important;
}

html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-verify-label,
html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn > img {
  transform: none !important;
}

html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn > img {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  max-width: 8px !important;
  max-height: 8px !important;
  flex: 0 0 8px !important;
  object-position: center !important;
}

html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-custom-check {
  align-items: center !important;
}

html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box {
  align-self: center !important;
}

/* 2026-08-20: keep the signed-in astronaut on one immutable header column.
 * The wrapper itself was fixed previously, but its flex parent could still
 * change width between ordinary pages and My Page. Equal outer grid columns
 * keep the logo centred and the astronaut/speech group on the same x-axis. */
@media (min-width: 769px) {
  html body.logged-in #ho12-header#ho12-header .ho12-hd-top {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 52px !important;
    align-items: center !important;
    justify-content: stretch !important;
  }

  html body.logged-in #ho12-header#ho12-header .ho12-hd-left {
    grid-column: 1 !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    justify-self: start !important;
  }

  html body.logged-in #ho12-header#ho12-header .ho12-hd-center {
    grid-column: 2 !important;
    justify-self: center !important;
  }

  html body.logged-in #ho12-header#ho12-header .ho12-hd-right {
    grid-column: 3 !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    margin: 0 !important;
    justify-self: end !important;
    translate: none !important;
    transform: none !important;
  }
}

/* The quick-navigation labels retain their inactive/active colours at rest,
 * but interactive hover text is the shared site black, never browser blue. */
html body #page .ho12-mp-quick-nav
  .ho12-mp-nav-item:is([data-tab="device"], [data-tab="adult"]):is(:hover, :focus-visible)
  .ho12-mp-hover-bubble {
  color: #111111 !important;
}

/* 2026-08-20: give the My Page device/adult artwork the same visible height.
 * Preserve each source image's natural width and the existing nav-item box,
 * so matching the icon height cannot move either label. */
html body #page .ho12-mypage-container .ho12-mp-quick-nav
  .ho12-mp-nav-item:is([data-tab="device"], [data-tab="adult"]) > img {
  display: block !important;
  width: auto !important;
  height: 40px !important;
  min-width: 0 !important;
  min-height: 40px !important;
  max-width: 54px !important;
  max-height: 40px !important;
  margin: 0 auto 8px !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

/* 2026-08-20: inquiry typography follows the login/registration field
 * system. Labels are bold; typed, placeholder and dropdown copy are regular. */
html body.page-id-19 #page#page .ho12-contact__row > label,
html body.page-id-19 #page#page .ho12-contact__subrow > label {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: normal !important;
}

html body.page-id-19 #page#page .ho12-contact__control :is(input, textarea),
html body.page-id-19 #page#page .ho12-contact__subrow input,
html body.page-id-19 #page#page .ho12-contact__select-trigger,
html body.page-id-19 #page#page .ho12-contact__select-menu button {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: normal !important;
}

html body.page-id-19 #page#page .ho12-contact__control :is(input, textarea)::placeholder,
html body.page-id-19 #page#page .ho12-contact__subrow input::placeholder {
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* 2026-08-20: align the inquiry form's first field with the desktop login
 * field start. The shared page shell renders at 70%, so a 19px section inset
 * places both first rows on the same visual baseline without changing the
 * inquiry form's internal row spacing or its mobile flow. */
@media (min-width: 1041px) {
  html body.page-id-19 #page#page .ho12-contact {
    padding-top: 19px !important;
  }

  /* Keep the first field on the established baseline, then give the form a
   * calmer 40px vertical rhythm instead of the former tightly packed 32px. */
  html body.page-id-19 #page#page
    .ho12-contact__row:not(.ho12-contact__row--message) {
    min-height: 40px !important;
  }

  html body.page-id-19 #page#page
    .ho12-contact__row:not(.ho12-contact__row--message) > label,
  html body.page-id-19 #page#page
    .ho12-contact__row:not(.ho12-contact__row--message) > .ho12-contact__control {
    min-height: 40px !important;
  }

  /* Inquiry history was still using 10.5px copy after the page was scaled.
   * Match the form/login typography so dates and subjects remain readable. */
  html body.page-id-19 #page#page .ho12-contact__item-date,
  html body.page-id-19 #page#page .ho12-contact__item-subject {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  html body.page-id-19 #page#page .ho12-contact__item-button {
    row-gap: 6px !important;
    min-height: 40px !important;
  }

  /* Use the same readable scale inside an opened inquiry. This covers the
   * question metadata/content as well as the captain's yellow reply. */
  html body.page-id-19 #page#page .ho12-contact__item-detail,
  html body.page-id-19 #page#page .ho12-contact__meta,
  html body.page-id-19 #page#page .ho12-contact__question-text,
  html body.page-id-19 #page#page .ho12-contact__reply,
  html body.page-id-19 #page#page .ho12-contact__reply-time {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
}

/* 2026-08-20: the signed-in header toggles only the speech-menu visibility.
 * Freeze the control and astronaut geometry so clicking My Page cannot move
 * the person or the three speech bubbles horizontally. */
@media (min-width: 769px) {
  /* The home-page artwork rule also targets `.ho12-hd-user` and used to
   * collapse this parent to 36px. My Page then restored the natural width,
   * which moved the whole signed-in control. Keep the parent's footprint
   * identical on every signed-in desktop page. */
  html body.logged-in #ho12-header#ho12-header .ho12-hd-user,
  html body.logged-in #ho12-header#ho12-header .ho12-hd-user:hover,
  html body.logged-in #ho12-header#ho12-header .ho12-hd-user:active,
  html body.logged-in #ho12-header#ho12-header .ho12-hd-user:focus-within {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    justify-self: end !important;
    translate: none !important;
    scale: 1 !important;
    rotate: none !important;
    transform: none !important;
  }

  html body.logged-in #ho12-header#ho12-header .ho12-hd-user-wrapper,
  html body.logged-in #ho12-header#ho12-header .ho12-hd-user-wrapper:hover,
  html body.logged-in #ho12-header#ho12-header .ho12-hd-user-wrapper:active,
  html body.logged-in #ho12-header#ho12-header .ho12-hd-user-wrapper:focus-within,
  html body.logged-in #ho12-header#ho12-header .ho12-hd-user-wrapper.active {
    position: relative !important;
    left: -73px !important;
    right: auto !important;
    top: -6px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    translate: none !important;
    scale: 1 !important;
    rotate: none !important;
    transform: none !important;
  }

  html body.logged-in #ho12-header#ho12-header
    .ho12-hd-user-wrapper .ho12-hd-user-icon.ho12-standing,
  html body.logged-in #ho12-header#ho12-header
    .ho12-hd-user-wrapper:hover .ho12-hd-user-icon.ho12-standing,
  html body.logged-in #ho12-header#ho12-header
    .ho12-hd-user-wrapper:active .ho12-hd-user-icon.ho12-standing,
  html body.logged-in #ho12-header#ho12-header
    .ho12-hd-user-wrapper:focus-within .ho12-hd-user-icon.ho12-standing,
  html body.logged-in #ho12-header#ho12-header
    .ho12-hd-user-wrapper.active .ho12-hd-user-icon.ho12-standing {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    top: -12px !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    translate: none !important;
    scale: 1 !important;
    rotate: none !important;
    transform: none !important;
  }
}

/* Password-reset typography follows the login form: 16px labels and entered
 * values with one consistent 700 weight, including autofill and placeholder
 * states. This changes type only; the existing geometry remains untouched. */
html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-guide,
html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-label,
html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-input {
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: #9b9b9b !important;
}

html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-guide {
  line-height: 1.55 !important;
}

html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-input,
html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-input::placeholder,
html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-input:-webkit-autofill,
html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-input:-webkit-autofill:hover,
html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-input:-webkit-autofill:focus {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  -webkit-text-fill-color: #9b9b9b !important;
}

/* 2026-08-19 registration correction: render both state marks at the same
 * optical size. The former verification override was larger than consent. */
html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn > img,
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box,
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box > img.reg-icon-unchecked,
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box > img.reg-icon-checked {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  min-height: 11px !important;
  max-width: 11px !important;
  max-height: 11px !important;
}

html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box {
  flex: 0 0 11px !important;
  flex-basis: 11px !important;
}

/* Restore the boarding artwork to the form centre line and only lower it. */
@media (min-width: 768px) {
  html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-submit-wrap {
    top: 61.9% !important;
    right: -76.3px !important;
    left: auto !important;
    width: 82.857px !important;
    height: 48.571px !important;
    transform: none !important;
  }

  html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-submit-btn-image {
    width: 82.857px !important;
    height: 48.571px !important;
    transform: none !important;
  }

  html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-submit-btn-icon {
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
  }
}

/* Login Earth: retain the existing faint blue/green identity while making
 * the dormant state lighter. The full-colour hover state remains unchanged. */
html body.page-id-17 #page#page
  .ho12-login-submit-btn:not(:hover):not(:focus-visible) .ho12-login-btn-icon-normal {
  opacity: .38 !important;
}

html body.page-id-17 #page#page
  .ho12-login-submit-btn:not(:hover):not(:focus-visible) .ho12-login-btn-icon-hover {
  opacity: .08 !important;
}

html body.page-id-118 #page#page #ho12-reg-form
  #ho12-reg-agree + .ho12-reg-checkbox-box::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 2 !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #fff !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

html body.page-id-118 #page#page #ho12-reg-form
  #ho12-reg-agree:checked + .ho12-reg-checkbox-box::after {
  content: none !important;
}

/* Registration verification states: one circular mark, white when empty and
 * yellow only after verification/consent. Keep the artwork fixed on hover. */
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-inline-verify-btn:not(.is-verified) > img,
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-inline-verify-btn:not(.is-verified):hover > img,
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-inline-verify-btn:not(.is-verified):focus > img,
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-inline-verify-btn:not(.is-verified):active > img,
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-reg-checkbox-box .reg-icon-unchecked,
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-reg-checkbox-box:hover .reg-icon-unchecked {
  filter: grayscale(1) brightness(1.4) contrast(2) !important;
}

html body.page-id-118 #page#page #ho12-reg-form
  .ho12-inline-verify-btn.is-verified > img,
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-reg-checkbox-box .reg-icon-checked {
  filter: none !important;
}

@media (min-width: 769px) {
  html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-agreement {
    top: calc(52% + 10px) !important;
  }
}

/* Login footer: the wordmark links themselves already activate on hover, but
 * the nested terms labels receive a login-page inactive color of their own.
 * Restore the regular footer behavior without changing artwork or layout. */
html body.page-id-17 #page#page footer.ho12-footer.ho12-footer
  .ho12-footer-links a[href$="/terms/"]:is(:hover, :focus-visible)
  > .ho12-footer-link-label,
html body.page-id-17 #page#page footer.ho12-footer.ho12-footer
  .ho12-footer-links a[href*="/gamtae-terms/"]:is(:hover, :focus-visible)
  > .ho12-footer-link-label {
  color: #111 !important;
}

/* Registration artwork uses the same desktop rail as the six-item menu.
 * A 50px CSS gap also places its visible top on the home novel-card axis in
 * the site's 70% desktop shell. Completion/results keep their own sizing. */
@media (min-width: 769px) {
  html body.page-id-118 #page#page
    .ho12-register-card-container:not(.ho12-register-complete) {
    flex: 0 0 min(1000px, calc(100vw - 48px)) !important;
    width: min(1000px, calc(100vw - 48px)) !important;
    min-width: min(1000px, calc(100vw - 48px)) !important;
    max-width: 1000px !important;
    margin-top: 50px !important;
  }
}

/* Registration field type matches the 16px login-field system. */
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-label,
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-input-container input,
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-input-container input::placeholder {
  font-size: 16px !important;
  line-height: normal !important;
}

/* The verification and consent question marks use the same 20px source
 * frame. Keep their original 10px/9px copy untouched. */
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box,
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box > img.reg-icon-unchecked,
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box > img.reg-icon-checked {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
}

/* Consent copy is one step larger; its planet shares the verification
 * planet's right edge in the 70% desktop shell. */
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-label {
  font-size: 10px !important;
  line-height: 10px !important;
}

html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-custom-check {
  transform: translateX(6.7px) !important;
}

/* The supplied screenshot is rendered in the unscaled tablet composition.
 * Align both visible end marks to the boarding artwork's optical right edge;
 * desktop receives the equivalent value inside its 70%-scaled shell. */
@media (min-width: 768px) and (max-width: 1040px) {
  html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-custom-check {
    transform: translateX(18.9px) !important;
  }
}

@media (min-width: 1041px) {
  html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-custom-check {
    transform: translateX(20px) !important;
  }
}

/* Registration validation helpers: show only plain copy immediately to the
 * right of the two question planets. Their appearance must not move either
 * planet or add a speech-bubble box. */
html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn::after,
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box::before {
  content: "다시 확인해주세요" !important;
  position: absolute !important;
  left: calc(100% + 6px) !important;
  top: 50% !important;
  z-index: 20 !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #9b9b9b !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.15px !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
  transition: none !important;
  animation: none !important;
}

html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn:has(> img:hover)::after,
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box:hover::before {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Optical alignment of the two question planets. The source artwork sits a
 * little high inside its transparent frame, so lower only the artwork—not
 * the surrounding rows—and keep the cursor neutral. */
html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn,
html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn:hover,
html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn:focus,
html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn:active,
html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn > img,
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box,
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box > img {
  cursor: default !important;
}

html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn > img {
  transform: translateY(7px) !important;
}

html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box {
  transform: none !important;
}

/* Registration phone row: align the bottom of the "인증하기" copy with the
 * "전화번호" label without moving its planet icon or the surrounding row. */
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-verify-label {
  transform: translateY(7px) !important;
}

html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn::after {
  top: calc(50% + 2px) !important;
}

/* Registration input validation: the four question markers use a 35%-high
 * source anchor, which leaves the artwork optically high. Lower it slightly
 * and present the helper as unboxed copy directly to the marker's right. */
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-reg-input-container.ho12-required-question-anchor
  > .ho12-required-question-icon,
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-reg-input-container.ho12-required-question-anchor
  > .ho12-required-question-icon:hover,
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-reg-input-container.ho12-required-question-anchor
  > .ho12-required-question-icon:focus,
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-reg-input-container.ho12-required-question-anchor
  > .ho12-required-question-icon:active {
  cursor: default !important;
  transform: translate(-50%, calc(-50% + 3px)) !important;
  transition: none !important;
  animation: none !important;
}

html body.page-id-118 #page#page #ho12-reg-form
  .ho12-reg-input-container.ho12-required-question-anchor[data-ho12-tooltip]::after {
  content: attr(data-ho12-tooltip) !important;
  position: absolute !important;
  left: calc(var(--ho12-required-question-x, 50%) + 12px) !important;
  top: calc(var(--ho12-required-question-y, 50%) + 3px) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 40 !important;
  display: block !important;
  width: max-content !important;
  max-width: 220px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #9b9b9b !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.15px !important;
  text-align: left !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
  transition: none !important;
  animation: none !important;
}

html body.page-id-118 #page#page #ho12-reg-form
  .ho12-reg-input-container.ho12-required-question-anchor[data-ho12-tooltip]:has(> .ho12-required-question-icon:focus)::after {
  opacity: 0 !important;
  visibility: hidden !important;
}

html body.page-id-118 #page#page #ho12-reg-form
  .ho12-reg-input-container.ho12-required-question-anchor[data-ho12-tooltip]:has(> .ho12-required-question-icon:hover)::after {
  opacity: 1 !important;
  visibility: visible !important;
}

/* 2026-08-18: show the login-page boarding icon at an actual 50px inside the
 * site's 70% desktop shell (71.429 CSS px x .7 = 50px). */
html body.page-id-17 #page#page
  .ho12-login-sub-links > .ho12-tooltip-wrap:nth-child(1),
html body.page-id-17 #page#page
  .ho12-login-sub-links > .ho12-tooltip-wrap:nth-child(1) .ho12-sub-link-item,
html body.page-id-17 #page#page
  .ho12-login-sub-links > .ho12-tooltip-wrap:nth-child(1) img {
  width: 71.429px !important;
  min-width: 71.429px !important;
  max-width: 71.429px !important;
  height: 71.429px !important;
  min-height: 71.429px !important;
  max-height: 71.429px !important;
}

/* 2026-08-18: final login validation hover stabilisation. Keep the visible
 * marker and its hit target as the same fixed 17px box. The former 10px
 * content-box padding enlarged the replaced image itself and made the hover
 * boundary recalculate when the validation label appeared. Pin every box and
 * state explicitly so neither the icon nor the form row can shift. */
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:hover,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:focus,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:active {
  position: absolute !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
  max-width: 17px !important;
  max-height: 17px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  line-height: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: translate3d(-50%, -50%, 0) !important;
  transform-origin: 50% 50% !important;
  translate: none !important;
  scale: 1 !important;
  rotate: none !important;
  transition: none !important;
  animation: none !important;
  backface-visibility: hidden !important;
  will-change: auto !important;
}

/* A click may focus the image, but the helper is hover-driven: mouseleave
 * always hides it. This also prevents focus/hover state hand-off flicker. */
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]:has(> .ho12-required-question-icon:focus)::after {
  opacity: 0 !important;
  visibility: hidden !important;
}

html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]:has(> .ho12-required-question-icon:hover)::after {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) !important;
}

/* 2026-08-18: measured login geometry at the live 70% shell zoom:
 * Naver centre 632.492px, input centre 665.813px. The rendered 33.320px
 * difference equals 47.6 CSS px. Keep the marker on that exact axis. */
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:hover,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:focus,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:active {
  left: calc(50% - 47.6px) !important;
}

/* PDF P4 places the plain validation copy immediately to the marker's right,
 * not above it. Keep it absolutely positioned so appearing text cannot move
 * either the marker or the login row. */
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]::after,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]:has(> .ho12-required-question-icon:hover)::after,
html body.page-id-17 #page#page
  .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]:has(> .ho12-required-question-icon:focus)::after {
  left: calc(50% - 31.6px) !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: max-content !important;
  max-width: 220px !important;
  text-align: left !important;
  white-space: nowrap !important;
  transform: translateY(-50%) !important;
}

@media (max-width: 600px) {
  html body.page-id-17 #page#page
    .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon,
  html body.page-id-17 #page#page
    .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:hover,
  html body.page-id-17 #page#page
    .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:focus,
  html body.page-id-17 #page#page
    .ho12-login-form-element .ho12-input-container > .ho12-required-question-icon:active {
    left: calc(50% - 47.6px) !important;
  }

  html body.page-id-17 #page#page
    .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]::after,
  html body.page-id-17 #page#page
    .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]:has(> .ho12-required-question-icon:hover)::after,
  html body.page-id-17 #page#page
    .ho12-login-form-element .ho12-required-question-anchor[data-ho12-tooltip]:has(> .ho12-required-question-icon:focus)::after {
    left: calc(50% - 31.6px) !important;
  }
}

/* Final registration state artwork. Keep inactive marks softly faded while
 * preserving the supplied media artwork and full colour for completed states. */
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-inline-verify-btn:not(.is-verified) > img,
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-inline-verify-btn:not(.is-verified):hover > img,
html body.page-id-118 #page#page #ho12-reg-form
  #ho12-reg-agree:not(:checked) + .ho12-reg-checkbox-box > .reg-icon-unchecked,
html body.page-id-118 #page#page #ho12-reg-form
  #ho12-reg-agree:not(:checked) + .ho12-reg-checkbox-box:hover > .reg-icon-unchecked {
  filter: grayscale(.35) saturate(.55) !important;
  opacity: .48 !important;
}

html body.page-id-118 #page#page #ho12-reg-form
  .ho12-inline-verify-btn.is-verified > img,
html body.page-id-118 #page#page #ho12-reg-form
  #ho12-reg-agree:checked + .ho12-reg-checkbox-box > .reg-icon-checked,
html body.page-id-118 #page#page #ho12-reg-form
  #ho12-reg-agree:checked + .ho12-reg-checkbox-box:hover > .reg-icon-checked {
  filter: none !important;
  opacity: 1 !important;
}

/* Empty registration state: keep the boarding artwork visually inactive.
 * The button remains clickable so the existing required-field guidance still
 * runs; only its presentation is softened to match the two inactive marks. */
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-submit-btn-image {
  filter: grayscale(.7) saturate(.35) !important;
  opacity: .68 !important;
}

/* Final registration polish: the verification mark is outside the scaled
 * registration artboard, while the consent mark is inside its 70% shell.
 * Compensate only the latter so both render at the same optical 11px size. */
html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn > img {
  width: 11.429px !important;
  height: 11.429px !important;
  min-width: 11.429px !important;
  min-height: 11.429px !important;
  max-width: 11.429px !important;
  max-height: 11.429px !important;
}

html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box,
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box > img.reg-icon-unchecked,
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box > img.reg-icon-checked {
  width: 11.429px !important;
  height: 11.429px !important;
  min-width: 11.429px !important;
  min-height: 11.429px !important;
  max-width: 11.429px !important;
  max-height: 11.429px !important;
}

html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-checkbox-box {
  flex: 0 0 11.429px !important;
  flex-basis: 11.429px !important;
}

/* The verification control keeps its visible label, but its icon must not
 * generate an additional hover helper to the right. */
html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn::after,
html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn:hover::after,
html body.page-id-118 #page#page #ho12-reg-form .ho12-inline-verify-btn:focus::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Boarding stays muted at rest and restores its native artwork only while
 * hovered or keyboard-focused. No movement or scaling is introduced. */
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-submit-btn-image:hover,
html body.page-id-118 #page#page #ho12-reg-form .ho12-reg-submit-btn-image:focus-visible {
  filter: none !important;
  opacity: 1 !important;
}

html body.page-id-118 #page#page #ho12-reg-form
  #ho12-reg-agree + .ho12-reg-checkbox-box::after {
  content: none !important;
  display: none !important;
}

html body.page-id-118 #page#page #ho12-reg-form
  #ho12-reg-agree:not(:checked) + .ho12-reg-checkbox-box > .reg-icon-unchecked,
html body.page-id-118 #page#page #ho12-reg-form
  #ho12-reg-agree:checked + .ho12-reg-checkbox-box > .reg-icon-checked {
  display: block !important;
}

html body.page-id-118 #page#page #ho12-reg-form
  #ho12-reg-agree:not(:checked) + .ho12-reg-checkbox-box > .reg-icon-checked,
html body.page-id-118 #page#page #ho12-reg-form
  #ho12-reg-agree:checked + .ho12-reg-checkbox-box > .reg-icon-unchecked {
  display: none !important;
}

/* 2026-08-21: one typography scale across the site's front-end forms.
 * Field labels stay readable at 16px, explanatory copy is quiet regular
 * 14px, and every textual hover helper uses the same 12px scale. */
html body:not(#__ho12-type-1):not(#__ho12-type-2):not(#__ho12-type-3) :is(
  .ho12-input-label,
  .ho12-reg-label,
  .ho12-lost-label,
  .ho12-mp-label
),
html body.page-id-19 #page#page .ho12-contact__row > label,
html body.page-id-19 #page#page .ho12-contact__subrow > label {
  font-size: 16px !important;
}

html body:not(#__ho12-type-1):not(#__ho12-type-2):not(#__ho12-type-3) :is(
  .ho12-lost-guide,
  .ho12-adult-guide-copy,
  .ho12-checkout-order-copy,
  .ho12-contact-desc,
  .ho12-contact-help,
  .ho12-gift-guide-copy,
  .ho12-gift-guide-image-copy,
  .ho12-gt-payment-guide,
  .ho12-pd-description,
  .ho12-saved-address-copy
) {
  font-size: 14px !important;
  font-weight: 400 !important;
}

html body :is(
  .ho12-tooltip,
  .ho12-tooltip-bubble,
  .ho12-icon-tooltip,
  .ho12-bulk-tooltip,
  .ho12-viewer-tooltip,
  .ho12-contact__question-tip,
  .ho12-mp-hover-bubble
),
html body [data-tooltip]::after,
html body [data-ho12-tooltip]::after {
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* The inquiry form shares the login form's first-field origin and repeats
 * its email-to-password rhythm for every following inquiry field. */
@media (min-width: 1041px) {
  html body.page-id-19 #page#page .ho12-contact {
    padding-top: 22.04px !important;
  }

  html body.page-id-19 #page#page .ho12-contact__form {
    margin-left: 278.17px !important;
    margin-right: 0 !important;
  }

  html body.page-id-19 #page#page
    .ho12-contact__row:not(.ho12-contact__row--message),
  html body.page-id-19 #page#page
    .ho12-contact__row:not(.ho12-contact__row--message) > label,
  html body.page-id-19 #page#page
    .ho12-contact__row:not(.ho12-contact__row--message) > .ho12-contact__control {
    min-height: 62.37px !important;
  }
}

@media (min-width: 601px) and (max-width: 1040px) {
  html body.page-id-19 #page#page .ho12-contact {
    padding-top: 9.7px !important;
  }

  html body.page-id-19 #page#page .ho12-contact__form {
    margin-left: 276px !important;
    margin-right: 0 !important;
  }

  html body.page-id-19 #page#page
    .ho12-contact__row:not(.ho12-contact__row--message),
  html body.page-id-19 #page#page
    .ho12-contact__row:not(.ho12-contact__row--message) > label,
  html body.page-id-19 #page#page
    .ho12-contact__row:not(.ho12-contact__row--message) > .ho12-contact__control {
    min-height: 62.39px !important;
  }
}

/* 2026-08-31 PROFILE VALIDATION AND FEEDBACK — FINAL CASCADE OVERRIDE
 * Keep profile helper copy beside its question mark. */
html body.page-id-17 #page#page #ho12-profile-form
  .ho12-required-question-anchor[data-ho12-tooltip]::after {
  left: calc(var(--ho12-required-question-x, 50%) - 31.6px) !important;
  top: var(--ho12-required-question-y, 50%) !important;
  right: auto !important;
  bottom: auto !important;
  width: max-content !important;
  max-width: min(220px, 48vw) !important;
  text-align: left !important;
  white-space: nowrap !important;
  transform: translateY(-50%) !important;
}

html body.page-id-17 #page#page #ho12-profile-form
  .ho12-required-question-icon {
  left: calc(var(--ho12-required-question-x, 50%) - 47.6px) !important;
  top: var(--ho12-required-question-y, 50%) !important;
  right: auto !important;
  bottom: auto !important;
  opacity: 0 !important;
  filter: none !important;
  cursor: default !important;
  transform: translate(-50%, -50%) !important;
}

html body.page-id-17 #page#page #ho12-profile-form
  .ho12-required-question-anchor:has(> .ho12-required-question-icon)::before {
  content: '' !important;
  position: absolute !important;
  left: calc(var(--ho12-required-question-x, 50%) - 47.6px) !important;
  top: var(--ho12-required-question-y, 50%) !important;
  z-index: 2147482999 !important;
  width: 18px !important;
  height: 18px !important;
  background: #00a9df !important;
  -webkit-mask: url('../images/pdf18-required-question.png') center / contain no-repeat !important;
  mask: url('../images/pdf18-required-question.png') center / contain no-repeat !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) !important;
}

/* Profile feedback has no separate overlay. It is therefore the fixed
 * viewport layer itself and must override the shared relative card rule. */
html body.page-id-17 #ho12-profile-success.ho12-success-toast {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2147483000 !important;
}

/* 2026-08-25: device registration is a disclosure action, not a black CTA.
 * All device sections share the same 340px left rail. The plain action text
 * reveals a borderless nickname field; a second click (or Enter) registers. */
html body.page-id-17 #page#page#page #ho12-tab-device :is(
  .ho12-dev-header,
  .ho12-dev-current,
  .ho12-dev-list-section
) {
  width: 340px !important;
  max-width: 100% !important;
}

html body.page-id-17 #page#page#page #ho12-tab-device
  .ho12-dev-register-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 340px !important;
  max-width: 100% !important;
  margin: 0 !important;
}

html body.page-id-17 #page#page#page #ho12-tab-device
  #ho12-dev-register-btn {
  display: inline-block !important;
  flex: none !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #00a9df !important;
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

html body.page-id-17 #page#page#page #ho12-tab-device
  .ho12-dev-register-fields[hidden] {
  display: none !important;
}

html body.page-id-17 #page#page#page #ho12-tab-device
  .ho12-dev-register-fields:not([hidden]) {
  display: grid !important;
  grid-template-columns: 90px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0 !important;
  width: 340px !important;
  max-width: 100% !important;
}

html body.page-id-17 #page#page#page #ho12-tab-device
  .ho12-dev-register-fields > span {
  color: #a3a3a3 !important;
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  white-space: nowrap !important;
}

html body.page-id-17 #page#page#page #ho12-tab-device
  #ho12-dev-nickname {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #8d8d8d !important;
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  caret-color: #8d8d8d !important;
}

html body.page-id-17 #page#page#page #ho12-tab-device
  #ho12-dev-nickname::placeholder {
  color: #a3a3a3 !important;
  -webkit-text-fill-color: #a3a3a3 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

/* 2026-08-25: the login e-mail's saved-value layer scales its 10px padding,
 * so copying its -4.285714px transform to the plain recovery input makes the
 * visible caret about 3px too far left. Keep the recovery input unshifted;
 * its painted text origin then matches the login value optically. */
@media (min-width: 601px) {
  html body.page-id-1391 #page#page#page#page
    .ho12-lost-password-screen .ho12-lost-input {
    transform: none !important;
    transform-origin: left center !important;
  }
}

/* Match the login rail on the 390px mobile layout as well: x=32 label,
 * 76px label width, 8px gap, and a 227px input rail. */
@media (max-width: 600px) {
  html body.page-id-1391 #page#page#page#page
    .ho12-lost-password-screen .ho12-lost-row {
    width: 311px !important;
    min-width: 311px !important;
    max-width: 311px !important;
    margin-left: -8px !important;
    margin-right: 0 !important;
    gap: 8px !important;
  }

  html body.page-id-1391 #page#page#page#page
    .ho12-lost-password-screen .ho12-lost-label {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
  }

  html body.page-id-1391 #page#page#page#page
    .ho12-lost-password-screen .ho12-lost-input {
    padding-left: 10px !important;
  }
}

/* 2026-08-25 FINAL: align every device section to one left rail and keep
 * registration as a plain disclosure label. This must remain at EOF because
 * legacy device rules above otherwise restore the boxed black CTA. */
html body.page-id-17 #page#page#page#page #ho12-tab-device :is(
  .ho12-dev-header,
  .ho12-dev-current,
  .ho12-dev-list-section,
  .ho12-dev-register-row
) {
  box-sizing: border-box !important;
  width: 340px !important;
  min-width: 0 !important;
  max-width: 340px !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device
  .ho12-dev-register-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device
  #ho12-dev-register-btn {
  display: inline-block !important;
  flex: none !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline-offset: 3px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #00a9df !important;
  -webkit-text-fill-color: #00a9df !important;
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device
  .ho12-dev-register-fields[hidden] {
  display: none !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device
  .ho12-dev-register-fields:not([hidden]) {
  display: grid !important;
  grid-template-columns: 90px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  width: 340px !important;
  min-width: 0 !important;
  max-width: 340px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device
  .ho12-dev-register-fields > span {
  color: #a3a3a3 !important;
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  white-space: nowrap !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device
  #ho12-dev-nickname {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #8d8d8d !important;
  -webkit-text-fill-color: #8d8d8d !important;
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  caret-color: #8d8d8d !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device
  #ho12-dev-nickname::placeholder {
  color: #a3a3a3 !important;
  -webkit-text-fill-color: #a3a3a3 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

@media (max-width: 600px) {
  html body.page-id-19 #page#page .ho12-contact {
    padding-top: 11.69px !important;
  }

  html body.page-id-19 #page#page .ho12-contact__form {
    margin-left: 32px !important;
    margin-right: 0 !important;
  }

  html body.page-id-19 #page#page
    .ho12-contact__row:not(.ho12-contact__row--message),
  html body.page-id-19 #page#page
    .ho12-contact__row:not(.ho12-contact__row--message) > label,
  html body.page-id-19 #page#page
    .ho12-contact__row:not(.ho12-contact__row--message) > .ho12-contact__control {
    min-height: 49.39px !important;
  }
}

/* Adult boarding guide follows the same type hierarchy as the input pages.
 * The two actions use the supplied blue artwork at an optical 25px width. */
html body #page #ho12-tab-adult .ho12-adult-guide-title {
  font-size: 16px !important;
}

html body #page #ho12-tab-adult .ho12-adult-guide-copy {
  font-size: 14px !important;
  font-weight: 400 !important;
}

html body #page #ho12-tab-adult .ho12-adult-guide-actions > button,
html body #page #ho12-tab-adult .ho12-adult-guide-actions > button:is(:hover, :focus-visible) {
  min-width: 0 !important;
}

html body #page #ho12-tab-adult .ho12-adult-guide-actions .ho12-adult-action-image {
  display: block !important;
  width: 25px !important;
  min-width: 25px !important;
  max-width: 25px !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (min-width: 1041px) {
  html body #page #ho12-tab-adult .ho12-adult-guide-actions .ho12-adult-action-image {
    width: 35.714px !important;
    min-width: 35.714px !important;
    max-width: 35.714px !important;
  }
}

/* Device-management typography uses the shared 16 / 14 / 12 hierarchy:
 * section title, explanatory copy, then icon-attached hover helpers. */
html body #page#page #ho12-tab-device #ho12-devices-section .ho12-dev-header h2 {
  font-size: 16px !important;
}

html body #page#page #ho12-tab-device #ho12-devices-section .ho12-dev-stats {
  font-size: 14px !important;
  font-weight: 400 !important;
}

html body #page#page
  .ho12-mp-quick-nav .ho12-mp-nav-item[data-tab="device"] .ho12-mp-hover-bubble,
html body #page#page #ho12-tab-device :is(
  .ho12-tooltip,
  .ho12-tooltip-bubble,
  .ho12-icon-tooltip,
  .ho12-dev-tooltip,
  [role="tooltip"]
),
html body #page#page #ho12-tab-device [data-tooltip]::after,
html body #page#page #ho12-tab-device [data-ho12-tooltip]::after {
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* Every device-management body label, value and action uses the shared
 * 14px body size. The page heading and icon tooltip remain 16px / 12px. */
html body #page#page #ho12-tab-device #ho12-devices-section :is(
  .ho12-dev-current > h3,
  .ho12-dev-register-row span,
  #ho12-dev-current-display-name,
  #ho12-dev-nickname,
  #ho12-dev-register-btn,
  .ho12-dev-list-section > h3,
  #ho12-dev-manage-btn,
  .ho12-dev-item-name-text,
  .ho12-dev-item-rename-input,
  .ho12-dev-empty,
  .ho12-dev-msg
) {
  font-size: 14px !important;
}

/* Confirmation artwork is a single 25px-wide UI primitive across the site.
 * This covers account, library, device and reader overlays, including older
 * confirmation implementations that only expose their image class. */
html body :is(
  img[alt='확인'],
  img[alt='취소'],
  .ho12-lib-confirm-btn img,
  .ho12-device-confirm-label-image,
  .ho12-device-cancel-label-image,
  .ho12-dev-manage-confirm-image,
  .ho12-pdf17-action-img,
  .ho12-pdf17-action-img-cancel,
  .ho12-force-action-img,
  .ho12-legacy-action-img
) {
  display: block !important;
  width: 25px !important;
  min-width: 25px !important;
  max-width: 25px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Account and gift contents sit inside the 70% desktop composition. Their
 * source width is compensated so the on-screen result remains exactly 25px. */
@media (min-width: 1041px) {
  html body #page :is(
    #ho12-tab-adult .ho12-adult-action-image,
    #ho12-tab-device .ho12-dev-manage-confirm-image,
    .ho12-lost-submit img[alt='확인'],
    .ho12-gamtae-buy-wrapper #ho12-gift-claim-confirm-btn > img
  ) {
    width: 35.714px !important;
    min-width: 35.714px !important;
    max-width: 35.714px !important;
  }
}

/* 2026-08-24: My Page icon geometry and hover-copy parity.
 * The desktop composition is rendered at 70%, so a 40px source height is
 * exactly 28px on screen.  Keep width automatic: the edit/save artwork is
 * landscape, and forcing a square created the visible top/bottom letterbox. */
@media (min-width: 1041px) {
  html body.page-id-17 #page#page .ho12-mypage-container
    .ho12-mp-quick-nav .ho12-mp-nav-item:is([data-tab="device"], [data-tab="adult"]) > img,
  html body.page-id-17 #page#page .ho12-mypage-container
    .ho12-mp-action-wrapper > .ho12-mp-btn-icon {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Use the same centred 440px field origin as the login form. */
  html body.page-id-17 #page#page .ho12-mypage-container #ho12-profile-form {
    width: 440px !important;
    max-width: 440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }
}

@media (max-width: 1040px) {
  html body.page-id-17 #page#page .ho12-mypage-container
    .ho12-mp-quick-nav .ho12-mp-nav-item:is([data-tab="device"], [data-tab="adult"]) > img,
  html body.page-id-17 #page#page .ho12-mypage-container
    .ho12-mp-action-wrapper > .ho12-mp-btn-icon {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* Device/adult/edit/save hover names use the login-page tooltip token. */
html body.page-id-17 #page#page .ho12-mypage-container :is(
  .ho12-mp-hover-bubble,
  .ho12-mp-action-wrapper > .ho12-mp-action-btn
) {
  width: max-content !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #afabab !important;
  font-family: 'Nanum Gothic', 'Noto Sans KR', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html body.page-id-17 #page#page .ho12-mypage-container
  .ho12-mp-nav-item:is(:hover, :focus-visible, :focus-within) > .ho12-mp-hover-bubble,
html body.page-id-17 #page#page .ho12-mypage-container
  .ho12-mp-action-wrapper:is(:hover, :focus-visible, :focus-within) > .ho12-mp-action-btn {
  color: #afabab !important;
}

/* My Page quick-nav names are interaction hints, not persistent tab labels.
 * Keep their reserved layout space stable and reveal the copy only while the
 * corresponding icon is hovered or keyboard-focused. The active tab alone
 * must not force either name to remain visible. */
html body #page#page .ho12-mypage-container .ho12-mp-quick-nav
  .ho12-mp-nav-item:is([data-tab='device'], [data-tab='adult'])
  .ho12-mp-hover-bubble {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body #page#page .ho12-mypage-container .ho12-mp-quick-nav
  .ho12-mp-nav-item:is([data-tab='device'], [data-tab='adult']):is(:hover, :focus-visible, :focus-within)
  .ho12-mp-hover-bubble {
  opacity: 1 !important;
  visibility: visible !important;
  color: #00a9df !important;
}

/* Password recovery reuses the login password row as its responsive origin. */
html body.page-id-1391 #page#page#page#page
  .ho12-lost-password-box .ho12-lost-row > span.ho12-lost-label {
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

html body.page-id-1391 #page#page .ho12-lost-question::after {
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  letter-spacing: 0 !important;
}

@media (min-width: 1041px) {
  html body.page-id-1391 #page#page#page#page
    .ho12-lost-password-box .ho12-lost-row > span.ho12-lost-label {
    position: relative !important;
    left: 34.285714px !important;
  }

  html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-row {
    position: relative !important;
    top: 7.690473px !important;
  }
}

@media (min-width: 601px) and (max-width: 1040px) {
  html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-row {
    position: relative !important;
    top: -1.299469px !important;
  }
}

@media (max-width: 600px) {
  html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-row {
    position: relative !important;
    top: -33.995056px !important;
  }
}

/* Adult-verification guidance is explanatory body copy, not primary black
 * content. Keep it on the shared quiet grey while retaining 14px regular. */
html body #page#page #ho12-tab-adult .ho12-adult-guide-copy {
  color: #9b9b9b !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* Some shared page copy rules color nested spans independently. Pin both the
 * paragraph and its two line wrappers to the same quiet 14px body token. */
html body #page#page #ho12-tab-adult .ho12-adult-guide-copy,
html body #page#page #ho12-tab-adult .ho12-adult-guide-copy > span {
  color: #9b9b9b !important;
  -webkit-text-fill-color: #9b9b9b !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* Inquiry history's empty state is explanatory body copy. */
html body.page-id-19 #page#page .ho12-contact__history-empty {
  color: #9b9b9b !important;
  -webkit-text-fill-color: #9b9b9b !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

/* Device registration uses one compact control height. Give the nickname
 * field enough inline space for its full Korean example at the shared 14px
 * size, while keeping the registration action on the same baseline. */
html body #page#page #ho12-tab-device .ho12-dev-register-row {
  width: 420px !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
}

html body #page#page #ho12-tab-device .ho12-dev-register-row > div {
  min-width: 0 !important;
}

html body #page#page #ho12-tab-device #ho12-dev-nickname,
html body #page#page #ho12-tab-device #ho12-dev-register-btn {
  box-sizing: border-box !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
}

html body #page#page #ho12-tab-device #ho12-dev-nickname {
  min-width: 190px !important;
  padding: 0 10px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: normal !important;
}

html body #page#page #ho12-tab-device #ho12-dev-nickname::placeholder {
  color: #9b9b9b !important;
  -webkit-text-fill-color: #9b9b9b !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  opacity: 1 !important;
}

html body #page#page #ho12-tab-device #ho12-dev-register-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  padding: 0 20px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 600px) {
  html body #page#page #ho12-tab-device .ho12-dev-register-row {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  html body #page#page #ho12-tab-device .ho12-dev-register-row > div {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  html body #page#page #ho12-tab-device #ho12-dev-nickname {
    min-width: 0 !important;
  }
}

/* Inquiry pages that actually render the signed-in history use the account
 * composition. Detect that rendered structure directly instead of relying on
 * a theme body class, then align the form with the login email baseline. */
@media (min-width: 1041px) {
  html body.page-id-19 #page#page
    .ho12-contact:has(> .ho12-contact__history) .ho12-contact__form {
    margin-left: 518.86px !important;
    margin-right: 0 !important;
  }
}

/* Shared non-commerce content origin: login's first row is the reference.
 * At the desktop composition the inquiry row was 0.48px left and 2.67px low;
 * compensate before the shell's 70% scale to make both origins coincide. */
@media (min-width: 1041px) {
  html body.page-id-19 #page#page .ho12-contact {
    padding-top: 18.23px !important;
  }

  html body.page-id-19 #page#page .ho12-contact__form {
    margin-left: 278.17px !important;
    margin-right: 0 !important;
  }
}

/* 2026-08-24: the login form is the single origin reference for account and
 * inquiry screens. Remove the older signed-in inquiry offset, then correct
 * only the two responsive account layouts that were measurably off-axis. */
@media (min-width: 1041px) {
  html body.page-id-19 #page#page
    .ho12-contact:has(> .ho12-contact__history) .ho12-contact__form {
    margin-left: 278.17px !important;
    margin-right: 0 !important;
  }

  html body.page-id-17 #page#page .ho12-mypage-container {
    position: relative !important;
    top: 10.47px !important;
  }

  html body.page-id-17 #page#page #ho12-tab-device :is(
    .ho12-dev-header,
    .ho12-dev-current,
    .ho12-dev-list-section
  ) {
    position: relative !important;
    left: -60.4px !important;
  }
}

@media (min-width: 601px) and (max-width: 1040px) {
  html body.page-id-19 #page#page
    .ho12-contact:has(> .ho12-contact__history) {
    padding-top: 5.7px !important;
  }

  html body.page-id-17 #page#page .ho12-mypage-container {
    position: relative !important;
    top: -3.31px !important;
  }

  html body.page-id-17 #page#page #ho12-profile-form {
    transform: translateX(5px) !important;
  }

  html body.page-id-17 #page#page #ho12-tab-device :is(
    .ho12-dev-header,
    .ho12-dev-current,
    .ho12-dev-list-section
  ) {
    position: relative !important;
    left: -55px !important;
  }
}

@media (max-width: 600px) {
  html body.page-id-19 #page#page
    .ho12-contact:has(> .ho12-contact__history) {
    padding-top: 7.69px !important;
  }

  html body.page-id-17 #page#page .ho12-mypage-container {
    position: relative !important;
    top: -1.31px !important;
  }

  html body.page-id-17 #page#page #ho12-profile-form {
    position: static !important;
    width: calc(100% - 17px) !important;
    margin-left: 17px !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  html body.page-id-17 #page#page #ho12-tab-device :is(
    .ho12-dev-header,
    .ho12-dev-current,
    .ho12-dev-list-section
  ) {
    position: relative !important;
    left: -2px !important;
  }
}

/* Login entry typography and caret are explicit final-state tokens. This
 * also covers browser autofill so saved credentials cannot switch fonts. */
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:-webkit-autofill,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:-webkit-autofill:hover,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:-webkit-autofill:focus,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:-webkit-autofill:active,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:autofill {
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  caret-color: #9b9b9b !important;
}

html body #page#page :is(
  .ho12-login-form-element input,
  #ho12-reg-form input,
  #ho12-lost-password-form input,
  .ho12-contact__form input,
  .ho12-contact__form textarea,
  #ho12-profile-form input:not([readonly]),
  #ho12-dev-nickname,
  #ho12-gift-code
) {
  caret-color: #9b9b9b !important;
}

/* 2026-08-24 login saved-value lock: Chromium paints saved credentials in a
 * separate autofill state. Keep that first paint identical to focus, typing
 * and blur so the value cannot change face, weight, colour or geometry. */
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:hover,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:focus,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:focus-visible,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:active,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:-webkit-autofill,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:-webkit-autofill:hover,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:-webkit-autofill:focus,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:-webkit-autofill:active,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:autofill,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:autofill:hover,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:autofill:focus,
html body.page-id-17 #page#page .ho12-login-box .ho12-input-container input:autofill:active {
  box-sizing: border-box !important;
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: #9b9b9b !important;
  -webkit-text-fill-color: #9b9b9b !important;
  caret-color: #9b9b9b !important;
  opacity: 1 !important;
  transform: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Chrome's saved-credential preview is painted through a separate first-line
 * layer. Target that layer directly; ordinary input/autofill declarations can
 * report the right computed font while this preview still uses the UA face. */
html body.page-id-17 #page#page
  .ho12-login-box .ho12-input-container input:-webkit-autofill::first-line,
html body.page-id-17 #page#page
  .ho12-login-box .ho12-input-container input:autofill::first-line {
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: #9b9b9b !important;
}

/* The login field name and its value use the same requested type token. */
html body.page-id-17 #page#page .ho12-login-box .ho12-input-label {
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-synthesis: none !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

/* Chromium's untouched password-manager preview is painted about 17x9px,
 * while the same 16px KoPub value becomes about 22x10px on the first trusted
 * interaction. Correct only that pre-interaction paint; the input's layout
 * and the committed 16px value remain unchanged. */
html:not(.ho12-login-interacted) body.page-id-17 #page#page
  .ho12-login-box .ho12-input-container input[name="log"]:-webkit-autofill {
  transform: translate(-4.285714px, 1.428571px) scale(1.294117647, 1.25) !important;
  transform-origin: left center !important;
}

html:not(.ho12-login-interacted) body.page-id-17 #page#page
  .ho12-login-box .ho12-input-container input[name="pwd"]:-webkit-autofill {
  transform: translate(-1.428571px, -0.714286px) scale(1.38, 1.166666667) !important;
  transform-origin: left center !important;
}

/* Inquiry values stay in the same neutral grey before, during and after
 * editing; browser autofill must not replace them with black text. */
html body.page-id-19 #page#page .ho12-contact__form :is(input, textarea, select),
html body.page-id-19 #page#page .ho12-contact__form :is(input, textarea):-webkit-autofill,
html body.page-id-19 #page#page .ho12-contact__form :is(input, textarea):-webkit-autofill:hover,
html body.page-id-19 #page#page .ho12-contact__form :is(input, textarea):-webkit-autofill:focus {
  color: #9b9b9b !important;
  -webkit-text-fill-color: #9b9b9b !important;
  caret-color: #9b9b9b !important;
}

html body.page-id-19 #page#page .ho12-contact__row > label,
html body.page-id-19 #page#page .ho12-contact__subrow > label {
  font-weight: 600 !important;
}

/* Labels carry the 600 emphasis; every placeholder, saved value and typed
 * value stays regular 400 across the shared entry forms. */
html body #page#page :is(
  .ho12-login-form-element input,
  #ho12-reg-form input,
  #ho12-lost-password-form input,
  .ho12-contact__form input,
  .ho12-contact__form textarea
) {
  font-weight: 400 !important;
}

html body #page#page :is(
  .ho12-login-form-element input,
  #ho12-reg-form input,
  #ho12-lost-password-form input,
  .ho12-contact__form input,
  .ho12-contact__form textarea
)::placeholder {
  font-weight: 400 !important;
}

/* Use the requested asset dimensions directly on every viewport. */
html body.page-id-1391 #page#page .ho12-lost-question,
html body.page-id-1391 #page#page .ho12-lost-question > img,
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-reg-input-container.ho12-required-question-anchor
  > .ho12-required-question-icon,
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-reg-input-container.ho12-required-question-anchor
  > .ho12-required-question-icon:hover,
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-reg-input-container.ho12-required-question-anchor
  > .ho12-required-question-icon:focus,
html body.page-id-118 #page#page #ho12-reg-form
  .ho12-reg-input-container.ho12-required-question-anchor
  > .ho12-required-question-icon:active {
  width: 11.9px !important;
  height: 11.9px !important;
  min-width: 11.9px !important;
  min-height: 11.9px !important;
  max-width: 11.9px !important;
  max-height: 11.9px !important;
}

html body.page-id-1391 #page#page .ho12-lost-submit > img[alt="확인"] {
  width: 25px !important;
  min-width: 25px !important;
  max-width: 25px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* The desktop registration page shell itself is rendered at 70%. Use a 17px
 * source marker there so its on-screen height is the requested 11.9px. */
@media (min-width: 1041px) {
  html body.page-id-1391 #page#page .ho12-lost-question,
  html body.page-id-1391 #page#page .ho12-lost-question > img {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
  }

  html body.page-id-1391 #page#page .ho12-lost-submit > img[alt="확인"] {
    width: 35.714286px !important;
    min-width: 35.714286px !important;
    max-width: 35.714286px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-input-container.ho12-required-question-anchor
    > .ho12-required-question-icon,
  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-input-container.ho12-required-question-anchor
    > .ho12-required-question-icon:hover,
  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-input-container.ho12-required-question-anchor
    > .ho12-required-question-icon:focus,
  html body.page-id-118 #page#page #ho12-reg-form
    .ho12-reg-input-container.ho12-required-question-anchor
    > .ho12-required-question-icon:active {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
  }
}

/* Password-recovery guidance belongs to the whole menu composition, not to
 * the narrow input rail. Centre it on the menu axis while allowing the copy
 * to extend beyond the form content width. */
@media (min-width: 1041px) {
  html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-guide {
    position: relative !important;
    width: max-content !important;
    max-width: none !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
    transform: translate(-50%, -9.012px) !important;
  }

  html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-row {
    margin-left: 119.63px !important;
    margin-right: auto !important;
  }
}

@media (min-width: 601px) and (max-width: 1040px) {
  html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-guide {
    position: relative !important;
    width: max-content !important;
    max-width: none !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;
    transform: translate(-50%, -16.783px) !important;
  }
}

@media (max-width: 600px) {
  html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-guide {
    text-align: center !important;
    transform: translate(3.5px, -14.924px) !important;
  }

  html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-row {
    margin-left: -8px !important;
    margin-right: auto !important;
  }
}

/* Inquiry labels use the login email label as the single responsive origin.
 * Fluid rails remove the drift that the former fixed tablet/mobile margins
 * introduced between tuned viewport samples. */
@media (min-width: 1041px) {
  html body.page-id-19 #page#page .ho12-contact__form,
  html body.page-id-19 #page#page
    .ho12-contact:has(> .ho12-contact__history) .ho12-contact__form {
    position: relative !important;
    top: -1.428571px !important;
    margin-left: 311.717143px !important;
    margin-right: 0 !important;
  }
}

@media (min-width: 601px) and (max-width: 1040px) {
  html body.page-id-19 #page#page .ho12-contact__form {
    position: relative !important;
    top: -0.23px !important;
    margin-left: calc(50vw - 234.533px) !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 600px) {
  html body.page-id-19 #page#page .ho12-contact__form {
    position: relative !important;
    top: -0.22px !important;
    margin-left: max(31.467px, calc(50vw - 161.166px)) !important;
    margin-right: 0 !important;
  }
}

/* The send-dish artwork is intentionally quiet at rest and returns to its
 * supplied colour when the action is hovered or keyboard-focused. */
html body.page-id-19 #page#page .ho12-contact__submit img {
  opacity: .42 !important;
  filter: grayscale(1) !important;
  transition: filter .18s ease, opacity .18s ease !important;
}

html body.page-id-19 #page#page .ho12-contact__submit:is(:hover, :focus-visible) img {
  opacity: 1 !important;
  filter: none !important;
}

/* Final confirmation/cancellation image token: images outside the scaled
 * content shell stay at 25px; every image inside the desktop 70% shell uses
 * the source width that renders to the same on-screen 25px. */
html body :is(
  img[alt="확인"],
  img[alt="취소"],
  .ho12-lib-confirm-btn img,
  .ho12-device-confirm-label-image,
  .ho12-device-cancel-label-image,
  .ho12-dev-manage-confirm-image,
  .ho12-pdf17-action-img,
  .ho12-pdf17-action-img-cancel,
  .ho12-force-action-img,
  .ho12-legacy-action-img
) {
  width: 25px !important;
  min-width: 25px !important;
  max-width: 25px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
}

@media (min-width: 1041px) {
  html body #page :is(
    img[alt="확인"],
    img[alt="취소"],
    .ho12-lib-confirm-btn img,
    .ho12-device-confirm-label-image,
    .ho12-device-cancel-label-image,
    .ho12-dev-manage-confirm-image,
    .ho12-pdf17-action-img,
    .ho12-pdf17-action-img-cancel,
    .ho12-force-action-img,
    .ho12-legacy-action-img
  ) {
    width: 35.714286px !important;
    min-width: 35.714286px !important;
    max-width: 35.714286px !important;
  }
}

/* 2026-08-24: exact My Page/login label-origin parity.
 * The login labels occupy a 90px, right-aligned name column.  Mirror that
 * final painted-text position instead of aligning only the outer form box. */
html body.page-id-17 #page#page .ho12-mypage-container
  #ho12-profile-form .ho12-mp-label {
  display: flex !important;
  justify-content: flex-start !important;
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  padding: 0 !important;
  text-align: left !important;
  text-align-last: left !important;
}

/* 2026-08-24: align the painted My Page label column—not merely the outer
 * 440px form—with the painted login labels.  Login names are right-aligned
 * inside their 90px column, so the signed-in form needs this optical inset. */
@media (min-width: 1041px) {
  html body.page-id-17 #page#page .ho12-mypage-container #ho12-profile-form {
    transform: translateX(26px) !important;
  }
}

@media (min-width: 601px) and (max-width: 1040px) {
  html body.page-id-17 #page#page .ho12-mypage-container #ho12-profile-form {
    transform: translateX(26px) !important;
  }
}

@media (max-width: 600px) {
  html body.page-id-17 #page#page .ho12-mypage-container #ho12-profile-form {
    width: calc(100% - 25px) !important;
    margin-left: 25px !important;
  }
}

/* Password confirmation belongs to edit mode only. */
html body.page-id-17 #page#page .ho12-mypage-container
  #ho12-profile-form:not(.is-editing) #ho12-fg-password-confirm {
  display: none !important;
  visibility: hidden !important;
}

html body.page-id-17 #page#page .ho12-mypage-container
  #ho12-profile-form.is-editing #ho12-fg-password-confirm {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 2026-08-24: one shared desktop form rail.
 * 306px is the painted-text origin of the login page's four-character labels
 * inside the 1000px source composition.  My Page, inquiry and password
 * recovery now begin on this same optical line instead of centring each form
 * independently. */
@media (min-width: 1041px) {
  html body.page-id-19 #page#page .ho12-contact__form {
    transform: translateX(-6.5px) !important;
  }

  html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-guide,
  html body.page-id-1391 #page#page .ho12-lost-password-box .ho12-lost-row {
    margin-left: 166px !important;
    margin-right: 0 !important;
  }
}

/* 2026-08-24: the shared form rail has two fixed origins, matching login:
 * label text at 306px and entered text at 396px in the 1000px composition.
 * Remove each legacy form's private gap/padding so inquiry, password recovery
 * and My Page all begin on exactly the same two vertical lines. */
html body.page-id-17 #page#page .ho12-mypage-container
  #ho12-profile-form .ho12-mp-field-group {
  gap: 0 !important;
}

html body.page-id-17 #page#page .ho12-mypage-container
  #ho12-profile-form .ho12-mp-input-container input {
  padding-left: 0 !important;
}

html body.page-id-19 #page#page .ho12-contact__form
  .ho12-contact__row {
  grid-template-columns: 90px 210px !important;
}

html body.page-id-19 #page#page .ho12-contact__form
  .ho12-contact__row > label {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
}

html body.page-id-19 #page#page .ho12-contact__form
  .ho12-contact__row > .ho12-contact__control {
  width: 210px !important;
  min-width: 0 !important;
}

html body.page-id-1391 #page#page .ho12-lost-password-box
  .ho12-lost-row {
  gap: 0 !important;
}

html body.page-id-1391 #page#page .ho12-lost-password-box
  .ho12-lost-input {
  padding-left: 0 !important;
}

/* Phone verification follows the same dormant/active language as login:
 * a quiet neutral-grey circle at rest, solid black only on hover/focus. */
html body.page-id-17 #page#page .ho12-mypage-container
  #ho12-mp-verify-btn-inline[data-verified='0'] > img {
  filter: grayscale(1) !important;
  opacity: .18 !important;
  transform: none !important;
  transition: filter .15s ease, opacity .15s ease !important;
}

html body.page-id-17 #page#page .ho12-mypage-container
  #ho12-mp-verify-btn-inline[data-verified='0']:is(:hover, :focus-visible) > img {
  filter: grayscale(1) brightness(0) !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Match the login icon tooltip exactly: neutral light gray, 12px regular
 * Nanum Gothic, including every hover/focus/active state. */
html body.page-id-17 #page#page .ho12-mypage-container
  .ho12-mp-quick-nav .ho12-mp-nav-item:is([data-tab="device"], [data-tab="adult"])
  > .ho12-mp-hover-bubble,
html body.page-id-17 #page#page .ho12-mypage-container
  .ho12-mp-quick-nav .ho12-mp-nav-item:is([data-tab="device"], [data-tab="adult"]):is(:hover, :focus-visible, :focus-within, .active)
  > .ho12-mp-hover-bubble,
html body.page-id-17 #page#page .ho12-mypage-container
  .ho12-mp-action-wrapper > .ho12-mp-action-btn,
html body.page-id-17 #page#page .ho12-mypage-container
  .ho12-mp-action-wrapper:is(:hover, :focus-visible, :focus-within)
  > .ho12-mp-action-btn {
  color: #afabab !important;
  font-family: 'Nanum Gothic', 'Noto Sans KR', sans-serif !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

/* 2026-08-24: one narrow-form rail.
 * The login/contact composition paints labels at x=306 and values at x=396
 * inside the 1000px page.  Keep My Page's two shortcut icons on that same
 * value rail instead of letting the centered legacy flex group sit 22px left. */
@media (min-width: 601px) {
  /* Keep the two shortcut icons centered as a pair.  Only the opened device
   * panel joins the login form's x=306 content rail. */
  html body.page-id-17 #page#page .ho12-mypage-container
    .ho12-mp-quick-nav {
    transform: none !important;
  }

  html body.page-id-17 #page#page #ho12-tab-device
    #ho12-devices-section {
    transform: translateX(26px) !important;
  }

  /* Password recovery uses the same 306/396 label/value starts as login,
   * My Page and Contact.  Removing the old 16px gap is intentional. */
  html body #page#page .ho12-lost-password-screen .ho12-lost-row {
    width: 388px !important;
    max-width: 388px !important;
    gap: 0 !important;
  }

  html body #page#page .ho12-lost-password-screen .ho12-lost-label {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
  }

  html body #page#page .ho12-lost-password-screen .ho12-lost-input {
    padding-left: 0 !important;
  }
}

/* Every captain-reply exclamation mark uses the PDF's exact visible height. */
html body #page#page img.ho12-contact-status-icon,
html body #page#page img.ho12-contact__item-status {
  width: 11.9px !important;
  height: 11.9px !important;
  min-width: 11.9px !important;
  min-height: 11.9px !important;
  max-width: 11.9px !important;
  max-height: 11.9px !important;
  object-fit: contain !important;
}

/* The desktop page shell is painted at 70%; 17px becomes 11.9px on screen. */
@media (min-width: 1041px) {
  html body #page#page img.ho12-contact-status-icon,
  html body #page#page img.ho12-contact__item-status {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
  }
}

/* 2026-08-24 final alignment and neutral-label pass.
 * The two My Page shortcuts stay centered horizontally.  Their row starts at
 * the login form's measured y=390.99px, so only a 1.47px vertical correction
 * is applied on the shared desktop/tablet composition. */
@media (min-width: 601px) {
  html body.page-id-17 #page#page .ho12-mypage-container
    .ho12-mp-quick-nav {
    transform: translateY(-1.47px) !important;
  }
}

/* Device-list captions are inactive information, never black. */
html body.page-id-17 #page#page #ho12-tab-device
  .ho12-dev-list-section > h3,
html body.page-id-17 #page#page #ho12-tab-device
  .ho12-dev-card > span:last-child {
  color: #a3a3a3 !important;
}

/* Gamtae history/gift shortcuts use the same 28px visible icon and the exact
 * login-tooltip typography (neutral gray, 12px, regular weight). */
html body #page#page .ho12-gamtae-buy-wrapper .ho12-gt-icon-btn,
html body #page#page .ho12-gamtae-buy-wrapper .ho12-gt-icon-btn:is(:hover, :focus-visible),
html body #page#page .ho12-gamtae-buy-wrapper .ho12-gt-icon-btn > img {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain !important;
}

html body #page#page .ho12-gamtae-buy-wrapper .ho12-gt-icon-btn::after {
  color: #afabab !important;
  font-family: 'Nanum Gothic', 'Noto Sans KR', sans-serif !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

/* The desktop site shell renders at 70%; 40px is exactly 28px on screen. */
@media (min-width: 1041px) {
  html body #page#page .ho12-gamtae-buy-wrapper .ho12-gt-icon-btn,
  html body #page#page .ho12-gamtae-buy-wrapper .ho12-gt-icon-btn:is(:hover, :focus-visible),
  html body #page#page .ho12-gamtae-buy-wrapper .ho12-gt-icon-btn > img {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }
}

/* Profile-save feedback uses the shared blue hand-drawn card and its original
 * confirm artwork. */
html body.page-id-17 #ho12-profile-success.ho12-success-toast {
  min-width: 300px !important;
  padding: 26px 34px !important;
  gap: 0 !important;
  background: #fff !important;
  border: 1.5px solid #a3a3a3 !important;
  border-radius: 4px 7px 5px 8px / 7px 4px 8px 5px !important;
  box-shadow: none !important;
}

html body.page-id-17 #ho12-profile-success.ho12-success-toast
  > span {
  display: none !important;
}

html body.page-id-17 #ho12-profile-success
  .ho12-profile-success-message {
  margin: 0 !important;
  color: #8d8d8d !important;
  font-family: 'Nanum Gothic', 'Noto Sans KR', sans-serif !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: none !important;
}

html body.page-id-17 #ho12-profile-success
  #ho12-profile-success-confirm {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 28px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

html body.page-id-17 #ho12-profile-success
  #ho12-profile-success-confirm > img {
  display: block !important;
  width: 38px !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* 2026-08-24: shared first-content line.
 * On the desktop composition the login page's first e-mail row starts at
 * source y=391px (visible y=273.7px at the site's 70% shell).  Only pages
 * whose first real content was still above that line are corrected here;
 * header/navigation and full-canvas readers remain untouched. */
@media (min-width: 1041px) {
  /* Art-goods category shortcuts previously started at source y=342px. */
  html body.page-id-15 #page#page > .site-content {
    padding-top: 391px !important;
  }

  /* My Library keeps its own 28px top margin: 363 + 28 = 391. */
  html body.page-id-16 #page#page > .site-content {
    padding-top: 363px !important;
  }

  /* Gamtae shop keeps the wrapper's intentional 10px top margin:
   * 381 + 10 = 391. */
  html body.page-id-18 #page#page > .site-content {
    padding-top: 381px !important;
  }

  /* The member name precedes the history/gift shortcuts. The balance value
   * remains registered to the falling Gamtae artwork through the compensated
   * transform below, so reordering the flow cannot move that overlay. */
  html body.page-id-18 #page#page .ho12-gamtae-buy-wrapper {
    display: flex !important;
    flex-direction: column !important;
  }

  html body.page-id-18 #page#page .ho12-gt-tabs-icons {
    order: 3 !important;
    margin-bottom: 50px !important;
  }

  /* Match the shop shortcuts to the My Page shortcut grid: the history and
   * gift icons sit directly below main-menu planets 3 and 4.  The template
   * has an inline 32px flex gap, so symmetric inner margins extend that gap
   * without moving the row centre or affecting its mobile composition. */
  html body.page-id-18 #page#page .ho12-gt-tabs-icons
    > .ho12-gt-icon-btn:first-child {
    margin-right: 56.428571px !important;
  }

  html body.page-id-18 #page#page .ho12-gt-tabs-icons
    > .ho12-gt-icon-btn:last-child {
    margin-left: 56.428571px !important;
  }

  html body.page-id-18 #page#page .ho12-gt-charge-gif-banner {
    order: 1 !important;
  }

  html body.page-id-18 #page#page .ho12-gt-balance-info-flow {
    order: 2 !important;
    margin: 0 auto 30px !important;
  }

  html body.page-id-18 #page#page .ho12-gt-balance-info-flow
    > div:first-child {
    transform: translate(-62px, -78px) !important;
  }

  html body.page-id-18 #page#page .ho12-gt-panel {
    order: 4 !important;
  }
}

/* Keep the adult-verification body on the same content rail as the device
 * panel title. The shortcut icons above stay centred and are not moved. */
@media (min-width: 601px) {
  html body.page-id-17 #page#page #ho12-tab-adult
    .ho12-adult-status-box {
    margin-left: 306px !important;
    margin-right: auto !important;
  }
}

/* 2026-08-24: final password-recovery composition.
 * Reset the historical left-translation on the guide, retain the already
 * approved label rail, and give the e-mail value the same 10px inset as the
 * login form.  The field deliberately keeps a visible text caret. */
html body.page-id-1391 #page#page#page .ho12-lost-password-screen
  .ho12-lost-guide {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto 68px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-align: center !important;
}

html body.page-id-1391 #page#page#page .ho12-lost-password-screen
  .ho12-lost-input {
  padding: 0 32px 0 10px !important;
  caret-color: #8d8d8d !important;
  cursor: text !important;
  user-select: text !important;
  -webkit-user-select: text !important;
}

html body.page-id-1391 #page#page#page .ho12-lost-password-screen
  .ho12-lost-question {
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* 2026-08-25 call review: keep the edit action on the page axis while the
 * profile fields retain their login-aligned 26px optical correction. */
@media (min-width: 1041px) {
  html body.page-id-17 #page#page .ho12-mypage-container #ho12-btn-edit-wrap {
    transform: translateX(-26px) !important;
  }
}

/* 2026-08-25 call review: use the approved title-to-copy breathing room for
 * every device block. Text remains inactive grey; only explicit actions keep
 * their active colour. The current-device artwork becomes 28px on screen in
 * the desktop 70% composition (40px source). */
html body.page-id-17 #page#page #ho12-tab-device #ho12-devices-section {
  row-gap: 40px !important;
}

html body.page-id-17 #page#page #ho12-tab-device
  .ho12-dev-current > h3,
html body.page-id-17 #page#page #ho12-tab-device
  .ho12-dev-list-section > h3,
html body.page-id-17 #page#page #ho12-tab-device
  #ho12-dev-current-display-name,
html body.page-id-17 #page#page #ho12-tab-device
  .ho12-dev-item-name-text {
  color: #a3a3a3 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

html body.page-id-17 #page#page #ho12-tab-device
  .ho12-dev-current > h3,
html body.page-id-17 #page#page #ho12-tab-device
  .ho12-dev-list-section > h3 {
  margin-bottom: 40px !important;
}

/* The registered-device caption is wrapped in a span under an inline-black
 * heading. Paint the visible caption itself with the inactive gray. */
html body.page-id-17 #page#page #ho12-tab-device
  .ho12-dev-list-section > h3 > span:first-child {
  color: #a3a3a3 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* Current-device and nickname labels use the exact typography of the device
 * description copy above: same KoPub face, neutral gray, regular weight and
 * 1.55 line height. This also neutralises the nickname's inline 900 weight. */
html body.page-id-17 #page#page #ho12-tab-device
  .ho12-dev-current > h3,
html body.page-id-17 #page#page #ho12-tab-device
  .ho12-dev-register-row > div:first-child > span:first-child {
  color: #a3a3a3 !important;
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

html body.page-id-17 #page#page #ho12-tab-device
  .ho12-dev-current-info {
  margin-bottom: 40px !important;
}

/* The balance keeps its original horizontal registration. The requested
 * "145 spacing" is the vertical breathing room before the member name. */
html body.page-id-18 #page#page .ho12-gamtae-buy-wrapper
  .ho12-gt-user-name {
  margin-top: 18px !important;
}

@media (min-width: 1041px) {
  html body.page-id-17 #page#page #ho12-tab-device #ho12-dev-current-icon,
  html body.page-id-17 #page#page #ho12-tab-device #ho12-dev-current-icon > img,
  html body.page-id-17 #page#page #ho12-tab-device
    .ho12-dev-card > div:first-of-type,
  html body.page-id-17 #page#page #ho12-tab-device
    .ho12-dev-card > div:first-of-type > img {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    object-fit: contain !important;
  }

  html body.page-id-17 #page#page #ho12-tab-device
    .ho12-dev-card > div:first-of-type {
    margin-bottom: 8px !important;
  }
}

@media (max-width: 600px) {
  html body.page-id-1391 #page#page#page .ho12-lost-password-screen
    .ho12-lost-guide {
    margin-bottom: 48px !important;
  }

  html body.page-id-1391 #page#page#page .ho12-lost-password-screen
    .ho12-lost-row {
    width: 100% !important;
    max-width: 388px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 2026-08-24: centre the recovery explanation on the full header/page axis.
 * The form rail below intentionally keeps its existing coordinates. */
html body.page-id-1391 #page#page#page .ho12-lost-password-screen
  .ho12-lost-guide {
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  text-align: center !important;
}

/* 2026-08-25: password recovery reuses the login form's two exact rails.
 * Live centre-normalised measurement at the same desktop breakpoint places
 * this row at 119.63px inside the recovery box.  The login row then uses its
 * native 90px label, 16px column gap and 10px input padding unchanged. */
@media (min-width: 1041px) {
  html body.page-id-1391 #page#page#page .ho12-lost-password-screen
    .ho12-lost-guide {
    margin-bottom: 25.03px !important;
  }

  html body.page-id-1391 #page#page#page .ho12-lost-password-screen
    .ho12-lost-row {
    width: 430px !important;
    max-width: 430px !important;
    margin-left: 119.63px !important;
    margin-right: 0 !important;
    gap: 16px !important;
  }

  html body.page-id-1391 #page#page#page .ho12-lost-password-screen
    .ho12-lost-row > .ho12-lost-label {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
  }

  html body.page-id-1391 #page#page#page .ho12-lost-password-screen
    .ho12-lost-input {
    padding-left: 10px !important;
  }

  /* Override the older four-#page optical nudge that moved only the label. */
  html body.page-id-1391 #page#page#page#page#page
    .ho12-lost-password-box .ho12-lost-row > span.ho12-lost-label {
    position: static !important;
    left: auto !important;
    right: auto !important;
    align-self: flex-start !important;
  }
}

/* 2026-08-25: keep the three astronaut speech bubbles open on the two
 * account sections.  My Page (including its device/adult hash panels) keeps
 * blue active; Gamtae (including history/gift panels) keeps green active.
 * The other two bubbles stay visible in their neutral state. */
html body.logged-in:is(.page-id-17, .page-id-18) #ho12-header
  .ho12-hd-user-wrapper > .ho12-hd-user-tree.ho12-pdf18-speech-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transition: none !important;
}

html body.logged-in:is(.page-id-17, .page-id-18) #ho12-header
  .ho12-hd-user-wrapper > .ho12-hd-user-tree.ho12-pdf18-speech-menu
  > a.ho12-pdf18-speech-link {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: none !important;
}

html body.logged-in:is(.page-id-17, .page-id-18) #ho12-header
  .ho12-pdf18-speech-menu > a.ho12-pdf18-speech-link
  > img.ho12-pdf18-speech-piece {
  filter: grayscale(1) !important;
  opacity: .32 !important;
  transition: none !important;
}

html body.logged-in.page-id-17 #ho12-header
  .ho12-pdf18-speech-menu > a.ho12-pdf18-speech-link-blue
  > img.ho12-pdf18-speech-piece,
html body.logged-in.page-id-18 #ho12-header
  .ho12-pdf18-speech-menu > a.ho12-pdf18-speech-link-green
  > img.ho12-pdf18-speech-piece {
  filter: none !important;
  opacity: 1 !important;
}

/* Keep the normal hover preview on the two inactive bubbles while the
 * current section's blue/green bubble remains permanently active. */
html body.logged-in:is(.page-id-17, .page-id-18) #ho12-header
  .ho12-pdf18-speech-menu > a.ho12-pdf18-speech-link:hover
  > img.ho12-pdf18-speech-piece {
  filter: none !important;
  opacity: 1 !important;
}

/* 2026-08-25: the server marks My Page/Gamtae as persistent sections. */
html body.logged-in #ho12-header#ho12-header
  .ho12-hd-user-wrapper.active-persistent
  > .ho12-hd-user-tree.ho12-pdf18-speech-menu,
html body.logged-in #ho12-header#ho12-header
  .ho12-hd-user-wrapper.active-persistent
  > .ho12-hd-user-tree.ho12-pdf18-speech-menu
  > a.ho12-pdf18-speech-link {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body.logged-in #ho12-header#ho12-header
  .ho12-hd-user-wrapper.active-persistent
  > .ho12-hd-user-tree.ho12-pdf18-speech-menu
  > a.ho12-pdf18-speech-link.active-page
  > img.ho12-pdf18-speech-piece {
  filter: none !important;
  opacity: 1 !important;
}

/* The site's Additional CSS is injected after this file with three repeated
 * header IDs. Use one higher specificity level so the active section keeps
 * its real colour without needing hover, while inactive bubbles stay muted. */
html body.logged-in #ho12-header#ho12-header#ho12-header#ho12-header
  .ho12-hd-user-wrapper.active-persistent
  > .ho12-hd-user-tree.ho12-pdf18-speech-menu
  > a.ho12-pdf18-speech-link:not(.active-page)
  > img.ho12-pdf18-speech-piece {
  filter: grayscale(1) !important;
  opacity: .32 !important;
}

html body.logged-in #ho12-header#ho12-header#ho12-header#ho12-header
  .ho12-hd-user-wrapper.active-persistent
  > .ho12-hd-user-tree.ho12-pdf18-speech-menu
  > a.ho12-pdf18-speech-link.active-page
  > img.ho12-pdf18-speech-piece,
html body.logged-in #ho12-header#ho12-header#ho12-header#ho12-header
  .ho12-hd-user-wrapper.active-persistent
  > .ho12-hd-user-tree.ho12-pdf18-speech-menu
  > a.ho12-pdf18-speech-link:hover
  > img.ho12-pdf18-speech-piece,
html body.logged-in #ho12-header#ho12-header#ho12-header#ho12-header
  .ho12-hd-user-wrapper.active-persistent
  > .ho12-hd-user-tree.ho12-pdf18-speech-menu
  > a.ho12-pdf18-speech-link:focus-visible
  > img.ho12-pdf18-speech-piece {
  filter: none !important;
  opacity: 1 !important;
}

/* 2026-08-25: password recovery uses the login form's exact tablet rail.
 * The historical 601–1040px rule removed the 16px label/value gap and made
 * the e-mail input start 16px too early. Keep the already-correct label origin
 * and restore the login row's 90px label + 16px gap + 324px value rail. */
@media (min-width: 601px) and (max-width: 1040px) {
  html body.page-id-1391 #page#page#page#page
    .ho12-lost-password-screen .ho12-lost-row {
    width: 430px !important;
    max-width: 430px !important;
    gap: 16px !important;
  }

  html body.page-id-1391 #page#page#page#page
    .ho12-lost-password-screen .ho12-lost-label {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
  }

  html body.page-id-1391 #page#page#page#page
    .ho12-lost-password-screen .ho12-lost-input {
    padding-left: 10px !important;
  }
}

/* 2026-08-25 DEVICE DISCLOSURE — FINAL CASCADE OVERRIDE */
html body.page-id-17 #page#page#page#page #ho12-tab-device :is(.ho12-dev-header, .ho12-dev-current, .ho12-dev-list-section, .ho12-dev-register-row) {
  box-sizing: border-box !important;
  width: 340px !important;
  min-width: 0 !important;
  max-width: 340px !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device .ho12-dev-register-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-register-btn {
  display: inline-block !important;
  flex: none !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #00a9df !important;
  -webkit-text-fill-color: #00a9df !important;
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device .ho12-dev-register-fields[hidden] {
  display: none !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device .ho12-dev-register-fields:not([hidden]) {
  display: grid !important;
  grid-template-columns: 90px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  width: 340px !important;
  min-width: 0 !important;
  max-width: 340px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device .ho12-dev-register-fields > span {
  color: #a3a3a3 !important;
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  white-space: nowrap !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-nickname {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #8d8d8d !important;
  -webkit-text-fill-color: #8d8d8d !important;
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  caret-color: #8d8d8d !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-nickname::placeholder {
  color: #a3a3a3 !important;
  -webkit-text-fill-color: #a3a3a3 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

/* 2026-08-25: the maximum three registered devices always occupy one row. */
html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list {
  display: grid !important;
  grid-template-columns: repeat(3, 100px) !important;
  grid-auto-flow: row !important;
  column-gap: 20px !important;
  row-gap: 20px !important;
  align-items: start !important;
  justify-content: start !important;
  box-sizing: border-box !important;
  width: 340px !important;
  min-width: 340px !important;
  max-width: 340px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list > .ho12-dev-card {
  box-sizing: border-box !important;
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  margin: 0 !important;
}

/* 2026-08-25: member name uses the login field's exact neutral text token. */
html body.page-id-18 #page#page#page#page .ho12-gamtae-buy-wrapper .ho12-gt-user-name {
  color: #9b9b9b !important;
  -webkit-text-fill-color: #9b9b9b !important;
}

/* 2026-08-25: device-page machine artwork is 32px tall on screen. */
html body.page-id-17 #page#page#page#page #ho12-tab-device :is(
  #ho12-dev-current-icon,
  #ho12-dev-current-icon > img,
  .ho12-dev-card > div:first-of-type,
  .ho12-dev-card > div:first-of-type > img,
  .ho12-dev-card-icon,
  .ho12-dev-card-icon > img
) {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  object-fit: contain !important;
}

@media (min-width: 1041px) {
  html body.page-id-17 #page#page#page#page #ho12-tab-device :is(
    #ho12-dev-current-icon,
    #ho12-dev-current-icon > img,
    .ho12-dev-card > div:first-of-type,
    .ho12-dev-card > div:first-of-type > img,
    .ho12-dev-card-icon,
    .ho12-dev-card-icon > img
  ) {
    width: 45.7142857px !important;
    min-width: 45.7142857px !important;
    max-width: 45.7142857px !important;
    height: 45.7142857px !important;
    min-height: 45.7142857px !important;
    max-height: 45.7142857px !important;
  }
}

/* 2026-08-27 REFERENCE POPUP STANDARD
 * Every actual popup uses the same broad, low, hand-drawn rectangular frame
 * from the approved device-limit reference. Only the section accent changes.
 * Inline history/code panels are intentionally excluded. */
html body :is(
  .ho12-system-dialog__card,
  #ho12-confirm-modal > div,
  #ho12-charge-modal > div,
  #ho12-gift-created-modal > div,
  #ho12-gift-claimed-modal > div,
  #ho12-device-limit-modal .ho12-device-limit-box,
  .ho12-device-remove-confirm,
  .ho12-lib-confirm-box,
  #ho12-adult-modal .ho12-modal,
  .ho12-gift-success-card,
  .ho12-gift-receive-card,
  .ho12-contact-success-box,
  .ho12-address-modal-card,
  #ho12-checkout-success-overlay > div,
  #ho12-goods-success-overlay > div,
  .ho12-contact-success-overlay > div,
  .ho12-cart-done-inner,
  #ho12-pdf17-confirm > div,
  #ho12-pdf17-purchase > div,
  #ho12-pdf17-bulk-confirm .ho12-pdf17-bulk-card,
  #ho12-inline-confirm-modal > div,
  #ho12-bulk-calc-modal .ho12-modal,
  #ho12-buy-popup .ho12-buy-popup-inner,
  #ho12-profile-success.ho12-success-toast
) {
  --ho12-popup-accent: #e7c96d;
  box-sizing: border-box !important;
  width: calc(100vw - 36px) !important;
  max-width: 350px !important;
  min-height: 175px !important;
  padding: 30px 28px !important;
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
}

/* Dynamic/system dialog follows the identity selected by the calling page. */
html body .ho12-system-dialog__card {
  --ho12-popup-accent: var(--ho12-dialog-accent, #e7c96d) !important;
}

/* Blue account, device and contact popups. */
html body :is(
  #ho12-device-limit-modal .ho12-device-limit-box,
  .ho12-device-remove-confirm,
  #ho12-adult-modal .ho12-modal,
  .ho12-contact-success-box,
  .ho12-contact-success-overlay > div,
  #ho12-profile-success.ho12-success-toast
) {
  --ho12-popup-accent: #00a9df !important;
}

/* Green gamtae and gift popups. */
html body :is(
  #ho12-charge-modal > div,
  #ho12-gift-created-modal > div,
  #ho12-gift-claimed-modal > div,
  .ho12-gift-success-card,
  .ho12-gift-receive-card
) {
  --ho12-popup-accent: #8bc34a !important;
}

/* Purchase confirmations inherit their requested blue/green/yellow identity. */
html body #ho12-confirm-modal.ho12-confirm-modal-theme-blue > div {
  --ho12-popup-accent: #0fa6d8 !important;
}
html body #ho12-confirm-modal.ho12-confirm-modal-theme-green > div {
  --ho12-popup-accent: #73cf18 !important;
}
html body #ho12-confirm-modal.ho12-confirm-modal-theme-yellow > div {
  --ho12-popup-accent: #e7c96d !important;
}

/* Library uses its stronger orange; other commerce/viewer popups use yellow. */
html body .ho12-lib-confirm-box {
  --ho12-popup-accent: #ffa502 !important;
}
html body :is(
  .ho12-address-modal-card,
  #ho12-checkout-success-overlay > div,
  #ho12-goods-success-overlay > div,
  .ho12-cart-done-inner,
  #ho12-pdf17-confirm > div,
  #ho12-pdf17-purchase > div,
  #ho12-pdf17-bulk-confirm .ho12-pdf17-bulk-card,
  #ho12-inline-confirm-modal > div,
  #ho12-bulk-calc-modal .ho12-modal,
  #ho12-buy-popup .ho12-buy-popup-inner
) {
  --ho12-popup-accent: #f1bb43 !important;
}

/* The shared SVG below is the only visible popup outline. */
html body .ho12-popup-frame-standard > svg[viewBox][preserveAspectRatio]:not(.ho12-popup-frame-line-standard) {
  display: none !important;
}
html body .ho12-popup-frame-line-standard {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
}
html body .ho12-popup-frame-line-standard path {
  fill: #fff !important;
  stroke: var(--ho12-popup-accent, #e7c96d) !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
}
html body .ho12-popup-frame-standard > :not(.ho12-popup-frame-line-standard) {
  position: relative;
  z-index: 1;
}
html body .ho12-popup-frame-standard.ho12-popup-frame-standard::before,
html body .ho12-popup-frame-standard.ho12-popup-frame-standard::after,
html body #ho12-pdf17-purchase#ho12-pdf17-purchase .card::before,
html body #ho12-pdf17-bulk-confirm#ho12-pdf17-bulk-confirm .ho12-pdf17-bulk-card::before,
html body #ho12-inline-confirm-modal#ho12-inline-confirm-modal > div::before {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
}

@media (max-width: 480px) {
  html body :is(
    .ho12-system-dialog__card,
    #ho12-confirm-modal > div,
    #ho12-charge-modal > div,
    #ho12-gift-created-modal > div,
    #ho12-gift-claimed-modal > div,
    #ho12-device-limit-modal .ho12-device-limit-box,
    .ho12-device-remove-confirm,
    .ho12-lib-confirm-box,
    #ho12-adult-modal .ho12-modal,
    .ho12-gift-success-card,
    .ho12-gift-receive-card,
    .ho12-contact-success-box,
    .ho12-address-modal-card,
    #ho12-checkout-success-overlay > div,
    #ho12-goods-success-overlay > div,
    .ho12-contact-success-overlay > div,
    .ho12-cart-done-inner,
    #ho12-pdf17-confirm > div,
    #ho12-pdf17-purchase > div,
    #ho12-pdf17-bulk-confirm .ho12-pdf17-bulk-card,
    #ho12-inline-confirm-modal > div,
    #ho12-bulk-calc-modal .ho12-modal,
    #ho12-buy-popup .ho12-buy-popup-inner,
    #ho12-profile-success.ho12-success-toast
  ) {
    min-height: 175px !important;
    padding: 30px 28px !important;
  }
}

html body :is(
  .ho12-system-dialog__card,
  #ho12-confirm-modal > div,
  #ho12-charge-modal > div,
  #ho12-gift-created-modal > div,
  #ho12-gift-claimed-modal > div,
  #ho12-device-limit-modal .ho12-device-limit-box,
  .ho12-device-remove-confirm,
  .ho12-lib-confirm-box,
  #ho12-adult-modal .ho12-modal,
  .ho12-gift-success-card,
  .ho12-gift-receive-card,
  .ho12-contact-success-box,
  .ho12-address-modal-card,
  #ho12-checkout-success-overlay > div,
  #ho12-goods-success-overlay > div,
  .ho12-contact-success-overlay > div,
  .ho12-cart-done-inner,
  #ho12-pdf17-confirm > div,
  #ho12-pdf17-purchase > div,
  #ho12-pdf17-bulk-confirm .ho12-pdf17-bulk-card,
  #ho12-inline-confirm-modal > div,
  #ho12-bulk-calc-modal .ho12-modal,
  #ho12-buy-popup .ho12-buy-popup-inner,
  #ho12-profile-success.ho12-success-toast
) :is(p, h1, h2, h3, h4, h5, h6, label, .ho12-system-dialog__message, .ho12-lib-confirm-message, .ho12-gift-guide-copy, .ho12-popup-standard-message, .ho12-profile-success-message) {
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  /* The desktop site content uses zoom:.7, while body-level popups do not.
   * 11.2px therefore paints at the same size as a 16px site label. */
  font-size: 11.2px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

@media (max-width: 768px) {
  html body :is(
    .ho12-system-dialog__card,
    #ho12-confirm-modal > div,
    #ho12-charge-modal > div,
    #ho12-gift-created-modal > div,
    #ho12-gift-claimed-modal > div,
    #ho12-device-limit-modal .ho12-device-limit-box,
    .ho12-device-remove-confirm,
    .ho12-lib-confirm-box,
    #ho12-adult-modal .ho12-modal,
    .ho12-gift-success-card,
    .ho12-gift-receive-card,
    .ho12-contact-success-box,
    .ho12-address-modal-card,
    #ho12-checkout-success-overlay > div,
    #ho12-goods-success-overlay > div,
    .ho12-contact-success-overlay > div,
    .ho12-cart-done-inner,
    #ho12-pdf17-confirm > div,
    #ho12-pdf17-purchase > div,
    #ho12-pdf17-bulk-confirm .ho12-pdf17-bulk-card,
    #ho12-inline-confirm-modal > div,
    #ho12-bulk-calc-modal .ho12-modal,
    #ho12-buy-popup .ho12-buy-popup-inner,
    #ho12-profile-success.ho12-success-toast
  ) :is(p, h1, h2, h3, h4, h5, h6, label, .ho12-system-dialog__message, .ho12-lib-confirm-message, .ho12-gift-guide-copy, .ho12-popup-standard-message, .ho12-profile-success-message) {
    font-size: 16px !important;
  }
}

html body :is(
  .ho12-system-dialog__message,
  .ho12-lib-confirm-message,
  .ho12-gift-guide-copy,
  .ho12-popup-standard-message
) :is(strong, b) {
  font-weight: 400 !important;
}

/* Device-limit notices use the same neutral copy and clean image action as
 * every approved popup. The blue identity belongs to the frame/action asset,
 * not to the body copy or a browser focus ring. */
html body .ho12-system-dialog__message {
  color: #9b9b9b !important;
}
html body .ho12-system-dialog__button:is(:focus, :focus-visible) {
  outline: none !important;
  outline-offset: 0 !important;
}

/* 2026-08-25 DEVICE LAYOUT — FINAL CASCADE OVERRIDE */
html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list > .ho12-dev-card {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card > :is(div:first-of-type, .ho12-dev-card-icon) {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-item-name-wrap {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  text-align: center !important;
  overflow: visible !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-item-name-text {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  text-align: center !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-item-rename-input {
  display: none !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
  > .ho12-dev-card .ho12-dev-remove-btn-circle {
  right: auto !important;
  left: 36px !important;
}

@media (min-width: 1041px) {
  html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
    > .ho12-dev-card .ho12-dev-item-name-wrap {
    width: 45.7142857px !important;
    min-width: 45.7142857px !important;
    max-width: 45.7142857px !important;
  }

  html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-list
    > .ho12-dev-card .ho12-dev-remove-btn-circle {
    left: 50px !important;
  }
}

html body.page-id-17 #page#page#page#page #ho12-tab-device .ho12-dev-register-fields {
  display: grid !important;
  grid-template-columns: 90px minmax(0, 1fr) !important;
  align-items: center !important;
  order: 1 !important;
}

html body.page-id-17 #page#page#page#page #ho12-tab-device #ho12-dev-register-btn {
  order: 2 !important;
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

@media (min-width: 1041px) {
  html body.page-id-17 #page#page#page#page #ho12-tab-device :is(
    .ho12-dev-header,
    .ho12-dev-current,
    .ho12-dev-list-section
  ) {
    position: relative !important;
    left: -50.4px !important;
  }
}

@media (min-width: 601px) and (max-width: 1040px) {
  html body.page-id-17 #page#page#page#page #ho12-tab-device :is(
    .ho12-dev-header,
    .ho12-dev-current,
    .ho12-dev-list-section
  ) {
    position: relative !important;
    left: -45px !important;
  }
}

/* 2026-08-31 final profile-popup lock: the profile save card has no overlay
 * wrapper, so the card itself is the viewport-centred layer. */
html body.page-id-17
  #ho12-profile-success#ho12-profile-success.ho12-success-toast {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2147483000 !important;
}

/* 2026-09-02 gift-success dialog: keep the gift page visible behind the
 * result, use the annotated type scale, and make the code itself the sole
 * copy action. */
html body #ho12-gift-send-overlay#ho12-gift-send-overlay {
  background: transparent !important;
  backdrop-filter: none !important;
}

html body.page-id-18
  #ho12-gift-send-overlay#ho12-gift-send-overlay
  .ho12-gift-success-card.ho12-gift-success-card {
  width: min(380px, calc(100vw - 32px)) !important;
  max-width: 380px !important;
  min-height: 540px !important;
  max-height: calc(100dvh - 32px) !important;
  padding: 38px 34px 28px !important;
}

html body #ho12-gift-send-overlay#ho12-gift-send-overlay
  .ho12-gift-send-close-btn {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
}

html body #ho12-gift-send-overlay#ho12-gift-send-overlay
  .ho12-gift-guide-code,
html body #page#page .ho12-gamtae-buy-wrapper
  #ho12-gift-code-copy-btn-inline {
  color: #8f8f8f !important;
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: none !important;
}

html body #ho12-gift-send-overlay#ho12-gift-send-overlay
  .ho12-gift-guide-code:is(:hover, :focus, :focus-visible),
html body #page#page .ho12-gamtae-buy-wrapper
  #ho12-gift-code-copy-btn-inline:is(:hover, :focus, :focus-visible) {
  color: #111 !important;
  background: transparent !important;
  outline: 0 !important;
}

html body.page-id-18
  #ho12-gift-send-overlay#ho12-gift-send-overlay
  .ho12-gift-success-card.ho12-gift-success-card
  .ho12-gift-guide-copy.ho12-gift-guide-copy {
  width: 100% !important;
  max-width: 310px !important;
  color: #9b9b9b !important;
  font-family: KoPubWorldDotum, 'KoPubWorld Dotum', 'KoPub Dotum', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

html body #ho12-gift-send-overlay#ho12-gift-send-overlay
  :is(.ho12-gift-guide-image-copy, .ho12-gift-guide-copy-status) {
  display: none !important;
}

/* The desktop site is rendered at 70%. The success card is moved directly
 * under body to escape that page zoom, so restore the same painted scale here. */
@media (min-width: 769px) {
  html body.page-id-18
    #ho12-gift-send-overlay#ho12-gift-send-overlay
    .ho12-gift-success-card.ho12-gift-success-card {
    zoom: .7 !important;
  }
}

@media (max-width: 768px) {
  html body.page-id-18
    #ho12-gift-send-overlay#ho12-gift-send-overlay
    .ho12-gift-success-card.ho12-gift-success-card {
    zoom: 1 !important;
  }
}