/* 시공사례 상세 화면 (case.html) · 2026-09-15 분리
     · CMS 미리보기 칸(/cms)도 이 파일을 그대로 읽는다
     · 그래서 여기만 고치면 실제 화면과 미리보기가 같이 바뀐다 */

.btn{display:inline-block;padding:14px 26px;font-size:16px;font-weight:600;border-radius:6px;border:0;cursor:pointer;font-family:inherit;}

.btn-line{border:1px solid var(--green);color:var(--green);background:#FFFFFF;}
.btn-line:hover{background:var(--green-soft);}

.page-head{background:var(--bg-alt);border-bottom:1px solid var(--line);padding:52px 0;}
.page-head .back{font-size:15px;color:var(--ink-soft);}
.page-head .back:hover{color:var(--green);}
.page-head h1{font-size:32px;margin-top:12px;}
.page-head .sub{margin-top:8px;font-size:17px;color:var(--ink-soft);}
.section{padding:56px 0;}
.closing{padding:64px 0 72px;text-align:center;border-top:1px solid var(--line);}
.closing h2{font-size:26px;}
.closing p{margin-top:14px;color:var(--ink-soft);}
.closing .row{display:flex;gap:10px;justify-content:center;margin-top:28px;flex-wrap:wrap;}

/* ===== 상세 전용 ===== */
.detail{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start;}
/* 2026-09-15 사장님 확정 · 정사각형으로 잘라 채운다 (여백 없이)
     · 여백(위아래·좌우 빈 곳)을 보여주지 말 것 · 어떤 사진이 와도 칸을 꽉 채운다 */
.viewer{position:relative;border-radius:10px;overflow:hidden;background:#DEDCD4;aspect-ratio:1/1;}
.viewer .slide{position:absolute;inset:0;display:none;align-items:center;justify-content:center;color:var(--ink-mute);font-size:15px;}
.viewer .slide.on{display:flex;}
.viewer .slide img{width:100%;height:100%;object-fit:cover;}
.viewer .arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.92);cursor:pointer;font-size:20px;line-height:1;color:var(--ink);display:flex;align-items:center;justify-content:center;}
.viewer .arrow:hover{background:#FFFFFF;}
.viewer .prev{left:12px;}
.viewer .next{right:12px;}
.viewer .count{position:absolute;right:12px;bottom:12px;background:rgba(28,28,26,.72);color:#FFFFFF;font-size:13px;padding:5px 11px;border-radius:20px;}

.thumbs{display:flex;justify-content:center;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px;}
.thumbs button{flex:0 0 84px;height:64px;padding:0;border:2px solid transparent;border-radius:7px;overflow:hidden;background:#DEDCD4;cursor:pointer;}
.thumbs button.on{border-color:var(--green);}
.thumbs img{width:100%;height:100%;object-fit:cover;}
.thumbs::-webkit-scrollbar{height:4px;}
.thumbs::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}

.sidebar{border:1px solid var(--line);border-radius:10px;overflow:hidden;position:sticky;top:100px;}
.sidebar .head{padding:16px 22px;background:var(--green);color:#FFFFFF;font-size:17px;font-weight:600;}
.sidebar table{width:100%;border-collapse:collapse;font-size:16px;}
.sidebar th,.sidebar td{padding:13px 22px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);}
.sidebar th{color:var(--ink-soft);font-weight:400;width:1%;white-space:nowrap;padding-right:18px;}
.sidebar td{font-weight:600;padding-left:0;}
.sidebar tr:last-child th,.sidebar tr:last-child td{border-bottom:0;}
.sidebar .act{padding:18px 22px;border-top:1px solid var(--line);}
.sidebar .act .btn{display:block;text-align:center;}
.sidebar .extra{padding:16px 22px 18px;border-top:1px solid var(--line);background:var(--bg-alt);}
.sidebar .extra .label{font-size:14px;color:var(--ink-soft);}
.sidebar .extra ul{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;}
.sidebar .extra li{font-size:14px;font-weight:600;color:var(--green);background:var(--green-soft);padding:6px 11px;border-radius:5px;}

.summary{margin-top:40px;max-width:760px;}
.summary h2{font-size:22px;}
.summary p{margin-top:14px;color:var(--ink-soft);}

@media (max-width:1024px){
  .footer-top{grid-template-columns:1fr 1fr;}
  .detail{grid-template-columns:1fr;gap:28px;}
  .sidebar{position:static;}
}
@media (max-width:768px){
  body{font-size:16px;}
  .wrap{padding:0 18px;}
  .topbar{display:none;}
  .header .wrap{height:64px;gap:12px;}
  .logo img{height:32px;}
  .nav,.header-cta{display:none;}
  .burger{display:block;}
  .nav.open{display:block;position:absolute;top:64px;left:0;right:0;background:#FFFFFF;border-bottom:1px solid var(--line);padding:8px 18px 20px;margin:0;}
  .nav.open .nav-item > a{padding:14px 0;border-bottom:1px solid var(--line);border-radius:0;}
  .nav.open .submenu{position:static;opacity:1;visibility:visible;transform:none;border:0;padding:4px 0 10px;min-width:0;}
  .page-head{padding:34px 0;}
  .page-head h1{font-size:24px;}
  .section{padding:36px 0;}
  .gallery{grid-template-columns:1fr;}
  .viewer{aspect-ratio:1/1;}   /* 2026-09-15 · 넓은 화면과 같게 · 정사각형 crop */
  .viewer .arrow{width:38px;height:38px;}
  .thumbs button{flex:0 0 68px;height:52px;}
  .footer{padding:44px 0 96px;}
  .footer-top{grid-template-columns:1fr;gap:32px;}
  .mobilebar{display:flex;}
}