/* ========================================================= 팽팽클리닉 웹블로그 — 공통 스타일 원애드아이 웹블로그 표준 템플릿 v1 ========================================================= */ /* 브랜드 색은 지급받은 배너에서 추출했습니다 — 주색 #3C3A79 */ /* 🎨 팽팽클리닉 팔레트 (2026-09-08 시안) 본 홈페이지는 핫핑크·버건디의 프로모션 톤이지만, 웹블로그는 **정보를 찾는 사람**이 오는 곳이라 미니멀로 간다. 브랜드가 끊기지 않게 로고의 남색을 기본으로 쓰고, 핑크는 CTA·강조에만 포인트로 넣는다. */ :root{ --ink:#14161F; --ink-2:#4A4E5C; --ink-3:#8A8E9C; --line:#E7E8ED; --line-2:#D2D4DC; --ground:#FFFFFF; --ground-2:#F7F7F9; --brand:#00416F; /* 로고 남색 (실측) */ --brand-2:#00304F; --brand-soft:#E8F0F6; --accent:#E84B83; /* 로고 핑크 (실측) — CTA·강조에만 */ --accent-soft:#FDEEF4; --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:150px;height:53px;flex:none} /* 로고 비율 247x87 = 2.84:1 ⚠️ 2배 화면에서 선명하려면 원본이 **300px 이상**이어야 한다. 현재 원본 247px → 82%. 큰 원본(300x106 이상, 가능하면 SVG)을 받으면 교체할 것. */ .brand span{ font-size:16px;font-weight:700;color:var(--ink); letter-spacing:-.01em; padding-left:14px;border-left:2px solid var(--brand); white-space:nowrap; /* 🔻 로고 안에서 「팽팽클리닉」 워드마크가 아래쪽(세로 63% 지점)에 있어, 상자 정가운데에 두면 위로 떠 보인다. 워드마크 중심에 맞춰 내린다. */ position:relative;top:6px; } @media (max-width:420px){ .brand img{width:125px;height:44px} .brand span{font-size:14px;padding-left:10px;top:5px} } .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)} position:static;transform:none;min-width:0; border:0;border-radius:0;box-shadow:none;background:transparent;padding:0; } .gnb .btn{margin-top:12px} } /* ---------- 공통 섹션 ---------- */ .sec{padding:56px 0} .sec--tint{background:var(--ground-2)} .sec__head{margin:0 0 26px} .sec__head h2,.sec__head h4{ 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} /* 글 목록 위 제목 — 칩을 대신하는 자리. 좌측 정렬 (2026-09-08) */ .sec__head--list{margin-bottom:40px} .sec__head--list h2{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.03em} /* ---------- 히어로 (배경 이미지 + 텍스트 오버레이) ---------- 히어로 이미지 규격: 2400×1000(2.4:1), 인물은 오른쪽·텍스트는 왼쪽 45%. JPEG 82 권장 배너1 → 배너2 → 배너3 순으로 인물이 작아짐. 배너3의 머리 최상단 = 이미지 40.5% 지점 교체 규격 데스크톱 2400 × 1000 px (2.4:1) · 300KB 이하 모바일 별도 파일 없이 같은 이미지를 우측 기준으로 크롭해 씀 인물이 오른쪽에 있으므로 텍스트는 왼쪽 45% 안에서 끝난다. 이미지가 없어도 브랜드 인디고 단색으로 떨어지므로 레이아웃은 깨지지 않는다. ------------------------------------------------------------ */ /* ── 히어로 — 미니멀 (2026-09-08 테마 변경) 배경 사진 없이 **타이포로** 간다. ① 지급받을 사진이 없어도 오픈할 수 있고 ② 미용 프로모션 톤과 거리를 두어 「정보를 찾는 사람」에게 맞는 인상을 만든다. 나중에 실사 배경을 쓰고 싶으면 .hero--photo 를 따로 만든다. */ .hero{ position:relative; padding:56px 0 0; /* 사진이 바닥에 닿아 서 있는 구성이라 아래 패딩 0 */ background:var(--ground); border-bottom:1px solid var(--line); overflow:hidden; } .hero .wrap{width:100%} /* 🌊 물결 배경 — 히어로 바닥에 깔린다. 인물·텍스트는 이 위에 얹힌다 (2026-09-08) */ .hero__wave{ position:absolute;left:0;right:0;bottom:0; width:100%;height:clamp(120px,17vw,240px); display:block;z-index:0;pointer-events:none; } /* 텍스트 좌 / 인물 우. 인물은 배경을 지운 컷아웃이라 상자처럼 보이지 않는다 (2026-09-08) */ .hero__in{ position:relative;z-index:1; display:grid;grid-template-columns:1fr auto; align-items:end;gap:32px; } .hero__text{padding-bottom:120px;min-width:0} /* 값을 키우면 텍스트만 위로 — 사진은 바닥 정렬이라 안 움직인다 */ .hero__img{ width:clamp(250px,29vw,395px);height:auto; display:block;align-self:end; } .hero h1{ margin:0 0 20px; font-size:clamp(34px,4.4vw,54px); line-height:1.28;font-weight:800; letter-spacing:-.035em;color:var(--ink); max-width:20ch; } /* 헤드라인 강조 — 한 문장에 한 번만. 브랜드 포인트 핑크 */ .hero h1 .hl{ font-style:normal;font-weight:800; color:var(--accent); } .hero p{ margin:0;font-size:17px;max-width:56ch; color:var(--ink-2);line-height:1.75; } .hero__cta{display:flex;flex-wrap:wrap;gap:10px} .hero .btn{border-color:var(--ink);background:var(--ink);color:#fff} .hero .btn:hover{background:#000;border-color:#000;color:#fff} .hero .btn--ghost{background:transparent;border-color:var(--line-2);color:var(--ink-2)} .hero .btn--ghost:hover{background:var(--ground-2);border-color:var(--ink-3);color:var(--ink)} /* ── 카테고리 칩 — ⚠️ 2026-09-08 현재 화면에서 쓰지 않는다(제목 하나로 통일). 되살릴 수 있게 스타일만 남겨 둔다. (원래 주석) 카테고리 칩 (홈 목록 위) 🚨 JS 필터가 아니라 **링크**다. JS 로 걸러내면 목록이 서버 HTML 에 남지 않아 표준 6-1(서버 HTML 본문 12점)에 걸린다. inblog 은 SSR 이라 되는 것이고 우리는 정적 생성이므로 카테고리 페이지로 이동시키는 것이 맞다. */ .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;padding:0;list-style:none} .chips a{ display:inline-block;padding:7px 15px;border-radius:999px; border:1px solid var(--line);background:var(--ground); font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none; transition:.15s; } .chips a:hover{border-color:var(--ink-3);color:var(--ink)} .chips a[aria-current="page"],.chips .chips__all a{background:var(--ink);border-color:var(--ink);color:#fff} /* ── 글 카드 (썸네일형) 썸네일은 og.js 가 글마다 만드는 OG 카드를 그대로 쓴다 — 사진을 따로 준비하지 않아도 목록이 채워진다. 파일이 없으면 onerror 로 숨기고 텍스트만 남는다. */ .pcards{display:grid;gap:36px 28px;grid-template-columns:repeat(2,1fr);list-style:none;margin:0;padding:0} .pcard{display:flex;flex-direction:column} .pcard a{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:14px} .pcard__thumb{ display:block;width:100%;aspect-ratio:1200/630;object-fit:cover; border:1px solid var(--line);border-radius:6px;background:var(--ground-2); transition:.18s; } .pcard a:hover .pcard__thumb{border-color:var(--ink-3)} .pcard__title{ margin:0;font-size:19px;font-weight:700;line-height:1.45;letter-spacing:-.022em;color:var(--ink); } .pcard a:hover .pcard__title{color:var(--accent)} .pcard__desc{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink-2)} .pcard__meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-3)} /* ⚠️ 2026-09-08 현재 미사용 — 목록 메타에서 카테고리 뱃지를 뺐다(날짜만 남김). 뱃지는 카드 전체를 감싼 안의 텍스트라 링크가 아니었고, 같은 값이 반복돼 노이즈였다. 되살릴 수 있게 스타일만 남겨 둔다. */ .pcard__cat{ padding:3px 10px;border-radius:999px;background:var(--ground-2); border:1px solid var(--line);color:var(--ink-2);font-weight:500; } /* ── 피처 글 (목록 맨 위 1편) — 좌 썸네일 / 우 텍스트 */ .feature{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:center;margin:0 0 48px} .feature a{text-decoration:none;color:inherit;display:contents} .feature__thumb{ width:100%;aspect-ratio:1200/630;object-fit:cover; border:1px solid var(--line);border-radius:6px;background:var(--ground-2); } .feature__title{margin:0 0 14px;font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.34;letter-spacing:-.03em} .feature:hover .feature__title{color:var(--accent)} .feature__desc{margin:0 0 16px;font-size:15.5px;line-height:1.7;color:var(--ink-2)} @media (max-width:860px){ .hero{padding:48px 0 0} /* 좁은 화면: 인물을 아래로 내리고 폭을 줄인다 */ .hero__in{grid-template-columns:1fr;gap:8px} .hero__text{padding-bottom:0} .hero__img{width:min(300px,66vw);margin:0 auto} .pcards{grid-template-columns:1fr;gap:32px} .feature{grid-template-columns:1fr;gap:18px} } /* 좁은 화면도 데스크톱과 같은 밝은 히어로를 쓴다 — 여기서는 글자 크기만 줄인다 */ @media (max-width:900px){ .hero h1{font-size:30px;max-width:none} } @media (max-width:640px){ .hero h1{font-size:26px} .hero p{font-size:16px} } /* ---------- 카드 그리드 ---------- */ .grid{display:grid;gap:18px} /* 카드 묶음을 ul/li 로 감쌌다 (2026-08-28) — 목록 기본 스타일만 지운다 */ .grid--plain{list-style:none;margin:0;padding:0} /* li 가 그리드 아이템이 되므로, 카드가 칸 높이를 채우도록 이어 준다 */ .grid--plain>li{display:flex} .grid--plain>li>.card{flex:1} .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 h4{margin:1.6em 0 .45em;font-size:16.5px;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,.cta .cta__h{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:190px;height:67px;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:158px;height:56px} .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--bare{padding-top:0} .site-foot--bare .site-foot__copy{border-top:0;margin-top:0;padding-top:0} .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)보다 아래에 둔다 — 모바일 메뉴가 열렸을 때 가리지 않도록. */ /* 🚨 2026-09-08 사용자 지시 — 화면 우측 「5시 방향」(우측 하단)으로. 원래는 top:50% 로 우측 중앙(3시)에 떠 있었다. bottom 기준으로 고정하면 스크롤과 무관하게 항상 같은 자리에 있는다. */ .quick{ position:fixed;bottom:32px; /* 화면 우측 끝이 아니라 **본문 열 바로 바깥**까지 당긴다 (2026-09-08 사용자 지시). 계산: (화면폭 − 본문폭)/2 = 우측 여백. 거기서 버튼폭 85px + 간격 12px 를 뺀다. → 버튼 왼쪽 모서리가 본문 오른쪽 끝에서 12px 떨어진 자리에 선다. 여백이 좁아지면 22px 로 되돌아가고, 아무리 넓어도 120px 을 넘지 않는다. ⚠️ 이보다 더 왼쪽으로 보내면 본문 글자를 가린다 — 값을 키울 때 확인할 것. */ right:clamp(22px, calc((100vw - var(--w)) / 2 - 97px), 120px); 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 } /* 직답 블록 — 답변 엔진이 통째로 뽑아 쓰는 자리 (제작 표준 3-3 ①). 2026-08-28 도입. 페이지 상단에 「○○란 … 입니다」 정의문을 모아 둔다. */ .answer{ margin:0 0 28px;padding:20px 22px; background:var(--brand-soft);border-left:3px solid var(--brand);border-radius:var(--r); } .answer__label{ margin:0 0 10px;color:var(--brand);font-size:13px;font-weight:700;letter-spacing:.01em; } .answer p:not(.answer__label){margin:0 0 8px;font-size:15.5px;line-height:1.75;color:var(--ink)} .answer p:last-child{margin-bottom:0} .answer strong{color:var(--brand-2)} /* 글 본문 맨 앞의 핵심 요약 (2026-09-03 신설). 🚨 같은 페이지 위쪽에 직답 블록이 이미 .answer 로 들어간다. 배경까지 같으면 색 박스가 두 번 나와 구분이 안 되므로, 요약 쪽은 배경을 비우고 테두리로만 구분한다. */ .answer--tldr{background:#fff;border:1px solid var(--line-2);border-left:3px solid var(--brand)} /* 요약 블록 안의 목차 (2026-09-03). ⚠️ 라벨을 p 로 쓰면 위쪽 `.answer p:not(.answer__label)`(0-3-1)이 이겨 글씨가 커진다. 그래서 div 다 — 태그를 바꿀 때 이 점을 같이 본다. */ .answer__toc-label{ margin:15px 0 9px;padding-top:15px;border-top:1px solid var(--line-2); font-size:13px;font-weight:700;color:var(--ink-3);letter-spacing:.01em; } .answer__toc{margin:0;padding-left:1.3em;font-size:15px;line-height:1.7;color:var(--ink-2)} .answer__toc li{margin:0 0 5px} .answer__toc li:last-child{margin-bottom:0} .answer__toc a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent} .answer__toc a:hover{color:var(--brand);border-bottom-color:var(--brand)} /* 목차로 이동했을 때 제목이 헤더에 가리지 않게 */ .prose h2[id]{scroll-margin-top:84px} @media (max-width:640px){ .answer__toc{font-size:14.5px} .prose h2[id]{scroll-margin-top:70px} } /* 히어로 바로 아래 칸. padding-top 을 0 으로 두었더니 배너에 딱 붙었다 (2026-08-28 수정). 아래쪽은 0 으로 두고 다음 .sec 의 위쪽 56px 이 간격을 만들게 한다 — 여백이 두 번 겹치지 않는다. */ .sec--answer{padding:44px 0 0} @media (max-width:640px){ .sec--answer{padding-top:32px} } @media (max-width:640px){ .answer{padding:16px 17px} .answer p:not(.answer__label){font-size:15px} } /* 작성자 페이지 머리 인용문 (2026-09-08) */ .author__quote{ margin:0 0 28px;padding:20px 0 20px 22px; border-left:3px solid var(--accent); font-size:18px;line-height:1.7;font-weight:600;letter-spacing:-.02em; color:var(--ink); } /* ── 의료진 소개 (/doctors/) — 2026-09-08 신설 */ .doc{ display:grid;grid-template-columns:280px 1fr;gap:40px; align-items:start; padding:44px 0;border-top:1px solid var(--line); } .doc:first-of-type{border-top:0;padding-top:8px} .doc__photo img{ width:100%;height:auto;aspect-ratio:4/5;object-fit:cover; border-radius:8px;background:var(--ground-2);display:block; } /* 이름은 왼쪽에 크게, 직함·자격은 그 오른쪽에 세로로 (2026-09-08) */ .doc__id{display:flex;align-items:flex-start;gap:14px} .doc__name{margin:0;font-size:30px;font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1.2} .doc__titles{padding-top:2px} .doc__role{margin:0;font-size:16px;font-weight:700;color:var(--ink);line-height:1.35} .doc__badge{margin:1px 0 0;font-size:14px;font-weight:500;color:var(--ink-3);line-height:1.35} .doc__en{margin:14px 0 18px;font-size:13px;letter-spacing:.06em;color:var(--ink-3)} .doc__quote{ margin:0 0 22px;padding:16px 0 16px 20px; border-left:3px solid var(--accent); font-size:16.5px;line-height:1.65;font-weight:600;letter-spacing:-.02em;color:var(--ink); } .doc__list{margin:0;padding-left:18px;list-style:disc} .doc__list li{font-size:15px;line-height:1.85;color:var(--ink-2)} @media (max-width:760px){ .doc{grid-template-columns:1fr;gap:22px;padding:32px 0} .doc__photo{max-width:260px} } /* ============================================================ 🎨 본문 디자인 — 심플안 (2026-09-09, 사용자 참고안 반영) ------------------------------------------------------------ 방향: 박스·뱃지·배경색을 빼고 **크기·굵기·여백**으로 위계를 만든다. 본문은 무채색으로 두고 **핵심 문장에만 브랜드 남색**을 쓴다. 원칙: JS 0 · 이미지 0 (ssr 8점 · imgAlt 4점) 표·목록·정의문은 시맨틱 태그 그대로 (structure 5 · definition 4) 훅 : build.js decorate() 가 .h2n / .note--alert / .note--warn 을 심는다 ============================================================ */ /* ── 본문 기본: 여백을 넓히고 글자색을 부드럽게 ────────── */ .prose{font-size:17px;line-height:1.9;color:#2B2E38} .prose > * + *{margin-top:1.25em} /* ── 소제목: 선·뱃지 없이 크기와 굵기로만 ──────────────── */ .prose h2{ display:block;position:static; margin:2.9em 0 .75em;padding-top:0;border-top:none; font-size:25px;font-weight:800;line-height:1.4; letter-spacing:-.025em;color:var(--ink); } .prose h2::before{content:none} .prose h2:first-child{margin-top:0} /* 번호는 지우지 않고 옅게 물린다 — 목차와 짝이 맞아야 하기 때문 */ .prose h2 .h2n{ display:inline;background:none;color:var(--ink-3); font-size:.72em;font-weight:700;letter-spacing:0; min-width:0;height:auto;padding:0;transform:none;margin-right:.45em; } .prose h2 .h2n::after{content:"."} .prose h3{ margin:2.1em 0 .55em;padding-left:0;border-left:none; font-size:18.5px;font-weight:700;color:var(--ink);letter-spacing:-.015em; } /* ── 정의문: 박스를 빼고 «색 있는 문장»으로 ───────────── */ .def{ background:none;border:none;border-left:2px solid var(--brand); border-radius:0;padding:.1em 0 .1em 1em; font-size:18px;font-weight:600;line-height:1.75;color:var(--brand); } .def::before{content:none} /* ── 표: 테두리를 줄이고 헤더는 연한 바탕에 남색 글자 ─── */ .tablewrap{border:none;border-radius:0;overflow-x:auto} .prose table{border-collapse:collapse;border-spacing:0;font-size:16px} .prose th,.prose td{ border:none;border-bottom:1px solid var(--line); padding:13px 14px 13px 0;vertical-align:top; } .prose thead th{ background:none;color:var(--brand);font-weight:700; border-bottom:1.5px solid var(--brand);white-space:nowrap; } .prose tbody tr:nth-child(even){background:none} .prose tbody td:first-child,.prose tbody th:first-child{font-weight:600;color:var(--ink)} .prose tbody tr:last-child td,.prose tbody tr:last-child th{border-bottom:none} /* ── 안내 블록: 배경을 빼고 왼쪽 선만 ─────────────────── */ .note{ border:none;border-left:2px solid var(--line-2); border-radius:0;background:none;padding:.15em 0 .15em 1em; font-size:16px;color:var(--ink-2);line-height:1.8; } .note b{color:var(--ink);font-weight:700} .note--warn{border-left-color:#D9A441} .note--warn b{color:#8A6516} .note--alert{border-left-color:var(--accent)} .note--alert b{color:#B32A5D} /* ── 요약·목차: 번호는 본문 소제목의 것을 그대로 쓴다 ── 🚨 CSS counter 를 붙이면 «1. 01. …» 처럼 숫자가 두 번 나온다. 목차 텍스트는 tocOf() 가 h2 에서 가져오는데 그 안에 이미 «01.» 이 들어 있다. 본문 소제목 번호와 목차 번호가 같아야 짝이 맞으므로 CSS 쪽을 뺀다. */ .answer--tldr ol,.answer--tldr ul{list-style:none;padding-left:0} .answer--tldr li{padding-left:0} .answer--tldr li::before{content:none} /* ── 목록: 항목 사이를 띄운다 ─────────────────────────── */ .prose ul li + li,.prose ol li + li{margin-top:.5em} .prose ul,.prose ol{padding-left:1.15em} /* ── 강조·출처 ────────────────────────────────────────── */ .prose p > strong,.prose li > strong,.prose td > strong{color:var(--brand-2)} .src{ display:inline;margin-left:.2em;padding:0; background:none;border:none;border-radius:0; font-size:.82em;color:var(--ink-3);font-weight:500; } .src::before{content:"("} .src::after{content:")"} /* ── FAQ: 테두리를 줄이고 선으로만 ────────────────────── */ .faq details{border:none;border-bottom:1px solid var(--line);border-radius:0} .faq details + details{margin-top:0} .faq summary{padding:17px 44px 17px 0;font-size:17px} .faq summary::after{right:4px} .faq details[open]{box-shadow:none} .faq details[open] summary{color:var(--brand)} @media (max-width:640px){ .prose{font-size:16.5px} .prose h2{font-size:22px;margin:2.4em 0 .7em} .prose h3{font-size:17.5px} .def{font-size:17px} .prose table{font-size:15px} } /* ── 좌측 남색 선 제거 (2026-09-09 사용자 지시) ────────── 인용 블록(.lead)과 요약 블록(.answer--tldr)의 왼쪽 세로선을 뺀다. 덩어리 구분은 배경과 테두리가 이미 하고 있어 선이 겹쳐 보였다. ⚠️ .def·.note 의 왼쪽 선은 그대로 둔다 — 그쪽은 배경이 없어 선이 유일한 구분 수단이다. */ .lead{border-left:none;border-radius:var(--r);padding:18px 20px} .answer--tldr{border-left:1px solid var(--line-2)} /* ── 박스·선 전면 제거 (2026-09-09 사용자 지시 2차) ────── ① .lead 회색 배경 박스 → 없앤다. 인용부호와 글자색으로만 구분 ② .answer--tldr 테두리 박스 → 없앤다. 「핵심 요약」 라벨과 여백으로만 구분 ③ .def 왼쪽 남색 선 → 없앤다. 남색 글자만 남긴다 ⚠️ .note 의 왼쪽 선은 아직 남겨 둔다 — 참고/주의/경고를 가르는 유일한 신호다 */ .lead{ background:none;border:none;border-radius:0;padding:0; color:var(--ink-2); } .lead p + p{margin-top:.5em} .answer--tldr{ background:none;border:none;border-radius:0; padding:0;margin:0 0 34px; } .answer--tldr .answer__label{margin-bottom:.75em} .answer--tldr .answer__toc-label{ margin:20px 0 10px;padding-top:18px;border-top:1px solid var(--line); } .def{border-left:none;padding-left:0} /* ── 박스를 걷어낸 뒤 무너진 세로 간격 복구 (2026-09-09) ── 박스가 padding 으로 만들던 간격이 사라져 세 덩어리가 붙어 버렸다. 🚨 일반 규칙(.prose > * + *)은 .prose p{margin:0} 에 특이도로 진다 — (0,1,0) vs (0,1,1). 그래서 «자식 선택자 + 클래스»로 특이도를 올려 직접 잡는다. */ .prose > .lead{margin:0 0 1.7em} .prose > .lead + p{margin-top:0} .prose > .answer--tldr{margin:2.6em 0 3em} .prose > .answer--tldr + *{margin-top:0} /* 요약 안쪽도 숨을 틔운다 */ .answer--tldr .answer__label{margin:0 0 .9em} .answer--tldr p:not(.answer__label){margin:0 0 .75em} .answer--tldr p:last-of-type{margin-bottom:0} /* ── 소제목 번호를 제목보다 크게 (2026-09-09 사용자 지시) ── .72em(작게) → 1.15em(제목보다 조금 큼). 크기로 시선을 먼저 받게 한다. ⚠️ 커지면 baseline 이 어긋나 보여 살짝 내려 앉힌다. */ .prose h2 .h2n{ font-size:1.15em;font-weight:800; color:var(--ink-3);margin-right:.32em; position:relative;top:.04em; } .prose h2 .h2n::after{content:".";margin-left:.02em} /* ── 표 세로 구분선 복구 (2026-09-09 사용자 지시) ───────── 심플안으로 가면서 가로선만 남겼더니 열 구분이 사라졌다. 칸 사이에만 선을 넣고 바깥 테두리는 그대로 비워 둔다. */ .prose th,.prose td{padding:13px 14px} .prose th:first-child,.prose td:first-child{padding-left:0} .prose th:last-child,.prose td:last-child{padding-right:0} .prose th + th,.prose td + td,.prose td + th{ border-left:1px solid var(--line); } /* ── 「핵심 요약」 라벨 13px → 19px (2026-09-09 사용자 지시) ── 박스를 걷어낸 뒤 라벨이 요약 덩어리의 유일한 시작 신호가 되었는데 13px 라 본문(17px)보다 작아 눈에 안 걸렸다. ⚠️ h2(25px)와 위계가 겹치지 않도록 19px 에서 멈춘다. */ .answer--tldr .answer__label{ font-size:19px;line-height:1.4;letter-spacing:-.01em;margin:0 0 .7em; } /* ── 「이 글에서 다루는 것」 13px → 15px (2026-09-09 사용자 지시) ── 위쪽 「핵심 요약」이 19px 가 되면서 13px 라벨이 너무 눌려 보였다. 19 와 목차 항목(15) 사이의 15px 로 잡아 «요약 안의 작은 구분»으로 둔다. */ .answer--tldr .answer__toc-label{ font-size:15px;letter-spacing:-.005em; } /* ── 헤더: 상담문의 버튼을 옆 메뉴와 정렬 (2026-09-09 사용자 지시) ── 메뉴 링크(padding 6px 0)와 버튼(padding 9px 20px + 테두리 1px)의 박스 높이가 달라 세로 중심이 어긋나 보였다. 둘 다 같은 높이의 flex 상자로 만들어 글자 기준선을 맞춘다. 🚨 .gnb a(0-1-1) 가 .btn(0-1-0) 을 이기므로 버튼은 .gnb a.btn 으로 다시 지정한다. */ .gnb a{ display:inline-flex;align-items:center; height:38px;padding:0;line-height:1; } .gnb a.btn, .gnb a.btn:hover, .gnb a.btn[aria-current="page"]{ height:38px;padding:0 20px;line-height:1; } @media (max-width:900px){ .gnb a{height:auto;padding:10px 0} .gnb a.btn, .gnb a.btn:hover, .gnb a.btn[aria-current="page"]{height:auto;padding:11px 20px} } /* ── 상담문의 버튼 톤 낮추기 (2026-09-09 사용자 지시) ────── 38px·좌우 20px 는 옆 메뉴 글자보다 덩어리가 커 헤더에서 혼자 튀었다. 34px·좌우 16px 로 줄여 메뉴와 비슷한 무게로 맞춘다. ⚠️ 메뉴 링크도 같은 34px 로 낮춰야 세로 중심이 유지된다. */ .gnb a{height:34px} .gnb a.btn, .gnb a.btn:hover, .gnb a.btn[aria-current="page"]{ height:34px;padding:0 16px;font-size:14.5px; } /* ── 상담문의: 채움 박스 유지, 글자만 메뉴와 맞춤 (2026-09-09) ── 박스를 없앤 안은 사용자가 반려. 채운 남색 상자로 되돌리되 글자 크기를 옆 메뉴와 같은 15px 로 맞춰 한 줄로 읽히게 한다. */ .gnb a.btn, .gnb a.btn:hover, .gnb a.btn[aria-current="page"]{ height:34px;padding:0 16px;font-size:15px;font-weight:600; background:var(--brand);border:1px solid var(--brand);border-radius:var(--r); color:#fff; } .gnb a.btn:hover{background:var(--brand-2);border-color:var(--brand-2);color:#fff} /* ── 상담문의 박스만 살짝 위로 (2026-09-09 사용자 지시) ───── 메뉴 링크는 그대로 두고 버튼만 2px 올린다. position:relative + top 이라 주변 배치에는 영향이 없다. ⚠️ 값만 바꾸면 되는 자리다 — 2px → 4px → 6px 로 조정(2026-09-09). 되돌리려면 0. */ .gnb a.btn{position:relative;top:-6px} /* ── 🚨 문단 간격 복구 (2026-09-09) ──────────────────────── 증상: 연속된

·