/* 시안 A — wire.json 6개 틀(/·/service·/about·/contact·/blog·/blog/[slug])을 한 파일에 틀 단위로 이어 쌓은 통합 검수본 전용 스타일. base.css(고정층)·A.css(자유층)·components/A/components.css(공용 부품) 변수만 쓴다. 새 hex 0, 새 px 간격값 0. 근거: drafts_plan.json 결정블록1(네이비·흰/연회색 교대, 강조색 accent 1개) · 결정블록3(단계형 여백 리듬) · 결정블록4(라벨1-4·제목5-12 비대칭, 서비스 카드 4열/2열 균등) · 결정블록5(사진 cover, 인라인 삽화 없음) 한글 규칙: word-break keep-all, text-wrap balance, 대문자·자간확장 미적용(한글에는 쓰지 않음, 영문 라벨 없음). 금지(공통): 8px+ 라운드 카드·그림자 카드·알약 버튼·숫자 통계 칸·별점 후기·로고 벽·전 섹션 가운데 정렬·그라데이션·슬라이더 점 — 전부 미사용. 2회차(audit\fix_orders.json A2·A3·A4·A10 반영): h1 기본 크기 지정(A2), 모바일 h1 축소(권장12), /contact 셸 구조 분리(A3), about/contact/blog/blog-slug 히어로 h1 좌측 기준선을 col-1-8로 통일(A10). pages 2회차(audit\fix_orders_pages.json A공통 A1·A2, 필수) — 이 파일은 drafts/A/index.html과 pages/*-A/*.html(6틀)이 같이 링크하는 공용 draft 스타일이라, 아래 두 수정은 홈(index.html)·6틀(about-A·area-A·blog-A·contact-A·post-A·service-A) 전부에 동일하게 적용된다. components/A/components.css·tokens(동결)는 손대지 않았다 — 아래 각 규칙에 적은 대로 이 파일 안에서만 고쳤다. pages 3회차(교차판정 3회차 필수, 메인 실측) — footer를 품은 .section의 아래 패딩이 남던 문제(아래 .section:has(...) 규칙 참고). */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { word-break: keep-all; overflow-wrap: anywhere; } h1, h2, h3, p, li, summary { word-break: keep-all; overflow-wrap: anywhere; } /* fix_orders A2: h1에 클래스가 없으면 브라우저 기본값(약 32px)으로 떨어지던 문제 — 10단계 중 34px를 전역 기본값으로 둔다. */ h1, h2, h3 { text-wrap: balance; font-weight: 700; margin: 0; } h1 { font-size: var(--fs-34); line-height: var(--lh-display); } .draft-note { padding: var(--sp-16) var(--gutter-desktop); font-size: var(--fs-13); opacity: .7; } /* 틀 경계 — 검수용 통합본에서만 쓰는 구분선(실제 사이트는 틀마다 별도 페이지, 페이지 전환에 쓰이는 선 아님) */ .page-frame + .page-frame { border-top: 4px solid var(--c-border); } /* ===== 12열 셸 그리드 (근거: safe-reset-kr-G01 전체폭/글영역폭 분리 원칙을 차용한 공통 셸, austest-pipeline-G01 본문폭 비율) ===== */ .shell { max-width: var(--container-shell); margin: 0 auto; padding: 0 var(--gutter-desktop); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter-desktop); align-items: start; } .shell--footer { padding: 0 var(--gutter-desktop); } .col-1-8 { grid-column: 1 / 9; } .col-1-12 { grid-column: 1 / 13; } /* 결정블록4: 섹션 상단 라벨+제목 블록 = 12칸 중 4:8 비대칭(라벨 1-4·제목 5-12) — 업력배지·home CTA띠·service 진행절차에서만 쓴다. fix_orders A10: about/contact/blog/blog-slug 히어로의 h1은 더는 이 분할을 쓰지 않고 col-1-8로 통일했다(아래 참고). */ .col-label { grid-column: 1 / 5; } .col-title { grid-column: 5 / 13; } /* 서비스 히어로·저자 카드 — 글 1-6·사진 7-12 거의 균등 2분할(austest-pipeline-G02) */ .col-half-a { grid-column: 1 / 7; } .col-half-b { grid-column: 7 / 13; } @media (max-width: 640px) { .shell { padding: 0 var(--gutter-mobile); gap: var(--gutter-mobile); } .col-1-8, .col-label, .col-title, .col-half-a, .col-half-b { grid-column: 1 / 13; } } /* 결정블록4: 신뢰요소 PC 3열균등(사장님 승인 2026-10-31 '3칸 틀로'), 서비스카드 PC 5열균등(사장님 승인 '한 줄 5칸'), 그 외(진행절차·후기·FAQ·작업항목카드·블로그카드) PC 4열균등 → 모바일은 그리드별로 다름(아래 각 규칙 참고). */ .grid-3, .grid-4, .grid-5 { display: grid; gap: var(--gutter-desktop); list-style: none; margin: 0; padding: 0; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 640px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--gutter-mobile); } /* wire.json home.cards 390='1-12(1열)' — 5장 orphan 없이 1열로 쌓는다(사장님 승인 2026-10-31) */ .grid-5 { grid-template-columns: repeat(1, 1fr); gap: var(--gutter-mobile); } } /* ===== 섹션 공통 — 결정블록1: 다크 네이비·흰/연회색 섹션 교대 ===== */ .section { padding: var(--section-desktop) 0; } .section--light { background: var(--color-bg); color: var(--color-text); } .section--alt { background: var(--color-bg-alt); color: var(--color-text); } .section--dark { background: var(--color-primary); color: var(--color-bg); } /* 결정블록3: 큰 섹션(히어로·CTA 띠)은 가장 넓은 상하 여백, 세부 설명 섹션은 더 좁은 여백의 단계형 리듬 */ .hero, .band { padding: var(--section-accent) 0; } .trust, .review { padding: var(--sp-64) 0; } @media (max-width: 640px) { .section, .hero, .band, .trust, .review { padding: var(--section-mobile) 0; } /* 권장12(fix_orders A12 취지 확장): 390에서 전 틀 페이지 제목을 한 단계 더 작은 28px로 축소(home 히어로 포함, 10단계 안) */ h1 { font-size: var(--fs-28); } } /* ===== 홈 순서1 히어로 — 형식⑤(제목+본문), 다크 면 위 밝은 글자(기존 토큰 재사용, 새 hex 없음) ===== */ .hero h1 { font-size: var(--fs-40); line-height: var(--lh-display); margin-bottom: var(--h2-bottom); } @media (max-width: 640px) { .hero h1 { font-size: var(--fs-28); } } .hero__subtitle { font-size: var(--fs-18); line-height: var(--lh-body); color: var(--color-bg); max-width: var(--container-prose); margin: 0 0 var(--sp-32); } .hero .btn--primary { margin-top: var(--sp-8); } /* ===== 홈 순서2 신뢰요소 띠 — 형식③(글만, 사진 없음) ===== */ .trust li { font-size: var(--fs-16); line-height: var(--lh-listitem); padding-top: var(--sp-16); border-top: 1px solid var(--c-border); } /* ===== 홈 순서3 서비스 카드 그리드 — 형식②(제목+표) ===== */ .cards h3 { font-size: var(--fs-18); line-height: var(--lh-subhead); margin: var(--sp-16) 0 var(--sp-8); } .cards p { font-size: var(--fs-14); line-height: var(--lh-body); color: var(--c-muted); margin: 0; } .card__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-card); } /* ===== 홈 순서4 진행 절차 단계형 — 형식①(제목만) ===== */ .process__list { counter-reset: step; } .process__list li { font-size: var(--fs-17); line-height: var(--lh-subhead); font-weight: 600; padding-top: var(--sp-48); border-top: 1px solid var(--c-border); position: relative; } .process__list li::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font-size: var(--fs-14); font-weight: 400; color: var(--color-accent); margin-bottom: var(--sp-8); } /* /service 진행 절차 — 라벨+제목 2분할 안에서 쓰는 세로 목록(4열 격자 아님, home.process와 그리드가 다름) */ .process__list--inline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-16); counter-reset: svcstep; } .process__list--inline li { font-size: var(--fs-17); font-weight: 600; padding-top: var(--sp-16); border-top: 1px solid var(--c-border); } .process__list--inline li::before { counter-increment: svcstep; content: counter(svcstep, decimal-leading-zero) " "; color: var(--color-accent); font-weight: 400; } /* ===== 홈 순서5 고객 후기 — 형식③(글만, 사진 없음) ===== */ .review li { font-size: var(--fs-16); line-height: var(--lh-body); padding-top: var(--sp-16); border-top: 1px solid var(--c-border); } /* ===== 홈 순서6 FAQ 펼침카드 — 형식⑤(제목+본문), details/summary 네이티브 ===== */ .faq__item { border-top: 1px solid var(--c-border); padding: var(--sp-16) 0; } .faq__item summary { font-size: var(--fs-17); font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; font-size: var(--fs-20); font-weight: 400; color: var(--color-accent); flex-shrink: 0; } .faq__item[open] summary::after { content: "–"; } .faq__item p { font-size: var(--fs-16); line-height: var(--lh-body); color: var(--c-muted); margin: var(--sp-12) 0 0; } /* ===== 홈 순서7 전화 CTA 띠 / 업력배지·service 진행절차의 라벨+제목 섹션 — 형식①(제목만), 라벨 1-4(장식)·제목 5-12 ===== */ .band__accent { display: block; width: var(--sp-48); height: 2px; background: var(--color-accent); } .band .btn--primary { font-size: var(--fs-18); } .badge { font-size: var(--fs-20); font-weight: 600; margin: 0; } /* ===== 홈 순서8 / 각 틀 마지막 섹션 — 공용 컴포넌트(.site-footer--dark) 안에서 셸만 재사용 ===== */ .site-footer--dark p { margin: 0 0 var(--sp-8); font-size: var(--fs-14); } .site-footer--dark .footer__link { margin-top: var(--sp-8); } /* CTA+푸터가 한 wire 섹션에 묶인 틀(service/about/contact/blog)에서는 CTA 아래 여백 확보 */ section > .site-footer--dark { margin-top: var(--sp-32); } /* pages 3회차(교차판정 필수, 메인 실측) — footer.site-footer--dark를 직접 담은 .section의 아래 패딩(desktop 96px· mobile 56px)이 푸터 아래에 그대로 남았다. section--dark(어두운 면)는 푸터와 같은 색이라 안 보였을 뿐 같은 버그였고, blog-A만 마지막 섹션이 section--light(흰 면)라 390 약 56px·1280 약 96px 흰 띠로 드러났다(메인 실측 60px/100px와 근사, 반올림 차이). 막대 여백(.site-footer--dark 자체의 padding-bottom, 아래 A2 규칙)은 그대로 두고, 푸터를 품은 섹션 쪽의 아래 패딩만 0으로 되돌린다 — 새 값 0개, 기존 .section 규칙을 :has()로 더 구체적으로 덮어쓴 것뿐. :has()의 specificity가 .section/.section--light 등보다 높아 미디어쿼리 선언 순서와 무관하게 390·1280 모두 적용된다. 홈(index.html)은 footer가 .section 안이 아니라 main 밖의 독립