/* ============================================================= * common.css — 칼큐 포털 공통 디자인 시스템 * · 사이트 전 페이지가 상속하는 기준 스타일 (플래그십: index.html) * · 색·간격·타이포·반경·그림자를 CSS 변수로 토큰화 * · 톤(시안 E2 "리치 카드 디렉터리"): 웜 뉴트럴 배경 + 소프트 인디고 * primary. 큰 라운드·소프트 인디고 섀도로 친근·신뢰 톤을 함께. * 흰 서피스 + 강조색(딥 그린) 1개. 외부 폰트·CDN 없음. * ============================================================= */ /* ── 디자인 토큰 ──────────────────────────────────────────── */ :root { /* Primary — 소프트 인디고 (신뢰 + 친근) */ --c-primary: #4c5fd5; --c-primary-strong: #3f4fc0; --c-primary-dark: #2f2b66; /* 푸터 등 딥 서피스 */ --c-primary-050: #eceeff; --c-primary-100: #d6dafc; /* Accent — 딥 그린 (활성/성공 강조, 단 하나의 강조색) */ --c-accent: #178a5b; --c-accent-strong: #135f40; --c-accent-050: #e7f6ee; /* 웜 뉴트럴 (서피스·텍스트·보더) */ --c-bg: #faf7f2; /* 페이지 배경(웜 뉴트럴) */ --c-surface: #fffdfa; /* 카드·헤더 서피스 */ --c-surface-2: #f5efe4; /* 옅은 웜 서피스 */ --c-border: #e8ddce; /* 기본 보더 */ --c-border-2: #d9cbb6; /* 강조 보더 */ --c-text: #2b2620; /* 본문 */ --c-text-2: #6c6154; /* 보조 텍스트 */ --c-text-3: #a89a89; /* 흐린 텍스트 */ --c-text-inv: #ffffff; /* 상태색 */ --c-warn: #b45309; --c-warn-bg: #fdf3e7; /* 타이포 — 시스템/설치폰트 우선, 외부 폰트 미사용 */ --font-sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Segoe UI", Roboto, sans-serif; --font-mono: "SFMono-Regular", "Consolas", "D2Coding", "Menlo", monospace; --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.8125rem; /* 13 */ --fs-base: 0.9375rem; /* 15 */ --fs-md: 1.0625rem; /* 17 */ --fs-lg: 1.25rem; /* 20 */ --fs-xl: 1.5rem; /* 24 */ --fs-2xl: 2rem; /* 32 */ --fs-3xl: 2.75rem; /* 44 */ /* 간격 스케일 */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; /* 반경 (E2 — 큰 라운드) */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-full: 999px; /* 그림자 (E2 — 소프트 인디고 틴트) */ --sh-xs: 0 1px 2px rgba(76, 95, 213, 0.05); --sh-sm: 0 2px 6px rgba(76, 95, 213, 0.08); --sh-md: 0 10px 26px rgba(76, 95, 213, 0.12); --sh-lg: 0 18px 44px rgba(76, 95, 213, 0.16); /* 레이아웃 */ --container: 1200px; --header-h: 64px; } /* ── 다크 테마 (data-theme="dark" 를 에 부여, 토큰 오버라이드) ──── */ :root[data-theme="dark"] { --c-primary: #6f80ea; --c-primary-strong: #8a97f2; --c-primary-dark: #14121b; /* 푸터 등 딥 서피스 */ --c-primary-050: #23233b; /* 옅은 인디고 서피스(다크) */ --c-primary-100: #313357; --c-accent: #3fbb84; --c-accent-strong: #5fd6a0; --c-accent-050: #15271e; --c-bg: #16130f; --c-surface: #201c16; --c-surface-2: #2a251d; --c-border: #372f28; --c-border-2: #4b4235; --c-text: #f1ece4; --c-text-2: #c4baab; --c-text-3: #8d8375; --c-text-inv: #ffffff; --c-warn: #e2953f; --c-warn-bg: #2e2415; --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --sh-sm: 0 2px 6px rgba(0, 0, 0, 0.36); --sh-md: 0 10px 26px rgba(0, 0, 0, 0.46); --sh-lg: 0 18px 44px rgba(0, 0, 0, 0.56); } /* 다크: 리터럴 색을 쓰는 컴포넌트 개별 보정 */ :root[data-theme="dark"] .site-header { background: rgba(32, 28, 22, 0.9); } :root[data-theme="dark"] .badge--tbd { background: #2f2a22; color: var(--c-text-3); } :root[data-theme="dark"] .ad-slot { background: var(--c-surface-2); } :root[data-theme="dark"] .keypad__btn { background: var(--c-surface-2); } :root[data-theme="dark"] img { filter: none; } /* ── 리셋(경량) ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.6; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--c-primary-100); outline-offset: 2px; border-radius: var(--r-sm); } /* ── 레이아웃 유틸 ───────────────────────────────────────── */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); } .section { padding-block: var(--sp-7); } .section__head { margin-bottom: var(--sp-5); } .section__title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; color: var(--c-text); } .section__desc { margin-top: var(--sp-2); color: var(--c-text-2); font-size: var(--fs-base); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── 전역 헤더 (햄버거 + 로고 + 검색) ────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 253, 250, 0.92); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--c-border); } .site-header__inner { display: flex; align-items: center; gap: var(--sp-3); height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 800; font-size: var(--fs-md); letter-spacing: -0.02em; flex: 0 0 auto; } .brand__mark { width: 30px; height: 30px; flex: 0 0 auto; color: var(--c-primary); } .brand__text { color: var(--c-text); } .brand__text b { color: var(--c-primary); } /* 햄버거 버튼 — 드로어 토글 (전 페이지 공용) */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; padding: 0; border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-primary-strong); transition: background .15s, border-color .15s, color .15s; } .nav-toggle:hover { background: var(--c-primary-050); border-color: var(--c-primary-100); color: var(--c-primary); } .nav-toggle svg { width: 20px; height: 20px; } /* 헤더 검색 어피던스 — 히어로 검색(#calc-search)로 유도하는 링크 */ .nav-search { margin-left: auto; flex: 0 1 auto; display: inline-flex; align-items: center; gap: var(--sp-2); width: min(420px, 44vw); min-width: 0; padding: var(--sp-2) var(--sp-4); background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-full); color: var(--c-text-3); font-size: var(--fs-sm); font-weight: 500; transition: background .15s, border-color .15s, color .15s; } .nav-search:hover { background: var(--c-surface); border-color: var(--c-primary); color: var(--c-primary); } .nav-search svg { width: 16px; height: 16px; flex: 0 0 auto; } .nav-search__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 언어 토글 (KR|EN 세그먼트) — 헤더 우측 끝, 전 페이지 공용 */ .lang-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 3px; gap: 2px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-full); } .lang-toggle__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em; color: var(--c-text-2); background: transparent; border: 0; border-radius: var(--r-full); transition: background .15s, color .15s; } .lang-toggle__btn:hover { color: var(--c-primary); } .lang-toggle__btn.is-active { color: var(--c-text-inv); background: var(--c-primary); box-shadow: var(--sh-xs); } /* 다크/라이트 테마 토글 버튼 (KR/EN 토글 왼쪽, 전 페이지 공용) */ .theme-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: var(--r-full); border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text-2); transition: background .15s, border-color .15s, color .15s; } .theme-toggle:hover { color: var(--c-primary); border-color: var(--c-primary-100); background: var(--c-primary-050); } .theme-toggle svg { width: 19px; height: 19px; } .theme-toggle .icon-sun { display: none; } .theme-toggle.is-dark .icon-sun { display: block; } .theme-toggle.is-dark .icon-moon { display: none; } /* i18n 이중 블록 유틸 — 비활성 언어 블록 숨김(기본 HTML 은 en 에 부여) */ .lang-hidden { display: none !important; } /* (구) 수평 카테고리 네비 — E2에서는 드로어로 이동, 잔존 시 숨김 */ .main-nav { display: none; } /* ── 오프캔버스 드로어 (오버레이 + 딤 백드롭) 전 페이지 공용 ── */ .drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(43, 38, 32, 0.45); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; } .drawer-backdrop.is-open { opacity: 1; visibility: visible; } .drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 70; width: 300px; max-width: 84vw; display: flex; flex-direction: column; background: var(--c-surface); border-right: 1px solid var(--c-border); box-shadow: var(--sh-lg); padding: var(--sp-4); overflow-y: auto; transform: translateX(-100%); transition: transform .24s cubic-bezier(.4, 0, .2, 1); } .drawer.is-open { transform: translateX(0); } .drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-3); } .drawer__title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; color: var(--c-text-3); } .drawer__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text-2); transition: background .15s, color .15s, border-color .15s; } .drawer__close:hover { background: var(--c-primary-050); color: var(--c-primary); border-color: var(--c-primary-100); } .drawer__close svg { width: 18px; height: 18px; } .drawer__nav { display: flex; flex-direction: column; gap: 2px; } .drawer__link { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-base); font-weight: 600; color: var(--c-text-2); transition: background .15s, color .15s; } .drawer__link:hover, .drawer__link:focus-visible { background: var(--c-primary-050); color: var(--c-primary); } .drawer__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--r-md); background: var(--c-primary-050); color: var(--c-primary); } .drawer__icon svg { width: 18px; height: 18px; } /* ── 드로어 아코디언 (카테고리 클릭 → 하위 계산기 토글) ── */ .drawer__group { display: flex; flex-direction: column; } .drawer__cat { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-2) var(--sp-3); border: 0; background: transparent; border-radius: var(--r-md); text-align: left; font-size: var(--fs-base); font-weight: 600; color: var(--c-text-2); transition: background .15s, color .15s; } .drawer__cat:hover { background: var(--c-primary-050); color: var(--c-primary); } .drawer__cat[aria-expanded="true"] { color: var(--c-primary); } .drawer__chevwrap { margin-left: auto; display: inline-flex; color: var(--c-text-3); } .drawer__chev { width: 16px; height: 16px; transition: transform .2s ease; } .drawer__cat[aria-expanded="true"] .drawer__chev { transform: rotate(90deg); color: var(--c-primary); } .drawer__sub { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 var(--sp-2); } .drawer__sub[hidden] { display: none; } .drawer__viewall { padding: var(--sp-1) var(--sp-3) var(--sp-1) 3.15rem; font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary); } .drawer__viewall:hover { text-decoration: underline; } .drawer__subitem { display: block; padding: var(--sp-2) var(--sp-3) var(--sp-2) 3.15rem; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--c-text-2); } a.drawer__subitem.is-ok { color: var(--c-text); font-weight: 600; } a.drawer__subitem.is-ok:hover, a.drawer__subitem.is-ok:focus-visible { background: var(--c-primary-050); color: var(--c-primary); } .drawer__subitem.is-tbd { color: var(--c-text-3); cursor: default; } /* 드로어 열림 시 배경 스크롤 잠금 */ body.no-scroll { overflow: hidden; } /* ── 히어로 ──────────────────────────────────────────────── */ .hero { background: radial-gradient(1100px 380px at 82% -10%, var(--c-primary-050), transparent 70%), linear-gradient(180deg, #ffffff, var(--c-bg)); border-bottom: 1px solid var(--c-border); } .hero__inner { padding-block: var(--sp-8) var(--sp-7); text-align: center; } .hero__eyebrow { display: inline-block; font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary); background: var(--c-primary-050); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); margin-bottom: var(--sp-4); letter-spacing: .01em; } .hero__title { font-size: var(--fs-3xl); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; color: var(--c-text); } .hero__title .accent { color: var(--c-primary); } .hero__lead { max-width: 720px; margin: var(--sp-4) auto 0; font-size: var(--fs-md); color: var(--c-text-2); } /* 검색창 */ .search { position: relative; max-width: 640px; margin: var(--sp-6) auto 0; } .search__field { display: flex; align-items: center; gap: var(--sp-3); background: var(--c-surface); border: 2px solid var(--c-border-2); border-radius: var(--r-full); padding: var(--sp-3) var(--sp-5); box-shadow: var(--sh-md); transition: border-color .15s, box-shadow .15s; } .search__field:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-100); } .search__icon { width: 22px; height: 22px; color: var(--c-text-3); flex: 0 0 auto; } .search__input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--fs-md); color: var(--c-text); } .search__input::placeholder { color: var(--c-text-3); } /* 검색 결과 드롭 패널 */ .search__results { position: absolute; left: 0; right: 0; top: calc(100% + var(--sp-2)); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: var(--sp-3); text-align: left; z-index: 20; max-height: 60vh; overflow: auto; } .search-count { font-size: var(--fs-xs); color: var(--c-text-3); padding: var(--sp-1) var(--sp-2) var(--sp-2); } .search-empty { padding: var(--sp-4); color: var(--c-text-2); font-size: var(--fs-base); text-align: center; } .search-list { display: flex; flex-direction: column; gap: 2px; } .search-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); } .search-item__name { font-weight: 600; } .search-item__cat { color: var(--c-text-3); font-size: var(--fs-sm); margin-left: auto; } .search-item--active:hover { background: var(--c-primary-050); } .search-item--tbd { opacity: .7; cursor: default; } .search-item .badge { margin-left: var(--sp-2); } .search-item--active .search-item__cat { margin-left: auto; } /* 인기 링크 칩 */ .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-5); } .chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-2); background: var(--c-surface); border: 1px solid var(--c-border-2); border-radius: var(--r-full); transition: all .15s; } .chip:hover { color: var(--c-primary); border-color: var(--c-primary); box-shadow: var(--sh-sm); } .chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); } /* ── 뱃지 ────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 2px var(--sp-2); font-size: var(--fs-xs); font-weight: 700; border-radius: var(--r-full); line-height: 1.5; white-space: nowrap; } .badge--active { color: var(--c-accent-strong); background: var(--c-accent-050); } .badge--new { color: var(--c-text-inv); background: var(--c-accent); } .badge--tbd { color: var(--c-text-3); background: #eef0f5; } .badge--policy { color: var(--c-primary-strong); background: var(--c-primary-050); } /* ── 버튼 ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); font-size: var(--fs-base); font-weight: 700; border-radius: var(--r-md); border: 1px solid transparent; transition: all .15s; } .btn--primary { background: var(--c-primary); color: var(--c-text-inv); } .btn--primary:hover { background: var(--c-primary-strong); box-shadow: var(--sh-sm); } .btn--ghost { background: transparent; color: var(--c-primary); border-color: var(--c-border-2); } .btn--ghost:hover { border-color: var(--c-primary); background: var(--c-primary-050); } .btn--block { width: 100%; } /* ── 인풋 (계산기 페이지 상속용) ─────────────────────────── */ .input, .field__control { width: 100%; padding: var(--sp-3) var(--sp-4); font-family: inherit; font-size: var(--fs-md); color: var(--c-text); background: var(--c-surface); border: 1.5px solid var(--c-border-2); border-radius: var(--r-md); transition: border-color .15s, box-shadow .15s; } .input:focus, .field__control:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-100); } .field { margin-bottom: var(--sp-4); } .field__label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-2); } /* 결과 숫자 (계산기 페이지 상속용) — 크고 명확하게 */ .result-num { font-family: var(--font-mono); font-weight: 800; font-size: var(--fs-3xl); color: var(--c-primary); letter-spacing: -0.02em; } .result-num .unit { font-size: var(--fs-lg); color: var(--c-text-2); margin-left: var(--sp-2); } /* ── 카드 (기본) ─────────────────────────────────────────── */ .card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); } /* ── 카테고리 그리드 ─────────────────────────────────────── */ .cat-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(3, 1fr); } .cat-card { display: flex; flex-direction: column; gap: var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); transition: transform .15s, box-shadow .15s, border-color .15s; } .cat-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--c-border-2); } .cat-card__head { display: flex; align-items: center; gap: var(--sp-3); } a.cat-card__head:hover .cat-card__title { color: var(--c-primary); } a.cat-card__head:hover .cat-card__icon { background: var(--c-primary-100); } .cat-card__icon { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--r-md); background: var(--c-primary-050); color: var(--c-primary); } .cat-card__icon svg { width: 24px; height: 24px; } .cat-card__title { font-size: var(--fs-md); font-weight: 800; letter-spacing: -0.01em; } .cat-card__desc { color: var(--c-text-2); font-size: var(--fs-sm); min-height: 2.6em; } .cat-card__list { display: flex; flex-direction: column; gap: 1px; margin-top: var(--sp-1); } .calc-link { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-base); color: var(--c-text-2); transition: background .15s, color .15s; } .calc-link:hover { background: var(--c-surface-2); } .calc-link--active { color: var(--c-text); font-weight: 600; } .calc-link--active:hover { background: var(--c-primary-050); color: var(--c-primary); } .calc-link--tbd { color: var(--c-text-3); cursor: default; } .calc-link__chevron { width: 15px; height: 15px; color: var(--c-text-3); flex: 0 0 auto; } .calc-link__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .calc-link .badge { flex: 0 0 auto; } .cat-card__more { margin-top: auto; padding-top: var(--sp-3); font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary); display: inline-flex; align-items: center; gap: var(--sp-1); } .cat-card__more:hover { color: var(--c-primary-strong); } /* ── 인기 계산기 그리드 ──────────────────────────────────── */ .pop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } .pop-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--sh-xs); transition: transform .15s, box-shadow .15s, border-color .15s; } .pop-card--active:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--c-primary); } .pop-card--tbd { opacity: .82; } .pop-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } .pop-card__cat { font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-3); } .pop-card__name { font-size: var(--fs-md); font-weight: 800; letter-spacing: -0.01em; color: var(--c-text); } .pop-card__go { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-text-3); } .pop-card--active .pop-card__go { color: var(--c-primary); font-weight: 600; } /* ── 리치 카드 디렉터리 (E2) ─────────────────────────────── */ .directory { padding-block: var(--sp-6) var(--sp-7); } .cat-section { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); } .cat-section + .cat-section { margin-top: var(--sp-7); } .cat-section__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); } .cat-section__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: var(--r-md); background: var(--c-primary-050); color: var(--c-primary); } .cat-section__icon svg { width: 20px; height: 20px; } .cat-section__title { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.02em; color: var(--c-text); } .cat-section__count { font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-3); background: var(--c-surface-2); border: 1px solid var(--c-border); padding: 2px var(--sp-2); border-radius: var(--r-full); } .rich-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } .rich-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--sh-xs); transition: transform .15s, box-shadow .15s, border-color .15s; } a.rich-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--c-primary); } .rich-card--ok { border-color: var(--c-accent-050); box-shadow: var(--sh-sm); } .rich-card--tbd { } .rich-card__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--r-md); background: var(--c-primary-050); color: var(--c-primary); } .rich-card--ok .rich-card__icon { background: var(--c-accent-050); color: var(--c-accent-strong); } .rich-card__icon svg { width: 22px; height: 22px; } .rich-card__name { font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; color: var(--c-text); line-height: 1.3; min-height: 2.6em; display: flex; align-items: flex-start; } .rich-card--tbd .rich-card__name { color: var(--c-text-2); } .rich-card__desc { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.5; flex: 1; } .rich-card .badge { align-self: flex-start; margin-top: var(--sp-1); } /* ── 광고 슬롯 ───────────────────────────────────────────── */ .ad-slot { display: grid; place-items: center; text-align: center; min-height: 100px; border: 1.5px dashed var(--c-border-2); border-radius: var(--r-md); background: repeating-linear-gradient( 45deg, var(--c-surface-2), var(--c-surface-2) 12px, #f2f4f8 12px, #f2f4f8 24px); color: var(--c-text-3); font-size: var(--fs-sm); font-weight: 600; } .ad-slot span { padding: var(--sp-2) var(--sp-4); } .ad-slot--leaderboard { min-height: 120px; } /* 실광고 주입 시(is-live) 플레이스홀더 외형 제거 — 광고만 노출 */ .ad-slot.is-live { min-height: 0; border: 0; background: none; padding: 0; display: block; } .ad-slot.is-live .adsbygoogle { display: block; } /* 세로형 사이드 레일 (넓은 화면 전용, 좌우 여백에 고정) */ .ad-rail { position: fixed; top: calc(var(--header-h) + var(--sp-5)); width: 160px; z-index: 30; } .ad-rail .adsbygoogle { display: block; width: 160px; height: 600px; } .ad-rail--left { left: calc((100vw - var(--container)) / 2 - 176px); } .ad-rail--right { right: calc((100vw - var(--container)) / 2 - 176px); } @media (max-width: 1559px) { .ad-rail { display: none !important; } } /* 멀티플렉스 (푸터 직전 전폭 추천형) */ .ad-multiplex { max-width: var(--container); margin: var(--sp-7) auto 0; padding-inline: var(--sp-5); } .ad-multiplex .adsbygoogle { display: block; } /* ── 푸터 ────────────────────────────────────────────────── */ .site-footer { margin-top: var(--sp-7); background: var(--c-primary-dark); color: #c7cdec; font-size: var(--fs-sm); } .site-footer__inner { padding-block: var(--sp-7) var(--sp-6); } .site-footer__brand { display: inline-flex; align-items: center; gap: var(--sp-2); color: #fff; font-weight: 800; font-size: var(--fs-md); } .site-footer__brand svg { width: 26px; height: 26px; color: #aab2e8; } .site-footer__about { margin-top: var(--sp-3); max-width: 560px; color: #aeb5dd; } .site-footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-5); } .site-footer__links a { color: #d6dbf3; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; } .site-footer__links a:hover { color: #fff; text-decoration: underline; } .site-footer__disclaimer { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.12); color: #9aa2cf; font-size: var(--fs-xs); line-height: 1.7; } .site-footer__copy { margin-top: var(--sp-3); color: #8891c4; font-size: var(--fs-xs); } /* ── 법률 문서(개인정보처리방침·이용약관) 본문 ─────────────── */ .legal-hero { background: linear-gradient(180deg, #ffffff, var(--c-bg)); border-bottom: 1px solid var(--c-border); } .legal-hero__inner { padding-block: var(--sp-7) var(--sp-6); } .legal-hero__title { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; color: var(--c-text); } .legal-hero__meta { margin-top: var(--sp-3); color: var(--c-text-3); font-size: var(--fs-sm); } .legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-6); align-items: start; padding-block: var(--sp-7); } .legal-toc { position: sticky; top: calc(var(--header-h) + var(--sp-4)); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--sh-xs); } .legal-toc__title { font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-3); letter-spacing: .04em; margin-bottom: var(--sp-2); } .legal-toc ol { display: flex; flex-direction: column; gap: 2px; counter-reset: legal-toc; } .legal-toc li { counter-increment: legal-toc; } .legal-toc a { display: block; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--c-text-2); transition: background .15s, color .15s; } .legal-toc a:hover { background: var(--c-primary-050); color: var(--c-primary); } .legal { max-width: 760px; } .legal__notice { display: flex; gap: var(--sp-3); align-items: flex-start; background: var(--c-warn-bg); border: 1px solid #f3cdb4; border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6); color: var(--c-text); } .legal__notice strong { color: var(--c-warn); } .legal section { margin-bottom: var(--sp-6); scroll-margin-top: calc(var(--header-h) + var(--sp-4)); } .legal h2 { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.01em; color: var(--c-text); margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border); } .legal h3 { font-size: var(--fs-md); font-weight: 700; color: var(--c-text); margin: var(--sp-4) 0 var(--sp-2); } .legal p { color: var(--c-text-2); margin-bottom: var(--sp-3); } .legal ul, .legal ol.legal-list { padding-left: var(--sp-5); margin-bottom: var(--sp-3); } .legal ul { list-style: disc; } .legal ol.legal-list { list-style: decimal; } .legal li { color: var(--c-text-2); margin-bottom: var(--sp-2); } .legal strong { color: var(--c-text); } .legal .legal-todo { color: var(--c-warn); background: var(--c-warn-bg); padding: 1px var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 700; } @media (max-width: 860px) { .legal-layout { grid-template-columns: 1fr; } .legal-toc { position: static; } } /* 계산기 2단 → 1단 (계산기 먼저, 설명 아래로). 스티키 해제 */ @media (max-width: 920px) { .calc-layout { grid-template-columns: 1fr; gap: var(--sp-4); } .calc-col-main { position: static; } } /* ============================================================= * 계산기 페이지 (///) — 브리프 8구성 공통 레이아웃 * 브레드크럼 → calc-hero → calc-card(입력·결과) → 광고 → 설명·FAQ * → 관련 계산기 → 면책. 단일 컬럼 중앙 정렬(신뢰형 핀테크 톤). * ============================================================= */ .calc-wrap { max-width: 760px; margin-inline: auto; } /* 브레드크럼 */ .breadcrumb { padding-top: var(--sp-5); } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--c-text-3); } .breadcrumb li { display: inline-flex; align-items: center; gap: var(--sp-1); } .breadcrumb a { color: var(--c-text-2); } .breadcrumb a:hover { color: var(--c-primary); } .breadcrumb__sep { color: var(--c-text-3); } .breadcrumb [aria-current="page"] { color: var(--c-text); font-weight: 600; } /* 히어로 */ .calc-hero { padding-block: var(--sp-5) var(--sp-4); } .calc-hero__eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 700; color: var(--c-primary-strong); background: var(--c-primary-050); padding: 4px var(--sp-3); border-radius: var(--r-full); } .calc-hero__eyebrow.is-policy { color: var(--c-accent-strong); background: var(--c-accent-050); } .calc-hero__title { margin-top: var(--sp-3); font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; color: var(--c-text); line-height: 1.2; } .calc-hero__lead { margin-top: var(--sp-3); color: var(--c-text-2); font-size: var(--fs-md); } /* 계산기 카드 (입력 + 결과) */ .calc-card { padding: var(--sp-6); margin-top: var(--sp-2); } .calc-card__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } .calc-card__grid .field--full { grid-column: 1 / -1; } .field__hint { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--c-text-3); } .field__row { display: flex; gap: var(--sp-2); align-items: stretch; } .field__row .field__control { flex: 1; min-width: 0; } .field__suffix { display: inline-flex; align-items: center; padding-inline: var(--sp-3); font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-2); background: var(--c-surface-2); border: 1.5px solid var(--c-border-2); border-radius: var(--r-md); } select.field__control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c6154' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-3) center; padding-right: var(--sp-6); } .calc-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); } /* 결과 패널 */ .calc-result { margin-top: var(--sp-5); padding: var(--sp-5); background: var(--c-primary-050); border: 1px solid var(--c-primary-100); border-radius: var(--r-lg); } .calc-result__label { font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary-strong); } .calc-result__value { margin-top: var(--sp-2); } .calc-result .result-num { font-size: var(--fs-3xl); } .calc-result__value--sm .result-num { font-size: var(--fs-2xl); } .calc-result__note { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-2); } /* 세부 내역 표 (공제·환산 등) */ .calc-breakdown { margin-top: var(--sp-4); border-top: 1px dashed var(--c-border-2); } .calc-breakdown__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border); font-size: var(--fs-base); } .calc-breakdown__row:last-child { border-bottom: 0; } .calc-breakdown__row .k { color: var(--c-text-2); } .calc-breakdown__row .v { font-family: var(--font-mono); font-weight: 700; color: var(--c-text); } .calc-breakdown__row--total { margin-top: var(--sp-1); padding-top: var(--sp-3); border-top: 2px solid var(--c-border-2); } .calc-breakdown__row--total .k { font-weight: 800; color: var(--c-text); } .calc-breakdown__row--total .v { color: var(--c-primary); font-size: var(--fs-md); } /* 인라인 노트 (안내·경고) */ .calc-note { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.6; } .calc-note--info { background: var(--c-primary-050); color: var(--c-text-2); } .calc-note--warn { background: var(--c-warn-bg); border: 1px solid #f3cdb4; color: var(--c-text); } .calc-note--warn strong { color: var(--c-warn); } .calc-note svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; } /* 계산 기록 — 전 계산기 공통, localStorage 최근 5건 (common.js initHistory 주입) */ .calc-history { margin-top: var(--sp-6); padding: var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); } .calc-history__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); } .calc-history__title { font-size: var(--fs-md); font-weight: 800; color: var(--c-text); } .calc-history__clear { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-2); background: none; border: 1.5px solid var(--c-border-2); border-radius: var(--r-md); padding: var(--sp-1) var(--sp-3); cursor: pointer; } .calc-history__clear:hover { color: var(--c-warn); border-color: #f3cdb4; background: var(--c-warn-bg); } .calc-history__empty { font-size: var(--fs-sm); color: var(--c-text-3); } .calc-history__list { display: flex; flex-direction: column; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; } .calc-history__item { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--c-surface-2); } .calc-history__val { flex: 0 1 auto; font-family: var(--font-mono); font-weight: 700; color: var(--c-primary-strong); word-break: break-word; } .calc-history__in { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); color: var(--c-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .calc-history__time { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--c-text-3); font-variant-numeric: tabular-nums; } /* 기록 클릭 → 계산기 복원 (버튼형 항목) */ button.calc-history__item { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; } button.calc-history__item:hover { border-color: var(--c-primary); background: var(--c-primary-050); } button.calc-history__item:hover .calc-history__val { color: var(--c-primary-strong); } .calc-history__apply { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 700; color: var(--c-primary); opacity: 0; transition: opacity .15s; } button.calc-history__item:hover .calc-history__apply, button.calc-history__item:focus-visible .calc-history__apply { opacity: 1; } .calc-card--flash { animation: calcCardFlash .7s ease; } @keyframes calcCardFlash { 0% { box-shadow: 0 0 0 3px var(--c-primary-100); } 100% { box-shadow: none; } } /* 계산기 패밀리 — 입력 공유 형제 결과 교차노출 (common.js initFamily 주입) */ .calc-family { margin-top: var(--sp-6); padding: var(--sp-5); background: var(--c-primary-050); border: 1px solid var(--c-primary-100); border-radius: var(--r-lg); } .calc-family[hidden] { display: none; } .calc-family__title { font-size: var(--fs-md); font-weight: 800; color: var(--c-primary-strong); margin-bottom: var(--sp-3); } .calc-family__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-2); } .calc-family__item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-text); transition: border-color .15s, transform .15s, box-shadow .15s; } a.calc-family__item:hover { border-color: var(--c-primary); transform: translateY(-1px); box-shadow: var(--sh-sm); } .calc-family__item--bonus { background: transparent; border-style: dashed; } .calc-family__icon { font-size: 1.35rem; line-height: 1; flex: 0 0 auto; } .calc-family__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } .calc-family__label { font-size: var(--fs-xs); color: var(--c-text-3); } .calc-family__val { font-weight: 700; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .calc-family__more { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 700; color: var(--c-primary); } /* 설명 콘텐츠 (500자+ 프로즈) */ .calc-content { margin-top: var(--sp-7); } .calc-content h2 { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.01em; color: var(--c-text); margin: var(--sp-6) 0 var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border); } .calc-content h2:first-child { margin-top: 0; } .calc-content h3 { font-size: var(--fs-md); font-weight: 700; color: var(--c-text); margin: var(--sp-4) 0 var(--sp-2); } .calc-content p { color: var(--c-text-2); margin-bottom: var(--sp-3); } .calc-content ul, .calc-content ol { padding-left: var(--sp-5); margin-bottom: var(--sp-3); } .calc-content ul { list-style: disc; } .calc-content ol { list-style: decimal; } .calc-content li { color: var(--c-text-2); margin-bottom: var(--sp-2); } .calc-content strong { color: var(--c-text); } .calc-content code { font-family: var(--font-mono); font-size: 0.92em; background: var(--c-surface-2); padding: 1px 6px; border-radius: var(--r-sm); color: var(--c-primary-strong); } /* 기준표 */ .calc-table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0 var(--sp-4); font-size: var(--fs-sm); } .calc-table caption { text-align: left; font-size: var(--fs-xs); color: var(--c-text-3); margin-bottom: var(--sp-2); } .calc-table th, .calc-table td { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); text-align: left; } .calc-table thead th { background: var(--c-surface-2); font-weight: 700; color: var(--c-text); } .calc-table td { color: var(--c-text-2); } .calc-table tbody th { background: var(--c-surface); font-weight: 600; color: var(--c-text); } .calc-table__scroll { overflow-x: auto; } /* FAQ (native details — JS-off 동작) */ .faq { margin-top: var(--sp-3); } .faq__item { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); margin-bottom: var(--sp-2); overflow: hidden; } .faq__item[open] { border-color: var(--c-border-2); box-shadow: var(--sh-xs); } .faq__q { list-style: none; cursor: pointer; padding: var(--sp-3) var(--sp-4); font-weight: 700; color: var(--c-text); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: ""; width: 12px; height: 12px; flex: 0 0 auto; border-right: 2.2px solid var(--c-text-3); border-bottom: 2.2px solid var(--c-text-3); transform: rotate(45deg); transition: transform .18s; margin-right: 4px; } .faq__item[open] .faq__q::after { transform: rotate(-135deg); } .faq__a { padding: 0 var(--sp-4) var(--sp-4); color: var(--c-text-2); font-size: var(--fs-base); line-height: 1.65; } /* 관련 계산기 */ .related { margin-top: var(--sp-7); } .related__title { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.02em; color: var(--c-text); margin-bottom: var(--sp-4); } /* 페이지 하단 면책 */ .calc-disclaimer { margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5); background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-text-3); font-size: var(--fs-xs); line-height: 1.7; } .calc-disclaimer strong { color: var(--c-text-2); } /* 키패드 (math/basic 등 버튼형 계산기) */ .keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-top: var(--sp-4); } .keypad__btn { min-height: 56px; font-size: var(--fs-lg); font-weight: 700; font-family: var(--font-mono); background: var(--c-surface); color: var(--c-text); border: 1.5px solid var(--c-border-2); border-radius: var(--r-md); transition: background .1s, transform .05s, border-color .1s; } .keypad__btn:hover { background: var(--c-surface-2); border-color: var(--c-primary-100); } .keypad__btn:active { transform: translateY(1px); } .keypad__btn--op { color: var(--c-primary); background: var(--c-primary-050); border-color: var(--c-primary-100); } .keypad__btn--eq { color: var(--c-text-inv); background: var(--c-primary); border-color: var(--c-primary); } .keypad__btn--eq:hover { background: var(--c-primary-strong); } .keypad__btn--fn { color: var(--c-text-2); font-size: var(--fs-md); } .keypad__btn--wide { grid-column: span 2; } .calc-display { text-align: right; padding: var(--sp-4); background: var(--c-primary-dark); color: #fff; border-radius: var(--r-md); font-family: var(--font-mono); overflow: hidden; } .calc-display__expr { min-height: 1.4em; font-size: var(--fs-md); color: #aab2e8; word-break: break-all; } .calc-display__out { margin-top: var(--sp-1); font-size: var(--fs-2xl); font-weight: 800; word-break: break-all; } /* ============================================================= * 계산기 2단 레이아웃 (좌: 계산기 고정 / 우: 설명 토글 패널) * 브레드크럼·히어로는 상단 전폭, 그 아래 2단. 모바일은 1단 스택. * ============================================================= */ .calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sp-6); align-items: start; margin-top: var(--sp-4); } /* 좌측(계산기) — 스크롤해도 화면에 고정 */ .calc-col-main { position: sticky; top: calc(var(--header-h) + var(--sp-4)); min-width: 0; } .calc-col-side { min-width: 0; } .calc-col-side > .related:first-child, .calc-col-side > .panel:first-child { margin-top: 0; } /* 토글 패널 (설명 각 절을 접기) — native details */ .panel { border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-xs); margin-bottom: var(--sp-3); overflow: hidden; } .panel[open] { border-color: var(--c-border-2); box-shadow: var(--sh-sm); } .panel > summary { list-style: none; cursor: pointer; padding: var(--sp-4) var(--sp-5); font-size: var(--fs-md); font-weight: 800; letter-spacing: -0.01em; color: var(--c-text); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .panel > summary::-webkit-details-marker { display: none; } .panel > summary::after { content: ""; width: 11px; height: 11px; flex: 0 0 auto; margin-right: 3px; border-right: 2.4px solid var(--c-text-3); border-bottom: 2.4px solid var(--c-text-3); transform: rotate(45deg); transition: transform .18s; } .panel[open] > summary::after { transform: rotate(-135deg); } .panel > summary:hover { color: var(--c-primary); } .panel__body { padding: 0 var(--sp-5) var(--sp-5); } /* 패널 본문 프로즈 — .calc-content 타이포 재사용(h2는 summary가 대체) */ .panel__body > :first-child { margin-top: 0; } .panel__body h3 { font-size: var(--fs-base); font-weight: 700; color: var(--c-text); margin: var(--sp-4) 0 var(--sp-2); } .panel__body p { color: var(--c-text-2); margin-bottom: var(--sp-3); } .panel__body ul, .panel__body ol { padding-left: var(--sp-5); margin-bottom: var(--sp-3); } .panel__body ul { list-style: disc; } .panel__body ol { list-style: decimal; } .panel__body li { color: var(--c-text-2); margin-bottom: var(--sp-2); } .panel__body strong { color: var(--c-text); } .panel__body code { font-family: var(--font-mono); font-size: 0.92em; background: var(--c-surface-2); padding: 1px 6px; border-radius: var(--r-sm); color: var(--c-primary-strong); } .panel__body .calc-table { margin-top: var(--sp-1); } .panel__body .faq { margin-top: 0; } .panel__body > .calc-note:first-child { margin-top: 0; } /* 2단 아래 전폭 1단 영역 (FAQ · 광고 · 관련 계산기 · 면책) */ .calc-bottom { margin-top: var(--sp-7); } .calc-bottom > .related { margin-top: var(--sp-6); } .calc-bottom .panel__title, .calc-bottom .related__title { font-size: var(--fs-lg); } .calc-footnote { margin-top: var(--sp-5); } /* ── 반응형 (데스크톱 우선 + 모바일 다듬기) ───────────────── */ @media (max-width: 1024px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } .pop-grid { grid-template-columns: repeat(3, 1fr); } .rich-grid { grid-template-columns: repeat(2, 1fr); } .hero__title { font-size: var(--fs-2xl); } } @media (max-width: 720px) { .cat-grid { grid-template-columns: 1fr; } .pop-grid { grid-template-columns: repeat(2, 1fr); } .container { padding-inline: var(--sp-4); } .hero__inner { padding-block: var(--sp-7) var(--sp-6); } /* 계산기 페이지 모바일 */ .calc-card { padding: var(--sp-4); } .calc-card__grid { grid-template-columns: 1fr; } .calc-hero__title { font-size: var(--fs-xl); } .calc-actions { flex-direction: column; } .calc-result .result-num { font-size: var(--fs-2xl); } .keypad__btn { min-height: 52px; font-size: var(--fs-md); } } /* 모바일: 리치 카드 2열 컴팩트 — 설명을 감춰 스크롤 길이를 절반으로. 설명 텍스트는 DOM 에 남아 크롤링/SEO 는 유지된다. */ @media (max-width: 640px) { .rich-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } .rich-card { padding: var(--sp-3); gap: 6px; } .rich-card__desc { display: none; } .rich-card__icon { width: 34px; height: 34px; } .rich-card__icon svg { width: 19px; height: 19px; } .rich-card__name { font-size: var(--fs-base); } .rich-card .badge { margin-top: 2px; } /* 헤더 검색 아이콘 히트박스 44px 확보 */ .nav-search { width: auto; margin-left: auto; min-width: 44px; min-height: 44px; padding: 0; justify-content: center; } .nav-search__text { display: none; } /* 언어 토글 컴팩트 — KR/EN 둘 다 유지, 헤더 넘침 없이 */ .site-header__inner { gap: var(--sp-2); } .lang-toggle { padding: 2px; } .lang-toggle__btn { min-width: 32px; min-height: 34px; padding: 0 var(--sp-2); font-size: var(--fs-xs); } } @media (max-width: 400px) { .drawer { width: 88vw; max-width: none; } .search__input { font-size: var(--fs-sm); } }