@font-face{font-family:"Pretendard Variable";src:url(../font/PretendardVariable.woff2) format("woff2");font-weight:45 920;font-display:swap}
@font-face{font-family:Inter;src:url(../font/Inter-Latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../font/Inter-Latin-Italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

/* 스위스 모듈러 그리드: 12열 · 칸(모듈) 단위 · 가는 가로선 · 번호 · 표처럼 읽는 목록 / 굵기 Regular, 강조는 Italic / 색은 검정 + 옅은 회색 칸 */
:root{--bg:#fff;--fg:#000;--face:#f1f1f1;--face2:#e2e2e2;--m:clamp(10px,.8vw,20px);
  --fs:clamp(16px,.5vw + 9.5px,22px);--fl:clamp(20px,.9vw + 11px,34px);--fn:clamp(24px,1.1vw + 11px,40px);--fh:clamp(26px,1.7vw + 12px,54px);--fd:clamp(34px,7.2vw,180px);
  --sec:clamp(56px,6vw,120px);--max:2400px}
*{box-sizing:border-box;margin:0}
html{scrollbar-gutter:stable;scroll-behavior:smooth;background:var(--bg)}
html *{font-weight:400!important}
body{background:var(--bg);color:var(--fg);font:400 var(--fs)/1.45 Inter,"Pretendard Variable",Pretendard,"Malgun Gothic",sans-serif;letter-spacing:-.012em;-webkit-font-smoothing:antialiased;word-break:keep-all;padding-bottom:calc(var(--fs)*3.2)}
a{color:inherit;text-decoration:none;cursor:pointer}
.w{max-width:var(--max);margin:0 auto;padding:0 var(--m)}
.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--m)}
.rule{border-top:1px solid var(--fg)}


/* 헤더 */
.hdw{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--fg)}
.hd{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--m);padding:var(--m) var(--m) 0;align-items:start}
.hd .sy{display:block;height:calc(var(--fn)*1.5);padding-bottom:var(--m);box-sizing:content-box}.hd .sy img{display:block;height:100%;width:auto}
.hd a.m{font-size:var(--fn);line-height:1;letter-spacing:-.03em;padding-bottom:var(--m);justify-self:start}
.hd a.m:hover,.hd a.m.on{font-style:italic}

/* 섹션 틀: 왼쪽 3열 라벨 / 오른쪽 9열 내용 (NASA 색인표 방식) */
.sec{padding:calc(var(--m)*1.2) 0 var(--sec);border-top:1px solid var(--fg)}
.sec>.g12>.lb{grid-column:1/4}.sec>.g12>.bd{grid-column:4/13}
.lb{font-size:var(--fl);line-height:1.2;letter-spacing:-.02em}
.lb small{display:block;font-size:var(--fs);margin-top:.3em;font-style:italic}

/* 히어로 */
.hero{padding:0 var(--m);max-width:var(--max);margin:0 auto}
.hl{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--m);border-bottom:1px solid var(--fg);padding:.06em 0 .12em}
.hl:last-child{border-bottom:0}
.hl h1{font-weight:400;letter-spacing:-.03em;line-height:1;font-size:var(--fd);white-space:nowrap;transition:transform .5s cubic-bezier(.2,.7,.2,1);cursor:default;margin-left:0}
.hl h1:hover{font-style:italic;transform:translateX(1.2vw)}.hl:nth-child(2) h1:hover{transform:translateX(-1.2vw)}
.hl p{font-size:var(--fs);line-height:1.35;padding-bottom:.9em}

/* 색인표 (표지 아래) */
.ix a{display:grid;grid-template-columns:3rem 1fr 2fr auto;gap:var(--m);padding:.6em 0;border-top:1px solid var(--fg);align-items:baseline;transition:background .2s,color .2s,padding .3s cubic-bezier(.2,.7,.2,1)}
.ix a:last-child{border-bottom:1px solid var(--fg)}
.ix a:hover{background:var(--fg);color:var(--bg);padding-left:var(--m);padding-right:var(--m);font-style:italic}
.ix a span:last-child{text-align:right}

/* 모듈 칸 (옅은 회색) */
.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--m)}
.mod{background:var(--face);aspect-ratio:1/1;padding:calc(var(--m)*1.1);display:flex;flex-direction:column;justify-content:space-between;transition:background .25s}
.mod:hover{background:var(--face2)}
.mod .n{font-size:var(--fs)}.mod .t{font-size:var(--fl);line-height:1.2;letter-spacing:-.02em;margin-bottom:.3em}.mod .d{font-size:var(--fs);line-height:1.4;max-width:20em}
.mod.head{background:none;padding-left:0}
.mod.head .t{font-size:var(--fh);letter-spacing:-.03em;line-height:1.05}
.mod.img{padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mod.img img{max-width:86%;max-height:86%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}.mod.img:hover img{transform:scale(1.04)}

/* 작업 카드 (4단) */
.g{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--m)*2.5) var(--m)}
.c{display:block;transition:opacity .35s}
.c .im{aspect-ratio:4/3;background:var(--face);display:flex;align-items:center;justify-content:center;overflow:hidden}
.c .im img{display:block;max-width:86%;max-height:86%;width:auto;height:auto;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.c:hover .im img{transform:scale(1.04)}
.c .t{display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding:8px 0;border-top:1px solid var(--fg);line-height:1.3;font-size:calc(var(--fs) - 3px)}
.c .k{display:block;padding:8px 0;border-top:1px solid var(--fg);border-bottom:1px solid var(--fg);line-height:1.3;font-size:calc(var(--fs) - 3px)}
.c:hover .t span:first-child,.c:hover .k{font-style:italic}
.g:has(.c:hover) .c:not(:hover){opacity:.28}
.c.rev{opacity:0;transform:translateY(20px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}.c.in{opacity:1;transform:none}
.g:has(.c:hover) .c.in:not(:hover){opacity:.28}

/* 필터 + 보기 전환 */
.fw{border-bottom:1px solid var(--fg)}
.flt{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px var(--m);padding:calc(var(--m)*1.2) var(--m)}
.flt.off a:first-child,.flt.off a:nth-child(4){grid-column:2}
.flt a{display:flex;gap:12px;align-items:center;transition:transform .25s}
.flt a:before{content:"";width:.6em;height:.6em;border:1.5px solid var(--fg);transition:background .2s}
.flt a.on:before,.flt a:hover:before{background:var(--fg)}.flt a:hover{transform:translateX(4px);font-style:italic}
.flt .vw{grid-column:4;justify-self:end;display:flex;gap:calc(var(--m)*1.2)}
.flt .vw a:before{content:none}.flt .vw a.on{font-style:italic;text-decoration:underline;text-underline-offset:5px}

/* 표 보기 (Name · Category · Client · Year) */
.tb{display:none}.tb.on{display:block}
.tb .th,.tb a{display:grid;grid-template-columns:3rem 4fr 2fr 2fr 1fr;gap:var(--m);padding:.55em 0;align-items:baseline}
.tb .th{border-bottom:1px solid var(--fg)}
.tb a{border-bottom:1px solid var(--fg);transition:background .2s,color .2s,padding .3s cubic-bezier(.2,.7,.2,1)}
.tb a:hover{background:var(--fg);color:var(--bg);padding-left:var(--m);padding-right:var(--m);font-style:italic}
.tb a span:last-child,.tb .th span:last-child{text-align:right}

/* 저널 색인 (왼쪽 분류 / 오른쪽 글) */
.jx{border-top:1px solid var(--fg)}
.jg{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--m);padding:calc(var(--m)*.9) 0 calc(var(--m)*1.6);border-bottom:1px solid var(--fg)}
.jg .lb{grid-column:1/4}.jg .rows{grid-column:4/13}
.ls a{display:grid;grid-template-columns:7rem 1fr 3rem;gap:var(--m);padding:.5em 0;border-top:1px solid var(--face2);transition:background .2s,color .2s,padding .3s cubic-bezier(.2,.7,.2,1)}
.ls a:first-child{border-top:0}
.ls a:hover{background:var(--fg);color:var(--bg);padding-left:var(--m);padding-right:var(--m);font-style:italic}
.ls a span:last-child{text-align:right}
.th2{position:fixed;z-index:40;pointer-events:none;left:0;top:0;width:clamp(300px,26vw,560px);height:auto;opacity:0;transition:opacity .25s;display:block}
.th2.on{opacity:1}

/* 글 상세 */
.ah{font-size:calc(var(--fl)*1.5);letter-spacing:-.03em;line-height:1.4}
.art p{max-width:46em;line-height:1.85;margin-bottom:1.1em;text-wrap:pretty}

/* 버튼: 네모 */
.btn{position:relative;display:inline-block;border:1px solid var(--fg);padding:.55em 1.4em;margin:calc(var(--m)*1.2) 8px 0 0;overflow:hidden;isolation:isolate;transition:color .3s}
.btn:before{content:"";position:absolute;inset:0;background:var(--fg);transition:transform .4s cubic-bezier(.2,.7,.2,1);z-index:-1}
.btn.f{color:var(--bg)}.btn.f:before{transform:none}.btn.f:hover{color:var(--fg)}.btn.f:hover:before{transform:translateY(-101%)}
.btn.o:before{transform:translateY(101%)}.btn.o:hover{color:var(--bg)}.btn.o:hover:before{transform:none}
.head{font-size:var(--fh);letter-spacing:-.03em;line-height:1.2}
.link{border-bottom:1px solid var(--fg);padding-bottom:2px}.link:hover{font-style:italic}

/* 하단 바 + 그리드 보기 */
.ft{position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid var(--fg);z-index:20}
.ft div{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;padding:.7em var(--m)}
.ft button{background:none;border:0;font:inherit;color:inherit;cursor:pointer}.ft button:hover{font-style:italic}
.gov{position:fixed;inset:0;pointer-events:none;z-index:8000;display:none;max-width:var(--max);margin:0 auto;padding:0 var(--m);grid-template-columns:repeat(12,1fr);gap:var(--m)}
.gov.on{display:grid}.gov i{background:rgba(255,0,60,.07);border-left:1px solid rgba(255,0,60,.4);border-right:1px solid rgba(255,0,60,.4)}

@media(max-width:1100px){.g,.mods{grid-template-columns:repeat(2,1fr)}.sec>.g12>.lb,.sec>.g12>.bd,.jg .lb,.jg .rows{grid-column:1/13}.tb .th,.tb a{grid-template-columns:2rem 3fr 2fr 1fr}.tb .th span:nth-child(4),.tb a span:nth-child(4){display:none}.ix a{grid-template-columns:2rem 1fr auto}.ix a span:nth-child(3){display:none}}
@media(max-width:900px){.hd{grid-template-columns:auto 1fr 1fr 1fr}.hd .sy{height:34px}.hl h1:hover{transform:none}.flt{grid-template-columns:1fr 1fr}.flt .vw{grid-column:1/3;justify-self:start}.ls a{grid-template-columns:1fr}.ls a span:last-child{text-align:left}}
@media(hover:none){.g:has(.c:hover) .c:not(:hover){opacity:1}}

/* ───────── 새 사이트 전용 추가 규칙 (base_from_mock.css 뒤에 붙는다) ───────── */
:root{--ink:#000;--ink2:#000;--ink3:#000;--line:#000;--accent:#000}
html *{font-weight:400!important}
.skip{position:absolute;left:-9999px;top:8px;background:#000;color:#fff;padding:.5em 1em;z-index:100}.skip:focus{left:8px}

/* 합성 썸네일(층이 쌓인 장표를 정지 이미지처럼) */
.cmp{position:relative;display:block;flex:none}
.cmp img{position:absolute;display:block;height:auto;max-width:none}
.c .im .cmp{max-width:none}

/* 작업 카드: 분류·년도 */
.c{min-width:0}
.c .t span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c .t span:last-child{flex:none;white-space:nowrap}
.c .k span+span:before{content:" · "}

/* 필터 줄: 보기 전환은 1열에 */
.flt .vw{grid-column:1;grid-row:1;justify-self:start}
.flt.six a:nth-child(n+2){}

/* 프로젝트 상세 */
.pl{max-width:46em;line-height:1.6;margin-top:.8em}
.gal{display:block}
.g-row{display:flex;align-items:var(--al,center);gap:calc(var(--m)*1.5);margin-bottom:calc(var(--m)*3)}
.g-row.single{justify-content:center}
.g-row.multi>.g-item{flex:var(--w,100) 1 0;min-width:0}
.g-row.single>.g-item{flex:none;width:calc(var(--w,100) * 1%);max-width:100%}
.g-item{min-width:0}
.gi-img img{display:block;width:100%;height:auto}
.gi-col{display:flex;flex-direction:column;gap:calc(var(--m)*1.5)}
.g-stack{position:relative;width:100%;max-width:var(--maxw,none);margin-inline:auto;aspect-ratio:var(--ar);isolation:isolate}
.g-stack.has-shadow{outline:1px solid rgba(0,0,0,.14)}
.g-layer{position:absolute;display:block;height:auto;max-width:none}
.g-folio{display:block;margin-top:.5em;font-size:calc(var(--fs) - 3px);text-align:right}
.gal figure{margin:0}
.nav-more .ix a{grid-template-columns:3rem 1fr 2fr auto}

/* 저널 글 상세 */
.post .lede{font-size:calc(var(--fs)*1.12);line-height:1.55;letter-spacing:-.015em;max-width:38em;margin-top:.8em;color:#333}
.post .by{margin-top:var(--m);font-size:calc(var(--fs) - 2px)}
.post .cover{margin:0 0 calc(var(--m)*3)}
.post .cover img{display:block;width:100%;height:auto}
.art .body{max-width:46em;line-height:1.8;font-size:var(--fs)}
.art .body h2{font-size:calc(var(--fs)*1.95);letter-spacing:-.035em;line-height:1.22;margin:2.8em 0 .7em;padding-top:.55em;border-top:1px solid #000}
.art .body h2 .n{display:inline-block;border:1px solid #000;padding:0 .4em;margin-right:.55em;font-size:calc(var(--fs) - 2px);line-height:1.5;vertical-align:.3em;letter-spacing:0}
.art .body h3{font-size:calc(var(--fs)*1.3);letter-spacing:-.025em;line-height:1.35;margin:2.4em 0 .4em}
.art .body h2+h3{margin-top:1.2em}
.art .body h3+p{margin-top:0}
.art .body h4{font-size:calc(var(--fs)*1.1);margin:1.7em 0 .3em;font-style:italic;letter-spacing:-.01em}
.art .body p{margin:0 0 1.2em;text-wrap:pretty}
.art .body strong,.art .body b{font-weight:400}
.art .body ul,.art .body ol{margin:0 0 1.4em;padding-left:1.4em}.art .body li{margin:.5em 0;padding-left:.15em}.art .body li::marker{color:#000}
.art .body li>ul,.art .body li>ol{margin:.3em 0 .3em}
.art .body a{border-bottom:1px solid #000}.art .body a:hover{font-style:italic}
.art .body blockquote{margin:1.6em 0;padding:.15em 0 .15em 1.1em;border-left:3px solid #000;background:none;font-size:calc(var(--fs)*1.15);line-height:1.6}
.art .body blockquote p{margin:.3em 0}
.art .body hr{border:0;border-top:1px solid #000;margin:3em 0}
.art .body figure{margin:2em 0}.art .body figure img,.art .body figure svg{display:block;width:100%;height:auto}
.art .body figcaption{margin-top:.6em;font-size:calc(var(--fs) - 3px);color:#555}
.art .body .tbl{overflow-x:auto;margin:1.6em 0}
.art .body table{border-collapse:collapse;width:100%;font-size:calc(var(--fs) - 1px)}
.art .body th,.art .body td{text-align:left;padding:.55em .8em .55em 0;border-bottom:1px solid #d0d0d0;vertical-align:top}
.art .body th{border-bottom:2px solid #000;font-weight:400;font-style:italic}
.art .body code{background:var(--face);padding:.08em .35em;font-family:ui-monospace,Consolas,monospace;font-size:.88em}
.art .body pre{background:var(--face);padding:1em;overflow-x:auto;font-size:.88em;line-height:1.6;margin:1.4em 0}
.art .body pre code{background:none;padding:0}
.cta-box h3{font-size:var(--fh);letter-spacing:-.03em;line-height:1.2;margin:0}
.cta-box p{margin-top:.6em;max-width:34em}
.related .g{padding-top:0}
.related .c .t,.related .c .k{font-size:calc(var(--fs) - 3px)}

/* 장표 보기(블로그 본문) — 흑백 네모 */
.deck{margin:2em 0 0}
.deck-tabs,.deck-steps{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.deck-tabs{margin-bottom:var(--m)}
.deck-chip{border:1px solid #000;background:#fff;color:#000;padding:.3em .9em;font:inherit;cursor:pointer;border-radius:0;box-shadow:none}
.deck-chip:hover{background:var(--face)}
.deck-chip[aria-pressed=true]{background:#000;color:#fff;box-shadow:none}
.deck-chip b{margin-right:.5em;font-weight:400}
.deck-slide{position:relative;width:100%;aspect-ratio:16/9;background:#fff;overflow:hidden;outline:1px solid rgba(0,0,0,.14);border-radius:0;box-shadow:none}
.deck-layer{position:absolute;inset:0}
.deck-layer img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.deck-layer.off{opacity:0}
.deck-steps{margin-top:var(--m)}
.deck-play{background:#000;color:#fff;border:1px solid #000}
.deck-caption{margin:.8em 0 0;min-height:1.6em;font-size:calc(var(--fs) - 2px);font-style:italic}
.deck-caption strong{font-style:normal}

/* 404 */
.nf{padding:calc(var(--sec)*1.2) 0}
@media(max-width:900px){.g-row.multi{flex-direction:column;align-items:stretch}.g-row.multi>.g-item{flex:none}.post .lede{font-size:var(--fs)}}

/* 모바일 푸터: 연락처 줄은 좁은 화면에서 숨김 */
@media(max-width:700px){.ft .em,.ft .email-button{display:none}.ft .fmid a{padding:.4em 0}}

/* 카드 썸네일은 모두 같은 4:3 칸 크기로 미리 만들어 둔다(누끼는 한가운데, 사진은 칸을 가득) */
.c .im img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}

/* Work 카드: 마우스를 올린 카드 외에는 흐려지지 않는다(등장 모션도 흐림 없이) */
.g:has(.c:hover) .c:not(:hover),.g:has(.c:hover) .c.in:not(:hover){opacity:1}
.c.rev{opacity:1;transform:none;transition:none}
/* 어두운 바탕 작업(Joule 등): 층 이미지가 검정 위에서 보이도록 */
.gal.dk .g-stack{background:#000;outline:0}

/* 표 행 마지막 칸 너비 고정 → 모든 행에서 3번째 칸 왼쪽선이 맞는다 */
@media(min-width:1101px){.ix a,.nav-more .ix a{grid-template-columns:3rem 1fr 2fr 7rem}}

/* Joule 플룸 제너레이터 */
.gen{display:grid;grid-template-columns:repeat(9,1fr);gap:var(--m);margin-top:calc(var(--m)*1.2)}
.gen .gv{grid-column:1/7;background:#000;aspect-ratio:1/1;position:relative}
.gen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.gen .gp{grid-column:7/10;display:flex;flex-direction:column}
.gc{position:relative;display:grid;grid-template-columns:1fr 4.2rem;align-items:baseline;gap:.2em var(--m);padding:.7em 0 .35em;font-weight:400}
.gc label{font-size:.95rem;font-weight:400}
.gc input[type=number]{width:100%;border:0;border-bottom:1px solid var(--fg);border-radius:0;background:#f1f1f1;font:inherit;font-weight:400;font-size:.95rem;text-align:right;padding:.1em .3em;-moz-appearance:textfield}
.gc input[type=number]::-webkit-inner-spin-button{appearance:none}
.gc input[type=range]{grid-column:1/3;-webkit-appearance:none;appearance:none;width:100%;height:1.4rem;background:transparent;margin:0}
.gc input[type=range]::-webkit-slider-runnable-track{height:1px;background:linear-gradient(to right,#000 var(--fill,50%),#c9c9c9 var(--fill,50%))}
.gc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-7px;border-radius:0;background:#000;border:0}
.gc input[type=range]::-moz-range-track{height:1px;background:#c9c9c9}
.gc input[type=range]::-moz-range-progress{height:1px;background:#000}
.gc input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:0;background:#000;border:0}
@media(max-width:900px){.gen{grid-template-columns:1fr}.gen .gv,.gen .gp{grid-column:1}}
/* 상세 페이지: 연한 바탕 작업이 흰 페이지에 묻히지 않도록 이미지 영역에 연회색 바탕 */

.gal .gi-stack.lt{background:#f1f1f1;padding:calc(var(--m)*2) var(--m)}

/* 선 위계: 큰 구역을 나누는 선만 2px, 목록·카드 안의 선은 1px. 구역선 바로 아래 첫 줄의 겹선은 없앤다 */
.hdw,.sec,.fw,.jx{border-color:var(--fg)}
.hdw{border-bottom-width:2px}.sec{border-top-width:2px}.fw{border-bottom-width:2px}.jx{border-top-width:2px}.jg{border-bottom-width:2px}
.sec .ix a:first-child{border-top:0}
.ft{border-top-width:2px}
.ls a{border-top-color:var(--fg)}
.jx{border-top:0}
/* 헤더 메뉴: 심볼 높이 기준 세로 가운데 */
.hd a.m{display:flex;align-items:center;height:calc(var(--fn)*1.5);padding-bottom:calc(var(--m));box-sizing:content-box;line-height:1}
/* 푸터: 헤더와 같은 4칼럼 그리드 — 연락처는 Work 칼럼 시작선에 맞춘다 */
.ft div{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--m)}
.ft div>*:nth-child(2){grid-column:2}
.ft div>*:last-child{grid-column:4;justify-self:end}
@media(max-width:700px){.ft div{display:flex;justify-content:space-between}}

.ft .fmid{display:flex;gap:1.6em}

/* ---- 모바일(터치) 정리 ---- */
@media(max-width:700px){
  .hd{grid-template-columns:repeat(4,1fr)}
  .c .k{display:none}
}

/* 리스트: 오른쪽 끝에 작은 썸네일(작업=Year 자리, 저널=날짜 대신) */
.mt{display:block;height:2.3em;width:auto;margin-left:auto;object-fit:cover;aspect-ratio:4/3}
.tb a,.ls a{align-items:center}
.ls a{grid-template-columns:3rem 1fr 4.5rem}
.ls a span:last-child{text-align:right}
@media(max-width:900px){.ls a{grid-template-columns:3rem 1fr 4.5rem}.ls a span:last-child{text-align:right}}

.art .body .fine{font-size:12px;line-height:1.6;color:#777;margin-top:4em;padding-top:1em;border-top:1px solid #d0d0d0}

/* 작업 상세 이미지 간격: 구보 프로젝트 페이지와 같은 10px(가로·세로 모두) */
.g-row{gap:10px;margin-bottom:10px}
.g-row:last-child{margin-bottom:0}
.gi-col{gap:10px}
@media(max-width:900px){.g-row.multi{gap:10px}}

/* 홈 클라이언트: 본문 칼럼(4~12열)을 3단으로, 줄 선은 목록과 같은 1px */
.cl{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--m);border-bottom:1px solid var(--fg)}
.cl>*{display:block;padding:.6em 0;border-top:1px solid var(--fg);line-height:1.3}
.cl>*:nth-child(-n+3){border-top:0}
.cl a:hover{font-style:italic}
@media(max-width:700px){.cl{grid-template-columns:repeat(2,1fr)}.cl>*:nth-child(3){border-top:1px solid var(--fg)}}

/* 홈 슬로건: PC만 표시. 모바일은 큰 글자만 화면 폭에 맞춰 크게 */
@media(max-width:700px){
  .hl .hs{display:none}
  .hero .hl{justify-content:flex-start!important;align-items:flex-end;padding:.35em 0 .12em}
  .hero .hl:nth-child(2){justify-content:flex-end!important}
  .hero .hl h1{font-size:11vw}
}
/* 태블릿 세로: VISUALIZATION의 V와 DESIGN STUDIO의 O가 위아래로 겹치는 크기. 슬로건 세 줄은 INFORMATION 글자 높이 안에(첫 줄 위=글자 위, 끝 줄 아래=글자 아래) */
@media(min-width:701px) and (max-width:1100px){
  .hero{--hfd:calc((100vw - var(--m)*2)/13.2)}
  .hero .hl h1{font-size:var(--hfd)}
  .hero .hl .hs{font-size:calc(var(--hfd)*.212);padding-bottom:calc(var(--hfd)*.07)}
}

/* Work 리스트: Category는 헤더 Journal 칸, Client는 Estimate 칸 시작선에 맞춘다(헤더와 같은 4칸 기준) */
@media(min-width:1101px){
  .tb{--c4:calc((100% - var(--m)*3)/4)}
  .tb .th,.tb a{grid-template-columns:3rem 1fr var(--c4) calc(var(--c4) - 4rem - var(--m)) 4rem}
  /* 호버해도 칸이 밀리지 않게: 안쪽 여백 대신 검정 면만 좌우로 넓힌다 */
  .tb a:hover{padding-left:0;padding-right:0;box-shadow:calc(var(--m)*-1) 0 0 var(--fg),var(--m) 0 0 var(--fg)}
}