/* 시공 사례 목록·상세, 상담신청 — 3차 화면 치수 기준 */
.sub-hero img{width:100%;height:auto}

/* 목록 */
.bd-list{padding:103px 0 133px}
.bd-head{max-width:974px;margin:0 auto;text-align:center}
.bd-head h2{font-size:40px;font-weight:500;line-height:1;letter-spacing:-.02em}
.bd-note{margin-top:30px;font-size:15px;line-height:1.7;color:#777}
.bd-search{display:flex;gap:14px;margin-top:40px}
.bd-search input{flex:1;min-width:0;height:48px;padding:0 25px;border:1px solid #866646;border-radius:24px;font:inherit;font-size:16px;font-weight:500;color:#222;outline:0}
.bd-search input::placeholder{color:#999}
.bd-search button{flex:none;width:48px;height:48px;border-radius:50%;background:#866646;color:#fff;display:grid;place-items:center;transition:background .2s}
.bd-search button:hover{background:var(--brown-d)}
.bd-cate{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:45px}
.bd-cate button{position:relative;width:100%;height:48px;padding:0 12px 0 43px;border:1px solid #866646;border-radius:24px;text-align:left;font-size:16px;font-weight:600;color:#866646;transition:background .2s,color .2s}
.bd-cate button.on,.bd-cate button:hover{background:var(--brown);color:#fff}
.bd-cate button::before,.bd-cate button::after{content:"";position:absolute;top:50%;width:20px;height:20px;transform:translateY(-50%);background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.bd-cate button::before{left:15px}
.bd-cate button.on::before,.bd-cate button.on::after{opacity:.35}
.bd-cate button::after{right:16px;width:16px;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E")}
.bd-cate li:nth-child(1) button::before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3.5' y='3.5' width='7' height='7'/%3E%3Crect x='13.5' y='3.5' width='7' height='7'/%3E%3Crect x='3.5' y='13.5' width='7' height='7'/%3E%3Crect x='13.5' y='13.5' width='7' height='7'/%3E%3C/svg%3E")}
.bd-cate li:nth-child(2) button::before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M3 9 12 4l9 5H3zM5 9v9M9.5 9v9M14.5 9v9M19 9v9M3 20.5h18'/%3E%3C/svg%3E")}
.bd-cate li:nth-child(3) button::before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M2.5 9.5 12 5l9.5 4.5L12 14z'/%3E%3Cpath d='M6.5 11.5V16c0 1.5 2.5 3 5.5 3s5.5-1.5 5.5-3v-4.5'/%3E%3C/svg%3E")}
.bd-cate li:nth-child(4) button::before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3 16.5 10.5h-9z'/%3E%3Ccircle cx='7' cy='17' r='3.5'/%3E%3Crect x='13.5' y='13.5' width='7' height='7'/%3E%3C/svg%3E")}

.bd-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:78px 12.5px;max-width:1330px;margin:80px auto 0;padding:0 20px;box-sizing:content-box}
.bd-grid .ph{position:relative;height:300px;border-radius:8px;overflow:hidden;background:var(--sand-l)}
.bd-grid .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bd-grid a:hover .ph img{transform:scale(1.05)}
.bd-grid h3{margin-top:15px;font-size:18px;font-weight:600;line-height:1;color:#222;letter-spacing:-.02em}
.bd-grid .meta{margin-top:6px;font-size:15px;line-height:1.5;color:#888}
.bd-grid .empty{grid-column:1/-1;padding:60px 0;text-align:center;color:#888}

/* 상세 */
.bd-view{padding:120px 15px 145px}
#view{display:flex;flex-wrap:wrap;justify-content:center;max-width:1080px;margin:0 auto}
#view>*{width:100%;order:4}
#view h1{order:1;text-align:center;font-size:34px;font-weight:700;line-height:44px;letter-spacing:-.02em}
#view .cat,#view .meta{width:auto;order:2;margin-top:15px;font-size:14px;font-weight:600;line-height:1;color:#b6b6b6}
#view .meta{order:3;display:flex}
#view .cat::after,#view .meta li+li::before{content:"|";margin:0 4px;font-weight:400}
#view .note{margin-top:30px;text-align:center;font-size:12px;color:#999}
#view .body{margin-top:30px;font-size:16px;line-height:2;color:#333;white-space:pre-line}
#view .ph{position:relative;margin-top:32px;border-radius:10px;overflow:hidden}
#view .body+.ph{margin-top:50px}
#view .ph img{width:100%}
#view .empty{order:1;padding:80px 0;text-align:center;color:#888}
.bd-back{margin-top:41px;text-align:center}
.bd-back a{display:inline-block;padding:12px 28px;border:1px solid #222;border-radius:24px;font-size:16px;font-weight:600;line-height:1;transition:background .2s,color .2s}
.bd-back a:hover{background:#222;color:#fff}

/* 상담신청 */
.ct{display:flex;justify-content:space-between;max-width:1300px;margin:0 auto;padding:183px 15px 145px}
.ct-info{width:434px}
.ct-info h2{font-size:40px;font-weight:500;line-height:1;color:#111;letter-spacing:-.02em}
.ct-info>p{margin-top:60px;font-size:18px;line-height:24px;color:#888;white-space:nowrap}
.ct-info address{margin-top:85px;font-style:normal}
.ct-info address span{display:block}
.ct-info address span+span{margin-top:40px}
.ct-info small{display:block;font-size:14px;font-weight:300;color:#999}
.ct-info b{display:block;margin-top:12px;font-size:34px;font-weight:600;line-height:40px;color:#131313;letter-spacing:-.01em}
.ct-call{display:inline-flex;align-items:center;gap:8px;margin-top:70px;height:42px;padding:0 25px;border-radius:21px;background:#222;color:#fff;font-size:16px;font-weight:600;transition:background .2s}
.ct-call::before{content:"";width:4px;height:4px;border-radius:50%;background:#fff}
.ct-call:hover{background:var(--brown)}

#inq{position:relative;width:662px}
#inq ul{display:flex;flex-wrap:wrap;column-gap:20px}
#inq li{width:100%;margin-bottom:35px}
#inq li.ct-half{width:calc(50% - 10px)}
#inq li:last-child{margin-bottom:15px}
#inq li>label,#inq .lb{display:block;margin-bottom:15px;font-size:18px;font-weight:500;line-height:1;color:#111}
#inq em{font-style:normal;color:var(--brown)}
.ct-chips{display:flex;flex-wrap:wrap;gap:8px}
.ct-chip{position:relative;cursor:pointer}
.ct-chip input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ct-chip span{display:inline-block;padding:10px 20px;border:1px solid #ccc;border-radius:99px;font-size:16px;font-weight:500;line-height:16px;color:#555;transition:background .2s,color .2s,border-color .2s}
.ct-chip:hover span{border-color:var(--brown)}
.ct-chip input:checked+span{background:var(--brown);border-color:var(--brown);color:#fff}
.ct-chip input:focus-visible+span{outline:2px solid var(--brown);outline-offset:2px}
#inq input[type=text],#inq input[type=tel],#inq input[type=email],#inq select,#inq textarea{display:block;width:100%;height:56px;padding:0 26px;border:1px solid #ccc;border-radius:12px;background:#fff;font:inherit;font-size:18px;color:#111;outline:0;transition:border-color .2s}
#inq select{height:61px}
#inq textarea{height:146px;padding:16.5px 26px;resize:vertical;line-height:1.4}
#inq input:focus,#inq select:focus,#inq textarea:focus{border-color:var(--brown)}
#inq ::placeholder{color:#999}
.ct-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.ct-privacy{padding:16px 20px;border-radius:12px;background:#f6f1ea;font-size:14px;line-height:1.8;color:#666}
.ct-privacy summary{font-weight:600;color:#333;cursor:pointer}
.ct-privacy ol{margin:10px 0 6px 18px;list-style:decimal}
.ct-agree{display:flex;justify-content:space-between;align-items:flex-start;margin-top:20px}
.ct-agree label{display:flex;align-items:center;gap:8px;font-size:18px;line-height:22px;cursor:pointer}
.ct-agree input{flex:none;appearance:none;width:22px;height:22px;border:1px solid #bbb;border-radius:5px;background:#fff;cursor:pointer}
.ct-agree input:checked{border-color:var(--brown);background:var(--brown) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat}
.ct-agree button{flex:none;height:50px;padding:0 22px;border:1px solid #222;border-radius:12px;background:#fff;font-size:18px;font-weight:500;color:#222;transition:background .2s,color .2s}
.ct-agree button:hover{background:#222;color:#fff}
.ct-agree button:disabled{opacity:.5}
.form-msg{margin-top:14px;font-size:15px;line-height:1.6;color:var(--brown)}
.form-msg:empty{display:none}

@media (max-width:1200px){
  .bd-head{padding:0 20px;box-sizing:content-box}
  .bd-grid{grid-template-columns:repeat(4,1fr)}
  .ct{gap:40px}.ct-info{width:36%}#inq{flex:1;width:auto}
}
@media (max-width:1024px){
  .bd-grid{grid-template-columns:repeat(3,1fr)}
  .ct{display:block;max-width:700px;padding-left:30px;padding-right:30px}
  .ct-info{width:auto;text-align:center}
  .ct-info>p{white-space:normal}
  #inq{margin-top:80px}
}
@media (max-width:768px){
  .bd-head h2{font-weight:600}
  .bd-search{margin-top:29px}
  .bd-cate{grid-template-columns:repeat(2,1fr);margin-top:10px}
  .bd-cate button{height:44px}
  .bd-grid{grid-template-columns:repeat(2,1fr);gap:48px 8px;margin-top:60px}
  .bd-grid .ph{height:182px}
  .bd-grid h3{font-size:15px;font-weight:500;line-height:22px}
  .bd-grid .meta{margin-top:4px;font-size:13px}
  .bd-list{padding-bottom:30px}
  .bd-view{padding:125px 15px 78px}
  #view h1{font-size:30px;line-height:40px}
  #view .note{margin-top:28px}
  #view .body{margin-top:28px;font-size:17px;line-height:1.9;color:#222}
  #view .ph{margin-top:32px}
  #view .body+.ph{margin-top:60px}
  .bd-back{margin-top:43px}
  .ct{padding-top:103px}
  .ct-info h2{font-size:32px}
  .ct-info>p{margin-top:30px;font-size:17px;line-height:30px}
  .ct-info address{margin-top:55px}
  .ct-info b{margin-top:17px;font-size:24px;line-height:29px}
  .ct-call{margin-top:58px}
  #inq li.ct-half{width:100%}
  .ct-agree{flex-wrap:wrap}
  .ct-agree label{width:100%}
  .ct-agree button{margin:85px 0 0 auto;padding:0 10px}
}