/* ------------------------------------------------ */
    /* GLOBAL STYLES (Simplified Squarespace look) */
    /* ------------------------------------------------ */
    body {
      font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: white;
      color: #333;
      line-height: 1.5;
    }

    #canvas {
      max-width: 1400px;
      /* Adjusted max-width to give more space */
      margin: 0 auto;
      padding: 0 40px;
      /* Added padding for inner content */
      box-sizing: border-box;
    }

    .page-divider {
      border-top: 1px solid #eee;
      margin: 20px 0;
    }

    /* ------------------------------------------------ */
    /* HEADER & NAVIGATION */
    /* ------------------------------------------------ */
    #header {
      display: flex;
      justify-content: space-between;
      align-items: anchor-center;
      /* Align to bottom of header */
      padding: 30px 0 10px;
      /* Top/Bottom padding for header area */
      border-bottom: 1px solid transparent;
      /* Add space for divider to align later */
    }

    #logo {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-left: 20px;
      /* Aligns with original layout style */
    }

    .logo a {
      text-decoration: none;
    }

    .logo img {
      max-width: 200px;
      height: auto;
      margin-bottom: 5px;
    }

    .logo-subtitle {
      font-size: 0.8em;
      color: #777;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    #topNav {
      padding-right: 20px;
      /* Aligns with original layout style */
    }

    .main-nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
    }

    .main-nav li {
      margin-left: 25px;
    }

    .main-nav a {
      text-decoration: none;
      color: #333;
      font-size: 1em;
      font-weight: normal;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding-bottom: 5px;
      /* Space for the active link underline */
    }

    .main-nav li.active-link a {
      /* border-bottom: 1px solid #333; */
      font-weight: bold;
    }

    /* Hide Mobile Nav elements */
    #mobileNav,
    #mobileMenuLink {
      display: none;
    }

    /* ------------------------------------------------ */
    /* PAGE HEADER / TITLE */
    /* ------------------------------------------------ */
    .page-header {
      text-align: center;
      padding: 20px 0 40px;
    }

    .sqs-html-content h1 strong {
      font-size: 2em;
      font-weight: normal;
      /* Adjust weight for modern look */
      margin: 10px 0;
      display: block;
    }

    .intrinsic {
      max-width: 854px;
      /* Set max width based on the embed data */
      margin: 30px auto 0;
      position: relative;
      height: 0;
      padding-bottom: 56.25%;
      /* 16:9 Aspect Ratio */
      overflow: hidden;
      background-color: #ddd;
      /* Placeholder background */
      border: 1px solid #ccc;
    }

    .intrinsic iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    /* ------------------------------------------------ */
    /* PRODUCT LIST / GALLERY */
    /* ------------------------------------------------ */
    #productList {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      /*grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
       Responsive grid */
      gap: 30px;
      padding: 0 20px;
      /* Inner padding for the grid section */
    }

    .product {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      text-decoration: none;
      color: inherit;
      box-sizing: border-box;
      position: relative;
      cursor: pointer; /* 클릭 가능함을 표시 */
    }

    .product-image {
      width: 100%;
      /* Images will try to fill the grid item */
      overflow: hidden;
      padding-bottom: 100%;
      /* Makes the container square-shaped */
      position: relative;
      margin-bottom: 10px;
    }

    .product-image img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Crop and cover the square space */
      transition: opacity 0.3s ease;
      filter: none;
      /* Reset filter */
    }

    .product:hover .product-image img {
      opacity: 0.8;
    }


    .product-meta {
      padding: 5px 0;
    }

    .product-title {
      font-weight: bold;
      font-size: 0.9em;
      margin-bottom: 2px;
    }

    .product-price {
      color: #333;
      font-size: 0.9em;
      font-weight: normal;
    }

    /* ------------------------------------------------ */
    /* SOLD OUT STYLES - MODIFIED HERE */
    /* ------------------------------------------------ */

    /* 1. Sold Out Image Opacity/Tint */
    .product.sold-out .product-image img {
      filter: brightness(0.9) grayscale(0.2);
      /* Slightly darker and desaturated */
    }

    .product.sold-out .product-image::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.2);
      /* Light overlay tint */
      z-index: 2;
    }

    /* 2. Sold Out Ribbon/Mark */
    .product-mark.sold-out {
      position: absolute;
      top: 15px;
      right: 0;
      z-index: 10;
      background-color: #222;
      /* Red color for the ribbon */
      color: white;
      font-weight: bold;
      font-size: 0.7em;
      padding: 6px 8px;
      text-transform: uppercase;
      letter-spacing: 1px;
      line-height: 1em;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
      /* Shape for the ribbon */
      transform: translateY(0) translateX(0);
      /* Initial position */
    }

    /* Ensure the non-sold-out mark is hidden or properly styled if needed */
    .product-mark:not(.sold-out) {
      display: none;
    }

    /* Price style adjustment for sold out item to match image */
    .product.sold-out .product-price {
      color: #777;
      /* Gray out the price */
    }

    /* Hide the old sold out text if it's rendered separately below the price */
    .product-mark.sold-out:not(div) {
      /* This targets the old style mark div which is below the product meta */
      display: none;
    }

    /* ------------------------------------------------ */
    /* FOOTER CONTENT / ABSTRACT */
    /* ------------------------------------------------ */
    .row {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 40px;
      justify-content: space-between;
      /* Distribute space */
    }

    .col {
      padding: 10px;
      box-sizing: border-box;
    }

    .col-6 {
      flex: 0 0 calc(50% - 20px);
      /* 50% minus padding gap */
      max-width: calc(50% - 20px);
    }

    .col-8 {
      flex: 0 0 calc(66.6666% - 10px);
      max-width: calc(66.6666% - 10px);
    }

    .col-4 {
      flex: 0 0 calc(33.3333% - 10px);
      max-width: calc(33.3333% - 10px);
    }

    .col-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }


    .sqs-block-content h1 {
      font-size: 1.2em;
      margin: 15px 0 10px;
      font-weight: bold;
    }

    .sqs-block-content ul {
      list-style-type: disc;
      padding-left: 20px;
    }

    .sqs-block-content p {
      margin: 10px 0;
      white-space: pre-wrap;
      font-size: 0.95em;
      text-align: left;
    }

    .sqs-block-content hr {
      border: 0;
      border-top: 1px solid #ccc;
      margin: 20px 0;
    }

    .sqs-block-image-figure {
      margin: 10px 0;
      display: block;
    }

    .sqs-block-image-figure img {
      width: 100%;
      height: auto;
      display: block;
    }

    .image-caption {
      font-size: 0.85em;
      color: #555;
      text-align: center;
      margin-top: 5px;
    }

    /* Site Footer */
    #footer {
      text-align: center;
      padding: 30px 0;
      font-size: 0.9em;
      color: #555;
      border-top: 1px solid #eee;
    }


    /* ------------------------------------------------ */
    /* RESPONSIVE DESIGN */
    /* ------------------------------------------------ */
    @media (max-width: 900px) {
      #header {
        flex-direction: column;
        align-items: center;
      }

      #logo {
        padding-left: 0;
        align-items: center;
      }

      #topNav {
        padding-right: 0;
        margin-top: 10px;
      }

      .main-nav li {
        margin: 0 10px;
      }

      .row {
        padding: 0 20px;
      }

      .col-6,
      .col-8,
      .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
      }

      #productList {
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
        padding: 0 10px;
      }

      #canvas {
        max-width: 1400px;
        /* Adjusted max-width to give more space */
        margin: 0 auto;
        padding: 0 0 !important;
        /* Added padding for inner content */
        box-sizing: border-box;
        }
    }

    /* ------------------------------------------------ */
    /* MODAL STYLES (작품 상세 모달) */
    /* ------------------------------------------------ */
    .modal {
      display: none;
      /* 기본적으로 숨김 */
      position: fixed;
      /* 화면에 고정 */
      z-index: 1000;
      /* 다른 요소 위에 표시 */
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      /* 내용이 길 때 스크롤 허용 */
      background-color: rgba(0, 0, 0, 0.4);
      /* 반투명 검은색 배경 */
      padding-top: 50px;
      /* 상단 여백 */
    }

    .modal-content {
      background-color: #fefefe;
      margin: 5% auto;
      /* 상단 5%, 중앙 정렬 */
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      /* 모달 너비 */
      max-width: 1240px;
      /* 최대 너비 */
      position: relative;
    }

    .close-button {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
      position: absolute;
      top: 10px;
      right: 20px;
    }

    .close-button:hover,
    .close-button:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }

    .modal-body-content {
      padding: 20px;
    }

    .detail-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      align-items: center;
    }

    .detail-image-section {
  flex: 0 0 560px;     /* 영역 너비 고정 */
  width: 560px;        /* 고정 너비 560px */
  height: 560px;       /* 고정 높이 560px */
  background-color: #ffffff; /* 배경을 흰색으로 설정하여 여백 처리 */
  display: flex;       /* 중앙 정렬을 위한 Flexbox */
  align-items: center; /* 수직 중앙 정렬 */
  justify-content: center; /* 수평 중앙 정렬 */
  overflow: hidden;    /* 영역 밖으로 나가는 것 방지 */
}

.detail-image-section .detail-img {
  max-width: 100%;     /* 영역 너비를 넘지 않게 조절 */
  max-height: 100%;    /* 영역 높이를 넘지 않게 조절 */
  width: auto;         /* 가로 비율 유지 */
  height: auto;        /* 세로 비율 유지 */
  object-fit: contain; /* 비율에 맞춰 축소하여 영역 안에 전체 표시 (가운데 정렬 포함) */
  display: block;      /* 공백 제거 */
}

    .detail-info-section {
      flex: 1 1 50%;
      min-width: 300px;
    }

    .modal-info-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .modal-product-title {
      font-size: 1.5em;
      font-weight: bold;
      margin: 0;
      letter-spacing: -0.05em;
    }

    .modal-sold-out-badge {
      background-color: black;
      color: white;
      padding: 5px 10px;
      font-size: 0.7em;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .modal-price {
      font-size: 1.5em;
      font-weight: normal;
      margin-bottom: 20px;
      color: #333;
    }

    .modal-description-text p {
      /* 원문 설명 텍스트 */
      margin-top: 0;
      margin-bottom: 20px;
      font-size: 0.95em;
    }

    .detail-title {
      /* 원문 설명 텍스트 */
      margin-top: 0;
      margin-bottom: 20px;
      font-size: 0.95em;
      font-weight: bold;
    }

    .modal-meta-data p {
      /* Artist, Medium, Size 등의 정보 */
      margin: 5px 0;
      font-size: 0.9em;
    }

    .modal-contact-button a {
      display: inline-block;
      background-color: #333;
      color: white;
      padding: 10px 15px;
      text-decoration: none;
      margin-top: 20px;
      font-size: 0.9em;
      font-weight: bold;
      transition: background-color 0.3s;
      cursor: default;
    }

    .modal-contact-button a:hover {
      background-color: #555;
    }

    /* 모바일 반응형 */
    @media (max-width: 768px) {
      .modal-content {
        /* width: 95%; */
        margin: 20px auto;
      }

      .detail-wrapper {
        gap: 20px;
        flex-direction: column;
        /* 세로로 쌓이게 */
      }

      .detail-image-section,
      .detail-info-section {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: auto;
      }
    }

    @media (max-width: 768px) {
  .detail-image-section {
    flex: 1 1 auto;
    width: 100%;       /* 모바일에서는 가로를 꽉 채움 */
    height: auto;      /* 높이는 비율에 맞게 자동 조절 */
    aspect-ratio: 1 / 1; /* 모바일에서도 정사각형 비율 유지 */
  }
}