@charset "utf-8";
/* ==========================================================================
유덕건축(dbcom92) — 건축사사무소 포트폴리오 · PC 1920
Figma C0jd8QVJgzgwCstvhc0kM4 (PC 1920 · 콘텐츠 1600 / 좌우 160)
바탕은 temp23 템플릿 테마(그누보드 5.3.1.4). 4 · 6 · 7 · 11 · 12 · 13 · 14-0 · 14-1절이 시안이고,
14절 글보기는 템플릿 구조에 시안 색만 입혔다. 14절 목록 행 · 15~17절(표 목록 · 회원)은 아직 템플릿 그대로다 — 1절 템플릿 토큰을 쓴다.
18 · 19절(온라인 문의 폼 · 토스트)은 시안 4-2 다
이 파일과 response.css 둘뿐이다. 새 CSS 파일을 만들지 않는다.
게시판·회원 스킨의 style.css 도 두지 않는다 — 모양은 전부 여기서 잡는다.
1. 토큰 — 시안 토큰(Figma 'dbcom92 tokens') · 템플릿 토큰
2. 초기화 · 그누보드 공용 유틸
3. 공통 조각 — 아이콘 · 버튼 · 배지 · 키-값 표 · 등장 (템플릿 — 서브 · 게시판이 쓴다)
4. Header 120 · 로고 · Button Outline
5. 모바일 드로어(삼선 메뉴) — 768 이하
6. SubTop · SNB · 브레드크럼
7. 메인 S1 프로젝트 바둑판
11. Footer
(8 · 9 · 10절은 비움 — 템플릿 메인 S2~S5 자리. 게시판 스킨 주석이 13~16절 번호를 가리켜 번호를 당기지 않았다)
12. 서브 — 판면 · 사진 자리 · 건축개요 · 소개글 · 지도 · 개요 묶음 · 소제목 줄 · 지도 자리 · 빈 상태
13. 게시판 공통 — 툴바(건수 · 검색) · 페이저 · 관리자 줄
14-0. 게시판 — PROJECT 목록 · 상세 (skin/board/gallery)
14. 게시판 — 목록 행 · 글보기(basic · news · history · qa 글보기가 같이 쓴다)
14-1. 게시판 — NEWS 목록 (skin/board/news)
15. 게시판 — 표 목록(1:1 문의) · 연혁 · 정책 · 1:1 문의
16. 글쓰기 폼(관리자용 기본 스킨)
17. 회원 · 컨텐츠 · 검색 · FAQ
18. 온라인 문의 폼 (skin/board/inquiry) — 칸 · 에러 · 자동등록방지 · 동의 · 보내기
19. 토스트 (문의 보낸 뒤)
========================================================================== */
/* ==========================================================================
1. 토큰
화면 규칙에 hex 를 직접 쓰지 않는다.
========================================================================== */
:root {
/* ── 시안 토큰 — Figma 'dbcom92 tokens'(C0jd8QVJgzgwCstvhc0kM4). 헤더 · 메인 · 푸터 · 서브 상단 · 정적 서브 · PROJECT · NEWS · 글보기 색이 쓴다 ──
아래 템플릿 토큰은 아직 템플릿 그대로인 목록 행 · 회원 · 문의가 쓴다. 그 화면을 시안대로 바꿀 때 이쪽으로 합친다 */
--c-text-strong: #1c1c1c; /* color/text/strong */
--c-text-body: #555555; /* color/text/body — #fcfcfc 위 7.3:1 */
--c-text-muted: #737373; /* color/text/muted — #fcfcfc 위 4.6:1. bg/soft 위에는 두지 않는다(4.1:1) */
--c-text-on-brand: #ffffff; /* color/text/on-brand */
--c-bg-paper: #fcfcfc; /* color/bg/paper — 페이지 */
--c-bg-default: #ffffff; /* color/bg/default — 입력칸 · 체크 상자 면(FormField · AgreeCheck) */
--c-bg-soft: #efefef; /* color/bg/soft — 사진 자리 */
--c-bg-inverse: #1c1c1c; /* color/bg/inverse — Button Outline hover 면 */
--c-border-default: #e3e3e3; /* color/border/default */
--c-border-strong: #8c8c8c; /* color/border/strong — 버튼 테두리 */
--c-brand-accent: #ee5120; /* color/brand/accent — 로고 주황. 현재 메뉴 아래 2px 막대에만(3.5:1 · 비텍스트 3:1 통과). 글자에 쓰지 않는다 */
--c-dim: rgba(28, 28, 28, .5); /* 드로어 뒤 딤 한 겹 — text/strong .5 (CSS 전용, 시안에 모바일 없음) */
/* 판면 — layout/container 1600 · layout/gutter 160(1920 에서 --yd-pad 가 160) · layout/header 120 · layout/grid-gap 32
★ --yd-pad 는 꽉 찬 요소의 좌우 padding 으로만 쓴다(그 요소 폭으로 계산된다). 좁아지면 --yd-pad-min(response.css 가 줄인다) */
--layout-container: 1600px;
--layout-header: 120px;
--layout-grid-gap: 32px;
--yd-pad-min: 80px;
--yd-pad: max(var(--yd-pad-min), calc((100% - var(--layout-container)) / 2));
/* 글자 — 텍스트 스타일(Pretendard 하나 · 하한 14). font 축약형이라 자간은 따로 적는다 */
--t-page: 300 40px/52px var(--font); /* title/page — Light 40/52 · 자간 -1%(--ls-title) · 서브 상단 제목 */
--t-project: 300 32px/44px var(--font); /* title/project — Light 32/44 · 자간 -1% · 프로젝트 · 회사명 */
--t-heading: 400 20px/30px var(--font); /* heading/section — 소제목 줄 · 로고 파일이 없을 때 글자 로고 */
--t-body-l: 400 17px/30px var(--font); /* body/l — 부제 · 소개 본문 */
--t-body-m: 400 16px/28px var(--font); /* body/m — 프로젝트 설명 · 빈 상태 */
--t-body-s: 400 15px/24px var(--font); /* body/s — 개요 값 · 검색어 · 페이지 번호 */
--t-nav: 500 15px/22px var(--font); /* nav · button — Medium 15/22 · 자간 4% · 대문자 */
--t-label: 500 14px/20px var(--font); /* label/en — Medium 14/20 · 자간 10% · 대문자 */
--t-caption: 400 14px/22px var(--font); /* caption — Regular 14/22 · 자간 0 */
--ls-title: -.01em;
--ls-caps: .04em;
--ls-label: .1em;
/* 움직임 — ProjectTile 주석: hover 사진 opacity .8(.14s ease-out) · 로딩 opacity 0→1(.3s) */
--dur-tile-hover: 140ms;
--dur-tile-in: 300ms;
/* ── 템플릿 토큰(temp23) — 서브 · 게시판 · 회원 ─────────────────────────────────────── */
/* 색 — 템플릿 Figma 변수 (왼쪽 이름은 바탕 테마에서 쓰던 이름 · 주석이 템플릿 Figma 변수) */
--brand: #1656AC; /* color/primary/base — 버튼 · 강조 면 · 밝은 바탕 위 글자 */
--brand-hover: #0F3D78; /* color/primary/deep — 블루 면 hover */
--brand-soft: #EAF1FB; /* color/primary/soft */
--ink: #0F141A; /* color/ink/900 — 제목 */
--text-2: #48515C; /* color/ink/700 — 본문 */
--text-3: #677180; /* color/ink/500 — 보조 */
--line: #E2E6EB; /* color/line/base */
--white: #FFFFFF; /* color/surface/white · onDark/high */
--paper: #F3F5F8; /* color/surface/paper */
--chip: #F3F5F8; /* 배지 면 = paper */
--dark: #0B1016; /* color/dark/900 */
--dark-700: #1C2631; /* color/dark/700 — 다크 면 hover */
/* 반투명 — Figma 컬러 스타일 */
--line-on-photo-16: rgba(255, 255, 255, .16); /* line/on-photo-16 */
/* 간격 — 시안 space/4 ~ space/160 (판면 좌우는 위 --yd-pad) */
--sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px;
--sp-24: 24px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-56: 56px;
--sp-64: 64px; --sp-80: 80px; --sp-120: 120px; --sp-160: 160px;
/* 모양 — radius/none 0 · radius/pill 30 */
--radius: 0;
--radius-pill: 30px;
/* 글꼴 — Pretendard 하나(국문 · 영문) */
--font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
"Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
/* 움직임 — 모션 스토리보드 22:2 토큰 + 인터랙션 플로우 70:2 (글자 쪼개기 · 숫자 굴림 · 사진 리빌은 쓰지 않는다) */
--dur: 600ms; /* duration/base — 진입 fade-up · 카드 사진 hover */
--dur-state: 240ms; /* duration/fast — hover · 탭 (시안 헤더 · 버튼 hover 도 쓴다) */
--ease: cubic-bezier(.16, 1, .3, 1); /* easing/out-expo */
--ease-out: cubic-bezier(.16, 1, .3, 1);
--rise: 24px; /* 통째 페이드인 업 거리(플로우 · SubTop 주석) */
}
/* ==========================================================================
2. 초기화 · 그누보드 공용 유틸
그누보드가 실제로 쓰는 것만 남긴다. .sound_only 를 지우면
"팝업레이어 알림이 없습니다" 같은 문구가 화면에 그대로 뜬다
========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
background: var(--c-bg-paper); /* 시안 화면 바탕 bg/paper — 메인 · 서브 모두 */
color: var(--text-2);
font-family: var(--font);
font-size: 16px;
line-height: 1.75;
letter-spacing: -0.2px;
word-break: keep-all;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 2px solid var(--c-text-strong); outline-offset: 2px; /* 시안에 파랑이 없다 — 먹색 */
}
button { font: inherit; color: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
address, em { font-style: normal; }
legend { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
hr { display: none; }
/* ★ 그누보드 스킨 전체가 쓰는 클래스다. 절대 지우지 않는다 */
.sound_only, #hd_h1, #skip_to_container a, .msg_sound_only {
position: absolute !important; width: 1px !important; height: 1px !important;
margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap; border: 0;
}
#skip_to_container a:focus, #skip_to_container a:active {
position: fixed !important; left: 0; top: 0; z-index: 10000;
width: 200px !important; height: auto !important; padding: 12px 0;
clip: auto; clip-path: none; background: var(--ink); color: var(--white); text-align: center;
}
#hd_login_msg { display: none; }
/* 팝업레이어 */
#hd_pop { position: relative; z-index: 1000; margin: 0 auto; height: 0; }
#hd_pop h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
.hd_pops { position: absolute; border: 1px solid var(--line); background: var(--white); }
.hd_pops img { max-width: 100%; }
.hd_pops_con { max-width: 100%; }
.hd_pops_footer { display: flex; justify-content: space-between; padding: 0; background: var(--ink); color: var(--white); }
.hd_pops_footer button { display: inline-block; height: 40px; padding: 0 16px; border: 0; background: none; color: var(--white); font-size: 14px; cursor: pointer; }
/* 새창 · 사이드뷰 */
#newwin { background: var(--white); }
.sv_wrap { position: relative; display: inline-block; font-weight: normal; }
.sv_wrap .sv { display: none; position: absolute; z-index: 1000; top: 24px; left: 0; width: 100px; padding: 8px 0; border: 1px solid var(--line); background: var(--white); }
.sv_wrap .sv a { display: block; padding: 6px 12px; font-size: 14px; }
.sv_wrap.sv_on .sv { display: block; }
/* 캡챠 */
#captcha { display: inline-flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
#captcha legend { display: none; }
#captcha #captcha_img { height: 52px; border: 1px solid var(--line); vertical-align: middle; }
/* ★ 아이콘이 없어 글자 버튼이다. 52px 정사각으로 두면 "숫자음성듣기"가 칸을 넘어
옆 버튼과 겹쳐 보인다 — 글자 길이만큼 늘어나게 둔다 */
#captcha #captcha_mp3, #captcha #captcha_reload {
width: auto; height: 52px; padding: 0 var(--sp-12); white-space: nowrap;
border: 1px solid var(--line); border-radius: var(--radius); background: transparent;
color: var(--text-3); font-size: 14px; cursor: pointer;
}
#captcha #captcha_mp3:hover, #captcha #captcha_reload:hover { border-color: var(--ink); color: var(--ink); }
#captcha #captcha_mp3 span, #captcha #captcha_reload span { display: none; }
#captcha #captcha_key { width: 120px; height: 52px; padding: 0 var(--sp-12); border: 1px solid var(--line); font-size: 16px; }
#captcha #captcha_info { display: block; width: 100%; margin-top: var(--sp-8); font-size: 14px; color: var(--text-3); }
/* 체크박스·라디오 — 브라우저 기본 파랑을 주색으로 돌린다 */
input[type="checkbox"], input[type="radio"] { accent-color: var(--c-text-strong); } /* 시안에 파랑이 없다 — 먹색 */
/* 그누보드 기본 버튼 — 시안 Btn 처럼 pill. 주요 = 다크 면 */
.btn_submit {
display: inline-flex; align-items: center; justify-content: center;
height: 56px; padding: 0 var(--sp-40); border: 0; border-radius: var(--radius-pill);
background: var(--dark); color: var(--white);
font-family: var(--font); font-size: 16px; font-weight: 600; line-height: 1.45; cursor: pointer;
transition: background-color var(--dur-state) var(--ease-out);
}
.btn_submit:hover { background: var(--dark-700); }
.btn_cancel, .btn_close {
display: inline-flex; align-items: center; justify-content: center;
height: 56px; padding: 0 var(--sp-32); border: 1px solid var(--line); border-radius: var(--radius-pill);
background: transparent; color: var(--text-2); font-size: 16px; cursor: pointer;
transition: border-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out);
}
.btn_cancel:hover, .btn_close:hover { border-color: var(--ink); color: var(--ink); }
/* 관리자 · 선택삭제 · 글쓰기는 관리용이다. 강조하지 않는다 — 직각 · 선 border/default · caption text/body */
.btn_b01, .btn_b02, .btn_b03, .btn_admin {
display: inline-flex; align-items: center; justify-content: center;
height: 44px; padding: 0 var(--sp-20); border: 1px solid var(--c-border-default); border-radius: var(--radius);
background: transparent; color: var(--c-text-body); font: var(--t-caption); letter-spacing: 0; cursor: pointer;
transition: border-color var(--dur-state) ease-out, color var(--dur-state) ease-out;
}
.btn_b01:hover, .btn_b02:hover, .btn_b03:hover, .btn_admin:hover { border-color: var(--c-text-strong); color: var(--c-text-strong); }
.btn_confirm { display: flex; justify-content: center; gap: var(--sp-12); }
/* 그누보드 기본 표 — 남겨 두되 톤만 맞춘다 */
.tbl_wrap table { width: 100%; border-top: 2px solid var(--ink); }
.tbl_wrap th, .tbl_wrap td { padding: var(--sp-16); border-bottom: 1px solid var(--line); font-size: 16px; text-align: left; }
.tbl_wrap th { background: var(--paper); color: var(--ink); font-weight: 600; }
.tbl_head01 caption, .tbl_head02 caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* 본문 폭 컨테이너 */
#wrapper, #wrapper02 { position: relative; }
/* ==========================================================================
3. 공통 조각 — 아이콘 · 버튼 · 화살표 · 배지 · 키-값 표 · 등장
(템플릿 영문 라벨 .eyebrow · 섹션 표제 .sec-head 는 2026-10-19 문의 폼을 시안으로 바꾸며 지웠다 — 쓰는 곳이 그것뿐이었다)
========================================================================== */
/* 아이콘 — Lucide 선 1.5. 크기와 상관없이 선 1.5px (시안 인스턴스가 16·18·20·48 어디서나 1.5) */
.dm-i { flex: none; display: inline-block; vertical-align: middle; }
.dm-i * { vector-effect: non-scaling-stroke; }
/* 버튼 — Btn 3:26. 높이 60 · pill · padding 0 24 0 32 · 글자 Btn/KR 15/15 · 화살표 20 · 간격 24
★ .btn 에는 면·테두리를 적지 않는다. 그누보드 스킨이 `btn_cancel btn` 처럼 두 클래스를 같이 다는 곳이 있다 */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-24);
height: 60px; padding: 0 var(--sp-24) 0 var(--sp-32); border-radius: var(--radius-pill);
font-family: var(--font); font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -0.2px; white-space: nowrap; cursor: pointer;
transition: background-color var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out);
}
.btn:not(:has(.dm-i)) { padding: 0 var(--sp-32); }
.btn--blue { border: 0; background: var(--brand); color: var(--white); }
.btn--blue:hover { background: var(--brand-hover); }
.btn--dark { border: 0; background: var(--dark); color: var(--white); }
.btn--dark:hover { background: var(--dark-700); }
.btn--white { border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.btn--white:hover { border-color: var(--ink); }
.btn--ghost { border: 1px solid var(--line-on-photo-16); background: transparent; color: var(--white); }
.btn--ghost:hover { border-color: var(--white); }
.btn .dm-i { transition: transform var(--dur-state) var(--ease-out); }
.btn:hover .dm-i { transform: translateX(3px); }
.btn:disabled { opacity: .5; cursor: default; }
/* 배지 — 알약형 */
.badge { display: inline-flex; align-items: center; padding: 4px var(--sp-12); border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; line-height: 22px; letter-spacing: -0.1px; font-style: normal; white-space: nowrap; }
.badge--neutral { background: var(--chip); color: var(--text-3); }
.badge--brand { background: var(--brand-soft); color: var(--brand); }
/* 키-값 표 — 글보기 머리 정보(분류 · 준공 연도 · 문의 항목). 행 위에만 선 */
.kv { display: flex; flex-direction: column; }
.kv__row { display: flex; gap: var(--sp-24); padding: var(--sp-16) 0; border-top: 1px solid var(--line); }
.kv dt { flex: none; width: 140px; font-size: 15px; font-weight: 600; line-height: 26px; letter-spacing: -0.2px; color: var(--text-3); }
.kv dd { flex: 1; min-width: 0; margin: 0; font-size: 16px; line-height: 28px; letter-spacing: -0.2px; color: var(--ink); }
/* 등장 — 통째 페이드인 업(아래→위 24 · 600ms · out-expo) · 뷰포트 진입 시 1회.
숨김 클래스(.reveal)는 JS 가 붙인다 — JS 가 실패하면 처음부터 보인다 */
.reveal { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
.pc-only { display: inline; }
/* ==========================================================================
4. Header 120 · 로고 · Button Outline — 시안 Header 10:17 · Logo 10:8 · NavItem 10:16 · Button 10:94
고정하지 않는다(스크롤과 함께 올라간다 — 레퍼런스). 로고 왼쪽 · 1차 메뉴(간격 40) + 로그인 줄(간격 64) 오른쪽.
로그인 줄 = 로그인 / 관리자 · 내정보 + 로그아웃(2026-10-19 사용자 요청). 2차 메뉴는 1차 아래 작은 드롭다운(사용자 요청 — 시안에는 없다).
768 이하는 메뉴 · 로그인 줄 대신 삼선 버튼 → 5절 드로어
========================================================================== */
.hd { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-40); height: var(--layout-header); padding: 0 var(--yd-pad); background: var(--c-bg-paper); }
.hd__logo { flex: none; display: inline-flex; }
.hd__right { display: flex; align-items: center; gap: var(--sp-64); }
/* 로고 190×56 — 헤더 · 푸터 공용(dm_logo). 파일이 없으면 홈페이지 제목 글자 */
.dm-logo { display: block; width: 190px; height: 56px; object-fit: contain; }
.dm-logo--text { width: auto; height: auto; font: var(--t-heading); letter-spacing: 0; color: var(--c-text-strong); white-space: nowrap; }
/* 1차 메뉴 · 로그인 — 글자 nav 15/22 대문자 + 아래 막대 2px(간격 4) · 위아래 8 → 누르는 높이 44.
기본 text/muted · hover text/strong · Active(현재 1차) text/strong + 막대 brand/accent */
.gnb { display: flex; align-items: center; gap: var(--sp-40); }
.hd__util { display: flex; align-items: center; gap: var(--sp-40); } /* 로그인 줄 — 관리자 · 내정보 + 로그아웃. 메뉴와 같은 간격 */
.gnb__link { display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-8) 0; font: var(--t-nav); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-text-muted); white-space: nowrap; transition: color var(--dur-state) ease-out; }
.gnb__link::after { content: ""; align-self: stretch; height: 2px; background: transparent; }
.gnb__link:hover, .gnb__link.active { color: var(--c-text-strong); }
.gnb__link.active::after { background: var(--c-brand-accent); }
/* 2차 메뉴 드롭다운 — 1차 바로 아래 가운데. 면 bg/paper + 테두리 1px border/default · 라운드 0 · 그림자 0.
2차 글자 nav 15/22 대문자 · 위아래 12 → 누르는 높이 46. 기본 text/muted · hover · 현재 2차 text/strong.
PC = hover · 키보드 초점(focus-within), 터치 = .is-open(tail.php 4). 투명도만 바뀌고 움직이지 않는다(모션 원칙) */
.gnb__item { position: relative; display: flex; }
.gnb__item:hover > .gnb__link, .gnb__item.is-open > .gnb__link { color: var(--c-text-strong); }
.gnb__sub { position: absolute; top: 100%; left: 50%; z-index: 1100; min-width: 160px; padding: var(--sp-8) 0; border: 1px solid var(--c-border-default); background: var(--c-bg-paper); transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity var(--dur-state) ease-out, visibility 0s linear var(--dur-state); }
.gnb__item:hover > .gnb__sub, .gnb__item:focus-within > .gnb__sub, .gnb__item.is-open > .gnb__sub { opacity: 1; visibility: visible; transition: opacity var(--dur-state) ease-out, visibility 0s; }
.gnb__sub-link { display: block; padding: var(--sp-12) var(--sp-24); font: var(--t-nav); letter-spacing: var(--ls-caps); text-transform: uppercase; text-align: center; color: var(--c-text-muted); white-space: nowrap; transition: color var(--dur-state) ease-out; }
.gnb__sub-link:hover, .gnb__sub-link.active { color: var(--c-text-strong); }
.gnb__empty { font: var(--t-caption); letter-spacing: 0; color: var(--c-text-muted); }
.gnb__empty a { text-decoration: underline; }
/* Button Outline — 직각 · 테두리 1px border/strong · 글자 button 15/22 대문자 + 아이콘 20(간격 12) · 위아래 16 · 좌우 32.
Figma 자동 레이아웃이 테두리를 크기에 넣는다 — 인스턴스 실측 높이 56(MORE 142×56 · 목록 93×56). hover = 면 bg/inverse + 흰 글자 */
.btn-line { display: inline-flex; align-items: center; gap: var(--sp-12); padding: var(--sp-16) var(--sp-32); border: 1px solid var(--c-border-strong); border-radius: var(--radius); background: transparent; font: var(--t-nav); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-text-strong); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-state) ease-out, border-color var(--dur-state) ease-out, color var(--dur-state) ease-out; }
.btn-line:hover, .btn-line:focus-visible { border-color: var(--c-bg-inverse); background: var(--c-bg-inverse); color: var(--c-text-on-brand); }
.btn-line .dm-i { stroke-width: 1px; } /* 시안 아이콘은 Lucide 렌더 1px. .dm-i 기본은 템플릿 1.5 */
.hd__menu-btn { display: none; } /* 삼선 버튼 — 768 이하에서만(response.css) */
/* ==========================================================================
5. 모바일 드로어(삼선 메뉴) — 768 이하에서만 열린다(response.css · tail.php 6). 2026-10-19 사용자 요청 — 템플릿 방식
오른쪽에서 밀려 나오는 패널(bg/paper · 폭 360 · 화면 88% 이내) + 뒤 딤 한 겹. 1차 + 2차 모두 펼침.
1차 nav 대문자 18 · text/strong(현재 1차 = 왼쪽 2px brand/accent 막대) · 2차 body/s · text/body(현재 2차 text/strong)
★ z-index 1200 — 메인에서 그누보드 팝업레이어가 #hd 를 인라인 1000 으로 끌어올린다
========================================================================== */
#mo_drawer { display: none; position: fixed; inset: 0; z-index: 1200; visibility: hidden; transition: visibility 0s linear var(--dur-tile-in); }
#mo_drawer.is-open { visibility: visible; transition: visibility 0s; }
#mo_drawer .dim { position: absolute; inset: 0; background: var(--c-dim); opacity: 0; transition: opacity var(--dur-tile-in) ease-out; }
#mo_drawer.is-open .dim { opacity: 1; }
#mo_drawer .panel { position: absolute; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; width: min(360px, 88vw); overflow-y: auto; background: var(--c-bg-paper); transform: translateX(100%); transition: transform var(--dur-tile-in) ease-out; }
#mo_drawer.is-open .panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
#mo_drawer, #mo_drawer .dim, #mo_drawer .panel { transition: none; }
}
.dr-head { flex: none; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 var(--sp-8) 0 var(--sp-20); border-bottom: 1px solid var(--c-border-default); }
.dr-head .dm-logo { width: 136px; height: 40px; }
.dr-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--c-text-strong); cursor: pointer; }
.dr-close .dm-i, .hd__menu-btn .dm-i { stroke-width: 1px; }
.dr-nav { flex: 1; padding: var(--sp-8) var(--sp-20); }
.dr-group { padding: var(--sp-16) 0; border-bottom: 1px solid var(--c-border-default); }
.dr-1da { position: relative; display: block; padding: var(--sp-12) 0; font: 500 18px/26px var(--font); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-text-strong); }
.dr-1da.active::before { content: ""; position: absolute; left: calc(var(--sp-20) * -1); top: var(--sp-12); bottom: var(--sp-12); width: 2px; background: var(--c-brand-accent); }
.dr-sub a { display: block; padding: var(--sp-12) 0; font: var(--t-body-s); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-text-body); }
.dr-sub a.active { color: var(--c-text-strong); }
.dr-foot { flex: none; display: flex; flex-wrap: wrap; gap: 0 var(--sp-24); padding: var(--sp-16) var(--sp-20) var(--sp-24); }
.dr-login { display: inline-block; padding: var(--sp-12) 0; font: var(--t-nav); letter-spacing: var(--ls-caps); color: var(--c-text-muted); }
body.drawer-open { position: fixed; width: 100%; overflow: hidden; }
body.drawer-open #hd { pointer-events: none; } /* z-index 가 또 밀려도 헤더가 탭을 못 가져간다 */
/* ==========================================================================
6. SubTop · SNB · 브레드크럼 — 시안 SubTop 10:50 · SnbTab 10:43 · Breadcrumb 10:44 (모든 서브 공통)
제목 title/page(위 80 · 아래 48) → SNB(아래 선 1px border/default) = 왼쪽 2차 탭(간격 40) · 오른쪽 브레드크럼
========================================================================== */
.sub-top { padding: var(--sp-80) var(--yd-pad) var(--sp-48); }
.sub-top__title { font: var(--t-page); letter-spacing: var(--ls-title); color: var(--c-text-strong); word-break: keep-all; }
.snb { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); padding: 0 var(--yd-pad); border-bottom: 1px solid var(--c-border-default); }
/* 탭 — 위 16 · 글자 nav 15/22 대문자 · 16 · 막대 2px → 높이 56. 기본 text/muted · hover · Active text/strong + 막대 brand/accent */
.snb__tabs { display: flex; align-items: flex-end; gap: var(--sp-40); min-width: 0; }
.snb__tab { display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-16); padding-top: var(--sp-16); font: var(--t-nav); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-text-muted); white-space: nowrap; transition: color var(--dur-state) ease-out; }
.snb__tab::after { content: ""; align-self: stretch; height: 2px; background: transparent; }
.snb__tab:hover, .snb__tab.active { color: var(--c-text-strong); }
.snb__tab.active::after { background: var(--c-brand-accent); }
/* 브레드크럼 — caption 14/22 · 간격 8 · 위아래 12. 마지막(현재)은 text/strong · 링크 없음.
2차 메뉴명이 소문자(project · contact)라도 대문자로 보인다(시안 · 한글 영향 없음) */
.crumb { flex: none; display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-12) 0; font: var(--t-caption); letter-spacing: 0; text-transform: uppercase; color: var(--c-text-muted); white-space: nowrap; }
.crumb a { padding: var(--sp-12) 0; margin: calc(var(--sp-12) * -1) 0; transition: color var(--dur-state) ease-out; } /* 누르는 높이 46 */
.crumb a:hover { color: var(--c-text-strong); }
.crumb strong { font-weight: inherit; color: var(--c-text-strong); }
/* 게시판 · 회원 등 그누보드 스킨을 감싸는 판면 — 위 64 · 아래 120 · 좌우 160(시안 2-1 S1) */
#container.dm-wrap { padding: var(--sp-64) var(--yd-pad) var(--sp-120); }
#container.dm-wrap::after { content: ""; display: block; clear: both; }
/* ==========================================================================
7. 메인 S1 프로젝트 — 시안 `0. 메인` 12:34 · 바둑판 grid 12:35 · ProjectTile 23:445
위 64 · 아래 120 · 바둑판 4열(1920 에서 칸 376 정사각) 간격 32 · 줄 사이 40 → 64 아래 MORE
칸 = PROJECT 게시판 최신 12건(latest theme/dm_tile). 히어로 · 소개문 없음
========================================================================== */
.m-works { display: flex; flex-direction: column; align-items: center; gap: var(--sp-64); padding: var(--sp-64) var(--yd-pad) var(--sp-120); background: var(--c-bg-paper); }
.tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-40) var(--layout-grid-gap); width: 100%; }
.tile a { display: flex; flex-direction: column; gap: var(--sp-12); }
/* 사진 자리 bg/soft 위에 사진. hover 는 사진 투명도만(.8 · .14s ease-out),
로딩은 JS 가 붙인 .is-loading 을 받는 대로 떼며 0→1(.3s) — tail.php 2 */
.tile__photo { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-bg-soft); transition: opacity var(--dur-tile-hover) ease-out; }
.tile__photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: opacity var(--dur-tile-in) ease-out; }
.tile__photo img.is-loading { opacity: 0; }
.tile a:hover .tile__photo, .tile a:focus-visible .tile__photo { opacity: .8; }
/* 제목 caption 14/22 · text/body · 가운데 1줄(넘치면 말줄임) */
.tile__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--t-caption); letter-spacing: 0; color: var(--c-text-body); text-align: center; }
.tile-grid__empty { font: var(--t-caption); letter-spacing: 0; color: var(--c-text-muted); text-align: center; }
/* ==========================================================================
11. Footer — 시안 Footer 10:67 · bg/paper · 위 선 1px border/default · 위 48 · 아래 64
왼쪽 로고 + 회사정보 2줄(caption · text/muted · 항목 간격 24 · 줄 간격 4) / 오른쪽 아래 개인정보처리방침 + 카피라이트
(8 · 9 · 10절은 비움 — 템플릿 메인 S2~S5 자리였다)
========================================================================== */
.ft { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-40); padding: var(--sp-48) var(--yd-pad) var(--sp-64); border-top: 1px solid var(--c-border-default); background: var(--c-bg-paper); }
.ft__co { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-24); }
.ft__logo { display: flex; }
.ft__info { display: flex; flex-direction: column; gap: var(--sp-4); font: var(--t-caption); letter-spacing: 0; color: var(--c-text-muted); }
.ft__row { display: flex; flex-wrap: wrap; column-gap: var(--sp-24); }
.ft__legal { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.ft__privacy { padding: var(--sp-12) 0; font: var(--t-caption); letter-spacing: 0; color: var(--c-text-strong); } /* 누르는 높이 46 */
.ft__privacy:hover { text-decoration: underline; text-underline-offset: .2em; }
.ft__copy { font: var(--t-caption); letter-spacing: 0; color: var(--c-text-muted); }
/* ==========================================================================
12. 서브 — 판면 · 사진 자리 · 건축개요(1-1) · 소개글(1-2) · 지도(4-1) · 개요 묶음 · 소제목 줄 · 지도 자리 · 빈 상태
시안 15:79 · 41:458 · 16:415 · SpecRow 11:30 · SectionHead 11:33 · MapBlock 11:78 · EmptyState 39:456
========================================================================== */
/* 정적 서브 본문 — 위 64 · 아래 120 · 좌우 160(시안 4-1 S1). 건축개요 · 소개글은 위 80 */
.sub-sec { padding: var(--sp-64) var(--yd-pad) var(--sp-120); }
/* 사진 자리 — bg/soft 위에 사진이 opacity 0→1 .3s(tail.php 2). 사진은 자리를 꽉 채운다 */
.ph { overflow: hidden; background: var(--c-bg-soft); }
.ph img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: opacity var(--dur-tile-in) ease-out; }
.ph img.is-loading { opacity: 0; }
/* 건축개요 · 소개글 — 대표 사진 1600×800(2:1) → 64 → 제목 칸(나머지 폭) | 개요 묶음 둘(420 · 간격 40) 또는 본문 880 · 간격 80 */
.about { display: flex; flex-direction: column; gap: var(--sp-64); padding-top: var(--sp-80); }
.about__photo { aspect-ratio: 2 / 1; }
.about__info { display: flex; align-items: flex-start; gap: var(--sp-80); }
.about__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-12); }
.about__title h3 { font: var(--t-project); letter-spacing: var(--ls-title); color: var(--c-text-strong); }
.about__title p { font: var(--t-body-l); letter-spacing: 0; color: var(--c-text-body); }
.about__specs { flex: none; display: flex; gap: var(--sp-40); width: 880px; max-width: 100%; }
.about__specs .spec { flex: 1; min-width: 0; }
.about__text { flex: none; width: 880px; max-width: 100%; font: var(--t-body-l); letter-spacing: 0; color: var(--c-text-body); word-break: keep-all; }
/* 원고가 아직 없는 자리 — 글자만 흐리게(text/muted). 원고를 넣으면 클래스를 뗀다 */
.about .is-todo { color: var(--c-text-muted); }
/* 지도(4-1) — 왼쪽 회사명 · 연락처 480 | 오른쪽 지도 1040×600 · 간격 80(1600 판면을 같은 비율로 나눈다) */
.contact { display: grid; grid-template-columns: minmax(0, 480fr) minmax(0, 1040fr); align-items: start; gap: var(--sp-80); }
.contact__info { display: flex; flex-direction: column; gap: var(--sp-40); }
.contact__name { display: flex; flex-direction: column; gap: var(--sp-8); }
.contact__name h3 { font: var(--t-project); letter-spacing: var(--ls-title); color: var(--c-text-strong); word-break: keep-all; }
.contact__name p { font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-text-muted); }
/* 개요 묶음 — 묶음 위 선 1px border/strong · 위 24 · 줄 간격 12. 줄마다 선은 없다.
줄 = 항목명(caption · text/muted · 96 고정) + 값(body/s · text/strong) · 간격 24 */
.spec { display: flex; flex-direction: column; gap: var(--sp-12); padding-top: var(--sp-24); border-top: 1px solid var(--c-border-strong); }
.spec__row { display: flex; align-items: flex-start; gap: var(--sp-24); }
.spec dt { flex: none; width: 96px; font: var(--t-caption); letter-spacing: 0; color: var(--c-text-muted); }
.spec dd { flex: 1; min-width: 0; margin: 0; font: var(--t-body-s); letter-spacing: 0; color: var(--c-text-strong); overflow-wrap: anywhere; }
/* 소제목 줄 — 제목 heading/section · 오른쪽 보조 body/s text/body · 아래 16 + 선 1px border/default */
.sec-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); padding-bottom: var(--sp-16); border-bottom: 1px solid var(--c-border-default); }
.sec-bar__title { flex: none; font: var(--t-heading); letter-spacing: 0; color: var(--c-text-strong); }
.sec-bar__aside { min-width: 0; font: var(--t-body-s); letter-spacing: 0; color: var(--c-text-body); text-align: right; }
/* 지도 자리 — bg/soft + 핀 32(선 1px). 카카오 지도가 그려지면(.is-ready, tail.php 5) 무채색 — 고객 요청 */
.map-block { display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--c-bg-soft); color: var(--c-text-strong); }
.map-block .dm-i { stroke-width: 1px; }
/* 카카오 약도(sub0401) — 크기는 약도가 스스로 잡는다(폭 = 칸 폭 · 높이 = 시안 비율 − 안내 띠, sub0401 3). 지도 색은 카카오 기본 그대로(2026-10-19 사용자: 흑백 빼기) */
.map-block--rough { display: block; }
.map-block--rough .root_daum_roughmap { max-width: 100%; }
/* 빈 상태 — 글 없음(문구만) · 검색 결과 없음(+ 전체 목록) · 준비중(+ 메인으로). 위아래 120 · 문구 body/m text/body → 24 → Button Outline */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-24); padding: var(--sp-120) 0; text-align: center; }
.empty-state__msg { font: var(--t-body-m); letter-spacing: 0; color: var(--c-text-body); }
/* ==========================================================================
13. 게시판 공통 — 툴바(건수 · 검색) · 페이저 · 관리자 줄
시안 BoardToolbar 13:116 · SearchBar 13:111 · Pager 11:56 (분류 칩은 템플릿 그대로 — 지금 분류 쓰는 게시판이 없다)
★ 스킨 폴더의 style.css 에 규칙을 두지 않는다. 여기 한 곳에서 게시판 전체를 맞춘다
========================================================================== */
/* 툴바 → 40 → 목록 → 40 → 페이저(위 24) */
.board { display: flex; flex-direction: column; gap: var(--sp-40); }
.board__toolbar, .board__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); }
.board__toolbar-right { display: flex; align-items: center; gap: var(--sp-24); margin-left: auto; }
.board__count { font: var(--t-caption); letter-spacing: 0; color: var(--c-text-muted); white-space: nowrap; }
.board__count strong { font-weight: inherit; }
/* 분류 칩 — TabPill. 높이 47 · padding 16/32 · pill · 기본 흰 면 + 선 1px(inside) · 선택 ink/900 면 + 흰 글자 */
.cat-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.cat-tab {
display: inline-flex; align-items: center; height: 47px; padding: 0 var(--sp-32); border-radius: var(--radius-pill);
box-shadow: inset 0 0 0 1px var(--line); background: var(--white);
font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -0.2px; color: var(--text-2); white-space: nowrap;
transition: box-shadow var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out), background-color var(--dur-state) var(--ease-out);
}
.cat-tab:hover { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.cat-tab.active { box-shadow: none; background: var(--ink); color: var(--white); }
/* 검색 — 320×44 · 아래 선 1px border/strong(초점 text/strong) · 검색어 body/s · 오른쪽 검색 버튼 44(아이콘 20 · 선 1px).
버튼을 오른쪽으로 12 내밀어 아이콘 끝을 선 끝에 맞추고, 아래로 1 내려 누르는 높이 44 를 지킨다(면이 없어 선은 그대로 보인다) */
.search-bar { flex: none; display: flex; align-items: center; width: 320px; max-width: 100%; height: 44px; border-bottom: 1px solid var(--c-border-strong); transition: border-color var(--dur-state) ease-out; }
.search-bar:focus-within { border-color: var(--c-text-strong); }
.search-bar__field { flex: 1; min-width: 0; display: flex; align-items: center; height: 100%; }
.search-bar__field input { width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; font: var(--t-body-s); letter-spacing: 0; color: var(--c-text-strong); }
.search-bar__field input::placeholder { color: var(--c-text-muted); }
.search-bar__field input:focus { outline: none; }
.search-bar__submit { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 calc(var(--sp-12) * -1) -1px 0; padding: 0; border: 0; background: transparent; color: var(--c-text-strong); cursor: pointer; }
.search-bar__submit .dm-i { stroke-width: 1px; }
/* 고르기 칸 — 문의하기 폼(18절)이 쓴다 */
.select { position: relative; display: inline-flex; align-items: center; }
.select select {
appearance: none; -webkit-appearance: none;
height: 56px; padding: 0 var(--sp-48) 0 var(--sp-20); border: 1px solid var(--line); border-radius: 0; background: var(--white);
font-family: var(--font); font-size: 16px; line-height: 28px; letter-spacing: -0.2px; color: var(--ink); cursor: pointer;
}
.select .dm-i { position: absolute; right: var(--sp-20); color: var(--text-3); pointer-events: none; }
.select--block { display: flex; }
.select--block select { width: 100%; }
/* 페이저 — 칸 44 · 간격 4 · 숫자 body/s text/muted(hover text/strong) · 현재 쪽 text/strong + 아래 2px brand/accent ·
화살표 아이콘 20(선 1px). 그누보드 get_paging 출력에 맞춘다 */
.pager { display: flex; justify-content: center; padding-top: var(--sp-24); }
.pager:empty { display: none; } /* 한 쪽뿐이면 get_paging() 이 빈 문자열을 준다 — 죽은 여백을 막는다 */
.pager .pg { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); }
.pager .pg_page, .pager .pg_current, .pager a, .pager strong {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; padding: 0;
font: var(--t-body-s); letter-spacing: 0; color: var(--c-text-muted);
transition: color var(--dur-state) ease-out;
}
.pager a:hover { color: var(--c-text-strong); }
.pager strong, .pager .pg_current { color: var(--c-text-strong); box-shadow: inset 0 -2px 0 var(--c-brand-accent); }
.pager .dm-i { stroke-width: 1px; }
/* 관리자 버튼 줄 — ★