@charset "UTF-8"; /* ========================================================================= 월급계산소 (pay-calculator-hub) — 공통 스타일시트 ------------------------------------------------------------------------- 출처: design/design-guide.md v1.0 + design/index.html + design/calculator-sample.html :root 토큰은 디자이너 시안에서 값 변경 없이 그대로 옮겼습니다. (design-guide 12절 #1) 절대 지켜야 할 것 1) 광고 슬롯의 min-height 를 제거하거나 줄이지 마십시오. (CLS 방어 / design-guide 6-2) 2) .form-actions 의 형제로 광고 슬롯을 두지 마십시오. (오클릭 유도 / design-guide 6-3 #1) 3) 외부 CDN·웹폰트·이미지 파일을 추가하지 마십시오. (LCP 2.5초 / design-guide 9) ========================================================================= */ /* ---------- 1. Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0} h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0} ul,ol{margin:0;padding:0;list-style:none} svg{display:block} table{border-collapse:collapse;width:100%} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} a{color:inherit} /* ---------- 2. Design Tokens (디자이너 시안 원본 값) ---------- */ :root{ /* Color — Primary (신뢰/금융) */ --color-primary:#1B4B8F; --color-primary-dark:#143A6E; --color-primary-tint:#E8F0FA; /* Color — Secondary (계산 결과/확인) */ --color-secondary:#0F766E; --color-secondary-tint:#E6F4F2; /* Color — Accent (주의 환기, 소량만) */ --color-accent:#B45309; --color-accent-tint:#FDF3E7; /* Color — Neutral */ --color-text:#1A1D21; --color-text-sub:#5A6270; --color-text-invert:#FFFFFF; --color-bg:#FFFFFF; --color-bg-soft:#F5F7FA; --color-border:#D8DEE7; --color-border-strong:#B7C0CD; /* Color — Semantic */ --color-success:#15803D; --color-success-tint:#E9F5EE; --color-success-text:#115E33; --color-warning:#B45309; --color-warning-tint:#FDF3E7; --color-warning-text:#8A3F07; --color-error:#C02626; --color-error-tint:#FBEBEB; --color-error-text:#9B1C1C; /* Color — Ad placeholder */ --color-ad-bg:#EDF0F4; --color-ad-border:#C7CFDA; --color-ad-text:#5A6270; /* Typography — 시스템 폰트 스택 (웹폰트 0 KB) */ --font-sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard Variable",Pretendard,"Segoe UI","Malgun Gothic","맑은 고딕",Roboto,"Noto Sans KR","Helvetica Neue",Arial,sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"D2Coding","Courier New",monospace; --fs-h1:1.625rem; /* 26px */ --fs-h2:1.25rem; /* 20px */ --fs-h3:1.0625rem; /* 17px */ --fs-body:1rem; /* 16px — 모바일 자동 확대 방지 최소값 */ --fs-sm:0.875rem; /* 14px */ --fs-caption:0.8125rem; /* 13px */ --fs-amount:2rem; /* 32px */ --lh-tight:1.3; --lh-base:1.65; /* Spacing — 4px 배수 */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; /* Radius / Shadow / Layout */ --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-pill:999px; --shadow-card:0 1px 2px rgba(26,29,33,.06),0 2px 10px rgba(26,29,33,.05); --shadow-focus:0 0 0 3px rgba(27,75,143,.35); --maxw:1120px; --tap:44px; /* 최소 터치 타깃 */ /* Ad slot — 높이 사전 예약 (CLS 방어). 절대 제거 금지 */ --ad-h-inline:280px; /* 슬롯 A / B : 반응형 디스플레이 */ --ad-h-side:600px; /* 슬롯 C : 데스크톱 사이드바 300x600 */ --ad-gap:32px; /* 계산 버튼·CTA 와 광고 사이 최소 여백 */ } /* ---------- 3. Base ---------- */ body{ font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-base); color:var(--color-text); background:var(--color-bg); word-break:keep-all; overflow-wrap:break-word; } h1,h2,h3{line-height:var(--lh-tight);font-weight:700;letter-spacing:-.01em} h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)} a{text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:3px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip-link{position:absolute;left:-9999px;top:0;background:var(--color-primary);color:var(--color-text-invert);padding:var(--space-3) var(--space-4);z-index:20} .skip-link:focus{left:0} .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--space-4)} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* 인라인 SVG 아이콘 공통 (이모지 대체 — design-guide 5-7) 구형 OS에서 이모지가 빈 네모(tofu)로 렌더되는 문제를 원천 제거합니다. */ .ic{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ic--sm{width:18px;height:18px} /* ---------- 4. Header / Nav ---------- */ .site-header{border-bottom:1px solid var(--color-border);background:var(--color-bg)} .header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:56px} .brand{display:flex;align-items:center;gap:var(--space-2);font-weight:800;font-size:1.0625rem;letter-spacing:-.02em;color:var(--color-primary-dark);padding:var(--space-2) 0} .brand:hover{text-decoration:none} .brand-mark{flex:0 0 auto} .brand-sub{display:none;font-size:var(--fs-caption);font-weight:500;color:var(--color-text-sub);letter-spacing:0} .nav-check{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .nav-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;color:var(--color-primary-dark)} .nav-check:focus-visible+.nav-btn{outline:3px solid var(--color-primary);outline-offset:2px} .site-nav{display:none;width:100%;order:3;padding-bottom:var(--space-3)} .nav-check:checked~.site-nav{display:block} .nav-list{display:flex;flex-direction:column;gap:var(--space-1)} .nav-list a{display:flex;align-items:center;min-height:var(--tap);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:600;color:var(--color-text)} .nav-list a:hover{background:var(--color-primary-tint);color:var(--color-primary-dark);text-decoration:none} .nav-list a[aria-current="page"]{background:var(--color-primary-tint);color:var(--color-primary-dark)} /* ---------- 5. Hero (허브 전용) ---------- */ .hero{background:linear-gradient(160deg,#F2F7FD 0%,#E8F0FA 55%,#FFFFFF 100%);border-bottom:1px solid var(--color-border)} .hero-inner{padding-block:var(--space-8) var(--space-10)} .hero h1{margin-bottom:var(--space-3)} .hero-lead{color:var(--color-text-sub);margin-bottom:var(--space-5);max-width:44ch} .badge-row{display:flex;flex-wrap:wrap;gap:var(--space-2)} .badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:6px var(--space-3);border-radius:var(--radius-pill);font-size:var(--fs-caption);font-weight:600;background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-text-sub)} .badge--year{background:var(--color-primary-tint);border-color:#C4D8F0;color:var(--color-primary-dark)} /* ---------- 6. Section ---------- */ .section{padding:var(--space-10) 0} .section--soft{background:var(--color-bg-soft);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)} .section-head{margin-bottom:var(--space-6)} .section-head h2{margin-bottom:var(--space-2)} .section-head p{color:var(--color-text-sub);font-size:var(--fs-sm)} /* ---------- 7. Calculator cards (허브) ---------- */ .card-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)} .calc-card{display:block;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-card);min-height:var(--tap)} .calc-card:hover{border-color:var(--color-primary);box-shadow:0 4px 16px rgba(27,75,143,.14);text-decoration:none} .calc-card__top{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)} .calc-card__icon{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--color-primary-tint);font-size:1.375rem;line-height:1} .calc-card__title{font-size:var(--fs-h3);font-weight:700;color:var(--color-primary-dark)} .calc-card__desc{font-size:var(--fs-sm);color:var(--color-text-sub);margin-bottom:var(--space-4)} .calc-card__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap} .tag{display:inline-block;padding:3px 10px;border-radius:var(--radius-pill);font-size:var(--fs-caption);font-weight:600;background:var(--color-secondary-tint);color:#0B5A54} .go{font-size:var(--fs-sm);font-weight:700;color:var(--color-primary)} /* ---------- 8. Feature / Step (허브) ---------- */ .feature-list{display:grid;grid-template-columns:1fr;gap:var(--space-5)} .feature{background:var(--color-bg);border:1px solid var(--color-border);border-left:4px solid var(--color-primary);border-radius:var(--radius-md);padding:var(--space-5)} .feature h3{margin-bottom:var(--space-2);color:var(--color-primary-dark)} .feature p{font-size:var(--fs-sm);color:var(--color-text-sub)} .step-list{display:grid;grid-template-columns:1fr;gap:var(--space-4);counter-reset:step} .step{position:relative;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5) var(--space-5) var(--space-5) 60px} .step::before{counter-increment:step;content:counter(step);position:absolute;left:var(--space-4);top:var(--space-5);width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--color-primary);color:var(--color-text-invert);font-size:var(--fs-sm);font-weight:700} .step h3{margin-bottom:var(--space-1)} .step p{font-size:var(--fs-sm);color:var(--color-text-sub)} /* ---------- 9. Breadcrumb / Page head ---------- */ .crumb{font-size:var(--fs-caption);color:var(--color-text-sub)} .crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1)} .crumb li{display:flex;align-items:center} .crumb li+li::before{content:"›";margin-right:var(--space-1);color:var(--color-border-strong)} .crumb a{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap)} .page-head{padding-bottom:var(--space-4)} .page-head h1{margin-bottom:var(--space-2)} .page-head .lead{font-size:var(--fs-sm);color:var(--color-text-sub)} .page-head .badge{margin-bottom:var(--space-2)} /* ---------- 10. Layout (계산기 페이지 · 데스크톱 2단) ---------- */ .calc-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8);align-items:start;padding-bottom:var(--space-12)} .stack>*+*{margin-top:var(--space-8)} /* ---------- 11. Form ---------- */ .card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-card)} .card__title{font-size:var(--fs-h3);margin-bottom:var(--space-4)} .field+.field{margin-top:var(--space-4)} .field label{display:block;font-size:var(--fs-sm);font-weight:700;margin-bottom:var(--space-2)} .input-wrap{position:relative;display:flex;align-items:center} .input{width:100%;min-height:52px;padding:0 56px 0 var(--space-4);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);font-size:var(--fs-body);background:var(--color-bg);color:var(--color-text);font-variant-numeric:tabular-nums} .input--nounit{padding-right:var(--space-4)} .input::placeholder{color:#98A1AE} .input:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus)} .input:disabled{background:var(--color-bg-soft);color:#8A93A1} select.input{padding-right:var(--space-4);appearance:none;background-image:linear-gradient(45deg,transparent 50%,#5A6270 50%),linear-gradient(135deg,#5A6270 50%,transparent 50%);background-position:calc(100% - 20px) 24px,calc(100% - 14px) 24px;background-size:6px 6px,6px 6px;background-repeat:no-repeat} .unit{position:absolute;right:var(--space-4);font-size:var(--fs-sm);font-weight:600;color:var(--color-text-sub);pointer-events:none} .hint{margin-top:var(--space-2);font-size:var(--fs-caption);color:var(--color-text-sub)} .err{margin-top:var(--space-2);font-size:var(--fs-caption);font-weight:600;color:var(--color-error-text)} .chip-row{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)} .chip{min-height:var(--tap);padding:var(--space-2) var(--space-4);border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);font-size:var(--fs-sm);font-weight:600;color:var(--color-text-sub);background:var(--color-bg)} .chip:hover{border-color:var(--color-primary);color:var(--color-primary-dark);background:var(--color-primary-tint)} .chip[aria-pressed="true"]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-invert)} .form-actions{margin-top:var(--space-5)} /* [광고 금지 구역] .form-actions 의 형제로 광고 슬롯을 두지 마십시오 (오클릭 유도 = 정책 위반) */ .more{margin-top:var(--space-4);border:1px dashed var(--color-border-strong);border-radius:var(--radius-md)} .more>summary{display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap);padding:0 var(--space-4);font-size:var(--fs-sm);font-weight:600;color:var(--color-primary-dark);cursor:pointer;list-style:none} .more>summary::-webkit-details-marker{display:none} .more>summary::before{content:"+";font-size:1.125rem;color:var(--color-primary)} .more[open]>summary::before{content:"−"} .more__body{padding:0 var(--space-4) var(--space-4)} /* ---------- 12. Button ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:52px;min-width:var(--tap);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-size:var(--fs-body);font-weight:700;text-align:center;border:1px solid transparent;transition:background-color .15s ease,border-color .15s ease} .btn:hover{text-decoration:none} .btn--primary{background:var(--color-primary);color:var(--color-text-invert)} .btn--primary:hover{background:var(--color-primary-dark)} .btn--primary:active{background:#0F2C55} .btn--ghost{background:var(--color-bg);color:var(--color-primary-dark);border-color:var(--color-border-strong)} .btn--ghost:hover{background:var(--color-primary-tint);border-color:var(--color-primary)} .btn--sm{min-height:var(--tap);padding:var(--space-2) var(--space-4);font-size:var(--fs-sm)} .btn[disabled],.btn[aria-disabled="true"]{background:#E3E7ED;color:#8A93A1;border-color:#E3E7ED;cursor:not-allowed} .btn--block{width:100%} /* ---------- 13. Result ---------- */ .result{border:2px solid var(--color-secondary);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg)} .result__head{background:var(--color-secondary-tint);padding:var(--space-5);border-bottom:1px solid #CBE3DF} .status{display:inline-flex;align-items:center;gap:6px;padding:4px var(--space-3);border-radius:var(--radius-pill);font-size:var(--fs-caption);font-weight:700;background:var(--color-success-tint);color:var(--color-success-text);border:1px solid #BFE0CC;margin-bottom:var(--space-3)} .status--warn{background:var(--color-warning-tint);color:var(--color-warning-text);border-color:#F0DCC0} .status--neutral{background:var(--color-bg);color:var(--color-text-sub);border-color:var(--color-border)} .result__label{font-size:var(--fs-sm);color:var(--color-text-sub);margin-bottom:var(--space-1)} .result__amount{font-size:var(--fs-amount);font-weight:800;color:var(--color-primary-dark);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15} .result__amount .won{font-size:.55em;font-weight:700;margin-left:4px} .result__amount--empty{color:var(--color-text-sub);font-size:1.25rem;font-weight:700} .result__sub{margin-top:var(--space-2);font-size:var(--fs-sm);color:var(--color-text-sub)} .result__body{padding:var(--space-5);min-height:180px} /* 계산 전에도 높이 유지 → CLS 방어 (design-guide 5-3) */ .result__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5)} .copy-status{font-size:var(--fs-caption);color:var(--color-success-text);font-weight:600} .copy-status--err{color:var(--color-error-text)} /* ---------- 14. Table ---------- */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .table{font-size:var(--fs-sm);min-width:280px} .table caption{text-align:left;font-size:var(--fs-caption);color:var(--color-text-sub);padding-bottom:var(--space-2)} .table th,.table td{padding:var(--space-3) var(--space-2);border-bottom:1px solid var(--color-border);text-align:left;vertical-align:top} .table th{font-weight:600;color:var(--color-text-sub);white-space:nowrap} .table td{text-align:right;font-variant-numeric:tabular-nums;font-weight:600} .table .sub{display:block;font-weight:400;font-size:var(--fs-caption)} .table tr.total th,.table tr.total td{border-bottom:0;border-top:2px solid var(--color-primary-dark);color:var(--color-primary-dark);font-weight:800;padding-top:var(--space-4)} .table td.unknown{color:var(--color-warning-text)} /* ---------- 15. 광고 슬롯 (CLS 방어 핵심) ---------- min-height 를 반드시 유지하십시오. 광고 로드 전/후 높이가 같아야 CLS 0 입니다. 🔴 2026-08-01 — 이 절의 클래스는 **현재 HTML 에 사용처가 0곳입니다. 승인 후 복원 예정입니다.** 미사용 CSS 로 보고 지우지 마십시오. 애드센스 승인 심사(2~3주) 동안 「승인 전 자리표시자」라는 내부 문구가 방문자에게 그대로 보여서, 대표 결정으로 **HTML 마크업만** 제거했습니다. 제거한 14개소에는 `[AD_SLOT_RESTORE_MARKER]` 주석이 남아 있고, 각 주석에 원래 클래스가 적혀 있습니다. 확인 명령 : grep -rc "AD_SLOT_RESTORE_MARKER" --include=*.html app/ 개수 고정 : tools/check-release.ps1 의 ad-slot-restore-marker 규칙 (기대 14개소 / 대상 10파일) 여기 정의를 지우면 복원할 때 되살릴 것이 없어집니다. */ .ad-slot-wrap{margin:var(--ad-gap) 0} .ad-slot-wrap--afterresult{margin-top:var(--space-12)} /* 결과 카드의 복사 버튼과 추가 이격 */ /* D-5. 광고 영역 구분 표시 — 애드센스 정책 + 표시광고법 제3조 제1항 제2호 "광고" 외의 표현(스폰서 링크 제외)을 쓰면 안 됩니다. */ .ad-label{display:block;margin-bottom:var(--space-2);font-size:var(--fs-caption);font-weight:600;color:var(--color-text-sub);letter-spacing:.02em} .ad-slot{display:flex;align-items:center;justify-content:center;text-align:center;background:var(--color-ad-bg);border:1px dashed var(--color-ad-border);border-radius:var(--radius-md);color:var(--color-ad-text);overflow:hidden} .ad-slot--inline{min-height:var(--ad-h-inline)} .ad-slot--side{min-height:var(--ad-h-side);max-width:300px;margin:0 auto} .ad-slot__label{display:block;padding:var(--space-4);font-size:var(--fs-caption);font-weight:600;line-height:1.55} .ad-slot__note{display:block;margin-top:var(--space-1);font-weight:400} .ad-side{display:none} /* 슬롯 C 는 1024px 미만 미노출 */ /* ---------- 16. 법령 인용 블록 ---------- */ .law-notice{font-size:var(--fs-caption);color:var(--color-text-sub);background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4)} .law-checked{display:block;margin-top:var(--space-1);font-weight:600} .law{background:var(--color-primary-tint);border:1px solid #C4D8F0;border-left:5px solid var(--color-primary);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:var(--space-5)} .law+.law{margin-top:var(--space-4)} .law__name{font-size:var(--fs-sm);font-weight:800;color:var(--color-primary-dark);margin-bottom:var(--space-3)} .law blockquote{font-size:var(--fs-sm);line-height:1.8;color:var(--color-text);padding-left:var(--space-3);border-left:2px solid #A9C4E6} .law blockquote p+p{margin-top:var(--space-2)} .law__src{display:block;margin-top:var(--space-3);font-size:var(--fs-caption);color:var(--color-text-sub);font-style:normal} /* 출처 링크 — law-citation-guide 3-1 필수 요소 ③. 본문 문장 안의 링크이므로 44px 터치 타깃을 함께 확보합니다. */ .law__src a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 2px; color:var(--color-primary);font-weight:700;text-decoration:underline;vertical-align:middle} /* 조문 확인일 — law-citation-guide 3-1 필수 요소 ④ */ .law__checked{display:block;margin-top:var(--space-1);font-size:var(--fs-caption);color:var(--color-text-sub)} .law__note{margin-top:var(--space-3);font-size:var(--fs-caption);color:var(--color-text-sub)} /* ---------- 17. 계산식 블록 ---------- */ .formula{background:#12233B;color:#E3EAF4;border-radius:var(--radius-md);padding:var(--space-4);font-family:var(--font-mono);font-size:var(--fs-caption);line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere} .formula b{color:#8FD3C8;font-weight:700} .note-list{font-size:var(--fs-sm);color:var(--color-text-sub)} .note-list li{position:relative;padding-left:var(--space-4);margin-top:var(--space-2)} .note-list li::before{content:"•";position:absolute;left:2px;color:var(--color-primary)} /* ---------- 18. FAQ ---------- */ .faq-list{border-top:1px solid var(--color-border)} .faq-item{border-bottom:1px solid var(--color-border)} .faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--tap);padding:var(--space-4) 0;font-weight:600;cursor:pointer;list-style:none} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";flex:0 0 auto;font-size:1.25rem;font-weight:400;color:var(--color-primary)} .faq-item[open] summary::after{content:"−"} .faq-item p{padding:0 0 var(--space-4);font-size:var(--fs-sm);color:var(--color-text-sub)} .faq-item p+p{padding-top:0} /* ---------- 19. 관련 계산기 ---------- */ .rel-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3)} .rel-card{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap);padding:var(--space-4);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md)} .rel-card:hover{border-color:var(--color-primary);background:var(--color-primary-tint);text-decoration:none} .rel-card__icon{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--color-primary-tint);font-size:1.25rem} .rel-card:hover .rel-card__icon{background:var(--color-bg)} .rel-card__t{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--color-primary-dark)} .rel-card__d{display:block;font-size:var(--fs-caption);color:var(--color-text-sub)} /* ---------- 20. 면책 / 안내 박스 ---------- */ /* D-1. 결과 카드 바로 아래 1줄 (광고 슬롯 A 위) */ .disclaimer-inline{margin-top:var(--space-4);font-size:var(--fs-sm);line-height:1.7;color:var(--color-text);background:var(--color-warning-tint);border:1px solid #F0DCC0;border-radius:var(--radius-md);padding:var(--space-4)} .disclaimer-inline a{color:var(--color-warning-text);font-weight:700;text-decoration:underline} /* 본문 문장 안에 들어가는 링크도 44px 터치 타깃을 확보합니다 (design-guide 8-2). inline-flex + min-height 로 글줄 흐름은 유지하면서 탭 영역만 키웁니다. */ .disclaimer-inline a,.disclaimer-meta a,.law-notice a{ display:inline-flex;align-items:center;min-height:var(--tap);padding:0 2px;vertical-align:middle} /* D-2. 페이지 최하단 전체 면책 블록 */ .disclaimer-block{background:var(--color-warning-tint);border:1px solid #F0DCC0;border-radius:var(--radius-md);padding:var(--space-5);font-size:var(--fs-caption);line-height:1.8;color:var(--color-text)} .disclaimer-block h2{font-size:var(--fs-sm);color:var(--color-warning-text);margin-bottom:var(--space-3)} .disclaimer-block li{position:relative;padding-left:var(--space-4);margin-top:var(--space-2)} .disclaimer-block li::before{content:"·";position:absolute;left:4px;font-weight:700} .disclaimer-meta{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid #F0DCC0;color:var(--color-text-sub)} /* 요율 미확정 등 안내 박스 */ .callout{border-radius:var(--radius-md);padding:var(--space-4);font-size:var(--fs-sm);line-height:1.7} .callout--warn{background:var(--color-warning-tint);border:1px solid #F0DCC0;color:var(--color-warning-text)} .callout--info{background:var(--color-primary-tint);border:1px solid #C4D8F0;color:var(--color-primary-dark)} .callout--error{background:var(--color-error-tint);border:1px solid #F0C9C9;color:var(--color-error-text)} .callout h3{font-size:var(--fs-sm);margin-bottom:var(--space-2)} .callout+.callout{margin-top:var(--space-3)} /* ---------- 21. 법정 페이지 본문 (prose) ---------- */ .prose{font-size:var(--fs-sm);line-height:1.85;color:var(--color-text);max-width:76ch} .prose h2{margin:var(--space-10) 0 var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border);color:var(--color-primary-dark)} .prose h2:first-child{margin-top:0} .prose h3{margin:var(--space-6) 0 var(--space-2);color:var(--color-primary-dark)} .prose p{margin-bottom:var(--space-3)} .prose ol,.prose ul{margin:0 0 var(--space-3) var(--space-5)} .prose ol{list-style:decimal} .prose ul{list-style:disc} .prose li{margin-bottom:var(--space-1)} .prose strong{font-weight:700} .prose table{margin-bottom:var(--space-4);font-size:var(--fs-caption)} .prose th,.prose td{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);text-align:left;vertical-align:top} .prose th{background:var(--color-bg-soft);font-weight:700;color:var(--color-text)} .prose a{color:var(--color-primary);text-decoration:underline} .prose .ph{background:var(--color-warning-tint);color:var(--color-warning-text);font-weight:700;padding:1px 6px;border-radius:var(--radius-sm)} .toc{background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-8)} .toc h2{font-size:var(--fs-sm);margin:0 0 var(--space-2);border:0;padding:0} .toc li a{display:inline-flex;align-items:center;min-height:var(--tap);font-size:var(--fs-sm);color:var(--color-primary);font-weight:600} /* ---------- 22. Footer ---------- */ .site-footer{background:#12233B;color:#C9D4E3;margin-top:var(--space-12);padding:var(--space-10) 0 var(--space-8);font-size:var(--fs-sm)} .site-footer h2,.site-footer h3{color:#FFFFFF;font-size:var(--fs-sm);margin-bottom:var(--space-3)} .footer-grid{display:grid;grid-template-columns:1fr;gap:var(--space-8)} .footer-intro{color:#A8B6C9;font-size:var(--fs-caption);max-width:52ch} /* v1.5 신설. design/style.css 391행 `.footer-links-title` 와 같은 값입니다. v1.4까지 app/ 은 이 자리를 인라인 `style="margin-top:24px"` 로 처리하고 있었고 design/ 은 클래스를 쓰고 있어 두 트리가 어긋나 있었습니다. --space-6 == 24px 이므로 렌더 결과는 동일합니다. ※ design-guide 0-2-8절 6번 상세의 순서표에는 이 1줄이 빠져 있습니다(추가 대상이 .footer-contact 만으로 적혀 있음). app/ 에는 .footer-links-title 규칙이 원래 0건이라, 넣지 않으면 「문의」 제목의 위 여백이 사라집니다. */ .footer-links-title{margin-top:var(--space-6)} .footer-links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)} .footer-links a{display:inline-flex;align-items:center;min-height:var(--tap);color:#E3EAF4;font-weight:600} /* v1.5 신설. design/style.css 400행과 동일 (LEGAL-10 제5부로 푸터 사업자 정보 블록을 제거하고 「문의」 1줄만 남겼습니다. 상세는 design-guide 5-12절). */ .footer-contact{font-size:var(--fs-caption);line-height:1.9;color:#A8B6C9} /* [삭제] .biz-info 4줄은 2026-07-29 동기화에서 제거했습니다. app/ 9개 페이지 어디에도 `class="biz-info"` 마크업이 남아 있지 않음을 확인한 뒤 지웠습니다 (design-guide 0-2-8절 6번 상세 5단계 — 마크업보다 먼저 지우면 중간 상태에서 푸터가 깨집니다). 되살릴 일이 생기면 design/style.css 396~399행에 원본이 보존되어 있습니다. */ .footer-note{margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid #26405F;font-size:var(--fs-caption);color:#A8B6C9} .footer-note p+p{margin-top:var(--space-2)} /* ---------- 23. CTA (허브) ---------- */ .cta{background:linear-gradient(150deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--color-text-invert);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-5);text-align:center} .cta h2{margin-bottom:var(--space-3)} .cta p{color:#D6E3F5;font-size:var(--fs-sm);margin-bottom:var(--space-6)} .cta .btn--ghost{background:var(--color-bg);border-color:var(--color-bg)} /* ---------- 24. 테스트 러너 (test.html 전용) ---------- */ .test-row{display:flex;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--color-border);font-size:var(--fs-sm);align-items:flex-start} .test-row__badge{flex:0 0 auto;min-width:52px;text-align:center;padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--fs-caption);font-weight:700} .test-pass .test-row__badge{background:var(--color-success-tint);color:var(--color-success-text)} .test-fail .test-row__badge{background:var(--color-error-tint);color:var(--color-error-text)} .test-row__detail{display:block;font-size:var(--fs-caption);color:var(--color-text-sub);font-family:var(--font-mono)} /* ========================================================================= Breakpoints — 768px(태블릿) / 1024px(데스크톱) ========================================================================= */ @media (min-width:768px){ :root{--fs-h1:2.125rem;--fs-h2:1.5rem;--fs-h3:1.125rem;--fs-amount:2.75rem} .wrap{padding:0 var(--space-6)} .nav-btn{display:none} .site-nav{display:block;width:auto;order:0;padding-bottom:0} .nav-list{flex-direction:row;gap:var(--space-1)} .brand-sub{display:inline} .card{padding:var(--space-6)} .hero-inner{padding-block:var(--space-16)} .section{padding:var(--space-16) 0} .card-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-5)} .feature-list,.step-list{grid-template-columns:repeat(3,1fr)} .rel-grid{grid-template-columns:repeat(2,1fr)} .cta{padding:var(--space-12)} .footer-grid{grid-template-columns:1fr 1.2fr} /* v1.5: 링크 열이 넓은 쪽. 좁히면 '문의하기' 가 혼자 줄바꿈됩니다 */ } @media (min-width:1024px){ .card-grid{grid-template-columns:repeat(4,1fr)} /* 🔴 2026-08-01 — 종전에는 `.calc-layout{grid-template-columns:minmax(0,1fr) 300px}` 였습니다. 슬롯 C(.ad-side)를 제거하면서 그대로 두면 자식이 1개인데 열은 2개라 **데스크톱에서 오른쪽에 300px 빈 열**이 남습니다. 그렇다고 1열로 고정해 버리면 승인 후