@import url('https://cdn.jsdelivr.net/npm/font-kopubworld@1.0/batang.min.css');
@import url('https://cdn.jsdelivr.net/npm/font-kopubworld@1.0/dotum.min.css');

.ho12-hd-search-expand input#ho12-search-input,
.ho12-search-float input#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='%23737373' stroke-width='3' vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    width: 280px !important;
    height: 66px !important;
    line-height: 66px !important;
    padding: 0 16px 0 35px !important;
    box-sizing: border-box !important;
    transition: background-image 0.25s ease !important;
}
.ho12-hd-search-expand input#ho12-search-input:focus,
.ho12-search-float input#ho12-search-input:focus {
    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;
}
.ho12-search-page input#ho12-sp-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='%23737373' stroke-width='3' vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    width: 360px !important;
    height: 85px !important;
    line-height: 85px !important;
    padding: 0 24px 0 45px !important;
    box-sizing: border-box !important;
    margin: 0 auto 20px auto !important;
    display: block !important;
    text-align: center !important;
    transition: background-image 0.25s ease !important;
}
.ho12-search-page input#ho12-sp-input:focus {
    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;
    outline: none !important;
    box-shadow: none !important;
}

/* ─── 작품 카드: 테두리 오버레이 방식 ─── */
#page .ho12-work-card {
    position: relative !important;
    background-color: transparent !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    aspect-ratio: 916 / 1143 !important;
    width: 272px !important;
    height: auto !important;
    margin: 0 auto !important;
    overflow: visible !important;
    transition: all 0.15s ease !important;
}
/* 테두리 오버레이 (바깥=흰색, 테두리=검정, 안쪽=투명) */
#page .ho12-work-card::after {
    display: none !important; /* Disable old PNG border overlay */
}
#page .ho12-card-border-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
#page .ho12-card-border-mask {
    fill: #ffffff !important;
}
#page .ho12-card-border-stroke {
    fill: none !important;
    stroke: #737373 !important;
    stroke-width: 3px !important;
    opacity: 1.0 !important;
    transition: stroke 0.2s ease, opacity 0.2s ease !important;
}
#page .ho12-work-card:hover .ho12-card-border-stroke {
    stroke: #111111 !important;
    opacity: 1.0 !important;
}
/* 카드 내부 콘텐츠가 오버레이 위에 보이도록 */
#page .ho12-work-card > *:not(.ho12-card-border-svg) {
    position: relative !important;
    z-index: 3 !important;
}
@media (max-width: 768px) {
    #page .ho12-work-card {
        width: 100% !important;
        max-width: 200px !important;
        height: auto !important;
    }
}
#page .ho12-work-card:hover * {
    color: #111111 !important;
}
#page .ho12-work-card.no-thumbnail .ho12-wc-thumb {
    display: none !important;
}
/* 썸네일 있을 때 - 이미지가 테두리 안에 꽉 참 */
#page .ho12-work-card.has-thumbnail {
    padding: 14px 12px !important;
}
#page .ho12-work-card.has-thumbnail .ho12-wc-thumb {
    display: block !important;
    width: 100% !important;
    height: 170px !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
    border: none !important;
    box-sizing: border-box !important;
    border-radius: 0px !important;
    position: relative !important;
    z-index: 1 !important;
}
@media (max-width: 768px) {
    #page .ho12-work-card.has-thumbnail .ho12-wc-thumb {
        height: 100px !important;
        margin-bottom: 6px !important;
    }
}
#page .ho12-work-card.has-thumbnail .ho12-wc-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.85 !important;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out !important;
}
#page .ho12-work-card.has-thumbnail:hover .ho12-wc-thumb img {
    opacity: 1.0 !important;
    transform: scale(1.04) !important;
}
#page .ho12-work-card.has-thumbnail .ho12-wc-text-block {
    margin-top: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex-grow: 1 !important;
    width: 100% !important;
}
#page .ho12-work-card.has-thumbnail .ho12-wc-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    line-height: 1.3 !important;
}
@media (max-width: 768px) {
    #page .ho12-work-card.has-thumbnail .ho12-wc-title {
        font-size: 12px !important;
    }
}

<?php 
// No-image card styling with SVG overlay
?>
#page .ho12-goods-card {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 272 / 340 !important;
    width: 272px !important;
    height: auto !important;
    align-self: flex-start !important; /* Prevent vertical stretching in flex/grid containers */
    margin: 0 auto !important;
    overflow: visible !important;
    transition: all 0.15s ease !important;
    border: none !important;
}
@media (max-width: 768px) {
    #page .ho12-goods-card { width: 100% !important; max-width: 200px !important; align-self: center !important; }
}
#page .ho12-goods-card img {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border: none !important;
    border-radius: 0px !important;
}
#page .ho12-goods-card:hover .ho12-card-border-stroke {
    stroke: #111111 !important;
    opacity: 1.0 !important;
}

#page .ho12-lib-item {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    aspect-ratio: 272 / 340 !important;
    width: 100% !important;
    max-width: 184px !important;
    height: auto !important;
    margin: 0 auto !important;
    overflow: visible !important;
    transition: all 0.15s ease !important;
    border: none !important;
}
@media (max-width: 768px) {
    #page .ho12-lib-item { width: 100% !important; max-width: 200px !important; }
}
#page .ho12-lib-item > *:not(.ho12-card-border-svg) {
    position: relative !important;
    z-index: 3 !important;
}

/* ─── 2026-07-19 mobile overflow and touch-target hardening ─── */
@media (max-width: 767px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* 감태 충전/내역/선물 */
    body #page .ho12-gamtae-buy-wrapper,
    body #page .ho12-gift-page-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px auto !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }
    .ho12-gamtae-buy-wrapper .ho12-gt-options-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .ho12-gt-tabs-icons {
        gap: 18px !important;
        margin-bottom: 20px !important;
    }
    .ho12-gt-icon-btn,
    .ho12-gt-icon-btn img {
        width: 64px !important;
        height: 64px !important;
    }
    .ho12-gt-row {
        height: auto !important;
        min-height: 56px !important;
        gap: 6px !important;
    }
    .ho12-gt-row-left {
        min-width: 0 !important;
        gap: 6px !important;
        padding: 4px !important;
    }
    .ho12-gt-row-left span {
        font-size: 20px !important;
    }
    .ho12-gt-line-wrap {
        min-width: 12px !important;
        margin: 0 4px !important;
    }
    .ho12-gt-row-right {
        width: 118px !important;
        flex: 0 0 118px !important;
    }
    .ho12-gt-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }
    .ho12-gt-pm-row {
        min-height: 44px !important;
        gap: 12px !important;
    }
    #ho12-gt-step2-container label {
        align-items: flex-start !important;
        gap: 12px !important;
        line-height: 1.5 !important;
    }
    #ho12-gt-step2-container input[type="checkbox"],
    #ho12-gt-step2-container input[type="radio"] {
        flex: 0 0 18px !important;
        margin-top: 2px !important;
    }
    #ho12-gt-panel-history > div {
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-inline: contain !important;
    }
    #ho12-gt-panel-history table {
        width: 720px !important;
        min-width: 720px !important;
    }
    #ho12-gt-panel-history th,
    #ho12-gt-panel-history td {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .ho12-gift-amount-grid {
        gap: 14px !important;
        justify-content: center !important;
    }
    #ho12-gift-claim-gif {
        width: calc(100vw - 32px) !important;
        max-width: 380px !important;
        height: auto !important;
    }
    .ho12-gift-success-card {
        width: calc(100vw - 32px) !important;
        max-width: 340px !important;
        padding: 32px 18px !important;
        max-height: calc(100dvh - 32px) !important;
        overflow-y: auto !important;
    }
    .ho12-gift-success-card [style*="white-space:nowrap"],
    .ho12-gift-success-card [style*="white-space: nowrap"] {
        white-space: normal !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    /* 주문서: 고정 들여쓰기와 좁은 입력 폭 제거 */
    body.woocommerce-checkout .ho12-checkout-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px auto !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }
    body.woocommerce-checkout .ho12-checkout-wrapper h2 {
        font-size: 23px !important;
        margin-bottom: 22px !important;
    }
    body.woocommerce-checkout .ho12-checkout-content,
    body.woocommerce-checkout .ho12-checkout-content > div {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    body.woocommerce-checkout .ho12-checkout-shipping-card {
        padding: 16px !important;
    }
    body.woocommerce-checkout #ho12-custom-recipient,
    body.woocommerce-checkout #ho12-custom-phone,
    body.woocommerce-checkout #ho12-custom-postcode,
    body.woocommerce-checkout #ho12-custom-address,
    body.woocommerce-checkout #ho12-custom-detail,
    body.woocommerce-checkout #ho12-custom-memo {
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    body.woocommerce-checkout #ho12-custom-postcode {
        width: 82px !important;
        flex: 0 0 82px !important;
    }
    body.woocommerce-checkout #ho12-custom-address,
    body.woocommerce-checkout #ho12-custom-detail {
        width: 100% !important;
    }
    body.woocommerce-checkout .ho12-checkout-address-row {
        margin-left: 0 !important;
        padding-left: 100px !important;
        box-sizing: border-box !important;
    }
    .ho12-checkout-cart-item {
        gap: 10px !important;
    }
    .ho12-checkout-summary-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px !important;
    }
    #ho12-toggle-checkout-items {
        gap: 10px !important;
    }
    #ho12-toggle-checkout-items > span:first-child {
        line-height: 1.45 !important;
    }

    /* 소설 회차 구매 안내: 화면 밖으로 나가지 않게 제한 */
    body #page .ho12-bulk-tooltip {
        min-width: 0 !important;
        width: calc(100vw - 32px) !important;
        max-width: 235px !important;
        white-space: normal !important;
        line-height: 1.45 !important;
    }
    #ho12-pdf17-bulk-confirm .ho12-pdf17-bulk-card {
        width: calc(100vw - 32px) !important;
        max-width: 460px !important;
        max-height: calc(100dvh - 32px) !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }
    #ho12-pdf17-bulk-confirm {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    /* 푸터의 긴 사업자 정보/이메일 줄바꿈 */
    .ho12-footer,
    .ho12-ft-copy-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
        word-break: keep-all !important;
    }
}

@media (max-width: 420px) {
    body.woocommerce-checkout .ho12-checkout-wrapper {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    body.woocommerce-checkout .ho12-checkout-shipping-card {
        padding: 13px !important;
    }
    body.woocommerce-checkout .ho12-checkout-wrapper label[style*="width: 90px"] {
        width: 76px !important;
        flex-basis: 76px !important;
    }
    body.woocommerce-checkout .ho12-checkout-address-row {
        padding-left: 86px !important;
    }
    body.woocommerce-checkout #ho12-custom-search-btn {
        padding-left: 7px !important;
        padding-right: 7px !important;
        white-space: nowrap !important;
    }
    .ho12-gt-row-right {
        width: 106px !important;
        flex-basis: 106px !important;
    }
}
.ho12-lib-item:hover,
.ho12-lib-item.ho12-hover-effect:hover,
#page .ho12-lib-item:hover,
#page .ho12-lib-item.ho12-hover-effect:hover {
    transform: none !important;
}
#page .ho12-lib-item:hover .ho12-card-border-stroke {
    stroke: #111111 !important;
    opacity: 1.0 !important;
}
#page .ho12-lib-item img,
#page .ho12-lib-item .ho12-lib-thumb {
    border: none !important;
    border-radius: 0px !important;
}

/* ─── B&W 카드 테두리 및 마우스 호버 역전 효과 ─── */
.ho12-work-card,
.ho12-compact-card,
#page .ho12-lib-item,
.ho12-lib-item {
    border: none !important;
    background: transparent !important;
    border-radius: 0px !important;
    box-shadow: none !important;
}
.ho12-pd-related-card,
.ho12-mp-qcard {
    border: 1px solid #111111 !important;
    background: transparent !important;
    border-radius: 0px !important;
    transition: all 0.15s ease-in-out !important;
}
body .ho12-pd-related-card:hover,
body .ho12-mp-qcard:hover {
    background: #111111 !important;
    color: #ffffff !important;
}
body .ho12-work-card:hover,
body .ho12-pd-related-card:hover,
body .ho12-compact-card:hover,
body .ho12-mp-qcard:hover {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
}
body .ho12-work-card:hover *,
body .ho12-pd-related-card:hover *,
body .ho12-compact-card:hover *,
body .ho12-mp-qcard:hover * {
    color: #ffffff !important;
}
body .ho12-work-card:hover .ho12-wc-title,
body .ho12-work-card:hover .ho12-wc-author,
body .ho12-work-card:hover .ho12-wc-excerpt,
body .ho12-work-card:hover .ho12-wc-genre-tag,
body .ho12-work-card:hover .ho12-wc-ep-count {
    color: #ffffff !important;
}
body .ho12-work-card:hover .ho12-wc-genre-tag {
    background: transparent !important;
    border-color: #ffffff !important;
    border-radius: 0px !important;
}

/* 작품 카드 전체 마우스 호버 효과 전면 삭제 (어떤 상태든 초고강도 Specificity로 영구 정적 유지) */
html body #page a.ho12-work-card:hover,
html body #page .ho12-work-card:hover,
html body #page .ho12-work-card.ho12-novel-card:hover,
body .ho12-work-card:hover {
    transform: none !important;
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    color: #111111 !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transition: none !important;
}
html body #page a.ho12-work-card:hover *,
html body #page .ho12-work-card:hover *,
body .ho12-work-card:hover * {
    color: #111111 !important;
    transform: none !important;
    transition: none !important;
}

/* ─── 🚀 로그인 필요 안내 박스 및 로그인하기 버튼 B&W 완벽 시인성 개선 ─── */
body .ho12-notice-wrap,
body .ho12-notice {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1.5px solid #111111 !important;
    border-radius: 0px !important;
    padding: 30px !important;
    text-align: center !important;
    margin: 20px 0 !important;
    box-shadow: none !important;
}
body .ho12-notice-wrap a,
body .ho12-notice a {
    background: #111111 !important;
    color: #ffffff !important;
    border: 1.5px solid #111111 !important;
    border-radius: 0px !important;
    padding: 10px 24px !important;
    display: inline-block !important;
    margin-top: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out !important;
}
body .ho12-notice-wrap a:hover,
body .ho12-notice a:hover {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #111111 !important;
}

/* 기획서 Page 3: 흐린 색상이었다가 OnMouseOver시 진한 색상 애니메이션 */
.ho12-wc-thumb img,
.ho12-pd-related-card img {
    opacity: 0.65 !important;
    transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out !important;
}
.ho12-work-card:hover .ho12-wc-thumb img,
.ho12-pd-related-card:hover img {
    opacity: 1.0 !important;
    transform: scale(1.05) !important;
}

/* 검색 아이콘 크기 전체 확대 조정 (기획서 시인성 보장) */
.ho12-hd-search-icon,
.ho12-search-icon {
    font-size: 40px !important;
    cursor: pointer;
    opacity: 0.5 !important;
    transition: 0.15s ease-in-out !important;
    padding: 2px !important;
    color: #111111 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ho12-hd-search-icon:hover,
.ho12-search-icon:hover {
    opacity: 0.8 !important;
}
.ho12-hd-search-img {
    width: 70px !important;
    height: 70px !important;
    object-fit: contain !important;
    transition: transform 0.15s ease-in-out !important;
}
.ho12-hd-search-icon:hover .ho12-hd-search-img {
    transform: scale(1.1) !important;
}
.ho12-hd-standing-img,
.ho12-hd-standing-svg {
    width: 24px !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.15s ease-in-out !important;
    opacity: 1.0 !important;
}
.ho12-hd-user-icon:hover .ho12-hd-standing-img,
.ho12-hd-user-icon:hover .ho12-hd-standing-svg {
    transform: scale(1.05) !important;
    opacity: 1.0 !important;
}
.ho12-hd-lying-img,
.ho12-hd-lying-svg {
    width: 78px !important;
    height: 36px !important;
    object-fit: contain !important;
    transition: transform 0.15s ease-in-out !important;
    opacity: 1.0 !important;
}
.ho12-hd-user-icon:hover .ho12-hd-lying-img,
.ho12-hd-user-icon:hover .ho12-hd-lying-svg {
    transform: scale(1.05) !important;
    opacity: 1.0 !important;
}
.ho12-hd-user-icon {
    opacity: 1.0 !important;
}

/* ─── GP 완전 오버라이드 및 B&W 테마 변수 ─── */
:root {
    --h-dark: #ffffff !important;
    --h-txt: #111111 !important;
    --ho12-hd-h: 185px;
}
html {
    overflow-y: scroll !important;
    scroll-behavior: smooth;
    background-color: #ffffff !important;
}
/* 사이트 전체 한글 폰트 적용 (워드프레스 어드민 영역 제외) */
html:not(.wp-admin),
body:not(.wp-admin),
body:not(.wp-admin) p,
body:not(.wp-admin) h1,
body:not(.wp-admin) h2,
body:not(.wp-admin) h3,
body:not(.wp-admin) h4,
body:not(.wp-admin) h5,
body:not(.wp-admin) h6,
body:not(.wp-admin) input:not(#wpadminbar *),
body:not(.wp-admin) button:not(#wpadminbar *),
body:not(.wp-admin) textarea,
body:not(.wp-admin) select {
    font-family: 'KoPubWorld Dotum', 'KoPubWorldDotum', sans-serif !important;
}

/* span, div, a 태그는 어드민바나 대시콘(아이콘 폰트)이 아닐 때만 적용 */
body:not(.wp-admin) span:not(.dashicons):not(.ab-icon):not(#wpadminbar *),
body:not(.wp-admin) div:not(#wpadminbar):not(#wpadminbar *),
body:not(.wp-admin) a:not(#wpadminbar *) {
    font-family: 'KoPubWorld Dotum', 'KoPubWorldDotum', sans-serif !important;
}

/* PDF 17 p.5: 회차번호는 나눔손글씨 장미체를 유지한다. */
body:not(.wp-admin) #page .ho12-planets .ho12-planet span.ho12-planet-num {
    font-family: 'NanumJangmi', 'Rose', sans-serif !important;
}

/* 워드프레스 관리자 바 및 대시콘 아이콘 강제 보존 */
#wpadminbar, #wpadminbar * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}
#wpadminbar .ab-icon,
#wpadminbar .ab-icon::before,
#wpadminbar .dashicons,
#wpadminbar .dashicons::before,
.dashicons,
.dashicons-before::before,
.dashicons::before {
    font-family: dashicons !important;
}

html, body {
    background: #ffffff !important;
    color: #111111;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
body {
    padding-top: 0 !important;
}
.site-header, .main-navigation, .site-footer, .sidebar, .navigation-branding {
    display: none !important;
}
.site {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: #ffffff !important;
}
.site-content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
}
.content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
.grid-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.inside-article {
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.entry-content {
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.page .entry-header, .page .entry-meta {
    display: none !important;
}
#primary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}
article {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
}

/* ─── 헤더 — B&W 기획안 디자인 ─── */
.ho12-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #ffffff !important;
    border-bottom: none !important;
    z-index: 9999;
}
.ho12-header.scrolled {
    background: #ffffff !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
}
/* 콘텐츠 간격 */
body:not(.page-template-ho12-intro) .site-content,
body:not(.page-template-ho12-intro) #ho12-page-wrap {
    padding-top: var(--ho12-hd-h) !important;
    max-width: 1100px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}
body.page-template-ho12-intro .site-content {
    padding-top: 0 !important;
}
.ho12-hd-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    padding: 55px 0 14px 0;
}

/* 좌: 검색 */
.ho12-hd-left {
    display: flex;
    align-items: center;
}
.ho12-hd-search {
    display: flex;
    align-items: center;
    position: relative;
}
.ho12-hd-search-icon {
    font-size: 20px;
    cursor: pointer;
    opacity: 0.5 !important;
    transition: 0.15s ease-in-out !important;
    padding: 6px;
    color: #111111 !important;
}
.ho12-hd-search-icon:hover {
    opacity: 0.8 !important;
}
.ho12-hd-search-expand {
    max-width: 0;
    overflow: hidden;
    margin-left: 0;
    visibility: hidden;
    transition: max-width 0.15s ease-in-out, margin-left 0.15s ease-in-out, padding 0.15s ease-in-out, visibility 0.15s ease-in-out !important;
}
.ho12-hd-search:hover .ho12-hd-search-expand,
.ho12-hd-search:focus-within .ho12-hd-search-expand {
    max-width: 350px;
    padding-left: 0px;
    margin-left: 10px !important;
    visibility: visible;
}
.ho12-hd-search-expand input {
    width: 230px;
    padding: 8px 14px;
    border-radius: 0px !important;
    border: 1px solid #111111 !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 13px;
    outline: none;
}
.ho12-hd-search-expand input:focus {
    border-color: #111111 !important;
}
.ho12-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 320px;
    max-height: 380px;
    overflow-y: auto;
    background: #ffffff !important;
    border-radius: 0px !important;
    border: 1px solid #111111 !important;
    display: none;
    z-index: 100;
}
.ho12-search-results.active {
    display: block;
}

/* 중: 로고 */
.ho12-hd-center {
    text-align: center;
}
.ho12-logo {
    text-decoration: none;
    display: inline-block;
    transition: 0.15s ease-in-out !important;
}
.ho12-logo:hover {
    transform: scale(1.02);
}
.ho12-logo-img {
    height: 186px !important;
    width: auto !important;
    max-height: 186px !important;
    object-fit: contain !important;
}
.ho12-logo-text {
    font-size: 34px;
    font-weight: 800;
    color: #111111 !important;
    letter-spacing: 1px;
    line-height: 1.2;
    font-family: var(--h-font-eng);
}
.ho12-logo-text span {
    display: block;
    font-size: 38px;
    letter-spacing: 3px;
}

@media (min-width: 769px) {
    .ho12-logo {
        transform: translateX(45px) !important;
    }
    .ho12-logo:hover {
        transform: translateX(45px) scale(1.02) !important;
    }
}

/* 우: 로그인 아이콘 + 방사형 트리메뉴 */
.ho12-hd-right {
    display: flex;
    align-items: center;
}
.ho12-hd-user {
    position: relative;
    z-index: 10000;
}
.ho12-hd-user-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
}
.ho12-hd-user-icon {
    color: #111111 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease-in-out !important;
    z-index: 2;
}
.ho12-hd-user-icon:hover {
    transform: scale(1.05);
}

.ho12-hd-user-tree {
    position: absolute;
    width: 90px;
    height: 90px;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

/* 개별 트리 버블 말풍선 */
.ho12-tree-bubble {
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ffffff !important;
    border: 1.5px solid #111111 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease-in-out !important;
    text-decoration: none !important;
    cursor: pointer;
    opacity: 0;
}

/* 17-1 내 정보 (왼쪽 말풍선) */
.ho12-bubble-blue {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-6deg) scale(0.3);
    color: #111111 !important;
}
.ho12-hd-user-wrapper:hover .ho12-bubble-blue,
.ho12-hd-user-wrapper.active .ho12-bubble-blue {
    left: -46px;
    top: -34px;
    transform: rotate(-6deg) scale(1);
    opacity: 0.35;
    pointer-events: auto;
}
.ho12-bubble-blue:hover {
    color: #ffffff !important;
    background: #111111 !important;
    transform: rotate(-3deg) scale(1.1);
    opacity: 1 !important;
}

/* 17-2 감태 구매 (위쪽 말풍선) */
.ho12-bubble-green {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(5deg) scale(0.3);
    color: #111111 !important;
}
.ho12-hd-user-wrapper:hover .ho12-bubble-green,
.ho12-hd-user-wrapper.active .ho12-bubble-green {
    left: 50%;
    top: -52px;
    transform: translate(-50%, 0) rotate(5deg) scale(1);
    opacity: 0.35;
    pointer-events: auto;
}
.ho12-bubble-green:hover {
    color: #ffffff !important;
    background: #111111 !important;
    transform: translate(-50%, 0) rotate(2deg) scale(1.1);
    opacity: 1 !important;
}

/* 17-3 로그아웃 (오른쪽 말풍선) */
.ho12-bubble-yellow {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(8deg) scale(0.3);
    color: #111111 !important;
}
.ho12-hd-user-wrapper:hover .ho12-bubble-yellow,
.ho12-hd-user-wrapper.active .ho12-bubble-yellow {
    left: auto;
    right: -46px;
    top: -34px;
    transform: rotate(8deg) scale(1);
    opacity: 0.35;
    pointer-events: auto;
}
.ho12-bubble-yellow:hover {
    color: #ffffff !important;
    background: #111111 !important;
    transform: rotate(4deg) scale(1.1);
    opacity: 1 !important;
}

/* Selected vs Unselected states */
.ho12-tree-bubble.active-page {
    opacity: 1 !important;
    border-color: #111111 !important;
    filter: none !important;
}
.ho12-tree-bubble.inactive-page {
    opacity: 0.35 !important;
}
.ho12-tree-bubble.inactive-page:hover {
    opacity: 1 !important;
}
.ho12-tree-bubble.has-custom-icon.active-page img {
    opacity: 1 !important;
}
.ho12-tree-bubble.has-custom-icon.inactive-page img {
    filter: grayscale(100%) opacity(40%) !important;
    opacity: 1.0 !important;
    transition: filter 0.15s ease-in-out !important;
}
.ho12-tree-bubble.has-custom-icon.inactive-page:hover img {
    filter: none !important;
    opacity: 1.0 !important;
}

/* Custom image opacity transition instead of switching images */
.ho12-tree-bubble img.default-img {
    filter: grayscale(100%) contrast(38%) brightness(145%) !important;
    opacity: 1.0 !important;
    transition: filter 0.15s ease-in-out !important;
}
.ho12-tree-bubble:hover img.default-img,
.ho12-tree-bubble.active-page img.default-img {
    filter: none !important;
    opacity: 1.0 !important;
}
.ho12-tree-bubble.has-custom-icon,
.ho12-tree-bubble.has-custom-icon:hover,
.ho12-bubble-blue.has-custom-icon:hover,
.ho12-bubble-green.has-custom-icon:hover,
.ho12-bubble-yellow.has-custom-icon:hover {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
}
.ho12-tree-bubble.has-custom-icon .ho12-tree-icon {
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ho12-tree-bubble.has-custom-icon img {
    width: auto !important;
    height: 52px !important;
    max-width: 100px !important;
    object-fit: contain !important;
    border-radius: 0px !important;
    filter: none !important;
    transition: transform 0.15s ease-in-out !important;
}
.ho12-tree-bubble.has-custom-icon:hover img {
    transform: scale(1.08) !important;
}

/* 말풍선 아이콘 스타일 */
.ho12-tree-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease-in-out !important;
}
.ho12-tree-icon svg {
    width: 100%;
    height: 100%;
}
.ho12-tree-bubble:hover .ho12-tree-icon {
    transform: scale(1.05);
}
.ho12-tree-label {
    display: none !important;
}

/* ─── 행성 메뉴바 (PDF p3-4) ─── */
.ho12-planet-nav {
    display: flex;
    justify-content: space-between;
    gap: 0;
    padding: 16px 0;
    max-width: 1000px;
    margin: 0 auto;
}
.ho12-pnav-item {
    text-decoration: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 1.0 !important;
    transition: all 0.15s ease-in-out !important;
    cursor: pointer;
}
.ho12-pnav-item img {
    filter: grayscale(100%) opacity(40%) !important;
    transition: filter 0.15s ease-in-out !important;
}
.ho12-pnav-item:hover img, .ho12-pnav-item.current img {
    filter: none !important;
}
.ho12-pnav-svg {
    stroke: #737373 !important;
    transition: stroke 0.15s ease-in-out !important;
}
.ho12-pnav-item:hover .ho12-pnav-svg, .ho12-pnav-item.current .ho12-pnav-svg {
    stroke: currentColor !important;
}
.ho12-pnav-item:not(.current):not(:hover) .ho12-pnav-label {
    color: #737373 !important;
}
.ho12-pnav-item:hover, .ho12-pnav-item.current {
    opacity: 1.0 !important;
    transform: none !important;
}
.ho12-pnav-planet {
    position: relative !important;
}
.ho12-pnav-item .ho12-planet-static {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1 !important;
    transition: opacity 0.15s ease-in-out !important;
    transform: scale(1.0111111111) !important;
    transform-origin: center center !important;
}
.ho12-pnav-item .ho12-planet-gif {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0 !important;
    transition: opacity 0.15s ease-in-out !important;
    transform: scale(1) !important;
    transform-origin: center center !important;
}
.ho12-pnav-item:hover .ho12-planet-static,
.ho12-pnav-item.current .ho12-planet-static {
    opacity: 0 !important;
}
.ho12-pnav-item:hover .ho12-planet-gif,
.ho12-pnav-item.current .ho12-planet-gif {
    opacity: 1 !important;
}
.ho12-pnav-item:hover .ho12-pnav-label, .ho12-pnav-item.current .ho12-pnav-label {
    color: #111111 !important;
    font-weight: 800;
}
.ho12-pnav-planet {
    width: 90px !important;
    height: 90px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease-in-out !important;
    border: none !important;
    background: transparent !important;
    color: #111111 !important;
    opacity: 1 !important;
}
.ho12-pnav-planet img {
    transition: filter 0.15s ease-in-out !important;
    transform-origin: center center;
}
.ho12-pnav-item:hover .ho12-pnav-planet, .ho12-pnav-item.current .ho12-pnav-planet {
    background: transparent !important;
    color: #111111 !important;
    opacity: 1.0 !important;
}
.ho12-pnav-item:hover .ho12-pnav-planet img, .ho12-pnav-item.current .ho12-pnav-planet img {
    filter: none !important;
}
.ho12-pnav-svg {
    width: 38px !important;
    height: 38px !important;
    stroke: currentColor;
    fill: none;
    opacity: 1;
}
.ho12-pnav-label {
    display: none !important;
}

/* ═══ 모바일 헤더 메뉴 조정 (768px 이하) — 상단 헤더 메뉴 유지 ═══ */
@media(max-width:768px) {
    .ho12-header .ho12-planet-nav {
        display: flex !important;
        justify-content: space-around !important;
        gap: 8px !important;
        padding: 8px 10px 12px 10px !important;
        max-width: 100% !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        background: #ffffff !important;
    }
    .ho12-pnav-item {
        gap: 2px !important;
        min-width: 48px !important;
    }
    .ho12-pnav-planet {
        width: 34px !important;
        height: 34px !important;
        border-width: 1.2px !important;
    }
    .ho12-pnav-svg {
        width: 16px !important;
        height: 16px !important;
    }
    .ho12-pnav-label {
        font-size: 8px !important;
    }
}
.ho12-bottom-bar {
    display: none !important;
}

.ho12-hero-logo-img {
    max-height: 90px;
    max-width: 320px;
    width: auto;
    object-fit: contain;
    margin-bottom: 8px;
    transition: 0.3s;
}
.ho12-hero-logo-img:hover {
    transform: scale(1.02);
}

/* ─── 푸터 CSS ─── */
.ho12-footer {
    background: #ffffff !important;
    border-top: none !important;
    padding: 24px 0;
    color: #111111;
    font-size: 13px;
    width: 100% !important;
    position: relative;
    overflow: hidden;
}
.ho12-footer::before {
    display: none !important;
}
.ho12-ft-copy-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.ho12-ft-copy-inner span {
    color: #111111;
    font-size: 12px;
}

@media(max-width:768px) {
    .ho12-hd-top {
        padding: 24px 16px 12px 16px !important;
    }
    .ho12-hd-left {
        width: 64px !important;
        flex: 0 0 64px !important;
        max-width: 64px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    .ho12-hd-right {
        width: 76px !important;
        flex: 0 0 76px !important;
        max-width: 76px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    .ho12-hd-center {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .ho12-logo-img {
        height: 104px !important;
        max-height: 104px !important;
        width: auto !important;
    }
    .ho12-logo-text {
        font-size: 20px !important;
    }
    .ho12-logo-text span {
        font-size: 24px !important;
    }
    
    .ho12-hd-search-icon {
        font-size: 26px !important;
        padding: 10px !important;
        opacity: 0.5 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .ho12-hd-search-icon:hover {
        opacity: 0.8 !important;
    }
    .ho12-hd-search-icon img,
    .ho12-hd-search-img {
        width: 44px !important;
        height: 44px !important;
        object-fit: contain !important;
    }
    
    /* 모바일 검색창 확장 영역 - 로고나 다른 버튼을 밀지 않도록 absolute 배치 */
    .ho12-hd-search-expand {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: 54px !important;
        transform: translateY(-50%) !important;
        width: 200px !important;
        max-width: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: max-width 0.15s ease-in-out, opacity 0.15s ease-in-out, visibility 0.15s ease-in-out !important;
        z-index: 999999 !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
    }
    
    /* 모바일 검색창 확장 활성화 시 가로폭 확장 (로고가 가려지거나 밀리지 않음) */
    .ho12-hd-search.active .ho12-hd-search-expand,
    .ho12-hd-search:hover .ho12-hd-search-expand,
    .ho12-hd-search:focus-within .ho12-hd-search-expand {
        max-width: 200px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* 모바일 검색창 입력 필드 스타일 */
    .ho12-hd-search-expand input {
        width: 100% !important;
        height: 40px !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        border-radius: 0px !important;
        border: 1px solid #111111 !important;
        background: #ffffff !important;
        color: #111111 !important;
        outline: none !important;
        box-sizing: border-box !important;
    }
    .ho12-hd-search-expand input:focus {
        border-color: #111111 !important;
    }
    
    .ho12-hd-search-expand input#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='%23737373' stroke-width='3' vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        width: 100% !important;
        height: 48px !important;
        line-height: 48px !important;
        padding: 0 12px 0 24px !important;
        box-sizing: border-box !important;
        transition: background-image 0.25s ease !important;
    }
    .ho12-hd-search-expand input#ho12-search-input:focus {
        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;
    }
    
    /* 모바일 검색 자동완성 드롭다운을 검색창에 상대적으로 맞춤 */
    .ho12-search-results {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 300px !important;
        background: #ffffff !important;
        border-radius: 0px !important;
        border: 1px solid #111111 !important;
        z-index: 100000 !important;
        box-shadow: none !important;
    }
    
    .ho12-hd-user-wrapper {
        width: 76px !important;
        height: 76px !important;
    }
    .ho12-hd-user-tree {
        width: 76px !important;
        height: 76px !important;
    }
    .ho12-hd-standing-img, .ho12-hd-standing-svg {
        width: 24px !important;
        height: auto !important;
        object-fit: contain !important;
    }
    .ho12-hd-lying-img, .ho12-hd-lying-svg {
        width: 54px !important;
        height: 25px !important;
        object-fit: contain !important;
    }
    
    .ho12-tree-bubble {
        width: 46px !important;
        height: 46px !important;
    }
    .ho12-hd-user-wrapper:hover .ho12-bubble-blue,
    .ho12-hd-user-wrapper.active .ho12-bubble-blue {
        left: -60px !important;
        top: 25px !important;
    }
    .ho12-hd-user-wrapper:hover .ho12-bubble-green,
    .ho12-hd-user-wrapper.active .ho12-bubble-green {
        left: 50% !important;
        top: -52px !important;
    }
    .ho12-hd-user-wrapper:hover .ho12-bubble-yellow,
    .ho12-hd-user-wrapper.active .ho12-bubble-yellow {
        right: -60px !important;
        top: 25px !important;
    }
    .ho12-hd-user-menu {
        right: -20px !important;
    }
}

/* ═══ 전역 우주배경 투명도 및 레이아웃 ═══ */
body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    margin: 0 !important;
    overflow: visible !important;
}
#page {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    min-height: 100vh !important;
    overflow: visible !important;
}
#content, .site-content {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}
#primary, .content-area {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}
#main, .site-main {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}
.ho12-footer, .ho12-cosmic-footer {
    margin-top: auto !important;
    width: 100% !important;
}
html, body, .site, .site-content, #page, #primary, #main, .content-area, .inside-article, .entry-content, article {
    background: #ffffff !important;
    color: #111111;
}
#ho12-space-canvas {
    display: none !important;
}
.ho12-filter-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ho12-hd-user-wrapper::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -60px;
    right: -60px;
    bottom: -30px;
    background: transparent;
    pointer-events: none;
    z-index: 1;
}
.ho12-hd-user-wrapper:hover::before,
.ho12-hd-user-wrapper.active::before {
    pointer-events: auto;
}

/* ─── 에피소드 행성 번호 색상 (관리자 설정 비활성화) ─── */
/*
<?php
$ep_free_color = get_option('ho12_ep_color_free', '#2d8a4e');
$ep_locked_color = get_option('ho12_ep_color_locked', '#d4a017');
?>
#page .ho12-planet.free .ho12-planet-num,
#page .ho12-planet.owned .ho12-planet-num,
#page .ho12-planet.free .ho12-planet-text,
#page .ho12-planet.owned .ho12-planet-text,
#page .ho12-planet.free .ho12-planet-inner,
#page .ho12-planet.owned .ho12-planet-inner,
#page .ho12-planet.free .ho12-planet-info-under,
#page .ho12-planet.owned .ho12-planet-info-under {
    color: <?php echo esc_attr($ep_free_color); ?> !important;
}
#page .ho12-planet.locked .ho12-planet-num,
#page .ho12-planet.locked .ho12-planet-text,
#page .ho12-planet.locked .ho12-planet-inner,
#page .ho12-planet.locked .ho12-planet-info-under {
    color: <?php echo esc_attr($ep_locked_color); ?> !important;
}
*/

/* 감태 아이콘이 그리드/카드 내에서 거대해지는 현상 방지 */
body img.ho12-gamtae-icon-img,
body .ho12-gamtae-price img,
body .ho12-gamtae-price img.ho12-gamtae-icon-img,
.woocommerce img.ho12-gamtae-icon-img,
.products img.ho12-gamtae-icon-img,
.ho12-goods-card img.ho12-gamtae-icon-img,
.ho12-goods-grid img.ho12-gamtae-icon-img,
ul.products li.product img.ho12-gamtae-icon-img,
.ho12-pd-related-card img.ho12-gamtae-icon-img,
.ho12-pd-related-img img.ho12-gamtae-icon-img {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    display: inline-block !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* 감태 충전 금액 버튼의 호버 효과 완전 제거 */
.ho12-gamtae-buy-wrapper .ho12-charge-btn.ho12-gt-row-btn:hover,
.ho12-gamtae-buy-wrapper .ho12-gt-select-btn.ho12-gt-row-btn:hover {
    transform: none !important;
    filter: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
.ho12-gamtae-buy-wrapper .ho12-charge-btn.ho12-gt-row-btn:hover *,
.ho12-gamtae-buy-wrapper .ho12-gt-select-btn.ho12-gt-row-btn:hover * {
    color: #111111 !important;
    text-shadow: none !important;
}
.ho12-gamtae-buy-wrapper .ho12-charge-btn.ho12-gt-row-btn:hover .ho12-gt-price-text,
.ho12-gamtae-buy-wrapper .ho12-gt-select-btn.ho12-gt-row-btn:hover .ho12-gt-price-text {
    color: #111111 !important;
    text-shadow: none !important;
}

/* 전 사이트 모든 요소 테마 포함 가로폭 1000px 강제 제한 및 양끝 정렬 */
.grid-container,
.site-header,
.site-content,
.site-content .inside-article,
.site-footer,
.ho12-header,
#ho12-header,
.ho12-footer,
#ho12-footer,
#page,
.site,
.container,
.ho12-mypage-container,
.ho12-library,
.ho12-contact,
.ho12-contact-container,
.ho12-charge-container,
.ho12-gamtae-buy-wrapper,
.ho12-about,
.ho12-viewer-container,
.ho12-single-work,
.ho12-work-container,
.ho12-goods-grid,
.ho12-comics-grid,
.ho12-novels-grid,
.ho12-intro-container,
.ho12-main-container,
.ho12-main-works-grid,
.ho12-works-grid,
.ho12-lib-grid,
.ho12-charge-grid,
.ho12-goods-container,
.ho12-search-page,
.ho12-search-container,
.woocommerce-container,
.ho12-hd-top,
.ho12-planet-nav,
.ho12-ft-top,
.ho12-ft-bottom {
    max-width: 1000px !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}
@media (max-width: 768px) {
    .ho12-gamtae-buy-wrapper,
    .ho12-about,
    .ho12-viewer-container,
    .ho12-single-work,
    .ho12-work-container,
    .ho12-goods-grid,
    .ho12-comics-grid,
    .ho12-novels-grid,
    .ho12-intro-container,
    .ho12-main-container,
    .ho12-main-works-grid,
    .ho12-works-grid,
    .ho12-lib-grid,
    .ho12-charge-grid,
    .ho12-goods-container,
    .ho12-search-page,
    .ho12-search-container,
    .woocommerce-container,
    .ho12-ft-top,
    .ho12-ft-bottom {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* 메뉴 및 주요 컴포넌트 양끝 채우기 세부 조정 */
.ho12-planet-nav {
    display: flex !important;
    justify-content: space-between !important;
    gap: 0 !important;
}

/* 개별 상품 그리드 및 내 서재 그리드 가로폭 및 양끝 채우기 최적화 */
.woocommerce,
.woocommerce-page,
.ho12-goods-grid,
.ho12-lib-grid,
.ho12-works-grid,
.ho12-main-works-grid,
.ho12-comics-grid,
.ho12-novels-grid {
    max-width: 1000px !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 769px) {
    .ho12-hd-top {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
        justify-content: stretch !important;
        max-width: 1000px !important;
        width: 100% !important;
    }
    .ho12-hd-left {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    .ho12-hd-center {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .ho12-hd-right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .ho12-goods-grid,
    .ho12-works-grid,
    .ho12-main-works-grid,
    .ho12-comics-grid,
    .ho12-novels-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 272px) !important;
        gap: 92px !important;
        justify-content: space-between !important;
        max-width: 1000px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #page .ho12-work-card,
    #page .ho12-goods-card {
        width: 272px !important;
        margin: 0 !important;
    }
}

/* ─── WooCommerce 상점페이지 & 연관상품 가격/이름 완전 제거 ─── */
.woocommerce-loop-product__title,
.woocommerce-Price-amount,
.price,
.woocommerce-Price-currencySymbol,
.ho12-goods-card h4,
.ho12-goods-card .ho12-gamtae-price,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price,
.related.products .woocommerce-loop-product__title,
.related.products .price,
.related.products h2,
.related.products .button,
.upsells.products .woocommerce-loop-product__title,
.upsells.products .price {
    display: none !important;
}

/* ─── WooCommerce 연관상품 글자와 위 구분선 완전 삭제 ─── */
.related.products {
    border-top: none !important;
    padding-top: 0 !important;
    margin-bottom: 80px !important;
    clear: both !important;
}
.related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 20px !important;
}
        /* WooCommerce Flatsome 테마에서 products(ul)에 .row 클래스가 붙어있으면 
           ::before, ::after 가 그리드 아이템으로 인식되어 1칸씩 차지하는 버그 수정 */
        .related.products ul.products::before,
        .related.products ul.products::after {
            display: none !important;
        }

        .related.products ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    clear: none !important;
}
.related.products h2 {
    display: none !important;
}

/* ─── 모든 점선을 회색 실선(solid)으로 변경 ─── */
hr,
.woocommerce-checkout hr,
.woocommerce-cart hr,
.ho12-order-card div {
    border-style: solid !important;
    border-color: #e6e6e6 !important;
    border-width: 1px 0 0 0 !important;
}
.ho12-order-card div {
    border-width: 0 0 1px 0 !important;
}
.ho12-order-card {
    border: 1.5px solid #e6e6e6 !important; /* 회색 실선 */
}

/* 모든 카드 형태(작품 카드, 굿즈 카드, 연관 상품 카드, 내 서재 카드) 호버 상태 정합: 호버 전에 회색(opacity 0.35 & grayscale 100%), 호버/활성 시 검정/본래색(opacity 1.0 & grayscale 0%) */
#page .ho12-work-card,
.ho12-work-card,
#page .ho12-goods-card,
.ho12-goods-card,
#page .ho12-pd-related-card,
.ho12-pd-related-card,
#page .ho12-coming-soon-card,
.ho12-coming-soon-card,
#page .ho12-compact-card,
.ho12-compact-card,
#page .ho12-lib-item,
.ho12-lib-item,
#page .ho12-planet.locked img,
.ho12-planet.locked img {
    filter: grayscale(100%) contrast(38%) brightness(145%) !important;
    transition: filter 0.25s ease-in-out !important;
}
#page .ho12-planet.locked:hover img,
.ho12-planet.locked:hover img {
    filter: none !important;
}

#page .ho12-planet.free,
.ho12-planet.free,
#page .ho12-planet.owned,
.ho12-planet.owned {
    opacity: 1.0 !important;
    filter: grayscale(0%) !important;
    transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out, transform 0.25s ease-in-out !important;
}

#page .ho12-work-card:hover,
#page .ho12-work-card.active,
#page .ho12-work-card.current,
.ho12-work-card:hover,
.ho12-work-card.active,
.ho12-work-card.current,
#page .ho12-goods-card:hover,
#page .ho12-goods-card.active,
#page .ho12-goods-card.current,
.ho12-goods-card:hover,
.ho12-goods-card.active,
.ho12-goods-card.current,
#page .ho12-pd-related-card:hover,
#page .ho12-pd-related-card.active,
#page .ho12-pd-related-card.current,
.ho12-pd-related-card:hover,
.ho12-pd-related-card.active,
.ho12-pd-related-card.current,
#page .ho12-coming-soon-card:hover,
#page .ho12-coming-soon-card.active,
.ho12-coming-soon-card:hover,
.ho12-coming-soon-card.active,
#page .ho12-compact-card:hover,
#page .ho12-compact-card.active,
.ho12-compact-card:hover,
.ho12-compact-card.active,
#page .ho12-lib-item:hover,
#page .ho12-lib-item.active,
#page .ho12-lib-item.current,
.ho12-lib-item:hover,
.ho12-lib-item.active,
.ho12-lib-item.current,
#page .ho12-planet:hover,
#page .ho12-planet.active,
#page .ho12-planet.current,
.ho12-planet:hover,
.ho12-planet.active,
.ho12-planet.current {
    opacity: 1.0 !important;
    filter: grayscale(0%) !important;
}

/* 내 서재 필터 탭 호버/활성 상태 정합: 활성화되지 않은 탭은 회색, 활성/호버 시 검정 */
#page .ho12-filt,
.ho12-filt {
    opacity: 0.12 !important; /* Blends with white background to look exactly like brand #e6e6e6 */
    filter: grayscale(100%) !important;
    transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out !important;
}
#page .ho12-filt.active,
#page .ho12-filt:hover,
.ho12-filt.active,
.ho12-filt:hover {
    opacity: 1.0 !important;
    filter: grayscale(0%) !important;
}

/* 헤더 검색 자동완성 내 그리드를 1열 목록형(소설/만화 카드 느낌)으로 리포맷 */
.ho12-search-results .ho12-works-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    grid-template-columns: none !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}
.ho12-search-results .ho12-work-card,
.ho12-search-results .ho12-goods-card {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    filter: none !important;
    border: 1px solid #111111 !important;
    background: #ffffff !important;
    border-radius: 0px !important;
    text-decoration: none !important;
}
.ho12-search-results .ho12-wc-thumb,
.ho12-search-results .ho12-goods-card img {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    object-fit: cover !important;
    border: 1px solid #111111 !important;
    border-radius: 0px !important;
}
.ho12-search-results .ho12-wc-text-block {
    text-align: left !important;
    margin: 0 !important;
    width: auto !important;
    flex-grow: 1 !important;
    padding: 0 !important;
    background: transparent !important;
}
.ho12-search-results .ho12-wc-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    font-family: inherit !important;
}
.ho12-search-results h3 {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin: 10px 10px 4px 10px !important;
    letter-spacing: 1px !important;
}

/* 🚀 Aspect Ratio Fallback for Older Browsers & KakaoTalk WebViews (Card Stretching Fix) */
#page .ho12-goods-card {
    position: relative !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
}
#page .ho12-goods-card::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    padding-bottom: 125% !important; /* 272:340 aspect ratio */
}
#page .ho12-goods-card .ho12-card-border-svg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}
#page .ho12-goods-card img {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    width: calc(100% - 32px) !important;
    height: calc(100% - 32px) !important;
    object-fit: contain !important;
    z-index: 3 !important;
}