.crt-list {align-items: stretch;}
.crt-item {color: #222;}
.crt-thumb {position: relative; display: flex; align-items: center; justify-content: center; width: 305px; height: 390px; max-width: 100%; margin: 0 auto; overflow: hidden; background: #F4F4F4; transition: border-color .25s ease, box-shadow .25s ease;}
.crt-thumb img {position: relative; display: block; width: 200px; height: 280px; background: #fff; object-fit: contain; transition: transform .35s ease, filter .35s ease; box-shadow: 0 0 20px rgba(0,0,0,0.1);}
.crt-thumb::before {content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .25s ease; z-index: 1;}
.crt-view {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.9); opacity: 0; font-size: 28px; color: #fff; width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-color); box-shadow: 0 6px 16px rgba(31, 76, 143, 0.25); transition: opacity .2s ease, transform .2s ease; z-index: 2;}
.crt-name {font-size: 16px; font-weight: 500; text-align: center;}
.crt-bold {font-weight: 600; color: #222; text-align: center;}

.crt-item:hover .crt-thumb {border-color: var(--brand-color); box-shadow: inset 0 0 0 3px var(--brand-color), 0 8px 20px rgba(0,0,0,.06);}
.crt-item:hover .crt-thumb::before {background: rgba(0,0,0,.18);}
.crt-item:hover .crt-view {opacity: 1; transform: translate(-50%,-50%) scale(1);}

@media (max-width:768px) {
  .crt-view {opacity: 1; transform: translate(-50%,-50%) scale(1);}
  .crt-thumb::before {background: rgba(0,0,0,.12);}
}

@media (max-width:370px) {
  .crt-thumb {width: 260px; height: 340px;}
  .crt-thumb img {width: 170px; height: 240px;}
  .crt-name {font-size: 15px;}
}

/* 2026.04.27.
.crt-list{align-items:stretch;}
.crt-item{color:#222;cursor:pointer;}
.crt-thumb{position:relative;display:flex;align-items:center;justify-content:center;width:305px;height:390px;max-width:100%;margin:0 auto;overflow:hidden;background:#F4F4F4;transition:border-color .25s ease,box-shadow .25s ease;}
.crt-thumb img{position:relative;display:block;width:200px;height:280px;object-fit:contain;transition:transform .35s ease,filter .35s ease;box-shadow:0 0 20px rgba(0,0,0,0.1);}
.crt-thumb::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .25s ease;z-index:1;}
.crt-zoom{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);opacity:0;font-size:28px;color:#fff;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#1f8f4a;box-shadow:0 6px 16px rgba(31,143,74,.25);transition:opacity .2s ease,transform .2s ease;z-index:2;pointer-events:none;}
.crt-name{font-size:16px;font-weight:600;text-align:center;}
.crt-bold{font-weight:700;color:#000;text-align:center;}
.crt-item:hover .crt-thumb{border-color:#1f8f4a;box-shadow:inset 0 0 0 3px #1f8f4a,0 8px 20px rgba(0,0,0,.06);}
.crt-item:hover .crt-thumb::before{background:rgba(0,0,0,.18);}
.crt-item:hover .crt-zoom{opacity:1;transform:translate(-50%,-50%) scale(1);}

.modal{z-index:20000;}
.modal-backdrop{z-index:19990;}

#crtModal .modal-dialog{max-width:500px;margin:0 auto;display:flex;align-items:center;min-height:100dvh;}
#crtModal .modal-content{width:500px;height:750px;border:0;border-radius:12px;overflow:hidden;display:flex;flex-direction:column; background: #F4F4F4;}
#crtModal .modal-body{flex:1;display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;}
#crtModal img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 0 20px rgba(0,0,0,.25);}

@media (max-width:370px){
  .crt-thumb{width:260px;height:340px;}
  .crt-thumb img{width:170px; height:240px;}
  .crt-name{font-size:15px;}

  #crtModal .modal-dialog{max-width:80%;} 
  #crtModal .modal-content{width:100%;height:auto;max-height:80dvh;}
  #crtModal img{max-width:80%;max-height:100%;object-fit:contain; margin: 60px 0 40px; box-shadow:0 0 15px rgba(0,0,0,.3);}
}
*/