/* ========================================================= 세무법인봉정 성수지점 웹블로그 — 공통 스타일 원애드아이 웹블로그 표준 템플릿 v1 ========================================================= */ /* 브랜드 색은 지급받은 배너에서 추출했습니다 — 주색 #3C3A79 */ :root{ --ink:#191826; --ink-2:#4C4A5C; --ink-3:#7E7C90; --line:#E4E3EC; --line-2:#CFCDDB; --ground:#FFFFFF; --ground-2:#F7F6FA; --brand:#3C3A79; --brand-2:#2C2A5C; --brand-soft:#EDECF6; --accent:#B4884A; --w:1120px; --w-read:720px; --r:4px; /* 본문 폰트는 Pretendard 고정 (원애드아이 사이트 제작 표준). 웹폰트는 각 HTML 에서 jsDelivr 동적 서브셋으로 불러온다. 스택에 이름만 적어두면 미설치 방문자에게 조용히 폴백되므로 로딩이 반드시 있어야 한다. */ --sans:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont, system-ui,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕", "Noto Sans KR",sans-serif; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.75; word-break:keep-all; overflow-wrap:break-word; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:var(--brand-2)} a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible{ outline:2px solid var(--brand-2); outline-offset:2px; } .wrap{max-width:var(--w);margin:0 auto;padding:0 20px} .read{max-width:var(--w-read)} .skip{ position:absolute;left:-9999px; } .skip:focus{ left:12px;top:12px;z-index:100; background:var(--brand);color:#fff;padding:10px 16px;border-radius:var(--r); } /* ---------- 헤더 ---------- */ .site-head{ border-bottom:1px solid var(--line); background:var(--ground); position:sticky;top:0;z-index:50; } .site-head__in{ display:flex;align-items:center;justify-content:space-between; gap:20px;height:66px; } .brand{ display:flex;align-items:center;gap:10px; text-decoration:none;color:var(--ink);min-width:0; } .brand img{width:158px;height:33px;flex:none} .brand span{ font-size:14px;font-weight:600;color:var(--brand); padding-left:10px;border-left:1px solid var(--line-2); white-space:nowrap; } @media (max-width:420px){ .brand img{width:132px;height:28px} .brand span{font-size:13px;padding-left:8px} } .gnb{display:flex;align-items:center;gap:22px} .gnb a{ font-size:15px;color:var(--ink-2);text-decoration:none; padding:6px 0;white-space:nowrap; } .gnb a:hover,.gnb a[aria-current="page"]{color:var(--brand);font-weight:600} /* ⚠️ 카스케이드 주의 — `.gnb a`(0-1-1)가 `.btn`(0-1-0)보다 우선순위가 높아 버튼 글자색이 메뉴 색으로 덮인다. 같은 특정도 이상으로 다시 지정해야 한다. */ .gnb a.btn, .gnb a.btn:hover, .gnb a.btn[aria-current="page"]{ color:#fff; font-weight:600; padding:9px 20px; font-size:15px; background:var(--brand); border-color:var(--brand); } .gnb a.btn:hover{background:var(--brand-2);border-color:var(--brand-2)} .btn{ display:inline-flex;align-items:center;justify-content:center; gap:6px;padding:10px 18px;border-radius:var(--r); font-size:15px;font-weight:600;text-decoration:none; border:1px solid var(--brand);background:var(--brand);color:#fff; cursor:pointer; } .btn:hover{background:var(--brand-2);border-color:var(--brand-2)} .btn--ghost{background:transparent;color:var(--brand);} .btn--ghost:hover{background:var(--brand-soft)} .btn--lg{padding:14px 26px;font-size:16px} .nav-toggle{display:none;background:none;border:1px solid var(--line-2);border-radius:var(--r);padding:8px 11px;font-size:14px} @media (max-width:900px){ .nav-toggle{display:block} .gnb{ display:none;position:absolute;left:0;right:0;top:66px; flex-direction:column;align-items:stretch;gap:0; background:var(--ground);border-bottom:1px solid var(--line);padding:8px 20px 16px; } .gnb[data-open="true"]{display:flex} .gnb a{padding:12px 0;border-bottom:1px solid var(--line)} .gnb .btn{margin-top:12px} } /* ---------- 공통 섹션 ---------- */ .sec{padding:56px 0} .sec--tint{background:var(--ground-2)} .sec__head{margin:0 0 26px} .sec__head h2{ margin:0 0 6px;font-size:24px;font-weight:700;letter-spacing:-.02em; text-wrap:balance; } .sec__head p{margin:0;color:var(--ink-3);font-size:15px} /* ---------- 히어로 (배경 이미지 + 텍스트 오버레이) ---------- 현재 이미지: /assets/img/hero.jpg — 지급받은 봉정배너3.png (2400×1000) 를 JPEG 82로 변환 (263KB) 배너1 → 배너2 → 배너3 순으로 인물이 작아짐. 배너3의 머리 최상단 = 이미지 40.5% 지점 교체 규격 데스크톱 2400 × 1000 px (2.4:1) · 300KB 이하 모바일 별도 파일 없이 같은 이미지를 우측 기준으로 크롭해 씀 인물이 오른쪽에 있으므로 텍스트는 왼쪽 45% 안에서 끝난다. 이미지가 없어도 브랜드 인디고 단색으로 떨어지므로 레이아웃은 깨지지 않는다. ------------------------------------------------------------ */ .hero{ position:relative; display:flex; align-items:center; /* 배너3 기준. 인물 머리카락 최상단이 이미지의 40.5% 지점이라 위쪽 여백이 넉넉하다. 하단 기준으로 고정해 인물 아래는 자르지 않고, 위쪽 빈 하늘만 잘라낸다. 31vw 로 두면 어느 폭에서도 상단 잘림이 34% 이하 → 머리(40.5%)가 항상 살아있다. */ min-height:clamp(460px, 31vw, 700px); padding:48px 0; color:#fff; background-color:#3C3A79; /* 이미지 없을 때 폴백 = 배너 주색 */ background-image: linear-gradient(90deg, rgba(24,22,58,.58) 0%, rgba(24,22,58,.34) 30%, rgba(24,22,58,.10) 46%, rgba(24,22,58,0) 60%), url("/assets/img/hero.jpg"); background-size:cover; background-position:center bottom; background-repeat:no-repeat; } .hero .wrap{width:100%} .hero h1{ margin:0 0 18px;font-size:38px;line-height:1.38;font-weight:700; letter-spacing:-.028em;color:#fff; max-width:26ch; text-shadow:0 1px 2px rgba(0,0,0,.28); } /* 헤드라인 강조 — 국세청 경력처럼 신뢰의 근거가 되는 구절에만 쓴다. 인디고 배경 위에서 흰색 다음으로 잘 읽히는 따뜻한 금색. 한 문장에 한 번만. */ .hero h1 .hl{ font-style:normal; font-weight:800; font-size:1.09em; color:#F3C97C; text-shadow:0 1px 3px rgba(0,0,0,.42); } .hero p{ margin:0 0 28px;font-size:17px;max-width:48ch; color:rgba(255,255,255,.90); text-shadow:0 1px 2px rgba(0,0,0,.26); } .hero__cta{display:flex;flex-wrap:wrap;gap:10px} .hero .btn{border-color:#fff;background:#fff;color:var(--brand)} .hero .btn:hover{background:#EAF0F6;border-color:#EAF0F6;color:var(--brand)} .hero .btn--ghost{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.62); color:#fff; } .hero .btn--ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff} @media (max-width:900px){ .hero{ /* 세로 화면에서는 높이가 기준이 되어 이미지 세로는 다 보이고 가로가 크게 잘린다. 인물이 있는 우측(가로 52~85%)을 기준으로 잡고, 텍스트가 인물 위에 얹히므로 오버레이를 세로 방향으로 더 진하게 준다. */ min-height:400px; padding:52px 0; background-position:72% bottom; background-image: linear-gradient(180deg, rgba(24,22,58,.62) 0%, rgba(24,22,58,.78) 55%, rgba(24,22,58,.86) 100%), url("/assets/img/hero.jpg"); } .hero h1{font-size:30px;max-width:none} } @media (max-width:640px){ .hero{min-height:360px;padding:46px 0} .hero h1{font-size:26px} .hero p{font-size:16px} } /* ---------- 카드 그리드 ---------- */ .grid{display:grid;gap:18px} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--2{grid-template-columns:repeat(2,1fr)} @media (max-width:900px){ .grid--3{grid-template-columns:repeat(2,1fr)} } @media (max-width:620px){ .grid--3,.grid--2{grid-template-columns:1fr} } .card{ display:flex;flex-direction:column;gap:8px; border:1px solid var(--line);border-radius:var(--r); padding:20px;background:#fff;text-decoration:none;color:inherit; } .card:hover{border-color:var(--brand);box-shadow:0 2px 10px rgba(60,58,121,.10)} .card__cat{font-size:12px;font-weight:600;color:var(--brand);letter-spacing:.02em} .card__title{margin:0;font-size:17px;font-weight:600;line-height:1.5;letter-spacing:-.01em} .card__desc{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.65} .card__meta{margin-top:auto;padding-top:8px;font-size:12.5px;color:var(--ink-3)} /* ---------- 목록형 ---------- */ .list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .list li{border-bottom:1px solid var(--line)} .list a{ display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px; padding:18px 2px;text-decoration:none;color:inherit; } .list a:hover .list__title{color:var(--brand)} .list__num{ font-size:13px;color:var(--ink-3);min-width:22px; font-variant-numeric:tabular-nums; } .list__title{font-size:16.5px;font-weight:600;line-height:1.55;flex:1;min-width:0} .list__date{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums} /* ---------- 브레드크럼 ---------- */ .crumb{padding:16px 0;font-size:13px;color:var(--ink-3)} .crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0} .crumb li::after{content:"›";margin-left:6px;color:var(--line-2)} .crumb li:last-child::after{content:""} .crumb a{color:var(--ink-3);text-decoration:none} .crumb a:hover{color:var(--brand)} /* ---------- 글 본문 ---------- */ .article{padding:8px 0 56px} .article__head{padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:30px} .article__head h1{ margin:0 0 14px;font-size:29px;line-height:1.42;font-weight:700; letter-spacing:-.025em;text-wrap:balance; } .article__meta{ display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px; font-size:13.5px;color:var(--ink-3); } .article__meta a{color:var(--ink-2);text-decoration:none;font-weight:600} .article__meta time{font-variant-numeric:tabular-nums} @media (max-width:640px){ .article__head h1{font-size:24px} } .prose{font-size:17px;line-height:1.85} .prose > * + *{margin-top:1.1em} .prose h2{ margin:2.2em 0 .7em;font-size:22px;font-weight:700;line-height:1.45; letter-spacing:-.02em;padding-top:.6em;border-top:1px solid var(--line); text-wrap:balance; } .prose h2:first-child{margin-top:0;border-top:none;padding-top:0} .prose h3{margin:1.8em 0 .5em;font-size:18px;font-weight:700;letter-spacing:-.01em} .prose p{margin:0} .prose ul,.prose ol{margin:0;padding-left:1.3em} .prose li + li{margin-top:.4em} .prose strong{font-weight:700} .lead{ font-size:17.5px;color:var(--ink-2); background:var(--ground-2);border-left:3px solid var(--brand); padding:18px 20px;border-radius:0 var(--r) var(--r) 0; } .lead p{margin:0} .lead p + p{margin-top:.6em} .def{ background:var(--brand-soft);border:1px solid #D5E1EC; border-radius:var(--r);padding:16px 18px;font-weight:600;color:var(--brand); } .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .prose table{ border-collapse:collapse;width:100%;min-width:460px; font-size:15.5px;line-height:1.6; } .prose th,.prose td{ border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top; } .prose th{background:var(--ground-2);font-weight:700;white-space:nowrap} .steps{list-style:none;padding:0;counter-reset:step} .steps li{ counter-increment:step;position:relative; padding:14px 16px 14px 52px;border:1px solid var(--line);border-radius:var(--r); } .steps li + li{margin-top:10px} .steps li::before{ content:counter(step);position:absolute;left:16px;top:14px; width:24px;height:24px;border-radius:50%; background:var(--brand);color:#fff; font-size:13px;font-weight:700; display:flex;align-items:center;justify-content:center; } .steps b{display:block;margin-bottom:2px} .note{ border:1px solid var(--line-2);border-radius:var(--r); padding:16px 18px;background:#fff;font-size:15.5px;color:var(--ink-2); } .note b{color:var(--ink)} /* 검수 대기 토큰 — 배포 전 전부 치환 */ .chk{ background:#FFF4E0;border-bottom:1px dashed #C9962F; padding:0 3px;font-weight:600;color:#7A5A15; } /* ---------- FAQ ---------- */ .faq{margin-top:1.1em} .faq details{ border:1px solid var(--line);border-radius:var(--r);background:#fff; } .faq details + details{margin-top:10px} .faq summary{ cursor:pointer;padding:15px 44px 15px 17px;position:relative; font-size:16px;font-weight:600;line-height:1.55;list-style:none; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"+";position:absolute;right:17px;top:14px; font-size:19px;color:var(--ink-3);font-weight:400; } .faq details[open] summary::after{content:"−"} .faq .faq__a{padding:0 17px 16px;font-size:16px;color:var(--ink-2);line-height:1.8} .faq .faq__a > * + *{margin-top:.7em} /* ---------- 글 하단 CTA ---------- */ .cta{ margin-top:44px;border:1px solid var(--brand);border-radius:var(--r); padding:28px;background:var(--brand-soft); } .cta h2{margin:0 0 8px;font-size:20px;font-weight:700;letter-spacing:-.02em} .cta p{margin:0 0 18px;color:var(--ink-2);font-size:15.5px} .cta__btns{display:flex;flex-wrap:wrap;gap:10px} /* ---------- 작성자 박스 ---------- */ .author{ margin-top:34px;display:flex;gap:18px;align-items:flex-start; border:1px solid var(--line);border-radius:var(--r);padding:20px; } .author img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;background:var(--ground-2)} .author__body{min-width:0} .author__body b{display:block;font-size:16px;margin-bottom:3px} .author__body p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.7} .author__body a{font-size:14px} @media (max-width:520px){ .author{flex-direction:column} } /* ---------- 면책 ---------- */ .disclaimer{ margin-top:28px;padding:16px 18px;border:1px dashed var(--line-2); border-radius:var(--r);font-size:13.5px;color:var(--ink-3);line-height:1.7; } /* ---------- 태그 ---------- */ .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:26px} .tags span{ font-size:13px;color:var(--ink-3); border:1px solid var(--line);border-radius:999px;padding:4px 11px; } /* ---------- 상담 폼 ---------- */ .form{display:grid;gap:20px;max-width:100%} .field{display:flex;flex-direction:column;gap:8px;border:0;padding:0;margin:0;min-width:0} .field > label, .field__label, .field legend{ font-size:14.5px;font-weight:600;color:var(--ink);padding:0; } .req{color:#D23B3B;font-size:9px;vertical-align:middle;margin-left:2px;font-weight:400} .field input[type=text], .field input[type=tel], .field input[type=email], .field select, .field textarea{ width:100%;padding:13px 14px;font-size:15.5px;font-family:inherit;color:var(--ink); border:1px solid var(--line-2);border-radius:var(--r);background:#fff; } .field textarea{min-height:130px;resize:vertical} /* 연락처 3칸 */ .phone{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:8px} .phone span{color:var(--ink-3)} .phone input{text-align:center} /* 상담분야 체크박스 */ .checks{gap:12px} .check{display:flex;align-items:center;gap:11px;cursor:pointer;font-size:15.5px;color:var(--ink)} .check input{width:19px;height:19px;flex:none;accent-color:var(--brand);cursor:pointer} .consent{display:flex;gap:10px;align-items:center;font-size:14.5px;color:var(--ink-2);cursor:pointer} .consent input{width:19px;height:19px;flex:none;accent-color:var(--brand);cursor:pointer} .consent a{font-size:13.5px;color:var(--ink-3);margin-left:4px} .btn--block{width:100%;padding:16px;font-size:16.5px} .form__msg{font-size:14.5px;min-height:1.4em;margin:0} .form__msg[data-state="ok"]{color:#1B6B3A;font-weight:600} .form__msg[data-state="err"]{color:#B3261E;font-weight:600} /* ---------- 푸터 ---------- */ .site-foot{ border-top:1px solid var(--line);background:var(--ground-2); padding:38px 0;margin-top:60px;font-size:14px;color:var(--ink-2); } .site-foot__grid{display:flex;flex-wrap:wrap;gap:28px 48px;justify-content:space-between} .site-foot b{display:block;color:var(--ink);font-size:15px;margin-bottom:10px} /* 푸터 상호 = 회색 로고 이미지 + 지점명 텍스트. 상호 전체는 img alt 와 Organization JSON-LD 에 텍스트로 남는다. */ .site-foot__logo{ display:flex;align-items:flex-end;gap:18px; margin:0 0 34px; } .site-foot__logo img{width:210px;height:43px;flex:none} .site-foot__logo span{ font-size:15px;font-weight:600;color:var(--ink-2); padding-left:18px;border-left:1px solid var(--line-2); line-height:1.5;white-space:nowrap; } @media (max-width:420px){ .site-foot__logo img{width:172px;height:35px} .site-foot__logo span{font-size:14px} } .site-foot__biz{flex:1 1 460px;min-width:0} /* 사업자 정보 — 표준 6-3 NAP. 반드시 텍스트로 둔다 (이미지로 넣으면 못 읽는다) */ .site-foot address{ font-style:normal; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:5px 28px; line-height:1.65; } /* 라벨 폭을 고정해 좌우 두 열의 구분선이 한 줄로 맞도록 한다. 106px = 가장 긴 라벨(사업자등록번호)이 줄바꿈 없이 들어가는 폭. */ .site-foot address span{ display:grid; grid-template-columns:106px 1fr; align-items:start; gap:12px; min-width:0; } .site-foot address i{ font-style:normal; color:var(--ink-3);font-size:13px;line-height:1.65; position:relative;padding-right:12px; white-space:nowrap; } .site-foot address i::after{ content:"";position:absolute;right:0;top:.4em;bottom:.4em; width:1px;background:var(--line-2); } .site-foot address em{font-style:normal;color:var(--ink-3)} .site-foot address a{color:var(--ink-2);text-decoration:none} .site-foot address a:hover{color:var(--brand);text-decoration:underline} @media (max-width:520px){ .site-foot address{grid-template-columns:1fr} .site-foot address span{grid-template-columns:92px 1fr;gap:10px} .site-foot address i{font-size:12.5px;padding-right:10px} } .site-foot nav{display:flex;flex-wrap:wrap;gap:14px} .site-foot nav a{color:var(--ink-2);text-decoration:none} .site-foot nav a:hover{color:var(--brand)} .site-foot__copy{ margin-top:24px;padding-top:18px;border-top:1px solid var(--line); font-size:13px;color:var(--ink-3);line-height:1.8; } .site-foot__copy span{display:inline-block;margin-top:2px;letter-spacing:.01em} @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ---------- 상담 페이지 (폼 단독, 가운데 정렬) ---------- */ .article__head--center{ text-align:center;border-bottom:none; padding-bottom:0;margin-bottom:14px; } .contact-grid{max-width:560px;margin:0 auto} .contact-note{ margin:0 0 28px;font-size:15px;color:var(--ink-2); text-align:center;line-height:1.7; } .contact-note a{font-weight:600;white-space:nowrap} .contact-foot{max-width:560px;margin:36px auto 0;text-align:center} /* ---------- 작성자 페이지 ---------- */ .author--big{ align-items:center;gap:24px;padding:24px; background:var(--ground-2);border-color:var(--line); } .author--big img{width:120px;height:120px} .author--big .author__body b{font-size:23px;letter-spacing:-.02em;margin-bottom:6px} .author--big .author__body b span{font-size:16px;font-weight:600;color:var(--ink-3);margin-left:6px} .author--big .author__body p{font-size:15px} @media (max-width:520px){ .author--big{flex-direction:column;text-align:left;align-items:flex-start} .author--big img{width:96px;height:96px} } /* ---------- 표 안의 th 라벨형 (지점 정보 등) ---------- */ .prose table th[scope], .prose tbody th{white-space:nowrap;width:1%;background:var(--ground-2)} /* ---------- 퀵 메뉴 (메인 우측 플로팅 / 모바일 하단 고정) ---------- 헤더(z-index:50)보다 아래에 둔다 — 모바일 메뉴가 열렸을 때 가리지 않도록. */ .quick{ position:fixed;right:22px;top:50%;transform:translateY(-50%); z-index:45; display:flex;flex-direction:column;align-items:center;gap:10px; } /* 원형 버튼 — 지름 74px 안에 아이콘 + 두 줄 라벨 (2026-08-24) */ .quick__item{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:5px; width:85px;height:85px;padding:0; border:1px solid var(--line-2);border-radius:50%; background:var(--ground);color:var(--ink-2); text-decoration:none; font-size:13px;font-weight:600;line-height:1.3;letter-spacing:-.03em; text-align:center; box-shadow:0 3px 12px rgba(25,24,38,.12); transition:background .15s,color .15s,border-color .15s,transform .15s; } .quick__item:hover{transform:translateY(-2px)} .quick__item:hover{background:var(--brand-soft);color:var(--brand);border-color:var(--brand)} .quick__item--main{background:var(--brand);border-color:var(--brand);color:#fff} .quick__item--main:hover{background:var(--brand-2);border-color:var(--brand-2);color:#fff} .quick__item svg{display:block;flex:none} @media (max-width:900px){ .quick{ right:0;left:0;top:auto;bottom:0;transform:none; width:auto;flex-direction:row;gap:0; border-top:1px solid var(--line); box-shadow:0 -2px 12px rgba(25,24,38,.10); } .quick__item{ flex:1;flex-direction:row;gap:8px; width:auto;height:auto;padding:14px 6px; border:0;border-radius:0;box-shadow:none; font-size:15px;letter-spacing:-.02em; } .quick__item:hover{transform:none} .quick__item + .quick__item{border-left:1px solid var(--line)} /* 하단 바가 푸터 마지막 줄을 가리지 않도록 */ body.has-quick{padding-bottom:58px} body.has-quick{padding-bottom:calc(58px + env(safe-area-inset-bottom))} .quick__item{padding-bottom:calc(14px + env(safe-area-inset-bottom))} .quick__item br{display:none} } /* ---------- 간편문의 (cta 자리 대체) ---------- 성함·연락처는 한 줄, 동의 체크는 아랫줄. 좁아지면 세로로 쌓인다. */ /* 간편문의는 박스(테두리·배경) 없이 내용만 — 2026-08-24 */ .cta--form{border:0;background:transparent;padding:0} /* 제목은 홈의 다른 섹션 제목(24px)보다 크게 — 이 자리가 전환 지점이라 */ .cta--form h2{font-size:27px;line-height:1.35;margin-bottom:10px;text-wrap:balance} .cta--form p{margin-bottom:22px;font-size:16.5px} /* 글 본문 안에서는 위쪽 구분선으로만 떼어 놓는다 */ .article .cta--form{border-top:1px solid var(--line);padding-top:30px} .qform{display:grid;gap:14px} .qform__row{ display:grid; grid-template-columns:1fr 1.15fr auto; gap:12px;align-items:end; } .qform .field input{background:#fff} .qform .field input::placeholder{color:var(--ink-3);opacity:.7} .qform__submit{white-space:nowrap;padding-top:13px;padding-bottom:13px} .qform .consent{align-items:flex-start;line-height:1.6} .qform .consent input{margin-top:2px} .qform .form__msg{min-height:0} .qform .form__msg:empty{display:none} .cta__more{ margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line-2); font-size:14.5px;color:var(--ink-2); } .cta__more a{font-weight:600;white-space:nowrap} @media (max-width:760px){ .qform__row{grid-template-columns:1fr;align-items:stretch} .qform__submit{width:100%;padding:15px;font-size:16px} } @media (max-width:520px){ .cta--form h2{font-size:22px} .cta--form p{font-size:15.5px} .cta__more{line-height:1.9} } /* 글 본문 안에서는 본문 h2(22px)와 어울리게 한 단계 낮춘다 */ .article .cta--form h2{font-size:23px} /* 푸터 '바로가기' — 본 사이트로 나가는 링크 (2026-08-24) */ .site-foot__main{color:inherit;text-decoration:none} .site-foot__main:hover{color:var(--brand);text-decoration:underline} .site-foot__main::after{content:" ↗";font-weight:400;color:var(--ink-3)} /* 세법 수치의 출처·시점 표기 (표준 5-8) — 2026-08-24 개정되면 class="src" 로 검색해 해당 문장을 찾는다. */ .src{ display:inline-block;margin-left:4px; font-size:12.5px;color:var(--ink-3);letter-spacing:-.01em; white-space:nowrap; } .prose td .src,.prose th .src{display:block;margin:3px 0 0;white-space:normal} @media (max-width:520px){ .src{white-space:normal} } /* 허니팟 — 봇 걸러내기용 칸. 화면·스크린리더 양쪽에서 감춥니다 */ .hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} /* ---------- 전문보기 팝업 (개인정보처리방침) — 2026-08-24 ---------- 내용은 JS 가 /privacy/ 를 불러와 채웁니다. 본문을 두 벌 두지 않기 위함. dialog 는 닫혀 있을 때 display:none 이라 [open] 에만 flex 를 겁니다. 디자인은 카드형(시안 D, 사용자 선택) — 둥근 모서리 + 제목 앞 브랜드 막대 + 원형 닫기. */ .modal{ width:min(760px,calc(100vw - 28px)); max-width:none; max-height:min(82vh,760px); padding:0; border:none; border-radius:16px; background:var(--ground); color:var(--ink); overflow:hidden; box-shadow:0 30px 80px rgba(25,24,38,.32); } .modal[open]{display:flex;flex-direction:column} .modal::backdrop{background:rgba(25,24,38,.55)} .modal__head{ flex:none; display:flex;align-items:center;justify-content:space-between;gap:12px; padding:20px 24px 16px; border-bottom:1px solid var(--line); background:var(--ground); } .modal__title{ display:flex;align-items:center;gap:9px; margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em; } .modal__title::before{ content:"";flex:none; width:6px;height:20px;border-radius:3px;background:var(--brand); } .modal__x{ flex:none;width:36px;height:36px;padding:0;line-height:1; border:none;border-radius:50%; background:var(--ground-2);color:var(--ink-2); font-size:19px;font-family:inherit;cursor:pointer; } .modal__x:hover{background:var(--brand-soft);color:var(--brand-2)} .modal__body{ flex:1 1 auto;min-height:0; padding:22px 24px 30px; overflow-y:auto;-webkit-overflow-scrolling:touch; } /* 팝업 안에서는 본문보다 한 단계 작게 — 좁은 폭에 줄이 너무 길어지지 않게 */ .modal__body .prose{font-size:15.5px;line-height:1.8;max-width:none} .modal__body .prose h2{font-size:18px;margin-top:1.9em} .modal__body .prose table{min-width:0} .modal__msg{margin:0;color:var(--ink-3);font-size:15px} /* 팝업이 열려 있는 동안 뒤 화면이 따라 움직이지 않게 */ html:has(dialog.modal[open]){overflow:hidden} /* ---------- 신청 완료 팝업 — 2026-08-27 ---------- 상세폼·간편문의 둘 다 접수되면 이 팝업을 띄웁니다. 전문보기 팝업(.modal)의 뼈대를 그대로 쓰고 폭과 정렬만 다르게 합니다. */ .modal--done{width:min(400px,calc(100vw - 28px))} .modal--done .modal__body{padding:30px 26px 26px;text-align:center} .done__icon{ width:56px;height:56px;margin:0 auto 18px; display:flex;align-items:center;justify-content:center; border-radius:50%; background:var(--brand-soft);color:var(--brand); font-size:28px;line-height:1; } .done__title{margin:0 0 9px;font-size:19px;font-weight:700;letter-spacing:-.02em} .done__desc{margin:0;color:var(--ink-2);font-size:15px;line-height:1.75} .done__btn{margin-top:24px;width:100%} @media (max-width:600px){ .modal{width:calc(100vw - 20px);max-height:86vh;border-radius:14px} .modal__head{padding:17px 18px 14px} .modal__body{padding:18px 18px 24px} .modal__title{font-size:17px} } /* 개인정보처리방침 제6조 — 이전받는 자별 표 앞의 소제목. 표 바로 뒤에 붙으면 앞 표와 붙어 보여 어느 표의 제목인지 헷갈린다 */ .prose p.xfer{ margin-top:1.9em; margin-bottom:.5em }