/* 최적화 인덱스 — 그리드.

   도구 하나로 바로 들어가던 자리를 갈래가 보이는 화면으로 바꾼다.
   항목이 늘 때 이 파일은 안 건드린다 — index.html 에 카드 한 장을 더한다.

   ## 2026-09-09 — 글귀를 걷고 타일로 다시 짰다

   정현님 지시다. **제목도 설명도 두지 않는다** — 그림과 이름만으로 고른다.
   참고한 결은 archifactory.kr 의 포트폴리오 격자다: 정사각 타일이 왼쪽에서
   부터 차고, 쉴 때는 그림만, 커서를 올리면 그림이 물러나고 이름이 가운데
   뜬다. 그쪽 수치를 재보니 타일 232px · 간격 30px 였다.

   **좌우 여백은 다른 장과 같다.** `.wrap` 이 `max-width:1600px · padding:0
   40px` 이고 여기서 안 건드린다 — 이 장만 다른 자리에서 시작하면 차림표를
   오갈 때 화면이 흔들린다.

   **타일 폭을 고정한다.** `1fr` 로 늘이면 항목이 둘일 때 화면 폭만큼
   벌어져서, 그리드가 아니라 배너 둘이 된다. 참고 화면도 고정 폭이라 남는
   자리를 비워 둔다 — 그 여백이 이 결의 절반이다.

   **그림은 사진이 아니라 선화(inline SVG)다.** 이 화면이 다루는 것이 도면과
   골조라 사진보다 선이 정직하고, 파일도 안 늘어난다. */

/* ── 여백은 참고 화면(archifactory.kr/Projects)에서 그대로 가져왔다 ──────
   2026-09-09 에 그 화면을 열어 1512px 폭에서 잰 값이다.

       판 너비      1280 (가운데 정렬 → 좌우 116)
       타일         232 정사각
       칸 사이      30 (가로·세로 같음)
       위 여백      97   머리띠 아래 110 → 격자 위 207
       아래 여백    151  격자 아래 437 → 바닥글 위 588

   5칸이 정확히 판을 채운다: 232×5 + 30×4 = 1160 + 120 = 1280.

   **`.wrap`(1600 / 좌우 40) 안에서 1280 을 가운데 두면 참고 화면과 같은
   자리에 선다** — 1512 폭에서 40 + (1432−1280)/2 = 116. 그래서 `.wrap` 은
   안 건드리고 여기서만 좁힌다.

   ⚠ **차림표·바닥글과 왼쪽 끝이 안 맞는다.** 그것들은 `.wrap` 의 40 에서
   시작하고 격자는 116 에서 시작한다. 참고 화면도 그렇다 — 거기 로고는 30,
   격자는 116 이다. 맞추려던 것이 그 화면의 여백이므로 이 어긋남은 결과이지
   실수가 아니다. */
.ogrid{display:grid;gap:30px;padding:97px 0 151px;
  max-width:1280px;margin:0 auto;
  grid-template-columns:repeat(auto-fill,232px);justify-content:start}

/* 타일. **테두리를 두지 않는다** — 바탕(--bg-2)과 타일(--bg)의 밝기 차만으로
   면이 선다. 선을 그으면 카드가 되고, 카드가 되면 사진첩이 아니라 표가 된다. */
.ocard{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  background:var(--bg);color:inherit;text-decoration:none;
  transition:box-shadow .22s ease,transform .22s ease}
.ocard:hover,.ocard:focus-visible{outline:none;transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(11,26,33,.05),0 18px 36px -20px rgba(11,26,33,.28)}
.ocard:focus-visible{box-shadow:0 0 0 2px var(--brand)}

/* 그림 — 타일을 꽉 채운다. 안쪽 여백을 두면 액자가 되고, 참고 화면의
   사진이 가장자리까지 차는 느낌이 안 난다. */
.oart{position:absolute;inset:0;display:grid;place-items:center;
  transition:opacity .22s ease,transform .22s ease}
.oart svg{width:100%;height:100%}
/* **완전히 물러난다.** 전에는 0.07 로 남겨 뒀는데, 글자 뒤에 흐린 그림이
   깔리면 둘 다 안 읽힌다. 참고 화면은 사진을 통째로 걷는다. */
.ocard:hover .oart,.ocard:focus-visible .oart{opacity:0;transform:scale(1.02)}

.oart .ln{fill:none;stroke:var(--ink-3);stroke-width:1.25;
  stroke-linecap:square;vector-effect:non-scaling-stroke}
.oart .ln-2{fill:none;stroke:var(--line);stroke-width:1;
  vector-effect:non-scaling-stroke}
.oart .ac{fill:none;stroke:var(--brand);stroke-width:1.75;
  stroke-linecap:square;vector-effect:non-scaling-stroke}
.oart .dot{fill:var(--ink);stroke:none}
.oart .fillsoft{fill:var(--bg-2);stroke:none}

/* ── 움직임 — 카드마다 다른 결 ────────────────────────────────────────
   **그림 대신 짧은 애니메이션**(2026-09-09, 정현님 지시). 지금 둘이다.

       도는 골조    `oart-3d`          mgt 읽기 — 축측으로 천천히 돈다(2026-09-11)
       훑고 지나간다 `oart-3d oart-scan` 모델 확인 — 골조는 서고 띠가 훑는다(2026-09-12)

   **mgt 읽기의 결은 2026-09-11 에 시안 여섯 중 F(도는 골조)로 정해졌다.**
   도구 안에 3D 칸이 있다는 것을 말하고, 여섯 중 가장 조용하다. 청록은 보
   **하나**뿐 — 도구 안에서 누른 부재가 청록으로 뜨는 것과 같은 말이다.

   **모델 확인(도구 4)의 결은 2026-09-12 에 정해졌다.** 정현님이 그 카드의
   움직임을 다시 보시고 *"오류를 잡아낸다는 것을 컨셉으로"* 라 하셔서, 시안
   넷(절점이 튄다 · 훑고 지나간다 · 갈라진다 · 끊긴 자리) 중 **훑고 지나간다**를
   고르셨다. 골조는 가만히 서고 청록 띠가 위에서 아래로 훑으며, 지나간 자리에서
   결함이 하나씩 켜진다 — **도구가 하는 일이 곧 그림이다.** 색도 도구 안과 같은
   말이다: 청록(`--brand`)은 지금 보는 것, 빨강(`--ng`)은 확인할 것.

   **CSS 로만 한다.** 이 장에는 JS 가 없고, `script-src 'self'` 아래서
   인라인 `style` 도 안 먹는다. 그래서 모서리 자리를 마크업이 아니라 클래스로
   준다 — 층 높이는 `--y`, 면 방향은 `xf·xb`(X 방향 앞·뒤)·`zr·zl`(Z 방향
   오른·왼). 타일이 232px 고정이라 px 로 둔다.

   쉴 때 움직인다 — 커서를 올리면 그림이 물러나므로 호버에 걸면 아무도 못 본다. */
.oart-3d{perspective:720px}
.oart-3d .rig{position:relative;width:0;height:0;transform-style:preserve-3d;
  transform:rotateX(-22deg) rotateY(35deg);animation:orot 18s linear infinite}
@keyframes orot{to{transform:rotateX(-22deg) rotateY(395deg)}}

/* ── 훑고 지나간다 — 모델 확인 카드 ──────────────────────────────────
   골조는 **가만히** 축측으로 선다. 움직이는 것은 표시다. */
.oart-scan .rig{animation:none}
/* **표시판은 골조가 차지하는 상자에 맞춘다**(150×150, 카드 가운데). 카드
   전체를 기준으로 잡으면 띠가 타일 밖까지 나간다 — 시안에서 한 번 그랬다. */
.oart-scan .mark{position:absolute;left:50%;top:50%;width:150px;height:150px;
  margin:-75px 0 0 -75px;pointer-events:none}
.oart-scan .mark i{position:absolute;display:block}
/* 훑는 띠 — 골조 안에서만 오르내린다. */
.oart-scan .scan{left:6%;width:88%;height:1.4px;background:var(--brand);opacity:0;
  animation:oscan 4.4s cubic-bezier(.4,0,.5,1) infinite}
@keyframes oscan{
  0%{top:18%;opacity:0} 10%{opacity:.9}
  90%{opacity:.9} 100%{top:80%;opacity:0}
}
/* 찾은 자리 — 띠가 지나간 뒤에 켜진다. 점이 박히고 고리가 남는다. */
.oart-scan .dotn{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--ng);
  border-radius:50%;opacity:0}
.oart-scan .ring{width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border:1.6px solid var(--ng);border-radius:50%;opacity:0}
.oart-scan .m1{left:56%;top:38%;animation:oshow 4.4s linear infinite}
.oart-scan .m2{left:30%;top:64%;animation:oshow2 4.4s linear infinite}
@keyframes oshow{0%,30%{opacity:0} 34%,88%{opacity:1} 100%{opacity:0}}
@keyframes oshow2{0%,58%{opacity:0} 62%,88%{opacity:1} 100%{opacity:0}}
/* 이 카드에서는 청록 보를 끈다 — 청록은 훑는 띠의 몫이고, 한 화면에서 같은
   색이 두 뜻을 가지면 안 된다. */
.oart-scan .b.hi{background:var(--ink-3);height:1.5px;top:-.75px}
.oart-3d .e{position:absolute;background:var(--ink-3)}
.oart-3d .c{width:1.5px;height:112px;left:-.75px;top:-56px}
.oart-3d .b{width:84px;height:1.5px;left:-42px;top:-.75px}
/* 기둥 넷 — 네 모서리 */
.oart-3d .c.cx0.cz0{transform:translate3d(-42px,0,-42px)}
.oart-3d .c.cx1.cz0{transform:translate3d(42px,0,-42px)}
.oart-3d .c.cx0.cz1{transform:translate3d(-42px,0,42px)}
.oart-3d .c.cx1.cz1{transform:translate3d(42px,0,42px)}
/* 보 — 층 넷(아래 l0 → 위 l3) × 면 넷 */
.oart-3d .l0{--y:56px}
.oart-3d .l1{--y:19px}
.oart-3d .l2{--y:-19px}
.oart-3d .l3{--y:-56px}
.oart-3d .b.xf{transform:translate3d(0,var(--y),42px)}
.oart-3d .b.xb{transform:translate3d(0,var(--y),-42px)}
.oart-3d .b.zr{transform:translate3d(42px,var(--y),0) rotateY(90deg)}
.oart-3d .b.zl{transform:translate3d(-42px,var(--y),0) rotateY(90deg)}
/* 바닥 층은 옅게(땅), 가리킨 보 하나는 청록 — mgt 읽기 카드의 말이다. */
.oart-3d .b.lo{background:var(--line)}
.oart-3d .b.hi{background:var(--brand);height:2px;top:-1px}

/* ── 도구 3 · 지하외벽 배근 (2026-09-12) — 같은 문법(선화 · 축측으로 돈다 · 청록 하나) ──
   ㄱ자로 만나는 벽 두 장(`fx` 앞 · `fz` 옆). 면은 반투명 — 도구의 3D 가
   투명한 벽 안에 배근을 보이는 것과 같다. 수평근 높이는 `--y`, 수직근 자리는
   `--x`. 앞 벽 다섯 단 중 옆 벽(간격 두 배)과 만나는 세 단만 청록(`.on`). */
.oart-3d .pn{width:84px;height:100px;left:-42px;top:-50px;
  background:rgba(110,133,143,.07);outline:1px solid var(--line)}
.oart-3d .pn.fx{transform:translate3d(0,0,42px)}
.oart-3d .pn.fz{transform:translate3d(42px,0,0) rotateY(90deg)}
.oart-3d .hb{width:84px;height:1.25px;left:-42px;top:-.6px}
.oart-3d .hb.fx{transform:translate3d(0,var(--y),42px)}
.oart-3d .hb.fz{transform:translate3d(42px,var(--y),0) rotateY(90deg)}
.oart-3d .hb.on{background:var(--brand);height:1.75px;top:-.9px}
.oart-3d .vb{width:1.25px;height:100px;left:-.6px;top:-50px;opacity:.55}
.oart-3d .vb.fx{transform:translate3d(var(--x),0,42px)}
.oart-3d .vb.fz{transform:translate3d(42px,0,var(--x)) rotateY(90deg)}
.oart-3d .y0{--y:-40px} .oart-3d .y1{--y:-20px} .oart-3d .y2{--y:0px}
.oart-3d .y3{--y:20px} .oart-3d .y4{--y:40px}
.oart-3d .x0{--x:-30px} .oart-3d .x1{--x:-10px} .oart-3d .x2{--x:10px} .oart-3d .x3{--x:30px}

/* ── 도구 2 — 모델 비교: 같은 골조 셋이 같은 각도로 같이 돈다(2026-09-12) ──
   도구 1 의 문법 그대로(선화 골조 · CSS 3D · 쉴 때 천천히). 셋이 **한 박자로** 도는 것이
   이 카드의 말이다 — 도구 안에서 세 칸의 카메라를 묶는 것과 같다. 칸 자리는 `s0·s1·s2`
   (--sx), 층은 2층(--y), 한 변 36px. 셋째(s2)만 벽이 면(`.w`)이 아니라 X 자 트러스(`.d`)다.
   도는 중심을 칸마다 두려고 `translateX` 를 회전 앞에 둔다 — 키프레임에서 칸 자리를
   변수로 받는다(요소마다 값이 풀린다). */
.oart-cmp{perspective:900px}
.oart-cmp .rig{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;
  transform:translateX(var(--sx)) rotateX(-22deg) rotateY(35deg);animation:ocmp 18s linear infinite}
.oart-cmp .s0{--sx:-74px}
.oart-cmp .s1{--sx:0px}
.oart-cmp .s2{--sx:74px}
@keyframes ocmp{
  from{transform:translateX(var(--sx)) rotateX(-22deg) rotateY(35deg)}
  to{transform:translateX(var(--sx)) rotateX(-22deg) rotateY(395deg)}}
/* 한 변 42 · 높이 76 — 돌아도 대각 폭 42√2 ≈ 59 < 칸 간격 74 라 이웃과 안 겹친다 */
.oart-cmp .e{position:absolute;background:var(--ink-3)}
.oart-cmp .c{width:1.5px;height:76px;left:-.75px;top:-38px}
.oart-cmp .b{width:42px;height:1.5px;left:-21px;top:-.75px}
.oart-cmp .c.cx0.cz0{transform:translate3d(-21px,0,-21px)}
.oart-cmp .c.cx1.cz0{transform:translate3d(21px,0,-21px)}
.oart-cmp .c.cx0.cz1{transform:translate3d(-21px,0,21px)}
.oart-cmp .c.cx1.cz1{transform:translate3d(21px,0,21px)}
.oart-cmp .l0{--y:38px}
.oart-cmp .l1{--y:0px}
.oart-cmp .l2{--y:-38px}
.oart-cmp .b.xf{transform:translate3d(0,var(--y),21px)}
.oart-cmp .b.xb{transform:translate3d(0,var(--y),-21px)}
.oart-cmp .b.zr{transform:translate3d(21px,var(--y),0) rotateY(90deg)}
.oart-cmp .b.zl{transform:translate3d(-21px,var(--y),0) rotateY(90deg)}
.oart-cmp .b.lo{background:var(--line)}
.oart-cmp .b.hi{background:var(--brand);height:2px;top:-1px}
/* 벽 — 왼쪽 면(x = −21) 전 높이. 면(WALL · 셸)은 옅은 판, 트러스는 대각선 둘(√(42²+76²) ≈ 87px, 61.1°) */
.oart-cmp .w{position:absolute;width:42px;height:76px;left:-21px;top:-38px;
  background:var(--line);opacity:.55;transform:translate3d(-21px,0,0) rotateY(90deg)}
.oart-cmp .d{width:87px;height:1.25px;left:-43.5px;top:-.62px}
.oart-cmp .d.d1{transform:translate3d(-21px,0,0) rotateY(90deg) rotateZ(61.1deg)}
.oart-cmp .d.d2{transform:translate3d(-21px,0,0) rotateY(90deg) rotateZ(-61.1deg)}

/* ── 도구 5 — 패턴재하: 판 아홉이 눕고, 그 위에 활하중이 바둑판으로 선다(2026-09-12) ──
   골조 카드 셋과 같은 문법(CSS 3D · 쉴 때 천천히 · 청록은 요점 하나)인데 세우는 것이
   **판**이다. 이 도구가 다루는 것이 기둥·보가 아니라 슬래브라서, 골조를 그리면 무슨
   도구인지 거짓말이 된다.

   판은 `rotateX(90deg)` 로 눕힌 정사각(46px, 간격 52px). 그 위의 막대(`.q`)가 실린
   활하중이고 **바둑판 두 벌(a·b)이 번갈아** 켜진다 — 옮겨 다니는 재하가 이 도구의 요점이다.
   자리 변수는 `--x`(열) · `--z`(행). 색을 애니메이션하지 않고 **투명도만** 바꾼다:
   변환을 애니메이션하면 칸마다 다른 자리 변환을 키프레임에 다시 적어야 한다. */
.oart-pat{perspective:760px}
.oart-pat .rig{position:relative;width:0;height:0;transform-style:preserve-3d;
  /* 기울기는 `orot` 키프레임이 못 박은 −22deg 와 같아야 한다 — 다르면 도는 동안
     기울기가 같이 흔들린다. 카드 넷이 같은 각으로 서는 이유이기도 하다. */
  transform:rotateX(-22deg) rotateY(35deg);animation:orot 18s linear infinite}
.oart-pat .c0{--x:-52px}
.oart-pat .c1{--x:0px}
.oart-pat .c2{--x:52px}
.oart-pat .r0{--z:-52px}
.oart-pat .r1{--z:0px}
.oart-pat .r2{--z:52px}
.oart-pat .t{position:absolute;width:46px;height:46px;left:-23px;top:-23px;
  background:var(--line);
  transform:translate3d(var(--x),0,var(--z)) rotateX(90deg)}
/* 하중 — 판 위에 **떠 있는 판**이다. 처음에는 카메라를 보는 막대(세로 면)로
   두었는데, 골조가 돌면 막대가 모로 서서 **칼날처럼 얇은 선**이 됐다
   (2026-09-12, 브라우저로 실제로 보고서야 드러났다). 판과 같이 눕히면 어느
   각도에서도 넓이가 남는다 — 실린 것이 면하중이라 뜻도 이쪽이 맞다.
   판보다 좁아 아래 판의 테두리가 남는다. */
.oart-pat .q{position:absolute;width:34px;height:34px;left:-17px;top:-17px;
  background:var(--brand);
  transform:translate3d(var(--x),-15px,var(--z)) rotateX(90deg)}
.oart-pat .q.a{animation:opata 6s ease-in-out infinite}
.oart-pat .q.b{animation:opatb 6s ease-in-out infinite}
@keyframes opata{0%,42%{opacity:.85}50%,92%{opacity:0}100%{opacity:.85}}
@keyframes opatb{0%,42%{opacity:0}50%,92%{opacity:.85}100%{opacity:0}}

/* ── 도구 6 — 부력: 지하가 아래에서부터 한 층씩 차오른다(2026-09-12) ──────────
   기초 · B3 · B2 · B1 넷이 차례로 진해진다(8초에 한 바퀴). 그 위를 지나는 옅은 청색
   면이 지하수위 — **물은 안 움직이고 구조가 올라온다.** 이 도구가 답하는 물음이
   "어느 단계까지 지어야 안 뜨나" 라서, 움직여야 하는 쪽이 구조다.

   물빛은 `buoyancy.css` 의 `--bo-water` 와 같은 값이다. 이 장은 그 파일을 안 실으므로
   여기 한 벌이 더 있는 셈인데, 카드의 색을 도구의 스타일시트에서 끌어오려면 격자 장이
   도구 넷의 CSS 를 다 실어야 한다 — 그것이 더 나쁘다. */
.oart-buo{perspective:820px}
.oart-buo .rig{position:relative;width:0;height:0;transform-style:preserve-3d;
  transform:rotateX(-22deg) rotateY(35deg);animation:orot 18s linear infinite}
/* 기둥 넷 — 1.5px 에 반투명이면 232px 타일에서 **아예 안 보인다**(2026-09-12).
   슬래브만 떠 있으면 건물이 아니라 접시 넷이 된다. 2px · 불투명으로 세운다. */
.oart-buo .c{position:absolute;width:2px;height:96px;left:-1px;top:-48px;
  background:var(--ink-3)}
.oart-buo .c.cx0.cz0{transform:translate3d(-34px,0,-34px)}
.oart-buo .c.cx1.cz0{transform:translate3d(34px,0,-34px)}
.oart-buo .c.cx0.cz1{transform:translate3d(-34px,0,34px)}
.oart-buo .c.cx1.cz1{transform:translate3d(34px,0,34px)}
/* 슬래브 넷 — 아래(s0, 기초)부터 위(s3)로. 눕힌 정사각. */
.oart-buo .s{position:absolute;width:72px;height:72px;left:-36px;top:-36px;
  background:var(--ink-3);
  animation:obuo 8s ease-in-out infinite}
.oart-buo .s0{transform:translate3d(0,48px,0) rotateX(90deg);animation-delay:0s}
.oart-buo .s1{transform:translate3d(0,16px,0) rotateX(90deg);animation-delay:1.1s}
.oart-buo .s2{transform:translate3d(0,-16px,0) rotateX(90deg);animation-delay:2.2s}
.oart-buo .s3{transform:translate3d(0,-48px,0) rotateX(90deg);animation-delay:3.3s}
@keyframes obuo{0%,8%{opacity:.12}22%,88%{opacity:.7}100%{opacity:.12}}
/* 수위면 — 슬래브보다 넓다(물은 건물 밖에도 있다). */
/* 수위면 — 슬래브보다 **넓고 더 푸르다**(물은 건물 밖에도 있다). 옅게 두면
   차오르는 슬래브와 같은 회청색이 되어 어느 것이 물인지 안 갈린다. */
.oart-buo .w{position:absolute;width:124px;height:124px;left:-62px;top:-62px;
  background:#8fb6c9;opacity:.55;
  transform:translate3d(0,-4px,0) rotateX(90deg)}

/* ── 도구 7 — VE 물량: 물량이 막대로 서고, 줄인 몫이 빠져나간다(2026-09-12) ──
   **골조를 그리지 않는다.** 처음에는 모델 비교의 문법 그대로 골조 둘을 나란히
   돌렸는데, 정현님이 짚으셨다 — 저쪽은 골조 셋, 이쪽은 골조 둘, **같은 실루엣에
   개수만 다르다.** 격자에서 카드는 대개 스쳐 지나가므로 정지 화면에서 갈려야
   한다. 개수로는 안 갈린다.

   그래서 이 도구가 **내놓는 것**을 그린다. 이 도구가 답하는 것은 건물의 모양이
   아니라 **물량**이다 — 기둥·보·벽 세 더미가 높이로 서고, 꼭대기의 청록 조각
   (줄인 몫)이 하나씩 빠지며 막대가 낮아진다. 패턴재하 카드가 골조 대신 판
   아홉을 세운 것과 같은 판단이다.

   막대 하나는 면 다섯(앞·뒤·좌·우·윗면)이다. 면마다 **불투명한 다른 명도**를
   준다 — 반투명으로 겹치면 뒷면이 비쳐 상자가 유리처럼 보이고, 브라우저의
   3D 정렬이 주는 가림(occlusion)을 못 쓴다. 자리 값은 클래스가 변수로 준다:
   `--x` 자리 · `--y` 몸통 가운데 · `--h` 높이 · `--ty` 윗면 높이. */
.oart-qty{perspective:880px}
.oart-qty .rig{position:relative;width:0;height:0;transform-style:preserve-3d;
  transform:rotateX(-22deg) rotateY(35deg);animation:orot 18s linear infinite}

/* 바닥 — 막대가 허공에 뜨지 않게. 눕힌 판 한 장. */
.oart-qty .g{position:absolute;width:158px;height:96px;left:-79px;top:-48px;
  background:var(--line);opacity:.5;transform:translate3d(0,48px,0) rotateX(90deg)}

/* 면 다섯. 단면은 26×26 정사각이라 좌우 면의 폭도 26 이다. */
.oart-qty .f{position:absolute;width:26px;height:var(--h);
  left:-13px;top:calc(var(--h) / -2)}
.oart-qty .f.fr{transform:translate3d(var(--x),var(--y),13px)}
.oart-qty .f.bk{transform:translate3d(var(--x),var(--y),-13px)}
.oart-qty .f.rt{transform:translate3d(calc(var(--x) + 13px),var(--y),0) rotateY(90deg)}
.oart-qty .f.lt{transform:translate3d(calc(var(--x) - 13px),var(--y),0) rotateY(90deg)}
.oart-qty .f.tp{height:26px;top:-13px;
  transform:translate3d(var(--x),var(--ty),0) rotateX(90deg)}

/* 몸통 — 먹회색 네 단계. 윗면이 가장 밝다(빛이 위에서 온다). */
.oart-qty .f.fr{background:color-mix(in srgb, var(--ink-3) 62%, #fff)}
.oart-qty .f.bk{background:color-mix(in srgb, var(--ink-3) 34%, #fff)}
.oart-qty .f.rt,.oart-qty .f.lt{background:color-mix(in srgb, var(--ink-3) 46%, #fff)}
.oart-qty .f.tp{background:color-mix(in srgb, var(--ink-3) 78%, #fff)}

/* 줄인 몫 — 꼭대기 청록 조각. 청록은 이 격자에서 늘 "요점 하나" 다. */
.oart-qty .cap.fr{background:var(--brand)}
.oart-qty .cap.bk{background:color-mix(in srgb, var(--brand) 52%, #fff)}
.oart-qty .cap.rt,.oart-qty .cap.lt{background:color-mix(in srgb, var(--brand) 70%, #fff)}
.oart-qty .cap.tp{background:color-mix(in srgb, var(--brand) 88%, #fff)}
/* 하나씩 빠진다 — 기둥 · 보 · 벽 차례로. 다 빠지면 처음으로 돌아온다. */
.oart-qty .cap{animation:oqty 7s ease-in-out infinite}
.oart-qty .c2{animation-delay:.8s}
.oart-qty .c3{animation-delay:1.6s}
@keyframes oqty{0%,14%,100%{opacity:1}34%,86%{opacity:0}}

/* 막대 셋 — 기둥(높다) · 보 · 벽. 바닥은 y = 48px 이다.
   몸통 가운데 `--y` = 48 − h/2, 윗면 `--ty` = 48 − h.
   조각(`--c*`)은 그 몸통 위에 16px 로 얹힌다. */
.oart-qty .b1{--x:-46px;--h:96px;--y:0px;  --ty:-48px}
.oart-qty .b2{--x:0px;  --h:68px;--y:14px; --ty:-20px}
.oart-qty .b3{--x:46px; --h:44px;--y:26px; --ty:4px}
.oart-qty .c1{--x:-46px;--h:16px;--y:-56px;--ty:-64px}
.oart-qty .c2{--x:0px;  --h:16px;--y:-28px;--ty:-36px}
.oart-qty .c3{--x:46px; --h:16px;--y:-4px; --ty:-12px}

/* 커서를 올리면 멈춘다. 사라지는 그림이 계속 움직이면 눈이 그리로 간다. */
.ocard:hover .oart-3d .rig,.ocard:focus-visible .oart-3d .rig,
.ocard:hover .oart-cmp .rig,.ocard:focus-visible .oart-cmp .rig,
.ocard:hover .oart-pat .rig,.ocard:focus-visible .oart-pat .rig,
.ocard:hover .oart-pat .q,.ocard:focus-visible .oart-pat .q,
.ocard:hover .oart-buo .rig,.ocard:focus-visible .oart-buo .rig,
.ocard:hover .oart-buo .s,.ocard:focus-visible .oart-buo .s,
.ocard:hover .oart-qty .rig,.ocard:focus-visible .oart-qty .rig,
.ocard:hover .oart-qty .cap,.ocard:focus-visible .oart-qty .cap{animation-play-state:paused}
.ocard:hover .oart-scan .mark i,.ocard:focus-visible .oart-scan .mark i{
  animation-play-state:paused}

/* **움직임을 싫어하는 설정을 존중한다.** 도는 골조는 축측 각도로 멈춰 서고,
   훑는 쪽은 띠만 사라지고 **찾은 자리는 남는다** — 그림이 말하려던 것(여기에
   결함이 있다)은 그대로 선다. */
@media (prefers-reduced-motion:reduce){
  .oart-3d .rig,.oart-cmp .rig,.oart-pat .rig,.oart-buo .rig,.oart-qty .rig{animation:none}
  /* 움직여야만 뜻이 사는 것들은 **켜진 채로** 멈춘다 — 꺼진 채 멈추면 빈 판과
     빈 골조만 남아 무슨 도구인지 알 수 없다. */
  .oart-pat .q.a{animation:none;opacity:.85}
  .oart-pat .q.b{animation:none;opacity:0}
  .oart-buo .s{animation:none;opacity:.7}
  .oart-qty .cap{animation:none;opacity:1}
  .oart-scan .scan{animation:none;opacity:0}
  .oart-scan .dotn,.oart-scan .ring{animation:none;opacity:1}
}

/* 이름 — 쉴 때는 없다. 가운데에 하나만 놓는다. */
.ometa{position:absolute;inset:0;display:grid;place-items:center;
  padding:20px;text-align:center;
  opacity:0;transition:opacity .22s ease}
.ocard:hover .ometa,.ocard:focus-visible .ometa{opacity:1}
.ometa .oname{font-size:19px;font-weight:500;line-height:1.4;
  letter-spacing:-.01em;color:var(--ink)}

/* 아직 없는 자리 — 항목을 더할 때 이 카드를 지운다.

   **면을 세우지 않는다.** 살아 있는 타일은 흰 면(--bg)이고 이것은 투명이라,
   두 줄이 차 있어도 무엇이 눌리는 자리인지 한눈에 갈린다. 테두리는 점선으로
   둔다 — 실선이면 빈 자리가 살아 있는 것과 같은 무게로 선다. */
.ocard.soon{cursor:default;background:transparent;
  border:1px dashed var(--line);box-shadow:none}
.ocard.soon:hover,.ocard.soon:focus-visible{transform:none;box-shadow:none}
.ocard.soon .osoon{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-3);
  transition:opacity .22s ease}
/* 이름이 있는 빈 자리는 커서를 올리면 "준비 중" 대신 이름을 보여 준다 —
   둘이 겹쳐 찍히지 않게 한 쪽을 뺀다. */
.ocard.soon:hover .osoon{opacity:0}
.ocard.soon .ometa .oname{color:var(--ink-3);font-weight:400}

/* 손가락으로 쓰는 화면에는 호버가 없다 — 이름을 늘 보여 준다.
   그림만 있고 이름이 없으면 무엇인지 알 길이 없다.
   그림은 지우지 않고 뒤로 물린다 — 여기서까지 걷으면 빈 칸만 남는다. */
@media (hover:none){
  .oart{opacity:.10}
  .ometa{opacity:1}
}

/* 판(1280)보다 좁아지면 가운데 정렬이 뜻을 잃는다 — 그때는 `.wrap` 의
   여백만 남고 격자가 왼쪽부터 찬다. 따로 적을 것이 없다. */

@media (max-width:600px){
  .ogrid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;
    padding:48px 0 72px}
  .ometa{padding:12px}
  .ometa .oname{font-size:15px}
}