:root{--ink:#0b0b0b;--panel:#101010;--paper:#111111;--paper2:#181818;--primary:#f2f0eb;--muted:#777771;--soft:#a8a7a1;--stroke:#2c2c2a;--accent:#d5d2c8;--sidebar-width:262px;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--primary);font-family:Arial,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #f0deac;outline-offset:4px}::selection{background:#e6e0cf;color:#0b0b0b}img{max-width:100%;display:block}body.no-scroll{overflow:hidden}[hidden]{display:none!important}
.site-shell{min-height:100vh}.sidebar{width:var(--sidebar-width);position:fixed;inset:0 auto 0 0;z-index:20;background:#080808;border-right:1px solid #101010;display:flex;flex-direction:column;padding:39px 26px 25px;overflow-y:auto;scrollbar-width:thin}.side-top{display:flex;flex-direction:column;gap:20px}.identity{display:flex;align-items:flex-start;gap:15px;width:max-content;max-width:100%}.identity-symbol{width:28px;height:28px;display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:5px;transform:rotate(-1deg)}.identity-symbol i{display:block;background:#eeece7}.identity-symbol i:nth-child(2){opacity:.6}.identity-symbol i:nth-child(3){opacity:.8}.identity-text{font-size:24px;font-weight:800;line-height:.85;letter-spacing:-1.5px}.identity-period{color:#7d7c75}.side-descriptor{font-size:9px;line-height:1.6;color:#666760;letter-spacing:1.6px;margin:2px 0 0 43px}.side-content{margin-top:72px}.side-section-heading{display:flex;align-items:center;gap:12px}.side-index{font-size:10px;letter-spacing:1.3px;color:#777}.side-section-line{height:1px;background:#333;flex:1}.primary-nav{display:flex;flex-direction:column;margin-top:23px}.nav-link{display:flex;align-items:baseline;justify-content:space-between;padding:10px 0;color:#888;font-size:23px;letter-spacing:-.85px;font-weight:500;transition:color .2s}.nav-link:hover,.nav-link.active{color:#f6f5f1}.nav-index,.nav-arrow{font-size:12px;color:#92918a;letter-spacing:0}.nav-arrow{transition:transform .25s}.nav-link:hover .nav-arrow{transform:translate(3px,-3px)}.filter-panel{margin-top:33px;border-top:1px solid var(--stroke);padding-top:25px}.filter-header{display:flex;align-items:center;justify-content:space-between}.filter-header h2{font-size:16px;font-weight:500;margin:0;letter-spacing:-.35px}.text-button{border:0;background:none;padding:4px;color:#777;font-size:9px;letter-spacing:.6px}.text-button:hover{color:white}.filter-caption{font-size:9px;letter-spacing:1.5px;color:#696964;margin:26px 0 18px}.filter-options{display:flex;flex-direction:column;gap:15px}.filter-option{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;color:#9b9b97;font-size:12px;transition:color .15s}.filter-option:hover{color:#fff}.filter-option input{position:absolute;opacity:0;pointer-events:none}.filter-option .filter-check{height:13px;width:13px;border:1px solid #777;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative}.filter-option input:checked + .filter-check{background:#f3f0e9;border-color:#f3f0e9}.filter-option input:checked + .filter-check::after{content:"";width:6px;height:3px;border:solid #0a0a0a;border-width:0 0 1.5px 1.5px;transform:translateY(-1px) rotate(-45deg)}.filter-option input:focus-visible+.filter-check{outline:2px solid white;outline-offset:3px}.filter-text{flex:1}.filter-number{font-size:10px;color:#585853}.filter-footer{display:flex;justify-content:space-between;border-top:1px solid var(--stroke);margin-top:24px;padding-top:15px;font-size:10px;letter-spacing:.8px;color:#777}.filter-footer-icon{font-size:14px}.side-bottom{margin-top:auto;padding-top:70px}.side-bottom>p{margin:0 0 15px;font-size:19px;font-weight:500;letter-spacing:-.5px;line-height:1.24}.side-cta{display:flex;align-items:center;justify-content:space-between;padding:14px 0 12px;border-top:1px solid #555;border-bottom:1px solid #555;font-size:11px;letter-spacing:1px}.side-cta span{font-size:17px}.side-bottom-meta{display:flex;justify-content:space-between;font-size:9px;color:#666;letter-spacing:.8px;padding-top:28px}
.main{margin-left:var(--sidebar-width);min-height:100vh}.view{display:none}.view.active-view{display:block}.page-topbar{padding:36px 38px 0;display:flex;align-items:center;justify-content:space-between;color:#74746e;gap:16px}.eyebrow{font-size:9px;letter-spacing:1.25px;font-weight:600}.page-intro{padding:79px 39px 59px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px}.intro-kicker{font-size:10px;letter-spacing:1.45px;color:#aaa9a2;display:flex;align-items:center;gap:10px}.kicker-dot{height:5px;width:5px;border-radius:50%;background:#b8bb99}.page-intro h1{margin:20px 0 0;font-size:clamp(70px,8.2vw,142px);line-height:.79;font-weight:500;letter-spacing:-.09em}.page-intro h1 em,.info-hero h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.085em}.intro-side{width:200px;flex-shrink:0}.intro-count{display:flex;align-items:flex-start;gap:13px;padding-bottom:23px;border-bottom:1px solid #444}.intro-count>span:first-child{font-size:44px;line-height:1;letter-spacing:-2px}.intro-count>span:last-child{font-size:9px;line-height:1.6;letter-spacing:.8px;color:#8d8d87;padding-top:7px}.intro-side p{margin:18px 0 0;font-size:11px;color:#96958e;line-height:1.65}.gallery-top{padding:10px 24px 18px;margin:0 16px;border-top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;font-weight:500;letter-spacing:1px}.gallery-left{display:flex;align-items:center;gap:12px}.gallery-separator{color:#5c5c58}.gallery-left #gallery-category-label{color:#85857f}.gallery-right{color:#666}
.work-grid{padding:0 16px 16px;columns:3;column-gap:16px}.work-card{break-inside:avoid;position:relative;overflow:hidden;background:transparent;margin:0 0 16px;cursor:pointer;isolation:isolate;border:0;box-shadow:none}.card-media{position:relative;overflow:hidden;background:#000;aspect-ratio:var(--ratio,1.28)}.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s;filter:saturate(.88);}.work-card:hover .card-media img,.work-card:focus-visible .card-media img{transform:scale(1.055);filter:saturate(1.03)}.card-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.81),rgba(0,0,0,.1) 48%,rgba(0,0,0,0) 70%);opacity:0;transition:opacity .35s}.work-card:hover .card-veil,.work-card:focus-visible .card-veil{opacity:1}.card-meta{position:absolute;inset:auto 0 0;z-index:1;padding:26px 23px 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s var(--ease)}.work-card:hover .card-meta,.work-card:focus-visible .card-meta{opacity:1;transform:translateY(0)}.card-title{font-size:17px;line-height:1.27;margin:0 0 7px;letter-spacing:-.35px;font-weight:500}.card-subtitle{font-size:10px;color:#c9c7c0;line-height:1.5}.card-link-arrow{font-size:23px;font-weight:200;flex:0 0 auto}.card-demo{position:absolute;top:13px;left:14px;font-size:8px;letter-spacing:1.2px;color:rgba(255,255,255,.72);background:rgba(0,0,0,.3);padding:5px 7px;z-index:1}.work-card:focus-visible{outline:2px solid #fff;outline-offset:-3px}.empty-state{padding:90px 30px;text-align:center;color:#b5b4ad;font-size:14px}.empty-state button{display:block;margin:20px auto;background:transparent;color:#fff;border:0;border-bottom:1px solid #888;padding:8px}.main-footer{margin:70px 17px 0;padding:25px 13px 32px;border-top:0;display:flex;align-items:center;justify-content:space-between;gap:14px;color:#85847c;font-size:9px;letter-spacing:1px}.main-footer button{font-size:9px;color:#a6a6a1;border:0;background:none;letter-spacing:1px}.main-footer button:hover{color:white}.mobile-header{display:none}
.detail-view{min-height:100vh}.detail-top{display:flex;align-items:center;justify-content:space-between;padding:32px 39px;border-bottom:1px solid #2c2c2c}.back-link{background:none;color:#dad9d4;border:0;padding:7px 0;letter-spacing:.5px;font-size:12px}.back-link:hover{color:#fff}.detail-pager{font-size:10px;letter-spacing:1px;color:#96958d}.detail-hero{padding:86px 39px 56px}.detail-kicker{font-size:10px;color:#8f8f89;letter-spacing:1.5px}.detail-title{font-size:clamp(52px,6.4vw,103px);line-height:.98;letter-spacing:-.075em;font-weight:500;margin:23px 0 28px;max-width:1000px;overflow-wrap:anywhere}.detail-title em{font-family:Georgia,serif;font-weight:400}.detail-lead{display:flex;justify-content:space-between;gap:40px;max-width:1100px}.detail-description{font-size:15px;color:#bcbab3;line-height:1.9;max-width:560px;white-space:pre-line}.detail-facts{display:grid;grid-template-columns:repeat(2,minmax(105px,1fr));gap:22px 38px;min-width:280px}.fact-label{display:block;font-size:9px;color:#777;letter-spacing:1.4px;margin-bottom:12px}.fact-value{display:block;font-size:13px;color:#dddcd5}.detail-gallery{padding:0 16px}.detail-image{position:relative;display:block;width:100%;border:0;background:#252525;padding:0;margin:0 0 10px;overflow:hidden;cursor:zoom-in}.detail-image img{width:100%;height:auto;max-height:900px;object-fit:contain;object-position:center}.detail-image:hover img{filter:brightness(.93)}.detail-image .zoom-icon{position:absolute;right:20px;bottom:20px;width:37px;height:37px;display:grid;place-items:center;background:rgba(0,0,0,.55);border-radius:50%;font-size:20px}.detail-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:38px 39px 20px;font-size:11px;letter-spacing:.6px;color:#9b9b94}.detail-next{display:block;margin:0 17px;background:#191919;padding:50px 30px 55px;transition:background .25s}.detail-next:hover{background:#222}.detail-next-label{font-size:10px;letter-spacing:1.4px;color:#9a9992}.detail-next-title{font-size:clamp(35px,5vw,74px);letter-spacing:-.06em;line-height:1;margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:20px}.detail-next-title span{font-size:36px}
.info-view{min-height:100vh}.info-hero{padding:100px 40px 118px;display:flex;flex-direction:column}.info-index{font-size:10px;color:#92918c;letter-spacing:1.4px}.info-hero h1{font-size:clamp(72px,9vw,151px);font-weight:500;line-height:.85;letter-spacing:-.09em;margin:27px 0 53px}.info-hero>p{font-size:clamp(17px,1.7vw,25px);font-weight:400;line-height:1.55;max-width:660px;color:#b8b7b1;margin:0}.info-grid{margin:0 40px;padding:31px 0 100px;border-top:1px solid #383838;display:grid;grid-template-columns:1fr 2fr;gap:50px}.info-label{font-size:10px;letter-spacing:1.3px;color:#9c9b93;display:flex;justify-content:space-between}.info-body{font-size:20px;line-height:1.85;color:#bcbcb5;max-width:720px;white-space:pre-line;margin:0 0 70px}.service-list{border-top:1px solid #393939}.service-row{display:flex;justify-content:space-between;padding:21px 5px 21px 0;border-bottom:1px solid #393939;font-size:16px}.service-row>span:last-child{color:#777;font-size:12px}.info-bottom-cta{margin:10px 18px 18px;padding:50px 35px 65px;background:#1a1a1a}.info-bottom-cta>span{font-size:10px;letter-spacing:1.2px;color:#888}.info-bottom-cta>a{display:flex;justify-content:space-between;align-items:center;font-size:clamp(38px,5vw,74px);letter-spacing:-.06em;margin-top:22px}.info-bottom-cta>a span{font-size:35px}.contact-hero{padding-bottom:120px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;border-top:1px solid #353535;margin:0 40px;padding:35px 0 100px}.contact-grid>div{display:flex;flex-direction:column;gap:18px}.contact-label{font-size:10px;letter-spacing:1.5px;color:#7b7b76}.contact-grid>div>a,.contact-grid>div>span:last-child{font-size:clamp(18px,2.3vw,34px);letter-spacing:-.03em;overflow-wrap:anywhere}.contact-grid a:hover{color:#bcb9af}.contact-note{margin:0 40px 40px;font-size:11px;color:#6c6b67}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(7,7,7,.98);display:flex;align-items:center;justify-content:center}.lightbox-toolbar{position:absolute;z-index:2;top:0;left:0;right:0;padding:24px 26px;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.7px}.lightbox-toolbar-right{display:flex;align-items:center;gap:30px}.lightbox-toolbar button{font-size:30px;border:0;background:none;color:#fff;line-height:1}.lightbox-image-wrap{display:flex;align-items:center;justify-content:center;flex-direction:column;height:100%;width:calc(100% - 180px);padding:76px 0 45px}.lightbox-image-wrap img{display:block;width:auto;max-width:100%;max-height:calc(100% - 30px);object-fit:contain}.lightbox-image-wrap>span{font-size:10px;color:#777;margin-top:16px;letter-spacing:.6px}.lightbox-arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);font-size:51px;font-weight:200;width:70px;height:100px;color:#fff;border:0;background:none;display:flex;align-items:center;justify-content:center}.lightbox-prev{left:5px}.lightbox-next{right:5px}.lightbox-arrow:hover{color:#aaa}.demo-banner{position:fixed;z-index:50;left:calc(var(--sidebar-width) + 14px);bottom:14px;display:flex;align-items:center;gap:18px;max-width:calc(100vw - var(--sidebar-width) - 28px);background:rgba(238,232,219,.96);color:#191919;box-shadow:0 5px 35px #0008;padding:13px 14px 13px 17px;font-size:11px}.demo-banner span:first-child{font-weight:700;letter-spacing:.5px;white-space:nowrap}.demo-banner button{background:none;border:0;color:#111;font-size:20px;padding:0 2px 0 10px}.demo-banner span:nth-child(2){color:#585850}
@media (max-width:1300px){.work-grid{columns:2}.page-intro{padding-top:70px}.page-intro h1{font-size:clamp(66px,8vw,120px)}.intro-side{width:155px}.detail-facts{min-width:215px;gap:20px}}
@media (max-width:850px){:root{--sidebar-width:0px}.sidebar{width:min(340px,100vw);transform:translateX(-105%);transition:transform .45s var(--ease);z-index:65;box-shadow:6px 0 50px #0008}.sidebar.open{transform:translateX(0)}body.menu-open:before{content:"";position:fixed;inset:0;z-index:60;background:#0009}.main{margin-left:0}.mobile-header{display:flex;position:sticky;top:0;z-index:30;background:#090909f2;backdrop-filter:blur(10px);align-items:center;justify-content:space-between;padding:15px 22px;height:66px;border-bottom:1px solid #2a2a2a}.mobile-brand{font-weight:800;font-size:20px;letter-spacing:-1px}.mobile-brand span{color:#888}.mobile-menu-button{display:flex;width:43px;height:35px;flex-direction:column;justify-content:center;gap:6px;border:0;background:transparent;padding:8px}.mobile-menu-button span{display:block;background:#f0f0f0;height:1px;width:100%;transition:transform .3s}.page-topbar{padding:25px 24px 0}.page-intro{padding:60px 25px 48px}.page-intro h1{font-size:clamp(72px,12vw,120px)}.intro-side{display:none}.work-grid{padding:0 10px 10px;column-gap:8px}.work-card{margin-bottom:8px}.gallery-top{margin:0 10px;padding-left:14px;padding-right:14px}.main-footer{margin-top:35px}.demo-banner{left:10px;right:10px;max-width:none;bottom:10px}.detail-top{padding:22px}.detail-hero{padding:60px 24px 38px}.detail-lead{flex-direction:column;gap:30px}.detail-facts{min-width:0;grid-template-columns:1fr 1fr}.detail-gallery{padding:0 10px}.detail-image{margin-bottom:8px}.detail-bottom{margin:30px 23px}.info-hero{padding:70px 25px 90px}.info-grid{margin:0 25px;grid-template-columns:1fr;gap:35px}.contact-grid{margin:0 25px}.contact-note{margin-left:25px}.info-bottom-cta{margin:0 10px 10px;padding:40px 25px}.lightbox-image-wrap{width:calc(100% - 110px)}.lightbox-arrow{width:45px;font-size:40px}.lightbox-toolbar{padding:18px}}
@media (max-width:570px){.right-eyebrow{display:none}.page-topbar{padding:22px 17px 0}.page-intro{padding:60px 16px 45px}.intro-kicker{font-size:9px;letter-spacing:1px}.page-intro h1{font-size:clamp(66px,16vw,96px)}.gallery-top{padding:16px 6px;margin:0 12px}.gallery-right{display:none}.work-grid{columns:1;padding:0 7px;column-gap:0}.work-card{margin-bottom:7px}.card-meta,.card-veil{opacity:1;transform:none}.card-title{font-size:17px}.card-meta{padding:40px 20px 17px}.card-media{aspect-ratio:var(--mobile-ratio,1.18)}.main-footer{font-size:8px;margin:38px 9px 0;flex-wrap:wrap}.main-footer>span:nth-child(2){display:none}.detail-hero{padding:53px 19px 36px}.detail-title{font-size:clamp(50px,13vw,75px)}.detail-description{font-size:13px}.detail-facts{gap:27px 12px}.detail-image .zoom-icon{right:12px;bottom:12px}.detail-next{margin:0 8px;padding:40px 22px}.detail-next-title{font-size:40px}.info-hero h1{font-size:clamp(67px,14vw,94px)}.info-hero{padding:60px 20px 75px}.info-grid{margin:0 20px;padding-bottom:75px}.info-body{font-size:17px}.contact-grid{grid-template-columns:1fr;margin:0 20px;padding-bottom:70px;gap:42px}.contact-note{margin-left:20px}.demo-banner{gap:9px;padding:12px}.demo-banner span:first-child{font-size:9px}.demo-banner span:nth-child(2){font-size:10px}.lightbox-image-wrap{width:100%;padding:82px 15px 55px}.lightbox-arrow{top:auto;bottom:16px;transform:none;height:38px;background:#222a}.lightbox-prev{left:16px}.lightbox-next{right:16px}.lightbox-image-wrap img{max-height:calc(100% - 25px)}.lightbox-toolbar{padding:18px 14px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* v1.5: 라이트박스 내 이미지 맞춤/클릭 확대/드래그 패닝. 기존 v1.2 화면 유지 */
.lightbox{background:#080808}
.lightbox-image-wrap{min-width:0;min-height:0;overflow:hidden;box-sizing:border-box}
.lightbox-stage{position:relative;min-height:0;min-width:0;width:100%;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in;touch-action:none;overscroll-behavior:contain}
.lightbox-image-wrap .lightbox-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;will-change:transform;pointer-events:auto;transition:none}
.lightbox-stage.is-zoomed{cursor:grab}
.lightbox-stage.is-panning{cursor:grabbing}
.lightbox-stage.is-panning img{cursor:grabbing}
.lightbox-image-wrap .lightbox-help{color:#8a8a86;font-size:10px;letter-spacing:.1px;margin-top:7px;text-align:center}
#lightbox-caption{text-align:center}
#lightbox-close{min-width:42px;min-height:42px;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:570px){.lightbox-image-wrap{padding:73px 12px 79px}.lightbox-image-wrap .lightbox-help{font-size:9px;line-height:1.2;margin-top:5px}}


/* v1.6: 자연스러운 모션, 원본 100% 픽셀 확대 */
/* 빠른 휠/터치 스크롤은 브라우저 기본 동작을 유지하고, 진입 카드만 은은하게 등장합니다. */
.work-card.will-reveal{opacity:0;transform:translate3d(0,17px,0);transition:opacity .65s var(--ease),transform .7s var(--ease);transition-delay:var(--reveal-delay,0ms)}
.work-card.will-reveal.is-revealed{opacity:1;transform:translate3d(0,0,0)}
.lightbox{opacity:0;visibility:hidden;transition:opacity .34s ease,visibility 0s linear .34s}
.lightbox.is-visible{opacity:1;visibility:visible;transition:opacity .34s ease,visibility 0s}
.lightbox.is-closing{pointer-events:none;visibility:visible}
.lightbox .lightbox-image-wrap{opacity:0;transform:translate3d(0,12px,0) scale(.987);transition:opacity .36s ease,transform .43s var(--ease)}
.lightbox.is-visible .lightbox-image-wrap{opacity:1;transform:translate3d(0,0,0) scale(1)}
.lightbox .lightbox-toolbar,.lightbox .lightbox-arrow{opacity:0;transition:opacity .32s ease,color .2s ease}
.lightbox.is-visible .lightbox-toolbar,.lightbox.is-visible .lightbox-arrow{opacity:1}
.lightbox-image-wrap .lightbox-stage img#lightbox-image{transition:transform .46s var(--ease),opacity .32s ease;will-change:transform,opacity}
.lightbox-image-wrap .lightbox-stage.is-panning img#lightbox-image{transition:none}
.lightbox-image-wrap .lightbox-stage img#lightbox-image.is-image-changing{opacity:0}
.lightbox-image-wrap .lightbox-stage .lightbox-ghost{position:absolute;left:50%;top:50%;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;pointer-events:none;opacity:1;transform-origin:center center;transition:opacity .38s ease}
.lightbox-image-wrap .lightbox-stage .lightbox-ghost.is-fading{opacity:0}
@media (prefers-reduced-motion:reduce){
 .work-card.will-reveal{opacity:1!important;transform:none!important;transition:none!important}
 .lightbox,.lightbox .lightbox-image-wrap,.lightbox .lightbox-toolbar,.lightbox .lightbox-arrow,.lightbox-image-wrap .lightbox-stage img#lightbox-image,.lightbox-image-wrap .lightbox-stage .lightbox-ghost{transition:none!important;animation:none!important}
}

/* v1.7: Works 전용 상단 소개 영역 제거. 갤러리의 분류선부터 시작합니다. */
#works-page > .gallery-top{margin-top:22px}
@media(max-width:850px){#works-page > .gallery-top{margin-top:14px}}
/* 휠 스크롤은 JS에서 부드럽게 처리; 터치/트랙패드는 브라우저 기본 관성 유지. */
@media(prefers-reduced-motion:reduce){#works-page > .gallery-top{scroll-behavior:auto}}

/* v1.8: 데스크톱 가로 3개, 이미지 비율에 따라 다른 높이의 masonry 레이아웃.
   세로선은 열 경계에 고정, 가로선은 각 작품 하단에 표시합니다. */
.work-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:0;
  columns:auto;
  column-gap:0;
  padding:0 0 18px;
  margin:0 16px;
  border-top:1px solid #3f3f3c;
}
.work-column{
  display:flex;
  flex-direction:column;
  min-width:0;
  border-left:1px solid #3f3f3c;
}
.work-column:last-child{border-right:1px solid #3f3f3c;}
.work-column>.work-card{
  display:block;
  flex:0 0 auto;
  break-inside:avoid;
  position:relative;
  margin:0;
  padding:8px 8px 9px;
  overflow:visible;
  isolation:auto;
  background:transparent;
  border-bottom:1px solid #3f3f3c;
}
.work-column .card-media{width:100%;}
.work-column .card-meta{inset:auto 8px 9px;}
.work-column .card-demo{top:21px;left:22px;}
@media(max-width:1050px){
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:570px){
  .work-grid{grid-template-columns:minmax(0,1fr);margin:0 8px;padding:0 0 10px;}
  .work-column>.work-card{margin:0;padding:7px 7px 8px;}
  .work-column .card-meta{inset:auto 7px 8px;}
  .work-column .card-demo{top:20px;left:21px;}
}


/* v1.9 clean black grid */
.work-card::before,.work-card::after{display:none!important;}
.card-media::before,.card-media::after{display:none!important;}
.lightbox-toolbar{border-bottom:0!important;}
.lightbox-image-wrap{background:#000;}
@media (max-width: 1100px){.work-grid{columns:2;column-gap:14px}.work-card{margin-bottom:14px}}
@media (max-width: 720px){.work-grid{columns:1;column-gap:0}.work-card{margin-bottom:12px}}


/* v1.9.1 overrides: remove all grey rules in main gallery section */
#works-page > .gallery-top{margin-top:22px;border-top:0!important}
.work-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:start!important;
  gap:16px!important;
  columns:auto!important;
  column-gap:0!important;
  padding:0 16px 18px!important;
  margin:0!important;
  border-top:0!important;
  background:#0b0b0b!important;
}
.work-column{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  border:0!important;
  gap:16px!important;
  background:transparent!important;
}
.work-column:last-child{border:0!important;}
.work-column>.work-card{
  display:block!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.work-column .card-meta{inset:auto 0 0!important;}
.work-column .card-demo{top:13px!important;left:14px!important;}
@media(max-width:1050px){
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;padding:0 14px 16px!important;}
  .work-column{gap:14px!important;}
}
@media(max-width:570px){
  .work-grid{grid-template-columns:minmax(0,1fr)!important;gap:12px!important;padding:0 8px 10px!important;}
  .work-column{gap:12px!important;}
}


/* v2.0: 가로/세로 모두 검정 배경으로 분리. v1.9의 column-gap:0 충돌 해결. */
#works-page{background:#000;}
#works-page .gallery-top{background:#000;border:0!important;}
#works-page .work-grid{
  column-gap:12px!important; /* 열 사이 세로 검정 구분 */
  row-gap:0!important;
  background:#000!important;
}
#works-page .work-column{
  gap:12px!important; /* 작품 위아래 검정 구분 */
  background:#000!important;
  border:0!important;
}
#works-page .work-column>.work-card{
  background:#000!important;
  border:0!important;
}
#works-page .work-card .card-media{background:#000!important;}
@media(max-width:1050px){
  #works-page .work-grid{column-gap:10px!important;}
  #works-page .work-column{gap:10px!important;}
}
@media(max-width:570px){
  #works-page .work-grid{column-gap:0!important;}
  #works-page .work-column{gap:10px!important;}
}
/* 이미지 저장 억제: 드래그 및 모바일 길게 누르기 이미지 메뉴 차단. */
body img{-webkit-user-drag:none;user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.work-card,.card-media,.detail-image,.lightbox-stage{-webkit-touch-callout:none;}

/* v2.1: 왼쪽 설명 길이 조정, 오른쪽 상단 NAS / Instagram 아이콘 */
.side-descriptor{max-width:192px;overflow-wrap:normal;line-height:1.65;}
#works-page .gallery-top{align-items:center;min-height:56px;}
.gallery-icon-links{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.gallery-icon-link{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;color:#c6c6c1;background:transparent;border-radius:7px;border:1px solid transparent;transition:color .24s ease,background .24s ease,transform .32s cubic-bezier(.22,1,.36,1);}
.gallery-icon-link svg{width:22px;height:22px;display:block;}
.gallery-icon-link:hover{color:#fff;background:#1c1c1c;transform:translateY(-2px);}
.gallery-icon-link:focus-visible{outline:1px solid #fff;outline-offset:2px;}
#works-page .main-footer{justify-content:flex-end;border-top:0;}
@media(max-width:570px){.gallery-icon-links{gap:4px}.gallery-icon-link{width:32px;height:32px}.gallery-icon-link svg{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.gallery-icon-link{transition:none}}


/* v2.2: left-side scrollbar adopts the same dark look as the gallery scrollbar. */
.sidebar {
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: #626262 #0b0b0b;
}
.sidebar::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
.sidebar::-webkit-scrollbar-track {
  background: #0b0b0b;
  border: none;
}
.sidebar::-webkit-scrollbar-thumb {
  background: #626262;
  border-radius: 10px;
  border: 2px solid #0b0b0b;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: #898989;
}
.sidebar::-webkit-scrollbar-corner {
  background: #0b0b0b;
}


/* v2.3: NAS / Instagram이 포함된 Works 상단 바를 스크롤 중 고정합니다. */
#works-page > .gallery-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 40;
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  margin: 0 !important;
  padding: 9px 40px !important;
  background: #000 !important;
  border: 0 !important;
  box-shadow: none;
}
/* 모바일: 기존 66px 높이의 모바일 헤더 아래에 고정합니다. */
@media (max-width:850px) {
  #works-page > .gallery-top {
    top: 66px;
    z-index: 29;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
@media (max-width:570px) {
  #works-page > .gallery-top {
    min-height: 52px;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}


/* v2.4 company logo image + editable company name */
.identity-custom-logo{display:none;max-width:193px;max-height:92px;width:auto;height:auto;object-fit:contain;object-position:left center;flex-shrink:1;}
.identity.has-custom-logo .identity-custom-logo{display:block;}
.identity.has-custom-logo .identity-symbol{display:none;}
.identity.has-custom-logo:not(.logo-with-name) .identity-text{display:none;}
.identity.has-custom-logo.logo-with-name .identity-custom-logo{max-width:54px;max-height:62px;}
.identity.has-custom-logo.logo-with-name .identity-text{font-size:21px;overflow-wrap:anywhere;}
.side-top.logo-image-only .side-descriptor{margin-left:0;}
.identity-text{overflow-wrap:anywhere;}
.mobile-custom-logo{display:none;max-width:175px;max-height:37px;width:auto;height:auto;object-fit:contain;object-position:left center;}
.mobile-brand.has-custom-logo{display:flex;align-items:center;gap:10px;min-width:0;}
.mobile-brand.has-custom-logo .mobile-custom-logo{display:block;}
.mobile-brand.has-custom-logo:not(.logo-with-name) #mobile-brand-label{display:none;}
.mobile-brand.has-custom-logo.logo-with-name .mobile-custom-logo{max-width:42px;}
.mobile-brand.has-custom-logo #mobile-brand-label{min-width:0;overflow-wrap:anywhere;}


/* v2.7: 로고와 회사명을 높이 기준 중앙 정렬 / 업로드한 로고는 항상 기본 심볼(28x28px) 크기로 표시 */
.sidebar .identity {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 28px;
}
.sidebar .identity-symbol {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  margin-top: 0;
  align-self: center;
}
.sidebar .identity-text {
  align-self: center;
  margin: 0;
  line-height: .93;
}
/* SVG/PNG/JPG/WebP의 원본 해상도와 비율에 영향받지 않고 28px 프레임에 맞춤 */
.sidebar .identity-custom-logo,
.sidebar .identity.has-custom-logo.logo-with-name .identity-custom-logo,
.sidebar .identity.has-custom-logo:not(.logo-with-name) .identity-custom-logo {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  flex: 0 0 28px !important;
  align-self: center;
  object-fit: contain !important;
  object-position: center center !important;
}
/* 모바일 회사명/로고 역시 같은 크기, 같은 높이 정렬 */
.mobile-brand,
.mobile-brand.has-custom-logo {
  align-items: center;
}
.mobile-custom-logo,
.mobile-brand.has-custom-logo.logo-with-name .mobile-custom-logo {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  flex: 0 0 28px !important;
  object-fit: contain !important;
  object-position: center center !important;
}


/* v2.8: initial paint waits for the latest published site settings.
   Hide only data-dependent sidebar contents; keep black layout in place. */
html.cg-initializing .sidebar > .side-top,
html.cg-initializing .sidebar > .side-content,
html.cg-initializing #mobile-brand {
  visibility: hidden !important;
}


/* v3.1: Large still portfolio performance + touch/pointer zoom */
#works-page .work-card .card-media img{filter:none!important;transition:transform .5s ease!important;backface-visibility:hidden;}
#works-page .work-card:hover .card-media img{filter:none!important;}
#works-page .work-card .card-media{contain:paint;}
#works-page .work-card .card-media img:not([src]){opacity:0;}
/* Avoid a new compositing layer for every thumbnail on long galleries */
#works-page .work-card{will-change:auto!important;}
.lightbox-stage,.lightbox-stage #lightbox-image{touch-action:none;overscroll-behavior:contain;}
.lightbox-stage.is-panning #lightbox-image{transition:none!important;}
.lightbox-stage #lightbox-image{transition:transform .2s cubic-bezier(.22,1,.36,1),opacity .25s ease!important;}
@media(hover:none){#works-page .work-card:hover .card-media img{transform:none!important;}}

@media (prefers-reduced-motion:reduce){.lightbox-stage #lightbox-image{transition:none!important;}}


/* v3.5: mobile lightbox sharpness fix.
   Keep the FULL image at its native fitted resolution instead of leaving
   it in nested GPU-transformed layers after the opening animation. */
.lightbox .lightbox-image-wrap,
.lightbox.is-visible .lightbox-image-wrap{
  transform:none;
  transition:opacity .3s ease;
}
.lightbox-image-wrap .lightbox-stage img#lightbox-image{
  will-change:auto;
  backface-visibility:visible;
  image-rendering:auto;
}


/* v3.6: Disable browser pinch/double-tap zoom only on the portfolio page.
   The lightbox is outside #site-shell and retains its own pinch-zoom controls.
   Vertical touch scrolling and ordinary thumbnail taps still work. */
@media (pointer:coarse) {
  #site-shell { touch-action:pan-y; }
}

/* v3.7: Native gallery gestures are limited to vertical scrolling.
   The image stage inside the lightbox retains its separate custom pinch logic. */
@media (pointer: coarse) {
  html, body, #site-shell, #works-page, #work-grid { touch-action: pan-y; }
  #lightbox-stage, #lightbox-image { touch-action: none; }
}


/* v3.8: 회사명과 함께 표시하는 가로형 로고 크기 보정.
   기존 28x28px 정사각형 프레임에서 가로형 로고가 지나치게 작아지는 문제 수정. */
.sidebar .identity.has-custom-logo.logo-with-name {
  gap: 12px;
}
.sidebar .identity.has-custom-logo.logo-with-name .identity-custom-logo {
  width: 56px !important;
  height: 34px !important;
  min-width: 56px !important;
  min-height: 34px !important;
  max-width: 56px !important;
  max-height: 34px !important;
  flex: 0 0 56px !important;
  object-fit: contain !important;
  object-position: center center !important;
}
.mobile-brand.has-custom-logo.logo-with-name .mobile-custom-logo {
  width: 52px !important;
  height: 32px !important;
  min-width: 52px !important;
  min-height: 32px !important;
  max-width: 52px !important;
  max-height: 32px !important;
  flex: 0 0 52px !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* v3.9: 상단 브랜드 영역을 '로고 이미지만 크게' 표시.
   텍스트 V.O.M은 숨기고, 업로드한 로고 이미지를 좌측 상단에 크게 노출합니다. */
.sidebar .identity.has-custom-logo {
  align-items: flex-start !important;
  gap: 0 !important;
  min-height: 0 !important;
  width: 100%;
}
.sidebar .identity.has-custom-logo .identity-text,
.sidebar .identity.has-custom-logo.logo-with-name .identity-text {
  display: none !important;
}
.sidebar .identity.has-custom-logo .identity-custom-logo,
.sidebar .identity.has-custom-logo.logo-with-name .identity-custom-logo,
.sidebar .identity.has-custom-logo:not(.logo-with-name) .identity-custom-logo {
  width: auto !important;
  height: 44px !important;
  min-width: 0 !important;
  min-height: 44px !important;
  max-width: 140px !important;
  max-height: 44px !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.mobile-brand.has-custom-logo {
  align-items: center !important;
  gap: 0 !important;
}
.mobile-brand.has-custom-logo #mobile-brand-label {
  display: none !important;
}
.mobile-brand.has-custom-logo .mobile-custom-logo,
.mobile-brand.has-custom-logo.logo-with-name .mobile-custom-logo {
  width: auto !important;
  height: 34px !important;
  min-width: 0 !important;
  min-height: 34px !important;
  max-width: 110px !important;
  max-height: 34px !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
  object-position: left center !important;
}

@media (max-width: 570px) {
  .sidebar .identity.has-custom-logo .identity-custom-logo,
  .sidebar .identity.has-custom-logo.logo-with-name .identity-custom-logo,
  .sidebar .identity.has-custom-logo:not(.logo-with-name) .identity-custom-logo {
    height: 40px !important;
    min-height: 40px !important;
    max-width: 126px !important;
    max-height: 40px !important;
  }
}

/* v4.0: 좌측 브랜드 영역 안에서 로고 이미지를 더 크게 노출 */
.sidebar .identity.has-custom-logo,
.sidebar .identity.has-custom-logo.logo-with-name {
  width: 100% !important;
  align-items: flex-start !important;
}
.sidebar .identity.has-custom-logo .identity-custom-logo,
.sidebar .identity.has-custom-logo.logo-with-name .identity-custom-logo,
.sidebar .identity.has-custom-logo:not(.logo-with-name) .identity-custom-logo {
  display: block !important;
  width: 132px !important;
  height: auto !important;
  min-width: 132px !important;
  min-height: 0 !important;
  max-width: 132px !important;
  max-height: none !important;
  flex: 0 0 132px !important;
  object-fit: contain !important;
  object-position: left center !important;
}
.side-top.logo-image-only .side-descriptor {
  margin-top: 10px !important;
}

.mobile-brand.has-custom-logo .mobile-custom-logo,
.mobile-brand.has-custom-logo.logo-with-name .mobile-custom-logo {
  display: block !important;
  width: 98px !important;
  height: auto !important;
  min-width: 98px !important;
  min-height: 0 !important;
  max-width: 98px !important;
  max-height: none !important;
  flex: 0 0 98px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

@media (max-width: 570px) {
  .sidebar .identity.has-custom-logo .identity-custom-logo,
  .sidebar .identity.has-custom-logo.logo-with-name .identity-custom-logo,
  .sidebar .identity.has-custom-logo:not(.logo-with-name) .identity-custom-logo {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    flex-basis: 120px !important;
  }
}


/* v4.1: PC sidebar and open mobile menu: center the large uploaded logo.
   Mobile top bar remains separate and keeps its compact logo. */
.sidebar .identity.has-custom-logo,
.sidebar .identity.has-custom-logo.logo-with-name {
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
}
.sidebar .identity.has-custom-logo .identity-custom-logo,
.sidebar .identity.has-custom-logo.logo-with-name .identity-custom-logo,
.sidebar .identity.has-custom-logo:not(.logo-with-name) .identity-custom-logo {
  display: block !important;
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 132px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
  object-fit: contain !important;
  object-position: center center !important;
}
/* Small screens: the opened slide-out menu uses the SAME 132px logo size.
   Do not change .mobile-brand or .mobile-custom-logo in the top header. */
@media (max-width: 570px) {
  .sidebar .identity.has-custom-logo .identity-custom-logo,
  .sidebar .identity.has-custom-logo.logo-with-name .identity-custom-logo,
  .sidebar .identity.has-custom-logo:not(.logo-with-name) .identity-custom-logo {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    flex-basis: 132px !important;
  }
}

/* v4.2: 모바일 메인 상단바의 로고만 기존 98px의 2/3 크기(약 65px)로 축소.
   슬라이드 메뉴 내부의 큰 132px 로고는 변경하지 않음. */
@media (max-width: 850px) {
  .mobile-header .mobile-brand.has-custom-logo .mobile-custom-logo,
  .mobile-header .mobile-brand.has-custom-logo.logo-with-name .mobile-custom-logo {
    width: 65.33px !important;
    min-width: 65.33px !important;
    max-width: 65.33px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 65.33px !important;
  }
}