/* 시공사례 상세(cases/<현장>) 전용 모양 — 공통은 design.css.
 * 이름 → 한 줄 정보 · 문의 링크 → 폭 가득 표지 → 공간 탭 → 사진 짜임 → 다른 시공사례.
 * 사진 칸은 전부 버튼이다 — 누르면 크게 보기, 키보드로도 열린다 */

/* 뒤로 가기 줄(eyebrow 한 줄 + 12px) 만큼 덜 띄워, 현장 이름이 다른 페이지 제목과 같은 높이에 선다 */
.cd{padding-top:max(16px, var(--head-top) - 36px); --g:clamp(8px,1.2vw,16px);}
/* '← 시공사례' — 글자 자리는 그대로 두고 누르는 자리만 높이 44px(늘린 여백만큼 음수 여백) */
.cd-back a{text-decoration:none; display:inline-block; padding:calc((44px - 1.7em) / 2) 8px; margin:calc((1.7em - 44px) / 2) -8px;}
.cd-back a:hover{color:var(--ink-strong);}
/* 현장 이름도 페이지 제목(t-h1) — 목록에서 넘어와도 제목 크기·자리가 그대로 */
/* 한 줄 정보와 문의 링크를 같은 글자 밑선에 — 링크는 표지 오른쪽 끝과 같은 선. 좁으면 다음 줄로 */
.cd-sub{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 24px;}
.cd-sub + .t-meta, .cd-sub + .t-fine{margin-top:2px;}
/* 누르는 자리만 넓히고(음수 여백이라 글자 자리는 그대로) 초점 테두리는 아래 공간 탭(.tab)과 같은 둥근 안쪽 테두리 */
.cd-ask{display:inline-flex; align-items:baseline; gap:6px; padding:10px 6px; margin:-10px -6px; border-radius:6px;
  font-size:var(--fs-btn-sm); font-weight:600; letter-spacing:-.01em; color:var(--ink-strong); text-decoration:none; white-space:nowrap;}
.cd-ask:focus-visible{outline-offset:-2px;}
.cd-ask::after{content:"→"; content:"→" / ""; font-weight:500; transition:transform .2s var(--ease);}   /* 화살표는 읽지 않는다 */
.cd-ask:hover::after{transform:translateX(3px);}

.tile{display:block; position:relative; min-width:0; padding:0; border:0; margin:0; font:inherit; color:inherit;
      background:var(--surface); border-radius:var(--r-card); overflow:hidden; cursor:zoom-in; isolation:isolate;}
.tile img{width:100%; height:100%; object-fit:cover; -webkit-user-drag:none;}
@media (prefers-reduced-motion:no-preference){
  .tile img{transition:transform .8s var(--ease);}
  .tile:hover img{transform:scale(1.03);}
}
.tile:focus-visible{outline:2px solid var(--ink-strong); outline-offset:3px;}
@media (max-width:719px){ .tile{border-radius:var(--r-md);} }

/* 표지 — 첫 화면에 다 들어오게 높이를 화면에 맞춘다. --ct 는 표지 윗변(스크립트가 잰다) */
.cover{position:relative; margin-top:clamp(18px,2.2vw,28px);}
.tile.cd-cover{width:100%; aspect-ratio:16/9; border-radius:var(--r-hero);
  max-height:max(280px, calc(100vh - var(--ct, 330px) - 16px)); max-height:max(280px, calc(100svh - var(--ct, 330px) - 16px));}
@media (max-width:719px){ .tile.cd-cover{aspect-ratio:4/3; max-height:none; border-radius:var(--r-card);} }
/* 왼쪽 아래 — 오른쪽 아래는 '자주 묻는 질문' 버튼 자리 */
.cover-all{position:absolute; left:clamp(12px,1.6vw,20px); bottom:clamp(12px,1.6vw,20px);
  display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 16px 0 14px;
  border:0; border-radius:var(--r-md); background:rgba(255,255,255,.94); color:var(--ink-strong);
  font:inherit; font-size:var(--fs-btn-sm); font-weight:600; letter-spacing:-.01em; cursor:pointer;
  box-shadow:0 6px 20px rgba(46,41,36,.16);}
.cover-all:hover{background:#fff;}
@media (max-width:719px){ .cover-all{min-height:40px; padding:0 12px 0 11px;}
  .cover-all::after{content:""; position:absolute; inset:-2px 0;} }   /* 누르는 자리 44px — 보이는 크기는 그대로 */

/* 공간 탭(글자 탭은 design.css) — 사진을 내리는 동안 머리 아래 붙어 따라온다. 폰은 옆으로 민다 */
.rooms{position:sticky; top:calc(var(--nav-h) + 1px); z-index:20; background:var(--canvas);}
.rooms-mark{height:1px; margin:clamp(8px,1.2vw,16px) 0 -1px;}   /* 탭 줄이 머리 아래 붙는 자리를 재는 표시 */

/* 사진 짜임 — 한 줄 안의 사진은 높이가 같게 비율대로 폭을 나눈다(cases.js 의 w·h 로 미리 자리를 잡는다) */
.gal{display:flex; flex-direction:column; gap:var(--g); margin-top:clamp(14px,1.6vw,20px);}
.gal .row{display:flex; gap:var(--g); justify-content:center;}
.gal .row > .tile{flex:var(--a) 1 0%; aspect-ratio:var(--a);}
/* 한 장 줄 — 가로는 폭 가득, 정사각에 가까우면 3:2 높이를 넘지 않게 좁힌다.
   세로 한 장은 넓은 화면에서 세 칸 중 한 칸, 폰은 폭 가득(4:5) */
.gal .row.one > .tile{flex:0 1 auto; width:min(100%, calc(var(--a) * 66.667%));}
.gal .row.p1{justify-content:flex-start;}
.gal .row.p1 > .tile{width:calc((100% - var(--g) * 2) / 3);}
@media (max-width:719px){ .gal .row.p1 > .tile{width:100%;} }
/* 넓은 화면 — 한 줄은 머리·공간 탭 아래 보이는 높이(--hmax)의 1.15배까지.
   짜임 폭은 페이지에 하나: 세로 두 장(4:5, 비율 합 1.6)이 그 높이에 들게 정한다(1.84 = 1.6 × 1.15).
   그보다 높은 가로 한 장만 위아래를 조금 자른다 — 줄마다 폭이 달라 가장자리가 들쭉날쭉하지 않게 */
@media (min-width:720px){
  .gal{--vh:100vh; --hmax:max(320px, var(--vh) - var(--nav-h) - 72px);
       width:100%; margin-inline:auto; max-width:calc(var(--hmax) * 1.84 + var(--g));}
  @supports (height:100svh){ .gal{--vh:100svh;} }
  .gal .row > .tile{max-height:calc(var(--hmax) * 1.15);}
}
.gal .tile{scroll-margin-top:calc(var(--nav-h) + 80px); scroll-margin-bottom:24px;}

/* 다른 시공사례 — 사진 다음 곁가지라 제목은 섹션 제목보다 한 단계 아래(t-title-md).
   제목(24)과 버튼 글자(15)는 크기가 달라 아래를 맞추면 제목이 처져 보여서 가운데를 맞춘다 */
.cd-more{padding-top:var(--sec);}
.cd-more-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:clamp(18px,2.4vw,28px);}
.cd-more-head .more{margin-top:0; flex:none;}
.cd-rail{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); list-style:none; margin:0; padding:0;}
.cd-rail a{display:block; text-decoration:none; color:inherit;}
.cd-rail .photo{border-radius:var(--r-card); overflow:hidden; background:var(--surface); aspect-ratio:3/2; isolation:isolate;}
.cd-rail .photo img{width:100%; height:100%; object-fit:cover;}
@media (prefers-reduced-motion:no-preference){
  .cd-rail .photo img{transition:transform .8s var(--ease);}
  .cd-rail a:hover .photo img{transform:scale(1.04);}
}
/* 사진 아래 이름(.cap)은 홈 사진 줄과 같은 모양 — design.css */
@media (max-width:719px){
  .cd-rail{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px;
           margin:0 calc(var(--pad) * -1); padding:0 var(--pad) 6px; scrollbar-width:none; scroll-padding-inline:var(--pad);}
  .cd-rail::-webkit-scrollbar{display:none;}
  .cd-rail li{flex:0 0 80%; scroll-snap-align:start;}
}

/* ── 크게 보기 — 흰 바탕. 넓은 화면은 양옆 화살표, 폰은 아래에 ‹ 3 / 36 › ── */
.lb{position:fixed; inset:0; z-index:300; display:grid; grid-template-rows:auto minmax(0,1fr) auto;
    background:var(--canvas); color:var(--ink-strong); opacity:0; transition:opacity .22s ease;}
.lb.on{opacity:1;}
.lb-top{display:flex; align-items:center; gap:14px; padding:12px clamp(16px,2.4vw,28px);}
.lb-t{margin:0; flex:1; min-width:0; font-size:var(--fs-sm); font-weight:600; letter-spacing:-.02em;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lb-count{margin:0; font-size:var(--fs-meta); font-weight:500; font-variant-numeric:tabular-nums; color:var(--ink-muted); white-space:nowrap;}
.lb button, .sheet-x{appearance:none; border:0; font:inherit; color:var(--ink-strong); cursor:pointer;
           display:grid; place-items:center; background:var(--tint); border-radius:50%;}
.lb button:hover, .sheet-x:hover{background:var(--tint-hover);}
.lb button:disabled{opacity:.28; cursor:default; background:var(--tint);}
.lb-x, .sheet-x{width:44px; height:44px; flex:none;}
.lb-stage{position:relative; min-height:0; display:flex; align-items:center; justify-content:center;
          padding:0 clamp(16px,7.5vw,112px) clamp(16px,2.6vw,32px); touch-action:pan-y pinch-zoom;
          user-select:none; -webkit-user-select:none; overflow:hidden;}
.lb-img{display:block; max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--r-md);
        background:var(--surface); -webkit-user-drag:none;}
.lb-img.anim{transition:transform .34s var(--ease), opacity .24s ease;}
.lb-bot{display:contents;}
.lb-nav{position:absolute; top:50%; width:52px; height:52px; margin-top:-26px; z-index:2;}
.lb-prev{left:clamp(12px,2vw,32px);}
.lb-next{right:clamp(12px,2vw,32px);}
.lb-bot .lb-count{display:none;}
@media (max-width:719px){
  .lb-top{padding:8px 12px 8px 20px;}
  .lb-top .lb-count{display:none;}
  .lb-stage{padding:0;}
  .lb-img{border-radius:0;}
  .lb-bot{display:flex; align-items:center; justify-content:space-between;
          padding:10px 16px calc(12px + env(safe-area-inset-bottom, 0px));}
  .lb-bot .lb-count{display:block;}
  .lb-nav{position:static; margin:0; width:48px; height:48px;}
}
/* body 는 clip — hidden 이면 머리(sticky)가 창을 여는 동안 제자리를 잃는다(자주 묻는 질문 창과 같은 까닭) */
html.lb-lock{overflow:hidden;}
html.lb-lock body{overflow:hidden; overflow:clip;}

/* ── 모아 보기 — 사진 비율 그대로 줄을 맞춘 격자(잘리지 않음). 전체일 땐 공간마다 묶는다 ── */
.sheet{position:fixed; inset:0; z-index:250; background:var(--canvas); overflow-y:auto; overscroll-behavior:contain;
       opacity:0; transform:translateY(18px); transition:opacity .24s ease, transform .36s var(--ease);}
.sheet.on{opacity:1; transform:none;}
.sheet-bar{position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:14px; min-height:64px;
           padding:10px var(--pad); background:var(--canvas); border-bottom:1px solid var(--hairline);}
/* 창 제목은 자주 묻는 질문 창 제목과 같은 크기, 안의 공간 이름(.sheet-h)은 한 단계 아래 작은 제목 */
.sheet-t{flex:1; min-width:0; margin:0; font-size:var(--fs-card); font-weight:600; color:var(--ink-strong); letter-spacing:-.02em;
         white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sheet-t span{font-weight:400; color:var(--ink-muted); margin-left:8px;}
.sheet-bar .btn{min-height:42px; padding:0 16px; font-size:var(--fs-btn-sm);}
@media (max-width:719px){ .sheet-bar .btn{display:none;} .sheet-bar{min-height:56px; padding:6px 12px;} }
/* 아주 좁은 폰 — 긴 현장 이름('… 두 번째 집')과 '사진 N장'이 잘리지 않게 한 단계 작게, 장 수는 아랫줄로 */
@media (max-width:359px){ .sheet-t{font-size:var(--fs-sm); line-height:1.35;} .sheet-t span{display:block; margin-left:0; font-size:var(--fs-meta);} }
.sheet-in{max-width:var(--wrap); margin:0 auto; padding:clamp(14px,2.4vw,28px) var(--pad) calc(48px + env(safe-area-inset-bottom, 0px));}
.sheet-h{margin:clamp(22px,3vw,36px) 0 12px; font-size:var(--fs-sm); font-weight:600; letter-spacing:-.02em; line-height:1.45; color:var(--ink-strong);}
.sheet-h:first-child{margin-top:4px;}
.just{display:flex; flex-wrap:wrap; gap:8px; --rh:clamp(104px,16vw,220px);}
.just .tile{flex:calc(var(--a) * 100) 1 calc(var(--a) * var(--rh)); aspect-ratio:var(--a); border-radius:12px;}
.just::after{content:""; flex-grow:1000000;}
/* 한 장뿐이면 격자 칸 크기 대신 크게 가운데 */
.just.solo{justify-content:center;}
.just.solo::after{content:none;}
.just.solo .tile{flex:none; width:min(100%, calc(var(--a) * (100vh - 160px))); width:min(100%, calc(var(--a) * (100svh - 160px)));}
@media (max-width:719px){ .just{gap:6px;} .just .tile{border-radius:8px;} }
@media (prefers-reduced-motion:reduce){ .lb, .lb-img.anim, .sheet{transition:none;} }

/* 움직임 — 첫 화면은 표지 사진 하나만 홈 첫 화면처럼 살짝 줄어들며 자리잡는다(글은 그대로).
   표지는 투명에서 시작하지 않는다 — 그러면 사진이 다 뜬 뒤에도 페이지가 늦게 그려진 것으로 잡힌다.
   아래 사진 짜임은 처음부터 보인다(나타나기 없음). '다른 시공사례'는 섹션째 한 번 옅게(site.js) */
@media (prefers-reduced-motion:no-preference){
  .tile.cd-cover img{animation:zd-hero-img 1.6s var(--ease) backwards;}
}
/* 같은 단지 다른 집 표시 — 이름 옆에 작고 흐리게(아래 '다른 시공사례' 이름 옆 표시는 design.css) */
.cd-head h1 .nth{display:inline-block; margin-left:.45em; font-size:var(--fs-card); font-weight:500; letter-spacing:0; color:var(--ink-muted); vertical-align:.35em;}

/* 스크립트가 꺼진 화면 — 공간 탭·크게 보기 없이 사진을 비율대로 줄 맞춰 늘어놓는다(모아 보기 격자와 같은 모양) */
.just.nojs{margin-top:clamp(14px,1.6vw,20px);}
.just.nojs .tile{cursor:auto;}