@charset "utf-8";
/* 수상작 뷰어 모달 팝업 스타일 */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(4px);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      padding: 20px;
    }
    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .modal-overlay.modal-type3 {
      justify-content: space-between;
      padding: 0;
    }

    /* 모달 컨테이너 */
    .modal-container {
      position: relative;
      background-color: #ffffff;
      width: 100%;
      display: flex;
      max-width: 1100px;
      height: 770px;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      overflow: hidden;
      transform: translateY(20px) scale(0.98);
      transition: transform 0.3s ease;
    }
    .modal-overlay.active .modal-container {
      transform: translateY(0) scale(1);
    }
    .modal-left {
      display: flex;
      width: 56px;
      height: 100%;
      justify-content: center;
      align-items: center;
    }
    .modal-right {
      display: flex;
      width: 56px;
      height: 100%;
      justify-content: center;
      align-items: center;
    }

    /* 우측 상단 닫기 버튼 */
    .modal-close-btn {
      position: absolute;
      top: 0;
      right: 0;
      width: 56px;
      height: 56px;
      background: url('/dkfair/ko/assets/Images/pop_img/btn-close.png') no-repeat center center;
      color: transparent;
      cursor: pointer;
      z-index: 30;
      transition: transform 0.4s ease-out;
      font-size: 0;
    }
    .modal-close-btn:hover {
      transform: rotate(180deg);
    }

    /* 모달 본문 (2분할) */
    .modal-body {
      display: flex;
      width: 988px;
      padding: 56px 0;
      justify-content: center;
      align-items: flex-start;
      align-self: stretch;
      box-sizing: border-box; /* 패딩이 추가되어도 전체 높이가 튀어나가지 않도록 설정 */
      overflow: hidden;
    }

    .modal-body.modal-type3 {
      width: 100%;
      padding: 0;
    }

    /* ============================================================
       왼쪽: 인라인 줌/팬 이미지 뷰어 영역
    ============================================================ */
    .artwork-column {
      flex: 1;
      width: 50%;
      align-self: stretch; /* 부모가 flex-start여도 이 영역은 세로로 꽉 차게 강제 늘림 */
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      user-select: none;
    }

    .artwork-column.modal-type3 {
      width: 100%;
    }


    /* 상단 상시 노출 줌 툴바 */
    .zoom-toolbar {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 8px;
      z-index: 20;
      border-radius: 99px;
      background-color: rgba(0, 0, 0, 0.70);
      display: flex;
      padding: 4px 16px;
      justify-content: center;
      align-items: center;
      gap: 12px;
    }
    .zoom-toolbar.modal-type3 {
      bottom: 24px;
    }
    .zoom-btn {
      width: 32px;
      height: 32px;
      background: transparent;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .btn-zoom-in {
      background: url('/dkfair/ko/assets/Images/pop_img/btn-zoom-in.png') no-repeat center center;
    }
    .btn-zoom-in:hover:not(:disabled) {
      background: url('/dkfair/ko/assets/Images/pop_img/btn-zoom-in-hover.png') no-repeat center center;
    }
    .btn-zoom-in:disabled {
      background: url('/dkfair/ko/assets/Images/pop_img/btn-zoom-in-dis.png') no-repeat center center;
      cursor: not-allowed;
    }
    .btn-zoom-out {
      background: url('/dkfair/ko/assets/Images/pop_img/btn-zoom-out.png') no-repeat center center;
    }
    .btn-zoom-out:hover:not(:disabled) {
      background: url('/dkfair/ko/assets/Images/pop_img/btn-zoom-out-hover.png') no-repeat center center;
    }
    .btn-zoom-out:disabled {
      background: url('/dkfair/ko/assets/Images/pop_img/btn-zoom-out-dis.png') no-repeat center center;
      cursor: not-allowed;
    }
    .zoom-level {
      font-size: 12px;
      font-weight: 600;
      color: #94a3b8;
      min-width: 42px;
      text-align: center;
      display: none;
    }
    .zoom-reset-btn {
      font-size: 14px;
      margin-left: 2px;
      display: none;
    }

    /* 🔍 이미지 뷰포트 (돋보기 커서 & 드래그) */
    .artwork-viewport {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      position: relative;
    }
    .artwork-viewport.is-zoomed .artwork-image {
      cursor: grab !important; /* 인라인 스타일에 밀리지 않게 확실히 적용 */
    }
    .artwork-viewport.is-zoom-out .artwork-image {
      cursor: zoom-out !important; /* 축소 방향일 때 확실하게 마이너스 커서 적용 */
    }
    .artwork-viewport.grabbing .artwork-image {
      cursor: grabbing !important;
    }
    .artwork-viewport.grabbing .artwork-image {
      transition: none; /* 드래그 중에는 딜레이 없이 즉각 반응하도록 트랜지션 해제 */
    }
    .artwork-image {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      transform-origin: center center;
      transition: transform 0.15s ease-out;
      user-select: none; /* 텍스트 선택 방지 */
      -webkit-user-drag: none; /* 이미지 기본 드래그 방지 */
      cursor: zoom-in; /* 기본 상태: 돋보기 플러스 커서 */
    }

    /* ============================================================
       오른쪽: 설명 3단 컬럼 영역
    ============================================================ */
    .info-column {
      flex: 1;
      width: 50%;
      align-self: stretch;
      display: flex;
      flex-direction: column;
      background-color: #ffffff;
    }

    .info-column.modal-type2 {
      width: 100%;
    }

    .info-section {
      width: 100%;
    }

    .title-section {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      padding-right: 16px; /* 스크롤바 영역과의 여백 */
      box-sizing: border-box;
    }

    /* 텍스트 줌 컨트롤러 CSS 추가 */
    .text-zoom-toolbar {
      display: flex;
      gap: 12px;
    }
    .text-zoom-btn {
      width: 32px;
      height: 32px;
      border: none;
      cursor: pointer;
      display: inline-block;
      font-size: 0;
      color: transparent;
      background-color: transparent;
    }
    .text-zoom-btn:disabled {
      cursor: not-allowed;
    }

    /* 글자 확대 버튼 이미지 */
    .btn-text-zoom-in {
      background: url('/dkfair/ko/assets/Images/pop_img/btn-txt-zoom-in.png') no-repeat center center;
    }
    .btn-text-zoom-in:hover:not(:disabled) {
      background: url('/dkfair/ko/assets/Images/pop_img/btn-zoom-in-hover.png') no-repeat center center;
    }
    .btn-text-zoom-in:disabled {
      background: url('/dkfair/ko/assets/Images/pop_img/btn-zoom-in-dis.png') no-repeat center center;
    }

    /* 글자 축소 버튼 이미지 */
    .btn-text-zoom-out {
      background: url('/dkfair/ko/assets/Images/pop_img/btn-txt-zoom-out.png') no-repeat center center;
    }
    .btn-text-zoom-out:hover:not(:disabled) {
      background: url('/dkfair/ko/assets/Images/pop_img/btn-zoom-out-hover.png') no-repeat center center;
    }
    .btn-text-zoom-out:disabled {
      background: url('/dkfair/ko/assets/Images/pop_img/btn-zoom-out-dis.png') no-repeat center center;
    }

    /* 글자 초기화 버튼 이미지 */
    .btn-text-zoom-reset {
      background: url('/dkfair/ko/assets/Images/pop_img/btn-txt-zoom-reset.png') no-repeat center center;
    }
    .btn-text-zoom-reset:hover:not(:disabled) {
      background: url('/dkfair/ko/assets/Images/pop_img/btn-zoom-reset-hover.png') no-repeat center center;
    }
    .btn-text-zoom-reset:disabled {
      background: url('/dkfair/ko/assets/Images/pop_img/btn-zoom-reset-dis.png') no-repeat center center;
    }
    
    .bio-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .info-top {
      display: flex;
      width: 100%;
      box-sizing: border-box;
      height: 280px;
      padding: 32px 0 32px 32px;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      background-color: #2B6EB5;
    }

    /* 2타입 전용 상단 파랑 박스 높이 축소 */
    .info-column.modal-type2 .info-top {
      height: 200px; /* 180px ~ 200px 사이로 통화하면서 조절! */
    }

    .artwork-title {
      color: #FFF;
      font-family: Pretendard;
      font-size: 32px;
      font-weight: 700;
      line-height: 48px;
      padding-right: 32px;
      word-break: keep-all;
      overflow-wrap: anywhere;
      word-wrap: break-word;
    }

    .info-bottom {
      display: flex;
      width: 100%;
      flex: 1;
      overflow: hidden;
      flex-direction: column;
      align-items: flex-start;
      box-sizing: border-box;
      gap: 10px;
      padding: 24px 0 24px 32px;
      align-self: stretch;
      background-color: #F0F0F0;
    }

    .section-label {
      color: #0C1420;
      font-family: Pretendard;
      font-size: 20px;
      font-style: normal;
      font-weight: 600;
      line-height: 32px;
      display: flex;
      align-items: center;
      gap: 4px;
      padding-right: 16px;
    }

    .icon-desc {
      display: inline-block;
      width: 24px;
      height: 24px;
      background: url('/dkfair/ko/assets/Images/pop_img/icon-desc.png') no-repeat center center;
      background-size: contain;
    }

    .artwork-desc-section {
      display: flex;
      flex: 1;
      flex-direction: column;
      overflow: hidden;
      width: 100%;
    }

    .artist-name {
      color: #FFF;
      font-family: Pretendard;
      font-size: 18px;
      font-weight: 600;
      line-height: 36px;
      padding-right: 32px;
      word-break: keep-all;
      overflow-wrap: anywhere;
      word-wrap: break-word;
    }
    .artist-bio {
      color: #A8D2FF;
      font-family: Pretendard;
      font-size: 20px;
      font-weight: 500;
      line-height: 32px;
      margin: 0; /* p 태그 기본 마진 제거 */
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      white-space: pre-line;
      word-break: keep-all;
      overflow-wrap: anywhere;
      word-wrap: break-word;
      padding-right: 40px; /* 기존 컨테이너 패딩 보상 및 스크롤바 여백 */
    }
    .artwork-desc {
      margin: 0;
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      white-space: pre-line;
      padding-right: 24px; /* 기존 컨테이너 패딩 보상 및 스크롤바 여백 */
      color: #0C1420;
      font-family: Pretendard;
      font-size: 18px;
      font-weight: 400;
      line-height: 36px; /* 200% */
      word-break: keep-all;
      overflow-wrap: anywhere;
      word-wrap: break-word;
      transition: font-size 0.2s, line-height 0.2s; /* 글자 크기 변경 시 부드러운 애니메이션 */
    }
    /* 스크롤바 커스텀 (공통) */
    .artist-bio::-webkit-scrollbar,
    .artwork-desc::-webkit-scrollbar {
      width: 10px;
    }
    .artist-bio::-webkit-scrollbar-track,
    .artwork-desc::-webkit-scrollbar-track {
      background: transparent;
    }
    .artist-bio::-webkit-scrollbar-thumb,
    .artwork-desc::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.30);
      border-radius: 4px;
    }

    /* ============================================================
       하단: 이전/다음 네비게이션
    ============================================================ */
    .nav-btn {
      display: inline-flex;
      width: 56px;
      height: 56px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-prev {
      background: url('/dkfair/ko/assets/Images/pop_img/popup-btn-prev.png') no-repeat center center;
    }
    .btn-prev:hover:not(:disabled) {
      background: url('/dkfair/ko/assets/Images/pop_img/popup-btn-prev-hover.png') no-repeat center center;
    }
    .btn-prev:disabled {
      background: url('/dkfair/ko/assets/Images/pop_img/popup-btn-prev-dis.png') no-repeat center center;
      cursor: not-allowed;
    }
    .btn-next {
      background: url('/dkfair/ko/assets/Images/pop_img/popup-btn-next.png') no-repeat center center;
    }
    .btn-next:hover:not(:disabled) {
      background: url('/dkfair/ko/assets/Images/pop_img/popup-btn-next-hover.png') no-repeat center center;
    }
    .btn-next:disabled {
      background: url('/dkfair/ko/assets/Images/pop_img/popup-btn-next-dis.png') no-repeat center center;
      cursor: not-allowed;
    }

    /* 타입 3 전용 이전/다음 버튼 이미지 */
    .btn-prev-type3 {
      background: url('/dkfair/ko/assets/Images/pop_img/popup-btn-prev-type3.png') no-repeat center center;
    }
    .btn-prev-type3:hover:not(:disabled) {
      background: url('/dkfair/ko/assets/Images/pop_img/popup-btn-prev-type3-hover.png') no-repeat center center;
    }
    .btn-prev-type3:disabled {
      background: url('/dkfair/ko/assets/Images/pop_img/popup-btn-prev-type3-dis.png') no-repeat center center;
    }
    .btn-next-type3 {
      background: url('/dkfair/ko/assets/Images/pop_img/popup-btn-next-type3.png') no-repeat center center;
    }
    .btn-next-type3:hover:not(:disabled) {
      background: url('/dkfair/ko/assets/Images/pop_img/popup-btn-next-type3-hover.png') no-repeat center center;
    }
    .btn-next-type3:disabled {
      background: url('/dkfair/ko/assets/Images/pop_img/popup-btn-next-type3-dis.png') no-repeat center center;
    }

    /* 타입 3 전용 닫기 버튼 이미지 */
    .btn-close-type3 {
      background: url('/dkfair/ko/assets/Images/pop_img/btn-close-type3.png') no-repeat center center;
    }

    .item-counter {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

    /* 테이블 내 당선작 작품보기 링크 스타일 */
    td.winner-art-link,
    .tbl_basic table td.winner-art-link,
    .tbl_basic1 table td.winner-art-link,
    .tbl_basic2 table td.winner-art-link {
      color: #1a73e8 !important;
      cursor: pointer !important;
      font-weight: 600;
      text-decoration: underline;
      transition: background-color 0.15s ease, color 0.15s ease;
    }
    td.winner-art-link:hover,
    .tbl_basic table td.winner-art-link:hover,
    .tbl_basic1 table td.winner-art-link:hover,
    .tbl_basic2 table td.winner-art-link:hover {
      color: #0d47a1 !important;
      background-color: #f0f7ff !important;
    }