/* 클못 clemot — 세 페이지 공통 스타일.
 *
 *   index.html   메인 (build.py 가 생성. 슬롯 배치 CSS 는 그 안에 따로 들어간다)
 *   works.html   시공사례
 *   contact.html 문의
 *
 * 여기에는 "세 페이지가 똑같이 쓰는 것"만 둔다 —
 * 토큰, 리셋, 위·아래 고정 바, 라이트박스.
 * 페이지마다 다른 레이아웃(메인의 12슬롯, 시공사례의 3열, 문의의 연락처 줄)은 각 파일 안에 있다.
 *
 * 값의 출처는 arkitektkontoretvest.no 실측이다 (2026-09-18).
 * 자세한 근거는 build.py 맨 위 주석에 적어 뒀다.
 *
 * 이 파일은 build.py 가 건드리지 않는다. 마음대로 고쳐도 안 날아간다.
 * 저장하면 미리보기가 자동으로 새로고침된다 (미리보기.command 실행 중일 때).
 */

:root {
  --bg: #F5F2ED;        /* AKV 배경 실측값. 순백이 아니다 */
  --ink: #000;
  --mute: #8a857e;      /* 라벨·카피라이트 */
  --line: #d7d2cb;      /* 연락처 줄 구분선 */
  --ph: #e8e5e0;        /* 사진이 뜨기 전 자리 색 */

  --side: 16px;         /* 좌우 여백 — AKV 는 화면의 1% 남짓밖에 안 준다 */
  --gap: 16px;          /* 칼럼 사이 */
  --top: 120px;         /* 본문 시작 높이 (AKV pt-[120px]) */
  --head: 48px;         /* 고정 바 높이 (AKV h-12) */

  /* 글자 크기는 AKV(arkitektkontoretvest.no) 실측값을 그대로 쓴다. 모바일은 맨 아래에서 다시 정의.
       캡션  원문 클래스가 text-sm md:text-xl → PC 20px / 모바일 14px
       메뉴  .nav-link — 캡션 대비 재어 16px
       상호명 AKV 는 SVG 로고라 높이로 지정한다(md:h-[16px]).
             우리는 텍스트라, Pretendard 700 에서 '클못' 의 잉크 높이가 16px 이 되는 크기를
             캔버스로 재어 19px 로 잡았다 (19px → 16.1px). */
  --fs-brand: 19px;     /* 상호명 클못·clemot. 굵기 700 */
  --fs-nav: 16px;       /* 길잡이 — 메뉴 */
  --fs-caption: 20px;   /* 읽을거리 — 사진 이름, 상세 정보, 연락처 값 */
  --fs-meta: 14px;      /* 곁다리 — 라벨, 목록 메타, 지도보기, 카피라이트, 본문 기본값 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
               "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px;      /* AKV 기본값. 작은 글자는 --fs-meta 로 따로 지정한다 */
  line-height: 1.33;    /* AKV 의 leading-[1.33] */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ── 위쪽 고정 바 ─────────────────────────────
   배경색을 깔아 사진이 그 아래로 지나간다.
   상호명을 두 덩어리로 쪼개 왼쪽 끝과 8번 칼럼에 둔다 (AKV 의 ARKITEKTKONTORET / VEST). */
.head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--head); background: var(--bg);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gap);
  padding: 0 var(--side); align-items: center;
}
/* 상호명은 굵게 — 메뉴와 크기는 같지만 무게로 구분한다 (2026-09-18 룰) */
.head .b1 { grid-column: 1/6;  font-size: var(--fs-brand); letter-spacing: .01em; font-weight: 700; }
.head .b2 { grid-column: 8/10; font-size: var(--fs-brand); letter-spacing: .06em; font-weight: 700; }
/* 상호명 두 덩어리 다 홈으로 간다 */
.head .b1:hover, .head .b2:hover { opacity: .5; }
.head .nav {
  grid-column: 10/13; justify-self: end;
  display: flex; gap: 24px; font-size: var(--fs-nav);
}
/* 평소엔 진하고, 지금 보고 있는 곳과 마우스 올린 곳이 흐려진다.
   AKV 원문: .navigation a.is-active, .navigation a:hover { opacity: .5 } (2026-09-26 소장님, 9/19 에 뒤집었던 것을 원문대로) */
.head .nav a { opacity: 1; transition: opacity .15s; }
.head .nav a:hover,
.head .nav a[aria-current] { opacity: .5; }
.menu-btn { display: none; }        /* 짝대기는 모바일에서만 */

/* ── 아래 고정 바 ───────────────────────────── */
.foot {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  height: var(--head); background: var(--bg);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gap);
  padding: 0 var(--side); align-items: center;
}
.foot small { grid-column: 8/13; font-size: var(--fs-meta); color: var(--mute); }
/* 사례 상세에서 목록으로 — 푸터가 이미 고정 바라 따로 떠 있는 버튼을 두지 않는다 */
.foot .back { grid-column: 1/6; font-size: var(--fs-nav); opacity: .5; transition: opacity .15s; }
.foot .back:hover { opacity: 1; }

/* ── 사례 상세 페이지 (<slug>.html) ─────────────
   AKV 처럼 라이트박스가 아니라 진짜 페이지다. 헤더가 그대로 살아 있어
   "닫기" 가 없어도 어디로든 갈 수 있고, 뒤로가기가 자연스럽게 돌아가기가 된다. */
.case { padding: var(--top) var(--side) calc(var(--head) + 80px); }


/* 맨 위 — 대표 사진이 왼쪽, 오른쪽에 정보.
   사진을 화면 높이에 맞춰 줄여서 스크롤 없이 한눈에 들어오게 한다.
   flex-end 라서 글의 아래선이 사진의 아래선에 맞는다. */
.case-lead {
  display: flex; align-items: flex-end; gap: 0 calc(var(--gap) * 2);
  margin-bottom: 120px;
}
.case-lead figure { flex: 0 1 auto; min-width: 0; }
.case-lead img {
  /* --top 은 위 여백, 나머지는 바닥에 남기는 숨통 */
  max-height: calc(100vh - var(--top) - 40px);
  width: auto; max-width: 100%;
  background: var(--ph);
}
/* 유형 / 이름 / 평형을 한 줄씩 쌓는다 (연도는 2026-09-26 에 뺐다) */
.case-meta { flex: 0 1 auto; font-size: var(--fs-caption); line-height: 1.6; }
.case-meta p { white-space: nowrap; }

/* 나머지 컷 — 대표 사진과 같은 높이 한도를 두고 가운데 세운다.
   폭을 꽉 채우지 않으니 양옆에 여백이 생기고, 한 장씩 넘겨 보는 호흡이 된다. */
.case-imgs { display: flex; flex-direction: column; align-items: center; gap: 64px; }
.case-imgs img {
  max-height: calc(100vh - var(--top) - 40px);
  width: auto; max-width: 100%;
  background: var(--ph);
}

/* ── 모바일 ───────────────────────────────────
   글자 크기는 토큰을 여기서 다시 정의한다. 규칙마다 배율을 곱하지 않는다 —
   그러면 14.4px 같은 어정쩡한 값이 나오고, 크기를 바꿀 때 고칠 곳이 흩어진다.
   상호명의 영문 덩어리는 자리가 없어 감춘다. */
@media (max-width: 767px) {
  :root {
    --gap: 8px; --head: 44px; --top: 80px;
    --fs-brand: 16px;
    --fs-nav: 14px;
    --fs-caption: 14px;   /* AKV 의 text-sm */
    /* --fs-meta 는 14px 그대로 */
  }
  /* 상호명은 모바일에서도 두 덩어리 다 보인다 (2026-09-21 소장님).
     메뉴는 오른쪽 위 짝대기 두 개로 접는다. 누르면 화면이 바뀌지 않고
     상호명 자리에 메뉴가 들어선다 — 참고 사이트(AKV)와 같은 방식 (2026-09-26 소장님).
     움직임은 site.js 맨 아래가 맡는다. 여기는 처음(닫힌) 모습만 정한다. */
  .head .b1 { grid-column: 1/4; }
  .head .b2 { grid-column: 4/9; display: block; }
  .head .nav {
    /* grid-column 을 풀어야 한다 — 그리드 자식은 absolute 여도 자기 칸(10~12)을 틀로 잡는다 */
    grid-column: auto; justify-self: start; white-space: nowrap;
    position: absolute; left: var(--side); top: 0; height: var(--head);
    align-items: center; gap: 40px;       /* AKV gap-10 */
    font-size: 16px;                      /* AKV text-base — 상호명과 같은 크기로 들어선다 */
    opacity: 0; visibility: hidden; pointer-events: none;
  }

  /* 짝대기 두 개 — 열리면 높이가 0 으로 접혀 한 개가 된다 (AKV: 28px 폭, 10px 간격) */
  .menu-btn {
    grid-column: 11/13; justify-self: end;
    display: flex; flex-direction: column; justify-content: space-between;
    box-sizing: content-box; width: 28px; height: 10px; padding: 16px 0;
    border: 0; background: none; cursor: pointer;
    transition: height .5s cubic-bezier(.25,.46,.45,.94);
  }
  .menu-btn span { display: block; border-top: 1px solid var(--ink); }
  .menu-btn span + span { margin-top: -1px; }
  .menu-btn.on { height: 0; }
  .foot .back { grid-column: 1/6; }
  .foot small { grid-column: 6/13; justify-self: end; }

  /* 상세 첫 화면 — 좁은 화면에선 옆에 둘 자리가 없어 글을 사진 아래로 내린다.
     사진도 화면 높이의 일부만 쓰게 해서 글이 같이 보이도록 남겨 둔다. */
  .case-lead { display: block; margin-bottom: 80px; }
  .case-lead img { max-height: calc(100vh - var(--top) - 200px); }
  .case-meta { margin-top: 14px; }
  .case-imgs { gap: 40px; }
}


/* ── 메인 12슬롯 배치 ──────────────────────────
   AKV 원문에서 뜬 고정 레이아웃이다. 어떤 사진이 들어오든 자리는 그대로다.
   사진·캡션 내용은 content/메인배치.csv 에서 읽어 site.js 가 채운다.
     --r    그 자리가 쓰는 사진 비율 (사진은 이 비율로 잘려 들어간다)
     --cols 보통 12, 반폭 블록(11·12)만 6 */
/* 메인만 화면을 고정한다 — 스크롤을 site.js 가 직접 굴리기 때문이다.
   <html class="home"> 이 붙은 페이지에만 걸리게 해서, 나머지 페이지는 평범하게 스크롤된다.
   (예전엔 html 에 무조건 걸고 body 로만 풀어서, 시공사례·문의가 스크롤되지 않았다) */
html.home, html.home body { height: 100%; overflow: hidden; }

.viewport { position: fixed; inset: 0; overflow: hidden; }
.track { will-change: transform; }
.set { padding: 0 var(--side); }
.set:first-child { padding-top: var(--top); }

.blk { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 0 var(--gap); }

.ph { cursor: pointer; }
.ph img {
  width: 100%; aspect-ratio: var(--r); object-fit: cover; object-position: center;
  background: var(--ph);
}

/* 캡션 — 평소엔 흐리게(.5), 그 집에 마우스를 올리면 검정.
   AKV 원문: .projects>div>div:hover a { opacity: 1 } — 사진 자체는 변하지 않는다. */
.cap {
  font-size: var(--fs-caption); cursor: pointer; opacity: .5; transition: opacity .15s;
  display: flex; flex-wrap: wrap; gap: 0 16px;   /* 줄이 바뀌어도 왼쪽선이 맞는다 */
}
.blk:hover .cap { opacity: 1; }

.halfwrap { display: flex; gap: 0 calc(var(--gap) * 2); }
.halfwrap .blk { flex: 1 1 50%; min-width: 0; }

  .blk[data-b="1"]{--cols:12;--r:0.776;margin-bottom:0px}
  .blk[data-b="1"] .ph{grid-column:1/span 5;grid-row:1}
  .blk[data-b="1"] .cap{grid-column:6/span 7;grid-row:1;align-self:center}
  .blk[data-b="2"]{--cols:12;--r:0.75;margin-bottom:240px}
  .blk[data-b="2"] .ph{grid-column:8/span 3;grid-row:1}
  .blk[data-b="2"] .cap{grid-column:11/span 2;grid-row:1;align-self:start}
  .blk[data-b="3"]{--cols:12;--r:1.333;margin-bottom:240px}
  .blk[data-b="3"] .ph{grid-column:1/span 7;grid-row:1}
  .blk[data-b="3"] .cap{grid-column:8/span 5;grid-row:1;align-self:start}
  .blk[data-b="4"]{--cols:12;--r:1.333;margin-bottom:0px}
  .blk[data-b="4"] .ph{grid-column:8/span 5;grid-row:1}
  .blk[data-b="4"] .cap{grid-column:8/span 5;grid-row:2;margin-top:8px}
  .blk[data-b="5"]{--cols:12;--r:0.75;margin-bottom:120px}
  .blk[data-b="5"] .ph{grid-column:1/span 3;grid-row:1}
  .blk[data-b="5"] .cap{grid-column:4/span 9;grid-row:1;align-self:start}
  .blk[data-b="6"]{--cols:12;--r:0.75;margin-bottom:240px}
  .blk[data-b="6"] .ph{grid-column:6/span 6;grid-row:1}
  .blk[data-b="6"] .cap{grid-column:6/span 6;grid-row:2;margin-top:8px}
  .blk[data-b="7"]{--cols:12;--r:1.333;margin-bottom:120px}
  .blk[data-b="7"] .ph{grid-column:1/span 5;grid-row:1}
  .blk[data-b="7"] .cap{grid-column:6/span 7;grid-row:1;align-self:center}
  .blk[data-b="8"]{--cols:12;--r:1.333;margin-bottom:0px}
  .blk[data-b="8"] .ph{grid-column:8/span 4;grid-row:1}
  .blk[data-b="8"] .cap{grid-column:8/span 4;grid-row:2;margin-top:8px}
  .blk[data-b="9"]{--cols:12;--r:0.75;margin-bottom:120px}
  .blk[data-b="9"] .ph{grid-column:4/span 3;grid-row:1}
  .blk[data-b="9"] .cap{grid-column:4/span 9;grid-row:2;margin-top:8px}
  .blk[data-b="10"]{--cols:12;--r:1.333;margin-bottom:240px}
  .blk[data-b="10"] .ph{grid-column:6/span 7;grid-row:1}
  .blk[data-b="10"] .cap{grid-column:6/span 7;grid-row:2;margin-top:8px}
  .blk[data-b="11"]{--cols:6;--r:0.75;margin-bottom:120px}
  .blk[data-b="11"] .ph{grid-column:1/span 4;grid-row:1}
  .blk[data-b="11"] .cap{grid-column:1/span 6;grid-row:2;margin-top:8px}
  .blk[data-b="12"]{--cols:6;--r:0.75;margin-bottom:120px}
  .blk[data-b="12"] .ph{grid-column:2/span 4;grid-row:1}
  .blk[data-b="12"] .cap{grid-column:2/span 5;grid-row:2;margin-top:8px}

@media (min-width:1920px) {
    .blk[data-b="2"]{margin-bottom:420px}
    .blk[data-b="3"]{margin-bottom:420px}
    .blk[data-b="5"]{margin-bottom:240px}
    .blk[data-b="6"]{margin-bottom:420px}
    .blk[data-b="7"]{margin-bottom:240px}
    .blk[data-b="9"]{margin-bottom:240px}
    .blk[data-b="10"]{margin-bottom:420px}
    .blk[data-b="11"]{margin-bottom:240px}
    .blk[data-b="12"]{margin-bottom:240px}
}

/* ── 모바일 ───────────────────────────────────
   AKV 의 md: 없는 기본값들이다. 캡션은 전부 사진 아래로 내려가고,
   반폭 두 블록도 위아래로 풀린다. 블록 아래 여백은 120px 로 통일(max-md:pb-[120px]). */
@media (max-width:767px) {
  .halfwrap { display:block; }
  .blk { --cols:12; margin-bottom:120px !important; }
    .blk[data-b="1"] .ph{grid-column:1/span 7}
    .blk[data-b="1"] .cap{grid-column:1/span 12;grid-row:2;align-self:start;margin-top:8px}
    .blk[data-b="2"] .ph{grid-column:8/span 5}
    .blk[data-b="2"] .cap{grid-column:8/span 5;grid-row:2;align-self:start;margin-top:8px}
    .blk[data-b="3"] .ph{grid-column:1/span 8}
    .blk[data-b="3"] .cap{grid-column:1/span 12;grid-row:2;align-self:start;margin-top:8px}
    .blk[data-b="4"] .ph{grid-column:5/span 8}
    .blk[data-b="4"] .cap{grid-column:5/span 8;grid-row:2;align-self:start;margin-top:8px}
    .blk[data-b="5"] .ph{grid-column:1/span 6}
    .blk[data-b="5"] .cap{grid-column:1/span 12;grid-row:2;align-self:start;margin-top:8px}
    .blk[data-b="6"] .ph{grid-column:3/span 8}
    .blk[data-b="6"] .cap{grid-column:3/span 10;grid-row:2;align-self:start;margin-top:8px}
    .blk[data-b="7"] .ph{grid-column:1/span 6}
    .blk[data-b="7"] .cap{grid-column:1/span 12;grid-row:2;align-self:start;margin-top:8px}
    .blk[data-b="8"] .ph{grid-column:8/span 5}
    .blk[data-b="8"] .cap{grid-column:8/span 5;grid-row:2;align-self:start;margin-top:8px}
    .blk[data-b="9"] .ph{grid-column:4/span 9}
    .blk[data-b="9"] .cap{grid-column:4/span 9;grid-row:2;align-self:start;margin-top:8px}
    .blk[data-b="10"] .ph{grid-column:1/span 8}
    .blk[data-b="10"] .cap{grid-column:1/span 12;grid-row:2;align-self:start;margin-top:8px}
    .blk[data-b="11"] .ph{grid-column:1/span 7}
    .blk[data-b="11"] .cap{grid-column:1/span 12;grid-row:2;align-self:start;margin-top:8px}
    .blk[data-b="12"] .ph{grid-column:6/span 7}
    .blk[data-b="12"] .cap{grid-column:6/span 7;grid-row:2;align-self:start;margin-top:8px}
}

/* ── 시공사례 목록 (works.html) ─────────────── */
.list {
  padding: var(--top) var(--side) 120px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gap); row-gap: 72px;
}
.item:hover .meta { opacity: 1; }
/* 사진은 정사각으로 잘라 넣는다. 원본 비율이 섞여 있어도 줄마다 높이가 안 널뛴다. */
.item img {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center;
  background: var(--ph);
}
/* 유형·이름·평형을 세 줄로 쌓고, 오른쪽 끝에 화살표.
   왼쪽에 있던 연도 칸은 뺐다 — 사이트 어디에도 작업 연도를 두지 않는다 (2026-09-26 소장님) */
.meta {
  margin-top: 14px;
  display: grid; grid-template-columns: 1fr auto;
  align-items: start; gap: 5px 8px;
  font-size: var(--fs-meta); opacity: .5; transition: opacity .15s;
}
.meta .ty { grid-column: 1; grid-row: 1; }
.meta .nm { grid-column: 1; grid-row: 2; }
.meta .sz { grid-column: 1; grid-row: 3; }
.meta .ar { grid-column: 2; grid-row: 1; }

/* ── 소개 (about.html) ──────────────────────
   참고 사이트(AKV) 사무실 페이지(/kontoret) 원문 HTML 에서 옮긴 값이다 (2026-09-26).
   덩어리마다 12칸 그리드, 칸 사이 16px, 아래 여백 240px(모바일 120px).
     1  글 1~5칸 아래 붙임  | 사진 8~12칸, 첫 화면 높이를 꽉 채움
     2  글 1~3칸 | 글 4~7칸 | 글 8~11칸
     3  사진 1~12칸 (가로로 꽉)
     4  글 1~5칸 | 글 8~12칸
     5  사진 1~4칸 | 글 8~12칸
     6  글 1~5칸 | 사진 8~11칸   (모바일은 사진이 먼저) */
.about { padding-top: var(--top); }
.ab {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap);
  padding: 0 var(--side) 240px;
}
.ab .t { max-width: 720px; }
.ab .t p + p { margin-top: 1.33em; }      /* AKV 는 단락 사이에 빈 줄 하나 */
.ab .p img { width: 100%; height: auto; background: var(--ph); }

/* 1 — 첫 화면. 위 여백(120)과 아래 숨통(72)을 빼고 화면 높이를 채운다 (AKV calc(100vh-72px-48px)) */
.ab1 { height: calc(100vh - var(--top)); padding-bottom: 16px; margin-bottom: 240px; }
.ab1 .t { grid-column: 1/6; align-self: end; font-size: 20px; }
.ab1 .p { grid-column: 8/13; overflow: hidden; }
.ab1 .p img { height: 100%; object-fit: cover; }
.ab2 .t:nth-child(1) { grid-column: 1/4; }
.ab2 .t:nth-child(2) { grid-column: 4/8; }
.ab2 .t:nth-child(3) { grid-column: 8/12; }
.ab3 .p { grid-column: 1/13; }
.ab4 .t:nth-child(1) { grid-column: 1/6; }
.ab4 .t:nth-child(2) { grid-column: 8/13; }
.ab5 .p { grid-column: 1/5; }
.ab5 .t { grid-column: 8/13; }
.ab6 .t { grid-column: 1/6; }
.ab6 .p { grid-column: 8/12; }

/* 채우지 않은 자리는 about.html 이 hidden 을 붙여 감춘다. 덩어리의 display:grid 가 hidden 을 덮지 않게 */
.ab[hidden], .ab [hidden] { display: none; }

/* ── 문의 (contact.html) ────────────────────
   내용이 연락처 몇 줄뿐이라 PC 에서는 화면 한가운데에 놓는다.
   덩어리는 가운데지만 글은 왼쪽 정렬 — 라벨과 값의 세로줄이 맞아야 읽힌다. */
.wrap {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gap);
  padding: var(--head) var(--side); min-height: 100vh; align-content: center;
}
.sec { grid-column: 1/13; width: 100%; max-width: 520px; margin: 0 auto; }
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 88px 1fr; gap: 0 var(--gap);
  align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line);
}
.row dt { font-size: var(--fs-meta); color: var(--mute); }
.row dd { font-size: var(--fs-meta); }
.row dd a:hover { opacity: .5; }
.row dd a.link { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.row dd .todo { color: var(--mute); }          /* 아직 값을 못 받은 줄 */
.row dd .map {                                  /* 주소 옆 지도 링크 */
  margin-left: 14px; font-size: var(--fs-meta); color: var(--mute);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.row dd .map:hover { color: var(--ink); opacity: 1; }

@media (max-width: 767px) {
  .list { grid-template-columns: 1fr; row-gap: 56px; }
  /* 소개 — 전부 한 줄씩 쌓인다. 순서·여백은 AKV 의 max-md: 값 */
  .about { padding-top: 0; }
  .ab { padding-bottom: 120px; }
  .ab > * { grid-column: 1/13 !important; }
  .ab1 { height: auto; margin-bottom: 0; }
  .ab1 .t { padding: 112px 0; font-size: 20px; line-height: 24px; }   /* AKV py-28 text-xl leading-6 */
  .ab1 .t p + p { margin-top: 24px; }
  .ab1 .p img { height: auto; }
  .ab2 .t:nth-child(2) { margin-bottom: 120px; }
  .ab5 .p { margin-bottom: 120px; }
  .ab6 .p { order: 1; margin-bottom: 120px; }
  .ab6 .t { order: 2; }
  .wrap { align-content: start; padding: var(--top) var(--side) calc(var(--head) + 80px); }
  .sec { max-width: none; margin: 0; }
  .row { grid-template-columns: 76px 1fr; }
}
/* 태블릿 — 3열은 좁고 1열은 허전한 구간 */
@media (min-width: 768px) and (max-width: 1023px) {
  .list { grid-template-columns: repeat(2, 1fr); row-gap: 64px; }
}