/* ===================================================== COMMON RENEW STYLES 리뉴얼된 모든 페이지가 공유하는 디자인 토큰 / 리셋 / 버튼 / GNB / Footer / 상담모달 / 공용 섹션 헤딩 패턴. 페이지별 전용 스타일(Hero, 업종선택, 각 섹션 등)은 main.css 등 개별 페이지 CSS에 둔다. ===================================================== */ /* ===================================================== TOKENS ===================================================== */ :root { --colors-primary: #306AFF; --colors-primary-hover: #164BD3; --colors-primary-light: #ECF1FF; --colors-secondary: #80A1FF; --colors-accent: #7900D9; --colors-accent-btn: #7C3AED; --colors-accent-light: #EFE3FF; --colors-surface: #FFFFFF; --colors-background: #FCFCFC; --colors-dark: #242424; --colors-border: #E5E5EC; --colors-border-strong: #AEB1B9; --colors-border-light: rgba(0, 0, 0, 0.06); --colors-border-dark: rgba(255, 255, 255, 0.08); --colors-text-heading: #111827; --colors-text-body: #374151; --colors-text-muted: #6B7280; --colors-text-primary: #25252C; --colors-text-secondary: #50505A; --colors-text-tertiary: #ADAFB4; --colors-text-disable: #8A8A9A; --colors-success: #04B014; --colors-warning: #FFAA00; --colors-error: #EF4444; --colors-button-disabled: #E5E5EC; --colors-green: #00840C; /* 부가서비스 "게이트웨이" 탭 테마 색상 (탭 활성 배경/뱃지 글자/강조텍스트에서 재사용) */ --border-radius-xs: 3px; --border-radius-md: 8px; --border-radius-lg: 12px; --border-radius-xl: 24px; --border-radius-full: 9999px; --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* 상담모달 등이 스크롤을 잠글 때(overflow:hidden) 사라지는 스크롤바 폭만큼 JS(main.js의 refreshScrollLock)가 채워 넣는 값. 기본은 0. 뷰포트 우측 기준으로 배치되는 요소는 padding-right든 right offset이든 이 변수를 참조하기만 하면, 화면 폭 변화로 인한 흔들림이 자동으로 없어진다. */ --scroll-lock-offset: 0px; } /* ===================================================== RESET / BASE 리뉴얼된 페이지는 로 감싼다. :where() 로 스코프를 감싸 특정도(specificity)를 0으로 만든다. 그래야 .btn--* 같은 단일 클래스 컴포넌트 규칙이 이 리셋보다 항상 우선한다. ===================================================== */ :where(.page-renew, .page-renew *, .page-renew *::before, .page-renew *::after) { box-sizing: border-box; margin: 0; padding: 0; } .page-renew { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--colors-background); color: var(--colors-text-primary); letter-spacing: -0.025em; -webkit-font-smoothing: antialiased; padding-right: var(--scroll-lock-offset); } :where(.page-renew) a { text-decoration: none; color: inherit; } :where(.page-renew) button { font-family: inherit; cursor: pointer; border: none; background: none; } :where(.page-renew) input, :where(.page-renew) select, :where(.page-renew) textarea { font-family: inherit; } .page-renew.no-scroll { overflow: hidden; height: 100vh; } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; } .thin_txt { font-weight: 200; } /* 강조 텍스트 - 어떤 제목/문구 안에서든 로 감싸면 primary color가 된다. 카드별로 다른 강조색을 써야 하는 특수한 경우(예: .bento-card__title .accent)는 그 자리에서 더 구체적인 선택자로 이 기본값을 오버라이드한다. */ :where(.page-renew) .accent { color: var(--colors-primary); } /* ===================================================== SECTION HEADING (공용 섹션 타이틀 패턴) ===================================================== */ section.sec { background: #fff; padding: 160px 0; } .sec { padding: 96px 0; } .sec-header { margin: 0 auto 56px; text-align: center; } .sec-header.align-left { margin: 0 0 56px; text-align: left; max-width: 800px; } .sec-title { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.025em; color: var(--colors-text-primary); line-height: 1.28; } .sec-sub { font-size: 1.25rem; color: var(--colors-text-secondary); margin-top: 10px; line-height: 1.5; } .sec-sub.tertiary { color: var(--colors-text-tertiary); } /* ===================================================== BUTTONS ===================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-align: center; cursor: pointer; border: 1px solid transparent; border-radius: var(--border-radius-full); padding: 8px 20px; font-family: inherit; font-weight: 700; font-size: 0.875rem; line-height: 24px; letter-spacing: -0.025em; transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease; } /* gap은 자식이 1개뿐인 텍스트 전용 버튼엔 영향이 없으므로 기본값으로 둔다 */ .btn--primary-lg { background: var(--colors-primary); border-radius: var(--border-radius-full); padding: 14px 28px; font-weight: 600; font-size: 1.125rem; color: #fff; } .btn--primary-lg:hover { background: var(--colors-primary-hover); transform: translateY(-2px); } .btn--outline-lg { border-color: var(--colors-text-tertiary); border-radius: var(--border-radius-full); padding: 15px 29px; font-weight: 600; font-size: 1.125rem; color: #fff; background: none; } .btn--outline-lg:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); } .btn--ghost-primary-lg { background: transparent; border: 1px solid var(--colors-primary); border-radius: var(--border-radius-full); padding: 13px 29px; font-weight: 600; font-size: 1.05rem; color: var(--colors-primary); } .btn--ghost-primary-lg:hover { background: var(--colors-primary-light); } .btn--solid-primary { background: var(--colors-primary); color: #fff; border-radius: var(--border-radius-lg); padding: 12px 20px; font-weight: 700; font-size: 1rem; width: 100%; justify-content: center; } .btn--solid-primary:hover { background: var(--colors-primary-hover); } .btn--solid-accent { background: var(--colors-accent); color: #fff; border-radius: var(--border-radius-lg); padding: 12px 20px; font-weight: 700; font-size: 1rem; width: 100%; justify-content: center; } .btn--solid-accent:hover { opacity: .9; } /* ===================================================== BUTTON 컴포넌트 (Figma: Button, node 51:135) home/comp/button.html 에서 전체 변형을 확인할 수 있다. family(색상) + .btn--icon(아이콘 유무) 조합으로 11개 변형을 구성. 예) ===================================================== */ .btn--icon { padding-left: 18px; } .btn--bordered { padding: 8px 20px; } .btn--bordered.btn--icon { padding-left: 18px; } .btn--primary { background: var(--colors-primary); color: var(--colors-background); } .btn--primary:hover { background: var(--colors-primary-hover); } .btn--white { background: var(--colors-background); color: var(--colors-text-primary); } .btn--white:hover { background: var(--colors-border); } .btn--white-outline { background: #fff; border-color: var(--colors-border); color: var(--colors-text-secondary); } .btn--white-outline:hover { border-color: var(--colors-primary); color: var(--colors-primary); } .btn--ghost-primary { background: transparent; border-color: var(--colors-primary); color: var(--colors-primary); } .btn--ghost-primary:hover { background: var(--colors-primary-light); } .btn--ghost-white { background: transparent; border-color: var(--colors-text-tertiary); color: var(--colors-background); } .btn--ghost-white:hover { background: rgba(255, 255, 255, 0.1); } .btn--disabled, .btn:disabled { background: var(--colors-button-disabled); color: var(--colors-text-disable); cursor: not-allowed; pointer-events: none; } .btn--disabled.btn--icon, .btn:disabled.btn--icon { color: var(--colors-text-secondary); } /* "자세히 보기" 류 링크형 버튼 공통 구조:

겉은 div.btn_wrap, 그 안에 a(또는 button), 그 안에 텍스트/아이콘을 담는 span 순서로 구성한다. home/comp/button.html 에 예시가 있다. */ .btn_wrap { display: inline-block; } .btn_wrap .btn--pill-outline { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--colors-border); border-radius: var(--border-radius-full); padding: 8px 16px; font-size: 0.875rem; color: var(--colors-text-secondary); width: fit-content; align-items: center; transition: color .2s ease, border-color .2s ease; } .btn--pill-outline.is-active, .btn--pill-outline:hover { border-color: var(--colors-primary); color: var(--colors-primary); } .btn--pill-outline i { font-size: 0.7rem; line-height: normal; } .btn--cta-tel { background: #fff; color: var(--colors-primary); border-radius: var(--border-radius-full); padding: 14px 28px; font-weight: 600; font-size: 1rem; } .btn--cta-outline { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.9); border-radius: var(--border-radius-full); padding: 15px 29px; font-weight: 600; font-size: 1rem; } .btn--cta-outline:hover { background: rgba(255, 255, 255, 0.22); } /* ===================================================== FAB (플로팅 액션 버튼) 컴포넌트 home/comp/button.html 의 "FAB" 그룹 참고. 원형 아이콘 전용 버튼. 색상은 기본(.btn--fab)과 .btn--fab-primary 중 하나. 예) ===================================================== */ .btn--fab { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--colors-primary); border: 1px solid var(--colors-border); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); font-size: 1.1rem; cursor: pointer; transition: transform .25s var(--ease-smooth), box-shadow .25s ease, background .25s ease, color .25s ease; } .btn--fab:hover { transform: scale(1.08); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .btn--fab.btn--fab-primary { background: var(--colors-primary); color: #fff; border-color: transparent; box-shadow: 0 6px 24px rgba(48, 106, 255, 0.4); } .btn--fab.btn--fab-primary:hover { background: var(--colors-primary-hover); box-shadow: 0 10px 32px rgba(48, 106, 255, 0.5); } .btn--fab.js-kakao-btn { background: #ffdd00; border: 1px solid #edce00; } .btn--fab.js-kakao-btn img { border-radius: 50%; } .btn--kakao { background: #ffdd00; color: #3a1d1d; border: 1px solid #edce00; } .btn--fab.js-kakao-btn.blue-type { background: var(--colors-primary); border: 1px solid var(--colors-primary); } .floating-actions { position: fixed; right: calc(32px + var(--scroll-lock-offset)); bottom: 42px; z-index: 2; display: flex; flex-direction: column; gap: 12px; } /* 호버 시 버튼 왼쪽에 라벨 툴팁 - data-tooltip 값을 그대로 보여준다. 예) */ .btn--fab[data-tooltip] { position: relative; } .btn--fab[data-tooltip]::after { content: attr(data-tooltip); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(4px); background: var(--colors-dark); color: #fff; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.025em; white-space: nowrap; padding: 6px 12px; border-radius: var(--border-radius-md); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility .2s ease; } .btn--fab[data-tooltip]:hover::after { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); } @media (max-width: 768px) { .floating-actions { right: calc(16px + var(--scroll-lock-offset)); bottom: 16px; } } /* ===================================================== FLOATING CHATBOT PANEL .floating-actions 안의 #chatbotTrigger(.btn--fab)가 토글하는 대화창. 실제 대화 로직은 없고(추후 연동 예정), "부가서비스 안내"/"제품 소개 보기"는 goToSection() 재사용, "상담 신청하기"는 기존 [data-consult-open] 위임을 그대로 재사용한다. ===================================================== */ .chatbot-panel { position: fixed; right: calc(32px + var(--scroll-lock-offset)); bottom: 230px; z-index: 46; width: 380px; max-width: calc(100vw - 32px); max-height: 600px; display: flex; flex-direction: column; background: var(--colors-background); border: 1px solid var(--colors-border); border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16), 0 2px 12px rgba(0, 0, 0, 0.06); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(16px) scale(.97); transform-origin: bottom right; transition: opacity .15s ease, visibility .15s ease, transform .15s var(--ease-smooth); } .chatbot-panel.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .chatbot-panel__header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 13px 20px; background: #fff; border-bottom: 1px solid var(--colors-border); } .chatbot-panel__title { font-weight: 600; font-size: 1rem; line-height: 26px; letter-spacing: -0.025em; color: var(--colors-text-primary); } .chatbot-panel__close { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: none; color: var(--colors-text-secondary); cursor: pointer; } .chatbot-panel__close:hover { background: var(--colors-border); color: var(--colors-text-primary); } .chatbot-panel__body { height: 460px; overflow-y: auto; padding: 20px 14px; display: flex; flex-direction: column; gap: 22px; background: #E3EAFF; } .chatbot-msg.chatbot-msg--bot { display: flex; align-items: flex-start; gap: 10px; } .chatbot-msg__avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--colors-primary); color: var(--colors-background); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; } .chatbot-msg--bot .chatbot-msg__bubble { background: #fff; border-radius: 4px 8px 8px 8px; padding: 16px 18px; font-size: 0.9rem; font-weight: 400; line-height: 1.6; letter-spacing: -0.025em; color: var(--colors-text-primary); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); max-width: 287px; } .chatbot-msg__options { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .chatbot-msg__option { width: 100%; padding: 11px 14px; background: var(--colors-primary-light); border-radius: var(--border-radius-md); font-family: inherit; font-size: 0.875rem; font-weight: 700; letter-spacing: -0.025em; color: var(--colors-primary); text-align: center; cursor: pointer; transition: background .15s; } .chatbot-msg__option:hover { background: #DCE7FF; } .chatbot-msg__notice { font-size: 0.8rem; font-weight: 400; letter-spacing: -0.025em; color: var(--colors-text-disable); line-height: 1.6; margin-top: 22px; max-width: 252px; } .chatbot-msg.chatbot-msg--user { display: flex; justify-content: flex-end; } .chatbot-msg--user .chatbot-msg__bubble { display: inline-block; max-width: 85%; background: var(--colors-primary); color: #fff; border-radius: 8px 4px 8px 8px; padding: 12px 18px; font-size: 0.9rem; font-weight: 400; line-height: 1.6; letter-spacing: -0.025em; text-align: right; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); } .chatbot-panel__reset { display: flex; justify-content: flex-end; } .chatbot-panel__reset-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; background: #fff; color: var(--colors-primary); border-radius: var(--border-radius-md); font-family: inherit; font-size: 0.875rem; font-weight: 700; letter-spacing: -0.025em; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); cursor: pointer; } .chatbot-panel__reset-btn i { font-size: 0.7rem; } .chatbot-panel__reset-btn:hover { background: var(--colors-primary-light); } .chatbot-panel__footer { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 16px; background: var(--colors-background); } .chatbot-panel__input-wrap { flex: 1; min-width: 0; padding: 11px 15px; background: #fff; border: 1px solid var(--colors-primary); border-radius: var(--border-radius-md); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); } .chatbot-panel__input { width: 100%; border: none; outline: none; background: none; font-family: inherit; font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.025em; color: var(--colors-text-primary); } .chatbot-panel__input::placeholder { color: var(--colors-text-tertiary); } .chatbot-panel__send { flex-shrink: 0; width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; background: var(--colors-primary); color: var(--colors-background); border-radius: var(--border-radius-md); cursor: pointer; } .chatbot-panel__send:hover { background: var(--colors-primary-hover); } @media (max-width: 768px) { .chatbot-panel { right: calc(16px + var(--scroll-lock-offset)); bottom: 190px; width: 340px; } } /* ===================================================== BADGE 컴포넌트 home/comp/badge.html 에서 전체 변형을 확인할 수 있다. size(.badge--sm/.badge--md/.badge--lg/.badge--xl) + color(.badge--primary/.badge--purple/.badge--amber/.badge--accent/.badge--green/.badge--solid-primary/.badge--red) 조합으로 사용한다. 유료/무료 안내처럼 상태를 나타낼 때는 .badge--red(유료) / .badge--primary(무료, 기존 기본색) / .badge--amber(일부 유료)를 쓴다. 예) 기본 패키지 ===================================================== */ .badge { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--border-radius-full); font-weight: 700; white-space: nowrap; } .badge--sm { font-size: 0.8rem; padding: 5px 13px; } .badge--md { font-size: 0.8rem; padding: 8px 13px; } .badge--lg { font-size: 1rem; font-weight: 600; padding: 8px 18px; gap: 6px; } /* 섹션 헤더 위에 크게 얹는 배지(예: bento-header) 전용 - Figma node 383:1146 */ .badge--xl { font-size: 1.125rem; font-weight: 600; padding: 10px 24px; gap: 5px; } .badge--primary { background: var(--colors-primary-light); color: var(--colors-primary); } .badge--purple { background: #F1E0FF; color: #AB41FF; } .badge--amber { background: #FFEFCC; color: #F38100; } .badge--accent { background: var(--colors-accent-light); color: #AB41FF; } .badge--green { background: #DAF4D1; color: var(--colors-green); } .badge--solid-primary { background: var(--colors-primary); color: #fff; } .badge--red { background: #FDE2E2; color: var(--colors-error); } /* ===================================================== CHECKBOX 컴포넌트 home/comp/checkbox.html 에서 전체 상태를 확인할 수 있다. 실제 는 화면에서 숨기고(시각적으로만 감춤, 포커스는 유지), 옆의 label 안 .checkbox-icon(span)이 체크 모양을 그린다. 체크마크는 SVG 로 그리므로, 이 컴포넌트를 쓰는 페이지에는 #check 심볼 스프라이트가 한 번 있어야 한다 (main.html 의 시작 부분 참고). 예)

동의합니다

===================================================== */ .checkbox-style-common { display: inline-flex; align-items: center; } .checkbox-style-common .checkbox-input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; padding: 0; } .checkbox-style-common .checkbox-label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; } .checkbox-style-common .checkbox-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; border: 1px solid var(--colors-border); border-radius: 4px; background: #fff; transition: background .15s ease, border-color .15s ease; } .checkbox-style-common .checkbox-icon svg { width: 10px; height: 8px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .2s ease .05s; } /* checked */ .checkbox-style-common .checkbox-input:checked + .checkbox-label .checkbox-icon { background: var(--colors-primary); border-color: var(--colors-primary); animation: checkbox-wave .4s ease; } .checkbox-style-common .checkbox-input:checked + .checkbox-label .checkbox-icon svg { stroke-dashoffset: 0; } /* focus */ .checkbox-style-common .checkbox-input:focus-visible + .checkbox-label .checkbox-icon { outline: 2px solid var(--colors-primary); outline-offset: 2px; } /* disabled */ .checkbox-style-common .checkbox-input:disabled + .checkbox-label { opacity: 0.5; cursor: not-allowed; } .checkbox-style-common .checkbox-input:disabled + .checkbox-label .checkbox-icon { background: var(--colors-border); } /* svg 심볼 스프라이트는 눈에 보이지 않아야 한다 */ .checkbox-svg-symbol { position: absolute; width: 0; height: 0; overflow: hidden; } @keyframes checkbox-wave { 0% { transform: scale(1); } 50% { transform: scale(0.92); } 100% { transform: scale(1); } } /* ===================================================== GNB (header.html) ===================================================== */ .gnb { position: fixed; top: 0; left: 0; right: 0; z-index: 3; height: 76px; display: flex; align-items: center; padding-right: var(--scroll-lock-offset); transition: background .35s ease, box-shadow .35s ease, border-color .35s ease; } .gnb.gnb--transparent { background: transparent; } .gnb.gnb--dark { background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .gnb.gnb--light { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .gnb-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; width: 100%; display: flex; align-items: center; box-sizing: border-box; } .gnb__logo { display: flex; align-items: center; margin-right: 48px; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.5px; flex-shrink: 0; } .gnb__logo-text { font-size: inherit; font-weight: inherit; line-height: inherit; color: #fff; transition: color .3s; } .gnb.gnb--light .gnb__logo-text { color: var(--colors-text-primary); } .gnb__logo-accent { color: var(--colors-primary); } /* logo_wh_2.svg는 흰색으로 만들어진 파일이라 기본(transparent/dark 헤더)에는 필터 없이 그대로 쓰고, light 헤더(밝은 배경)에서만 invert로 검은색으로 뒤집는다 - 검은색 로고 파일을 따로 안 둬도 된다. */ .gnb__logo-text img { height: 22px; width: auto; display: block; transition: filter .3s; } .gnb.gnb--light .gnb__logo-text img { filter: invert(1); } .gnb__nav { display: flex; align-items: center; gap: 30px; flex: 1; min-width: 0; } .gnb__menu-item { padding: 8px 14px; border-radius: var(--border-radius-md); font-size: 1rem; font-weight: 400; letter-spacing: -0.025em; color: var(--colors-background); transition: color .2s, background .2s; } .gnb__menu-item:hover { background: rgba(255, 255, 255, 0.1); } .gnb.gnb--light .gnb__menu-item { color: var(--colors-text-primary); } .gnb.gnb--light .gnb__menu-item:hover { color: var(--colors-primary); background: var(--colors-primary-light); } /* GNB 드롭다운 - 마우스 호버 시 노출되는 서브메뉴 */ .gnb__nav-item { position: relative; } .gnb__nav-item .gnb__dropdown { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px); background: #fff; border: 1px solid var(--colors-border); border-radius: var(--border-radius-lg); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14); padding: 10px; min-width: 150px; z-index: 2; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease, transform .2s ease; } .gnb__nav-item:hover .gnb__dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .gnb__dropdown .gnb__dropdown-item a { display: block; padding: 9px 14px; border-radius: var(--border-radius-md); font-size: 0.875rem; color: var(--colors-text-secondary); white-space: nowrap; transition: color .2s, background .2s; } .gnb__dropdown .gnb__dropdown-item a:hover { color: var(--colors-primary); background: var(--colors-primary-light); } /* 지금 보고 있는 서브페이지에 해당하는 드롭다운 항목 표시 (데스크톱+모바일 드로어 공용, sub_common.js가 페이지별로 .is-current를 붙인다) */ .gnb__dropdown-item a.is-current { color: var(--colors-primary); font-weight: 700; } .gnb__mobile-dropdown .gnb__dropdown-item a.is-current { color: var(--colors-primary); font-weight: 700; } .gnb__actions { display: flex; align-items: center; gap: 16px; margin-left: auto; } /* 전체 서비스(사이트맵) 바로가기 - 옅은 primary 배경의 필(pill) 링크라 gnb--transparent/--dark/--light 어떤 헤더 모드 위에서도 별도 색상 재정의 없이 항상 같은 대비로 보인다 (원격지원/상담신청처럼 모드별 override가 필요 없다). */ .gnb__sitemap-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--border-radius-full); background: var(--colors-primary-light); color: var(--colors-primary); font-size: 0.875rem; font-weight: 700; letter-spacing: -0.025em; transition: background .2s, color .2s; } .gnb__sitemap-link:hover { background: var(--colors-primary); color: #fff; } /* 원격지원(.btn--ghost-white)은 라이트 헤더 위에서는 보더/배경 없이 텍스트만 어둡게 바뀐다 (Figma Header, node 51:176 white 변형 기준) */ .gnb.gnb--light .btn--ghost-white { background: transparent; border-color: transparent; color: var(--colors-text-primary); padding: 8px 20px; } .gnb.gnb--light .btn--ghost-white.btn--icon { padding-left: 18px; } .gnb.gnb--light .btn--ghost-white:hover { background: var(--colors-primary-light); color: var(--colors-primary); } /* ===================================================== GNB MOBILE (반응형 햄버거 버튼 + 좌측 슬라이드 드로어) 768px 이하에서 .gnb__nav가 사라지는 대신 이 드로어로 전체 메뉴에 접근한다. ===================================================== */ .gnb__hamburger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 8px; flex-shrink: 0; font-size: 1.2rem; color: #fff; } .gnb.gnb--light .gnb__hamburger { color: var(--colors-text-primary); } .gnb__hamburger:hover { opacity: .75; } /* .gnb--light/--dark에 backdrop-filter가 걸려 있어서(필터는 fixed 자손의 containing block을 자기 자신으로 만들어버린다) 이 두 엘리먼트는 header 로드 직후 JS(main.js)가 body 바로 아래로 appendTo 해서 옮긴다 - .gnb 안에 남아있으면 스크롤로 gnb--light가 붙는 순간 드로어 높이가 76px로 줄어들고 z-index도 .gnb 로컬 스택 안에 갇힌다. z-index는 페이지에서 가장 높은 챗봇 패널(46)보다 위에 두어 항상 최상단에 뜨게 한다. */ .gnb__mobile-overlay { position: fixed; inset: 0; z-index: 48; background: rgba(15, 23, 42, 0.45); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } .gnb__mobile-overlay.show { opacity: 1; visibility: visible; } .gnb__mobile-nav { position: fixed; top: 0; left: 0; bottom: 0; z-index: 49; width: 300px; max-width: 84vw; background: #fff; box-shadow: 8px 0 40px rgba(0, 0, 0, 0.16); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .35s var(--ease-smooth); } .gnb__mobile-nav.show { transform: translateX(0); } /* 768px 이하에서만 쓰는 드로어/오버레이라 transform·opacity로 평소엔 안 보이지만, .show가 실수로 붙는 경우까지 대비해 768px 초과에서는 display까지 완전히 꺼둔다. */ @media (min-width: 769px) { .gnb__mobile-nav, .gnb__mobile-overlay { display: none; } } .gnb__mobile-nav-header { display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 7px 0 20px; border-bottom: 1px solid var(--colors-border); flex-shrink: 0; } .gnb__mobile-nav-header .gnb__logo-text { color: var(--colors-text-primary); font-weight: bold; } /* 모바일 nav 배경은 항상 흰색 — 흰색 SVG 로고를 검정으로 고정 */ .gnb__mobile-nav-header .gnb__logo-text img { filter: invert(1); } .gnb__mobile-close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--colors-text-secondary); font-size: 1.15rem; } .gnb__mobile-close:hover { color: var(--colors-text-primary); } .gnb__mobile-nav-body { flex: 1; overflow-y: auto; padding: 12px 12px 24px; } .gnb__mobile-nav-item + .gnb__mobile-nav-item { border-top: 1px solid var(--colors-border-light); } .gnb__mobile-menu-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 8px; font-size: 1rem; font-weight: 600; color: var(--colors-text-primary); text-align: left; } .gnb__mobile-menu-item i { font-size: 0.8rem; color: var(--colors-text-tertiary); transition: transform .25s ease; } .gnb__mobile-nav-item.is-open .gnb__mobile-menu-item i { transform: rotate(180deg); } .gnb__mobile-dropdown { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .gnb__mobile-nav-item.is-open .gnb__mobile-dropdown { max-height: 320px; } .gnb__mobile-dropdown .gnb__dropdown-item a { display: block; padding: 12px 8px 12px 20px; font-size: 0.9rem; color: var(--colors-text-secondary); } .gnb__mobile-dropdown .gnb__dropdown-item a:hover { color: var(--colors-primary); } .gnb__mobile-nav-footer { display: flex; flex-direction: column; gap: 10px; padding: 20px 16px 20px; border-top: 1px solid var(--colors-border); flex-shrink: 0; } .gnb__mobile-nav-footer .btn { width: 100%; } .gnb__mobile-nav-footer .gnb__sitemap-link { width: 100%; justify-content: center; } .gnb__mobile-nav-footer .btn.js-kakao-btn { gap: 4px; } @media (max-width: 768px) { .gnb__hamburger { display: flex; } } /* ===================================================== FOOTER (footer.html) ===================================================== */ .footer { background: #1C1C24; padding: 52px 0 32px; } .footer__inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; } .footer__top { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 24px; gap: 24px; } .footer__links { display: flex; gap: 20px; flex-wrap: wrap; } .footer__link { font-size: 0.9rem; color: rgba(255, 255, 255, 0.4); } .footer__link:hover { color: rgba(255, 255, 255, 0.75); } .footer__link--strong { font-weight: 700; color: rgba(255, 255, 255, 0.75); } .footer__brand { text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; } .footer__brand-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: 20%; opacity: 0.3; } .footer__brand-row img { width: 100%; } .footer__brand-sub { font-size: 0.75rem; color: rgba(255, 255, 255, 0.25); margin-top: 4px; width: 100%; } .footer__info p { font-size: 0.8rem; color: rgba(255, 255, 255, 0.25); line-height: 1.85; } .footer__copy { font-size: 0.75rem; color: rgba(255, 255, 255, 0.2); text-align: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); } /* ===================================================== INPUT 컴포넌트 (Figma node 217:2843 Text Input / 217:2861 Label / 217:2846 Label+Input) home/comp/input.html 에서 전체 변형을 확인할 수 있다. 겉은 div.input-group(라벨+필드 세로 배치), 라벨은 label.input-label, 실제 입력은 input/select/textarea에 공통으로 .input-field를 붙인다. 예)

성함 *

===================================================== */ .input-group { display: flex; flex-direction: column; gap: 6px; width: 100%; } .input-label { font-size: 0.875rem; font-weight: 700; line-height: 24px; letter-spacing: -0.025em; color: var(--colors-text-secondary); } .input-label .input-label__optional { font-weight: 500; color: var(--colors-text-tertiary); } .input-label .input-label__required { font-weight: 500; color: var(--colors-error); } .input-field { width: 100%; height: 48px; padding: 13px 17px; border: 1px solid var(--colors-border); border-radius: var(--border-radius-md); background: #fff; font-family: inherit; font-weight: 500; font-size: 0.875rem; line-height: 24px; letter-spacing: -0.025em; color: var(--colors-text-primary); outline: none; resize: none; transition: border-color .2s ease; } .input-field::placeholder { color: var(--colors-text-tertiary); } .input-field:focus { border-color: var(--colors-primary); } .input-field:disabled { background: var(--colors-background); color: var(--colors-text-disable); cursor: not-allowed; } .input-field.is-invalid { border-color: var(--colors-error); } textarea.input-field { height: auto; min-height: 96px; padding-top: 13px; } /* ------------------------------------------------------- SELECT FIELD — .input-field와 함께 쓰는 공통 셀렉트 컴포넌트 사용법: