/* ========================================================================== contact-v2.html 전용 — BMD(brucemaudesign.com) Work 페이지 하단 Archive 섹션 감성을 모티브로 한 독립형 컨택 페이지. 2026-07-29(신규): 대표님이 기존 contact.html과는 별개로, BMD Archive 행 리스트 특유의 "호버 시 왼쪽에서 썸네일이 스르륵 나타나며 텍스트가 오른쪽으로 밀리는" 인터랙션 + 시공 문의 아코디언 토글 구조를 실험해보고 싶다고 요청 — 완전히 새 파일(contact-v2.html/css/contact-v2.css)로 제작. 디자인 토큰은 기존 페이지들과 동일하게 css/style.css(--color-noir/ --color-blanc/--font-kr/--font-en/--line/--grid-margin)와 css/about.css (.about-page 고정 헤더, .about-display-kr/en, .about-copy, .about-roots-lead, .about-parallax* 아웃트로)를 그대로 상속. 이 파일은 about.html/contact.html 어디에도 없던 새 컴포넌트(호버 썸네일-푸시 행, 그리드 트랜지션 아코디언, 페이지 로드 페이드인)만 추가. 실제 데이터(전화 010-7122-5202, 카카오톡 오픈채팅, 블로그/유튜브/ 인스타그램/월간 나눔 링크)는 contact.html과 동일하게 전부 실제 확인된 값 그대로 재사용 — 새로 지어내지 않음. [확인 필요] 호버 시 나타나는 썸네일 이미지 — "전화 문의"/"카카오톡"/ "시공 문의 안내" 3개 행 각각에 어울리는 실제 전용 사진이 없어(사이트 카테고리 이미지 폴더는 전부 워터마크가 박힌 가짜 플레이스홀더로 이미 확인됨 — about.css/contact.css 참고), contact.html의 시공 문의 섹션과 동일하게 About 페이지 히어로 실사진(images/about/hero.jpg, 실제 5712×4284)을 3개 행 모두에 공통으로 재사용. 전화/카카오톡처럼 사진과 직접적 연관이 없는 항목까지 사진을 넣은 것은 BMD Archive 특유의 "행마다 시각적 프리뷰가 있다"는 레이아웃 언어를 그대로 살리기 위한 절충이며, 추후 각 항목에 맞는 실제 현장 사진이 생기면 src만 교체하면 됨. [디자인 결정] 공식 채널 5개 링크는 contact.html(밑줄 제거+호버 페이드)과 달리 이번 지침에서 명시적으로 "밑줄 텍스트 링크 형태"를 요청받아 밑줄을 그대로 유지 — about.css의 공용 .about-roots-link를 재사용하지 않고 이 페이지 전용 .cv2-channel-link를 새로 정의(다른 페이지의 밑줄 제거 결정과 충돌하지 않도록 완전히 분리된 네임스페이스로 작성). 2026-07-29(2차 수정): 대표님이 첨부한 실제 brucemaudesign.com/work Archive 스크린샷 재확인 결과, 행이 [썸네일+타이틀(고정폭)] [설명 문장 (가변폭)] [카테고리 태그(고정폭, 우측 정렬, 옅은 색)] 3단 그리드이고, 호버 시 썸네일은 1열 안에서만 나타나 그 칸의 타이틀만 밀어내며 2·3열은 전혀 움직이지 않는다는 걸 확인 — 기존 "행 전체가 통째로 밀리는" 구조를 폐기하고 .cv2-row-grid(3단 grid)/.cv2-row-title-cell/.cv2-row-desc/ .cv2-row-tag로 재작성. 2026-07-29(3차 수정, 완전 재구성): 대표님이 데스크톱에 열려 있던 실제 BMD Archive 탭만 기준으로 다시 정밀 분석 요청 — 3단 그리드가 오히려 레퍼런스 느낌을 못 살린다는 피드백으로 좌우 2영역 구조로 단순화: [왼쪽 영역 .cv2-row-left] 썸네일(호버 시 등장)+타이틀(굵게)+보조 상세문장(작게, 옅게)을 한 덩어리로 묶고, [오른쪽 영역 .cv2-row-tag]는 카테고리 태그 하나만 우측 정렬로 남김. 타이틀은 h1급 "Archive." 단일 타이틀로(마침표 포함, about-display-en 그대로 재사용 — 이미 충분히 굵고 큰 대형 타이틀이라 별도 세리프 폰트 도입 없이 요건 충족). 공식 채널 리스트도 메인 리스트와 동일한 헤어라인 리듬을 갖도록 각 링크 사이에 얇은 구분선 추가(상세는 아래 SECTION 참고). 2026-07-29(4차 수정, 단일 표로 완전 통합 + 모바일 강제 1줄): "Official Channels" 같은 영어 섹션 타이틀 자체를 없애고 전화/카카오톡/시공 문의/ 월간 나눔/블로그 2종/유튜브/인스타그램까지 8개 행을 전부 .cv2-row-list 하나에 흡수, 오직 얇은 가로선만으로 연속 배치. 행 내부는 명시적으로 요청받은 "가로 3분할(flex justify-content:space-between)" 구조로 재작성: [.cv2-row-name-cell 왼쪽: 썸네일+이름, 고정폭] [.cv2-row-desc 가운데: 상세 안내문, 가변폭] [.cv2-row-tag 오른쪽: 카테고리 태그, 고정폭·우측정렬]. 이름 칸(.cv2-row-name-cell)은 폭을 고정(overflow: hidden)해 두어 호버 시 썸네일이 그 칸 "안에서만" 나타나며 이름 텍스트를 밀어내고, 가운데/오른쪽 칸은 이전과 동일하게 위치가 전혀 바뀌지 않음. "모바일 포함 모든 화면에서 줄바꿈 없이 완벽한 1줄" 요청에 맞춰 이름· 태그는 white-space:nowrap으로 절대 줄바꿈되지 않게 고정하고, 가운데 상세문(.cv2-row-desc)은 공간이 부족한 좁은 화면에서 줄바꿈 대신 text-overflow:ellipsis로 우아하게 축약되도록 처리(내용 전체는 각 행의 실제 href/aria로 항상 접근 가능하므로 정보 손실 없음). 2026-07-29(5차 수정, 영문 태그 삭제 + 3단 전부 한글 + 본문체 통일): 매 행 오른쪽의 영문 카테고리 태그(Direct Call/KakaoTalk/...)를 완전히 삭제 요청받아, 기존 .cv2-row-desc/.cv2-row-tag 2칸 구조를 .cv2-row-col2/ .cv2-row-col3 두 개의 "동등한 한글 칸"으로 교체(기존 가운데 칸에 있던 안내 문장을 두 칸으로 나눠 재배치). 두 칸 모두 flex:1 1 0으로 남은 공간을 균등 분배하고 각자 ellipsis 축약. 모바일(~900px 미만)에서는 "1,3단만 보이게" 요청에 따라 2번째 칸(.cv2-row-col2)을 display:none으로 숨기고 이름 칸+3번째 칸만 노출, 3번째 칸이 남은 공간을 전부 차지하도록 flex-grow 조정. 추가로 "모든 텍스트 스타일 같게, 볼드 없이 본문체처럼" 요청에 따라 이름(.cv2-row-name)의 font-weight:700을 제거하고, 이름/ 2번째/3번째 칸 전부 about-copy와 동일한 폰트 값(500 weight, 동일 크기·행간·opacity:.85)으로 통일 — 굵기/영문 대문자/자간 등 시각적 차별 요소를 전부 제거해 세 칸이 완전히 같은 "본문 텍스트"처럼 보이도록 처리. 2026-07-29(6차 수정, index.html 폰트 값 1:1 통일 + 라인 얇게 + 3단만 우측정렬): 대표님이 "이 페이지 작은 한글폰트가 index.html과 정말 같은 값이냐"고 재확인 요청 — 대조 결과 5차 수정 때 썼던 값(about-copy 기준 clamp 13~16.5px/opacity:.85)은 about.html/contact.html 쪽 캐논이었고, index.html 쪽 "작은 한글" 캐논(.hero-info .col2bis/.col3/.col4 li — 서비스 목록·footer 리스트에 실제로 쓰이는 스타일, css/style.css 참고)은 font-size clamp(14px,1.1vw,19px)/weight 500/letter-spacing normal/ opacity 없이 완전 불투명(font-family도 var(--font-en), 한글은 fallback var(--font-kr)로 렌더링되어 실질적으로 동일)으로 서로 다른 값이었음 — index.html 쪽 값으로 1:1 맞춰 이름/2번째/3번째 칸 전부 재조정. 추가로 "라인을 더 얇게"는 사이트 전역에서 두루 쓰이는 --line(2px) 토큰을 직접 건드리면 다른 페이지에도 영향을 주므로, 이 페이지 전용 --cv2-line(1px)을 새로 정의해 헤어라인만 얇게 적용(전역 토큰은 그대로 유지). "3단만 오른쪽 정렬"은 .cv2-row-col3에만 text-align:right 추가 (이름/2번째 칸은 계속 왼쪽 정렬). 2026-07-29(7차 수정, 항목 재구성 + 여백 타이트하게 + 화살표/썸네일 제거): 항목이 10개로 재구성되면서(contact-v2.html 상단 주석 참고) "라인과 텍스트 사이 간격이 너무 여유롭다"는 피드백에 따라 .cv2-row의 상하 패딩을 대폭 축소(기존 clamp(20px,2.6vw,34px) → clamp(10px,1.3vw, 16px))해 실제 BMD 레퍼런스처럼 타이트한 줄 간격으로 조정. 시공문의 행은 화살표(.cv2-row-chevron)를 완전히 삭제하고 아래 아코디언 패널의 리드 문장도 .about-roots-lead(굵고 큰 스타일) 대신 .about-copy로 바꿔 다른 리스트 항목과 동일한 본문 텍스트로 통일(html에서 클래스 교체) — 이 파일에서는 더 이상 쓰이지 않는 .cv2-row-chevron 규칙을 완전히 제거. 실제 링크가 없는 "사업자정보" 행을 위해 .cv2-row--static 모디파이어 추가(커서/호버 배경 없음 — 클릭 가능한 다른 행과 시각적으로 구분). 2026-07-29(8차 수정, 2번째 칸 위치 + 썸네일 크기/모션): (1) 대표님이 실제 화면 캡처에 빨간 박스(2번째 칸 현재 위치)/파란 세로선(목표 위치)을 표시 — 픽셀 실측 결과 목표는 콘텐츠 폭의 약 28%. .cv2-row-name-cell의 width 상한을 196px→900px로 넓혀(25vw가 실질적으로 곧바로 상한에 막히지 않도록) 데스크톱 전 구간에서 비율이 일정하게 유지되도록 수정. (2) 호버 시 나타나는 썸네일 크기를 캡처에 표시된 파란 박스 크기로 확대(최대 52px→80px 폭, 비율 4:3→8:5)하고, "나타날 땐 빠르게, 사라질 땐 천천히 — 커서를 빠르게 내리면 물결치듯" 요청에 따라 hover 진입/이탈 트랜지션 지속시간을 비대칭으로 분리(진입 .28s / 이탈 .95~1.1s). 2026-07-29(9차 수정, 썸네일 오버레이 방식으로 전면 재설계): 대표님이 "호버 시 간격이 넓어지고 배경 색상도 바뀌는데 그 두 가지 다 필요없다, 사진만 나오면 된다"고 지적 — 원인은 두 가지: ① .cv2-row:hover의 행 배경색(rgba) 틴트, ② .cv2-row-thumb가 이름 칸의 flex 흐름 안에서 폭+margin-right를 차지하며 이름 텍스트를 오른쪽으로 밀어내던 방식. ①은 규칙 자체를 삭제. ②는 .cv2-row-thumb를 position:absolute 오버레이로 바꿔 이름 칸(.cv2-row-name-cell, position:relative 기준점) 왼쪽 위에 "덧씌우듯" 나타나게 재설계 — 더 이상 이름 텍스트/2·3번째 칸 중 어느 것도 위치가 바뀌지 않고, 오직 사진 박스 하나만 커졌다 작아짐. 크기는 새로 캡처에 표시된 파란 박스를 픽셀 실측(≈79×50px)한 뒤 "늘려달라"는 요청대로 상한을 약 20% 키움(80px→96px). 또 "펼쳐질 땐 좌→우, 사라질 땐 우→좌로 접히는 느낌(스르륵 페이드 아님)" 피드백에 맞춰 opacity 페이드와 흑백↔컬러 필터 트랜지션(둘 다 "색이 바뀌는" 부수 효과)을 전부 제거하고 width 하나만으로 여닫히게 단순화, 이탈(접힘) 속도도 살짝 더 늦춰 접히는 느낌을 강조. 2026-07-29(10차 수정, 중·대 사이즈 세로 여백 확보): "모바일은 예쁜데 중·대 사이즈에서는 이미지가 위아래로 꽉 차서 여백이 없다"는 피드백 — 9차에서 키운 썸네일 상한(96px, 8:5 비율→높이 60px)이 화면이 넓어질수록 행 자체의 세로 리듬(패딩 clamp(10,1.3vw,16)+글자 clamp(14,1.1vw,19)×1.5) 보다 더 빠르게 커져 결국 행 높이를 추월해 위아래 hairline에 닿아버림. 썸네일 hover 상한을 96px→78px로 낮춰(최소도 56→52px) 모든 화면 폭에서 위아래 여백이 항상 남도록 재조정(자세한 계산은 아래 .cv2-row-thumb:hover 규칙 주석 참고) — "확대" 요청보다 이번 "여백 확보" 요청을 우선함. 2026-07-29(11차 수정, 다시 "밀림" 방식으로): 대표님이 실제 brucemaudesign.com/work 탭 캡처(Toronto Carpet Factory 행)를 보여주며 "이미지가 나타나면 1단 단어가 오른쪽으로 밀려야 한다"고 요청 — 9차에서 도입한 절대 포지션 오버레이(밀림 없이 사진만 덧씌워짐)를 다시 걷어내고 8차 이전처럼 썸네일이 이름 칸의 flex 흐름 안에서 폭+margin-right를 차지해 이름 텍스트를 밀어내는 방식으로 복귀. 다만 9·10차에서 고쳤던 것들(행 배경색 hover 틴트 없음, opacity 페이드·흑백↔컬러 필터 없이 순수 width 모션, 어떤 화면 폭에서도 위아래 여백이 남는 78px 상한 크기)은 전부 그대로 유지. 2026-07-29(12차 수정, 시공문의 아코디언 호버 전환): "지금은 클릭해야 펼쳐지는데, 오버(호버)하면 펼쳐지고 마우스가 벗어나면 사진처럼 다시 접히게 해달라" 요청 — 클릭 토글용 JS(contact-v2.html 하단 스크립트)를 완전히 삭제하고, .cv2-accordion(버튼+패널을 함께 감싸는 컨테이너)에 :hover/:focus-within이 걸릴 때만 .cv2-panel-wrap이 펼쳐지도록 순수 CSS 아코디언으로 전환. 버튼 위든 펼쳐진 패널 내용 위든 컨테이너 안에 마우스가 있는 동안은 열려 있고, 컨테이너를 완전히 벗어나야 다시 접힘. 2026-07-29(13차 수정, 행 높이 고정 + 이미지 5%/5% 여백): "이미지가 생기면 선(hairline)이 벌어진다, 선은 고정이어야 하고 위아래 각 5% 여백을 두고 이미지가 그 안을 가득 채우면 된다" — 11차에서 되돌린 in-flow 밀림 방식은 호버 시 썸네일(더 큰 높이)에 맞춰 행 자체가 자동으로 커지는 부작용이 있었음. .cv2-row에 --cv2-row-h(패딩×2+글자 줄높이) 커스텀 프로퍼티로 행의 세로 높이를 고정값으로 못박아 호버 여부와 무관하게 위아래 선이 전혀 움직이지 않게 하고, 썸네일 높이는 그 고정 높이의 정확히 90%(위아래 5%씩 자동 여백)로, 폭은 8:5 비율 유지를 위해 높이×1.6으로 계산 — 이제 호버해도 오직 폭(width)만 변하고 선의 위치와 이미지 높이는 항상 동일. ========================================================================== */ /* ---------- 페이지 로드 시 전체 페이드인(스크롤 트리거 아님, 로드 즉시 1회) ---------- */ .cv2-fade-in{ animation:cv2FadeIn .9s cubic-bezier(.16,1,.3,1) both; } @keyframes cv2FadeIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } } @media (prefers-reduced-motion:reduce){ .cv2-fade-in{ animation:none; } } /* ---------- 상단 타이틀 ---------- */ .cv2-archive{ padding-top:clamp(50px,6vw,100px); /* 4차 수정: 공식 채널 섹션이 사라지고 이 리스트가 Outro 직전 마지막 콘텐츠가 되었으므로 하단 여백을 넉넉하게 확보 */ padding-bottom:clamp(60px,7vw,120px); } .cv2-title{ margin:0 0 clamp(32px,4vw,56px); } /* ---------- Archive 행 리스트 (얇은 헤어라인만, 카드/회색 배경 없음) ---------- 6차 수정: "라인을 더 얇게" 요청 — 사이트 공용 토큰 --line(2px)은 다른 페이지(about/contact/category 등)에서도 두루 쓰이는 값이라 그대로 두고, 이 페이지 전용 헤어라인 두께만 --cv2-line(1px)로 별도 정의해 더 얇게 적용(전역 --line 토큰은 변경하지 않음) */ .cv2-row-list{ --cv2-line:1px; border-bottom:var(--cv2-line) solid var(--color-noir); } .cv2-accordion{ border-top:var(--cv2-line) solid var(--color-noir); } .cv2-accordion .cv2-row{ border-top:none; } /* 와