/* ==========================================================================
base.css — 전 페이지 공통 스타일
담는 것: 디자인 토큰, 리셋, 타이포 기본, 레이아웃 래퍼,
헤더/푸터, 버튼, 줄바꿈 유틸리티, 스크롤 리빌, 주소검색 레이어
담지 않는 것: 특정 페이지에만 있는 섹션 스타일(히어로·갤러리·폼 등)
다크 테마 페이지(24call.html)는 로 변수를 덮는다.
========================================================================== */
/* --- 디자인 토큰 ---------------------------------------------------------- */
:root{
--bg:#ffffff;
--ink:#212121;
--gray:#454b54;
--line:#e5e7eb;
--accent:#1767f6;
--accent-dark:#0f4fd0;
--yellow:#ffe300;
--surface:#f6f8fb; /* 섹션 배경 리듬용 옅은 회색 면 */
/* 액센트 계열 보조색 — 카드 배경/테두리에 쓰던 연한 파랑을 토큰화 */
--accent-soft:#f1f6ff; /* 아주 옅은 배경 (아이콘 칩 등) */
--accent-line:#d9e6ff; /* 카드 기본 테두리 */
--accent-line2:#c8dcff; /* 조금 더 진한 테두리 (번호 배지 등) */
/* 카드 hover 공통 모션값 — 섹션마다 제각각이던 값을 하나로 */
--card-lift:-2px;
--card-hover-shadow:0 18px 36px -30px rgba(23,103,246,.55);
/* 모서리 라운드 — 카드는 --radius, 칩/작은 요소는 --radius-sm */
--radius:16px;
--radius-sm:10px;
/* 평소 상태 카드에 살짝 얹는 은은한 그림자 (플랫 테두리 보완) */
--card-shadow:0 10px 30px -22px rgba(23,103,246,.28);
--maxw:1080px;
--nav-h:64px;
--pad:28px;
--pad-mo:20px;
}
/* 폐업지원금 랜딩처럼 어두운 배경을 쓰는 페이지 */
.theme-dark{
--bg:#101114;
--card:#17181d;
--ink:#f2f3f5;
--gray:#9aa1ab;
--line:#2a2c33;
--surface:#15161b;
/* 다크에서는 옅은 파랑 대신 반투명 액센트로 톤을 맞춘다 */
--accent-soft:rgba(23,103,246,.12);
--accent-line:rgba(23,103,246,.35);
--accent-line2:rgba(23,103,246,.5);
}
/* --- 웹폰트 로딩 (로딩 시 레이아웃 시프트 방지) --------------------------
본문 서체는 Pretendard(가변폰트). pretendard.css 를 각 페이지에서 먼저
불러오며, 그 안의 모든 @font-face 는 display:optional 로 바꿔두었다.
optional 은 폰트가 제때(약 100ms) 준비되지 않으면 그 로드 동안 대체 폰트를
유지하고 '중간 교체'를 하지 않는다. 덕분에 로딩 중 글자 크기가 커졌다
작아지는 FOUT 리플로우가 없다(재방문 시엔 첫 페인트부터 Pretendard).
'Pretendard-fallback'은 시스템 한글 폰트를 Pretendard 메트릭에 맞춰 감싼
대체 패밀리다. Pretendard 자체가 Apple SD Gothic Neo 계열 비율을 따르도록
설계돼 있어, 대체 폰트를 쓰는 회차에도 화면이 거의 동일하게 보인다.
-------------------------------------------------------------------------- */
@font-face{
font-family:'Pretendard-fallback';
src:local('Apple SD Gothic Neo'),local('Malgun Gothic'),local('맑은 고딕');
size-adjust:100%;
ascent-override:93%;
descent-override:23%;
line-gap-override:0%;
}
/* --- 리셋 ---------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
::selection{background:var(--ink);color:var(--bg)}
body{
font-family:'Pretendard Variable','Pretendard','Pretendard-fallback',
-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
background:var(--bg);color:var(--ink);
font-size:17px;line-height:1.75;font-weight:400;
-webkit-font-smoothing:antialiased;
/* 긴 한글 문장이 단어 중간에서 끊기지 않게 */
word-break:keep-all;overflow-wrap:break-word;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* --- 레이아웃 ------------------------------------------------------------ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
/* --- 줄바꿈 유틸리티 ------------------------------------------------------
데스크톱에서만 줄바꿈 (모바일에선 문장이 자연스럽게 흐름)
모바일에서만 줄바꿈
어떤 폭에서도 끊기지 않아야 하는 구(전화번호 등)
-------------------------------------------------------------------------- */
br.mo{display:none}
.nowrap{white-space:nowrap}
/* --- 타이포 ------------------------------------------------------------- */
.label{
font-size:13.5px;font-weight:700;letter-spacing:2.5px;
color:var(--gray);text-transform:uppercase;
display:block;margin-bottom:22px;
}
mark{
background:linear-gradient(transparent 62%,rgba(255,227,0,.6) 0);
color:inherit;font-weight:700;padding:0 1px;
/* 형광펜은 한 덩어리로 읽혀야 한다. 줄 끝에서 갈라지면 밑줄이 두 토막
나서 강조가 아니라 사고처럼 보인다. 짧은 강조구에만 쓰는 태그다. */
white-space:nowrap;
}
em{font-style:normal}
/* --- 줄 나누기 -----------------------------------------------------------
한글은 조사·어미 때문에 마지막 줄에 짧은 토막("…합니다.")만 남기 쉽다.
balance : 제목의 줄 길이를 고르게 나눈다 (강조구가 두 줄로 찢기는 것도 줄어든다)
pretty : 본문은 줄 길이를 건드리지 않고 마지막 줄의 고아 단어만 막는다
둘 다 미지원 브라우저에서는 조용히 무시되고 기존 동작이 유지된다.
-------------------------------------------------------------------------- */
h1,h2,h3,.pop-title,.proc .t{text-wrap:balance}
p,li,label,.sec-sub,.lede,.stat .d,.case .s,.case-more .d,
.pop-team,.ft-copy span{text-wrap:pretty}
/* --- 버튼 --------------------------------------------------------------- */
.btn{
display:inline-block;padding:17px 38px;
background:var(--accent);color:#fff;font-size:16.5px;font-weight:700;
border:0;cursor:pointer;font-family:inherit;border-radius:999px;
transition:background .2s;
}
.btn:hover{background:var(--accent-dark)}
/* --- 헤더 ----------------------------------------------------------------
모든 페이지가 같은 구조를 쓴다.
.nav 가 폭·여백을 직접 갖는다. 본문 .wrap 과 같은 값을 쓰므로
로고와 본문 좌측선이 자연스럽게 맞는다.
-------------------------------------------------------------------------- */
/* 스크롤해도 상단 고정 + 흰 배경(index 는 히어로 위 투명 헤더라 자체 처리) */
.site-header{
position:sticky;top:0;z-index:50;
background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);
}
.nav{
max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
display:flex;align-items:center;justify-content:space-between;
gap:24px;height:var(--nav-h);
}
/* 좁아지면 줄바꿈 대신 로고를 말줄임 처리 */
.logo{
font-weight:700;font-size:16px;letter-spacing:-.3px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
/* 가운데 메뉴 — 로고와 전화번호 사이를 채운다 */
.menu{
display:flex;align-items:center;gap:32px;margin-left:auto;
font-size:15.5px;font-weight:500;
}
.menu a{white-space:nowrap;transition:color .2s}
.nav-tel{font-size:15.5px;font-weight:700;white-space:nowrap;flex-shrink:0}
.nav-tel:hover{color:var(--accent)}
/* 모바일 메뉴 여는 버튼 */
.burger{
display:none;background:none;border:0;cursor:pointer;padding:8px;
font-family:inherit;font-size:13px;font-weight:700;letter-spacing:1.5px;
color:inherit;flex-shrink:0;
}
.m-menu{
position:fixed;inset:0;z-index:150;background:var(--bg);color:var(--ink);
display:flex;flex-direction:column;padding:24px 28px;
transform:translateY(-100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.m-menu.open{transform:none}
.m-menu .top{display:flex;justify-content:space-between;align-items:center;height:40px;margin-bottom:40px}
.m-menu .close{
background:none;border:0;font-size:26px;cursor:pointer;line-height:1;
color:var(--ink);font-family:inherit;
}
.m-menu a.item{
font-size:24px;font-weight:700;letter-spacing:-1px;
padding:17px 0;border-bottom:1px solid var(--line);
transition:color .15s;
}
.m-menu a.item:hover,.m-menu a.item:active{color:var(--accent)}
/* 드로어 하단: 견적 CTA + 전화 블록.
margin-top:auto 로 바닥에 붙여, 링크가 적어도 가운데가 비어 보이지 않게 한다. */
.m-menu .m-cta{margin-top:auto;padding-top:24px}
.m-menu .m-cta .btn{display:block;width:100%;text-align:center;padding:16px 0;font-size:16.5px}
.m-menu .m-tel{
margin-top:14px;margin-bottom:20px;padding:16px 18px;
background:var(--accent-soft);border-radius:var(--radius);
font-size:14.5px;color:var(--gray);
}
.m-menu .m-tel b{
display:block;font-size:26px;color:var(--accent);font-weight:700;margin-top:4px;
letter-spacing:-.5px;
}
/* --- 푸터 --------------------------------------------------------------- */
footer{
border-top:0;padding:56px 0;
background:#111827;color:#d1d5db;
}
footer .logo,footer b{color:#fff}
footer a{color:#f8fafc}
footer a:hover{color:#7db2ff}
.ft-biz{font-size:13.5px;line-height:1.9}
.ft-biz b{font-weight:700}
.ft-copy{
display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);
font-size:13px;color:#9ca3af;
}
/* --- 카드 hover 공통 -----------------------------------------------------
basis-cell·q3·step·why-row 처럼 "떠오르며 파란 테두리" 되는 카드가 여러
섹션에 있다. 값이 제각각이던 것을 이 한 곳으로 모은다.
-------------------------------------------------------------------------- */
.lift{transition:border-color .2s,box-shadow .2s,transform .2s}
.lift:hover{
border-color:var(--accent);
transform:translateY(var(--card-lift));
box-shadow:var(--card-hover-shadow);
}
@media(prefers-reduced-motion:reduce){
.lift:hover{transform:none}
}
/* --- 스크롤 리빌 --------------------------------------------------------- */
.rv{opacity:0;transform:translateY(22px);transition:.75s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.1s}
[data-d="2"]{transition-delay:.2s}
[data-d="3"]{transition-delay:.3s}
[data-d="4"]{transition-delay:.4s}
[data-d="5"]{transition-delay:.5s}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.rv{opacity:1;transform:none;transition:none}
}
/* --- 주소검색 레이어 (contact / 24call 공용) ------------------------------ */
.post-layer{
position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.55);
display:none;align-items:center;justify-content:center;padding:20px;
}
.post-layer.show{display:flex}
.post-box{
width:min(480px,100%);height:min(520px,90vh);
background:#fff;color:#212121;
display:flex;flex-direction:column;
}
.post-box .bar{
display:flex;justify-content:space-between;align-items:center;
padding:12px 16px;border-bottom:1px solid #e5e7eb;
font-size:15px;font-weight:700;
}
.post-box .bar button{
background:none;border:0;font-size:22px;cursor:pointer;line-height:1;
color:#454b54;font-family:inherit;
}
.post-box .body{flex:1;position:relative}
/* --- 반응형 ------------------------------------------------------------- */
@media(max-width:600px){
.wrap,.nav{padding:0 var(--pad-mo)}
/* 데스크톱 기준으로 잡아둔 줄바꿈은 모바일에서 해제 */
br.pc{display:none}
br.mo{display:inline}
/* 헤더: 모바일에서는 로고와 메뉴 버튼만 두고 전화번호는 드로어 안에 둔다 */
.nav{gap:12px}
.menu{display:none}
.burger{display:block}
.nav-tel{display:none}
footer{padding:40px 0}
.ft-copy{flex-direction:column;gap:6px}
}
@media(max-width:360px){
.logo{font-size:14.5px}
}