/* 
   2026-10-27: portfolio.css/common.css에서 목록 스타일만 이식하고 worksPage 내부로 범위를 제한. 
   works 페이지와 works.detail 스타일은 모두 여기.
*/
#worksPage {
   --u: clamp(0.42px, calc(100vw / 1920), 1px);
   --bg: #f8f8f8;
   --ink: #111;
   --text: #555;
   --yellow: #f49b20;
   --orange: #f49b20;
   --blue: #1b4dff;
   --soft: #e1e1e1;
   --pad: max(20px, calc(70 * var(--u)), env(safe-area-inset-left, 0px));
   --ease: cubic-bezier(.16, 1, .3, 1);
   --spring: cubic-bezier(.34, 1.56, .64, 1);
   color-scheme: light;
}

#worksPage .rv {
   opacity: 0;
   transform: translate3d(0, 60px, 0);
   transition: opacity 1.6s ease, transform 2s var(--ease);
   transition-delay: var(--d, 0s)
}

#worksPage .rv.in {
   opacity: 1;
   transform: none
}

#worksPage .ttl2 .w {
   display: inline-block;
   overflow: hidden;
   vertical-align: bottom;
   padding-bottom: .06em
}

#worksPage .ttl2 .w>span {
   display: inline-block;
   transform: translate3d(0, 110%, 0);
   transition: transform 2s var(--ease);
   transition-delay: var(--d, 0s)
}

#worksPage .ttl2.in .w>span {
   transform: none
}

#worksPage .ttl2 {
   font-weight: 700;
   font-size: max(40px, calc(80 * var(--u)));
   font-size: round(max(40px, calc(80 * var(--u))), 1px);
   line-height: 1.3;
   letter-spacing: -.01em;
   color: var(--ink)
}

@keyframes hiveWorksFloat {

   0%,
   100% {
      transform: translateY(0) rotate(0)
   }

   50% {
      transform: translateY(-8%) rotate(8deg)
   }
}

#worksPage .sheet {
   position: relative;
   z-index: 2;
   background: var(--bg);
   border-radius: 80px 80px 0 0;
   /* 2026-10-30: 목록 시트의 뷰포트 진입·이탈 상태에 따라 배경색을 부드럽게 전환. */
   transition: background-color .7s ease
}

/* 스크롤 내리면 다크모드 전환 */
#worksPage .sheet.is-dark {
   background-color: #1c1c1c
}

#worksPage .pl-info,
#worksPage .pl-info * {
   transition: color .7s ease
}

#worksPage .sheet.is-dark .pl-info,
#worksPage .sheet.is-dark .pl-info * {
   color: #fff
}

#worksPage .sheet.is-dark .pl-info p {
   color: #9d9d9d;
}

#worksPage .sheet.is-dark .pl-tags span {
   background-color: #333
}

/* 스크롤 내리면 다크모드 전환 end */

@keyframes hiveWorksGlow {

   0%,
   100% {
      translate: 0 0
   }

   50% {
      translate: calc(46 * var(--u)) calc(-34 * var(--u))
   }
}

@media (max-width:640px) {
   #worksPage .sheet {
      border-radius: 40px 40px 0 0
   }
}

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

   #worksPage .rv,
   #worksPage .ttl2 .w>span {
      opacity: 1 !important;
      transform: none !important;
      filter: none !important
   }
}

#worksPage {
   --spad: max(var(--pad), calc(50vw - 720px))
}

#worksPage .sw {
   width: 100%;
   max-width: 1440px;
   margin: 0 auto
}

#worksPage .shero {
   position: sticky;
   top: 0;
   z-index: 0;
   padding: 100px var(--spad) 0;
   background: #fff
}

#worksPage .sh-veil {
   position: absolute;
   inset: 0;
   z-index: 2;
   background: #f8f8f8;
   opacity: 0;
   pointer-events: none
}

#worksPage .shero-in {
   min-height: max(300px, calc(450 * var(--u)));
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   padding: 30px 0 40px
}

#worksPage .sh-t {
   font-size: max(48px, calc(90 * var(--u)));
   font-size: round(max(48px, calc(90 * var(--u))), 1px);
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: -.03em;
   color: #111
}

#worksPage .sh-t b {
   font-weight: 700;
   color: var(--orange)
}

#worksPage .sh-sub {
   margin-top: 20px;
   display: flex;
   flex-direction: column;
   gap: 10px
}

#worksPage .sh-s1 {
   font-size: max(21px, calc(45 * var(--u)));
   font-size: round(max(21px, calc(45 * var(--u))), 1px);
   font-weight: 500;
   line-height: 1.3;
   letter-spacing: -.05em;
   color: #111
}

#worksPage .sh-s2 {
   font-size: max(15px, calc(20 * var(--u)));
   font-size: round(max(15px, calc(20 * var(--u))), 1px);
   line-height: 1.5;
   letter-spacing: -.05em;
   color: #555
}

@font-face {
   font-family: 'HiveWorksDeco';
   src: url(../fonts/Paperlogy-7Bold.woff2) format('woff2');
   font-weight: 700;
   font-display: block
}

#worksPage .shero.deco {
   overflow-x: clip;
   overflow-y: visible
}

#worksPage .sh-deco {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 0
}

#worksPage .shero.deco .shero-in {
   position: relative;
   z-index: 1
}

#worksPage .sh-big {
   position: absolute;
   left: calc(var(--bx, 800) * var(--u));
   top: calc(100px + 41.5 * var(--u));
   font-family: 'HiveWorksDeco', 'DM Sans', sans-serif;
   font-size: calc(200 * var(--u));
   font-size: round(calc(200 * var(--u)), 1px);
   font-weight: 700;
   line-height: 1.18;
   letter-spacing: 0;
   white-space: nowrap;
   color: #f8f8f8;
   opacity: 0;
   transform: translate3d(calc(80 * var(--u)), 0, 0);
   transition: opacity 1.6s ease .3s, transform 2.4s var(--ease) .3s
}

#worksPage.works-ready .sh-big {
   opacity: 1;
   transform: none
}

#worksPage .sh-g {
   position: absolute;
   max-width: none;
   height: auto;
   opacity: 0;
   transition: opacity 2.4s ease .2s
}

#worksPage.works-ready .sh-g {
   opacity: .4
}

#worksPage .sh-g1 {
   left: calc(-250 * var(--u));
   top: calc(100px - 110 * var(--u));
   width: calc(640 * var(--u));
   animation: hiveWorksGlow 17s ease-in-out infinite
}

#worksPage .sh-cube {
   display: inline-block;
   vertical-align: top;
   width: calc(57 / 90 * 1em);
   margin: calc(52 / 90 * 1em) 0 0 calc(10 / 90 * 1em);
   opacity: 0;
   transform: translate3d(0, 30%, 0) rotate(-25deg) scale(.6);
   transition: opacity 1.2s ease .5s, transform 1.8s cubic-bezier(.3, 1.25, .5, 1) .5s
}

#worksPage .sh-t.in .sh-cube {
   opacity: 1;
   transform: none
}

#worksPage .sh-cube img {
   display: block;
   width: 100%;
   animation: hiveWorksFloat 5.7s ease-in-out 2.4s infinite
}

@media (max-width:900px) {
   #worksPage .sh-big {
      left: auto;
      right: -4%;
      top: 76px;
      font-size: 96px
   }

   #worksPage .sh-g1 {
      width: 360px;
      left: -170px;
      top: 20px
   }
}

@media (max-width:640px) {
   #worksPage .sh-big {
      display: none
   }
}

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

   #worksPage .sh-big,
   #worksPage .sh-cube {
      opacity: 1 !important;
      transform: none !important
   }

   #worksPage.works-ready .sh-g,
   #worksPage .sh-g {
      opacity: .4 !important
   }
}

#worksPage .chip {
   position: relative;
   display: inline-flex;
   align-items: center;
   height: 60px;
   padding: 0 40px;
   border-radius: 50px;
   background: #fff;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
   font-size: 20px;
   font-weight: 500;
   line-height: 1.3;
   letter-spacing: -.05em;
   color: #111;
   white-space: nowrap;
   cursor: pointer;
   transition: background .45s, color .45s, box-shadow .45s
}

#worksPage .chip:hover {
   box-shadow: inset 0 0 0 1px #111
}

#worksPage .chip.on,
#worksPage input:checked+.chip {
   background: #111;
   color: #fff;
   box-shadow: inset 0 0 0 1px #111
}

#worksPage .chip:focus-visible,
#worksPage input:focus-visible+.chip {
   outline: 2px solid var(--orange);
   outline-offset: 3px
}

@media (max-width:900px) {
   #worksPage .chip {
      height: 50px;
      padding: 0 26px;
      font-size: 17px
   }
}

@media (max-width:640px) {
   #worksPage .shero-in {
      min-height: 260px;
      padding: 20px 0 36px
   }

   #worksPage .chip {
      flex: none;
      height: 44px;
      padding: 0 20px;
      font-size: 15px
   }
}

#worksPage .pl {
   padding: calc(80 * var(--u) + 20px) var(--spad) calc(80 * var(--u) + 10px)
}

#worksPage .pl .tabs {
   margin-bottom: calc(80 * var(--u) + 10px)
}

#worksPage .tabs {
   display: flex;
   justify-content: center
}

/* 2026-10-30: 탭 등장 완료 후에도 변환·쌓임 기준을 유지해 인디케이터의 렌더링 전환 방지. */
#worksPage .tabs.rv.in {
   transform: translate3d(0, 0, 0)
}

#worksPage .tabs-in {
   position: relative;
   isolation: isolate;
   display: flex;
   gap: 10px;
   padding: 5px;
   border-radius: 50px;
   background: #fff;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08)
}

#worksPage .tabs-ind {
   position: absolute;
   z-index: 0;
   left: 0;
   top: 5px;
   bottom: 5px;
   width: 0;
   border-radius: 50px;
   background: linear-gradient(135deg, rgba(232, 145, 19, .9) 0%, rgba(233, 126, 27, .9) 49.519%, rgba(235, 107, 36, .9) 100%);
   /* 2026-10-30: 별도 opacity 전환 없이 부모 탭과 함께 등장하고 초기 너비는 JS에서 먼저 확정. */
   pointer-events: none
}

#worksPage .tabs-ind.go {
   transition: transform .75s var(--ease), width .75s var(--ease)
}

#worksPage .tabs .chip,
#worksPage .tabs .chip:hover {
   position: relative;
   z-index: 1;
   background: transparent;
   box-shadow: none;
   transition: color .5s ease
}

#worksPage .tabs .chip:hover {
   color: var(--orange)
}

#worksPage .tabs .chip.on,
#worksPage .tabs .chip.on:hover {
   background: transparent;
   color: #fff;
   box-shadow: none;
   cursor: default
}

#worksPage .tabs:not(.js) .chip.on {
   background: linear-gradient(135deg, rgba(232, 145, 19, .9), rgba(235, 107, 36, .9))
}

/* 2026-10-30: 탭 축소·왼쪽 정렬·가로 스크롤 구간을 1100px 이하로 확대. */
@media (max-width:1100px) {

   #worksPage .tabs {
      justify-content: flex-start;
      overflow-x: auto;
      margin: 0 calc(-1 * var(--spad));
      padding: 2px var(--spad);
      scrollbar-width: none
   }

   #worksPage .tabs::-webkit-scrollbar {
      display: none
   }

   #worksPage .tabs-in {
      flex: none;
      gap: 6px;
      padding: 4px
   }

   #worksPage .tabs-ind {
      top: 4px;
      bottom: 4px
   }

   #worksPage .tabs .chip {
      flex: none;
      height: 42px;
      padding: 0 20px;
      font-size: 15px
   }
}

@media (max-width: 680px) {
   #worksPage .tabs-in {
      border-radius: unset;
      background: transparent;
      box-shadow: unset;
   }
}

#worksPage .pl-grid {
   display: flex;
   align-items: flex-start;
   gap: calc(40 * var(--u) + 4px)
}

#worksPage .pl-col {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: calc(80 * var(--u) + 8px)
}

#worksPage .pl-col:nth-child(2) {
   padding-top: calc(80 * var(--u))
}

#worksPage .pl-col:nth-child(3) {
   padding-top: calc(160 * var(--u))
}

#worksPage .pl-card {
   display: block;
   opacity: 0;
   transform: translate3d(0, 50px, 0);
   transition: opacity 1.2s ease, transform 1.6s var(--ease);
   transition-delay: calc(var(--i, 0) * .1s)
}

#worksPage .pl-card.in {
   opacity: 1;
   transform: none
}

#worksPage .pl-img {
   position: relative;
   aspect-ratio: 453/560;
   border-radius: 20px;
   overflow: hidden;
   background: #e9e9e9;
   isolation: isolate
}

#worksPage .pl-img::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
   pointer-events: none
}

#worksPage .pl-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 1.4s var(--ease)
}

#worksPage .pl-card:hover .pl-img img {
   transform: scale(1.035)
}

#worksPage .pl-hov {
   position: absolute;
   inset: 0;
   z-index: 1;
   display: none;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
   background: rgba(0, 0, 0, .4);
   color: #fff;
   opacity: 0;
   transition: opacity .6s ease
}

#worksPage .pl-hov i {
   display: grid;
   place-items: center;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: linear-gradient(135deg, rgba(232, 145, 19, .9) 0%, rgba(233, 126, 27, .9) 49.519%, rgba(235, 107, 36, .9) 100%);
   transform: scale(.8);
   transition: transform .9s var(--ease)
}

#worksPage .pl-hov svg {
   width: 24px;
   height: 24px
}

#worksPage .pl-hov b {
   font-size: 20px;
   font-weight: 600;
   line-height: 1.3;
   letter-spacing: -.05em;
   transform: translate3d(0, 8px, 0);
   transition: transform .9s var(--ease)
}

@media (hover:hover) and (pointer:fine) {
   #worksPage .pl-hov {
      display: flex
   }

   #worksPage .pl-card:hover .pl-hov,
   #worksPage .pl-card:focus-visible .pl-hov {
      opacity: 1
   }

   #worksPage .pl-card:hover .pl-hov i,
   #worksPage .pl-card:focus-visible .pl-hov i,
   #worksPage .pl-card:hover .pl-hov b,
   #worksPage .pl-card:focus-visible .pl-hov b {
      transform: none
   }
}

#worksPage .pl-info {
   margin-top: 20px
}

#worksPage .pl-yr {
   font-size: 15px;
   line-height: 1.85;
   letter-spacing: -.03em;
   color: rgba(0, 0, 0, .5)
}

#worksPage .pl-ttl {
   margin-top: 10px;
   font-size: max(20px, calc(26 * var(--u)));
   font-size: round(max(20px, calc(26 * var(--u))), 1px);
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: -.05em;
   color: #000
}

#worksPage .pl-ds {
   margin-top: 10px;
   font-size: 15px;
   line-height: 1.3;
   letter-spacing: -.05em;
   color: rgba(0, 0, 0, .5)
}

#worksPage .pl-tags {
   margin-top: 18px;
   display: flex;
   flex-wrap: wrap;
   gap: 5px
}

#worksPage .pl-tags span {
   padding: 5px 20px;
   border-radius: 10px;
   background: #e8e8e8;
   font-size: 14px;
   font-weight: 500;
   line-height: 1.3;
   letter-spacing: -.05em;
   color: #555;
   transition: color .7s ease, background-color .7s ease
}

@media (max-width:900px) {
   #worksPage .pl-col:nth-child(2) {
      padding-top: 60px
   }

   #worksPage .pl-col {
      gap: 56px
   }
}

@media (max-width:640px) {
   #worksPage .pl-col {
      gap: 44px
   }

   #worksPage .pl-tags span {
      padding: 4px 14px;
      font-size: 13px
   }
}

@media (prefers-reduced-motion:reduce) {
   #worksPage .pl-card {
      opacity: 1 !important;
      transform: none !important
   }
}

/* 2026-10-27: 공통 레이아웃 및 기존 메인 애니메이션과 충돌하지 않도록 페이지 전용 상태 사용. */
#worksPage {
   width: 100%;
   background: #fff;
   color: #111;
   word-break: keep-all;
   overflow-x: clip
}

#worksPage .sh-big {
   font-family: 'HiveWorksDeco', 'DM Sans', sans-serif !important
}

#worksPage .sh-t {
   display: block
}

#worksPage .pl-card {
   color: inherit;
   text-decoration: none
}

#worksPage .pl-card:focus-visible {
   outline: 2px solid var(--orange);
   outline-offset: 6px;
   border-radius: 20px
}

#worksPage .pl-status {
   text-align: center;
   padding: 28px 20px;
   color: #646a7a;
   font-size: 16px;
   line-height: 1.6
}

/* 2026-10-27: 페이지 번호 스타일을 제거하고 무한 스크롤 감지·상태 표시를 목록 하단에 배치. */
#worksPage .pl-sentinel {
   height: 1px;
   margin-top: 32px;
   pointer-events: none
}

#worksPage .pl-status[hidden],
#worksPage .pl-retry[hidden] {
   display: none
}

#worksPage .pl-retry {
   display: block;
   margin: 16px auto 0;
   padding: 10px 24px;
   border: 1px solid #111;
   border-radius: 30px;
   background: #111;
   color: #fff;
   font-size: 15px
}

#worksPage .pl-retry:focus-visible {
   outline: 2px solid var(--orange);
   outline-offset: 3px
}

#worksPage .pl-no-script {
   padding: 24px;
   text-align: center;
   color: #646a7a
}

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

   #worksPage *,
   #worksPage *::before,
   #worksPage *::after {
      animation: none !important;
      transition-duration: .01ms !important;
      transition-delay: 0s !important
   }
}

/* ==================== 포폴 상세페이지 ==================== */
/* 2026-10-28: detail.css/portfolio-common.css의 상세 스타일을 worksDetailPage 내부에 적용. */
#worksDetailPage {
   --u: clamp(0.42px, calc(100vw / 1920), 1px);
   --bg: #f8f8f8;
   --ink: #111;
   --text: #555;
   --yellow: #f49b20;
   --orange: #f49b20;
   --blue: #1b4dff;
   --soft: #e1e1e1;
   --pad: max(20px, calc(70 * var(--u)), env(safe-area-inset-left, 0px));
   --ease: cubic-bezier(.16, 1, .3, 1);
   --spring: cubic-bezier(.34, 1.56, .64, 1);
   color-scheme: light;
}

#worksDetailPage .arw {
   display: block;
   flex: none
}

#worksDetailPage .rv {
   opacity: 0;
   transform: translate3d(0, 60px, 0);
   transition: opacity 1.6s ease, transform 2s var(--ease);
   transition-delay: var(--d, 0s)
}

#worksDetailPage .rv.in {
   opacity: 1;
   transform: none
}

#worksDetailPage .pill {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   width: 240px;
   height: 60px;
   padding: 0 13px 0 30px;
   border-radius: 50px;
   background: #111;
   color: #fff;
   font-size: 20px;
   font-weight: 600;
   letter-spacing: -.05em;
   line-height: 1.3;
   white-space: nowrap;
   transition: background .4s, color .4s, box-shadow .4s
}

#worksDetailPage .pill .arw {
   width: 35px;
   height: 35px;
   transition: transform .7s var(--spring)
}

#worksDetailPage .pill:hover {
   background: #000
}

#worksDetailPage .pill:hover .arw {
   transform: rotate(45deg)
}

@keyframes hiveWorksDetailGlow {

   0%,
   100% {
      translate: 0 0
   }

   50% {
      translate: calc(46 * var(--u)) calc(-34 * var(--u))
   }
}

@media (prefers-reduced-motion:reduce) {
   #worksDetailPage .rv {
      opacity: 1 !important;
      transform: none !important;
      filter: none !important
   }
}

#worksDetailPage {
   --spad: max(var(--pad), calc(50vw - 720px))
}

#worksDetailPage .sw {
   width: 100%;
   max-width: 1440px;
   margin: 0 auto
}

#worksDetailPage .pill.sbtn {
   width: 360px;
   height: 60px;
   padding: 0 13px 0 20px;
   font-size: 16px;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2)
}

#worksDetailPage .sh-g {
   position: absolute;
   max-width: none;
   height: auto;
   opacity: 0;
   transition: opacity 2.4s ease .2s
}

#worksDetailPage.detail-ready .sh-g {
   opacity: .4
}

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

   #worksDetailPage.detail-ready .sh-g,
   #worksDetailPage .sh-g {
      opacity: .4 !important
   }
}

#worksDetailPage .pill.sbtn.w240 {
   width: 240px
}

@media (max-width:640px) {
   #worksDetailPage .pill.sbtn {
      width: 100%
   }
}

#worksDetailPage .dt {
   position: relative;
   padding: calc(100px + 180 * var(--u)) var(--spad) 0;
   overflow-x: clip
}

#worksDetailPage .dt-deco {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 0
}

#worksDetailPage .dt-g1 {
   right: calc(-20 * var(--u));
   top: calc(-160 * var(--u));
   width: calc(760 * var(--u));
   animation: hiveWorksDetailGlow 19s ease-in-out infinite
}

#worksDetailPage .dt-g2 {
   left: calc(-260 * var(--u));
   top: calc(160 * var(--u));
   width: calc(620 * var(--u));
   animation: hiveWorksDetailGlow 17s ease-in-out -6s infinite reverse
}

#worksDetailPage .dt-in {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: calc(80 * var(--u) + 10px)
}

#worksDetailPage .dt-head {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 20px
}

#worksDetailPage .dt-hr {
   display: block;
   height: 1px;
   background: rgba(0, 0, 0, .08);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 1.8s var(--ease) .2s
}

#worksDetailPage.detail-ready .dt-hr {
   transform: none
}

#worksDetailPage .dt-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 16px 20px;
   min-height: 60px
}

#worksDetailPage .dt-tit {
   display: flex;
   flex-direction: column;
   gap: 12px;
   min-width: 0
}

#worksDetailPage .dt-cat {
   font-size: max(15px, calc(20 * var(--u)));
   font-size: round(max(15px, calc(20 * var(--u))), 1px);
   font-weight: 600;
   line-height: 1.5;
   letter-spacing: -.04em;
   color: var(--orange)
}

#worksDetailPage .dt-sub {
   margin-top: 8px;
   font-size: max(16px, calc(22 * var(--u)));
   font-size: round(max(16px, calc(22 * var(--u))), 1px);
   line-height: 1.5;
   letter-spacing: -.05em;
   color: #555
}

#worksDetailPage .dt-t {
   font-size: max(36px, calc(80 * var(--u)));
   font-size: round(max(36px, calc(80 * var(--u))), 1px);
   font-weight: 700;
   line-height: 1.3;
   letter-spacing: -.05em;
   color: #111
}

#worksDetailPage .dt-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 6px 30px;
   font-size: max(16px, calc(22 * var(--u)));
   font-size: round(max(16px, calc(22 * var(--u))), 1px);
   line-height: 1.5;
   color: #555
}

#worksDetailPage .dt-meta>div {
   display: flex;
   gap: 18px
}

#worksDetailPage .dt-meta dt {
   letter-spacing: -.03em;
   color: #797e8d
}

#worksDetailPage .dt-meta dd {
   letter-spacing: -.05em;
   color: #111
}

#worksDetailPage .dt-pin {
   position: relative;
   flex: none;
   width: 100vw;
   height: calc(100vh + 80vh);
   height: calc(100svh + 80svh)
}

#worksDetailPage .dt-stick {
   position: sticky;
   top: 0;
   height: 100vh;
   height: 100svh;
   overflow: hidden
}

#worksDetailPage .dt-visual {
   position: absolute;
   left: 21%;
   top: 0;
   width: 58%;
   height: 80%;
   border-radius: 30px;
   overflow: hidden;
   background: #e9e9e9;
   isolation: isolate;
   opacity: 0;
   transition: opacity 1.4s ease .3s
}

#worksDetailPage.detail-ready .dt-visual {
   opacity: 1
}

/* 2026-10-29: 썸네일을 고정된 미리보기 영역으로 분리해 시안과 0.55초 동안 페이드 전환. */
#worksDetailPage .dt-preview {
   position: absolute;
   inset: 0;
   display: flex;
   justify-content: center;
   opacity: 1;
   visibility: visible;
   pointer-events: none;
   transition: opacity .55s ease, visibility 0s;
}

#worksDetailPage .dt-scroll {
   position: absolute;
   inset: 0;
   overflow: hidden;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity .55s ease, visibility 0s .55s;
   overscroll-behavior: contain;
   scrollbar-width: thin;
   scrollbar-color: rgba(0, 0, 0, .3) transparent;
   outline: none
}

#worksDetailPage .dt-preview .bg {
   position: absolute;
   inset: -60px;
   width: calc(100% + 120px);
   height: calc(100% + 120px);
   max-width: none;
   object-fit: cover;
   filter: blur(40px) saturate(1.1);
   opacity: .75
}

#worksDetailPage .dt-preview .fg {
   position: relative;
   z-index: 1;
   height: 100%;
   width: auto;
   margin: 0 auto;
   object-fit: contain
}

#worksDetailPage .dt-scroll .full-img {
   display: block;
   width: 100%;
   height: auto;
   max-width: none;
}

#worksDetailPage .dt-visual.full.on .dt-scroll {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transition: opacity .55s ease, visibility 0s;
}

#worksDetailPage .dt-visual.full.on .dt-preview {
   opacity: 0;
   visibility: hidden;
   transition: opacity .55s ease, visibility 0s .55s;
}

#worksDetailPage .dt-visual.on .dt-scroll {
   overflow-y: auto
}

#worksDetailPage .dt-dim {
   position: absolute;
   inset: 0;
   z-index: 2;
   background: rgba(0, 0, 0, .4);
   pointer-events: none;
   transition: opacity .7s ease
}

#worksDetailPage .dt-visual:not(.full) .dt-dim {
   opacity: 0
}

#worksDetailPage .dt-visual.on .dt-dim {
   opacity: 0
}

#worksDetailPage .dt-click {
   position: absolute;
   left: 0;
   top: 0;
   z-index: 3;
   width: 0;
   height: 0;
   pointer-events: none;
   transition: transform .45s cubic-bezier(.2, .8, .2, 1)
}

#worksDetailPage .dt-click span {
   position: absolute;
   left: -55px;
   top: -55px;
   width: 110px;
   height: 110px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: linear-gradient(135deg, rgba(232, 145, 19, .92), rgba(233, 126, 27, .92) 49.5%, rgba(235, 107, 36, .92));
   color: #fff;
   font-size: 20px;
   font-weight: 600;
   letter-spacing: -.02em;
   opacity: 0;
   transform: scale(.4);
   transition: opacity .45s ease, transform .6s var(--ease)
}

#worksDetailPage .dt-visual.full:not(.on) .dt-click span {
   opacity: 1;
   transform: none
}

#worksDetailPage .dt-visual.full:not(.on) {
   cursor: pointer
}

#worksDetailPage .dt-close {
   position: absolute;
   right: 20px;
   top: 20px;
   z-index: 4;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: #111;
   color: #fff;
   opacity: 0;
   transform: scale(.6);
   pointer-events: none;
   transition: opacity .4s, transform .6s var(--ease), background .4s
}

#worksDetailPage .dt-close svg {
   width: 18px;
   height: 18px
}

/* 2026-10-29: 닫힌 시안의 닫기 버튼은 display:grid 규칙보다 hidden 속성을 우선. */
#worksDetailPage .dt-close[hidden] {
   display: none;
}

#worksDetailPage .dt-close:hover {
   background: var(--orange)
}

#worksDetailPage .dt-visual.on .dt-close {
   opacity: 1;
   transform: none;
   pointer-events: auto
}

#worksDetailPage .dt-tip {
   position: absolute;
   left: 50%;
   bottom: 20px;
   z-index: 4;
   transform: translate(-50%, 10px);
   padding: 10px 18px;
   border-radius: 50px;
   background: rgba(17, 17, 17, .8);
   color: #fff;
   font-size: 14px;
   font-weight: 500;
   letter-spacing: -.03em;
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition: opacity .5s, transform .7s var(--ease)
}

#worksDetailPage .dt-visual.on.tip .dt-tip {
   opacity: 1;
   transform: translate(-50%, 0)
}

@media (hover:none) {
   #worksDetailPage .dt-visual.full:not(.on) .dt-click span {
      transform: scale(.8)
   }
}

#worksDetailPage .dt-sum {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
   text-align: center
}

#worksDetailPage .dt-sum-t {
   font-size: max(28px, calc(45 * var(--u)));
   font-size: round(max(28px, calc(45 * var(--u))), 1px);
   font-weight: 700;
   line-height: 1.5;
   letter-spacing: -.03em;
   color: #111
}

#worksDetailPage .dt-desc {
   max-width: 1240px;
   white-space: pre-line;
   font-size: max(15px, calc(24 * var(--u)));
   font-size: round(max(15px, calc(24 * var(--u))), 1px);
   line-height: 1.5;
   letter-spacing: -.05em;
   color: #555
}

@media (max-width:900px) {
   #worksDetailPage .dt-desc {
      white-space: normal
   }
}

#worksDetailPage .dt-body {
   padding: calc(70 * var(--u) + 30px) var(--spad) calc(80 * var(--u) + 10px)
}

#worksDetailPage .dt-long {
   min-height: max(420px, calc(720 * var(--u)));
   border-radius: 20px;
   background: #f8f8f8;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   padding: 40px 24px;
   text-align: center
}

#worksDetailPage .dt-long .t {
   font-size: max(20px, calc(28 * var(--u)));
   font-size: round(max(20px, calc(28 * var(--u))), 1px);
   font-weight: 600;
   letter-spacing: -.05em;
   color: #111
}

#worksDetailPage .dt-long .d {
   font-size: 15px;
   line-height: 1.7;
   letter-spacing: -.03em;
   color: #797e8d
}

#worksDetailPage .dt-long.img {
   min-height: 0;
   padding: 0;
   border-radius: 0;
   background: none;
   box-shadow: none
}

#worksDetailPage .dt-long.img img {
   display: block;
   width: 100%;
   height: auto
}

#worksDetailPage .dt-nav {
   margin-top: calc(80 * var(--u) + 10px);
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 20px;
   padding: calc(40 * var(--u) + 10px) 0;
   border-top: 1px solid rgba(0, 0, 0, .08);
   border-bottom: 1px solid rgba(0, 0, 0, .08)
}

#worksDetailPage .dt-pn {
   display: flex;
   flex-direction: column;
   gap: 10px;
   min-width: 0
}

#worksDetailPage .dt-pn.next {
   align-items: flex-end;
   text-align: right
}

#worksDetailPage .dt-pn .k {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   font-size: 16px;
   font-weight: 600;
   letter-spacing: -.03em;
   color: #797e8d;
   transition: color .4s
}

#worksDetailPage .dt-pn .k svg {
   width: 28px;
   height: 28px;
   margin: -6px;
   transition: transform .6s var(--ease)
}

#worksDetailPage .dt-pn .t {
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: max(20px, calc(32 * var(--u)));
   font-size: round(max(20px, calc(32 * var(--u))), 1px);
   font-weight: 600;
   line-height: 1.3;
   letter-spacing: -.05em;
   color: #111;
   transition: color .4s
}

#worksDetailPage .dt-pn:hover .k,
#worksDetailPage .dt-pn:hover .t {
   color: var(--orange)
}

#worksDetailPage .dt-pn.prev:hover .k svg {
   transform: translateX(-4px)
}

#worksDetailPage .dt-pn.next:hover .k svg {
   transform: translateX(4px)
}

#worksDetailPage .dt-list {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   font-size: 16px;
   font-weight: 600;
   letter-spacing: -.03em;
   color: #111
}

#worksDetailPage .dt-list .ic {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: #111;
   display: grid;
   grid-template-columns: repeat(2, 10px);
   gap: 6px;
   place-content: center;
   transition: background .4s, transform .8s var(--ease)
}

#worksDetailPage .dt-list .ic i {
   width: 10px;
   height: 10px;
   border-radius: 3px;
   background: #fff
}

#worksDetailPage .dt-list:hover .ic {
   background: linear-gradient(135deg, rgba(232, 145, 19, .9), rgba(233, 126, 27, .9) 49.5%, rgba(235, 107, 36, .9));
   transform: rotate(45deg)
}


@media (max-width: 1100px) {

   /* #worksDetailPage .pill.sbtn.w240 {width: 200px;}
   #worksDetailPage .pill.sbtn {height: 50px; font-size: 14px;}
   #worksDetailPage .pill .arw {width: 30px; height: 30px;} */


   #worksDetailPage .dt-in {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
   }
   #worksDetailPage .dt-head {grid-row: 1;}
   #worksDetailPage .dt-pin {grid-row: 3;}
   #worksDetailPage .dt-summary {grid-row: 2; margin-top: 40px;}
}

@media (max-width:900px) {
   #worksDetailPage {
      --pad: 20px;
   }

   #worksDetailPage .dt-g1 {
      width: 420px;
      right: -160px;
      top: -60px
   }

   #worksDetailPage .dt-g2 {
      width: 360px;
      left: -180px;
      top: 200px
   }
}

@media (max-width:640px) {
   #worksDetailPage .dt {
      padding-top: 130px
   }

   #worksDetailPage .dt-nav {
      grid-template-columns: 1fr 1fr;
      row-gap: 24px
   }

   #worksDetailPage .dt-list {
      grid-column: 1 / -1;
      grid-row: 2;
      flex-direction: row;
      justify-content: center
   }

   #worksDetailPage .dt-list .ic {
      width: 52px;
      height: 52px;
      grid-template-columns: repeat(2, 8px);
      gap: 4px
   }

   #worksDetailPage .dt-list .ic i {
      width: 8px;
      height: 8px;
      border-radius: 2px
   }

   #worksDetailPage .dt-pn .t {
      font-size: 18px;
      white-space: normal
   }
}

#worksDetailPage {
   width: 100%;
   overflow-x: clip;
   background: #fff;
   color: #111;
   word-break: keep-all;
   --spad: max(var(--pad), calc(50vw - 720px))
}

#worksDetailPage .dt-site-wrap {
   margin-left: auto
}

#worksDetailPage .dt-pn.is-disabled {
   opacity: .4;
   cursor: default
}

#worksDetailPage .dt-pn.is-disabled .t {
   font-size: 16px
}

#worksDetailPage .dt-unavailable {
   min-height: 65vh;
   padding: 180px var(--spad) 100px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 24px;
   text-align: center
}

#worksDetailPage .dt-unavailable h1 {
   font-weight: 700;
   font-size: clamp(24px, 4vw, 48px)
}

#worksDetailPage .dt-unavailable .pill {
   justify-content: center
}

#worksDetailPage .dt-image-error {
   display: none
}

#worksDetailPage .dt-visual.image-error .dt-preview,
#worksDetailPage .dt-visual.image-error .dt-scroll {
   display: none
}

#worksDetailPage .dt-visual.image-error .dt-image-error {
   display: grid;
   place-items: center;
   width: 100%;
   height: 100%;
   padding: 24px;
   color: #646a7a;
   text-align: center
}

#worksDetailPage .dt-open {
   position: absolute;
   inset: 0;
   z-index: 3;
   border-radius: inherit;
   background: transparent
}

#worksDetailPage .dt-open[hidden] {
   display: none
}

#worksDetailPage .dt-open:focus-visible {
   outline: 3px solid var(--orange);
   outline-offset: -5px
}

#worksDetailPage .dt-scroll:focus-visible {
   outline: 2px solid var(--orange);
   outline-offset: -3px
}

/* 2026-10-30: 1100px 이하에서는 pin·확대·클릭 안내 없이 전체 시안을 문서 흐름으로 표시하고 없으면 미리보기 사용. */
@media (max-width:1100px) {
   /* 2026-10-30: 자식별 등장 효과를 제거하고 dt-pin 전체에 dt-long과 같은 in 효과 적용. */
   #worksDetailPage .dt-pin {
      width: 100%;
      height: auto;
      opacity: 0;
      transform: translate3d(0, 60px, 0);
      transition: opacity 1.6s ease, transform 2s var(--ease)
   }
   #worksDetailPage .dt-pin.in {opacity: 1; transform: none;}
   #worksDetailPage .dt-stick {position: static; width: 100%; height: auto; overflow: visible;}
   #worksDetailPage .dt-visual {
      position: relative;
      inset: auto;
      width: 100%;
      height: auto;
      border-radius: 20px;
      opacity: 1;
      transition: none
   }
   #worksDetailPage .dt-visual,
   #worksDetailPage .dt-visual.full:not(.on) {cursor: auto;}
   #worksDetailPage .dt-preview {
      position: relative;
      inset: auto;
      opacity: 1;
      visibility: visible;
      transition: none
   }
   #worksDetailPage .dt-preview .bg {display: none;}
   #worksDetailPage .dt-preview .fg {width: 100%; height: auto;}
   #worksDetailPage .dt-scroll {
      display: none;
      position: relative;
      inset: auto;
      overflow: visible;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      overscroll-behavior: auto;
      transition: none
   }
   #worksDetailPage .dt-visual.full .dt-scroll {display: block; border: 1px solid #eee;}
   #worksDetailPage .dt-visual.full .dt-preview {display: none;}
   #worksDetailPage .dt-dim,
   #worksDetailPage .dt-click,
   #worksDetailPage .dt-open,
   #worksDetailPage .dt-close,
   #worksDetailPage .dt-tip {display: none;}
}

@media (max-width:1100px) and (prefers-reduced-motion:reduce) {
   #worksDetailPage .dt-pin {opacity: 1; transform: none;}
}

#worksDetailPage .dt-list:focus-visible,
#worksDetailPage a.dt-pn:focus-visible {
   outline: 2px solid var(--orange);
   outline-offset: 5px;
   border-radius: 12px
}

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

   #worksDetailPage *,
   #worksDetailPage *::before,
   #worksDetailPage *::after {
      animation: none !important;
      transition-duration: .01ms !important;
      transition-delay: 0s !important
   }

   #worksDetailPage .rv {
      opacity: 1 !important;
      transform: none !important
   }
}


#worksDetailPage .dt-summary {
   text-align: center;
}

#worksDetailPage .dt-summary h3 {
   font-size: clamp(35px, 2.34vw, 45px);
   font-weight: 700;
   line-height: 1.5;
   color: var(--ink);
   margin-bottom: 10px;
}

/* 2026-10-29: 회사소개 chars와 같은 글자 마스킹·이동 효과를 요약 제목의 in 상태에 연결. */
#worksDetailPage .dt-summary .chars .ch {
   display: inline-block;
   overflow: hidden;
   vertical-align: bottom;
   padding-bottom: .08em;
   margin-bottom: -.08em;
}

#worksDetailPage .dt-summary .chars .ch>i {
   display: inline-block;
   font-style: normal;
   font-weight: inherit;
   transform: translate3d(0, 125%, 0) rotate(6deg);
   transform-origin: 0 100%;
   transition: transform 1.5s var(--ease);
   transition-delay: calc(var(--c, 0) * .045s);
   letter-spacing: -3%;
}

#worksDetailPage .dt-summary .chars.in .ch>i {
   transform: none;
}

@media (prefers-reduced-motion:reduce) {
   #worksDetailPage .dt-summary .chars .ch>i {
      transform: none !important;
      transition: none !important;
   }
}

#worksDetailPage .dt-summary p {
   font-size: clamp(16px, 1.25vw, 24px);
   font-weight: 400;
   line-height: 1.5;
   color: var(--text);
}

/* 2026-10-30: 첫 렌더링 준비 중에는 in 상태보다 숨김 상태를 우선해 초기 transition 생략 방지. */
#worksDetailPage .dt-summary p.rv.is-reveal-preparing {
   opacity: 0;
   transform: translate3d(0, 60px, 0)
}