@charset "utf-8";
*{
box-sizing:border-box}
body{
margin:0;
background:white;
font-family:SUIT,Pretendard,"Malgun Gothic",Arial,sans-serif;
color:#282828}
.content{
width:calc(100% - 100px);
max-width:1416px;
margin:0 auto}
.page-heading{
text-align:center;
padding:60px 24px 95px}
.page-heading h1{
font-size:56px;
line-height:1.25;
font-weight:800;
letter-spacing:-2px;
margin:0 0 28px}
.page-heading p{
font-size:22px;
line-height:1.6;
margin:0;
color:#666}
.case-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:60px 88px;
padding-bottom:150px}
.case-card{
min-width:0}
.case-card img{
display:block;
width:100%;
aspect-ratio:413/290;
object-fit:cover;
border-radius:22px}
.case-card h2{
text-align:center;
font-size:22px;
line-height:1.5;
font-weight:700;
margin:26px 0 0}
@media(max-width:1200px){
.case-grid{
gap:50px 35px}
}
@media(max-width:900px){
.content{
width:calc(100% - 48px)}
.case-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:45px 25px;
padding-bottom:90px}
.page-heading{
padding:50px 24px 65px}
.page-heading h1{
font-size:42px}
.page-heading p{
font-size:19px}
}
@media(max-width:600px){
.case-grid{
grid-template-columns:1fr;
gap:40px}
.page-heading h1{
font-size:36px}
.page-heading p{
font-size:17px}
.case-card h2{
font-size:20px;
margin-top:20px}
}
.case-card a{
display:block;
color:inherit;
text-decoration:none}
.case-card a:focus-visible{
outline:3px solid #173e75;
outline-offset:8px}
.case-detail{
padding-top:75px;
padding-bottom:110px;
max-width:1200px}
.detail-heading{
border-bottom:1px solid #ddd;
text-align:center;
padding:0 0 45px;
margin-bottom:65px}
.detail-heading p{
font-size:18px;
color:#153f77;
margin:0 0 15px}
.detail-heading h1{
font-size:38px;
font-weight:700;
margin:0;
line-height:1.4}
.detail-photos{
max-width:1000px;
margin:0 auto}
.detail-photos img{
display:block;
width:100%;
height:auto;
margin-bottom:35px;
border-radius:12px}
.case-navigation{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:25px;
border-top:1px solid #ddd;
padding-top:40px;
margin-top:65px}
.case-navigation a{
color:#454545;
text-decoration:none;
font-size:17px}
.case-navigation>a:last-child{
text-align:right}
.case-navigation .back-list{
padding:14px 35px;
border:1px solid #173e75;
border-radius:5px;
color:#173e75;
text-align:center}
@media(max-width:600px){
.case-detail{
padding-top:50px;
padding-bottom:70px}
.detail-heading{
margin-bottom:35px;
padding-bottom:30px}
.detail-heading h1{
font-size:28px}
.case-navigation{
gap:10px;
padding-top:25px}
.case-navigation a{
font-size:14px}
.case-navigation .back-list{
padding:12px 18px}
.detail-photos img{
border-radius:8px}
}
/* Four columns on desktop;
 case photos continue vertically in detail. */
.case-grid{
max-width:none;
width:calc(100% - 100px);
grid-template-columns:repeat(4,minmax(0,1fr));
column-gap:35px}
.detail-photos img{
margin-bottom:30px}
@media(max-width:1200px){
.case-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:45px 25px}
}
@media(max-width:900px){
.case-grid{
width:calc(100% - 48px);
grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
.case-grid{
grid-template-columns:1fr}
.detail-photos img{
margin-bottom:20px}
}

.case-grid { width: calc(100% - 64px); max-width: none; }
@media (max-width: 900px) { .case-grid { width: calc(100% - 40px); } }
.case-card { transition: opacity 1s ease, transform 1s ease, translate .4s ease; }
.case-card:hover { translate: 0 -6px; }
.case-card img { transition: transform .55s ease, box-shadow .45s ease; }
.case-card:hover img,
.case-card a:focus-visible img { transform: scale(1.045); box-shadow: 0 16px 34px rgba(21, 63, 119, .16); }
.case-card:hover h2,
.case-card a:focus-visible h2 { color: #173e75; }
.case-navigation .back-list { transition: background .3s ease, color .3s ease; }
.case-navigation .back-list:hover { background: #173e75; color: #fff; }
.case-navigation a:hover { color: #173e75; }

/* 제목과 시공사례명 크기 조정 */
.page-heading h1{font-size:44px;font-weight:700}
.case-card h2{font-size:18px;font-weight:500}
@media(max-width:900px){.page-heading h1{font-size:36px}}
@media(max-width:600px){.page-heading h1{font-size:30px}.case-card h2{font-size:17px}}

/* 페이지 제목 1pt 증가. 안내 문장은 기존 크기 유지 */
.page-heading h1{font-size:calc(44px + 1pt)}
@media(max-width:900px){.page-heading h1{font-size:calc(36px + 1pt)}}
@media(max-width:600px){.page-heading h1{font-size:calc(30px + 1pt)}}

/* 상세 이동 버튼: 제품 상세와 동일한 크기 및 롤오버 */
.case-navigation{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.case-navigation>span:empty{display:none}
.case-navigation a,.case-navigation .back-list{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:14px 28px;border:1px solid #d4dce6;border-radius:5px;background:#fff;color:#173e75;font:inherit;font-size:16px;line-height:1.5;text-align:center;font-weight:400;text-decoration:none;transition:none;transform:none;box-shadow:none}
.case-navigation a:hover,.case-navigation a:focus-visible{background:#173e75;color:#fff;border-color:#173e75;font-weight:400;transition:none;transform:none}
@media(max-width:600px){.case-navigation{gap:10px}.case-navigation a,.case-navigation .back-list{padding:14px 18px}}