/* ══════════════════════════════════════════════════════════════════ * hwaon_landing_v3.css — 랜딩 표준 v3 공용 CSS (S82-B1 신설) * ------------------------------------------------------------------ * 원천 4파일을 아래 순서로 **내용 무변** 병합했다(하네스 = 픽셀 기준). * 1) _preview/S82K/landing-partial.css md5 6f738247fe26606162084731ff6460e0 * 2) _preview/S82K/landing-lawyers-s81.css md5 61a6a89cc9c225bf0122fd1ca25590bc * 3) _preview/S82K/k2.css md5 4ebdbc276c6cae78e5dc16748d4581f4 * 4) _preview/S82K/k3-hero.css md5 a076ce65ce0d140b000f51a0cf96cb17 * * 유일한 변경 = `:root` 토큰 선언을 `.hwa-s81, #hwaon-s81, .l-hero` 로 좁힌 것. * (전역 :root 로 두면 라이브 지면 토큰과 충돌한다 — 선택자 스코프 유지 원칙) * 소비 파셜 = _hero_lead · _landing_lead_slider · _landing_proof · _landing_types · _landing_related_nav * 규약 : 오렌지 0 · border-radius 0 만 · box-shadow 0 * ══════════════════════════════════════════════════════════════════ */ /* ───────── landing-partial.css ───────── */ /* S81: one shared stylesheet. Reuse the host page's three existing fonts. */ .hwa-s81{--navy:#1b2a4a;--cream:#f5f0eb;--paper:#fafaf7;--gold:#c9a96e;--ink:var(--navy);--surface:var(--cream);--line:rgba(27,42,74,.24);color:var(--ink);background:var(--surface);font-family:Pretendard,sans-serif;padding-block:4rem;box-sizing:border-box} .hwa-s81.hwa-dark{--ink:var(--paper);--surface:var(--navy);--line:rgba(245,240,235,.3)} .hwa-s81 *,.hwa-s81 *::before,.hwa-s81 *::after{box-sizing:border-box;border-radius:0;box-shadow:none} .hwa-s81 :is(h2,h3,p,ul,figure,blockquote){margin:0;padding:0} .hwa-s81 a{color:inherit;text-decoration:none} .hwa-s81 a:focus-visible{outline:2px solid currentColor;outline-offset:4px} .hwa-s81 a:hover h3,.hwa-s81 a.hwa-more:hover,.hwa-s81 .hwa-region-links a:hover{text-decoration:underline;text-underline-offset:.3em} .hwa-wrap{max-width:90rem;margin-inline:auto;width:calc(100% - 8rem)} .hwa-head{margin-bottom:2rem} .hwa-eye{font-family:'Cormorant Garamond',serif!important;font-size:1.25rem;line-height:1.25;letter-spacing:.035em;margin-bottom:.5rem!important;color:var(--ink)} .hwa-eye::before{content:'';display:inline-block;width:1.5rem;height:1px;background:var(--gold);vertical-align:middle;margin-right:.75rem} .hwa-s81 h2{font-family:'Noto Serif KR',serif;font-weight:500;font-size:2.75rem;line-height:1.4;letter-spacing:-.045em;word-break:keep-all} .hwa-s81 h3{font-weight:600;letter-spacing:-.02em} .hwa-s81 :is(h2,h3,p,blockquote){overflow-wrap:anywhere} .hwa-proof-columns{display:grid;grid-template-columns:minmax(0,2.7fr) minmax(0,1fr);gap:2rem} .hwa-subhead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem;min-height:1.5rem} .hwa-subhead h3{font-size:1rem;line-height:1.5} .hwa-more{font-size:.875rem;white-space:nowrap;line-height:1.5} .hwa-case-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem} .hwa-case{border-top:1px solid var(--line);padding:1.25rem 0;min-height:12.5rem;display:grid;grid-template-rows:auto 1fr auto;gap:.75rem;grid-column:span 2} .hwa-case-grid[data-count='4'] .hwa-case{grid-column:span 3} .hwa-case-grid[data-count='5'] .hwa-case:nth-child(-n+2){grid-column:span 3} .hwa-case-meta{display:flex;justify-content:space-between;gap:.5rem;font-size:.8125rem;line-height:1.5} .hwa-case time{font-size:.75rem;white-space:nowrap} .hwa-case h3{font-size:1.375rem;line-height:1.5;word-break:keep-all} .hwa-result{font-size:1rem;line-height:1.5} .hwa-review-grid{display:grid;gap:1rem;min-height:26rem;grid-template-rows:repeat(3,1fr)} .hwa-review-grid[data-count='2']{grid-template-rows:repeat(2,1fr)} .hwa-review{border-top:1px solid var(--line);padding:1rem 0;display:grid;grid-template-rows:1fr auto;min-height:0;gap:.5rem} .hwa-review blockquote{font-family:'Noto Serif KR',serif;font-size:1.125rem;line-height:1.6;word-break:keep-all} .hwa-review figcaption{font-size:.8125rem;line-height:1.5} .hwa-type-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem 1.5rem} .hwa-types{border-top:1px solid var(--line)} .hwa-type{grid-column:span 4;border-top:1px solid var(--line);padding:1.375rem 0;min-height:10rem} .hwa-type-grid[data-count='8'] .hwa-type{grid-column:span 3} .hwa-type-grid[data-count='7'] .hwa-type:nth-child(n+4){grid-column:span 3} .hwa-type h3{font-size:1.25rem;line-height:1.4;margin-bottom:.375rem} .hwa-type p{font-size:1rem;line-height:1.5;margin-bottom:.75rem;word-break:keep-all} .hwa-keywords{display:flex;flex-wrap:wrap;column-gap:.65rem;list-style:none;font-size:.875rem;line-height:1.5} .hwa-keywords li+li::before{content:'';display:inline-block;width:1px;height:.75em;background:var(--gold);margin-right:.65rem} .hwa-center-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 1.5rem} .hwa-center{min-height:8rem;border-top:1px solid var(--line);padding:1.5rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem} .hwa-center h3{font-size:1.25rem;line-height:1.4;margin-bottom:.5rem} .hwa-center p{font-size:1rem;line-height:1.5;word-break:keep-all} .hwa-center>span{font-size:1.5rem} .hwa-regions{display:flex;align-items:center;gap:1.5rem;border-top:1px solid var(--line);margin-top:2rem;padding-top:1.5rem} .hwa-regions>p{font-size:.875rem;white-space:nowrap;line-height:1.5} .hwa-region-links{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%} .hwa-region-links a{display:flex;align-items:center;justify-content:center;font-size:.875rem;line-height:1.5;min-height:2.75rem;white-space:nowrap} .hwa-region-short{display:none} .hwa-navigation{border-bottom:1px solid var(--line)} /* The adjoining form owns no duplicate top border. Move the same border to the top of this section for the globally selected after-form arrangement. */ .hwa-navigation[data-after-form='true']{border-bottom:0;border-top:1px solid var(--line)} [id^='faq-']{scroll-margin-top:8rem} @media (min-width:48rem) and (max-width:63.999rem){ .hwa-wrap{width:calc(100% - 4rem)} .hwa-proof-columns{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1.5rem} .hwa-case{grid-column:span 3} .hwa-case-grid[data-count='5'] .hwa-case:last-child{grid-column:span 6} .hwa-type-grid .hwa-type{grid-column:span 6!important} .hwa-type-grid[data-count='7'] .hwa-type:last-child,.hwa-type-grid[data-count='9'] .hwa-type:last-child{grid-column:span 12!important} .hwa-center-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .hwa-regions{display:block}.hwa-regions>p{margin-bottom:.75rem} .hwa-region-links{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0} .hwa-region-full{display:none}.hwa-region-short{display:inline} } @media (max-width:47.999rem){ .hwa-s81{padding-block:2rem} .hwa-wrap{width:calc(100% - 2.5rem)} .hwa-head{margin-bottom:1.25rem} .hwa-eye{font-size:1rem;line-height:1.125;letter-spacing:0;margin-bottom:.5rem!important} .hwa-s81 h2{font-size:1.75rem;line-height:1.4;letter-spacing:-.045em} .hwa-proof-columns{display:block} .hwa-proof-columns>div+div{margin-top:1.25rem} .hwa-subhead{min-height:1.5rem;margin-bottom:.75rem} .hwa-subhead h3{font-size:1rem}.hwa-more{font-size:.8125rem} .hwa-case-grid{display:block} .hwa-case{min-height:5.5rem;padding:.8125rem 0;gap:0;grid-template-rows:auto auto auto} .hwa-case-meta{font-size:.75rem;line-height:1rem} .hwa-case time{font-size:.75rem;line-height:1rem} .hwa-case h3{font-size:1rem;line-height:1.5rem} .hwa-result{font-size:.875rem;line-height:1.25rem} .hwa-review-grid{min-height:0;gap:0;grid-template-rows:none!important} .hwa-review{min-height:5.5rem;padding:.6875rem 0 .75rem;gap:0;grid-template-rows:minmax(3rem,auto) auto} .hwa-review blockquote{font-family:Pretendard,sans-serif;font-size:1rem;line-height:1.5rem} .hwa-review figcaption{font-size:.75rem;line-height:1rem} .hwa-type-grid{display:block} .hwa-type{display:block;min-height:5.5rem;padding:.5rem 0} .hwa-type h3{font-size:1.125rem;line-height:1.625rem;margin-bottom:0} .hwa-type p{font-size:1rem;line-height:1.5rem;margin-bottom:0} .hwa-keywords{font-size:.875rem;line-height:1.25rem;column-gap:.5rem} .hwa-keywords li+li::before{margin-right:.5rem} .hwa-center-grid{display:block} .hwa-center{min-height:4.75rem;padding:.75rem 0;gap:.5rem} .hwa-center h3{font-size:1.125rem;line-height:1.625rem;margin-bottom:0} .hwa-center p{font-size:.875rem;line-height:1.375rem} .hwa-center>span{font-size:1.25rem} .hwa-regions{display:block;margin-top:1.25rem;padding-top:1rem} .hwa-regions>p{margin-bottom:.5rem} .hwa-region-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(3.125rem,1fr));gap:0} .hwa-region-links a{min-width:0;min-height:2.75rem;font-size:.875rem} .hwa-region-full{display:none}.hwa-region-short{display:inline} } /* At narrow widths or enlarged text, keep the same data visible and let the grid wrap. The two-row target applies to 390px at default text size. */ @media (max-width:22.999rem){.hwa-region-links{grid-template-columns:repeat(auto-fit,minmax(3.125rem,1fr))}} /* ───────── landing-lawyers-s81.css ───────── */ #hwaon-s81{--hw-navy:#1B2A4A;--hw-cream:#F5F0EB;--hw-bg:#FAFAF7;--hw-gold:#C9A96E;--hw-orange:#EA5514;container-type:inline-size;background:var(--hw-bg);color:var(--hw-navy);font-family:Pretendard,sans-serif;width:100%;} #hwaon-s81 *,#hwaon-s81 *::before,#hwaon-s81 *::after{box-sizing:border-box;} #hwaon-s81 p,#hwaon-s81 h2{margin:0;} #hwaon-s81 button,#hwaon-s81 a{font:inherit;border-radius:0;box-shadow:none;} #hwaon-s81 button{cursor:pointer;} #hwaon-s81 [hidden]{display:none!important;} #hwaon-s81 .hw-section{width:calc(100% - 144px);max-width:1200px;margin:0 auto;padding:42px 0 24px;} #hwaon-s81 .hw-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px;gap:20px;} #hwaon-s81 .hw-eyebrow{font-family:'Cormorant Garamond',serif;font-size:16px;line-height:1.2;letter-spacing:.12em;color:var(--hw-navy);padding-top:12px;position:relative;} #hwaon-s81 .hw-eyebrow::before{content:'';position:absolute;left:0;top:0;width:32px;height:1px;background:var(--hw-gold);} #hwaon-s81 .hw-context{font-family:'Noto Serif KR',serif;font-size:28px;font-weight:500;line-height:1.5;margin-top:8px;} #hwaon-s81 .hw-flow{font-size:16px;line-height:1.6;margin-bottom:7px;} #hwaon-s81 .hw-roster{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:16px;position:relative;padding:0 10px 20px;} #hwaon-s81 .hw-roster::after{content:'';height:1px;background:var(--hw-gold);position:absolute;left:0;right:0;bottom:0;} #hwaon-s81 .hw-roster-row{display:contents;} #hwaon-s81 .hw-person{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;background:transparent;border:0;padding:6px 8px 10px;min-width:44px;min-height:44px;color:var(--hw-navy);font-size:15px;line-height:1.35;} #hwaon-s81 .hw-person::after{content:'';position:absolute;left:50%;top:100%;height:20px;width:1px;background:var(--hw-gold);} #hwaon-s81 .hw-person[aria-pressed=true]{background:var(--hw-navy);color:var(--hw-cream);} #hwaon-s81 .hw-person[aria-pressed=true]::after{width:2px;} #hwaon-s81 .hw-person:hover span:last-child{text-decoration:underline;text-underline-offset:4px;} #hwaon-s81 .hw-silhouette{position:relative;display:block;} #hwaon-s81 .hw-silhouette::before{content:'';position:absolute;left:34%;top:8%;width:32%;height:34%;background:#B7B7B3;border-radius:46% 46% 43% 43%;} #hwaon-s81 .hw-silhouette::after{content:'';position:absolute;left:5%;bottom:0;width:90%;height:59%;background:#A3A5A4;clip-path:polygon(37% 0,63% 0,65% 9%,85% 18%,94% 33%,100% 100%,0 100%,6% 33%,15% 18%,35% 9%);} #hwaon-s81 .hw-mini{width:64px;height:68px;} #hwaon-s81 .hw-bridge{height:26px;position:relative;} #hwaon-s81 .hw-bridge::after{content:'';position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--hw-gold);} #hwaon-s81 .hw-stage{background:var(--hw-navy);color:var(--hw-cream);touch-action:pan-y;} #hwaon-s81 .hw-card-link{color:inherit;text-decoration:none;display:grid;grid-template-columns:58% 42%;position:relative;min-height:378px;} #hwaon-s81 .hw-copy{padding:44px 0 38px 48px;position:relative;z-index:1;} #hwaon-s81 h2{font-family:'Noto Serif KR',serif;font-size:42px;line-height:1.55;letter-spacing:-.04em;font-weight:500;word-break:keep-all;overflow-wrap:anywhere;max-width:460px;min-height:130px;} #hwaon-s81 .hw-copy .hw-cred{margin:14px 0 0;font-size:16px;line-height:1.5;color:#C9A96E;letter-spacing:.01em;} /* [S83-D] 패널 둘째 행 */ #hwaon-s81 .hw-identity{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-top:24px;line-height:1.5;} #hwaon-s81 .hw-identity strong{font-size:27px;font-weight:500;letter-spacing:.04em;} #hwaon-s81 .hw-identity>span{font-size:15px;} #hwaon-s81 .hw-profile{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;background:transparent;color:var(--hw-cream);border:1px solid var(--hw-gold);font-size:24px;line-height:1.3;font-weight:500;padding:12px 18px;min-height:54px;margin-top:24px;} #hwaon-s81 .hw-card-link:hover .hw-profile{text-decoration:underline;text-underline-offset:5px;} #hwaon-s81 .hw-portrait{width:min(100%,370px);height:350px;align-self:end;justify-self:center;} #hwaon-s81 .hw-photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;} #hwaon-s81 .hw-utility{display:flex;justify-content:space-between;align-items:center;margin-top:12px;min-height:44px;} #hwaon-s81 .hw-chosen{font-size:13px;line-height:1.5;} #hwaon-s81 .hw-arrows{display:flex;gap:8px;} #hwaon-s81 .hw-arrows button{width:44px;height:44px;border:1px solid var(--hw-navy);color:var(--hw-navy);background:transparent;font-size:22px;line-height:1;} #hwaon-s81 .hw-arrows button:hover{color:var(--hw-cream);background:var(--hw-navy);} #hwaon-s81 .hw-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;} @container (max-width:1100px){ #hwaon-s81 .hw-section{width:calc(100% - 80px);padding-top:32px;} #hwaon-s81 .hw-roster{gap:8px;} #hwaon-s81 .hw-copy{padding-left:32px;} #hwaon-s81 h2{font-size:36px;min-height:112px;} #hwaon-s81 .hw-card-link{min-height:355px;} #hwaon-s81 .hw-portrait{height:320px;} } @container (max-width:700px){ #hwaon-s81 .hw-section{width:calc(100% - 40px);padding-top:24px;padding-bottom:18px;} #hwaon-s81 .hw-header{display:block;margin-bottom:18px;} #hwaon-s81 .hw-eyebrow{font-size:14px;} #hwaon-s81 .hw-context{font-size:23px;margin-top:6px;} #hwaon-s81 .hw-flow{font-size:14px;margin:5px 0 0;line-height:1.5;} #hwaon-s81 .hw-roster{display:flex;flex-direction:column;gap:14px;padding:0 0 0 10px;} #hwaon-s81 .hw-roster::after{left:0;right:auto;top:101px;bottom:0;height:auto;width:1px;} #hwaon-s81 .hw-roster-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;position:relative;padding-bottom:14px;} #hwaon-s81 .hw-roster-row::after{content:'';position:absolute;left:-10px;right:0;bottom:0;height:1px;background:var(--hw-gold);} #hwaon-s81 .hw-person{padding:4px 2px 7px;gap:5px;font-size:14px;line-height:1.4;} #hwaon-s81 .hw-mini{height:52px;width:51px;} #hwaon-s81 .hw-person::after{height:14px;} #hwaon-s81 .hw-bridge{height:18px;} #hwaon-s81 .hw-card-link{display:grid;grid-template-columns:minmax(0,1fr) 44%;min-height:335px;} #hwaon-s81 .hw-copy{grid-column:1/-1;grid-row:1;padding:24px 20px 22px;display:grid;grid-template-columns:56% 44%;align-content:start;} #hwaon-s81 h2{grid-column:1/-1;max-width:270px;font-size:25px;line-height:1.5;letter-spacing:-.045em;min-height:112.5px;} #hwaon-s81 .hw-identity{grid-column:1;display:flex;flex-direction:column;align-items:flex-start;gap:0;margin-top:18px;line-height:1.55;} #hwaon-s81 .hw-identity strong{font-size:22px;} #hwaon-s81 .hw-identity>span{font-size:13px;} #hwaon-s81 .hw-profile{grid-column:1;justify-self:start;gap:8px;font-size:24px;white-space:nowrap;padding:11px 10px;margin-top:18px;min-height:54px;} #hwaon-s81 .hw-profile>span{display:none;} #hwaon-s81 .hw-portrait{grid-column:2;grid-row:1;width:100%;height:170px;align-self:end;justify-self:end;} #hwaon-s81 .hw-utility{margin-top:9px;} } @container (max-width:360px){ #hwaon-s81 .hw-section{width:calc(100% - 32px);} #hwaon-s81 .hw-copy{padding-left:16px;padding-right:16px;} #hwaon-s81 h2{font-size:23px;min-height:138px;} #hwaon-s81 .hw-profile{font-size:24px;padding-left:8px;padding-right:8px;} #hwaon-s81 .hw-portrait{height:155px;} } /* ───────── k2.css ───────── */ /* ===== S82-K 화온안(k2) — 외부 구조 위에 화온 디자인 디렉션을 얹는 오버라이드 ===== */ /* 원칙: 섹션마다 한 축만 말한다 · 눈썹→제목→본문 3단 위계를 5섹션이 공유 · 골드는 선과 한 단어 · 오렌지 0 · radius 0 · shadow 0 */ .hwa-s81, #hwaon-s81, .l-hero{--k-navy:#1B2A4A;--k-cream:#F5F0EB;--k-paper:#FAFAF7;--k-gold:#C9A96E;--k-goldink:#5C4518;--k-mute:rgba(27,42,74,.62);--k-line:rgba(27,42,74,.14)} /* ── 공통 헤더 모듈: 눈썹(Cormorant 13/.22em 골드잉크) · 제목(Noto Serif 44/1.3 600) ── */ .kh-eye,.hwa-eye,#hwaon-s81 .hw-eyebrow{font-family:'Cormorant Garamond',serif!important;font-size:13px!important;line-height:1.4!important;letter-spacing:.22em!important;text-transform:uppercase;color:var(--k-goldink)!important;margin:0 0 14px!important;padding:0!important} .kh-eye{color:var(--k-gold)!important} .hwa-eye::before{width:32px;margin-right:12px;vertical-align:middle} #hwaon-s81 .hw-eyebrow::before{display:none} .hwa-s81 h2,#hwaon-s81 .hw-context{font-family:'Noto Serif KR',serif;font-size:44px;line-height:1.3;letter-spacing:-.02em;font-weight:600;color:var(--k-navy)} .hwa-head{margin-bottom:40px} .hwa-wrap{max-width:1440px;width:calc(100% - 128px)} /* ── 1 히어로: 「사람이 있다」 한 축 · 8인이 같은 바닥에 선다 ── */ .k-hero{padding-top:80px;border-bottom:0} .kh-top{margin-bottom:64px;align-items:flex-end} .kh-h1{font-size:88px;line-height:1.06;letter-spacing:-.025em;font-weight:600} .kh-h1 em{color:var(--k-gold)} .kh-cta{font-size:15px;letter-spacing:.08em;border-bottom-color:rgba(201,169,110,.6);transition:border-color .2s}.kh-cta:hover{border-bottom-color:var(--k-gold)} .kh-list{gap:10px;position:relative} .kh-list::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--k-gold)} .kh-p{background:transparent} .kh-img{background:rgba(245,240,235,.035)} .kh-name{height:64px;font-size:19px;letter-spacing:.02em;border-top:1px solid rgba(201,169,110,.35);transition:border-color .2s} .kh-name span{color:var(--k-gold);opacity:.45;transition:opacity .2s,transform .2s} .kh-a:hover .kh-name{border-top-color:var(--k-gold)}.kh-a:hover .kh-name span{opacity:1;transform:translateX(3px)} /* ── 2 리드 슬라이더: 「이 분야를 어떤 시각으로 보는가」 · 시각 문장이 주인공 · 프로필은 이름 옆 조용한 링크 ── */ #hwaon-s81{background:var(--k-paper)} #hwaon-s81 .hw-section{max-width:1440px;width:calc(100% - 128px);padding:72px 0 40px} #hwaon-s81 .hw-header{margin-bottom:36px} #hwaon-s81 .hw-flow{font-size:15px;color:var(--k-mute);margin-bottom:10px} #hwaon-s81 .hw-roster{padding-bottom:22px} #hwaon-s81 .hw-person{gap:10px;padding:6px 8px 12px;transition:color .2s} #hwaon-s81 .hw-person span:last-child{font-size:13px;letter-spacing:.04em;color:var(--k-mute)} #hwaon-s81 .hw-person[aria-pressed=true]{background:transparent;color:var(--k-navy)} #hwaon-s81 .hw-person[aria-pressed=true] span:last-child{color:var(--k-navy);font-weight:600} #hwaon-s81 .hw-person[aria-pressed=true] .hw-mini{outline:1px solid var(--k-gold);outline-offset:3px} #hwaon-s81 .hw-person::after{background:rgba(201,169,110,.45)} #hwaon-s81 .hw-person[aria-pressed=true]::after{background:var(--k-gold);width:1px} #hwaon-s81 .hw-stage{background:var(--k-navy)} #hwaon-s81 .hw-copy{padding:56px 0 48px 56px} #hwaon-s81 h2{font-size:40px;line-height:1.45;font-weight:500;letter-spacing:-.02em;max-width:520px;min-height:0} #hwaon-s81 h2::before{content:'';display:block;width:40px;height:1px;background:var(--k-gold);margin-bottom:24px} #hwaon-s81 .hw-identity{margin-top:32px;gap:12px} #hwaon-s81 .hw-identity strong{font-size:24px;letter-spacing:.06em} #hwaon-s81 .hw-identity>span{font-size:14px;color:rgba(245,240,235,.7)} #hwaon-s81 .hw-profile{color:var(--k-cream);font-size:14px;letter-spacing:.08em;border:0;border-bottom:1px solid rgba(201,169,110,.6);padding:0 0 6px;min-height:0;margin-top:28px;background:transparent;gap:10px;transition:border-color .2s} #hwaon-s81 .hw-card-link:hover .hw-profile{text-decoration:none;border-bottom-color:var(--k-gold)} #hwaon-s81 .hw-utility{margin-top:14px} #hwaon-s81 .hw-chosen{font-family:'Cormorant Garamond',serif;letter-spacing:.14em;font-size:13px;color:var(--k-goldink)} #hwaon-s81 .hw-arrows button{border-color:rgba(27,42,74,.35);color:var(--k-navy)} /* ── 3 증명 띠: 「결과가 있다」 · 결과 → 제목 → 메타 순 · 후기는 골드 세로선 하나 ── */ .hwa-proof.hwa-light{--surface:var(--k-cream)} .hwa-proof{padding-block:72px 64px} .hwa-subhead{margin-bottom:8px} .hwa-subhead h3{font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--k-goldink);font-weight:500} .hwa-more{font-size:13px;letter-spacing:.04em;color:var(--k-mute)} .hwa-case{display:flex;flex-direction:column;gap:10px;min-height:0;padding:20px 0 22px;border-top:1px solid var(--k-line);transition:border-color .2s} .hwa-case:hover{border-top-color:var(--k-gold)} .hwa-result{order:-1;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--k-goldink)} .hwa-case h3{font-family:'Noto Serif KR',serif;font-weight:500;font-size:19px;line-height:1.5;letter-spacing:-.01em} .hwa-s81 a:hover h3{text-decoration:none;color:var(--k-goldink)} .hwa-case-meta{order:2;margin-top:auto;font-size:12px;color:var(--k-mute);letter-spacing:.02em} .hwa-review-grid{min-height:0} .hwa-review{border-top:0;border-left:0;padding:6px 0;gap:10px}/* [S82-C2] 선은 인용문에만 */ .hwa-review blockquote{border-left:1px solid var(--k-gold);padding-left:22px} .hwa-review figcaption{padding-left:23px} .hwa-review blockquote{font-size:17px;line-height:1.7;font-weight:400;color:var(--k-navy)} .hwa-review figcaption{font-size:12px;color:var(--k-mute);letter-spacing:.02em} /* ── 4 유형 탐색: 「내 상황이 여기 있다」 · 의뢰인의 말이 제목급, 유형명은 눈썹, 절차는 각주 ── */ .hwa-types{border-top:0;padding-block:72px 64px;--surface:var(--k-paper)} .hwa-type{display:flex;flex-direction:column;gap:10px;min-height:0;padding:22px 0 24px;border-top:1px solid var(--k-line);transition:border-color .2s} .hwa-type:hover{border-top-color:var(--k-gold)} .hwa-type h3{order:-1;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--k-goldink);margin:0} .hwa-type p{font-family:'Noto Serif KR',serif;font-size:21px;line-height:1.45;font-weight:500;color:var(--k-navy);margin:0;flex:1} .hwa-keywords{font-size:13px;color:var(--k-mute);margin-top:6px} /* ── 5 관련 센터·지역: 「다른 문, 다른 곳」 · 낮고 조용한 색인 ── */ .hwa-navigation{--surface:var(--k-cream);padding-block:56px 48px;border-top:1px solid var(--k-line)} .hwa-navigation .hwa-head{margin-bottom:24px} .hwa-navigation h2{font-size:28px} .hwa-center{min-height:0;padding:18px 0;border-top:1px solid var(--k-line);transition:border-color .2s} .hwa-center:hover{border-top-color:var(--k-gold)} .hwa-center h3{font-size:17px;font-weight:600;margin-bottom:4px} .hwa-center p{font-size:14px;color:var(--k-mute)} .hwa-center>span{font-size:18px;color:var(--k-gold);transition:transform .2s}.hwa-center:hover>span{transform:translateX(3px)} .hwa-regions{margin-top:28px;padding-top:20px;border-top:1px solid var(--k-line)} .hwa-regions>p{font-family:'Cormorant Garamond',serif;letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--k-goldink)} .hwa-region-links a{font-size:13px;color:rgba(27,42,74,.8)} /* ── 반응형 ── */ @media (max-width:1439px){.kh-h1{font-size:68px}.hwa-s81 h2,#hwaon-s81 .hw-context{font-size:38px}#hwaon-s81 h2{font-size:34px}} @media (max-width:767px){ .k-hero{padding-top:40px}.kh-top{margin-bottom:28px}.kh-h1{font-size:34px;line-height:1.2}.kh-name{height:56px;font-size:17px} .hwa-s81 h2,#hwaon-s81 .hw-context{font-size:28px}.hwa-head{margin-bottom:24px}.hwa-wrap{width:calc(100% - 40px)} #hwaon-s81 .hw-section{width:calc(100% - 40px);padding:48px 0 24px}#hwaon-s81 h2{font-size:24px;line-height:1.5}#hwaon-s81 .hw-copy{padding:32px 0 28px 24px} .hwa-proof,.hwa-types{padding-block:48px 40px}.hwa-case{padding:14px 0 16px;gap:6px}.hwa-case h3{font-size:16px}.hwa-review{padding:4px 0 4px 14px}.hwa-review blockquote{font-size:15px;line-height:1.6} .hwa-type{padding:14px 0 16px;gap:6px}.hwa-type p{font-size:17px} .hwa-navigation{padding-block:40px 32px}.hwa-navigation h2{font-size:22px}.hwa-center{padding:12px 0}.hwa-center h3{font-size:15px} } /* ── 판단 노트(hn) — 설명 블록 대체 · 문안 무변 · 판단 문장 1 을 앞으로(결정 1(a)·3(a)) ── */ /* [S82-B2a] 판단 노트 — 현재 하네스 k2.css(md5 39912f89) 원문으로 갱신(B1 병합본은 구판 4ebdbc27) */ .hwa-notes{--surface:var(--k-paper);padding-block:64px 56px;border-top:1px solid var(--k-line)} .hwa-s81 .hn-pull{padding-left:22px}/* [S82-D] .hwa-s81 :is(p){padding:0}(0,1,1) 에 밀리던 인용 패딩 복원 */ /* [S83-C0h] S82-D 이음새 규칙 철회 — 실체는 지면 `.re-checklist` pb 100 · 노트 상단 64 복원 */ .hwa-notes.hwa-notes--inline{--surface:transparent;background:transparent;padding-block:8px 48px;border-top:0}.hwa-notes--inline .hwa-wrap{width:100%;max-width:none}/* [S82-D → S83-C0h] 지면 섹션 안 인라인 노트 · 배경 상속(별도 판 아님) */ .hn{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:48px;padding:44px 0;border-top:1px solid var(--k-line)} .hn-head .hwa-eye{white-space:nowrap;font-size:12px!important} .hn:first-child{border-top:0;padding-top:0} .hn-head .hwa-eye{margin-bottom:10px!important} .hn-ko{margin:0;font-family:'Noto Serif KR',serif;font-size:18px;line-height:1.45;font-weight:600;color:var(--k-navy);word-break:keep-all} .hn-body{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,10fr);gap:56px;align-items:start} .hn-pull{margin:0;padding-left:22px;border-left:1px solid var(--k-gold);font-family:'Noto Serif KR',serif;font-size:26px;line-height:1.5;font-weight:500;letter-spacing:-.01em;color:var(--k-navy);word-break:keep-all;max-width:22em} .hn-text p{margin:0 0 16px;font-size:16px;line-height:1.85;color:rgba(27,42,74,.84);word-break:keep-all;max-width:36em} .hn-text p:last-child{margin-bottom:0} @media (max-width:1023px){.hn{grid-template-columns:1fr;gap:20px}.hn-body{grid-template-columns:1fr;gap:20px}} @media (max-width:767px){.hwa-notes{padding-block:44px 36px}.hn{padding:28px 0}.hn-ko{font-size:18px}.hn-pull{font-size:19px}.hwa-s81 .hn-pull{padding-left:14px}.hn-text p{font-size:14.5px;line-height:1.8}} /* ───────── k3-hero.css ───────── */ /* ===== 랜딩 히어로 ⓑ(k3) — 「내 문제를 아는가」 한 문장 + 「사람이 있다」 3인 · 목표 ≤560px · CTA 0(상시 바) · 원칙·자격·내부 번호 0 ===== */ .l-hero{position:relative;background:#1B2A4A;color:#F5F0EB;font-family:Pretendard,sans-serif;padding:96px 96px 0;overflow:hidden} .l-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(1200px 520px at 78% 20%,rgba(201,169,110,.10),transparent 60%);pointer-events:none} .lh-wrap{position:relative;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end;padding-bottom:64px} .lh-eye{display:flex;align-items:center;gap:14px;margin:0 0 28px;font-size:13px;letter-spacing:.08em;color:rgba(245,240,235,.75)} .lh-eye [lang=en]{font-family:'Cormorant Garamond',serif;font-size:15px;letter-spacing:.24em;color:#C9A96E} .lh-sep{display:inline-block;width:28px;height:1px;background:#C9A96E} .lh-h1{margin:0;font-family:'Noto Serif KR',serif;font-weight:600;font-size:64px;line-height:1.18;letter-spacing:-.02em;word-break:keep-all} .lh-h1 span{display:block}.lh-h1 em{font-style:normal;color:#C9A96E} .lh-sub{margin:28px 0 0;max-width:34em;font-size:17px;line-height:1.75;color:rgba(245,240,235,.8);word-break:keep-all} .lh-right{align-self:end} .lh-label{margin:0 0 14px;font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#C9A96E} .lh-people{list-style:none;margin:0;padding:18px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border-top:1px solid rgba(201,169,110,.55)} .lh-p{display:block;color:inherit;text-decoration:none} .lh-img{display:block;aspect-ratio:1/1;overflow:hidden;background:rgba(245,240,235,.05)} .lh-img img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.92)} .lh-name{display:flex;align-items:center;justify-content:space-between;height:48px;font-size:16px;letter-spacing:.02em;border-bottom:1px solid transparent;transition:border-color .2s} .lh-name::after{content:'→';color:#C9A96E;opacity:.5;transition:opacity .2s,transform .2s} .lh-p:hover .lh-name{border-bottom-color:#C9A96E}.lh-p:hover .lh-name::after{opacity:1;transform:translateX(3px)} .lh-p:focus-visible{outline:2px solid #C9A96E;outline-offset:3px} .lh-base{height:1px;background:#C9A96E;margin:0 -96px} @media (max-width:1439px){.lh-base{margin:0 -56px}} @media (max-width:767px){.lh-base{margin:0 -24px}} @media (max-width:1439px){.l-hero{padding:72px 56px 0}.lh-wrap{gap:40px;padding-bottom:48px}.lh-h1{font-size:50px}.lh-sub{font-size:16px}} @media (max-width:1023px){.lh-wrap{grid-template-columns:1fr;gap:36px}.lh-right{max-width:480px}} @media (max-width:767px){.l-hero{padding:40px 24px 0}.lh-wrap{gap:28px;padding-bottom:32px}.lh-eye{margin-bottom:18px}.lh-h1{font-size:31px;line-height:1.28}.lh-sub{margin-top:16px;font-size:15px;line-height:1.7}.lh-people{gap:10px;padding-top:12px}.lh-name{height:40px;font-size:14px}} /* ── k3 v2 · 절제된 깊이 3 + 모션 1 (대표 질문 20:4x · 「밍밍한가」) ── */ /* 깊이 1 · 면: 사이트 전역 네이비 격자(현행 히어로 배경 연속) + 우상단 골드 광원 하나 */ .l-hero{background-color:#1B2A4A;background-image:linear-gradient(rgba(245,240,235,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(245,240,235,.035) 1px,transparent 1px);background-size:96px 96px;background-position:center top} /* 깊이 2 · 활자: 제목 둘째 줄을 한 단 들여 시선을 골드 단어로 */ .lh-h1 span+span{padding-left:0} @media (max-width:767px){.lh-h1 span+span{padding-left:0}} /* 깊이 3 · 사진: 정사각 위 골드 헤어라인 · hover 시 아주 느린 확대(1.03 · 1.2s) · 그림자·둥근 모서리 없음 */ .lh-img{position:relative} .lh-img::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:#C9A96E;z-index:1;opacity:.55;transition:opacity .3s} .lh-img img{transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .6s} .lh-p:hover .lh-img img{transform:scale(1.03);filter:saturate(1)} .lh-p:hover .lh-img::before{opacity:1} /* 모션 1 · 첫 화면 한 번의 등장(눈썹 → 제목 → 부제 → 사진 3 순 · 총 0.9s · 반복 0 · 자동 회전 0) · 제목은 투명도 없이 위치만(LCP 보호) */ @keyframes lh-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes lh-rise-solid{from{transform:translateY(10px)}to{transform:none}} @keyframes lh-line{from{transform:scaleX(0)}to{transform:scaleX(1)}} .lh-eye{animation:lh-rise .6s cubic-bezier(.16,1,.3,1) both} .lh-h1{animation:lh-rise-solid .7s cubic-bezier(.16,1,.3,1) both} .lh-sub{animation:lh-rise .6s cubic-bezier(.16,1,.3,1) .12s both} .lh-label{animation:lh-rise .5s cubic-bezier(.16,1,.3,1) .2s both} .lh-people{position:relative} .lh-people::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:#C9A96E;transform-origin:left;animation:lh-line .8s cubic-bezier(.16,1,.3,1) .25s both} .lh-people li{animation:lh-rise .6s cubic-bezier(.16,1,.3,1) both} .lh-people li:nth-child(1){animation-delay:.3s}.lh-people li:nth-child(2){animation-delay:.38s}.lh-people li:nth-child(3){animation-delay:.46s} .lh-base{transform-origin:left;animation:lh-line 1s cubic-bezier(.16,1,.3,1) .35s both} @media (prefers-reduced-motion:reduce){.l-hero *,.l-hero *::before{animation:none!important;transition:none!important}} /* [S84-C4] 지역 court 8 · 형사 h3 1절 details(F52) · 판정표 A(a)·B(a) */ .gn-crim-details{background:#1B2A4A} .gn-crim-summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1180px;margin:0 auto;padding:28px 24px;border-top:1px solid rgba(201,169,110,.25)} .gn-crim-summary::-webkit-details-marker{display:none} .gn-crim-h3{font-family:'Noto Serif KR',serif;font-size:clamp(18px,2vw,24px);font-weight:600;color:#fff;margin:0;line-height:1.4;word-break:keep-all} .gn-crim-toggle{flex:0 0 auto;font-size:13px;color:#C9A96E;border:1px solid rgba(201,169,110,.45);border-radius:999px;padding:6px 14px;white-space:nowrap} .gn-crim-toggle::before{content:'펼치기'} .gn-crim-details[open] .gn-crim-toggle::before{content:'접기'} .gn-crim-details .gn-head p.gn-crim-h{margin:0 0 8px} /* [S84-C5] gn-crim-h 강등 헤딩 타이포 복원 — 지면 인라인 `.gn-head p.dark{16px}` 와 특이성 동률(0,2,1)이라 (0,3,1)로 올림(사본 실화면 01:5x 주입 실측) */ .gn-head p.gn-crim-h.dark,.gn-head p.gn-crim-h.light{font-family:var(--font-serif,'Noto Serif KR',serif);font-size:clamp(26px,3.2vw,38px);font-weight:700;line-height:1.3;letter-spacing:-.03em;margin:0} .gn-head p.gn-crim-h.light{color:#fff} .gn-head p.gn-crim-h.dark{color:var(--hw-navy,#1B2A4A)} /* [S85-C1] 커스텀 6 강등 헤딩(p.gn-crim-h) 타이포 복원 — 지면 인라인 `.mp-head h2` 계열이 h2 태그 한정이고 `.mp-head p.dark`(0,2,1) 부제 규칙이 p 를 잡으므로 0,3,1 로 덮는다(S84-C5 `.gn-head p.gn-crim-h` 동형 · 규약 202 검증 축 = computed font-size·color) */ .mp-head p.gn-crim-h.dark,.mp-head p.gn-crim-h.light,.gs-head p.gn-crim-h.dark,.gs-head p.gn-crim-h.light,.yc-head p.gn-crim-h.dark,.yc-head p.gn-crim-h.light,.gr-head p.gn-crim-h.dark,.gr-head p.gn-crim-h.light,.yd-head p.gn-crim-h.dark,.yd-head p.gn-crim-h.light,.yeo-head p.gn-crim-h.dark,.yeo-head p.gn-crim-h.light{font-family:var(--font-serif,'Noto Serif KR',serif);font-size:clamp(26px,3.2vw,38px);font-weight:700;line-height:1.3;letter-spacing:-.03em;margin:0 0 8px} .mp-head p.gn-crim-h.dark,.gs-head p.gn-crim-h.dark,.yc-head p.gn-crim-h.dark,.gr-head p.gn-crim-h.dark,.yd-head p.gn-crim-h.dark,.yeo-head p.gn-crim-h.dark{color:var(--hw-navy,#1B2A4A)} .mp-head p.gn-crim-h.light,.gs-head p.gn-crim-h.light,.yc-head p.gn-crim-h.light,.gr-head p.gn-crim-h.light,.yd-head p.gn-crim-h.light,.yeo-head p.gn-crim-h.light{color:#fff} p.gn-crim-h.yeo-fc-title,p.gn-crim-h.yeo-issues-title{margin:0 0 8px}