:root {
      --bg: #6b645d;
      --ink: #fff;
      --muted: #6b645d;
      --gap: 10px;
      --radius: 0px;
  }

  .label-tabs {
      display: flex;
      justify-content: center;
      margin: 30px 0 150px;
      gap: 10px;
  }

  .label-tabs .tab-btn {
      padding: 10px 20px;
      border: 1px solid #000;
      background: #fff;
      cursor: pointer;
      font-family: 'Newsreader', sans-serif;
      font-weight: 600;
  }

  .label-tabs .tab-btn.active {
      background: #000;
      color: #fff;
  }

  /* 기본은 숨김 */
  .tab-panel {
      display: none;
  }

  /* 활성화 시 표시 + 페이드인 애니메이션 */
  .tab-panel.active {
      display: block;
      animation: tabFadeIn .28s ease both;
      /* both = 시작/끝 상태 유지 */
  }

  @keyframes tabFadeIn {
      from {
          opacity: 0;
          transform: translateY(6px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* 접근성: 모션 최소화 설정을 존중 */
  @media (prefers-reduced-motion: reduce) {
      .tab-panel.active {
          animation: none;
      }
  }

  .designlab-actions {
      display: flex;
      justify-content: center;
      margin: 100px 0 400px;
  }

  .designlab {
      padding: 10px 20px;
      border: 1px solid #000;
      background: #fff;
      cursor: pointer;
      font-weight: 500;
      font-family: 'Newsreader', sans-serif;
  }

  .wrap {
      max-width: 1000px;
      margin: 56px auto;
      padding: 0 20px;
      font-family: "Noto Sans KR", sans-serif;
  }

  .img-hero {
      max-width: 400px;
      margin: 0 auto;
      height: auto;
  }

  .text-hero {
      text-align: center;
      margin-bottom: 200px;
  }

  .text-hero h3 {
      font-size: 15px;
  }

  .text-hero p {
      font-size: 13px;
  }

  .title {
      font-weight: 700;
      letter-spacing: .06em;
      font-size: 26px;
      margin: 200px 0 70px;
      text-transform: uppercase;
      font-family: 'Newsreader', sans-serif;
  }

  .title-right {
      font-weight: 700;
      letter-spacing: .06em;
      font-size: 26px;
      text-align: right;
      margin: 200px 0 70px;
      text-transform: uppercase;
      font-family: 'Newsreader', sans-serif;
  }

  .tile {
      border-radius: var(--radius);
      overflow: hidden;
  }

  .tile img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: fill;
  }


  figure,
  article {
      margin: 0;
  }

  .tile {
      width: 100%;
      height: 100%;
  }

  .tile .cap {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 6px;
      padding: 2px 8px;
      font-size: 12px;
      line-height: 1;
      color: #fff;
      pointer-events: none;
  }

  /* 카드 테두리는 겹쳐 그리기(크기 불변) */
  .card {
      position: relative;
      padding: 0;
  }

  .card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
  }

  /* 실제 내용 여백은 내부 래퍼에 */
  .card .inner {
      padding: 18px 18px 0px;
  }

  .card h3 {
      margin: 0 0 10px;
  }

  /*(선택)*/
  .card p {
      margin: 0;
  }

  .customizing-flex {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-end;
  }

  .img-customizing {
      flex: 1;
  }

  .text-customizing {
      flex: 0.6;
  }

  .bl-grid {
      display: grid;
      gap: var(--gap);
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
          "img1 img2"
          "text1 img2"
          "img3 text2"
          "img4 img5"
          "text3 img5"
          "img6 text4"
          "text5 img7"
          "img8 text6"
          "img9 text6";
  }

  .img-shoulder1 {
      grid-area: img1;
  }

  .img-shoulder2 {
      grid-area: img2;
  }

  .text-shoulder {
      grid-area: text1;
      display: flex;
      text-align: right;
      align-items: flex-end;
  }

  .img-curve-sleeve {
      grid-area: img3;
  }

  .text-curve-sleeve {
      grid-area: text2;
      display: flex;
      text-align: left;
      align-items: flex-end;
  }

  .img-lapel-rolling1 {
      grid-area: img4;
  }

  .img-lapel-rolling2 {
      grid-area: img5;
  }

  .text-lapel-rolling {
      grid-area: text3;
      display: flex;
      text-align: right;
      align-items: flex-end;
  }

  .img-inter {
      grid-area: img6;
  }

  .text-inter {
      grid-area: text4;
      display: flex;
      text-align: left;
      align-items: flex-end;
  }

  .img-round-belt {
      grid-area: img7;
  }

  .text-round-belt {
      grid-area: text5;
      display: flex;
      text-align: right;
      align-items: flex-end;
  }

  .img-etc1 {
      grid-area: img8;
  }

  .img-etc2 {
      grid-area: img9;
  }

  .text-etc {
      grid-area: text6;
      display: flex;
      text-align: left;
      align-items: flex-end;
  }

  .jacket-grid {
      display: grid;
      gap: var(--gap);
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
          "img1 img2"
          "img1 text1"
          "text2 img3"
          "img4 text3"
          "img5 text3"
          "text4 img6";
  }

  .img-strapata {
      grid-area: img1;
  }

  .img-strapata-top {
      grid-area: img2;
  }

  .text-strapata {
      grid-area: text1;
      display: flex;
      text-align: left;
      align-items: flex-end;
  }

  .img-realbutton {
      grid-area: img3;
  }

  .text-realbutton {
      grid-area: text2;
      display: flex;
      text-align: right;
      align-items: flex-end;
  }

  .img-shield1 {
      grid-area: img4;
      position: relative;
  }

  .img-shield2 {
      grid-area: img5;
      position: relative;
  }

  .text-shield {
      grid-area: text3;
      display: flex;
      text-align: left;
      align-items: flex-end;
  }


  .text-lapel {
      grid-area: text4;
      display: flex;
      text-align: right;
      align-items: flex-end;
  }

  .img-lapel {
      grid-area: img6;
  }

  .customizing-grid {
      display: grid;
      gap: var(--gap);
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
          "img3 img4"
          "img1 img2";
      margin-top: 10px;
  }

  .img-button1 {
      grid-area: img1;
  }

  .img-button2 {
      grid-area: img2;
  }

  .img-grosgrain1 {
      grid-area: img3;
  }

  .img-grosgrain2 {
      grid-area: img4;
  }

  .trouser-grid {
      display: grid;
      gap: var(--gap);
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
          "text1 img1"
          "text1 img2"
          "img3 text2"
          "img4 text2"
          "text4 img6"
          "img5 text3"
      ;
  }

  .img-belt1 {
      grid-area: img1;
      position: relative;
  }

  .img-belt2 {
      grid-area: img2;
      position: relative;
  }

  .text-belt {
      grid-area: text1;
      display: flex;
      text-align: left;
      align-items: flex-end;
  }

  .img-hook1 {
      grid-area: img3;
      position: relative;
  }

  .img-hook2 {
      grid-area: img4;
      position: relative;
  }

  .text-hook {
      grid-area: text2;
      display: flex;
      text-align: right;
      align-items: flex-end;
  }

  .img-inner {
      grid-area: img5;
  }

  .text-inner {
      grid-area: text3;
      display: flex;
      text-align: left;
      align-items: flex-end;
  }

  .img-side {
      grid-area: img6;
  }

  .text-side {
      grid-area: text4;
      display: flex;
      text-align: right;
      align-items: flex-end;
  }

  .text-shoulder h3,
  .text-curve-sleeve h3,
  .text-lapel-rolling h3,
  .text-inter h3,
  .text-round-belt h3,
  .text-etc h3,
  .text-strapata h3,
  .text-realbutton h3,
  .text-shield h3,
  .text-lapel h3,
  .text-belt h3,
  .text-hook h3,
  .text-inner h3,
  .text-side h3,
  .text-customizing h3 {
      font-size: 15px;
  }

  .text-shoulder p,
  .text-curve-sleeve p,
  .text-lapel-rolling p,
  .text-inter p,
  .text-round-belt p,
  .text-etc p,
  .text-strapata p,
  .text-realbutton p,
  .text-shield p,
  .text-lapel p,
  .text-belt p,
  .text-hook p,
  .text-inner p,
  .text-side p,
  .text-customizing p {
      padding-bottom: 30px;
      font-size: 13px;
  }

 .fixed-cta {
   position: fixed;
   right: max(12px, env(safe-area-inset-right));
   bottom: max(16px, env(safe-area-inset-bottom));
   z-index: 10000;

   display: flex;
   align-items: center;
   gap: 10px;

   height: 46px;
   padding: 10px 16px;
   border-radius: 9999px;

   background: #0f0f0f;
   color: #fff;
   text-decoration: none;
   box-shadow: 0 10px 20px rgba(0, 0, 0, .25);

   overflow: hidden;
   box-sizing: border-box;

   width: var(--cta-wide, 165px);
   transition: width .35s ease, padding .3s ease, gap .25s ease, border-radius .3s ease;
   --cta-circle: 46px;
   --cta-content: calc(var(--cta-circle) - 20px);
 }

 .fixed-cta .cta-logo {
   width: var(--cta-content);
   height: var(--cta-content);
     width: 26px;
     height: 26px;
     flex: 0 0 26px;
     border-radius: 50%;
   background: #000;
   object-fit: contain;
   display: block;
 }

 .fixed-cta .cta-label {
   white-space: nowrap;
   overflow: hidden;
   max-width: var(--label-wide, 220px);
   opacity: 1;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: .2px;
   display: inline-flex;
   align-items: center;
   height: var(--cta-content);
   line-height: 1;
   transition: max-width .35s ease, opacity .25s ease;
 }
 .fixed-cta.is-circle {
   width: var(--cta-circle, 46px);
   padding: 10px;
   gap: 0;
   border-radius: 50%;
 }

 .fixed-cta.is-circle .cta-label {
   max-width: 0;
   opacity: 0;
 }

 .fixed-cta.is-circle.is-expanded {
   width: var(--cta-wide, 240px);
   padding: 10px 16px;
   gap: 10px;
   border-radius: 9999px;
 }

 .fixed-cta.is-circle.is-expanded .cta-label {
   max-width: var(--label-wide, 220px);
   opacity: 1;
 }

 @media (hover: hover) {

   .fixed-cta.is-circle:hover,
   .fixed-cta.is-circle:focus-visible {
     width: var(--cta-wide, 240px);
     padding: 10px 16px;
     gap: 10px;
     border-radius: 9999px;
   }

   .fixed-cta.is-circle:hover .cta-label,
   .fixed-cta.is-circle:focus-visible .cta-label {
     max-width: var(--label-wide, 220px);
     opacity: 1;
   }
 }


 @media (prefers-reduced-motion: reduce) {

   .fixed-cta,
   .fixed-cta .cta-label {
     transition: none;
   }
 }

  @media (max-width: 768px) {
     .fixed-cta {
     position: fixed;
     right: max(12px, env(safe-area-inset-right));
     bottom: max(16px, env(safe-area-inset-bottom));
     z-index: 10000;

     display: flex;
     align-items: center;
     gap: 10px;

     height: 46px;
     padding: 10px 16px;
     border-radius: 9999px;

     background: #0f0f0f;
     color: #fff;
     text-decoration: none;
     box-shadow: 0 10px 20px rgba(0, 0, 0, .25);

     overflow: hidden;
     box-sizing: border-box;

     width: var(--cta-wide, 160px);
     transition: width .35s ease, padding .3s ease, gap .25s ease, border-radius .3s ease;
     --cta-circle: 46px;
   }

   .fixed-cta .cta-logo {
     width: 26px;
     height: 26px;
     flex: 0 0 26px;
     border-radius: 50%;
     background: #000;
     object-fit: contain;
     display: block;
   }

   .fixed-cta .cta-label {
     white-space: nowrap;
     overflow: hidden;
     max-width: var(--label-wide, 170px);
     opacity: 1;
     font-size: 13px;
     font-weight: 600;
     letter-spacing: .2px;
     transition: max-width .35s ease, opacity .25s ease;
   }

   .fixed-cta.is-circle {
     width: var(--cta-circle, 46px);
     padding: 10px;
     gap: 0;
     border-radius: 50%;
   }

   .fixed-cta.is-circle .cta-label {
     max-width: 0;
     opacity: 0;
   }
      :root {
          --gap: 5px;
      }

      .label-tabs .tab-btn {
          font-size: 11px;
      }

      .img-hero {
          max-width: 150px;
      }

      .designlab {
          font-size: 12px;
      }

      .text-hero {
          text-align: center;
          font-size: 11px;
      }

      .title {
          font-size: 16px;
          margin-top: 50px;
          margin-bottom: 30px;
      }

      .title-right {
          font-size: 16px;
          margin-top: 50px;
          margin-bottom: 30px;
      }

      .tile .cap {
          font-size: 10px;
      }

      .bl-grid {
          grid-template-columns: 1fr;
          grid-template-areas:
              "img1"
              "img2"
              "text1"
              "img3"
              "text2"
              "img4"
              "img5"
              "text3"
              "img6"
              "text4"
              "img7"
              "text5"
              "img8"
              "img9"
              "text6";
      }

      .jacket-grid {
          grid-template-columns: 1fr;
          grid-template-areas:
              "img2"
              "img1"
              "text1"
              "img3"
              "text2"
              "img4"
              "img5"
              "text3"
              "img6"
              "text4";
      }

      .trouser-grid {
          grid-template-columns: 1fr;
          grid-template-areas:
              "img1"
              "img2"
              "text1"
              "img3"
              "img4"
              "text2"
              "img6"
              "text4"
              "img5"
              "text3";
      }

      /* 공통 스타일을 묶기 */
      .text-shoulder h3,
      .text-curve-sleeve h3,
      .text-lapel-rolling h3,
      .text-inter h3,
      .text-round-belt h3,
      .text-etc h3,
      .text-strapata h3,
      .text-realbutton h3,
      .text-shield h3,
      .text-lapel h3,
      .text-belt h3,
      .text-hook h3,
      .text-inner h3,
      .text-side h3 {
          font-size: 13px;
      }

      .text-shoulder p,
      .text-curve-sleeve p,
      .text-lapel-rolling p,
      .text-inter p,
      .text-round-belt p,
      .text-etc p,
      .text-strapata p,
      .text-realbutton p,
      .text-shield p,
      .text-lapel p,
      .text-belt p,
      .text-hook p,
      .text-inner p,
      .text-side p,
      .customizing-grid {
          padding-bottom: 200px;
          font-size: 11px;
      }

      .text-etc p {
          padding-bottom: 0px;
      }

      .customizing-flex {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-end;
      }

      .text-customizing h3 {
          font-size: 13px;
      }

      .text-customizing p {
          font-size: 11px;
      }

      .text-hero h3 {
          font-size: 13px;
      }

      .text-hero p {
          font-size: 11px;
      }

      .designlab-actions {
          margin: 100px 0 300px;
      }

      .wrap {
          padding: 0 5px;
      }

      .card .inner {
          padding: 10px 10px;
      }
  }