/* 🌐 공통 변수 */
 :root {
     --nav-height: 55px;
     --tab-hover-bg: rgba(255, 255, 255, 0.2);
     --tab-active-bg: #fff;
     --tab-active-color: var(--cnvs-themecolor);
}
/* 헤더 배경 이미지 레이어 */
 .hero-img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('images/videos/background_image.svg') no-repeat bottom right;
     background-size: auto 100%;
     z-index: -1;
     pointer-events: none;
}
/* 📌 네비게이션 */
 #page-menu {
     width: 100% !important;
     background-color: #1abc9c !important;
     color: #fff !important;
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
     height: 60px !important;
}
 .nav-container {
     width: 100%;
     max-width: 1320px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 20px;
}
 .nav-left {
     font-size: 1.2rem;
     font-weight: bold;
}
 .nav-right ul {
     display: flex;
     list-style: none;
     margin: 0;
     padding: 0;
     gap: 10px;
}
 .nav-right li a {
     display: inline-block;
     padding: 6px 12px;
     font-size: 0.95rem;
     color: #fff;
     text-decoration: none;
     border-radius: 4px;
     transition: all 0.3s;
}
 .nav-right li a:hover {
     background-color: var(--tab-hover-bg);
}
 .nav-right li a.active {
     background-color: var(--tab-active-bg);
     color: var(--cnvs-link-color);
     font-weight: bold;
}
 @media (max-width: 800px) {
     .nav-container {
         flex-direction: column;
         align-items: flex-start;
    }
     .nav-right ul {
         flex-wrap: wrap;
         gap: 8px;
    }
}
/* 계산기 로딩중 */
 #loadingOverlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.0);
     z-index: 9999;
     display: flex;
     justify-content: center;
     align-items: center;
     color: var(--cnvs-contrast-800);
     font-size: 1.5rem;
     font-weight: bold;
     pointer-events: none;
}
/* 📦 계산기 카드 */
 .calc-wrapper {
     display: flex;
     justify-content: center;
     margin-top: 30px;
}
 .calc-card {
     width: 100%;
     max-width: 1320px;
     border: 1px solid #ddd;
     border-radius: 4px;
     padding: 1rem;
     background: linear-gradient(135deg, #f5f4f4, #ffffff);
}
/* 🧩 폼 */
 .form-row {
     display: flex;
     justify-content: center;
     gap: 16px;
     margin: 30px auto 1rem;
     max-width: 1320px;
}
 .form-group {
     flex: 0 0 300px;
     max-width: 300px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
}
 .form-group label {
     font-size: 1.1rem;
     font-weight: bold;
     margin-bottom: 4px;
}
 .form-group select, .form-group input {
     width: 100%;
     height: 2.8rem;
     font-size: 1rem;
     padding-left: 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
}
 .form-group select:focus, .form-group input:focus {
     border: 2px solid #0d6efd;
     outline: none;
}
/* 🎛️ 버튼 구역 */
 .button-row {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin: 20px 0;
}
 .button-row button {
     width: 330px;
     height: 2.8rem;
     font-size: 1.1rem;
     background: linear-gradient(135deg, #0d6efd, #0d6efd);
     color: #fff;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     transition: background-color 0.3s;
     text-align: center;
}
 .button-row button:hover {
     background: #0b5ed7;
}
 .btn-secondary:hover {
     background: #5a6268;
}
/* 💬 모달 (공통) */
#customModal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid #007bff;
  border-radius: 8px;
  padding: 20px;
  z-index: 9999;
  width: 300px;
  max-width: 90%;
  height: auto;
  max-height: 700px;
  box-sizing: border-box;
  text-align: center;
  overflow-y: auto;
}
#customModalDesign, #customModalTrademark {
     display: none;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: #fff;
     border: 1px solid #ccc;
     border-radius: 8px;
     padding: 10px 10px;
     z-index: 9999;
     border: 2px solid #007bff;
     text-align: center;
     width: 300px;
     height: 70px;
     box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
 #customModalTrademark {
     height: 70px !important;
     background-color: white;
     color: black;
     padding: 12px 20px;
     font-size: 16px;
     border-radius: 4px;
     text-align: center;
     line-height: 30px;
}
 #customModal p, #customModalDesign p, #customModalTrademark p {
     min-height: 0;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 0;
}
/* 📄 참고사항 박스 */
 .transparent-box {
     border: none;
     border-radius: 6px;
     padding: 10px;
     margin-top: 10px;
     background: #ffffff;
}
 .transparent-box p {
     margin-bottom: 0 !important;
     line-height: 1.5 !important;
}
 #reductionInfo, #reductionInfoDesign, #reductionInfoTrademark, #reductionInfoBox, #reductionInfoAppeal{
     border: 2px solid #0d6efd;
     border-radius: 6px;
     padding: 10px;
     background: #ffffff;
     margin-top: 30px;
}
 .reduction-info {
     display: block;
}
 .hidden {
     display: none !important;
}
/* 📊 결과 박스 */
 .result-wrapper {
     display: none;
     margin-top: 15px;
}
 .result-flex {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     width: 100%;
     box-sizing: border-box;
}
/* 📂 탭 네비게이션 */
 .page-menu-container {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: center;
     padding: 0;
     margin: 0;
     list-style: none;
}
 .page-menu-item {
     flex: 1 1 30%;
     min-width: 200px;
}
 .page-menu-item a {
     display: block;
     text-align: center;
     background: #fff;
     border: 1px solid #ddd;
     padding: 12px;
     font-size: 1rem;
     color: #333;
     text-decoration: none;
     transition: background 0.3s, color 0.3s, border-radius 0.3s;
}
 .page-menu-item a:hover, .page-menu-item a.active {
     background: #0d6efd;
     color: #fff;
     border-color: #0d6efd;
     border-radius: 4px;
}
 @media (max-width: 800px) {
     .page-menu-item {
         flex: 1 1 calc(33.333% - 10px);
    }
     .page-menu-item:nth-child(7) {
         flex: 1 1 100%;
    }
}
/* 📑 리스트 점 제거 */
 #patentResultBox ul, #designResultWrapper ul, #tmResultWrapper ul, #annuityResultBox ul, #registrationResultBox ul, #appealResultWrapper ul {
     list-style: none;
     padding-left: 0;
     margin-left: 0;
}
/* 버튼 및 결과 박스 스타일 */
 .form-group .form-control {
     height: 44px;
     font-size: 1rem;
     padding-left: 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
}
 .btn-group {
     display: flex;
     gap: 0.5rem;
}
 .btn-calc {
     background: #007bff;
     color: #fff;
     padding: 0 1.5rem;
     height: 44px;
     border: none;
     cursor: pointer;
     border-radius: 4px;
}
 .btn-secondary {
     background: #6c757d;
     color: #fff;
     padding: 0 1.5rem;
     height: 44px;
     border: none;
     cursor: pointer;
}
 .result-box {
     flex: 0 1 auto;
     margin-top: 1rem;
     padding: 10px;
     background: #f9f9f9;
     border: 2px solid #007bff;
     border-radius: 4px;
}
/* 버튼 그룹 (계산하기, 초기화, 감면대상자 보기) 통일 스타일 */
 .btn-group {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 1rem;
     width: 100%;
     margin-top: 1rem;
     margin-bottom: 20px;
}
 .btn-group button {
     flex: 1 1 calc(33.33% - 1rem);
     min-width: 200px;
     max-width: 300px;
     height: 44px;
     font-size: 1rem;
     text-align: center;
     padding: 0;
     border: none;
     cursor: pointer;
     border-radius: 4px;
     background: linear-gradient(135deg, #0d6efd, #0d6efd);
     color: #fff;
     transition: background-color 0.3s;
}
 .btn-group button:hover {
     background: #0b5ed7;
}
/* CanvasTemplate 스타일 차단용 캡슐 */
 .custom-isolation * {
     all: unset;
     all: revert-layer;
     box-sizing: border-box;
}
 .custom-isolation .form-row-5 {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     gap: 12px;
     max-width: 1320px;
     margin: 30px auto 20px;
}
 .custom-isolation .form-group {
     flex: 1 1 calc(20% - 12px);
     min-width: 160px;
     max-width: 240px;
}
 .custom-isolation .form-group label {
     font-size: 1rem;
     font-weight: bold;
     margin-bottom: 4px;
}
 .custom-isolation .form-group select, .custom-isolation .form-group input {
     width: 100%;
     height: 2.8rem;
     font-size: 1rem;
     padding-left: 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
}
 .custom-isolation .form-group select:focus, .custom-isolation .form-group input:focus {
     border: 2px solid #0d6efd;
     outline: none;
}
/* 버튼 스타일 */
 .custom-isolation .btn-group {
     display: flex;
     justify-content: center;
     gap: 1rem;
     width: 100%;
     margin-top: 1rem;
}
 .custom-isolation .btn-group button {
     flex: 1 1 calc(33.33% - 1rem);
     min-width: 200px;
     max-width: 300px;
     height: 44px;
     font-size: 1rem;
     text-align: center;
     padding: 0;
     border: none;
     cursor: pointer;
     border-radius: 4px;
     background: #007bff;
     color: #fff;
     transition: background-color 0.3s;
}
 .custom-isolation .btn-group button:hover {
     background: #0b5ed7;
}
/* 년차등록료 계산기 폼 5개 한 줄 배치용 */
 .form-row-5 {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 1rem;
     margin: 30px auto 1rem;
     max-width: 1320px;
}
 .form-row-5 .form-group {
     flex: 1 1 160px;
     min-width: 160px;
     max-width: 200px;
}
/* 심판청구료 계산기 - 폼 4개 한 줄 정렬 */
 #appealCalcForm .form-row {
     display: flex !important;
     flex-wrap: nowrap !important;
     justify-content: space-between !important;
     max-width: 1320px !important;
     margin: 30px auto 20px !important;
     gap: 12px !important;
     padding: 0 10px !important;
     box-sizing: border-box !important;
}
 #appealCalcForm .form-group {
     flex: 0 0 240px !important;
     max-width: 240px !important;
     min-width: 220px !important;
     box-sizing: border-box !important;
}
 #appealCalcForm .form-group label {
     font-size: 1rem !important;
     font-weight: bold !important;
     margin-bottom: 4px !important;
}
 #appealCalcForm .form-group select, #appealCalcForm .form-group input {
     width: 100% !important;
     height: 2.8rem !important;
     font-size: 1rem !important;
     padding-left: 10px !important;
     border: 1px solid #ccc !important;
     border-radius: 4px !important;
}
 #appealCalcForm .form-group select:focus, #appealCalcForm .form-group input:focus {
     border: 2px solid #0d6efd !important;
     outline: none !important;
     box-shadow: 0 0 4px rgba(0, 123, 255, 0.4) !important;
}
/* 선택된 폼 요소 강조 */
 #appealCalcForm .form-control.selected {
     border: 2px solid #007bff !important;
     box-shadow: 0 0 4px rgba(0, 123, 255, 0.4) !important;
     outline: none !important;
}
/* 버튼 그룹 */
 #appealCalcForm .btn-group {
     display: flex;
     justify-content: center;
     gap: 1rem;
     width: 100%;
     margin-top: 1rem;
}
 #appealCalcForm .btn-group button {
     flex: 1 1 calc(33.33% - 1rem);
     min-width: 200px;
     max-width: 300px;
     height: 44px;
     font-size: 1rem;
     text-align: center;
     padding: 0;
     border: none;
     cursor: pointer;
     border-radius: 4px;
     background: #007bff;
     color: #fff;
     transition: background-color 0.3s;
}
 #appealCalcForm .btn-group button:hover {
     background: #0b5ed7;
}
/* 결과 전체 박스 (파란 외곽선) */
 .result-box-container {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     padding: 1rem;
     background: #f8f9fa;
     border: 2px solid #0d6efd;
     border-radius: 6px;
     box-sizing: border-box;
     margin-top: 10px;
}
/* 내부 3개의 박스 */
 .result-left, .result-center, .result-right, .result-left-trademark, .result-box {
     flex: 1 1 30%;
     border: 2px solid #ccc;
     background: #fff;
     padding: 10px;
     border-radius: 6px;
     box-sizing: border-box;
     margin: 0;
}
/* 내부 텍스트 */
 .result-left p, .result-center p, .result-right p, .result-left-trademark p, .result-box p, .result-left pre, .result-center pre, .result-right pre, .result-left-trademark pre, .result-box pre{
     line-height: 1.1;
     margin: 0 0 6px 0;
}
 #reductionInfoDesign {
    margin-bottom:10px;
}
 #resultDesign {
    margin-top:10px;
}
 .selected {
    border:2px solid #007bff!important;
}
 .form-row-5 {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1rem;
    margin:30px auto 1rem;
    max-width:1320px;
}
 .form-row-5 .form-group {
    flex:1 1 210px;
     min-width:210px;
     max-width:236px;
}
 .custom-modal > .modal-content {
    position:relative;
    background:#fff;
    padding:20px;
    border-radius:8px;
    width:400px;
    max-width:90%;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
 .custom-modal {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
}
 .custom-modal .form-group {
    margin-bottom:10px;
}
 .custom-modal .form-group input, .custom-modal .form-group textarea {
    width:100%;
    padding:10px;
    box-sizing:border-box;
}
 .custom-modal .form-group label {
    display:block;
    margin-bottom:4px;
    font-size:0.95rem;
    font-weight:bold;
}
 .custom-modal .form-control {
    width:100%;
    padding:8px;
    border:1px solid #ccc;
    border-radius:4px;
    box-sizing:border-box;
}
 .custom-modal .btn-group {
    display:flex;
    justify-content:space-between;
    width:100%;
    margin-top:15px;
}
 .custom-modal .btn-group button {
    flex:1;
    padding:12px 0;
    margin:0;
}
 .custom-modal .btn-calc {
    background:#007bff;
    color:#fff;
    border:none;
    border-radius:4px;
    cursor:pointer;
}
 .custom-modal .btn-calc.btn-secondary {
    background:#6c757d;
}
 .custom-modal .modal-content {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:#fff;
    border-radius:8px;
    width:100%;
    max-width:500px;
    text-align:center;
    box-sizing:border-box;
    padding:0;
}
 .custom-modal .modal-content form {
    width:100%;
    padding:20px;
    box-sizing:border-box;
}
 .custom-modal .modal-content .form-group {
    margin-bottom:15px;
}
 .custom-modal .modal-content .form-group input, .custom-modal .modal-content .form-group textarea {
    width:100%;
    padding:8px;
    box-sizing:border-box;
}
 #reductionInfo {
    display:none;
}
 #reductionInfo.show {
    display:block;
}
 .exempt-section {
    display:none;
}
 .exempt-section.visible {
    display:block;
}
 .menu-link {
    font-size:16px!important;
    letter-spacing:0.3px;
}
 @media (max-width:800px) {
     .nav-left{
        display:none!important;
    }
     #page-menu{
        flex-direction:column!important;
        height:160px!important;
    }
     .nav-right ul{
        display:grid!important;
        grid-template-columns:repeat(3,1fr)!important;
        gap:8px!important;
        width:100%!important;
        padding:0!important;
        margin:0!important;
    }
     .nav-right ul li:nth-child(7){
        grid-column:2/3!important;
    }
     .nav-right li a{
        display:block!important;
        text-align:center!important;
    }
}
 .subscribe-card {
    max-width:800px;
    margin:2rem auto;
    padding:2rem;
    background:#fff;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,0.05);
}
 .subscribe-card-header h2 {
    margin-bottom:0.25rem;
}
 .subscribe-card-header p {
    margin-bottom:1.5rem;
    color:#666;
}
 .subscribe-card .input-group-text {
    background:#0d6efd;
    color:#fff;
    border:none;
    border-top-left-radius:8px;
    border-bottom-left-radius:8px;
}
 .subscribe-card .form-control {
    border:none;
    border-bottom:2px solid #e0e0e0;
    border-top-right-radius:8px;
    border-bottom-right-radius:8px;
    box-shadow:none;
    transition:border-color .3s;
}
 .subscribe-card .form-control:focus {
    outline:none;
    border-color:#0d6efd;
}
 .btn-gradient {
    background:linear-gradient(135deg,#0d6efd,#0d6efd);
    border:none;
    color:#fff;
    font-weight:500;
    padding:.75rem 1rem;
    border-radius:8px;
    transition:opacity .3s;
}
 .btn-gradient:hover {
    opacity:.9;
}
 .widget-subscribe-form-result {
    min-height:1.5rem;
    color:#0d6efd;
    font-weight:500;
}
 .custom-modal {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    align-items:center;
    justify-content:center;
    z-index:1000;
}
 .custom-modal.show {
    display:flex;
}
 .custom-modal .modal-content {
    background:#fff;
    padding:20px;
    width:90%;
    max-width:480px;
    box-sizing:border-box;
}
 .custom-modal .modal-content h5 {
    margin:0 0 16px;
    font-size:1.25rem;
    font-weight:600;
}
 .custom-modal .modal-content input[type="text"],.custom-modal .modal-content input[type="date"],.custom-modal .modal-content input[type="time"],.custom-modal .modal-content input[type="tel"],.custom-modal .modal-content input[type="email"],.custom-modal .modal-content select,.custom-modal .modal-content textarea {
    width:100%;
    padding:8px 10px;
    margin-bottom:12px;
    font-size:1rem;
    border:1px solid #ccc;
    box-sizing:border-box;
    border-radius:0;
    resize:vertical;
}
 .custom-modal .consult-result-container {
    margin-bottom:12px;
    color:#2a7de1;
}
 .custom-modal .modal-content .button-group {
    text-align:right;
}
 .custom-modal .modal-content button {
    padding:8px 16px;
    font-size:1rem;
    border:none;
    cursor:pointer;
    margin-left:8px;
    border-radius:0;
}
 .custom-modal .modal-content button:nth-of-type(1) {
    background:var(--cnvs-themecolor);
    color:#fff;
}
 .custom-modal .modal-content button:nth-of-type(2) {
    background:#e0e0e0;
    color:#333;
}
/* ─── 모바일(800px 이하) 최종 스타일 ─── */
 @media (max-width: 800px) {
    /* 전체 wrapper 여백 축소 */
     .calc-wrapper {
         margin: 10px 0 !important;
    }
    /* 카드(box) 여백 축소 */
     .calc-card {
         padding: 10px !important;
    }
    /* 카드 제목(h5) 여백 축소 */
     .calc-card > h5 {
         margin: 10px 0 !important;
    }
    /* 참고사항 박스 여백/패딩 축소 */
     .calc-card .transparent-box {
         margin: 10px 0 !important;
         padding: 10px !important;
    }
    /* 폼 행(form-row, form-row-5): 수직 적층 + 폭 100% + 간격 10px */
     @media (max-width: 800px) {
         #annuityCalcForm .form-row-5 {
             display: flex !important;
             flex-direction: column !important;
             align-items: stretch !important;
             width: 100% !important;
             margin: 10px 0 !important;
             gap: 10px !important;
        }
         #annuityCalcForm .form-group {
             width: 100% !important;
             max-width: 100% !important;
             margin: 0 !important;
             padding: 0 !important;
        }
         #annuityCalcForm .btn-group {
             display: flex !important;
             flex-direction: column !important;
             align-items: stretch !important;
             width: 100% !important;
             margin: 10px 0 !important;
             gap: 10px !important;
        }
         #annuityCalcForm .btn-group button {
             width: 100% !important;
             height: 2.4rem !important;
             font-size: 1rem !important;
             padding: 0 !important;
             border-radius: 4px !important;
        }
    }
    /* 폼 제목(label) 숨김 */
     .calc-card .form-group > label {
         display: none !important;
    }
    /* 입력 요소 (select, input, textarea, .form-control): 높이 2.2rem, 폭 100% */
     .calc-card .form-group select, .calc-card .form-group input, .calc-card .form-group textarea, .calc-card .form-group .form-control {
         width: 100% !important;
         margin: 0 !important;
         height: 2.2rem !important;
    }
    /* 버튼 영역 (button-row, btn-group): 수직 적층 + 폭 100% + 간격 10px */
     .calc-card .button-row, .calc-card .btn-group {
         display: flex !important;
         flex-direction: column !important;
         align-items: stretch !important;
         width: 100% !important;
         margin: 10px 0 !important;
         gap: 10px !important;
    }
    /* 버튼: 높이 2.4rem, 폭 100% */
     .calc-card .button-row button, .calc-card .btn-group button {
         width: 100% !important;
         margin: 0 !important;
         border-radius: 0 !important;
         height: 2.4rem !important;
         font-size: 1rem !important;
    }
}
 .notice-list {
  list-style: none;
  padding-left: 0; /* 좌측 여백 제거 */
  margin: 0;
}