:root { --paper:#efede9; --ink:#171717; --ease:cubic-bezier(.22,1,.36,1); }
    * { box-sizing:border-box; }
    html { scroll-behavior:auto; scrollbar-gutter: auto; }
    body { margin:0;  } 
    

/* Chrome, Safari 등 */
 #gallery.expanded {
  overflow: visible;
}
    .gallery { position:relative; height:100vh; min-height:620px; overflow:hidden; background:var(--paper); isolation:isolate; }
    #gallery {
      margin: 0;
      padding: 0;
      border: 0;
      box-sizing: border-box;
      height: 100vh;
      min-height: 0;
    }   
    #gallery > p{
        color:#282623;
        font-size: clamp(12px, 1.2500vw, 24px);
        text-align:center;margin-top: 35px;    position: relative;
    z-index: 11;

    }
    #gallery.expanded > p {
        color:#fff;
    }
    .topbar { position:absolute; inset:18px 2.8vw auto; z-index:40; display:flex; justify-content:space-between; font-size:11px; text-transform:uppercase; }
    .topbar span:nth-child(2) { position:absolute; left:50%; transform:translateX(-50%); }
    .project-title {     position: absolute;
    z-index: 4;
    left: 5.8vw;
    top: 24.5%;
    width: 52vw;
    margin: 0;
    font-size: clamp(55px, 9.3750vw, 180px);
    line-height: .82;color:#282623;
        letter-spacing: -2%;
    pointer-events: none;}
    .project-title span { display:block; }
    .project-title.white-copy { z-index:14; color:#fff; clip-path:inset(var(--clip-t,100%) var(--clip-r,0) var(--clip-b,0) var(--clip-l,0)); transition:color .35s ease; }

    .main-media { position:absolute; z-index:10; left:calc(50% - max(16.5vw,195px)); top:16%; width:33vw; min-width:390px; height:69%; overflow:hidden; background:transparent; cursor:zoom-in; border-radius:0; transform:translateZ(0); will-change:left,top,width,height,border-radius,clip-path,transform; }
    .media-layer { position:absolute; inset:0; width:calc(100% + 4px); height:calc(100% + 4px); object-fit:cover; object-position:center; display:block; transform:translate3d(0,0,0) scale(1.002); will-change:transform,opacity; }
    .media-layer.entering { z-index:2; animation:enterMedia .76s var(--ease) both; }
    .media-layer.leaving { z-index:1; animation:leaveMedia .76s var(--ease) both; }
    @keyframes enterMedia { from { transform:translate3d(0,var(--dir,100%),0) scale(1.08); } to { transform:translate3d(0,0,0) scale(1.002); } }
    @keyframes leaveMedia { from { transform:translate3d(0,0,0) scale(1.002); } to { transform:translate3d(0,var(--leave,-20%),0) scale(1.025); } }

    .details {        position: absolute;
    z-index: 16;
    left: calc(69vw + 18px);
    top: 50%;
    transform: translateY(-50%);
    width: 11vw;
    min-width: 130px;
    font-size: 10px;
    line-height: 1.35; }
   
    .details strong { 
            display: block;
    margin-bottom: 9px;
    /* text-transform: uppercase; */ 
    z-index: 4;
    left: -0.2vw;
    top: 24.5%;
    width: 52vw;
    margin: 0;
    font-size: clamp(12px, 1.2500vw, 24px);
    line-height: 1.3;
    color: #282623;
        letter-spacing: -2%;
    pointer-events: none;
    font-family: "SelectaTrial", sans-serif;
    font-weight: normal;


        }
   .gallery.expanded .details strong { 
       display:none;


        }
    .details p { margin:0; display:none;}
    .gallery.expanded  .details {
           position: absolute;
    z-index: 16;
    left: calc(64vw + 18px);
    top: 29vw;
    width: auto;
    min-width: 130px;
    font-size: 10px;
    line-height: 1;
    } 
    #gallery.expanded .details p { 
       display:block;

       font-size: clamp(12px, 1.2500vw, 24px);
        line-height: 1.3;
        color: #fff;
        letter-spacing: -.035em;
        pointer-events: none;
        font-family: "RhymesTextTrial", sans-serif;
        font-weight: normal; 

        white-space: normal;


        }
    .client {     
        position: absolute;
    z-index: 4;
    left: 4.8vw;
    top: auto;
    bottom: 6vw;
    width: auto;
    margin: 0;
    font-size: clamp(12px, 1.2500vw, 24px);
    line-height: 1.2;
    color: #282623;
    letter-spacing: -.035em;
    pointer-events: none;
    font-family: "SelectaTrial", sans-serif;
    font-weight: normal;    z-index: 13;

    }
.link {
      position: absolute;
    z-index: 4;
    right: 4.8vw;
    top: auto;
    bottom: 6vw;
    width: auto;
    margin: 0;
    font-size: clamp(12px, 1.2500vw, 24px);
    line-height: 1.2;
    
    letter-spacing: -.035em;
    pointer-events: none;
    font-family: "SelectaTrial", sans-serif;
    font-weight: normal;

}
.gallery.expanded .link {
    display:none;
}
.link a{color: #282623;border-bottom: 2px solid #282623;
}
    .counter { position:absolute; z-index:16; left:2.8vw; bottom:3%; font-size:11px;display:none; }
     #gallery .details p {
      white-space: pre-line;
    }
    .thumbs { position: absolute;
    z-index: 20;
    right: 2.4vw;
    top: 25%;
    height: 53%;
    width: 149px;
    display: flex;
    flex-direction: column;
    gap: 9px;align-items: center;
    justify-content: center;}
    .thumb { border: 0;
    padding: 0;
    width: 125px;
    height: 52px;
    border-radius: 27px; 
    opacity: .28;
    cursor: pointer;
    transform: scale(1);
    transition: opacity .45s ease, transform .55s var(--ease), height .65s var(--ease), border-radius .65s var(--ease);
    background: #ccc;

    }
    .thumb img { width:100%; height:100%; object-fit:cover; display:block;     border-radius: 33px;}
    #gallery.expanded .thumb img {   border-radius: 0;}
    .thumb.active {    opacity: 1;
    transform: scale(1);
    height: 62px;
    border-radius: 33px;
    width: 149px;}
    .thumb.active::after {
           display: block;
    content: "";
    position: absolute;
    width: 150px;
    top: 50%;
    right: calc(100% + 10px);
    height: 1px;
    background: rgba(0, 0, 0, .4);
    z-index: 9;
    }
    .gallery.expanded .thumb.active::after {
        display:none; 
    }
    .progress { position:absolute; z-index:16; left:2.8vw; right:2.8vw; bottom:18px; height:1px; background:rgba(0,0,0,.14); display:none; }
    .progress i { display:block; height:100%; width:25%; background:currentColor; transform-origin:left; transition:transform .8s var(--ease); }
    .hint { position:absolute; z-index:16; right:2.8vw; bottom:28px; font-size:9px; letter-spacing:.12em; text-transform:uppercase;  display:none;}

    .gallery.expanded .main-media { cursor:zoom-out; }
    .gallery.expanded .project-title, .gallery.expanded .details, .gallery.expanded .client, .gallery.expanded .counter, .gallery.expanded .topbar, .gallery.expanded .progress, .gallery.expanded .hint { color:#fff; }
    .gallery.expanded .project-title.white-copy { clip-path:inset(0); }
    #gallery .expanded.thumbs-window {
      
    }
    #gallery.expanded .thumbs { 
            

    }
    #gallery.expanded .thumb {       height: 180px;
    border-radius: 2px;
    opacity: 1;
    width: 204px;}
    .gallery.expanded .thumb.active {  opacity:1; }
    .gallery.expanded .main-media .media-layer { transform:scale(1.001); }
    .close {
           position: absolute;
    z-index: 30;
    line-height: .85;
    top: 15vw;
    right: calc(27.4vw + 76px);
    width: 70px;
    height: 70px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: rgba(0, 0, 0, .08);
    color: #fff;
    cursor: pointer;

    }
    .close:hover { background:rgba(0,0,0,.35); }
.close img {
    max-width:30%;
}
    #gallery.expanded .close { opacity:1; pointer-events:auto; transform:translateY(-50%) scale(1) rotate(0); }

    #section06 .details2 {
        position: absolute;
        z-index: 4;
        left: 5.8vw;
        top: 59.5%;
        width: 52vw;
        margin: 0;
        font-size: clamp(12px, 1.2500vw, 24px);
        line-height: .82;
        color: #282623;
        letter-spacing: -3%;
        pointer-events: none;
        font-family: "RhymesTextTrial", sans-serif;
        font-weight: normal;
        line-height: 1.3;
    }

    #gallery .thumbs-window {
  position: absolute;
  z-index: 20;
  right: 2.4vw;
  top: 50%;
  transform: translateY(-50%);
      overflow-y: clip;
  width: 149px;
  height: 76%; 
}

#gallery .thumbs-window .thumbs {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;

  transition: transform 0.55s ease;
}
/* 팝업의 썸네일 표시 영역 */
#gallery.expanded .thumbs-window {
      top: 10vw;
    right: 2px;
    width: 540px;
    max-width: 90%;
    height: 180px;
    transform: none;        overflow: hidden;
}

/* 팝업에서는 가로 나열 */
#gallery.expanded .thumbs-window .thumbs {
  top: 0;
  left: 0;
  right: auto;

  flex-direction: row;
  align-items: center;
  justify-content: flex-start;

  width: max-content;
  height: 100%;
  gap: 12px;
}

#gallery.expanded .thumbs-window .thumb {
  flex: 0 0 auto;
}

#gallery .thumbs-window .thumb {
  flex-shrink: 0;
}
.pcOnly {
}
.mobileOnly {
    display:none;
}
    @media (max-width:800px) {
        .pcOnly {
            display:none;
        }
        .mobileOnly {
            display:block;
        }
      .gallery { min-height:560px; }
      .project-title { top:25%; width:74vw; font-size:clamp(48px,13vw,84px); }
      .main-media {
                left: auto;
        top: 20%;
        right: 5vw;
        width: 44.9333vw;
        height: 64.4vw;
        min-width: 0; 
    }

      .details { left:5vw; top:auto; bottom:8%; width:62vw; color:#fff; }
      .thumbs { right:3vw; width:48px; }
      .thumb { width:48px; }
      .client { display:none; }
    }

    #section06 #gallery {
    display: flow-root;
}

    @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }
  
    /* Image grows; text coordinates remain unchanged. */
    .gallery { min-height:0; }
    .media-layer { transform:scale(1.5); transition:transform 1.15s var(--ease); }
    .gallery.expanded .main-media .media-layer { transform:scale(1); }
    .gallery.expanded .project-title.white-copy { clip-path:inset(var(--clip-t,100%) var(--clip-r,0) var(--clip-b,0) var(--clip-l,0)); }
    @keyframes enterMedia {
      from { transform:translate3d(0,var(--dir,100%),0) scale(1.55); }
      to { transform:scale(1.5); }
    }
    @keyframes leaveMedia {
      from { transform:scale(1.5); }
      to { transform:translate3d(0,var(--leave,-20%),0) scale(1.55); }
    }
    .gallery.expanded .media-layer.entering { animation-name:enterExpanded; }
    .gallery.expanded .media-layer.leaving { animation-name:leaveExpanded; }
    @keyframes enterExpanded {
      from { transform:translate3d(0,var(--dir,100%),0) scale(1.08); }
      to { transform:scale(1); }
    }
    @keyframes leaveExpanded {
      from { transform:scale(1); }
      to { transform:translate3d(0,var(--leave,-20%),0) scale(1.025); }
    }
    @media (prefers-reduced-motion:reduce) { .media-layer {transition:none;} }
      .close-bottom { 
              position: absolute;
    z-index: 35;
    right: 2.8vw;
    bottom: 28px;
    border: 0;
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
    visibility: hidden;
    background: transparent;
    opacity: 0;
    font-size: clamp(12px, 1.2500vw, 24px);
    pointer-events: none;
    transition: opacity 2s;
    font-family: "SelectaTrial", sans-serif;
    font-weight: normal;
    right: 4.8vw;
    top: auto;
    bottom: 6vw;}
    .gallery.expanded .close-bottom {visibility:visible;opacity:1;pointer-events:auto;}
    .gallery.expanded .hint {visibility:hidden;}


    @media (max-width:1660px) {

        .thumb.active::after { 
            width: 130px; 
        }
        #gallery.expanded .thumb {
            height: 160px; 
            width: 184px;
        }
        #gallery.expanded .thumbs-window {     top: 13vw;
            right: 0px;
            width: 480px; 
            height: 160px; 
        }
        .close { 
            top: 18.5vw;
            right: calc(27.4vw + 76px);
            width: 60px;
            height: 60px; 
        }
        .gallery.expanded .details { 
            top: 32vw; 
        }

    }
     @media (max-width:1440px) {

        #gallery.expanded .thumb {
            height: 140px; 
            opacity: 1;
            width: 164px;
        }
        .close { 
            top: 26.5vw; 
        }
        #gallery.expanded .thumbs-window {     top: 21vw;
            right: 0px;
            width: 430px; 
            height: 140px; 
        }
        .gallery.expanded .details { 
            left: calc(64vw + 18px);
            top: 40vw; 
        }
    }













       @media (max-width:760px) {
               .main-media {
                left: auto;
                top: 26vw;
                right: 5vw;
                max-width: 337px;
                max-height:483px;
                width: 44.9333vw;
                height: 64.4vw;
                min-width: 0; 
            } .media-layer {
            position: absolute; transform: scale(1.1);  
            bottom: 0;
            top: auto;
        }
        #gallery .thumbs-window {
            position: relative;
            z-index: 20;
            right: 2.4vw;
            top: 85vw;
            transform: translateY(0%);
            overflow-y: clip;
            width: 100%;
            height: 8vw;

        }
        #gallery .thumbs-window .thumbs {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: auto; 
            display: block; 
            gap: 9px; 
        }

        .thumb {
                    width: 15.8667vw;
        height: 6.6667vw;
        }
        .thumb.active { 
            height: 8.0vw;
            border-radius: 33px;
            width: 18.6667vw;
        }
        #gallery .thumbs-window .thumbs { 
            width: 100%;
            height: auto;
            display: flex;
            gap: 9px;
            flex-direction: row;
            justify-content: center;
        }
        .project-title {
            top: 26vw;left:5vw;
            width: 74vw;
            font-size: clamp(48px, 14.6667vw, 110px); 
        }
        #section06 .details2 {
                    position: absolute;
        z-index: 4;
        left: 5vw;
        top: 53vw;
        width: 40vw;
        margin: 0;
        font-size: clamp(8px, 2.1333vw, 16px);
        line-height: .82;
        color: #282623;
        letter-spacing: -3%;
        pointer-events: none;
        font-family: "RhymesTextTrial", sans-serif;
        font-weight: normal;
        line-height: 1.3;
        }
            .details {
        left: 5vw;
        top: 80vw;
        bottom: auto;
        width: 62vw;
        color: #fff;
        /* font-size: clamp(12px, 2.1333vw, 16px); */
        line-height: 1.6;
    }
.details strong {
    display: block;
    margin-bottom: 9px;
    /* text-transform: uppercase; */
    z-index: 4;
    left: -0.2vw;
    top: 24.5%;
    width: 52vw;
    margin: 0;
    font-size: clamp(8px, 2.1333vw, 16px);
    line-height: 1.6;
    color: #282623;
    letter-spacing: -2%;
    pointer-events: none;
    font-family: "SelectaTrial", sans-serif;
    font-weight: normal;
    /* font-weight: 400; */
}

        .thumb.active::after , .link{
            display:none;
        }



    }


@media (max-width:760px) {
    #gallery.expanded .thumb {
        height: 21.7333vw;
        opacity: 1;
        width: 24.5333vw;
        max-width: 184px;
    }
        #gallery.expanded .thumbs-window {
        top: auto;
        right: 2vw;
        width: 80vw;
        bottom: 12vw;
        height: 140px;
        position: fixed;
    } 
    .close {
        top: auto;
        bottom: 17vw;
        width: 40px;
        right: auto;
        height: 40px;
        left: 5vw;
    }
        .gallery.expanded .details {
        left: 5vw;
        top: 79vw;
        max-width: 50vw;
    }

}