/* 갤러리(/gallery) 전용 스타일 — 디자인 Gallery.dc.html */
main{overflow-x:clip}
.gl{max-width:1360px;margin:0 auto;padding:56px 40px 110px;box-sizing:border-box}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.chips[hidden]{display:none}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 20px;border:2px solid #1B1714;background:#FFFFFF;font:inherit;font-size:18px;font-weight:700;color:#1B1714;cursor:pointer;transition:background .25s,color .25s,transform .25s}
.chip:hover{transform:translateY(-3px)}
.chip.on{background:#1B1714;color:#FFFFFF}
.chip .n{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 6px;box-sizing:border-box;background:#EDBE2F;color:#1B1714;font-size:15px}
.masonry{column-count:4;column-gap:22px}
.ph-item{margin:0 0 22px;break-inside:avoid}
.ph-item[hidden]{display:none}
.ph-item.pop{animation:phIn .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes phIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ph{display:block;position:relative;overflow:hidden;border:2px solid #1B1714;background:#1B1714;cursor:zoom-in;box-shadow:0 0 0 #EDBE2F;transition:box-shadow .3s,transform .3s}
.ph:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 #D3382C}
.ph img{display:block;width:100%;height:auto;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ph:hover img{transform:scale(1.05)}
.ph .no{position:absolute;left:10px;top:10px;padding:2px 8px;background:#FAF6EE;color:#1B1714;font-size:14px;font-weight:700}
/* 라이트박스 */
.lb{position:fixed;inset:0;z-index:200;background:rgba(18,15,13,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;box-sizing:border-box;animation:lbIn .35s ease both}
.lb[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-img{max-width:min(1100px,92vw);max-height:72vh;width:auto;height:auto;object-fit:contain;border:6px solid #FAF6EE;box-sizing:border-box;background:#1B1714}
.lb-img.ka{animation:imgA .45s cubic-bezier(.2,.8,.2,1) both}
.lb-img.kb{animation:imgB .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes imgA{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes imgB{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.lb-cap{margin:0;max-width:92vw;text-align:center;color:#FAF6EE;font-size:19px;font-weight:700;line-height:1.5}
.lb-btns{display:flex;gap:12px}
.lb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:64px;min-height:60px;padding:0 22px;border:2px solid #FAF6EE;background:transparent;color:#FAF6EE;font:inherit;font-size:19px;font-weight:700;cursor:pointer;transition:background .25s,color .25s}
.lb-btn:hover{background:#FAF6EE;color:#1B1714}
.lb a:focus-visible,.lb button:focus-visible{outline-color:#EDBE2F}
@media (max-width:1100px){.masonry{column-count:3}}
@media (max-width:900px){
  .gl{padding:36px 18px 80px}
  .masonry{column-count:2;column-gap:14px}
  .ph-item{margin-bottom:14px}
  .ph:hover{transform:none;box-shadow:none}
  .chips{margin-bottom:26px}
  .chip{min-height:50px;padding:0 16px;font-size:17px}
  .lb{padding:16px;gap:14px}
  .lb-img{max-height:64vh}
  .lb-cap{font-size:17px}
  .lb-btn{min-height:56px;padding:0 16px;font-size:18px}
}

/* 술 달린 그림이 길어 제목 띠가 늘어나지 않게 한다 */
.tb-img{width:auto;max-height:300px}
@media (max-width:900px){.tb-img{width:auto;max-height:150px}}