/* ===========================================================
    MODAL COMMON
=========================================================== */
html.is-modal-open,
body.is-modal-open { overflow:hidden; overscroll-behavior:none; }
/* ===========================================================
    CERT MODAL
=========================================================== */
.cert-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:40px 20px; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.cert-modal.is-open { opacity:1; visibility:visible; }
.cert-modal-dim { position:absolute; inset:0; background:rgba(0,0,0,0.7); }
.cert-modal-inner { position:relative; z-index:1; display:flex; align-items:center; gap:20px; width:100%; max-width:1040px; }
.cert-modal-prev, .cert-modal-next { flex-shrink:0; width:56px; height:56px; border:none; border-radius:50%; background:#333333; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:opacity .3s; }
.cert-modal-prev img, .cert-modal-next img { display:block; filter:brightness(0) invert(1); }
.cert-modal-prev:disabled, .cert-modal-next:disabled { opacity:0.3; cursor:default; }
.cert-modal-box { position:relative; z-index:1; flex:1; min-width:0; max-height:calc(100vh - 80px); background:#fff; border-radius:12px; padding:30px; display:flex; flex-direction:column; align-items:center; gap:20px; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.cert-modal-close { position:absolute; top:16px; right:16px; width:36px; height:36px; border:none; background:transparent; font-size:4.8rem; line-height:1; color:#333; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.cert-modal-content { width:100%; max-height:calc(100vh - 200px); overflow:auto; display:flex; align-items:center; justify-content:center; }
.cert-modal-img { display:block; max-width:100%; max-height:calc(100vh - 220px); object-fit:contain; }
.cert-modal-title { font-size:2.3rem; font-weight:700; text-align:center; margin:0; }
/* ===========================================================
    PRODUCT MODAL
=========================================================== */
.product-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:40px 20px; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.product-modal.is-open { opacity:1; visibility:visible; }
.product-modal-dim { position:absolute; inset:0; background:rgba(0,0,0,0.55); }
.product-modal-box { position:relative; z-index:1; width:100%; max-width:980px; height: 900px; max-height: calc(100dvh - 80px); background:#fff;overflow:hidden; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
.product-modal-head { display:flex; align-items:center; justify-content:space-between; padding:24px 32px; border-bottom:1px solid #e5e5e5; flex-shrink:0; }
.product-modal-head h2 { font-size:2.2rem; font-weight:700; margin:0; }
.product-modal-close { width:44px; height:44px; border:none; background:transparent; font-size:44px; flex-shrink: 0; line-height:1; color:#333; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.product-modal-body { display:flex; flex-direction:column; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.product-modal-section { padding:0 32px; }
.product-modal-overview { display:flex; flex-direction: column; gap:32px; padding-top:28px; padding-bottom:15px; flex-shrink:0; }
.product-modal-thumb { width: 100%; height:360px; display:flex; align-items:center; justify-content:center; background:#ececec; border:1px solid #ddd; overflow: hidden; }
.product-modal-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.product-modal-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.product-modal-title { font-size:2.4rem; font-weight:700; line-height:1.4; margin-bottom:5px; }
.product-modal-desc { font-size:1.5rem; line-height:1.7; color:#666; margin-bottom:20px; }
.product-modal-features { flex:1; min-height:0; display:flex; flex-direction:column; }
.product-modal-features-label { display:block; font-size:1.5rem; font-weight:700; color:#f28a00; margin-bottom:12px; }
.product-modal-feature-list { flex:1; max-height:120px; overflow-y:auto; margin:0; padding-left:18px; list-style:disc; }
.product-modal-feature-list li { font-size:1.4rem; line-height:1.7; color:#444; margin-bottom:4px; }
.product-modal-actions { padding-bottom:26px; flex-shrink:0; }
.product-modal-btns { display:flex; flex-wrap:wrap; gap:10px; }
.product-modal-btns a, .product-modal-btns button { display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; border:0; border-radius:4px; font-size:1.4rem; font-weight:500; text-decoration:none; white-space:nowrap; cursor:pointer; font-family:inherit; }
.product-modal-btns .btn-primary { background:#f28a00; color:#fff; }
.product-modal-btns .btn-outline { border:1px solid #f28a00; color:#f28a00; background:#fff; }
.product-modal-btns .btn-dark { background:#333; color:#fff; }
.product-modal-detail-label { font-size:1.4rem; font-weight:600; color:#333; margin:0; padding: 20px 32px 0px; border-top: 1px solid #eee;}
.product-modal-detail { display:flex; flex-direction:column; padding-top:14px; padding-bottom:28px; }
.product-modal-detail-scroll { border:1px solid #e5e5e5; background:#fafafa; }
.product-modal-detail-img { display:block; width:100%; height:auto; }
.product-modal-detail-content { padding:24px; font-size:1.5rem; line-height:1.8; color:#333; }
.product-modal-detail-content img { max-width:100%; height:auto; }
.product-modal-detail-content table { max-width:100%; }
.product-modal-empty { margin:0; color:#999; }
.product-modal-detail-empty { min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:56px 24px; box-sizing:border-box; color:#c8c8c8; text-align:center; }
.product-modal-detail-empty-icon { display:block; font-size:5.6rem; line-height:1; color:#c8c8c8; }
.product-modal-detail-empty p { margin:0; font-size:1.6rem; line-height:1.5; color:#c8c8c8; }
/* ===========================================================
    PRODUCT FILE PREVIEW MODAL
=========================================================== */
.product-file-modal { position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:40px 20px; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.product-file-modal.is-open { opacity:1; visibility:visible; }
.product-file-modal-dim { position:absolute; inset:0; background:rgba(0,0,0,0.62); }
.product-file-modal-box { position:relative; z-index:1; width:100%; max-width:980px; max-height:calc(100vh - 80px); background:#fff; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
.product-file-modal-head { display:flex; align-items:center; justify-content:space-between; padding:22px 32px; border-bottom:1px solid #e5e5e5; flex-shrink:0; }
.product-file-modal-head h2 { font-size:2.2rem; font-weight:700; margin:0; }
.product-file-modal-close { width:36px; height:36px; border:none; background:transparent; font-size:4rem; line-height:1; color:#333; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.product-file-modal-body { flex:1; min-height:0; padding:28px 32px; overflow:auto; background:#f7f7f7; }
.product-file-preview { min-height:520px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #e5e5e5; }
.product-file-preview img { display:block; max-width:100%; height:auto; /*max-height:calc(100vh - 260px);*/ object-fit:contain; }
.product-file-preview iframe { display:block; width:100%; height:calc(100vh - 260px); min-height:520px; border:0; background:#fff; }
.product-file-preview-message { margin:0; padding:44px 24px; font-size:1.6rem; line-height:1.7; color:#555; text-align:center; word-break:keep-all; overflow-wrap:normal; }
/* ===========================================================
    BUSINESS MODAL
=========================================================== */
.business-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:40px 20px; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.business-modal.is-open { opacity:1; visibility:visible; }
.business-modal-dim { position:absolute; inset:0; background:rgba(0,0,0,0.65); }
.business-modal-box { position:relative; z-index:1; width:100%; max-width:1300px;  height: calc(100dvh - 80px); max-height: 900px; background:#fff; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.25);}
.business-modal-head { display:flex; align-items:center; justify-content:space-between; padding:22px 32px; border-bottom:1px solid #e5e5e5; flex-shrink:0; }
.business-modal-head h2 { font-size:2.2rem; font-weight:700; margin:0; }
.business-modal-close { width:44px; height:44px; border:none; background:transparent; font-size:44px; flex-shrink: 0; line-height:1; color:#333; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.business-modal-body { flex:1; min-height:0; overflow-y:auto; }
.business-modal-hero { position:relative; margin:28px 32px 0; border-radius:12px; overflow:hidden; min-height:200px; }
.business-modal-hero-bg { position:absolute; inset:0; }
.business-modal-hero-bg::after { content:""; position:absolute; inset:0;  background:linear-gradient(90deg, #011328 45%, #163a65 100%); }
.business-modal-hero-text { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; min-height:200px; padding:40px 40px 35px; color:#fff; }
.business-modal-hero-title { font-size:3.6rem; font-weight:700; line-height:1.35; margin-bottom: 6px; }
.business-modal-hero-sub { font-size:1.8rem; font-weight:400; line-height:1.6; margin:0; max-width:640px; }
.business-modal-intro { padding:36px 32px 8px; }
.business-modal-heading { font-size:2.8rem; font-weight:700; line-height:1.4; margin:0 0 20px; color:#111; }
.business-modal-desc { font-size:1.6rem; line-height:1.8; color:#555; margin:0; }
.business-modal-fields { padding:28px 32px 36px; display:flex; flex-direction:column; gap:40px; }
.business-field-section { display:flex; align-items:flex-start; gap:32px; }
.business-field-label { flex:0 0 300px; }
.business-field-tag { display:block; font-size:1.4rem; font-weight:600; color:#f28a00; margin-bottom:8px; }
.business-field-label h4 { font-size:2rem; font-weight:700; line-height:1.4; margin:0; color:#111; }
.business-field-grid { flex:1; display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; min-width:0; }
.business-field-card { border:1px solid #e8e8e8; border-radius:12px; overflow:hidden; background:#fff; }
.business-field-card-img { height:160px; overflow:hidden; background:#f3f3f3; }
.business-field-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.business-field-card-body { padding:20px 22px 24px; }
.business-field-card-body h5 { font-size:1.8rem; font-weight:700; margin:0 0 12px; color:#111; }
.business-field-card-body ul { margin:0; padding:0; list-style:none; }
.business-field-card-body li { position:relative; padding-left:12px; font-size:1.4rem; line-height:1.7; color:#666; }
.business-field-card-body li::before { content:""; position:absolute; left:0; top:0.65em; width:4px; height:4px; border-radius:50%; background:#bbb; }
.business-field-card-body li + li { margin-top:4px; }
.business-field-subsidiary { display:inline-block; margin-top:14px; padding:6px 12px; border-radius:4px; background:#f5f5f5; border:1px solid #e0e0e0; font-size:1.3rem; font-weight:500; line-height:1.4; color:#555; }
/* ===========================================================
    POLICY MODAL (개인정보처리방침 / 이용약관)
=========================================================== */
.policy-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:40px 20px; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.policy-modal.is-open { opacity:1; visibility:visible; }
.policy-modal-dim { position:absolute; inset:0; background:rgba(0,0,0,0.55); }
.policy-modal-box { position:relative; z-index:1; width:100%; max-width:760px; max-height:calc(100vh - 80px); background:#fff; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
.policy-modal-head { display:flex; align-items:center; justify-content:space-between; padding:24px 32px; border-bottom:1px solid #e5e5e5; flex-shrink:0; }
.policy-modal-head h2 { font-size:2.2rem; font-weight:700; margin:0; }
.policy-modal-close { width:36px; height:36px; border:none; background:transparent; font-size:4rem; line-height:1; color:#333; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.policy-modal-body { flex:1; min-height:0; overflow-y:auto; padding:28px 32px 36px; }
.policy-modal-body h3 { font-size:1.7rem; font-weight:700; color:#111; margin:28px 0 10px; }
.policy-modal-body h3:first-child { margin-top:0; }
.policy-modal-body p { font-size:1.5rem; line-height:1.8; color:#555; margin:0 0 12px; word-break:keep-all; overflow-wrap:normal; }
.policy-modal-body ul { margin:0 0 12px; padding-left:18px; list-style:disc; }
.policy-modal-body li { font-size:1.5rem; line-height:1.8; color:#555; margin-bottom:4px; }
.policy-modal-date { font-size:1.4rem; color:#999; margin-top:28px; }

/* 1366px */
@media (max-width: 1366px) {
    .product-modal, .business-modal { align-items: flex-end; justify-content: center; padding: 0;}
    .product-modal-box, .business-modal-box { width: 100%; max-width: none; height: calc(100dvh - 80px); max-height: calc(100dvh - 80px); margin: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2); transform: translateY(100%); transition: transform 0.35s ease;}
    .product-modal.is-open .product-modal-box, .business-modal.is-open .business-modal-box { transform: translateY(0);}
}

/* -----------------------------------------------------------
    1024px
----------------------------------------------------------- */
@media (max-width:1024px){
    /* Business Modal */
    .business-field-label h4{font-size:2.4rem;}
    .business-field-card-body h5{font-size:2.2rem;}
    .business-field-tag{font-size:1.6rem;}
    .business-field-card-img{max-height: 200px;height: 200px;}
    .business-modal-desc, .business-field-card-body li{font-size:1.8rem;}
    .business-modal-hero { margin:20px 20px 0; min-height:180px; }
    .business-modal-hero-text { min-height:180px; padding:32px 20px; }
    .business-modal-hero-title { font-size:2.6rem; }
    .business-modal-hero-sub { font-size:2rem; }
    .business-modal-intro { padding:28px 20px 8px; }
    .business-modal-heading { font-size:2.4rem; }
    .business-field-subsidiary{font-size:1.6rem;}
    .business-modal-fields { padding:20px 20px 28px; gap:40px; }
    .business-field-section { flex-direction:column; gap:16px; width:100%; align-items:stretch; }
    .business-field-label { flex:none; width:100%; }
    .business-field-grid { width: 100%; }

    /* Product Modal */
    .product-modal-title{font-size:1.9rem;}
    .product-modal-overview{ flex-direction: column;}
    .product-modal-features-label{font-size:2rem;}
    .product-modal-desc, .product-modal-feature-list li{font-size: 1.8rem;}
    .product-modal-detail-label{font-size:2rem;}
}
/* -----------------------------------------------------------
    780px
----------------------------------------------------------- */
@media (max-width:780px){
    .business-modal-head h2{font-size:2.3rem;}
    .cert-modal-inner, .product-file-modal-box, .policy-modal-box {
        max-width: calc(100% - 20px);
        max-height: calc(100vh - 150px);
        margin: 20px auto;}

    .cert-modal-prev, .cert-modal-next { display:none; }
    .product-file-modal { padding:18px 0; }
    .product-file-modal-head { padding:14px 18px; }
    .product-file-modal-head h2 { font-size:1.8rem; }
    .product-file-modal-body { padding:16px; }
    .product-file-preview { min-height:360px; }
    .product-file-preview iframe { height:calc(100vh - 210px); min-height:360px; }
    .product-modal-actions{padding-top: 0;}
    .product-modal-btns{display: grid; grid-template-columns: repeat(3, 1fr);}
    .product-modal-btns a, .product-modal-btns button{width:100%; padding: 5px 8px; font-size:1.4rem; flex: 1;}
    .product-modal-detail-label{font-size:1.6rem; padding: 20px 20px 0px;}
    .product-modal-features-label{font-size:1.5rem;}
    .product-modal-desc, .product-modal-feature-list li{font-size:1.6rem;}
    .business-field-grid{width: 100%; grid-template-columns:1fr;}

    .product-modal-box, .business-modal-box{height: calc(100dvh - 60px); max-height: calc(100dvh - 60px); border-radius: 16px 16px 0 0;}
    .product-modal-head,  .business-modal-head{padding: 16px 20px;}
    .product-modal-section {padding-left: 20px; padding-right: 20px;}
    .product-modal-overview {gap: 20px; border-bottom: none; padding-top: 20px; padding-bottom: 20px;}
    .product-modal-thumb{ height: 280px;}
    .product-thumb.is-fallback img { transform: scale(1.2);}
}


/* 420px */
@media (max-width:420px){
    .product-modal-thumb { height: 180px; }
}

/* -----------------------------------------------------------
    360px
----------------------------------------------------------- */
@media (max-width:360px){
    .business-modal-box, .product-modal-box {height: calc(100dvh - 30px); max-height: calc(100dvh - 30px); border-radius: 14px 14px 0 0;}
    .product-modal-head, .business-modal-head{padding: 14px 16px;}
    .product-modal-head h2{font-size:2rem;}
    .product-modal-section {padding-left: 16px; padding-right: 16px;}
    .product-modal-overview {flex-direction: column;  gap: 16px; padding-top: 16px;}
    .business-modal-hero {margin: 16px 16px 0;}
    .business-modal-intro {padding: 24px 16px 8px;}
    .business-modal-fields {padding: 20px 16px 28px;}
    .business-field-label h4{font-size:2rem;}

    .business-modal-heading{font-size:2rem;}
    .business-modal-hero-sub{font-size:1.6rem;}
    .business-modal-desc, .business-field-card-body li{font-size:1.6rem;}
    .business-field-card-body h5{font-size:1.8rem;}

    /* product modal */
    .product-modal-thumb{ flex: none; width: 100%; height: 180px;}
    .product-modal-detail-label {padding: 12px 16px;}
    .product-modal-detail-content {padding: 18px 16px;}
    .product-modal-desc, .product-modal-feature-list li{font-size:1.6rem;}
    .product-modal-btns a, .product-modal-btns button{font-size:1.4rem;width:100%;}

    .product-modal-btns{
        grid-template-columns: repeat(2, 1fr);
    }
}