/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Reset form styles */
      input, textarea, select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0;
        background-image: none;
      }

      /* Selection highlight */
      ::selection      { background-color: rgba(0, 100, 255, 0.26); color: inherit; }
      ::-moz-selection { background-color: rgba(0, 100, 255, 0.26); color: inherit; }

      /* Autofill brand colors */
      input:-webkit-autofill,
      input:-webkit-autofill:focus {
        background-color: var(--colors--background) !important;
        color: var(--colors--text) !important;
        border-color: var(--colors--text) !important;
        -webkit-box-shadow: 0 0 0 50px var(--colors--background) inset;
        -webkit-text-fill-color: var(--colors--text);
      }

      /* Rich text */
      .w-richtext > :first-child { margin-top: 0; }
      .w-richtext > :last-child,
      .w-richtext ol li:last-child,
      .w-richtext ul li:last-child { margin-bottom: 0; }
      .rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4 { text-wrap: balance; }
      .rich-text figure.w-richtext-align-fullwidth {
        min-width: 130%;
        position: relative;
        left: -15%;
      }

      /* Row/col gaps */
      .row.row-gap-0  .col { margin: 0; padding: 0; }
      .row.row-gap-md .col {
        padding-left:  calc(var(--_layout---grid--gap-md) / 2);
        padding-right: calc(var(--_layout---grid--gap-md) / 2);
      }
      .row.row-gap-sm .col {
        padding-left:  calc(var(--_layout---grid--gap-sm) / 2);
        padding-right: calc(var(--_layout---grid--gap-sm) / 2);
      }

      /* Line clamp */
      .u-text-clamp-1 { -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
      .u-text-clamp-2 { -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
      .u-text-clamp-3 { -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

      /* Bullet list marker */
      .bullet-list_item::before {
        content: "•";
        font-size: 1em;
        margin-right: 0.3em;
        margin-left: -0.7em;
        display: inline-block;
      }

      /* Custom HRs */
      .rich-text hr { border-color: var(--colors--border); box-shadow: none; margin: 2em 0; }
      hr.u-hr-dinkus { border: none; height: auto; }
      hr.u-hr-dinkus::after {
        content: "\2042";
        display: block;
        font-family: serif;
        font-weight: 200;
        font-size: 1.5em;
        margin: 1em auto;
        text-align: center;
      }
      
      
      #statusbox {
        width: 500px;        /* 고정 너비 */
        max-width: 500px;    /* 최대 너비 제한 */
        min-width: 200px;    /* 최소 너비 보장 */
        margin: 0 auto;     /* 가운데 정렬 */
  box-sizing: border-box; /* padding 포함해서 너비 계산 */
      }
  
.thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1; /* 정사각형 유지 */
  overflow: hidden;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 비율 유지하며 영역 채움 */
  display: block;
}