/* ========================================================================== 세부카테고리 서브페이지(stone.html 등) 전용 스타일. 2026-07-21: 6개 세부페이지(석재시공/미장/조적/트렌치공사/도로안전시설물/ 기타작업) 전부 "02 스타일"로 통일 확정 — 데스크톱(1025px 이상)은 왼쪽 이미지 세로 갤러리(자체 스크롤) + 오른쪽 고정 정보카드(WORK/PROCESS/ CONTACT/BLOG, Prev/Next) 2단 분할, 모바일도 동일한 원리로 세로 스크롤 갤러리 + 화면 하단 고정 Prev/Next 오버레이. 처음엔 미장(plastering.html) 페이지에서만 실험적으로 적용했었는데("미장 전용 실험" 섹션), 다양한 시공 사진을 보여주기에 이 방식이 더 낫다는 판단으로 전 페이지 기본값으로 승격함. 기존 01 스타일(모바일 가로 스와이프 + 평범한 페이지 스크롤)은 혹시 몰라 backup-01style/ 폴더에 석재시공 페이지 1장만 스냅샷으로 보관해둠(실제 사이트 내비게이션에는 연결 안 됨). 사용자 피드백(2026-07-20, 소 사이즈 빨간펜 수정) 반영: 1. 타이틀 영문 라벨은 별도 작은 서브타이틀이 아니라, 한글과 같은 줄·같은 높이로 나란히 — 이후 22차 재조사에서 영문 라벨 자체를 전부 제거하기로 결정(아래 .work-title 관련 주석 참고). 2. WORK/PROCESS/CONTACT는 페이지 전체 다른 작은 텍스트(푸터 등)와 동일한 폰트 스타일로 통일 — 그리고 소(모바일) 사이즈에서도 스택이 아니라 레퍼런스처럼 3칸 나란히. 3. 하단 공용 푸터(인스타/유튜브/...)는 서브페이지에 안 나와도 됨 → 제거. 4. 이미지 갤러리는 세로 스크롤로 흐르며, 클릭한 WORK 항목에 해당하는 사진으로 바로 이동. Prev/Next는 화면(또는 카드) 하단에 고정된 텍스트 링크. 색상: 01·03·05는 기본(베이지 bg/블랙 text — body 기본값 그대로), 02·04·06은 로 반전(다크 bg/베이지 text). PROCESS 항목, "Visit" 링크는 클릭 시 이동할 개별 세부페이지가 아직 없어서 (이번 단계는 stone.html 등 큰 서브페이지까지만) 구조만 만들어두고 실제 목적지는 비워둠(href="#") — .is-stub 클래스로 "추후 연결" 상태를 표시. ========================================================================== */ /* ---------- 다크 변형(02/04/06용) ---------- */ body.work-dark{ background:var(--color-noir); color:var(--color-blanc); } body.work-dark .work-gallery-progress{ background:rgba(244,243,237,.25); } body.work-dark .work-gallery-progress span{ background:var(--color-blanc); } /* ---------- Hero: grid 3영역(info / gallery / actions) ---------- 모바일(소): 세로 1열, info → gallery → actions 순서. 1025px 이상(중/대): 왼쪽 gallery(전체 높이) + 오른쪽 info/actions 2열, 전체를 100vh 안에 가둬서 오른쪽은 고정, 왼쪽만 자체 스크롤. */ .work-hero{ display:grid; grid-template-columns:1fr; grid-template-areas: "info" "gallery" "actions"; gap:44px; /* 헤더→타이틀 간격 8차 재조사(2026-07-20): "석재시공이 가나다하우스 쪽으로 훨씬 더 올라가야 한다"는 지적으로, 다른 3개 여백(타이틀→WORK 등)과 마찬가지로 모바일에서는 좁을수록 더 촘촘하게, 1025px에서 76px에 도달 하도록 비례 스케일로 변경. padding-top의 "추가분"과 실제 화면 간격 사이엔 약 27.8px의 고정 오프셋이 있어서(헤더 자체 높이 때문 — Playwright 실측으로 확인) 목표 간격 clamp(30px,7.415vw,76px)에 27.8px를 더해서 padding-top 추가분으로 사용 */ /* 9차 재조사(2026-07-20): "석재시공이 훨씬 더 올라가야 한다"는 재지적으로 모바일 최소값을 30px→16px로 더 촘촘하게 낮춤(1025px 목표 76px는 동일) */ /* 10차 재조사(2026-07-20): "지금 여백이 100%라면 85% 정도로" — 모바일 쪽 간격 전체(최소값·vw 기울기)를 15% 더 줄임. 데스크톱(1025px 이상, 76px 고정)은 이 규칙과 별개로 아래 media query가 그대로 덮어써서 영향 없음 */ /* 11차: "위쪽 헤더가 맨 위에서 내려온 여백만큼, 맨 아래 Visit/Next도 바닥 에서 그만큼만 띄우고 싶다" — 헤더(.app-header)의 top 위치를 실측하니 뷰포트 상단에서 15.6px였음. 페이지 맨 아래 padding-bottom을 60px에서 동일하게 16px로 맞춰서 위/아래 여백을 대칭으로 맞춤 */ padding:calc(var(--grid-gutter) + 27.8px + clamp(14px, 6.3vw, 76px)) var(--grid-margin) 16px; } .work-hero-info{ grid-area:info; display:flex; flex-direction:column; } .work-gallery, .work-process{ grid-area:gallery; } .work-actions{ grid-area:actions; } .work-title{ font:700 normal clamp(30px,4.4vw,68px)/1.08 var(--font-kr); letter-spacing:-.02em; /* 7차 재조사(2026-07-20): "이건 모바일에서만 이렇게 보이는 것 같고, 중/대 에서는 다른 형태로 적용되고 있어"로 확정 — 모바일(이 base 규칙)은 좁은 화면에 맞게 더 촘촘하게, 데스크톱(아래 1025px media query)은 76/53/36/50 그대로 유지. 1025px에서 정확히 53px에 도달하도록 vw로 자연스럽게 스케일 */ /* 9차 재조사: 모바일 최소값 20px→10px로 더 촘촘하게 */ margin-bottom:clamp(10px, 5.171vw, 53px); } /* 22차 재조사(2026-07-20): "영문 라벨(Stone 등)이 서브페이지에서 너무 크게 튀어서 제거하고 한글만 넣자"는 결정으로 .work-title .en과 HTML의 자체를 6개 페이지 전부에서 삭제함. 예전 영문 라벨 전용 스타일 규칙은 더 이상 쓰이지 않아 제거 */ /* 타이틀 글자 롤(hover) — 카테고리 h3와 동일한 "드르륵" 효과 재사용 (js/category-subnav.js가 .work-title h1을 글자 단위 .roll로 감싸둠) */ .work-title .roll{ position:relative; display:inline-block; overflow:hidden; vertical-align:top; } .work-title .roll .ra, .work-title .roll .rb{ display:block; transition:transform .5s cubic-bezier(.16,.03,.08,1); transition-delay:var(--rd,0ms); } .work-title .roll .rb{ position:absolute; left:0; top:100%; } .work-title:hover .roll .ra, .work-title:hover .roll .rb{ transform:translateY(-100%); } @media (prefers-reduced-motion:reduce){ .work-title .roll .ra, .work-title .roll .rb{ transition:none; } } /* WORK/PROCESS/CONTACT/BLOG — 13차 재조사(2026-07-20, 신규 레드라인): "블루박스친 부분(라벨+목록 전부) 전부 인덱스 푸터에 있는 한글 폰트와 색상·자간·행간까지 완전히 동일하게". 처음엔 style.css의 body 기본값 (500/font-kr/16~21px)으로 맞췄었는데, 실제 index.html의 footer-data 엘리먼트는

로 t-big-text 클래스가 직접 붙어 있어서 실측(getComputedStyle) 결과 body 기본값이 아니라 .t-big-text(500 normal clamp(14px,1.1vw,19px)/normal var(--font-en))가 실제로 적용되고 있었음 — 그 실측값 그대로 재적용(굵기 700·대문자·자간 오버라이드는 전부 제거해서 라벨도 목록 내용과 완전히 동일하게) */ .work-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4em 28px; } .work-col-label{ display:block; font:500 normal clamp(14px,1.1vw,19px)/normal var(--font-en); letter-spacing:normal; /* 라벨→내용 간격 — 모바일은 vw 비례(9차: 최소값 16px→8px 더 촘촘하게), 1025px 이상은 36px 고정(위 주석 참고). WORK/PROCESS/CONTACT 라벨과 BLOG 라벨(.work-blog도 이 클래스 재사용) 둘 다 이 규칙 하나만 적용받아서 두 간격이 항상 정확히 같음(동일한 크기 요청 사항 반영) */ margin-bottom:clamp(8px, 3.512vw, 36px); } .work-col ul, .work-col ol{ list-style:none; display:flex; flex-direction:column; gap:.3em; } .work-col li{ /* 인덱스 footer-data(t-big-text)와 완전히 동일한 폰트. 색상은 별도 지정이 없으므로 body 기본 색상을 그대로 상속(다크 모드(work-dark)에서도 자동으로 맞는 색이 됨). 14차 재조사(2026-07-20): "외부미장/레미콘타설/수평몰탈, CONTACT 밑 3개 항목의 행간이 너무 넓다 — 80% 정도로 축소"로, line-height만 이 목록에 한해 footer 기준값(normal, 실측 시 font-size의 약 1.4286배)에서 80%인 1.14로 줄임(다른 폰트 값·색상은 그대로 footer와 동일하게 유지) */ font:500 normal clamp(14px,1.1vw,19px)/1.14 var(--font-en); letter-spacing:normal; } .work-col-process a, .work-col-contact a{ /* 18차 재조사(2026-07-20): border-bottom(브라우저마다 줄 상자 기준 위치가 달라 불안정) → text-decoration(사파리가